/* =====================================================================
STAR BUBBLES - ANA STİL DOSYASI (assets/css/style.css)
Tema: Köpük baloncuk + Glassmorphism
Fontlar: "Baloo 2" (display, Plumpfull alternatifi) + "Nunito" (gövde)
===================================================================== */
/* ------------------ 1. KURUMSAL KİMLİK DEĞİŞKENLERİ ------------------ */
:root {
/* Marka renkleri */
--mavi: #009fe3; /* Güven, temizlik — ana zemin ve vurgular */
--sari: #fcbf1d; /* Neşe — CTA butonları */
--pembe: #e64592; /* Yardımcı vurgu */
--mor: #5a307e; /* Yardımcı vurgu, derinlik */
--antrasit: #1d1d1b; /* Metinler */
/* Türetilmiş tonlar */
--mavi-acik: #e5f6fd;
--mavi-koyu: #007bb3;
--sari-koyu: #e0a800;
--pembe-acik: #fdeef5;
/* Tema (aydınlık mod) */
--zemin: #f2fbff; /* Marka zemin tonu — tema motoruyla birebir */
--zemin-2: #ffffff;
--metin: var(--antrasit);
--metin-soluk: #5c6b73;
--cam-zemin: rgba(255, 255, 255, 0.55);
--cam-cizgi: rgba(255, 255, 255, 0.75);
--cam-golge: 0 8px 32px rgba(0, 159, 227, 0.14);
/* Ölçüler */
--radius-buyuk: 28px;
--radius-orta: 18px;
--radius-hap: 999px;
--gecis: 220ms ease;
/* Tipografi */
--font-baslik: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
--font-govde: "Nunito", Arial, Helvetica, sans-serif;
}
/* Gece modu: mor-lacivert derinlik, baloncuklar yıldıza döner ✨ */
[data-theme="dark"] {
--zemin: #141225;
--zemin-2: #1d1a33;
--metin: #f2f4f8;
--metin-soluk: #a9a7c4;
--mavi-acik: #1c2a4a;
--pembe-acik: #2c1830;
--cam-zemin: rgba(35, 30, 65, 0.55);
--cam-cizgi: rgba(255, 255, 255, 0.12);
--cam-golge: 0 8px 32px rgba(0, 0, 0, 0.45);
}
/* ------------------ 2. TEMEL SIFIRLAMA ------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-govde);
font-size: 16px;
line-height: 1.6;
color: var(--metin);
background: var(--zemin);
transition: background var(--gecis), color var(--gecis);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, .logo-yazi {
font-family: var(--font-baslik);
line-height: 1.15;
letter-spacing: 0.2px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.konteyner { width: min(1200px, 92%); margin-inline: auto; }
/* Erişilebilirlik: klavye odağı her zaman görünür */
:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; border-radius: 6px; }
/* ------------------ 3. ORTAK CAM PANEL (Glassmorphism) ------------------ */
.cam-panel {
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
border-radius: var(--radius-buyuk);
box-shadow: var(--cam-golge);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* ------------------ 4. BUTONLAR ------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-baslik);
font-weight: 700;
font-size: 1rem;
padding: 12px 26px;
border-radius: var(--radius-hap);
transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
/* Ana CTA: Sarı = neşe */
.btn-cta {
background: var(--sari);
color: var(--antrasit);
box-shadow: 0 6px 20px rgba(252, 191, 29, 0.45);
}
.btn-cta:hover { background: var(--sari-koyu); }
/* Cam buton (ikincil) */
.btn-cam {
background: var(--cam-zemin);
border: 2px solid var(--mavi);
color: var(--mavi);
backdrop-filter: blur(8px);
}
[data-theme="dark"] .btn-cam { color: #7fd4ff; border-color: #7fd4ff; }
/* Sepete ekle: Mavi = güven */
.btn-sepet {
flex: 1;
background: var(--mavi);
color: #fff;
box-shadow: 0 5px 16px rgba(0, 159, 227, 0.35);
font-size: 0.92rem;
padding: 10px 16px;
}
.btn-sepet:hover { background: var(--mavi-koyu); }
/* Hızlı satın al: Pembe kıvılcım ⚡ */
.btn-hizli {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--pembe);
color: #fff;
font-size: 1.1rem;
box-shadow: 0 5px 14px rgba(230, 69, 146, 0.4);
flex-shrink: 0;
}
.btn-hizli:hover { background: var(--mor); }
.btn-tukendi {
flex: 1;
background: var(--metin-soluk);
color: #fff;
opacity: 0.6;
cursor: not-allowed;
padding: 10px 16px;
border-radius: var(--radius-hap);
font-family: var(--font-baslik);
}
/* ------------------ 5. DUYURU ŞERİDİ ------------------ */
.duyuru-serit {
background: linear-gradient(90deg, var(--mor), var(--pembe));
color: #fff;
text-align: center;
font-size: 0.85rem;
padding: 8px 14px;
}
/* 113c: Yatay kaydırma KİLİDİ — 'clip' pan'i fiziksel engeller ve sticky header'ı BOZMAZ
(önceki 'hidden' hem sticky'yi öldürüyordu hem programatik kaymaya izin veriyordu) */
body { overflow-x: clip; } /* 116: kilit yalnız body'de — karusel/scroll komutları serbest */
@supports not (overflow: clip) {
body { overflow-x: hidden; }
}
/* ------------------ 6. HEADER ------------------ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--cam-zemin);
border-bottom: 1px solid var(--cam-cizgi);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: box-shadow var(--gecis);
}
.site-header.kaydirildi { box-shadow: var(--cam-golge); }
.header-ic {
display: flex;
align-items: center;
gap: 22px;
padding: 14px 0;
}
/* Logo */
.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo-balon { font-size: 1.7rem; animation: yuz 4s ease-in-out infinite; display: inline-block; }
.logo-yazi {
font-size: 1.45rem;
font-weight: 800;
color: var(--mavi);
}
.logo-yazi em {
font-style: normal;
color: var(--sari);
-webkit-text-stroke: 1.2px #0284c7; /* 84: logodaki sarı-mavi sticker uyumu */
paint-order: stroke fill;
text-shadow: 0 1px 2px rgba(0, 90, 160, 0.2);
}
/* Arama kutusu */
.arama-kutusu {
position: relative;
flex: 1;
max-width: 420px;
}
.arama-kutusu input {
width: 100%;
padding: 11px 18px 11px 44px;
border: 2px solid transparent;
border-radius: var(--radius-hap);
background: var(--mavi-acik);
color: var(--metin);
font-family: var(--font-govde);
font-size: 0.95rem;
transition: border-color var(--gecis), background var(--gecis);
}
.arama-kutusu input:focus {
outline: none;
border-color: var(--mavi);
background: var(--zemin-2);
}
.arama-ikon {
position: absolute;
left: 15px; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
color: var(--mavi);
pointer-events: none;
}
/* AJAX sonuç kutusu */
.arama-sonuclari {
position: absolute;
top: calc(100% + 10px);
left: 0; right: 0;
max-height: 380px;
overflow-y: auto;
padding: 8px;
background: var(--zemin-2);
border: 1px solid var(--cam-cizgi);
border-radius: var(--radius-orta);
box-shadow: var(--cam-golge);
z-index: 120;
}
.arama-sonuc-satir {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
transition: background var(--gecis);
}
.arama-sonuc-satir:hover { background: var(--mavi-acik); }
.arama-sonuc-satir img,
.arama-sonuc-satir .mini-balon {
width: 42px; height: 42px;
border-radius: 10px;
object-fit: cover;
background: var(--mavi-acik);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.arama-sonuc-satir strong { font-size: 0.92rem; display: block; }
.arama-sonuc-satir span { font-size: 0.85rem; color: var(--pembe); font-weight: 700; }
.arama-bos { padding: 18px; text-align: center; color: var(--metin-soluk); font-size: 0.9rem; }
/* Navigasyon */
.ana-nav { display: flex; gap: 4px; }
.nav-link {
font-weight: 700;
font-size: 0.93rem;
padding: 8px 14px;
border-radius: var(--radius-hap);
color: var(--metin);
transition: background var(--gecis), color var(--gecis);
white-space: nowrap;
}
.nav-link:hover { background: var(--mavi-acik); color: var(--mavi); }
.nav-link.aktif { background: var(--mavi); color: #fff; }
/* Header ikon butonları */
.header-aksiyonlar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ikon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
border-radius: 50%;
color: var(--metin);
transition: background var(--gecis), transform var(--gecis);
}
.ikon-btn:hover { background: var(--mavi-acik); transform: translateY(-2px); }
.ikon-btn svg { width: 21px; height: 21px; }
/* Sepet rozeti */
.sepet-rozet {
position: absolute;
top: -2px; right: -4px;
min-width: 20px; height: 20px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
background: #e64592; /* 112: tema vurgusundan bağımsız — fav rozetiyle birebir aynı */
color: #fff;
font-size: 0.72rem;
font-weight: 800;
border-radius: var(--radius-hap);
border: 2px solid var(--zemin-2);
}
/* Tema butonu ikon geçişi */
.tema-ikon-gece { display: none; }
[data-theme="dark"] .tema-ikon-gunduz { display: none; }
[data-theme="dark"] .tema-ikon-gece { display: inline; }
.mobil-menu-btn { display: none; }
/* ------------------ 7. HERO ------------------ */
.hero {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--mavi) 0%, var(--mavi-koyu) 60%, var(--mor) 130%);
color: #fff;
padding: 80px 0 100px;
}
[data-theme="dark"] .hero {
background: linear-gradient(160deg, #1c2a4a 0%, #241d4a 60%, var(--mor) 130%);
}
.hero-ic {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: center;
gap: 40px;
}
.hero-etiket {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px);
padding: 7px 16px;
border-radius: var(--radius-hap);
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(2.4rem, 5.5vw, 4rem);
font-weight: 800;
margin-bottom: 16px;
}
.vurgu-sari { color: var(--sari); }
.vurgu-pembe { color: #ff9dce; }
.vurgu-mavi { color: var(--mavi); }
.hero-alt {
font-size: 1.1rem;
max-width: 480px;
opacity: 0.92;
margin-bottom: 30px;
}
.hero-btnler { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-cam { border-color: rgba(255,255,255,0.6); color: #fff; }
/* Dev cam balon (hero görseli) */
.hero-gorsel-cam { display: flex; justify-content: center; }
.dev-balon {
position: relative;
width: min(300px, 60vw);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.12) 28%,
rgba(230,69,146,0.18) 60%,
rgba(252,191,29,0.22) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.55);
backdrop-filter: blur(6px);
box-shadow: inset 0 0 40px rgba(255,255,255,0.25), 0 20px 60px rgba(0,0,0,0.18);
display: flex;
align-items: center;
justify-content: center;
animation: yuz 5s ease-in-out infinite;
}
.dev-balon-emoji { font-size: 5rem; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2)); }
.parilti {
position: absolute;
top: 14%; left: 18%;
width: 22%; height: 12%;
background: rgba(255,255,255,0.8);
border-radius: 50%;
transform: rotate(-30deg);
filter: blur(3px);
}
/* Süzülen küçük baloncuklar */
.balonlar { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.balon {
position: absolute;
bottom: -70px;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0.08) 40%,
rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.45);
animation: yuksel linear infinite;
}
.b1 { left: 6%; width: 34px; height: 34px; animation-duration: 11s; }
.b2 { left: 18%; width: 18px; height: 18px; animation-duration: 8s; animation-delay: 2s; }
.b3 { left: 32%; width: 46px; height: 46px; animation-duration: 14s; animation-delay: 1s; }
.b4 { left: 47%; width: 22px; height: 22px; animation-duration: 9s; animation-delay: 4s; }
.b5 { left: 60%; width: 38px; height: 38px; animation-duration: 12s; animation-delay: 0.5s; }
.b6 { left: 73%; width: 16px; height: 16px; animation-duration: 7s; animation-delay: 3s; }
.b7 { left: 84%; width: 42px; height: 42px; animation-duration: 13s; animation-delay: 2.5s; }
.b8 { left: 93%; width: 26px; height: 26px; animation-duration: 10s; animation-delay: 5s; }
@keyframes yuksel {
0% { transform: translateY(0) translateX(0); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateY(-110vh) translateX(24px); opacity: 0; }
}
@keyframes yuz {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ------------------ 8. GÜVEN ŞERİDİ ------------------ */
.guven-serit { margin-top: -46px; position: relative; z-index: 3; }
.guven-ic {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.guven-kart {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
border-radius: var(--radius-orta);
box-shadow: var(--cam-golge);
backdrop-filter: blur(14px);
}
.guven-ikon { font-size: 1.8rem; }
.guven-kart strong { font-family: var(--font-baslik); font-size: 0.95rem; display: block; }
.guven-kart p { font-size: 0.82rem; color: var(--metin-soluk); }
/* ------------------ 9. ÜRÜN VİTRİNİ ------------------ */
.urunler-bolum { padding: 80px 0; }
.bolum-baslik { text-align: center; margin-bottom: 44px; }
.bolum-baslik h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
.bolum-baslik p { color: var(--metin-soluk); margin-top: 6px; }
.urun-izgara {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
gap: 26px;
}
.urun-kart {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform var(--gecis), box-shadow var(--gecis);
}
.urun-kart:hover {
transform: translateY(-6px);
box-shadow: 0 16px 44px rgba(0, 159, 227, 0.22);
}
/* Rozetler */
.rozet {
position: absolute;
top: 14px;
z-index: 5;
font-family: var(--font-baslik);
font-size: 0.75rem;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--radius-hap);
color: #fff;
}
.rozet-yeni { left: 14px; background: var(--mavi); }
.rozet-indirim { right: 14px; background: var(--pembe); }
/* Görsel alanı */
.urun-gorsel-alan {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 0.85;
background: linear-gradient(150deg, var(--mavi-acik), var(--pembe-acik));
overflow: hidden;
}
.urun-gorsel-alan img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.urun-kart:hover .urun-gorsel-alan img { transform: scale(1.07); }
.gorsel-yoksa { font-size: 3.4rem; opacity: 0.5; animation: yuz 4s ease-in-out infinite; }
/* Bilgi alanı */
.urun-bilgi {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px;
flex: 1;
}
.urun-ad { font-size: 1.05rem; font-weight: 700; }
.urun-ad a:hover { color: var(--mavi); }
.urun-aciklama { font-size: 0.85rem; color: var(--metin-soluk); }
.urun-fiyat-satir { margin-top: auto; padding-top: 6px; }
.fiyatlar { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fiyat {
font-family: var(--font-baslik);
font-size: 1.3rem;
font-weight: 800;
color: var(--mavi);
}
[data-theme="dark"] .fiyat { color: #7fd4ff; }
.eski-fiyat { font-size: 0.9rem; color: var(--metin-soluk); }
.min-adet {
font-size: 0.72rem;
background: var(--mor);
color: #fff;
padding: 2px 9px;
border-radius: var(--radius-hap);
}
.urun-btnler { display: flex; gap: 8px; margin-top: 10px; }
/* Boş durum */
.bos-durum {
text-align: center;
padding: 70px 30px;
}
.bos-ikon { font-size: 3.6rem; display: block; margin-bottom: 12px; animation: yuz 4s ease-in-out infinite; }
.bos-durum h3 { font-size: 1.5rem; margin-bottom: 8px; }
.bos-durum p { color: var(--metin-soluk); max-width: 420px; margin-inline: auto; }
/* ------------------ 10. B2B BANT ------------------ */
.b2b-bant { padding: 20px 0 80px; }
.b2b-ic {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 36px 42px;
border-left: 6px solid var(--mor);
}
.b2b-ic h2 { font-size: 1.6rem; }
.b2b-ic p { color: var(--metin-soluk); }
/* ------------------ 11. FOOTER ------------------ */
.site-footer {
background: var(--antrasit);
color: #e8e8e6;
padding-top: 56px;
}
[data-theme="dark"] .site-footer { background: #0d0b1a; }
.footer-ic {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 34px;
padding-bottom: 42px;
}
.footer-logo { font-size: 1.3rem; }
.footer-kolon p { font-size: 0.88rem; color: #b8b8b5; margin-top: 10px; max-width: 260px; }
.footer-kolon h4 {
font-family: var(--font-baslik);
color: var(--sari);
margin-bottom: 14px;
font-size: 1rem;
}
.footer-kolon a {
display: block;
font-size: 0.88rem;
color: #cfcfcc;
padding: 4px 0;
transition: color var(--gecis), transform var(--gecis);
}
.footer-kolon a:hover { color: var(--sari); transform: translateX(4px); }
.footer-alt {
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
padding: 18px;
font-size: 0.8rem;
color: #989895;
}
/* ------------------ 12. SOSYAL KANIT BİLDİRİMİ ------------------ */
.sosyal-kanit {
position: fixed;
left: 20px; bottom: 20px;
z-index: 200;
display: flex;
align-items: center;
gap: 12px;
max-width: 320px;
padding: 14px 18px;
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
border-radius: var(--radius-orta);
box-shadow: var(--cam-golge);
backdrop-filter: blur(14px);
font-size: 0.86rem;
animation: kanit-gir 400ms ease;
}
@keyframes kanit-gir {
from { transform: translateY(24px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ------------------ 13. RESPONSIVE ------------------ */
@media (max-width: 1024px) {
.ana-nav { display: none; }
.mobil-menu-btn { display: flex; }
/* Mobil menü açıkken nav dikey görünür */
.ana-nav.acik {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0; right: 0;
padding: 16px;
background: var(--zemin-2);
border-bottom: 1px solid var(--cam-cizgi);
box-shadow: var(--cam-golge);
}
}
@media (max-width: 860px) {
.hero-ic { grid-template-columns: 1fr; text-align: center; }
.hero-alt { margin-inline: auto; }
.hero-btnler { justify-content: center; }
.hero-gorsel-cam { order: -1; }
.dev-balon { width: min(200px, 50vw); }
.guven-ic { grid-template-columns: repeat(2, 1fr); }
.footer-ic { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.header-ic { flex-wrap: wrap; gap: 8px 10px; }
.arama-kutusu { order: 3; max-width: 100%; flex-basis: 100%; }
/* 113: dev logo terbiyesi — telefonda kompakt marka */
.nav-logo { height: 44px !important; }
.logo-yazi { font-size: 1.02rem; }
/* 113: Bireysel/Kurumsal seçici üst üste binmesin — alt alta tam genişlik */
.fatura-secim { flex-direction: column; align-items: stretch; gap: 8px; }
.fatura-radyo { width: 100%; box-sizing: border-box; justify-content: flex-start; }
/* 113b: Üst bar — telefonda kompakt ikon takımı, iki düzenli satır */
.header-ic { justify-content: space-between; }
.ikon-btn { width: 40px; height: 40px; }
.header-ic .btn, .giris-btn { padding: 8px 14px; font-size: 0.8rem; }
/* 113b: Giriş (Yıldız Sahnesi) — butonlar ekrana göre, kenarlardan nefes */
.ys109 .konteyner { padding-inline: 16px !important; }
.ys109-baslik { font-size: 2.4rem !important; }
.ys109-alt { font-size: 1rem !important; }
.ys109-dugmeler { max-width: 100% !important; width: 100%; }
.ys109-btn { width: 100%; box-sizing: border-box; padding: 13px 18px !important; font-size: 0.95rem !important; }
.ys109-kanitlar { gap: 8px !important; }
.ys109-bildirim { max-width: 100%; font-size: 0.76rem !important; }
.y80-maskot { width: min(190px, 60%) !important; }
.y80-ipucu { display: none !important; } /* dar ekranda taşma yapan tek-satır ipucu */
/* 113b: Özellik şeridi 2 sütun, oyun yan akışları gizli (yer telefonda oyuna kalsın) */
.s98-ozellikler { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.yan-akis { display: none !important; }
.oyun-panel { max-width: 100% !important; }
.guven-ic { grid-template-columns: 1fr; }
.footer-ic { grid-template-columns: 1fr; }
.b2b-ic { padding: 28px; }
}
/* ------------------ 14. HAREKET AZALTMA (Erişilebilirlik) ------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* =====================================================================
3. AŞAMA EKLERİ: Sepet Çekmecesi, S.S.S. Akordiyon, Toast
===================================================================== */
/* ------------------ 15. SEPET ÇEKMECESİ (DRAWER) ------------------ */
.cekmece-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(29, 29, 27, 0.45);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity var(--gecis), visibility var(--gecis);
}
.cekmece-overlay.acik { opacity: 1; visibility: visible; }
.sepet-cekmece {
position: fixed;
top: 0; right: 0;
z-index: 310;
width: min(420px, 94vw);
height: 100dvh;
display: flex;
flex-direction: column;
background: var(--zemin-2);
border-left: 1px solid var(--cam-cizgi);
box-shadow: -12px 0 44px rgba(0, 0, 0, 0.18);
transform: translateX(105%);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sepet-cekmece.acik { transform: translateX(0); }
.cekmece-baslik {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--cam-cizgi);
}
.cekmece-baslik h3 { font-size: 1.25rem; }
.cekmece-kapat { font-size: 1.1rem; font-weight: 800; }
/* Dinamik kargo çubuğu */
.kargo-cubugu { padding: 16px 22px 6px; }
.kargo-metin { font-size: 0.86rem; margin-bottom: 8px; }
.kargo-ray {
height: 10px;
border-radius: var(--radius-hap);
background: var(--mavi-acik);
overflow: hidden;
}
.kargo-dolgu {
height: 100%;
border-radius: var(--radius-hap);
background: linear-gradient(90deg, var(--mavi), var(--pembe));
transition: width 500ms ease;
}
/* Gövde satırları */
.cekmece-govde {
flex: 1;
overflow-y: auto;
padding: 12px 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cekmece-satir {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
border-radius: var(--radius-orta);
}
.cekmece-satir img,
.cekmece-satir .mini-balon {
width: 56px; height: 56px;
border-radius: 12px;
object-fit: cover;
background: var(--mavi-acik);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.cekmece-satir-bilgi { flex: 1; min-width: 0; }
.cekmece-satir-bilgi strong {
display: block;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cekmece-birim { font-size: 0.8rem; color: var(--metin-soluk); }
.cekmece-satir-tutar {
font-family: var(--font-baslik);
font-weight: 800;
color: var(--mavi);
font-size: 0.95rem;
flex-shrink: 0;
}
[data-theme="dark"] .cekmece-satir-tutar { color: #7fd4ff; }
/* Adet kutusu */
.adet-kutusu {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
}
.adet-btn {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--mavi-acik);
color: var(--mavi);
font-weight: 800;
font-size: 0.95rem;
display: flex; align-items: center; justify-content: center;
transition: background var(--gecis), transform var(--gecis);
}
.adet-btn:hover { background: var(--mavi); color: #fff; transform: scale(1.1); }
.adet-sayi { min-width: 22px; text-align: center; font-weight: 800; font-size: 0.9rem; }
.satir-sil {
margin-left: 6px;
font-size: 0.95rem;
opacity: 0.55;
transition: opacity var(--gecis), transform var(--gecis);
}
.satir-sil:hover { opacity: 1; transform: scale(1.15); }
/* Boş sepet */
.cekmece-bos {
text-align: center;
padding: 48px 20px;
color: var(--metin-soluk);
}
.cekmece-bos span { font-size: 3rem; display: block; margin-bottom: 10px; animation: yuz 4s ease-in-out infinite; }
/* Alt kısım */
.cekmece-alt {
padding: 18px 22px;
border-top: 1px solid var(--cam-cizgi);
display: flex;
flex-direction: column;
gap: 12px;
}
.cekmece-toplam {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.cekmece-toplam-tutar {
font-family: var(--font-baslik);
font-size: 1.35rem;
color: var(--mavi);
}
[data-theme="dark"] .cekmece-toplam-tutar { color: #7fd4ff; }
.cekmece-odeme { width: 100%; }
.cekmece-detay {
text-align: center;
font-size: 0.85rem;
color: var(--metin-soluk);
transition: color var(--gecis);
}
.cekmece-detay:hover { color: var(--mavi); }
/* Rozet zıplama animasyonu */
@keyframes rozet-zipla {
0% { transform: scale(1); }
45% { transform: scale(1.45); }
100% { transform: scale(1); }
}
.sepet-rozet.zipla { animation: rozet-zipla 350ms ease; }
/* ------------------ 16. S.S.S. AKORDİYON ------------------ */
.sss-bolum { padding: 20px 0 80px; }
.sss-liste {
max-width: 780px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.sss-madde { overflow: hidden; border-radius: var(--radius-orta); }
.sss-soru {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
font-family: var(--font-baslik);
font-size: 1.02rem;
font-weight: 700;
color: var(--metin);
text-align: left;
transition: color var(--gecis);
}
.sss-soru:hover { color: var(--mavi); }
.sss-ok {
flex-shrink: 0;
font-size: 1.1rem;
color: var(--pembe);
transition: transform var(--gecis);
}
.sss-madde.acik .sss-ok { transform: rotate(180deg); }
.sss-madde.acik .sss-soru { color: var(--mavi); }
.sss-cevap {
max-height: 0;
overflow: hidden;
transition: max-height 320ms ease;
}
.sss-cevap p {
padding: 0 22px 20px;
font-size: 0.93rem;
color: var(--metin-soluk);
line-height: 1.7;
}
/* ------------------ 17. TOAST BİLDİRİMLERİ ------------------ */
.toast-alan {
position: fixed;
right: 20px; bottom: 20px;
z-index: 400;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
max-width: 320px;
padding: 13px 18px;
font-size: 0.88rem;
font-weight: 700;
border-radius: var(--radius-orta);
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
box-shadow: var(--cam-golge);
backdrop-filter: blur(14px);
border-left: 5px solid var(--mavi);
transform: translateX(24px);
opacity: 0;
transition: transform 280ms ease, opacity 280ms ease;
}
.toast.gorunur { transform: translateX(0); opacity: 1; }
.toast-basari { border-left-color: var(--mavi); }
.toast-hata { border-left-color: var(--pembe); }
@media (max-width: 480px) {
.toast-alan { left: 14px; right: 14px; }
.toast { max-width: none; }
}
/* =====================================================================
5. AŞAMA EKLERİ: Kategori Filtre Çipleri + Yükleme Durumu
===================================================================== */
/* ------------------ 18. KATEGORİ FİLTRE ÇİPLERİ ------------------ */
.kategori-filtre {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 36px;
}
.filtre-cip {
font-family: var(--font-baslik);
font-weight: 700;
font-size: 0.9rem;
padding: 9px 20px;
border-radius: var(--radius-hap);
background: var(--cam-zemin);
border: 2px solid var(--cam-cizgi);
color: var(--metin);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform var(--gecis), background var(--gecis),
color var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.filtre-cip:hover {
transform: translateY(-3px);
border-color: var(--mavi);
color: var(--mavi);
}
.filtre-cip.aktif {
background: var(--mavi);
border-color: var(--mavi);
color: #fff;
box-shadow: 0 6px 18px rgba(0, 159, 227, 0.35);
}
[data-theme="dark"] .filtre-cip:hover { color: #7fd4ff; border-color: #7fd4ff; }
/* ------------------ 19. IZGARA YÜKLEME & TÜKENDİ GÖRÜNÜMÜ ------------------ */
.urun-izgara.yukleniyor {
opacity: 0.45;
pointer-events: none;
transition: opacity var(--gecis);
}
/* Boş durum kartı ızgaranın tüm genişliğini kaplasın */
.izgara-bos { grid-column: 1 / -1; }
/* Stokta olmayan ürün görseli soluklaşır */
.gorsel-soluk img, .gorsel-soluk .gorsel-yoksa {
filter: grayscale(0.7);
opacity: 0.6;
}
/* Tükendi rozeti (antrasit, görselin üstünde) */
.rozet-tukendi {
right: 14px;
background: var(--antrasit);
opacity: 0.85;
}
/* =====================================================================
6. AŞAMA EKLERİ: Checkout + Sipariş Başarı Sayfası
===================================================================== */
/* ------------------ 20. CHECKOUT ------------------ */
.checkout-header { justify-content: space-between; }
.checkout-adim {
font-family: var(--font-baslik);
font-weight: 700;
font-size: 0.9rem;
color: var(--mavi);
background: var(--mavi-acik);
padding: 7px 16px;
border-radius: var(--radius-hap);
}
.checkout-geri {
font-size: 0.88rem;
font-weight: 700;
color: var(--metin-soluk);
transition: color var(--gecis);
}
.checkout-geri:hover { color: var(--mavi); }
.checkout-alan { padding: 44px 0 90px; }
.checkout-baslik {
font-size: clamp(1.7rem, 4vw, 2.4rem);
text-align: center;
margin-bottom: 36px;
}
.checkout-izgara {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 26px;
align-items: start;
}
.checkout-form, .checkout-ozet { padding: 28px 30px; }
.checkout-ozet { position: sticky; top: 96px; }
.form-bolum-baslik {
font-size: 1.1rem;
margin-bottom: 16px;
}
.checkout-form .form-bolum-baslik:not(:first-child) { margin-top: 26px; }
.checkout-form-izgara {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.checkout-form-izgara .alan-genis { grid-column: span 2; }
/* Checkout form alanları (vitrin temasıyla uyumlu) */
.checkout-form .alan { display: flex; flex-direction: column; gap: 6px; }
.checkout-form .alan > span { font-size: 0.83rem; font-weight: 800; }
.checkout-form .alan small { color: var(--metin-soluk); font-weight: 600; }
.checkout-form input,
.checkout-form textarea {
width: 100%;
padding: 11px 15px;
font-family: var(--font-govde);
font-size: 0.93rem;
color: var(--metin);
background: var(--mavi-acik);
border: 2px solid transparent;
border-radius: 14px;
transition: border-color var(--gecis), background var(--gecis);
}
.checkout-form input:focus,
.checkout-form textarea:focus {
outline: none;
border-color: var(--mavi);
background: var(--zemin-2);
}
.checkout-form textarea { resize: vertical; }
/* Fatura tipi seçimi */
.fatura-secim { display: flex; gap: 12px; margin-bottom: 14px; }
.fatura-radyo {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
border: 2px solid var(--cam-cizgi);
border-radius: 14px;
font-weight: 800;
font-size: 0.92rem;
cursor: pointer;
transition: border-color var(--gecis), background var(--gecis), color var(--gecis);
}
.fatura-radyo:has(input:checked) {
border-color: var(--mavi);
background: var(--mavi-acik);
color: var(--mavi);
}
.fatura-radyo input { accent-color: var(--mavi); }
.kurumsal-alanlar {
display: none;
padding: 4px 0 6px;
}
.kurumsal-alanlar.acik { display: block; }
/* Hata kutusu */
.checkout-hata {
margin-top: 18px;
padding: 13px 18px;
border-radius: 14px;
background: var(--pembe-acik);
color: var(--pembe);
border-left: 5px solid var(--pembe);
font-weight: 700;
font-size: 0.9rem;
}
/* Onay butonu */
.checkout-onayla {
width: 100%;
margin-top: 20px;
padding: 15px 26px;
font-size: 1.05rem;
display: flex;
justify-content: space-between;
}
.checkout-onayla.gonderiliyor { opacity: 0.7; }
.onayla-tutar {
background: rgba(29, 29, 27, 0.12);
padding: 3px 14px;
border-radius: var(--radius-hap);
}
.checkout-not {
margin-top: 12px;
font-size: 0.78rem;
color: var(--metin-soluk);
text-align: center;
}
/* ---- Özet paneli ---- */
.ozet-satirlar { display: flex; flex-direction: column; gap: 12px; }
.ozet-satir { display: flex; align-items: center; gap: 12px; }
.ozet-satir img,
.ozet-satir .mini-balon {
width: 50px; height: 50px;
border-radius: 12px;
object-fit: cover;
background: var(--mavi-acik);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.ozet-satir-bilgi { flex: 1; min-width: 0; }
.ozet-satir-bilgi strong {
display: block;
font-size: 0.9rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ozet-satir-bilgi small { color: var(--metin-soluk); font-size: 0.8rem; }
.ozet-satir-tutar {
font-family: var(--font-baslik);
font-weight: 800;
font-size: 0.92rem;
color: var(--mavi);
flex-shrink: 0;
}
[data-theme="dark"] .ozet-satir-tutar { color: #7fd4ff; }
.ozet-kargo-not {
margin-top: 16px;
padding: 11px 14px;
background: var(--sari);
color: var(--antrasit);
border-radius: 12px;
font-size: 0.84rem;
font-weight: 700;
}
.ozet-kargo-not a { text-decoration: underline; }
.ozet-toplamlar {
margin-top: 18px;
border-top: 2px dashed var(--cam-cizgi);
padding-top: 14px;
}
.ozet-toplamlar div {
display: flex;
justify-content: space-between;
padding: 5px 0;
font-size: 0.92rem;
}
.ozet-toplamlar dt { color: var(--metin-soluk); font-weight: 700; }
.ozet-toplamlar dd { font-weight: 800; }
.ozet-genel {
margin-top: 8px;
padding-top: 10px !important;
border-top: 1px solid var(--cam-cizgi);
}
.ozet-genel dd {
font-family: var(--font-baslik);
font-size: 1.25rem;
color: var(--mavi);
}
[data-theme="dark"] .ozet-genel dd { color: #7fd4ff; }
.kargo-bedava-yazi { color: var(--pembe); }
.ozet-guven {
list-style: none;
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 7px;
font-size: 0.82rem;
color: var(--metin-soluk);
font-weight: 700;
}
/* ------------------ 21. SİPARİŞ BAŞARI SAYFASI ------------------ */
.basari-alan {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 16px;
overflow: hidden;
background: linear-gradient(160deg, var(--mavi) 0%, var(--mavi-koyu) 60%, var(--mor) 130%);
}
[data-theme="dark"] .basari-alan {
background: linear-gradient(160deg, #1c2a4a 0%, #241d4a 60%, var(--mor) 130%);
}
.basari-kart {
position: relative;
z-index: 2;
width: min(560px, 100%);
text-align: center;
padding: 46px 40px 38px;
background: rgba(255, 255, 255, 0.92);
}
[data-theme="dark"] .basari-kart { background: rgba(29, 26, 51, 0.94); }
.basari-ikon { font-size: 3.6rem; animation: yuz 3s ease-in-out infinite; }
.basari-kart h1 { font-size: 2rem; margin: 8px 0 10px; }
.basari-mesaj { color: var(--metin-soluk); }
.basari-detay {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 26px 0;
}
.basari-detay div {
background: var(--mavi-acik);
border-radius: 14px;
padding: 13px 8px;
}
.basari-detay span {
display: block;
font-size: 0.72rem;
font-weight: 800;
color: var(--metin-soluk);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.basari-detay strong {
font-family: var(--font-baslik);
font-size: 0.98rem;
color: var(--mavi);
word-break: break-all;
}
[data-theme="dark"] .basari-detay strong { color: #7fd4ff; }
.basari-not { font-size: 0.88rem; color: var(--metin-soluk); }
.basari-btnler {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
.basari-btnler .btn-cam { border-color: var(--mavi); color: var(--mavi); }
/* ------------------ 22. CHECKOUT RESPONSIVE ------------------ */
@media (max-width: 900px) {
.checkout-izgara { grid-template-columns: 1fr; }
.checkout-ozet { position: static; order: -1; }
}
@media (max-width: 560px) {
.checkout-form-izgara { grid-template-columns: 1fr; }
.checkout-form-izgara .alan-genis { grid-column: span 1; }
.checkout-form, .checkout-ozet { padding: 22px 18px; }
.basari-detay { grid-template-columns: 1fr; }
.checkout-header { flex-wrap: wrap; gap: 10px; }
}
/* =====================================================================
7. AŞAMA EKLERİ: Üyelik Sayfası + Üye Paneli + Header Giriş Butonu
===================================================================== */
/* ------------------ 23. HEADER GİRİŞ/PROFİL ------------------ */
.giris-yap-btn {
font-family: var(--font-baslik);
font-weight: 700;
font-size: 0.88rem;
padding: 9px 20px;
border-radius: var(--radius-hap);
background: var(--mavi);
color: #fff;
box-shadow: 0 4px 14px rgba(0, 159, 227, 0.35);
transition: transform var(--gecis), background var(--gecis);
white-space: nowrap;
}
.giris-yap-btn:hover { background: var(--mavi-koyu); transform: translateY(-2px); }
/* Girişli kullanıcı ikonundaki yeşil nokta */
.girisli-nokta {
position: absolute;
top: 4px; right: 4px;
width: 9px; height: 9px;
border-radius: 50%;
background: #22c55e;
border: 2px solid var(--zemin-2);
}
/* ------------------ 24. ÜYELİK SAYFASI ------------------ */
.uyelik-alan {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 16px;
overflow: hidden;
background: linear-gradient(160deg, var(--mavi) 0%, var(--mavi-koyu) 60%, var(--mor) 130%);
}
[data-theme="dark"] .uyelik-alan {
background: linear-gradient(160deg, #1c2a4a 0%, #241d4a 60%, var(--mor) 130%);
}
.uyelik-kart {
position: relative;
z-index: 2;
width: min(520px, 100%);
padding: 34px 34px 26px;
background: rgba(255, 255, 255, 0.93);
}
[data-theme="dark"] .uyelik-kart { background: rgba(29, 26, 51, 0.95); }
.uyelik-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 22px;
font-size: 1.5rem;
}
/* Sekmeler */
.uyelik-sekmeler {
display: flex;
gap: 6px;
background: var(--mavi-acik);
border-radius: var(--radius-hap);
padding: 5px;
margin-bottom: 20px;
}
.uyelik-sekme {
flex: 1;
padding: 10px;
font-family: var(--font-baslik);
font-weight: 700;
font-size: 0.95rem;
border-radius: var(--radius-hap);
color: var(--metin-soluk);
transition: background var(--gecis), color var(--gecis);
}
.uyelik-sekme.aktif {
background: var(--mavi);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 159, 227, 0.35);
}
/* Form panelleri */
.uyelik-form { display: none; flex-direction: column; gap: 14px; }
.uyelik-form.aktif { display: flex; }
.uyelik-form .alan { display: flex; flex-direction: column; gap: 6px; }
.uyelik-form .alan > span { font-size: 0.83rem; font-weight: 800; }
.uyelik-form .alan small { color: var(--metin-soluk); font-weight: 600; }
.uyelik-form input {
width: 100%;
padding: 11px 15px;
font-family: var(--font-govde);
font-size: 0.93rem;
color: var(--metin);
background: var(--mavi-acik);
border: 2px solid transparent;
border-radius: 14px;
transition: border-color var(--gecis), background var(--gecis);
}
.uyelik-form input:focus {
outline: none;
border-color: var(--mavi);
background: var(--zemin-2);
}
.uyelik-form-izgara {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
}
.uyelik-form-izgara .alan-genis { grid-column: span 2; }
.uye-tip-secim { margin-bottom: 2px; }
.toptanci-bilgi {
font-size: 0.82rem;
font-weight: 700;
background: var(--sari);
color: var(--antrasit);
padding: 10px 14px;
border-radius: 12px;
margin-bottom: 12px;
}
.uyelik-btn { width: 100%; margin-top: 6px; }
.uyelik-hata {
padding: 12px 16px;
border-radius: 14px;
background: var(--pembe-acik);
color: var(--pembe);
border-left: 5px solid var(--pembe);
font-weight: 700;
font-size: 0.88rem;
margin-bottom: 14px;
}
.uyelik-not {
text-align: center;
font-size: 0.85rem;
color: var(--metin-soluk);
}
.metin-link {
color: var(--mavi);
font-weight: 800;
text-decoration: underline;
font-size: inherit;
}
.metin-link:hover { color: var(--pembe); }
.metin-link-a { color: var(--mavi); font-weight: 800; text-decoration: underline; }
.uyelik-geri {
display: block;
text-align: center;
margin-top: 18px;
font-size: 0.84rem;
color: var(--metin-soluk);
transition: color var(--gecis);
}
.uyelik-geri:hover { color: var(--mavi); }
/* ------------------ 25. ÜYE PANELİ (profil.php) ------------------ */
.profil-alan { padding: 36px 0 90px; }
.profil-header-btnler { display: flex; align-items: center; gap: 16px; }
.profil-cikis {
font-size: 0.85rem;
font-weight: 800;
color: var(--pembe);
transition: color var(--gecis);
}
.profil-cikis:hover { color: var(--mor); }
.profil-karsilama {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.profil-avatar {
width: 62px; height: 62px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(140deg, var(--mavi), var(--pembe));
color: #fff;
font-family: var(--font-baslik);
font-size: 1.6rem;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 8px 22px rgba(0, 159, 227, 0.3);
}
.profil-karsilama h1 { font-size: 1.6rem; }
.profil-karsilama p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.profil-karsilama small { color: var(--metin-soluk); font-weight: 700; }
.profil-rozet {
display: inline-block;
font-size: 0.78rem;
font-weight: 800;
padding: 4px 13px;
border-radius: var(--radius-hap);
background: var(--mavi-acik);
color: var(--mavi);
}
.rozet-b2b-onayli { background: #e2f7e9; color: #17843b; }
.rozet-b2b-bekliyor{ background: #fef4d8; color: #9a6c00; }
.rozet-b2b-red { background: var(--pembe-acik); color: var(--pembe); }
/* Flash mesaj renk çeşitleri (checkout-hata kutusunu yeniden kullanır) */
.profil-flash-basari {
background: #e2f7e9 !important;
color: #17843b !important;
border-left-color: #17843b !important;
margin-bottom: 20px;
}
.profil-flash-hata { margin-bottom: 20px; }
.profil-izgara {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: stretch; /* Kolonlar aynı boyda biter */
}
.profil-kolon { display: flex; flex-direction: column; gap: 22px; }
.profil-kutu { padding: 24px 26px; }
/* Profil formları checkout girişlerini kullanır */
.profil-kutu input,
.profil-kutu textarea {
width: 100%;
padding: 11px 15px;
font-family: var(--font-govde);
font-size: 0.92rem;
color: var(--metin);
background: var(--mavi-acik);
border: 2px solid transparent;
border-radius: 14px;
transition: border-color var(--gecis), background var(--gecis);
}
.profil-kutu input:focus,
.profil-kutu textarea:focus {
outline: none;
border-color: var(--mavi);
background: var(--zemin-2);
}
.profil-kutu input:disabled { opacity: 0.6; cursor: not-allowed; }
.profil-kutu .alan { display: flex; flex-direction: column; gap: 6px; }
.profil-kutu .alan > span { font-size: 0.82rem; font-weight: 800; }
.profil-kutu .alan small { color: var(--metin-soluk); font-weight: 600; }
.profil-kaydet { margin-top: 14px; flex: none; }
.kutu-bos-metin { color: var(--metin-soluk); font-size: 0.92rem; }
/* Firma bilgi listesi */
.firma-bilgi div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-bottom: 1px dashed var(--cam-cizgi);
font-size: 0.9rem;
}
.firma-bilgi dt { color: var(--metin-soluk); font-weight: 700; }
.firma-bilgi dd { font-weight: 800; text-align: right; }
/* Adres kartları */
.adres-liste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.adres-kart {
padding: 14px 16px;
border: 2px solid var(--cam-cizgi);
border-radius: var(--radius-orta);
font-size: 0.88rem;
}
.adres-kart.varsayilan { border-color: var(--mavi); background: var(--mavi-acik); }
.adres-ust {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.adres-ust strong { font-family: var(--font-baslik); }
.adres-btnler { display: flex; gap: 6px; }
.adres-mini-btn {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--zemin-2);
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
transition: transform var(--gecis), background var(--gecis);
}
.adres-mini-btn:hover { transform: scale(1.12); background: var(--sari); }
.adres-metin { color: var(--metin-soluk); }
.adres-ekle-detay summary {
cursor: pointer;
font-family: var(--font-baslik);
font-weight: 700;
color: var(--mavi);
padding: 8px 0;
list-style: none;
}
.adres-ekle-detay summary::-webkit-details-marker { display: none; }
.adres-ekle-detay summary:hover { color: var(--pembe); }
.adres-ekle-form { margin-top: 12px; }
/* Sipariş geçmişi */
.siparis-gecmisi { margin-top: 22px; }
.profil-tablo { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.profil-tablo th {
text-align: left;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--metin-soluk);
padding: 10px 12px;
border-bottom: 2px solid var(--cam-cizgi);
white-space: nowrap;
}
.profil-tablo td {
padding: 11px 12px;
border-bottom: 1px solid var(--cam-cizgi);
}
.etiket-profil {
display: inline-block;
font-size: 0.73rem;
font-weight: 800;
padding: 3px 11px;
border-radius: var(--radius-hap);
background: var(--mavi-acik);
color: var(--mavi);
white-space: nowrap;
}
.etiket-profil.etiket-odendi, .etiket-profil.etiket-teslim_edildi { background: #e2f7e9; color: #17843b; }
.etiket-profil.etiket-beklemede, .etiket-profil.etiket-yeni { background: #fef4d8; color: #9a6c00; }
.etiket-profil.etiket-basarisiz, .etiket-profil.etiket-iptal,
.etiket-profil.etiket-iade { background: var(--pembe-acik); color: var(--pembe); }
/* Responsive */
@media (max-width: 900px) {
.profil-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.uyelik-form-izgara { grid-template-columns: 1fr; }
.uyelik-form-izgara .alan-genis { grid-column: span 1; }
.uyelik-kart { padding: 26px 20px; }
.profil-kutu { padding: 20px 16px; }
.profil-header-btnler { flex-direction: column; gap: 6px; align-items: flex-end; }
}
/* =====================================================================
8. AŞAMA EKLERİ: Kurumsal Sayfalar + Yasal Metin Tipografisi
===================================================================== */
/* ------------------ 26. KURUMSAL SAYFA DÜZENİ ------------------ */
.kurumsal-alan { padding: 44px 0 90px; }
.kurumsal-alan .bolum-baslik h1 {
font-size: clamp(1.7rem, 4vw, 2.5rem);
}
/* Yasal / uzun metin paneli */
.yasal-metin {
max-width: 860px;
margin-inline: auto;
padding: 34px 38px;
line-height: 1.8;
font-size: 0.95rem;
}
.yasal-metin h2 {
font-size: 1.15rem;
color: var(--mavi);
margin: 26px 0 10px;
}
[data-theme="dark"] .yasal-metin h2 { color: #7fd4ff; }
.yasal-metin h2:first-of-type { margin-top: 6px; }
.yasal-metin p { margin-bottom: 12px; }
.yasal-metin ul {
margin: 0 0 14px 22px;
display: flex;
flex-direction: column;
gap: 6px;
}
.yasal-metin a { color: var(--mavi); font-weight: 800; text-decoration: underline; }
.yasal-metin a:hover { color: var(--pembe); }
.yasal-metin em { color: var(--metin-soluk); }
.yasal-uyari {
background: var(--sari);
color: var(--antrasit);
padding: 12px 16px;
border-radius: 12px;
font-size: 0.85rem;
font-weight: 700;
}
.yasal-tarih {
margin-top: 24px;
padding-top: 14px;
border-top: 2px dashed var(--cam-cizgi);
font-size: 0.83rem;
color: var(--metin-soluk);
}
/* Değer/iletişim kartları şeridi (guven-ic yeniden kullanılır) */
.kurumsal-degerler { margin: 34px 0; }
/* Hakkımızda CTA */
.kurumsal-cta {
max-width: 860px;
margin: 10px auto 0;
padding: 34px;
text-align: center;
}
.kurumsal-cta h2 { font-size: 1.4rem; margin-bottom: 6px; }
.kurumsal-cta p { color: var(--metin-soluk); margin-bottom: 18px; }
/* ------------------ 27. İLETİŞİM SAYFASI ------------------ */
.iletisim-izgara { margin-top: 6px; }
.iletisim-gonder { justify-content: center; }
/* Konu seçimi (checkout input stiliyle uyumlu select) */
.iletisim-secim {
width: 100%;
padding: 11px 15px;
font-family: var(--font-govde);
font-size: 0.93rem;
color: var(--metin);
background: var(--mavi-acik);
border: 2px solid transparent;
border-radius: 14px;
transition: border-color var(--gecis), background var(--gecis);
}
.iletisim-secim:focus {
outline: none;
border-color: var(--mavi);
background: var(--zemin-2);
}
/* Çalışma saatleri listesi */
.stok-liste-genel { list-style: none; }
.stok-liste-genel li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px dashed var(--cam-cizgi);
font-size: 0.9rem;
}
.stok-liste-genel li:last-child { border-bottom: none; }
.stok-liste-genel span { color: var(--metin-soluk); font-weight: 700; }
/* Bal küpü (honeypot): ekran dışına taşı, ekran okuyucudan gizle */
.balkupu {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
@media (max-width: 620px) {
.yasal-metin { padding: 24px 20px; }
}
/* =====================================================================
9. AŞAMA EKLERİ: Görsel Logo + Çoklu Dil Seçici (TR|EN|ES)
Mevcut cam efekti ve renk sistemi korunarak eklendi.
===================================================================== */
/* ------------------ 28. GÖRSEL LOGO (Daire çerçeveli, KESİN boyut) ------------------ */
/* Logo kaynak dosyası kaç piksel olursa olsun ekranda DAİMA 45x45 kalır. */
.site-header .logo-img {
width: 45px !important;
height: 45px !important;
max-width: 45px;
max-height: 45px;
border-radius: 50%; /* Beyaz zeminli logoyu şık daireye çevirir */
object-fit: contain; /* Logo daire içinde ezilmeden sığar */
background-color: #fff; /* Beyaz arka plan bilinçli çerçeveye dönüşür */
padding: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: block;
flex-shrink: 0; /* Flex satırında asla ezilmez/taşmaz */
}
/* Logo bağlantısı: dikey hizalama garanti, satırı sıkıştırmaz, TAŞAMAZ */
.logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
line-height: 0; /* img altındaki hayalet boşluğu yok eder */
max-width: 220px;
overflow: hidden; /* Kapsayıcıdan taşma kesin engelli */
}
/* logo.png yüklenemezse JS onerror bu yedeği görünür yapar */
.logo-yedek {
display: none;
align-items: center;
gap: 8px;
line-height: 1.2;
}
/* --- TAŞMA GÜVENLİK KİLİDİ --- */
/* Herhangi bir öğe (dev görsel dahil) yatay taşma yaratıp
sayfayı kilitleyemesin: */
body { overflow-x: hidden; }
.header-ic { min-width: 0; }
.site-header img { max-width: 100%; }
/* ------------------ 29. DİL SEÇİCİ (TR | EN | ES) ------------------ */
.dil-secici {
display: flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: var(--radius-hap);
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dil-btn {
font-family: var(--font-baslik);
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.5px;
padding: 6px 10px;
border-radius: var(--radius-hap);
color: var(--metin-soluk);
transition: background var(--gecis), color var(--gecis), transform var(--gecis);
}
.dil-btn:hover { color: var(--mavi); transform: translateY(-1px); }
.dil-btn.aktif {
background: var(--mavi);
color: #fff;
box-shadow: 0 3px 10px rgba(0, 159, 227, 0.35);
}
[data-theme="dark"] .dil-btn:hover { color: #7fd4ff; }
/* ------------------ 30. MOBİL UYUM ------------------ */
@media (max-width: 1024px) {
.site-header .logo-img { width: 42px !important; height: 42px !important; }
}
@media (max-width: 620px) {
/* Logo küçülür, header ferah kalır (daire korunur) */
.site-header .logo-img { width: 38px !important; height: 38px !important; padding: 3px; }
/* Dil seçici kompaktlaşır ama görünür kalır */
.dil-secici { padding: 3px; }
.dil-btn { font-size: 0.66rem; padding: 5px 7px; }
/* Dar ekranda aksiyon sırası sıkışmasın */
.header-aksiyonlar { gap: 4px; }
.giris-yap-btn { padding: 8px 14px; font-size: 0.8rem; }
}
@media (max-width: 380px) {
/* En dar ekranlar */
.site-header .logo-img { width: 34px !important; height: 34px !important; padding: 3px; }
.dil-btn { padding: 4px 6px; }
}
/* =====================================================================
13. AŞAMA: CAM EFEKTLİ DİL DROPDOWN (8 Dil)
Navbar yüksekliğini değiştirmez; menü absolute + z-index ile
sayfanın ÜZERİNE düşer, içeriği asla aşağı itmez.
===================================================================== */
/* ------------------ 31. DİL DROPDOWN ------------------ */
.dil-dropdown {
position: relative; /* Menü buna göre konumlanır */
flex-shrink: 0;
}
/* Aktif dili gösteren buton (cam efektli hap) */
.dil-aktif-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: var(--radius-hap);
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-baslik);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.5px;
color: var(--metin);
transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.dil-aktif-btn:hover {
border-color: var(--mavi);
transform: translateY(-1px);
}
.dil-dropdown.acik .dil-aktif-btn {
border-color: var(--mavi);
box-shadow: 0 4px 14px rgba(0, 159, 227, 0.25);
}
.dil-bayrak { font-size: 1rem; line-height: 1; }
.dil-ok {
font-size: 0.7rem;
color: var(--pembe);
transition: transform var(--gecis);
}
.dil-dropdown.acik .dil-ok { transform: rotate(180deg); }
/* Açılır liste: CAM EFEKTİ + absolute (içeriği itmez) */
.dil-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 150; /* Header (100) dahil her şeyin üstünde */
min-width: 185px;
padding: 8px;
border-radius: var(--radius-orta);
background: var(--cam-zemin);
border: 1px solid var(--cam-cizgi);
box-shadow: var(--cam-golge);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
/* Zarif açılma animasyonu */
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.dil-dropdown.acik .dil-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Dil satırları */
.dil-secenek {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 11px;
font-size: 0.87rem;
font-weight: 700;
color: var(--metin);
transition: background var(--gecis), color var(--gecis);
}
.dil-secenek:hover { background: var(--mavi-acik); color: var(--mavi); }
.dil-secenek.aktif { background: var(--mavi); color: #fff; }
.dil-ad { flex: 1; }
.dil-secenek-kod {
font-family: var(--font-baslik);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.5px;
opacity: 0.6;
}
.dil-tik { font-weight: 800; }
/* ------------------ MOBİL ------------------ */
@media (max-width: 620px) {
.dil-aktif-btn { padding: 7px 10px; font-size: 0.72rem; }
/* Dar ekranda menü sağ kenardan taşmasın */
.dil-menu { right: -6px; min-width: 175px; }
}
/* =====================================================================
17. AŞAMA: ÖZEL YILDIZ İMLECİ (tüm sayfalar için)
===================================================================== */
/* --- VARSAYILAN İMLEÇ: Altın yıldız (marka sarısı + antrasit kontur) --- */
html, body {
cursor: url("data:image/svg+xml;utf8,") 12 1, auto;
}
/* --- TIKLANABİLİRLERDE: Parlayan yıldız (pembe hale + ışıltı) --- */
a, button, .btn, .btn-panel, [role="button"], [role="option"],
summary, label,
.dil-aktif-btn, .dil-secenek, .filtre-cip, .nav-link, .ikon-btn,
.sss-soru, .adet-btn, .satir-sil, .cekmece-kapat, .uyelik-sekme,
input[type="checkbox"], input[type="radio"],
input[type="submit"], input[type="button"], select {
cursor: url("data:image/svg+xml;utf8,") 12 1, pointer;
}
/* --- YAZI ALANLARINDA: Standart metin imleci (kullanılabilirlik) --- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="datetime-local"], textarea {
cursor: text;
}
/* --- PASİF BUTONLARDA: Yasak işareti --- */
button:disabled, .btn-tukendi { cursor: not-allowed; }
/* ===== 18. AŞAMA: İMLEÇ BALONCUK İZİ (tüm sayfalar) ===== */
.imlec-baloncuk {
position: fixed;
top: 0; left: 0;
border-radius: 50%;
pointer-events: none; /* Tıklamaları ASLA engellemez */
z-index: 9999;
transform: translate(-50%, -50%) scale(0.4);
background: radial-gradient(circle at 32% 30%,
rgba(255, 255, 255, 0.95) 0%,
rgba(0, 159, 227, 0.35) 45%,
rgba(0, 159, 227, 0.08) 72%,
transparent 100%);
border: 1px solid rgba(0, 159, 227, 0.35);
animation: izBalonUc var(--sure, 0.8s) ease-out forwards;
}
[data-theme="dark"] .imlec-baloncuk {
border-color: rgba(127, 212, 255, 0.45);
background: radial-gradient(circle at 32% 30%,
rgba(255, 255, 255, 0.8) 0%,
rgba(127, 212, 255, 0.30) 45%,
rgba(127, 212, 255, 0.06) 72%,
transparent 100%);
}
@keyframes izBalonUc {
0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.35); }
60% { opacity: 0.65; }
100% {
opacity: 0;
transform: translate(calc(-50% + var(--dx, 0px)),
calc(-50% - var(--dy, 42px))) scale(1);
}
}
/* Hareket azaltma tercihi olan kullanıcılara saygı */
@media (prefers-reduced-motion: reduce) {
.imlec-baloncuk { display: none !important; }
}
/* ===== Profil: Kargo Takip kutusu (58c) — HİZA PERÇİNLİ ===== */
.profil-izgara {
align-items: stretch !important; /* Kolonlar ayni boyda gerilir */
}
.profil-kolon {
display: flex !important;
flex-direction: column !important;
gap: 22px;
height: 100%;
}
.profil-kolon > .profil-kutu { margin: 0 !important; }
/* Her iki kolonun SON kutusu kalan boşluğu doldurur -> alt kenarlar hizalı */
.profil-kolon > .profil-kutu:last-child {
flex: 1 1 auto !important;
display: flex;
flex-direction: column;
min-height: 0;
}
.kargo-takip-kutu {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.kargo-takip-kutu .aktif-kargo,
.kargo-takip-kutu .kutu-bos-metin {
flex: 1; /* Orta içerik boşluğu emer */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.kargo-takip-kutu .kutu-bos-metin { text-align: center; }
.aktif-kargo {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 20px 16px;
margin-bottom: 16px;
border-radius: 16px;
background: linear-gradient(160deg, rgba(0, 159, 227, 0.10), rgba(252, 191, 29, 0.12));
border: 1.5px solid rgba(0, 159, 227, 0.35);
}
.ak-ikon {
font-size: 2.1rem;
animation: akSalla 2s ease-in-out infinite;
}
@keyframes akSalla {
0%, 100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-4px) rotate(4deg); }
}
.ak-bilgi strong { font-family: "Baloo 2", Arial, sans-serif; }
.ak-bilgi p { font-size: 0.82rem; margin-top: 4px; color: var(--metin-soluk, #5c6b73); }
.ak-bilgi code { font-weight: 800; color: var(--mavi, #009fe3); }
.aktif-kargo .ak-btn { width: 100%; text-align: center; }
.kargo-sorgu-form { display: grid; gap: 10px; }
.kargo-sorgu-form input {
width: 100%;
padding: 12px 15px;
border-radius: 13px;
border: 1.5px solid rgba(0, 159, 227, 0.35);
font: inherit;
background: var(--cam-zemin, rgba(255, 255, 255, 0.7));
}
.kargo-sorgu-form input:focus {
outline: none;
border-color: var(--mavi, #009fe3);
box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}
.kargo-sorgu-form .btn { width: 100%; text-align: center; }
/* Sipariş geçmişi satırındaki mini takip butonu */
.takip-mini {
font-size: 0.72rem;
font-weight: 800;
color: var(--mavi, #009fe3);
text-decoration: none;
padding: 4px 10px;
border-radius: 999px;
border: 1.5px solid rgba(0, 159, 227, 0.4);
white-space: nowrap;
}
.takip-mini:hover { background: rgba(0, 159, 227, 0.1); }
/* ===== 74: Canlı arama "Tümünü Gör" satırı ===== */
.arama-tumunu-gor {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
font-size: 0.82rem;
font-weight: 800;
color: var(--mavi, #009fe3);
text-decoration: none;
border-top: 1px dashed rgba(0, 159, 227, 0.25);
transition: background 0.15s ease;
}
.arama-tumunu-gor:hover { background: rgba(0, 159, 227, 0.07); }
.arama-tumunu-gor b { transition: transform 0.15s ease; }
.arama-tumunu-gor:hover b { transform: translateX(3px); }
/* Arama sayfası ızgarası: index'teki .urun-izgara sınıfı yoksa güvence */
.urun-izgara {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
}
.stok-yok-rozet {
display: inline-block;
margin-top: 6px;
font-size: 0.72rem;
font-weight: 800;
color: #b45309;
background: rgba(252, 191, 29, 0.15);
border-radius: 999px;
padding: 3px 10px;
}
/* ===== 81: tablet/mobil header katlanmasi (genis telefonlar dahil) ===== */
@media (max-width: 1024px) {
.header-ic {
flex-wrap: wrap;
row-gap: 10px;
}
.logo { flex-shrink: 0; }
.logo-yazi { font-size: 1.15rem; }
.header-aksiyonlar {
margin-left: auto;
gap: 4px;
}
.header-aksiyonlar > * { transform: scale(0.92); }
.arama-kutusu {
order: 3;
flex: 1 1 100%;
max-width: none;
}
.ana-nav {
order: 4;
flex: 1 1 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
justify-content: flex-start;
}
.ana-nav::-webkit-scrollbar { display: none; }
.ana-nav .nav-link { white-space: nowrap; flex-shrink: 0; }
}
/* ===== 88: Kurumsal üst şerit ===== */
.ust-serit88 {
background: linear-gradient(90deg, var(--mavi) 0%, #0284c7 100%);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
}
.us88-ic {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 7px 0;
flex-wrap: wrap;
}
.us88-sol { display: flex; align-items: center; gap: 10px; opacity: 0.95; }
.us88-ayrac { opacity: 0.5; }
.us88-sag { display: flex; align-items: center; gap: 18px; }
.us88-sag a {
color: #fff;
text-decoration: none;
font-weight: 800;
opacity: 0.92;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.us88-sag a:hover { opacity: 1; transform: translateY(-1px); }
[data-theme="dark"] .ust-serit88 { background: linear-gradient(90deg, #0b3a5c, #123f66); }
@media (max-width: 700px) {
.us88-sol span:last-child, .us88-sol .us88-ayrac { display: none; }
.us88-sag { gap: 12px; }
}
/* ===== 89: MEGA MENU — premium fade + slide ===== */
.mega-kap { position: relative; }
.mega-tetik { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; font: inherit; }
.mega-ok { font-size: 0.7em; transition: transform 0.28s ease; }
.mega-kap:hover .mega-ok, .mega-kap.acik .mega-ok { transform: rotate(180deg); }
.mega-panel {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: min(680px, 92vw);
background: var(--panel-zemin, #fff);
border: 1px solid rgba(0, 90, 160, 0.1);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(10, 40, 80, 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
z-index: 60;
}
.mega-kap:hover .mega-panel,
.mega-kap:focus-within .mega-panel,
.mega-kap.acik .mega-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-ic {
display: grid;
grid-template-columns: 1fr 1fr 1.1fr;
gap: 8px;
padding: 22px;
}
.mega-baslik {
display: block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 2px;
color: #8aa2b5;
margin-bottom: 10px;
text-transform: uppercase;
}
.mega-link {
display: block;
padding: 8px 10px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 700;
color: var(--metin, #1d1d1b);
text-decoration: none;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.mega-link:hover { background: rgba(0, 159, 227, 0.08); color: var(--mavi, #009fe3); transform: translateX(3px); }
.mega-link.aktif { color: var(--mavi, #009fe3); }
.mega-vitrin {
background: linear-gradient(150deg, rgba(0, 159, 227, 0.07), rgba(230, 69, 146, 0.06));
border-radius: 14px;
padding: 16px;
}
.mega-vitrin p { font-size: 0.8rem; color: #5c6b73; line-height: 1.6; margin: 0 0 12px; }
.mega-cta { font-size: 0.82rem; font-weight: 800; color: var(--mavi, #009fe3); text-decoration: none; }
.mega-cta:hover { text-decoration: underline; }
[data-theme="dark"] .mega-panel { background: #101c2e; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mega-link { color: #dbeafe; }
[data-theme="dark"] .mega-link:hover { background: rgba(0, 159, 227, 0.14); }
@media (max-width: 1024px) {
.mega-panel { left: 0; transform: translateY(10px); width: min(560px, 94vw); }
.mega-kap:hover .mega-panel, .mega-kap.acik .mega-panel, .mega-kap:focus-within .mega-panel { transform: translateY(0); }
.mega-ic { grid-template-columns: 1fr 1fr; }
.mega-vitrin { grid-column: 1 / -1; }
}
/* ===== 89: Header scroll durumu (JS ile) ===== */
.site-header { transition: box-shadow 0.3s ease, padding 0.3s ease; }
.site-header.kaydi { box-shadow: 0 10px 30px rgba(10, 40, 80, 0.1); }
/* ===== 89: Zarif ürün kartları — hafif gölge, sakin hover ===== */
.urun-kart {
box-shadow: 0 2px 10px rgba(33, 37, 41, 0.04) !important;
border: 1px solid rgba(33, 37, 41, 0.06);
border-radius: 16px !important;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, border-color 0.3s ease-in-out !important;
}
.urun-kart:hover {
box-shadow: 0 22px 55px rgba(33, 37, 41, 0.12) !important;
border-color: rgba(33, 37, 41, 0.04);
transform: translateY(-8px) !important;
}
/* ===== 90: KURUMSAL VIZYON HERO + kurumsal bolumler ===== */
/* ===== 90: KURUMSAL VİZYON HERO (saf-CSS, yavaş-premium geçiş) ===== */
.hero90 {
position: relative;
min-height: clamp(420px, 56vh, 560px);
overflow: hidden;
background: #eef7fd;
}
.h90-slayt {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
animation: h90Donus 24s ease-in-out infinite;
}
/* 3 slayt × 8sn; 1.8sn'lik ipeksi çapraz-erime */
.h90-a { animation-delay: 0s; }
.h90-b { animation-delay: 8s; }
.h90-c { animation-delay: 16s; }
@keyframes h90Donus {
0% { opacity: 0; }
3.5% { opacity: 1; }
33.3% { opacity: 1; }
40.8% { opacity: 0; }
100% { opacity: 0; }
}
.hero90:hover .h90-slayt { animation-play-state: paused; }
.h90-a { background:
radial-gradient(760px 380px at 82% 20%, rgba(0, 159, 227, 0.16), transparent 62%),
linear-gradient(140deg, #f4fbff 0%, #e3f4ff 100%); }
.h90-b { background:
radial-gradient(760px 380px at 80% 78%, rgba(252, 191, 29, 0.2), transparent 62%),
linear-gradient(140deg, #fffdf4 0%, #fff4d9 100%); }
.h90-c { background:
radial-gradient(760px 380px at 84% 24%, rgba(90, 48, 126, 0.14), transparent 62%),
linear-gradient(140deg, #faf7ff 0%, #efe7fa 100%); }
.h90-ic { max-width: 720px; }
.h90-slayt .h90-ic > * {
opacity: 0;
transform: translateY(18px);
animation: h90Metin 24s ease-out infinite;
animation-delay: inherit;
}
@keyframes h90Metin {
0% { opacity: 0; transform: translateY(18px); }
5% { opacity: 1; transform: translateY(0); }
33.3% { opacity: 1; transform: translateY(0); }
39% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 0; }
}
.h90-etiket {
display: inline-block;
letter-spacing: 4px;
font-size: 0.74rem;
font-weight: 800;
color: var(--mavi, #009fe3);
margin-bottom: 16px;
}
.h90-ic h1 {
font-size: clamp(2.2rem, 5.2vw, 3.7rem);
line-height: 1.12;
color: #17324a;
margin: 0 0 16px;
}
.h90-ic h1 em { font-style: normal; color: var(--mavi, #009fe3); }
.h90-b .h90-ic h1 em { color: #d99e06; }
.h90-c .h90-ic h1 em { color: var(--mor, #5a307e); }
.h90-ic p {
font-size: 1.04rem;
line-height: 1.8;
color: #4d6a82;
max-width: 560px;
margin: 0 0 26px;
}
.h90-cta {
display: inline-block;
background: #17324a;
color: #fff;
font-weight: 800;
font-size: 0.92rem;
border-radius: 999px;
padding: 14px 32px;
text-decoration: none;
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 26px rgba(23, 50, 74, 0.18);
}
.h90-cta:hover { background: var(--mavi, #009fe3); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 130, 200, 0.28); }
.h90-noktalar {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}
.h90-noktalar span {
width: 34px;
height: 5px;
border-radius: 999px;
background: rgba(23, 50, 74, 0.15);
overflow: hidden;
position: relative;
}
.h90-noktalar span::after {
content: "";
position: absolute;
inset: 0;
background: var(--mavi, #009fe3);
transform: scaleX(0);
transform-origin: left;
animation: h90Nokta 24s linear infinite;
}
.h90-noktalar .n2::after { animation-delay: 8s; }
.h90-noktalar .n3::after { animation-delay: 16s; }
@keyframes h90Nokta {
0% { transform: scaleX(0); }
33.3% { transform: scaleX(1); }
33.4%, 100% { transform: scaleX(0); }
}
[data-theme="dark"] .hero90 { background: #0c1524; }
[data-theme="dark"] .h90-a { background: linear-gradient(140deg, #0e1c30, #10233c); }
[data-theme="dark"] .h90-b { background: linear-gradient(140deg, #1c1a10, #241f0e); }
[data-theme="dark"] .h90-c { background: linear-gradient(140deg, #170f24, #1d1430); }
[data-theme="dark"] .h90-ic h1 { color: #e8f4ff; }
[data-theme="dark"] .h90-ic p { color: #9db2c4; }
@media (max-width: 700px) {
.hero90 { min-height: 480px; }
.h90-ic { text-align: center; }
.h90-ic p { margin-inline: auto; }
}
/* ===== 90: HAKKIMIZDA — bol nefes ===== */
.hakk90 { background: #fff; padding: 96px 0; }
.hakk90-ic { max-width: 760px; text-align: center; }
.hakk90-etiket {
display: inline-block;
letter-spacing: 4px;
font-size: 0.72rem;
font-weight: 800;
color: var(--pembe, #e64592);
margin-bottom: 14px;
}
.hakk90-ic h2 {
font-size: clamp(1.7rem, 3.6vw, 2.5rem);
color: #17324a;
margin: 0 0 22px;
}
.hakk90-ic p {
font-size: 1rem;
line-height: 2;
color: #4d6a82;
margin: 0 0 30px;
}
.hakk90-linkler { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.hakk90-linkler a {
font-weight: 800;
font-size: 0.92rem;
color: var(--mavi, #009fe3);
text-decoration: none;
border-bottom: 2px solid transparent;
padding-bottom: 3px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.hakk90-linkler a:hover { border-color: var(--mavi, #009fe3); transform: translateY(-1px); }
[data-theme="dark"] .hakk90 { background: #0c1524; }
[data-theme="dark"] .hakk90-ic h2 { color: #e8f4ff; }
[data-theme="dark"] .hakk90-ic p { color: #9db2c4; }
/* ===== 90: DEĞERLER ===== */
.deger90 { background: #f7fbfe; padding: 64px 0; border-block: 1px solid rgba(0, 90, 160, 0.07); }
.deger90-kartlar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.deger90-kart {
background: #fff;
border: 1px solid rgba(0, 90, 160, 0.08);
border-radius: 18px;
padding: 26px 20px;
text-align: center;
box-shadow: 0 6px 18px rgba(15, 45, 80, 0.05);
transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.deger90-kart:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(15, 45, 80, 0.1); }
.dk-ikon {
width: 56px;
height: 56px;
display: inline-grid;
place-items: center;
font-size: 1.5rem;
border-radius: 16px;
margin-bottom: 12px;
}
.dk-mavi { background: rgba(0, 159, 227, 0.1); }
.dk-sari { background: rgba(252, 191, 29, 0.16); }
.dk-pembe { background: rgba(230, 69, 146, 0.1); }
.dk-mor { background: rgba(90, 48, 126, 0.1); }
.deger90-kart strong { display: block; font-size: 0.96rem; color: #17324a; margin-bottom: 6px; }
.deger90-kart p { margin: 0; font-size: 0.8rem; line-height: 1.65; color: #5c6b73; }
.deger90-rakamlar {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 34px;
font-size: 0.85rem;
font-weight: 700;
color: #4d6a82;
}
.deger90-rakamlar b {
font-family: 'Baloo 2', sans-serif;
font-size: 1.3rem;
color: var(--mavi, #009fe3);
margin-right: 4px;
}
[data-theme="dark"] .deger90 { background: #0d1728; border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .deger90-kart { background: #121e30; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .deger90-kart strong { color: #e8f4ff; }
@media (max-width: 900px) {
.deger90-kartlar { grid-template-columns: repeat(2, 1fr); }
.hakk90 { padding: 64px 0; }
}
@media (max-width: 520px) {
.deger90-kartlar { grid-template-columns: 1fr; }
}
/* ===== 90: OYUN GEÇİŞİ — modern etkileşim çerçevesi ===== */
/* ===== 96: HAKKIMIZDA — kurumsal vizyon + değer grid ===== */
.hakk96 { background: #fafafa; padding: 86px 0; }
.hakk96-izgara {
display: grid;
grid-template-columns: 1fr 1fr; /* %50 - %50 */
gap: 54px;
align-items: stretch;
margin-bottom: 52px;
}
.hakk96-etiket {
display: inline-block;
letter-spacing: 4px;
font-size: 0.72rem;
font-weight: 800;
color: #e64592;
margin-bottom: 12px;
}
.hakk96-sol h2 {
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
color: #1d1d1b;
line-height: 1.18;
margin: 0 0 18px;
}
.hakk96-sol p {
font-size: 0.95rem;
line-height: 1.8; /* nefes alan metin */
color: rgba(29, 29, 27, 0.72);
margin: 0 0 16px;
}
.hakk96-sol p:last-child { margin-bottom: 0; }
.hakk96-sag { position: relative; display: flex; }
.hakk96-pano {
position: relative;
flex: 1;
height: auto;
min-height: 420px;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(155deg, #009fe3 0%, #2a6fb8 45%, #5a307e 100%);
box-shadow: 0 24px 64px rgba(29, 29, 27, 0.16);
}
.hp-halka { position: absolute; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 50%; }
.hp-halka.hh1 { width: 340px; height: 340px; right: -110px; bottom: -130px; border-style: dashed; animation: rzDonus 46s linear infinite; }
.hp-halka.hh2 { width: 170px; height: 170px; left: -55px; top: -45px; }
.hp-kure { position: absolute; border-radius: 50%; }
.hp-kure.hk1 { width: 100px; height: 100px; right: 15%; top: 15%;
background: radial-gradient(circle at 32% 30%, #ffd75e, #fcbf1d 62%, rgba(252,191,29,0.3)); }
.hp-kure.hk2 { width: 62px; height: 62px; left: 16%; bottom: 18%;
background: radial-gradient(circle at 32% 30%, #ff7fb8, #e64592 62%, rgba(230,69,146,0.3)); }
.hp-cipler {
position: absolute;
left: 22px;
right: 22px;
bottom: 58px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.hp-cipler span {
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(4px);
color: #fff;
border-radius: 999px;
padding: 8px 14px;
font-size: 0.74rem;
font-weight: 700;
}
.hp-cipler b { font-family: 'Baloo 2', sans-serif; margin-right: 4px; color: #fcbf1d; }
.hp-yazi {
position: absolute; left: 24px; bottom: 20px;
font-family: 'Baloo 2', sans-serif; font-weight: 800;
font-size: 1rem; letter-spacing: 6px; color: rgba(255,255,255,0.85);
}
.hakk96-rozet {
position: absolute; top: -30px; right: -14px;
width: 116px; height: 116px;
background: #5a307e; border-radius: 50%;
display: grid; place-items: center;
box-shadow: 0 16px 40px rgba(29, 29, 27, 0.24);
z-index: 2;
}
.hakk96-rozet svg { position: absolute; inset: 6px; animation: rzDonus 18s linear infinite; }
@keyframes rzDonus { to { transform: rotate(360deg); } }
.hakk96-rozet text {
font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px;
fill: #fcbf1d; font-family: 'Nunito', sans-serif;
}
.hakk96-rozet-yildiz { font-size: 1.6rem; filter: drop-shadow(0 4px 10px rgba(252, 191, 29, 0.5)); }
[data-theme="dark"] .hakk96-sol h2 { color: #e8f4ff; }
[data-theme="dark"] .hakk96-sol p { color: #9db2c4; }
@media (max-width: 900px) {
.hakk96-izgara { grid-template-columns: 1fr; gap: 34px; }
.hakk96-rozet { top: -24px; right: 8px; width: 96px; height: 96px; }
}
.hakk96-bloklar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.hakk96-blok {
background: #ffffff;
border: 1px solid rgba(29, 29, 27, 0.06);
border-radius: 16px;
padding: 28px 22px;
box-shadow: 0 10px 34px rgba(29, 29, 27, 0.05);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hakk96-blok:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(29, 29, 27, 0.1);
}
.hakk96-ikon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 14px;
margin-bottom: 14px;
}
.hakk96-ikon svg { width: 26px; height: 26px; }
.b-mavi .hakk96-ikon { color: #009fe3; background: rgba(0, 159, 227, 0.1); }
.b-sari .hakk96-ikon { color: #e6a50f; background: rgba(252, 191, 29, 0.16); }
.b-pembe .hakk96-ikon { color: #e64592; background: rgba(230, 69, 146, 0.1); }
.b-mor .hakk96-ikon { color: #5a307e; background: rgba(90, 48, 126, 0.1); }
.hakk96-blok strong { display: block; font-size: 0.95rem; color: #1d1d1b; margin-bottom: 6px; }
.hakk96-blok p { margin: 0; font-size: 0.78rem; line-height: 1.65; color: rgba(29, 29, 27, 0.6); }
[data-theme="dark"] .hakk96 { background: #0d1728; }
[data-theme="dark"] .hakk96-ust h2, [data-theme="dark"] .hakk96-blok strong { color: #e8f4ff; }
[data-theme="dark"] .hakk96-ust p { color: #9db2c4; }
[data-theme="dark"] .hakk96-blok { background: #101c2e; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .hakk96-blok p { color: rgba(232, 244, 255, 0.55); }
@media (max-width: 1000px) { .hakk96-bloklar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hakk96-bloklar { grid-template-columns: 1fr; } .hakk96 { padding: 56px 0; } }
/* 94: beyazdan elit griye yumuşak iniş */
.oyun-gecis90 {
background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 55%, #f4f5f7 100%);
padding: 76px 0 14px;
text-align: center;
}
.og90-etiket {
display: inline-block;
letter-spacing: 4px;
font-size: 0.72rem;
font-weight: 800;
color: var(--mor, #5a307e);
margin-bottom: 10px;
}
.oyun-gecis90 h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: #17324a; margin: 0 0 10px; }
.oyun-gecis90 p { color: #5c6b73; font-size: 0.95rem; margin: 0; }
[data-theme="dark"] .oyun-gecis90 { background: #0c1524; }
[data-theme="dark"] .oyun-gecis90 h2 { color: #e8f4ff; }
/* 94: Oyun sahnesi — elit gri zemin + premium çerçeve (oyunun İÇİNE dokunmadan) */
.oyun-bolum { background: #f4f5f7; padding-top: 8px; }
.oyun-bolum .oyun-panel {
border-radius: 20px;
box-shadow: 0 30px 80px rgba(33, 37, 41, 0.1);
border: 1px solid rgba(33, 37, 41, 0.05);
transition: box-shadow 0.3s ease-in-out;
}
.oyun-bolum .oyun-panel:hover { box-shadow: 0 36px 96px rgba(33, 37, 41, 0.13); }
[data-theme="dark"] .oyun-gecis90 { background: linear-gradient(180deg, #0c1524 0%, #0d1728 100%); }
[data-theme="dark"] .oyun-bolum { background: #0d1728; }
/* ===== 92: PREMIUM HEADER (oval yüzen konteyner) ===== */
.header92 {
position: sticky;
top: 12px;
z-index: 90;
width: min(1240px, 96%);
margin: 12px auto 0;
background: #ffffff;
border: 1px solid rgba(33, 37, 41, 0.06);
border-radius: 16px;
box-shadow: 0 18px 50px rgba(33, 37, 41, 0.08);
transition: box-shadow 0.3s ease-in-out, top 0.3s ease-in-out;
}
.header92.kaydi { box-shadow: 0 24px 60px rgba(33, 37, 41, 0.13); }
[data-theme="dark"] .header92 { background: #101c2e; border-color: rgba(255,255,255,0.07); }
.header92 .header-ic { flex-wrap: wrap; row-gap: 8px; }
.header92 .arama-kutusu { max-width: 470px; min-width: 260px; flex: 1 1 320px; }
/* ===== 92: NAV + yumuşak açılır menüler ===== */
.nav92 { gap: 4px; }
.nd-kap { position: relative; }
.nd-tetik {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: none;
font: inherit;
cursor: pointer;
}
.nd-ok { font-size: 0.68em; transition: transform 0.3s ease-in-out; }
.nd-kap:hover .nd-ok, .nd-kap.acik .nd-ok, .nd-kap:focus-within .nd-ok { transform: rotate(180deg); }
.nd-panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 220px;
background: #ffffff;
border: 1px solid rgba(33, 37, 41, 0.07);
border-radius: 12px;
box-shadow: 0 22px 55px rgba(33, 37, 41, 0.12);
padding: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
z-index: 95;
}
.nd-kap:hover .nd-panel, .nd-kap:focus-within .nd-panel, .nd-kap.acik .nd-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nd-panel a {
display: block;
padding: 9px 12px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 700;
color: #212529;
text-decoration: none;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.nd-panel a:hover, .nd-panel a.aktif { background: #f8f9fa; color: var(--mavi, #009fe3); }
.nd-panel .nd-tumu { color: var(--mavi, #009fe3); margin-top: 4px; border-top: 1px solid #f1f3f5; border-radius: 0 0 10px 10px; }
[data-theme="dark"] .nd-panel { background: #101c2e; border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .nd-panel a { color: #dbeafe; }
[data-theme="dark"] .nd-panel a:hover { background: rgba(255,255,255,0.06); }
/* ===== 97: HERO — video birebir ===== */
.hero97 {
position: relative;
background: #ffffff;
min-height: clamp(470px, 64vh, 590px);
overflow: hidden;
}
.h97-slayt {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 34px;
opacity: 0;
visibility: hidden;
z-index: 0;
transition: opacity 0.8s ease-in-out, visibility 0.8s;
pointer-events: none;
}
.h97-slayt.aktif {
opacity: 1;
visibility: visible;
z-index: 2;
pointer-events: auto;
}
/* SOL: konteyner hizasına oturan metin sütunu */
.h97-sol {
flex: 0 0 40%;
max-width: 40%;
padding-left: max(24px, calc((100vw - 1240px) / 2 + 8px));
pointer-events: auto;
}
.h97-sol > * {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.h97-slayt.aktif .h97-sol > * { opacity: 1; transform: translateY(0); }
.h97-slayt.aktif .h97-sol > *:nth-child(2) { transition-delay: 0.15s; }
.h97-baslik { margin: 0 0 30px; line-height: 1.22; }
.h97-baslik span { display: block; font-family: 'Baloo 2', sans-serif; }
.h97-ust {
color: #009fe3;
font-size: clamp(1.35rem, 2.6vw, 2rem);
font-weight: 700;
}
.h97-alt {
color: #1d1d1b;
font-size: clamp(1.6rem, 3.2vw, 2.5rem);
font-weight: 800;
}
.h97-aksiyon { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.h97-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: #009fe3;
color: #ffffff;
font-weight: 800;
font-size: 0.88rem;
border-radius: 999px;
padding: 14px 28px;
text-decoration: none;
box-shadow: 0 12px 30px rgba(0, 159, 227, 0.28);
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.h97-cta:hover {
background: #5a307e;
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(90, 48, 126, 0.3);
}
.h97-katalog {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #1d1d1b;
transition: transform 0.3s ease-in-out;
}
.h97-katalog:hover { transform: translateY(-2px); }
.h97-katalog-ikon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1.5px solid rgba(29, 29, 27, 0.14);
color: #e64592;
background: #ffffff;
transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.h97-katalog-ikon svg { width: 20px; height: 20px; }
.h97-katalog:hover .h97-katalog-ikon { border-color: #e64592; box-shadow: 0 10px 24px rgba(230, 69, 146, 0.18); }
.h97-katalog-metin { display: flex; flex-direction: column; line-height: 1.25; }
.h97-katalog-metin strong { font-size: 0.88rem; color: #1d1d1b; }
.h97-katalog-metin small { font-size: 0.7rem; color: rgba(29, 29, 27, 0.5); font-weight: 700; }
/* SAĞ: ekran kenarına taşan büyük görsel alanı */
.h97-gorsel {
flex: 0 0 56%;
width: 56%;
align-self: center;
margin: 0 0 0 auto; /* header'dan nefes payı */
height: clamp(360px, 52vh, 470px);
border-radius: 28px 0 0 28px; /* sol köşeler oval, sağ kenara taşar */
box-shadow: 0 26px 70px rgba(29, 29, 27, 0.12);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.h97-gorsel::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(150px 150px at 86% 14%, rgba(0, 159, 227, 0.14), transparent 70%),
radial-gradient(110px 110px at 10% 80%, rgba(230, 69, 146, 0.12), transparent 70%),
radial-gradient(70px 70px at 22% 18%, rgba(252, 191, 29, 0.2), transparent 70%);
}
.g-mavi { background: linear-gradient(140deg, #e8f6fe 0%, #d3edfc 100%); }
.g-sari { background: linear-gradient(140deg, #fff6dd 0%, #ffedc9 100%); }
.g-mor { background: linear-gradient(140deg, #efe3fb 0%, #dcc6f2 100%); }
.h97-arka {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(1.03);
transition: opacity 0.8s ease-in-out, transform 1.1s ease-in-out;
}
.h97-slayt.aktif .h97-arka { opacity: 1; transform: scale(1); }
.h97-perde { display: none; }
.h97-on { display: none; }
.h97-on img { display: none; }.h97-yertutucu {
position: relative;
z-index: 1;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.9);
border: 1.5px dashed rgba(255, 255, 255, 0.55);
border-radius: 999px;
padding: 9px 18px;
}
/* NOKTALAR: video gibi minik yuvarlaklar; aktif dolu mavi */
.h97-dots {
position: absolute;
left: max(24px, calc((100vw - 1240px) / 2 + 8px));
bottom: 26px;
display: flex;
gap: 9px;
z-index: 3;
}
.h97-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid rgba(29, 29, 27, 0.3);
background: transparent;
transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.h97-dots span.aktif { background: #009fe3; border-color: #009fe3; transform: scale(1.15); }
[data-theme="dark"] .hero97 { background: #0c1524; }
[data-theme="dark"] .h97-alt, [data-theme="dark"] .h97-katalog-metin strong { color: #e8f4ff; }
[data-theme="dark"] .h97-katalog-metin small { color: rgba(232, 244, 255, 0.5); }
[data-theme="dark"] .h97-katalog-ikon { background: #101c2e; }
[data-theme="dark"] .h97-dots span { border-color: rgba(255, 255, 255, 0.35); }
@media (max-width: 900px) {
.hero97 { min-height: 560px; }
.h97-slayt { flex-direction: column; align-items: stretch; gap: 18px; }
.h97-sol { flex: none; max-width: 100%; padding: 26px 22px 0; text-align: center; }
.h97-aksiyon { justify-content: center; }
.h97-gorsel { margin: 0 18px 54px; border-radius: 20px; min-height: 220px; }
.h97-dots { left: 50%; transform: translateX(-50%); bottom: 18px; }
}
/* ===== 98: ÖZELLİK ŞERİDİ — video sadakati ===== */
.serit98 {
background: #f7f2e9;
padding-bottom: 56px; /* videodaki krem zemin */
border-radius: 72px 0 0 0; /* sol üst dev oval köşe */
margin-top: -34px;
padding: 64px 0 46px;
position: relative;
}
.s98-ic { display: flex; flex-direction: column; gap: 26px; }
.s98-ozellikler {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px;
}
.s98-oz { }
.s98-ikon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
color: #009fe3; /* çizgisel mavi ikonlar */
margin-bottom: 10px;
}
.s98-ikon svg { width: 40px; height: 40px; }
.s98-oz strong {
display: block;
font-family: 'Baloo 2', sans-serif;
font-size: 1.12rem;
color: #1d1d1b;
margin-bottom: 6px;
}
.s98-oz p { margin: 0; font-size: 0.84rem; line-height: 1.6; color: rgba(29, 29, 27, 0.55); }
.s98-sosyal {
display: flex;
align-items: center;
gap: 14px;
align-self: flex-end;
}
.s98-sosyal span { font-weight: 800; font-size: 0.9rem; color: #1d1d1b; }
.s98-sosyal a {
color: #1d1d1b;
display: grid;
place-items: center;
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.s98-sosyal svg { width: 20px; height: 20px; }
.s98-sosyal a:hover { transform: translateY(-2px); }
.s98-sosyal .ss-fb:hover { color: #1877f2; }
.s98-sosyal .ss-ig:hover { color: #e64592; }
[data-theme="dark"] .serit98 { background: #101c2e; }
[data-theme="dark"] .s98-oz strong, [data-theme="dark"] .s98-sosyal span, [data-theme="dark"] .s98-sosyal a { color: #e8f4ff; }
[data-theme="dark"] .s98-oz p { color: rgba(232, 244, 255, 0.55); }
@media (max-width: 900px) {
.serit98 { border-radius: 36px 0 0 0; padding: 44px 0 34px; }
.s98-ozellikler { grid-template-columns: 1fr; gap: 22px; }
.s98-sosyal { align-self: center; }
}
/* ===== 92: HABERLER SAYFASI ===== */
.haber-sayfa { padding: 70px 0; min-height: 55vh; text-align: center; }
.haber-etiket { display: inline-block; letter-spacing: 4px; font-size: 0.72rem; font-weight: 800; color: var(--mavi, #009fe3); margin-bottom: 10px; }
.haber-sayfa h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: #212529; margin: 0 0 12px; }
.haber-alt { color: #6c757d; max-width: 560px; margin: 0 auto 34px; line-height: 1.8; }
.haber-bos { background: #f8f9fa; border-radius: 16px; padding: 44px 24px; max-width: 520px; margin: 0 auto; box-shadow: 0 16px 44px rgba(33,37,41,0.06); }
.haber-bos span { font-size: 2.2rem; }
.haber-bos p { color: #495057; margin: 12px 0 20px; }
.haber-btn { display: inline-block; background: #212529; color: #fff; font-weight: 800; border-radius: 12px; padding: 12px 26px; text-decoration: none; transition: background 0.3s ease-in-out; }
.haber-btn:hover { background: var(--mavi, #009fe3); }
[data-theme="dark"] .haber-sayfa h1 { color: #e8f4ff; }
[data-theme="dark"] .haber-bos { background: #101c2e; }
@media (max-width: 900px) {
.header92 { top: 8px; width: 97%; }
.h92-slayt { grid-template-columns: 1fr; padding: 30px 22px 58px; text-align: center; }
.h92-metin p { margin-inline: auto; }
.h92-gorsel { max-width: 320px; margin: 0 auto; }
.serit92-sosyal { margin: 6px auto 0; }
}
/* ===== 93: HAKKIMIZDA + DEĞERLER (dönen rozet) ===== */
.hakk93 { background: #ffffff; padding: 88px 0; }
.hakk93-ic {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 56px;
align-items: center;
}
.hakk93-gorsel { position: relative; }
.hakk95-pano {
position: relative;
height: clamp(300px, 44vh, 420px);
border-radius: 20px;
overflow: hidden;
background: linear-gradient(155deg, #009fe3 0%, #2a6fb8 40%, #5a307e 100%);
box-shadow: 0 26px 70px rgba(29, 29, 27, 0.16);
}
.hp-katman {
position: absolute;
inset: 0;
background:
radial-gradient(300px 300px at 85% 15%, rgba(252, 191, 29, 0.25), transparent 60%),
radial-gradient(360px 360px at 10% 90%, rgba(230, 69, 146, 0.28), transparent 62%);
}
.hp-halka {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
}
.hp-halka.h-buyuk { width: 340px; height: 340px; right: -110px; bottom: -130px; border-style: dashed; animation: h95Donus 48s linear infinite; }
.hp-halka.h-kucuk { width: 180px; height: 180px; left: -60px; top: -50px; }
.hp-kure { position: absolute; border-radius: 50%; }
.hp-kure.hk-sari {
width: 100px;
height: 100px;
right: 16%;
top: 16%;
background: radial-gradient(circle at 32% 30%, #ffd75e, #fcbf1d 62%, rgba(252, 191, 29, 0.3));
animation: h95Yuzer 9s ease-in-out infinite alternate;
}
.hp-kure.hk-pembe {
width: 62px;
height: 62px;
left: 18%;
bottom: 20%;
background: radial-gradient(circle at 32% 30%, #ff7fb8, #e64592 62%, rgba(230, 69, 146, 0.3));
animation: h95Yuzer 11s ease-in-out infinite alternate-reverse;
}
.hp-yazi {
position: absolute;
left: 24px;
bottom: 20px;
font-family: 'Baloo 2', sans-serif;
font-weight: 800;
font-size: 1rem;
letter-spacing: 6px;
color: rgba(255, 255, 255, 0.85);
}
.hakk93-rozet {
position: absolute;
top: -34px;
right: -18px;
width: 118px;
height: 118px;
background: #5a307e;
border-radius: 50%;
box-shadow: 0 18px 44px rgba(29, 29, 27, 0.22);
display: grid;
place-items: center;
z-index: 2;
}
.hakk93-rozet svg {
position: absolute;
inset: 6px;
animation: hakk93Donus 18s linear infinite;
}
@keyframes hakk93Donus { to { transform: rotate(360deg); } }
.hakk93-rozet text {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.6px;
fill: #fcbf1d;
font-family: 'Nunito', sans-serif;
}
.hakk93-rozet-yildiz { font-size: 1.7rem; filter: drop-shadow(0 4px 10px rgba(252, 191, 29, 0.5)); }
.hakk93-etiket {
display: inline-block;
letter-spacing: 4px;
font-size: 0.72rem;
font-weight: 800;
color: var(--mavi, #009fe3);
margin-bottom: 12px;
}
.hakk93-metin h2 {
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
color: #1d1d1b;
margin: 0 0 16px;
line-height: 1.2;
}
.hakk93-hikaye { font-size: 0.95rem; line-height: 1.9; color: rgba(29, 29, 27, 0.75); margin: 0 0 24px; }
.hakk93-cizelge { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 26px; }
.hakk93-cizelge > div { position: relative; padding-left: 14px; }
.hakk93-cizelge > div::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 4px;
width: 3.5px;
border-radius: 4px;
background: var(--mavi, #009fe3);
}
.hakk93-cizelge > div:nth-child(2)::before { background: var(--sari, #fcbf1d); }
.hakk93-cizelge > div:nth-child(3)::before { background: var(--pembe, #e64592); }
.hakk93-cizelge b { display: block; font-family: 'Baloo 2', sans-serif; font-size: 1.05rem; color: #212529; }
.hakk93-cizelge span { font-size: 0.78rem; color: #6c757d; font-weight: 700; }
.hakk93-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.hakk93-kart {
display: flex;
gap: 12px;
background: #f8f9fa;
border-radius: 12px;
padding: 16px;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
}
.hakk93-kart:hover {
background: #ffffff;
transform: translateY(-4px);
box-shadow: 0 18px 46px rgba(33, 37, 41, 0.1);
}
.hk-ikon { font-size: 1.35rem; }
.hakk93-kart strong { display: block; font-size: 0.9rem; color: #212529; margin-bottom: 4px; }
.hakk93-kart p { margin: 0; font-size: 0.78rem; line-height: 1.6; color: #6c757d; }
.hakk93-kesfet {
display: inline-flex;
align-items: center;
gap: 8px;
background: #212529;
color: #ffffff;
font-weight: 800;
font-size: 0.9rem;
border-radius: 12px;
padding: 13px 26px;
text-decoration: none;
margin-bottom: 22px;
box-shadow: 0 14px 34px rgba(33, 37, 41, 0.14);
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hakk93-kesfet span { transition: transform 0.3s ease-in-out; }
.hakk93-kesfet:hover {
background: var(--mavi, #009fe3);
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(0, 130, 200, 0.28);
}
.hakk93-kesfet:hover span { transform: translateX(5px); }
[data-theme="dark"] .hakk93-kesfet { background: var(--mavi, #009fe3); }
.hakk93-rakamlar { display: flex; gap: 26px; flex-wrap: wrap; font-size: 0.82rem; font-weight: 700; color: #495057; }
.hakk93-rakamlar b { font-family: 'Baloo 2', sans-serif; font-size: 1.2rem; color: var(--mavi, #009fe3); margin-right: 3px; }
[data-theme="dark"] .hakk93 { background: #0c1524; }
[data-theme="dark"] .hakk93-metin h2, [data-theme="dark"] .hakk93-cizelge b { color: #e8f4ff; }
[data-theme="dark"] .hakk93-hikaye { color: #9db2c4; }
[data-theme="dark"] .hakk93-foto img { background: #101c2e; }
[data-theme="dark"] .hakk93-rozet { background: #101c2e; }
[data-theme="dark"] .hakk93-rozet text { fill: #dbeafe; }
[data-theme="dark"] .hakk93-kart { background: #101c2e; }
[data-theme="dark"] .hakk93-kart:hover { background: #142440; }
[data-theme="dark"] .hakk93-kart strong { color: #e8f4ff; }
@media (max-width: 900px) {
.hakk93 { padding: 56px 0; }
.hakk93-ic { grid-template-columns: 1fr; gap: 40px; }
.hakk93-rozet { top: -22px; right: 6px; width: 96px; height: 96px; }
.hakk93-mv { grid-template-columns: 1fr; }
}
/* ===== 98: NAV AKTIF ZARIF (hap iptal) ===== */
.ana-nav .nav-link.aktif,
.ana-nav .nav-link.aktif:hover {
background: transparent !important;
color: #009fe3 !important;
box-shadow: none !important;
border-radius: 0 !important;
border-bottom: 2px solid #009fe3;
padding-bottom: 6px;
}
/* ================================================================
113d: MOBİL ÜST BAR MİMARİSİ (dosya sonu = kaskadda son söz)
Kat 1: [Logo] ................. [Sepet] [Menü]
Kat 2: [ Arama çubuğu — tam genişlik ]
Kat 3: [Kalp · Dil · Tema · Giriş/Profil] (dengeli dağılım)
Menü linkleri hamburger paneline taşınır (çakışan şerit kuralı ezilir)
================================================================ */
@media (max-width: 620px) {
.header-ic {
flex-wrap: wrap;
row-gap: 10px;
column-gap: 8px;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
}
/* --- Kat 1 --- */
.header-ic > .logo { order: 0; flex: 1 1 auto; min-width: 0; gap: 8px; }
.nav-logo { height: 40px !important; }
.logo-yazi { font-size: 1rem; white-space: nowrap; }
.sepet-btn { order: 1; }
.mobil-menu-btn { order: 2; display: inline-flex !important; }
/* --- Kat 2 --- */
.arama-kutusu { order: 3; flex: 1 1 100%; max-width: 100%; min-width: 0; }
.arama-kutusu input { font-size: 16px; } /* iOS zoom tuzağını da keser */
/* --- Kat 3 --- */
.fav-btn, .dil-dropdown, #temaBtn,
.giris-yap-btn,
.header-ic > .ikon-btn:not(.sepet-btn):not(.mobil-menu-btn) { order: 4; }
.ikon-btn { width: 38px; height: 38px; }
.giris-yap-btn { padding: 8px 16px; font-size: 0.8rem; }
.dil-aktif-btn { padding: 6px 10px; }
/* --- Menü: yalnız hamburgerle --- */
.ana-nav { order: 5; display: none !important; }
.ana-nav.acik {
display: flex !important;
flex-direction: column;
flex: 1 1 100%;
gap: 2px;
background: var(--cam-zemin, rgba(255, 255, 255, 0.96));
border: 1px solid var(--cam-cizgi, rgba(0, 0, 0, 0.08));
border-radius: 14px;
padding: 10px;
box-shadow: 0 16px 40px rgba(29, 29, 27, 0.14);
}
.ana-nav.acik .nav-link { width: 100%; padding: 11px 14px; box-sizing: border-box; }
.ana-nav.acik .nd-panel { position: static; box-shadow: none; border: none; padding-left: 14px; }
/* ============ 113e: CHECKOUT TAŞMA CERRAHİSİ ============
KÖK: form alanlarının 2 sütunlu ızgarası mobilde tek sütuna
inmiyordu -> panel ekrandan genişti -> her şeyin sağı kesikti. */
.checkout-form-izgara { grid-template-columns: 1fr !important; }
.checkout-izgara { grid-template-columns: 1fr !important; }
.checkout-izgara > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.checkout-izgara input,
.checkout-izgara select,
.checkout-izgara textarea,
.checkout-izgara button { max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Fatura kutuları: içerik solda okunur, kutu ekrana sığar */
.fatura-secim { width: 100%; }
.fatura-radyo {
justify-content: flex-start !important;
gap: 10px;
max-width: 100%;
padding: 12px 14px !important;
}
.fatura-radyo span { white-space: nowrap; }
/* Sipariş özeti satırları: etiket solda, tutar sağda AMA ekran içinde */
.checkout-izgara .cam-panel { overflow: hidden; }
/* Header'ı geren dropdown/öğe freni */
.header-ic { max-width: 100%; }
.header-ic > * { min-width: 0; }
.dil-menu { left: auto; right: 0; max-width: calc(100vw - 24px); }
}
/* ================================================================
113e: MOBİL TEMİZLİK — SS kanıtlı kusurlar (checkout + genel)
================================================================ */
@media (max-width: 620px) {
/* İçeriğin üstüne binen Star Asistan karşılama bulutu: telefonda gizli
(maskot butonu DURUR — yardım bir dokunuş uzakta) */
.sa-bulut { display: none !important; }
/* "1 kişi şu an sitede" rozeti: telefonda içerik örtüyor — gizli */
#canliRozet { display: none !important; }
/* Star Asistan maskotu: küçük ve köşeye yapışık */
#saBalon { transform: scale(0.78); transform-origin: bottom right; }
/* Fatura Tipi: her koşulda alt alta, YAZISI GÖRÜNÜR dolgun satırlar */
.fatura-secim { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.fatura-radyo {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 12px 14px !important;
}
.fatura-radyo span { font-size: 0.9rem; }
/* Üst bar Kat-1 garantisi: sepet+menü, logonun satırında SAĞA yaslı */
.header-ic > .logo { flex: 0 1 auto; }
.sepet-btn { margin-left: auto; }
/* Sipariş Onayla: fiyat taşmasın, tek düzgün blok */
.checkout-onayla { width: 100%; box-sizing: border-box; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 1rem; }
.onayla-tutar { font-size: 1rem; }
/* Güven kartları 2'li ızgara */
.guven-kartlar, .odeme-guven { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
/* 113f: Duyuru barı varken header üst boşluğu sıfır — bar karta yapışık uzanır */
.duyuru-bar + .site-header { padding-top: 0; }
/* 113f: Menü açılırları — link ile panel arasındaki 12px ölü boşluğa görünmez köprü:
imleç panele inerken hover kopmaz; kapanışa da minik gecikme */
.nd-panel::before {
content: "";
position: absolute;
left: 0; right: 0; top: -14px; height: 14px;
}
.nd-panel { transition-delay: 0.15s; }
.nd-kap:hover .nd-panel, .nd-kap:focus-within .nd-panel, .nd-kap.acik .nd-panel { transition-delay: 0s; }
/* ================================================================
113g: ÇIPA PAYI + MOBİL GÜVENLİK AĞI (tüm sayfalar)
================================================================ */
/* Menüden Tarihçemiz/Vizyon/SSS'e gidince başlık sabit header altında kalmasın */
[id] { scroll-margin-top: 100px; }
/* Hiçbir medya/element mobilde taşamaz
(113h-düzeltme: svg/canvas'a height:auto VERİLMEZ — oyun tuvalini ve
dekorları dev boş bloklara şişiriyordu) */
img, video, iframe { max-width: 100%; height: auto; }
svg, canvas { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
@media (max-width: 680px) {
/* Site içi tablolar (iade, sözleşme vs.) yatay kaydırmalı olur, sayfayı esnetmez */
main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ================================================================
113h: PERFORMANS PAKETİ — kasma/donma frenleri
================================================================ */
/* Ekran dışındaki bölümlerin animasyonları uyur (index'teki gözcü yönetir) */
.anim-uyku, .anim-uyku * { animation-play-state: paused !important; }
/* Orta/zayıf cihazlarda en pahalı efekt olan canlı cam bulanıklığı kapanır:
görünüm yarı saydam düz zemine döner, akıcılık belirgin artar */
@media (max-width: 1100px) {
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Kullanıcı sistemde 'hareketi azalt' dediyse dekoratif animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ================================================================
113i: TELEFON İNCE AYAR — hamburger paneli + tepe taşması
================================================================ */
@media (max-width: 680px) {
/* --- 129: KUTU ŞEFFAFLAŞTIRMA — ikonlar 'header-aksiyonlar' kutusunda hapisti;
kutu yok sayılır, çocuklar doğrudan header düzenine katılır.
Böylece 113d katman sistemi (logo+sepet+menü / arama / ikonlar) NİHAYET kurulur --- */
/* --- 128b: HAMBURGER KESIN SET — eski kurallardan sızma imkânsız,
panel: header altına yapışık, DÜZ BEYAZ, kaydırılabilir kart --- */
.ana-nav.acik {
display: flex !important;
position: static !important;
inset: auto !important;
transform: none !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
flex: 1 1 100% !important;
width: 100% !important;
height: auto !important;
max-height: 68vh !important;
overflow-y: auto !important;
gap: 2px !important;
margin: 8px 0 2px !important;
padding: 12px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 159, 227, 0.18) !important;
border-radius: 16px !important;
box-shadow: 0 22px 50px rgba(20, 60, 100, 0.22) !important;
opacity: 1 !important;
visibility: visible !important;
}
.ana-nav.acik > .nav-link, .ana-nav.acik .nd-tetik {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 12px 14px !important;
margin: 0 !important;
font-size: 0.95rem !important;
color: #1d1d1b !important;
background: transparent !important;
border-radius: 10px !important;
text-align: left !important;
}
.ana-nav.acik > .nav-link:active, .ana-nav.acik .nd-panel a:active { background: rgba(0, 159, 227, 0.1) !important; }
.ana-nav.acik > .nav-link.aktif { color: #009fe3 !important; font-weight: 800; }
[data-theme="dark"] .ana-nav.acik { background: #131c2c !important; border-color: rgba(127, 208, 245, 0.2) !important; }
[data-theme="dark"] .ana-nav.acik > .nav-link, [data-theme="dark"] .ana-nav.acik .nd-tetik { color: #e9f2f8 !important; }
[data-theme="dark"] .ana-nav.acik .nd-panel a { color: #bcd9ea !important; }
/* --- Hamburger paneli: Hakkımızda/Ürünler alt linkleri HER ZAMAN görünür düz liste --- */
.ana-nav.acik .nd-kap { width: 100%; }
.ana-nav.acik .nd-tetik {
width: 100%; justify-content: space-between;
font-weight: 800; color: #0b6aa8;
border-bottom: 1px dashed rgba(0, 159, 227, 0.25);
border-radius: 0; padding: 11px 14px;
}
.ana-nav.acik .nd-tetik .nd-ok { display: none; }
.ana-nav.acik .nd-panel {
position: static !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 2px 0 8px 22px !important;
min-width: 0 !important;
}
.ana-nav.acik .nd-panel::before { display: none !important; }
.ana-nav.acik .nd-panel a { display: block; padding: 9px 10px; border-radius: 10px; }
[data-theme="dark"] .ana-nav.acik { background: rgba(16, 24, 40, 0.97); }
[data-theme="dark"] .ana-nav.acik .nd-tetik { color: #7fd0f5; }
/* --- Tepe taşması: 3. kat ikonları kompakt, satıra kesin sığar --- */
.site-header { padding-top: 6px !important; padding-bottom: 6px !important; }
.header-ic { column-gap: 6px; }
.ikon-btn { width: 36px; height: 36px; flex: 0 0 auto; }
.fav-btn, #temaBtn { flex: 0 0 auto; }
.giris-yap-btn { padding: 7px 12px !important; font-size: 0.74rem !important; white-space: nowrap; }
.dil-aktif-btn { padding: 5px 8px !important; font-size: 0.74rem; }
.logo-yazi { font-size: 0.95rem; }
.nav-logo { height: 38px !important; }
/* 128c: Kat düzeni rafinesi — Kat1 iki uca, Kat3 ikonları ORTADA derli dizilir */
.header-ic { justify-content: center !important; }
.header-ic > .logo { margin-right: auto; }
.fav-btn, .dil-dropdown, #temaBtn, .giris-yap-btn,
.header-ic .ikon-btn:not(.sepet-btn):not(.mobil-menu-btn) { margin: 0 4px !important; }
/* 128: emniyet kemeri — header'dan hiçbir öğe ekran dışına sarkamaz */
.site-header { overflow-x: clip; }
.site-header .logo { position: static !important; top: auto !important; padding-left: 0 !important; }
.site-header .nav-logo { position: static !important; transform: none !important; }
}
/* ================================================================
113j: TELEFON FİNAL — 2 katlı header + kaydırınca mini mod + asistan
================================================================ */
@media (max-width: 680px) {
/* --- 2 KATLI DÜZEN: üstte logo+TÜM ikonlar tek sıra, altta tam-satır arama --- */
/* ============ DÜZEN v5 — DOM-temelli, order savaşı YOK ============
HTML sırası zaten doğru: [Logo][Arama] üst satır · [ikon kutusu] alt satır
Satır 1: [⭐ Logo] [🔍 arama —————————— ]
Satır 2: [ 💗 🇹🇷 🌙 👤 🛒 ☰ ] eşit boy + eşit aralık */
.header-ic > *, .header-aksiyonlar > * { order: 0 !important; }
.header-ic { flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; row-gap: 9px !important; }
.header-ic > .logo { flex: 0 0 auto !important; margin: 0 !important; }
.header-ic > .arama-kutusu {
flex: 1 1 0 !important;
min-width: 140px !important;
max-width: none !important;
margin: 0 0 0 8px !important;
}
.ana-nav { flex: 1 1 100% !important; }
.header-aksiyonlar {
display: flex !important;
flex: 1 1 100% !important;
justify-content: space-evenly !important;
align-items: center !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.header-aksiyonlar > * { flex: 0 0 auto !important; margin: 0 !important; }
.header-aksiyonlar .ikon-btn, .header-aksiyonlar .fav-btn, .header-aksiyonlar #temaBtn {
width: 37px !important; height: 37px !important;
}
.giris-yap-btn { padding: 8px 14px !important; font-size: 0.76rem !important; }
/* Rozetler komşuya binmesin */
.fav-btn [class*="rozet"], .sepet-btn [class*="rozet"],
.fav-btn .sayi, .sepet-btn .sayi, .fav-btn span, .sepet-btn span { transform: scale(0.9); }
.header-ic { justify-content: flex-start !important; column-gap: 5px !important; row-gap: 8px !important; }
.header-ic > .logo { margin-right: auto !important; }
.ikon-btn, .fav-btn, #temaBtn { width: 34px !important; height: 34px !important; margin: 0 !important; }
.dil-dropdown { margin: 0 !important; }
.dil-aktif-btn { padding: 5px 7px !important; }
/* --- KAYDIRINCA MİNİ MOD: her sayfada, yumuşak küçülür --- */
.site-header, .nav-logo, .ikon-btn, .arama-kutusu input { transition: all 0.25s ease; }
.site-header.scrolled { padding-top: 3px !important; padding-bottom: 3px !important; }
.site-header.scrolled .nav-logo { height: 30px !important; }
.site-header.scrolled .logo-yazi { font-size: 0.82rem !important; }
.site-header.scrolled .ikon-btn, .site-header.scrolled .fav-btn, .site-header.scrolled #temaBtn {
width: 30px !important; height: 30px !important;
}
.site-header.scrolled .arama-kutusu input { padding-top: 7px !important; padding-bottom: 7px !important; }
.site-header.scrolled .header-ic { row-gap: 5px !important; }
/* --- STAR ASİSTAN: telefonda alttan sabit sayfa — kayma/taşma imkânsız --- */
#saPencere {
position: fixed !important;
left: auto !important;
right: 10px !important;
bottom: 10px !important;
top: auto !important;
width: min(88vw, 335px) !important;
max-width: 88vw !important;
height: min(48vh, 400px) !important;
max-height: 48vh !important;
border-radius: 18px !important;
transform: none !important;
margin: 0 !important;
box-shadow: 0 24px 60px rgba(10, 40, 70, 0.35) !important;
}
#saPencere .sa-mesajlar { max-height: none !important; flex: 1 1 auto !important; overflow-y: auto !important; }
#saGiris { font-size: 16px !important; }
}
/* ================================================================
113k: MOBİL SON RÖTUŞLAR
================================================================ */
@media (max-width: 680px) {
/* Dikey 'mıknatıs' kapalı: kaydırırken sayfa başına ışınlanma biter */
html, body, .intro-sahne, main, #yildizSahnesi {
scroll-snap-type: none !important;
}
* { scroll-snap-align: none !important; }
.vs-ray { scroll-snap-type: x mandatory !important; } /* vitrin rayının yatay hizası kalsın */
.vs-ray > article { scroll-snap-align: start !important; }
/* Duyuru barı taşmaz, tek satır akar */
.duyuru-bar { overflow: hidden !important; }
/* Dokunmatik hedefleri rahat: tüm butonlar en az 40px dokunma alanı */
.nav-link, .sa-cip { min-height: 40px; }
}
/* ===== ÜYELİK VE CHECKOUT RADYO BUTONU TAŞMA DÜZELTMESİ ===== */
.uyelik-form input[type="radio"],
.uyelik-form input[type="checkbox"],
.checkout-form input[type="radio"],
.checkout-form input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
padding: 0 !important;
margin: 0 !important;
flex-shrink: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fatura-radyo span {
white-space: normal !important;
word-break: break-word;
}