/* OTOMATIK URETILDI — kaynak: src/styles/. Duzenleme icin kaynagi degistirip
   scripts/build_css.sh calistirin. Uretim: 2026-09-30T14:06:23Z */

/* ==== fonts.css ==== */
/* Kendi sunucumuzdan fontlar — Google Fonts'a istek YOK.
   Neden: ziyaretcinin IP'si cerez onayindan once Google'a gidiyordu (KVKK yurt disi aktarim)
   ve harici CSS render'i blokluyordu. Yalniz latin + latin-ext alt kumeleri (Turkce icin yeter).
   Kaynak: fonts.googleapis.com css2 (Inter, Playfair Display — SIL Open Font License).
   Degisken fontlar: tum agirliklar ayni dosyada; unicode-range sayesinde yalniz gereken indirilir. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/playfairdisplay-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/playfairdisplay-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== tokens.css ==== */
/* =============================================================
   ÇİLEK EROTİK SHOP — DESIGN TOKENS (tek kaynak) · AÇIK TEMA
   Kaynak: Master Spec v2 + A-Kalite Proje Raporu v1.0 birleştirildi.
   Çelişkilerin gerekçeleri: docs/00-KARARLAR.md
   Kontrast doğrulaması: python3 scripts/check_contrast.py
   KURAL: Bu dosyanın dışında hard-coded renk/radius/spacing YASAK.
   ============================================================= */

:root {
  /* ---------- YÜZEYLER ---------- */
  /* Acik tema: saf beyaz degil — sicak kirik beyaz. Saf beyaz hem parlar hem de
     kirmizi markayla yan yana klinik/ucuz duruyor. Kart beyaz, sayfa kirik beyaz:
     kartlar zeminden AYRILIR, golgeye ihtiyac kalmaz.                            */
  --c-bg:            #FBF9F9; /* sayfa zemini — gradient/wash icin headroom        */
  --c-surface-1:     #FFFFFF; /* kart, panel, input — zeminden yukselen katman     */
  --c-surface-2:     #F4F0F0; /* hover, utility bar, gorsel placeholder            */
  --c-surface-3:     #EAE5E5; /* nested katman (accordion ici, drawer basligi)     */

  /* ---------- SINIRLAR ---------- */
  --c-border:        #E4DEDE; /* SADECE dekoratif ayrac (1.2:1 — UI siniri degil)  */
  --c-border-strong: #8C8180; /* input/outline buton siniri — 3.50:1 on bg ✅      */

  /* ---------- METİN ---------- */
  --c-text:          #1A1516; /* 17.22:1 on bg — notr siyah degil, sicak murekkep  */
  --c-text-muted:    #5F5557; /* 6.85:1 on bg · 6.35:1 on surface-2                */
  --c-text-on-brand: #FFFFFF; /* 5.16:1 on brand-red — degismedi                   */

  /* ---------- MARKA ---------- */
  /* Marka kirmizisi AYNEN korunur: kimligin kendisi. Degisen yalniz hover/press
     yonu — acik temada etkilesim KOYULASIR (koyu temada aciliyordu).              */
  --c-brand:         #D7192D; /* YUZEY rengi: buton dolgusu, badge, aktif durum    */
  --c-brand-hover:   #C01527; /* beyaz metinle 6.22:1                              */
  --c-brand-press:   #A40F1F; /* beyaz metinle 7.88:1                              */
  --c-brand-text:    #C10E22; /* METIN rengi: fiyat, link, indirim — 5.97:1 on bg  */
  --c-brand-subtle:  rgba(215, 25, 45, .10); /* tint zemin — acikta .12 leke gibi  */

  /* ---------- SEMANTİK ---------- */
  /* Hepsi koyulastirildi: koyu temanin parlak tonlari acik zeminde AA'yi gecmiyor
     (#22A06B/#FBF9F9 = 3.17:1 ❌). Ton ayni, degeri derinlesti.                   */
  --c-success:       #1A7A4F; /* 5.08:1 — stok/basari                              */
  --c-warning:       #9A6508; /* 4.72:1 — dusuk stok                               */
  --c-danger:        #C10E22; /* hata metni = brand-text ile ayni, AA uyumlu       */
  --c-gold:          #7A5B1E; /* 6.00:1 — antika bronz; premium mikro vurgu, CTA DEGIL */
  --c-info:          #2B5C8A; /* 6.67:1 — panel: bilgi durumu (odendi, kargoda)    */
  /* Panel durum haplari: ton metni kendi acik zemininde >=4.5:1 (check_contrast)   */
  --c-success-subtle: #E8F2ED; /* success metni uzerinde 4.66:1                    */
  --c-warning-subtle: #F8F4EE; /* warning metni uzerinde 4.52:1                    */
  --c-info-subtle:    #EAEFF3; /* info metni uzerinde 6.05:1                       */

  /* ---------- ETKİLEŞİM ---------- */
  /* Focus acik temada KOYU olmak zorunda: hem beyaz kart hem kirmizi buton
     ustunde >=3:1 gerekiyor. Aciga cekmek kirmizi butonda 1.72:1'e dusuruyordu.   */
  --c-focus:         #1A1516; /* 18.06:1 on surface-1 · 3.50:1 on brand ✅         */
  --focus-ring:      0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-focus);
  --c-overlay:       rgba(26, 21, 22, .62); /* age gate / modal perdesi            */

  /* ---------- GRADIENT & IŞIK (sadece hero/kampanya) ---------- */
  --grad-brand:      linear-gradient(135deg, #D7192D 0%, #A40F1F 100%);
  /* Acik zeminde .14 alfa kirmizi wash "leke" gibi duruyor — .06'ya indirildi.    */
  --glow-brand:      radial-gradient(60% 60% at 50% 40%, rgba(215,25,45,.06), transparent 70%);
  /* Sayfada en fazla 1–2 wash odagi. Neon kulup gorunumu yasak. */

  /* ---------- TİPOGRAFİ ---------- */
  /* İKİSİ DE Türkçe diakritik (ç ğ ı İ ö ş ü) desteklemek ZORUNDA. */
  --font-display: "Playfair Display", "DM Serif Display", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num:     var(--font-ui); /* font-feature-settings: "tnum" 1 */

  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 4.5rem);  /* 40 → 72 */
  --fs-h1:      clamp(2rem,   1.2rem + 3.2vw, 3rem);    /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); /* 24 → 36 */
  --fs-h3:      clamp(1.25rem, 1.05rem + .9vw, 1.75rem);/* 20 → 28 */
  --fs-body:    1rem;      /* 16px — mobil input'ta ASLA altına inme (iOS zoom) */
  --fs-body-lg: 1.125rem;  /* 18px */
  --fs-label:   .875rem;   /* 14px */
  --fs-caption: .8125rem;  /* 13px */
  --fs-price:   1.5rem;    /* 24px — brand-text kırmızısı bu boyutta AA-large    */
  --fs-price-sm:1.125rem;  /* 18px — bu boyutta kırmızı DEĞİL, --c-text kullan   */

  --lh-tight: 1.1;
  --lh-head:  1.2;
  --lh-body:  1.55;
  --measure:  68ch;

  /* ---------- SPACING (4px tabanlı) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 120px;

  --section-gap:   56px;  /* mobil */
  --container:     1440px;
  --gutter:        16px;  /* mobil */

  /* ---------- RADIUS (tek değer — aralık yok) ---------- */
  --r-card:   20px;
  --r-input:  12px;
  --r-btn:    12px;
  --r-modal:  24px;
  --r-pill:   999px;

  /* ---------- BOYUT ---------- */
  --h-btn:      50px;
  --h-input:    52px;
  --h-header:   60px;  /* mobil */
  --tap-min:    44px;  /* mutlak alt sınır */
  --tap-cta:    52px;  /* birincil CTA */
  --h-trustbar: 38px;
  --h-bottomnav: 64px;  /* alt navigasyon; stickybar bunun ustunde oturur */
  --h-stickybar: 72px;
  --h-logo:     38px;   /* header logo — mobil */
  --h-logo-lg:  46px;   /* header logo — masaustu; ana menu satiri da bu yukseklikte */
  --w-logo-gate: 160px; /* age gate logosu: DS §6 140–180px */
  --fs-micro:   .6875rem; /* 11px — yalniz rozet/sayac; metin icin ASLA */
  --fs-nav:     .75rem;   /* 12px — alt navigasyon etiketi. Bu etiketler --fs-micro
                             kullaniyordu: token'in kendi kurali bunu YASAKLIYOR
                             ("metin icin ASLA") ve etiketler cilizdi. */
  --thumb-sm:   88px;   /* sepet satiri gorseli */
  --thumb-md:   96px;
  --w-admin-nav:  248px;  /* panel sol menu (masaustu) */
  --w-admin-card: 220px;  /* pano kartinin en kucuk genisligi */
  --w-admin-search: 420px; /* panel ust cubuk aramasi (masaustu) */
  --w-admin-drawer: 280px; /* panel mobil cekmece menusu */
  --fs-admin-h1:  1.75rem; /* panel sayfa basligi (onayli taslak) */
  --fs-admin-h2:  1.25rem; /* panel kart/bolum basligi */
  --fs-admin-kpi: 1.625rem; /* pano ozet karti rakami */
  --icon-sm:      18px;   /* panel menu/arama ikonu */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* panel: siparis no, adres (slug) */
  --fs-mono:      .8125rem;
  --w-admin-thumb: 44px;  /* panel tablo kucuk gorseli */
  --w-account-nav: 260px; /* hesabim: masaustu sol menu */
  --w-auth:        480px; /* giris/kayit formu sutunu: okunur satir, tek elle dolan form */
  --w-admin-inl:  96px;   /* panel tablo ici sayi kutusu (fiyat, stok) */
  --w-admin-lbl:  220px;  /* panel metin blogu etiket sutunu */
  --w-admin-bar:  120px;  /* panel siralama cubugu */
  --h-admin-bar:  8px;

  /* ---------- GÖLGE (sadece floating öğelerde) ---------- */
  --sh-float: 0 2px 4px rgba(26,21,22,.05), 0 8px 24px rgba(26,21,22,.09);
  --sh-modal: 0 4px 12px rgba(26,21,22,.08), 0 24px 56px rgba(26,21,22,.16);

  /* ---------- MOTION ---------- */
  --e-out:      cubic-bezier(.2,.8,.2,1);
  --d-btn:      180ms;
  --d-card:     220ms;
  --d-menu:     260ms;
  --d-drawer:   220ms;
  --d-hero:     600ms;
  --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-agegate: 400; --z-toast: 500;
}

@media (min-width: 768px)  { :root { --section-gap: 72px; --gutter: 24px; --h-header: 64px; } }
@media (min-width: 1024px) { :root { --section-gap: 96px; --gutter: 32px; --h-header: 72px; } }

/* Kullanıcı hareketi azaltmayı seçtiyse tüm süreler sıfırlanır. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-btn:0ms; --d-card:0ms; --d-menu:0ms; --d-drawer:0ms; --d-hero:0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Site tek temalı (light). Tarayıcı formlarının doğru render olması için: */
:root { color-scheme: light; }

/* Focus ASLA gizlenmez. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-btn);
}

/* ==== base.css ==== */
/* ============ BASE ============
   Yalnizca tokens.css degiskenleri kullanilir. Hard-coded deger yasak. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* yatay tasma asla */
}

img, picture, video { max-width: 100%; height: auto; display: block; }
/* Yuklenirken bosluk yerine yuzey — AMA yalniz gorsel KUTULARINDA.
   Genel `img { background }` kurali saydam PNG'lerin (logo) arkasinda gri bir
   dikdortgen birakiyordu; logo koyu zeminde kutulu gorunuyordu.
   ACIK TEMA: bu yuzey surface-2 (gri) iken, urun fotograflari BEYAZ fonda cekildigi
   icin img'in padding'i boyunca gri bir CERCEVE olusuyordu — fotograf "yanlis
   yapistirilmis" duruyordu. Kutu rengi kabin rengiyle esitlendi: cerceve yok.
   Bosluk doldurma gorevini zaten kapsayici (.card__media / .gallery__track) yapiyor. */
.card__media img, .cartline__media img, .gallery__slide img, .hero__art img {
  background: var(--c-surface-1);
}

/* Secim rengi de markadan — tarayici varsayilani mavi, sayfadan kopuyor. */
::selection { background: var(--c-brand-subtle); color: var(--c-text); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0; line-height: var(--lh-head); text-wrap: balance; font-weight: 600; }
h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--s-4); max-width: var(--measure); }

.display {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: -.015em; margin: 0;
}
.muted   { color: var(--c-text-muted); }
.caption { font-size: var(--fs-caption); color: var(--c-text-muted); }
/* --font-num (= UI fontu) ARTIK uygulaniyor. Oncesinde .tnum yalniz tabular-nums
   veriyordu; display serif (Playfair) bir basligin icinde kalan rakamlar onun
   formlariyla ciziliyordu ve SIFIR kucuk "o" gibi okunuyordu:
   «"zzqqxx" için 0 sonuç» -> «... o sonuç». Rakamlar her zaman UI fontunda. */
.tnum    { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Ekran okuyucuya acik, gorsel olarak gizli */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: calc(-1 * var(--s-10)); z-index: var(--z-toast);
  background: var(--c-surface-1); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-btn); padding: var(--s-3) var(--s-4); transition: top var(--d-btn) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* hidden ozniteligi her zaman kazanir: .btn{display:inline-flex}, .consent__prefs{display:grid}
   gibi kurallar onu eziyordu (cerez ayarlari mobilde acilista acik kaliyordu). */
[hidden] { display: none !important; }

.section   { padding-block: var(--section-gap); }
.stack     { display: flex; flex-direction: column; gap: var(--s-4); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-head h2 { font-family: var(--font-display); font-weight: 500; }
.link-more {
  font-size: var(--fs-label); font-weight: 600; color: var(--c-brand-text);
  display: inline-flex; align-items: center; gap: var(--s-2);
}

/* ==== components.css ==== */
/* ============ COMPONENTS ============ */

/* ---- Button ---- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: var(--c-border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--h-btn); padding: 0 var(--s-5);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-btn);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer; text-align: center;
  transition: background var(--d-btn) var(--e-out), transform var(--d-btn) var(--e-out),
              border-color var(--d-btn) var(--e-out);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  --btn-bg: var(--c-brand); --btn-fg: var(--c-text-on-brand); --btn-bd: var(--c-brand);
}
.btn--primary:hover  { --btn-bg: var(--c-brand-hover); --btn-bd: var(--c-brand-hover); }
.btn--primary:active { --btn-bg: var(--c-brand-press); }
.btn--ghost { --btn-bd: transparent; }
.btn--block { width: 100%; }
.btn--cta   { min-height: var(--tap-cta); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---- Trust bar ----
   Eskiden header'la ayni gri tonda, ikonsuz duz metin seridiydi: header'in bir
   parcasi gibi okunmuyor, "dipnot" gibi duruyordu. Koyu murekkep serit sayfanin
   tepesini net kapatir; kirmizi ikonlar vaadi isaretler; WhatsApp artik tiklanir.
   Koyu zemin: focus halkasi (--c-focus da koyu) burada ACIK renge cevrilir. */
.trustbar {
  background: var(--c-text); color: var(--c-surface-3);
  font-size: var(--fs-caption); letter-spacing: .01em;
}
.trustbar__row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--h-trustbar); }
.trustbar__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; }
.trustbar__item { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.trustbar__item + .trustbar__item::before {
  content: ""; width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill);
  background: var(--c-border-strong); margin: 0 var(--s-4);
}
.trustbar svg { flex: none; color: var(--c-brand); }
.trustbar__actions { display: flex; align-items: center; gap: var(--s-5); flex: none; }
.trustbar a {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-trustbar);
  color: var(--c-surface-1); font-weight: 600; white-space: nowrap;
}
.trustbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trustbar a:focus-visible { outline-color: var(--c-surface-1); }
.trustbar__short { display: none; }
@media (max-width: 1023px) {
  .trustbar__item:nth-child(n+2) { display: none; }
  .trustbar .trustbar__wa { display: none; }
}
@media (max-width: 767px) {
  /* Marka vaadi + aranabilir numara kalir. Serit yuksekligi dokunma hedefini karsilar. */
  .trustbar__full  { display: none; }
  .trustbar__short { display: inline; }
  .trustbar__row, .trustbar a { min-height: var(--tap-min); }
}

/* ---- Header ---- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-bg); border-bottom: 1px solid var(--c-border);
}
/* Acik zeminde yapiskan header, icerik altindan kayarken 1px cizgiyle "havada"
   duruyordu — sayfadan kopuk. Sayfa kaydikca golge kazanip yuzeye oturuyor.
   @supports ardinda: destekleyemeyen tarayici bugunku duz haliyle calisir. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .header {
      animation: header-lift linear both;
      animation-timeline: scroll();
      animation-range: 0 var(--s-9);
    }
    @keyframes header-lift { to { box-shadow: var(--sh-float); } }
  }
}
.header__row {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--h-header);
}
.header__logo img { height: var(--h-logo); width: auto; }
@media (min-width: 1024px) {
  .header__logo img { height: var(--h-logo-lg); }
  /* Marka isareti form kontrolune yapismaz: 16px gap logoyu eziyordu. */
  .header__logo { margin-right: var(--s-4); }
}

/* Arama seridin ORTASINDA durur. Eskiden logonun hemen dibine yapisip sagina
   ~700px bosluk birakiyordu: marka ezik, serit dengesiz goruniyordu. */
.search { flex: 1 1 auto; max-width: 560px; position: relative; display: none; margin-inline: auto; }
@media (min-width: 1024px) { .search { display: flex; align-items: center; } }
/* HATA: form "block" iken yuksekligi input'unkine esit DEGILDI (satir kutusu +
   bosluk dugumleri formu ~141px yapiyordu). Buyutec "top: 50%" ile bu yanlis
   yukseklige gore konumlanip alanin ALTINA dusuyordu — drawer'da tam da bu
   oluyordu. Flex + tek akis ogesi: form yuksekligi daima input yuksekligi. */
.search input {
  width: 100%;
  /* Kompakt serit varyanti: 52 yerine 44px. Serit yuksekligini yemeden logo ve
     menuye yer birakir; 44px mutlak dokunma alt siniri, altina inilmez. */
  height: var(--tap-min);
  /* Buyutec SOLDA: yazi ile gonderme eylemi yan yana. Eskiden buyutec sag ucta,
     placeholder'dan ~600px uzaktaydi — alanla ilgisiz bir sembol gibi duruyordu. */
  padding: 0 var(--s-4) 0 calc(var(--tap-min) + var(--s-1));
  /* Dolgulu yuzey: eskiden ic rengi serit zemininin AYNISIydi (ikisi de beyaza yakin),
     alani yalnizca ince cizgi tanimliyordu — "bicimlendirilmemis form alani" gibi.
     Sinir yine --c-border-strong: WCAG 1.4.11 (>=3:1) bunu zorunlu kiliyor (Karar A2). */
  background: var(--c-surface-2); color: var(--c-text);
  /* --r-input: checkout, filtre ve tum form alanlariyla BIREBIR ayni kose.
     Pill, ayni is icin sayfada ikinci bir alan dili yaratiyordu. */
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input);
  font-size: var(--fs-body);            /* 16px — iOS zoom onleme */
  transition: background var(--d-btn) var(--e-out);
}
/* Odakta yuzey beyazlar: "simdi buraya yaziyorsun". */
.search input:focus { background: var(--c-surface-1); }
.search input::placeholder { color: var(--c-text-muted); }
/* :not(.search--page) — arama SAYFASINDA buton gercek bir .btn'dir, alan icine
   gomulmez. Bu ayrim yokken .btn absolute'a zorlaniyor ve formu "position: static"
   oldugu icin SAYFANIN sol alt kosesine ucuyordu: "Ara" butonu alandan 170px
   asagida, ekran kenarinda duruyordu. */
.search:not(.search--page) button {
  position: absolute; left: var(--s-1); top: 50%; transform: translateY(-50%);
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: 0; border-radius: var(--r-input); cursor: pointer;
  display: grid; place-items: center; color: var(--c-text-muted);
  transition: color var(--d-btn) var(--e-out);
}
.search:not(.search--page) button:hover { color: var(--c-text); }
.search input { flex: 1 1 auto; min-width: 0; }

.header__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
/* HATA: burasi inline-GRID idi, asagidaki media query ise flex-direction: row
   diyordu — grid'de o ozelligin hukmu yok. Yani masaustunde tasarlanan
   "ikon + etiket yan yana" duzeni hic calismadi; etiketler ikonun ALTINA
   yiginiyor, serit tepeden agirlasiyordu. inline-flex ile amaclanan duzen geldi. */
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-width: var(--tap-min); min-height: var(--tap-min);
  border-radius: var(--r-pill); background: none; border: 0; cursor: pointer;
  color: var(--c-text);
  transition: background var(--d-btn) var(--e-out);
}
.iconbtn:hover { background: var(--c-surface-2); }
/* Etiket sakin: ust sag aksiyonlar ana menuyle yarismamali. */
.iconbtn__label { display: none; font-size: var(--fs-label); font-weight: 500; color: var(--c-text-muted); }
.iconbtn:hover .iconbtn__label { color: var(--c-text); }
@media (min-width: 1024px) {
  .iconbtn { gap: var(--s-2); padding-inline: var(--s-3); }
  .iconbtn__label { display: inline; }
}
.badge-count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-text-on-brand);
  font-size: var(--fs-micro); font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Ana menu ---- */
.mainnav { border-top: 1px solid var(--c-border); display: none; }
@media (min-width: 1024px) { .mainnav { display: block; } }
.mainnav__list { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
/* Eskiden buyuk harf + harf araligi + gri idi: ayni anda hem bagiriyor hem zayif
   duruyordu ve ana navigasyon bir "utility" seridi gibi okunuyordu. Kategori
   adlari config'te zaten dogru yazimda ("Erkekler İçin") — cumle duzeni hem daha
   sakin hem Turkce'de daha okunakli, ustelik dar: 8 baslik rahat siğiyor. */
.mainnav__link {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--h-logo-lg); padding-inline: var(--s-3);
  font-size: var(--fs-label); font-weight: 600; color: var(--c-text);
  border-bottom: 2px solid transparent;
  transition: color var(--d-btn) var(--e-out), border-color var(--d-btn) var(--e-out);
}
.mainnav__link:hover, .mainnav__link[aria-current="page"] {
  color: var(--c-brand-text); border-bottom-color: var(--c-brand);
}
/* Alt kategorisi OLAN basliklarda kucuk bir ok: panelin varligi artik gorunuyor.
   Eskiden panel yalnizca uzerine gelince ortaya cikiyordu — kesfedilemezdi. */
/* Menude TEK vurgulu oge. Zemin rengi kaldirildi (istek): ayrisma yalniz
   AGIRLIK ve marka renginden gelir — serit daha sakin kaliyor. */
.mainnav__link--hot {
  color: var(--c-brand-text); font-weight: 800; letter-spacing: -.01em;
  margin-right: var(--s-2);
}
.mainnav__link--hot:hover { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.mainnav__link--hot svg { flex: none; }

.mainnav__item:has(> .mainnav__panel) > .mainnav__link::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
  transition: transform var(--d-menu) var(--e-out), opacity var(--d-menu) var(--e-out);
}
.mainnav__item:hover > .mainnav__link::after,
.mainnav__item:focus-within > .mainnav__link::after {
  transform: translateY(1px) rotate(-135deg); opacity: 1;
}
.mainnav__item { position: relative; }
.mainnav__panel {
  position: absolute; top: 100%; left: 0; z-index: var(--z-drawer); min-width: calc(var(--s-10) * 2);
  list-style: none; margin: 0; padding: var(--s-2);
  background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-card);
  box-shadow: var(--sh-modal);
  visibility: hidden; opacity: 0; transform: translateY(var(--s-1));
  transition: opacity var(--d-menu) var(--e-out), transform var(--d-menu) var(--e-out), visibility var(--d-menu);
}
.mainnav__item:hover > .mainnav__panel,
.mainnav__item:focus-within > .mainnav__panel:not(.is-closed) { visibility: visible; opacity: 1; transform: none; }
.mainnav__item:last-child .mainnav__panel, .mainnav__item:nth-last-child(2) .mainnav__panel { left: auto; right: 0; }
.mainnav__panel a {
  display: flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--s-3);
  border-radius: var(--r-btn); font-size: var(--fs-label); color: var(--c-text-muted); white-space: nowrap;
}
.mainnav__panel a:hover { background: var(--c-surface-2); color: var(--c-text); }
/* "Erkekler İçin" 11 alt kategori + "Tumu" = 12 satir → ~530px'lik bir sutun,
   ekranin yarisini kaplayan bir seride donusuyordu. 8+ ogede iki sutuna gecer. */
.mainnav__panel:has(> li:nth-child(8)) {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto);
}
/* Ilk satir ("Tumu — X") gruba giris: digerlerinden ayrilir. */
.mainnav__panel > li:first-child a { color: var(--c-text); font-weight: 600; }


/* ---- Hero ---- */
.hero { position: relative; padding-block: var(--s-8) var(--s-9); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; background: var(--glow-brand);
  pointer-events: none;                  /* tek glow odagi — neon yasak */
}
.hero__inner { position: relative; display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: 1fr .9fr; align-items: center; gap: var(--s-8); } }
.hero__eyebrow {
  font-size: var(--fs-caption); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-brand-text); font-weight: 700; margin-bottom: var(--s-4);
}
.hero .display em { font-style: normal; color: var(--c-brand-text); }
.hero__lede { color: var(--c-text-muted); font-size: var(--fs-body-lg); margin: var(--s-5) 0 var(--s-6); max-width: 46ch; }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
/* Dar ekranda iki buton metin uzunluguna gore farkli genislikteydi — tirtikli
   duruyordu ve ikincil butonun dokunma alani kucuktu. Esit ve tam genislik. */
@media (max-width: 519px) { .hero__cta { display: grid; grid-template-columns: 1fr; } }
.hero__art {
  position: relative; margin: 0;
  border-radius: var(--r-card); border: 1px solid var(--c-border);
  background: var(--c-surface-1); overflow: hidden;
}
.hero__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) { .hero__art img { aspect-ratio: 5 / 4; } }
/* ---- Trust strip ----
   Footer guvence seridiyle AYNI dil (ortak .fact-ic): beyaz kart, esit hucreler,
   tint dairede ikon, baslik + kisa aciklama. Eskiden ikonsuz, baslik ve metin ayni
   agirlikta duz kutulardi — goz tutunacak bir nokta bulamiyordu. */
.truststrip {
  display: grid; gap: 1px; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) { .truststrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Alttaki bant ile arasinda nefes: kart bandin ust cizgisine yapisiyordu */
.truststrip-wrap { padding-block-end: var(--section-gap); }
.truststrip__item { background: var(--c-surface-1); padding: var(--s-5); display: flex; align-items: center; gap: var(--s-4); }
.truststrip__item b { display: block; font-size: var(--fs-label); font-weight: 600; color: var(--c-text); line-height: 1.3; }
.truststrip__item small { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); line-height: 1.45; margin-top: var(--s-1); }
.truststrip__item a { color: var(--c-brand-text); font-weight: 600; white-space: nowrap; }
.truststrip__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .truststrip__item { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); }
  .truststrip .fact-ic { width: var(--s-6); height: var(--s-6); }
}

/* Ortak: tint dairede marka ikonu (trust strip + footer guvence seridi) */
.fact-ic {
  flex: none; display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-pill);
  background: var(--c-brand-subtle); color: var(--c-brand);
}

/* ---- Magaza karti (ana sayfa) ----
   Mobil: dikey yigin, eylemler tam genislik. >=1024: kimlik | olgular | eylemler. */
.storecard {
  display: grid; gap: var(--s-5);
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
.storecard__id { display: flex; gap: var(--s-4); align-items: flex-start; }
.storecard__ic {
  flex: none; display: grid; place-items: center;
  width: var(--s-7); height: var(--s-7); border-radius: var(--r-pill);
  background: var(--c-brand-subtle); color: var(--c-brand);
}
.storecard__eyebrow {
  font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brand-text); font-weight: 700; margin: 0 0 var(--s-1);
}
.storecard__title { font-size: var(--fs-h3); line-height: 1.2; margin: 0 0 var(--s-2); }
.storecard__addr { font-style: normal; font-size: var(--fs-label); color: var(--c-text-muted); line-height: var(--lh-body); }
.storecard__facts {
  list-style: none; margin: 0; padding: var(--s-4) 0 0; display: grid; gap: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.storecard__facts li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-caption); color: var(--c-text-muted); }
.storecard__facts svg { flex: none; color: var(--c-brand); margin-top: var(--s-1); }
.storecard__facts b { display: block; font-size: var(--fs-label); font-weight: 600; color: var(--c-text); }
.storecard__actions { display: grid; gap: var(--s-3); }
.storecard__more { justify-self: center; }
.storecard__addr .nowrap { white-space: nowrap; }
@media (min-width: 768px) {
  .storecard { padding: var(--s-6); }
  .storecard__facts { grid-template-columns: 1fr 1fr; }
  .storecard__actions { grid-template-columns: 1fr 1fr; }
  .storecard__more { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .storecard { grid-template-columns: 1.5fr 1fr auto; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-7); }
  .storecard__facts { grid-template-columns: 1fr; padding: 0 0 0 var(--s-6); border-top: 0; border-left: 1px solid var(--c-border); }
  .storecard__actions { grid-template-columns: 1fr; }
}

/* ---- Sayfa ritmi: bant ----
   Ana sayfa, kategori ve urun sayfasi ayni ritimde okunuyordu: hepsi krem
   zemin uzerinde ardi ardina beyaz kart. Ana sayfaya tam genislik bantlar
   verildi — bolumler ayri ZEMINLER haline geldi. PLP ve PDP bant KULLANMAZ;
   ayrisma buradan gelir, her sayfaya ayri bir UI dili icat etmeden. */
.band { background: var(--c-surface-2); border-block: 1px solid var(--c-border); }
.band + .band { border-top: 0; }
/* Sayfa bantla bitiyorsa (ana sayfa: magaza bandi) footer'in ust boslugu iki gri
   blok arasinda krem bir serit + cift cizgi birakiyordu: bant footer'a yaslanir. */
main > .band:last-child { border-bottom: 0; }
body:has(main > .band:last-child) .footer { margin-top: 0; }
main > .band:last-child > .section { padding-block-end: var(--s-6); }
@media (min-width: 1024px) { main > .band:last-child > .section { padding-block-end: var(--s-7); } }

/* ---- Grid ---- */
.grid-products { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4, 1fr); } }
/* Ana sayfa urun bolumleri genis ekranda 5'li (karar O7). 10 urun basilir; 4'lu ve 3'lu dizilimde
   son satiri tamamlamayan kartlar gizlenir, satir yarim kalmaz. */
@media (min-width: 768px) and (max-width: 1023.98px) { :is(#cok-satanlar, #one-cikanlar) .grid-products > :nth-child(n+10) { display: none; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { :is(#cok-satanlar, #one-cikanlar) .grid-products > :nth-child(n+9) { display: none; } }
@media (min-width: 1280px) { :is(#cok-satanlar, #one-cikanlar) .grid-products { grid-template-columns: repeat(5, 1fr); } }
/* Liste sayfalari (/cok-satanlar, /one-cikanlar): 30'arli sayfa, genis ekranda 5'li. Burada kart GIZLENMEZ
   (gizlenen urune o genislikte hic ulasilamazdi): 4'lu dizilimde son satir yarim kalabilir. */
@media (min-width: 1280px) { .grid-products--5 { grid-template-columns: repeat(5, 1fr); } }
.listing__title { display: flex; align-items: center; gap: var(--s-3); }
.listing__title svg { flex: none; color: var(--c-brand-text); }

.grid-categories { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .grid-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Product card ----
   Kartin tek vurgusu fotograf: 4:5 kabin (liste gorselleri 500x750 beyaz tuval; kare fotograf kartin
   genisligini doldurur, dikey manken fotografi kirpilmaz). Kabin kartla ayni beyaz, arada cizgi yok.
   Govde sakin: ad + fiyat. Eylemler gorselin uzerinde, ikon dugme (kalp ust, sepete ekle alt kose).
   DOM sirasi: ad baglantisi -> favori -> sepete ekle (klavye once urunu, sonra eylemleri bulur). */
.card {
  position: relative; display: flex; flex-direction: column;
  container-type: inline-size;              /* eylem dugmesi gorselin alt kosesine cqi ile oturur */
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); overflow: hidden;
  transition: transform var(--d-card) var(--e-out), border-color var(--d-card) var(--e-out);
}
/* Hover yalniz imlecli cihazda (dokunmada yapiskan hover kalmasin). Golge yok: golge yalniz yuzen ogelerde. */
@media (hover: hover) {
  .card:hover { transform: scale(1.01); border-color: var(--c-border-strong); }
  .card:hover .card__media img { transform: scale(1.025); }
}
.card__media { position: relative; aspect-ratio: 4 / 5; background: var(--c-surface-1); overflow: hidden; }
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--s-2);
  transition: transform var(--d-card) var(--e-out), opacity var(--d-card) var(--e-out);
}
/* Ikinci fotograf: yuklenince ustte, gorunmez; kart uzerine gelince/odakta yumusak gecis */
.card__media .card__alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__alt.is-ready, .card:focus-within .card__alt.is-ready { opacity: 1; }
}
.card--out .card__media img { opacity: .55; }
.card__body { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__name {
  margin: 0; font-size: var(--fs-label); font-weight: 500; line-height: 1.4; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__price {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2);
  font-size: var(--fs-price-sm); font-weight: 700; line-height: var(--lh-head);
  font-variant-numeric: tabular-nums; color: var(--c-text);
}
.card--out .card__price { color: var(--c-text-muted); }
/* Para birimi rakamdan kucuk ve ince: goz once tutari okur */
.card__cur { font-size: var(--fs-label); font-weight: 500; }
/* Indirim: eski fiyat ustu cizili, soluk, yeni fiyatin ONUNDE (okuma sirasi: eski -> yeni).
   Yalniz gercek indirim (price_old > fiyat) — sahte indirim yok. */
.price-old { display: inline-block; margin-right: var(--s-2); font-size: var(--fs-label);
  font-weight: 500; color: var(--c-text-muted); text-decoration-thickness: 1px; }
.card__price .price-old { margin-right: 0; }
.pdp__price .price-old { font-size: var(--fs-body); }   /* kirmizi DEGIL — AA */
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }  /* tum kart tiklanabilir */
/* Odak halkasi kartin tamamina (baglanti ::after ile tum karti kapliyor; halka yalniz metinde kaliyordu).
   :has desteklemeyen tarayicida metindeki varsayilan halka kalir. */
@supports selector(:has(*)) {
  .card:has(.card__link:focus-visible) { box-shadow: var(--focus-ring); }
  .card__link:focus-visible { box-shadow: none; }
}

/* Rozet sistemi (DS §5): Yeni · Cok Satan · Indirim · Son Urunler · Tukendi — serbest metin yok.
   Cumle duzeninde: buyuk harfli kucuk etiket bagiriyordu. */
.badge {
  display: inline-flex; align-items: center; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-head);
}
.badge--brand { background: var(--c-brand); color: var(--c-text-on-brand); }
.badge--stock { background: color-mix(in srgb, var(--c-success) 15%, transparent); color: var(--c-success);
  border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent); }
.badge--out   { background: var(--c-surface-2); color: var(--c-text-muted); border: 1px solid var(--c-border-strong); }
.card__badges { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s-1);
  max-width: calc(100% - var(--tap-min) - var(--s-3) * 2); pointer-events: none; }

/* Sepete ekle: gorselin sag alt kosesi. Koyu dolgu (tek kirmizi CTA kurali: kartlar kirmizi dolgu tasimaz);
   uzerine gelince marka kirmizisi, eklenince yesil onay. Yedek konum (cqi yok): kalbin altinda. */
.card__add { position: absolute; z-index: 2; right: var(--s-2); margin: 0;
  top: calc(var(--s-2) * 2 + var(--tap-min));
  top: calc(125cqi - var(--tap-min) - var(--s-2)); }
.card__addbtn {
  width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--c-text); color: var(--c-surface-1); cursor: pointer;
  transition: background var(--d-btn) var(--e-out), transform var(--d-btn) var(--e-out);
}
@media (hover: hover) { .card__addbtn:hover { background: var(--c-brand-hover); } }
.card__addbtn:active { background: var(--c-brand-press); transform: scale(.94); }
.card__addbtn:focus-visible { box-shadow: var(--focus-ring); }
/* Dar kart (telefonda 2'li): dokunma alani 44px kalir, gorunen daire 36px (urunu ortmesin); govde bosluklari kisilir */
@container (max-width: 220px) {
  .card__addbtn, .card__fav { padding: var(--s-1); background-clip: content-box; }
  .card__body { padding: var(--s-3); }
}
.card__addicon, .card__addok { display: grid; place-items: center; }
.card__addok, .card__addbtn.is-added .card__addicon { display: none; }
.card__addbtn.is-added { background: var(--c-success); }
.card__addbtn.is-added .card__addok { display: grid; }

/* Karttan sepete ekleme bildirimi (DS: toast sag alt masaustu / ust mobil). Kendi basina kaybolur;
   uzerine gelince/odakta bekler. */
.toast {
  position: fixed; z-index: var(--z-toast); left: var(--gutter); right: var(--gutter);
  top: calc(var(--h-header) + var(--s-2));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-btn); box-shadow: var(--sh-float);
  background: var(--c-text); color: var(--c-surface-1); font-size: var(--fs-label); font-weight: 500;
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--s-2) * -1));
  transition: opacity var(--d-btn) var(--e-out), transform var(--d-btn) var(--e-out), visibility 0s linear var(--d-btn);
}
.toast.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.toast--warn { background: var(--c-warning); }
.toast--error { background: var(--c-danger); }
.toast a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; min-height: var(--tap-min); display: inline-flex; align-items: center; }
@media (min-width: 1024px) {
  .toast { left: auto; top: auto; right: var(--s-5); bottom: var(--s-5); max-width: var(--measure);
    transform: translateY(var(--s-2)); }
  .toast.is-on { transform: none; }
}

/* ---- Category card ---- */
.catcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; padding: var(--s-4);
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  transition: transform var(--d-card) var(--e-out), border-color var(--d-card) var(--e-out);
}
/* Kutunun ust yarisi bombostu. Koyu temada yuzey ile zemin arasindaki fark kutuya
   agirlik veriyordu; acik temada beyaz-uzerine-beyaz kalinca "bos kutu" gibi
   duruyordu. Bosluga anlam veriliyor: yon oku = tiklanabilirlik isareti.
   Yeni dil degil — .link-more zaten ayni oku kullaniyor. */
.catcard::after {
  content: "→"; position: absolute; top: var(--s-4); right: var(--s-4);
  font-size: var(--fs-body-lg); line-height: 1; color: var(--c-border-strong);
  transition: transform var(--d-card) var(--e-out), color var(--d-card) var(--e-out);
}
.catcard:hover { transform: translateY(-2px); border-color: var(--c-border-strong);
  box-shadow: var(--sh-float); }
.catcard:hover::after { color: var(--c-brand); transform: translateX(var(--s-1)); }
.catcard b { font-size: var(--fs-label); font-weight: 600; }
.catcard span { font-size: var(--fs-caption); color: var(--c-text-muted); }
/* Gorselli varyant (ana sayfa): urun sayisi YOK — vitrin karti, bilgi karti degil.
   Foto marka tintli dairenin icinde; multiply ile urunlerin beyaz fonu daireye
   karisir, beyaz kutu kalmaz. Ad ortada + dolan ok dairesi (hover'da brand).
   alt="" — kart adi zaten linkin metni, gorsel dekoratif. */
.catcard--media {
  justify-content: flex-start; align-items: center; gap: var(--s-3);
  min-height: 0; padding: var(--s-4) var(--s-3) var(--s-4); text-align: center;
}
.catcard--media::after { content: none; }
.catcard__media {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-pill);
  background: var(--c-brand-subtle); overflow: hidden;
  transition: transform var(--d-card) var(--e-out);
}
.catcard__media img {
  width: 100%; height: 100%; object-fit: contain; padding: var(--s-3);
  mix-blend-mode: multiply; transition: transform var(--d-card) var(--e-out);
}
.catcard--media:hover .catcard__media img { transform: scale(1.08); }
.catcard .catcard__name { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  max-width: 100%; color: var(--c-text); }
.catcard__name b { font-size: var(--fs-label); font-weight: 600; line-height: 1.3; min-width: 0; }
.catcard .catcard__go {
  flex: none; display: grid; place-items: center;
  width: var(--s-5); height: var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); color: var(--c-text);
  font-size: var(--fs-caption); line-height: 1;
  transition: background var(--d-card) var(--e-out), border-color var(--d-card) var(--e-out),
              color var(--d-card) var(--e-out), transform var(--d-card) var(--e-out);
}
.catcard--media:hover .catcard__go {
  background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-on-brand);
  transform: translateX(var(--s-1));
}
/* Dar kartta ok dairesi "Kayganlaştırıcılar"i kelime ortasindan boluyordu. Kart
   zaten tumuyle dokunma hedefi: mobilde ok yok, ad tam genislik. */
@media (max-width: 767px) {
  .catcard--media { padding-inline: var(--s-2); }
  .catcard .catcard__go { display: none; }
}
@media (min-width: 768px) {
  .catcard--media { padding: var(--s-5) var(--s-4) var(--s-4); }
  .catcard__media img { padding: var(--s-5); }
}

/* Tum kategoriler sayfasi: gruplar arasi ritim (bolum basligi + kart izgarasi) */
.catgroup { margin-top: var(--s-7); }
.catgroup .section-head { margin-bottom: var(--s-4); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: var(--s-4); }
/* Ic sayfalarda --section-gap (masaustunde 96px) sayfa yolunun USTUNDE duruyordu:
   ekranin en degerli seridi bombosken H1 katlamanin altina itiliyordu. Sayfa yolu ile
   baslayan bolumlerde ust bosluk kisaltilir; alt bosluk aynen kalir. */
.section:has(> .breadcrumb:first-child) { padding-block-start: var(--s-5); }
/* align-items YOKKEN: <a> 44px dokunma hedefi, aktif sayfa ise duz metin —
   ikisi ayri hizada oturuyor ve "Anasayfa / Kategori" kirik gorunuyordu. */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-border-strong); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap-min); }   /* >=44px hedef */
.breadcrumb a:hover { color: var(--c-text); }
.breadcrumb [aria-current] { color: var(--c-text); }

/* ---- PDP ----
   Masaustunde galeri solda yapiskan (uzun aciklama okunurken urun gozde kalir), sagda ad -> fiyat -> sepete
   ekle -> guvence -> aciklama. Telefonda ilk ekranda gorsel + ad + fiyat; sepete ekle alttaki yapiskan cubukta. */
.pdp { display: grid; gap: var(--s-5); }
/* Tablette de iki sutun: tek sutunda 720px'lik kare galeri ad ve fiyati ekranin altina itiyordu */
@media (min-width: 768px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; } }
@media (min-width: 1024px) { .pdp { grid-template-columns: 55fr 45fr; gap: var(--s-8); } }
.pdp__gallery { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
@media (min-width: 768px) { .pdp__gallery { position: sticky; top: calc(var(--h-header) + var(--s-4)); } }
@media (min-width: 1024px) {
  .pdp__gallery { top: calc(var(--h-header) + var(--h-logo-lg) + var(--s-4)); container-type: inline-size; }
}
/* Sayfa yolunun son halkasi (urun adi) hemen altta H1 olarak var: gorsel olarak gizli, ekran okuyucuda duruyor */
@supports selector(:has(*)) {
  .section:has(> .pdp) > .breadcrumb li:last-child {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Galeri: yatay kaydirmali serit. JS olmadan da calisir — kucuk gorseller sayfa ici
   capa (#gorsel-N) ile hedefe kayar. aspect-ratio sabit oldugu icin CLS olusmaz. */
.gallery__stage { position: relative; }
.gallery__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}
.gallery__track::-webkit-scrollbar { display: none; }
/* Telefonda serit daha basik (5:4): ad ve fiyat ilk ekrana sigar; fotograf oranini korur (contain) */
.gallery__slide {
  flex: 0 0 100%; margin: 0; aspect-ratio: 5 / 4; scroll-snap-align: center;
}
@media (min-width: 768px) { .gallery__slide { aspect-ratio: 1 / 1; } }
/* Masaustu: kare ama ekrandan uzun degil (yapiskan galeri tek bakista gorunsun) */
@media (min-width: 1024px) {
  .gallery__slide { height: min(100cqi, 100svh - var(--h-header) - var(--h-logo-lg) - var(--thumb-sm) - var(--s-8)); aspect-ratio: auto; }
}
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); }
@media (min-width: 768px) { .gallery__slide img { padding: var(--s-4); } }
@media (min-width: 1024px) { .gallery__slide img { padding: var(--s-5); } }
.gallery__empty {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--c-surface-1); border: 1px dashed var(--c-border); border-radius: var(--r-card);
}
/* Telefonda kucuk resim seridi yerine sayac (kaydirma zaten serit uzerinde) */
.gallery__count {
  position: absolute; right: var(--s-3); bottom: var(--s-3); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-surface-1) 90%, transparent);
  border: 1px solid var(--c-border); font-size: var(--fs-caption); color: var(--c-text); pointer-events: none;
}
.gallery__thumbs { display: none; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); }
@media (min-width: 768px) {
  .gallery__count { display: none; }
  .gallery__thumbs { display: flex; }
}
.gallery__thumb {
  flex: 0 0 auto; width: var(--tap-cta); height: var(--tap-cta);
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-input); overflow: hidden;
  transition: border-color var(--d-btn) var(--e-out);
}
@media (min-width: 1024px) { .gallery__thumb { width: var(--thumb-sm); height: var(--thumb-sm); } }
.gallery__thumb:hover, .gallery__thumb:focus-visible { border-color: var(--c-border-strong); }
.gallery__thumb[aria-current="true"] { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Urun kunyesi: "Beden : S/M-L/XL" gibi satirlar duz paragrafken birbirine
   karisiyordu. Etiket / deger sutunlari ve ince ayraclar. */
.specs { margin: 0 0 var(--s-4); display: grid; gap: 0; }
.specs > div {
  display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: var(--s-3);
  padding-block: var(--s-3); border-bottom: 1px solid var(--c-border);
}
.specs > div:last-child { border-bottom: 0; }
.specs dt { color: var(--c-text-muted); font-size: var(--fs-label); }
.specs dd { margin: 0; color: var(--c-text); font-size: var(--fs-label); font-weight: 600; }
@media (max-width: 479px) {
  .specs > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* Ad: uzunluga gore olcek (kisaltilmaz). Kisa ad vitrin gibi, uzun ad okunur bir blok. */
.pdp__head { display: grid; gap: var(--s-2); }
.pdp__title { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-head);
  text-wrap: pretty; overflow-wrap: anywhere; }
.pdp__title--l { font-size: var(--fs-h1); }
.pdp__title--m { font-size: var(--fs-h2); }
.pdp__title--s { font-size: var(--fs-h3); }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0;
  font-size: var(--fs-caption); color: var(--c-text-muted); }
.pdp__stock { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-success); font-weight: 600; }
.pdp__stock::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: currentColor; }
.pdp__stock--out { color: var(--c-text-muted); }

/* Accordion — native <details>, klavye ve ekran okuyucu ile calisir. */
.acc { margin-top: var(--s-4); border-top: 1px solid var(--c-border); }
.acc__item { border-bottom: 1px solid var(--c-border); }
.acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap-min); padding: var(--s-3) 0;
  font-size: var(--fs-label); font-weight: 600; cursor: pointer; list-style: none;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head::after { content: "+"; color: var(--c-text-muted); font-size: var(--fs-body-lg); }
.acc__item[open] .acc__head::after { content: "\2212"; }
.acc__body { padding-bottom: var(--s-4); }
.acc__body p { margin: 0 0 var(--s-3); max-width: var(--measure); }
.acc__body p:last-child { margin-bottom: 0; }
.pdp__pricebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.pdp__price { margin: 0; font-size: var(--fs-price); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--c-brand-text); }         /* 24px — bu boyutta AA-large gecerli */
.pdp__vat, .pdp__noprice { font-size: var(--fs-caption); color: var(--c-text-muted); margin: 0; }
.pdp__panel { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
/* Adet + Sepete Ekle tek satir: birincil CTA 52px, adet kutusu ayni yukseklikte */
.pdp__buy { display: grid; gap: var(--s-3); }
.pdp__buyrow { display: flex; gap: var(--s-3); align-items: stretch; }
.pdp__buyrow .btn { flex: 1; min-width: 0; }
.pdp__buyrow .stepper__btn, .pdp__buyrow .stepper__input { min-height: var(--tap-cta); }
.pdp__outnote { margin: 0; }
.pdp__fav { justify-self: start; align-self: flex-start; gap: var(--s-2); margin-top: calc(var(--s-3) * -1); }
.pdp__fav[aria-pressed="true"] svg { fill: currentColor; color: var(--c-brand-text); }
/* Guvence: ana sayfa guven seridiyle ayni bilesen, sag sutunda 2'li */
.pdp__facts { margin: 0; padding: 0; list-style: none; }
.pdp__facts.truststrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp__facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pdp__facts .truststrip__item { padding: var(--s-4); }
/* Sag sutun 1280'in altinda dar: ikon ustte, metin tam genislikte (yan yanayken her kelime satir kiriyordu) */
@media (max-width: 1279px) {
  .pdp__facts .truststrip__item { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .pdp__facts .fact-ic { width: var(--s-6); height: var(--s-6); }
}
.pdp__facts .truststrip__item a { color: var(--c-brand-text); font-weight: 600; }
.pdp__desc { font-size: var(--fs-body); }

/* Mobil sticky satin alma cubugu */
.stickybar {
  /* Alt navigasyon da fixed; stickybar onun USTUNDE oturur (ust uste binmez). */
  position: fixed; left: 0; right: 0; bottom: calc(var(--h-bottomnav) + env(safe-area-inset-bottom));
  z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  background: color-mix(in srgb, var(--c-surface-1) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-border);
}
.stickybar { transition: transform var(--d-drawer) var(--e-out), visibility var(--d-drawer); }
.stickybar.is-hidden { transform: translateY(calc(100% + var(--s-8))); visibility: hidden; }
.stickybar__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stickybar .btn { flex: 1; }
@media (min-width: 1024px) { .stickybar { display: none; } }

/* ---- Empty state ---- */
/* Kesikli cerceve koyu temada "bos alan" diyordu; acik zeminde tel kafes /
   yarim kalmis bir bilesen gibi okunuyor. Panel diline alindi (.cart__summary,
   .plp__side ile ayni): bos durum da BITMIS bir ekran. */
.empty {
  background: var(--c-surface-1);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--s-7) var(--s-5); text-align: center; color: var(--c-text-muted);
}
/* HATA: kutu text-align:center idi ama icindeki <p> global `max-width: 68ch`
   aliyor ve sol kenardan basliyordu — metin/buton kutunun ortasinda DEGIL,
   68ch'lik seridin ortasinda duruyordu. Sablonlarda tek tek
   style="margin-inline:auto" ile yamaniyordu; CTA paragraflarinda unutulmustu,
   o yuzden butonlar sola kaymis gorunuyordu (404, marka, arama, sepet...). */
.empty p { margin-inline: auto; }
.empty__cta { margin-top: var(--s-5); }
/* Bos durum basligi: sayfanin tek basligiysa h1 (404/500/bakim), altindaysa h2 — gorunum ayni */
.empty h1, .empty h2, .empty h3 { font-family: var(--font-ui); font-size: var(--fs-h3); color: var(--c-text); margin-bottom: var(--s-2); }

/* ---- Age gate ---- */
.agegate {
  position: fixed; inset: 0; z-index: var(--z-agegate);
  display: grid; place-items: center; padding: var(--gutter);
  background: var(--c-overlay); backdrop-filter: blur(8px);
}
.agegate[hidden] { display: none; }
.agegate__panel {
  width: 100%; max-width: 560px; background: var(--c-surface-1);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-modal);
  padding: var(--s-6); box-shadow: var(--sh-modal); text-align: center;
}
.agegate__panel img { width: var(--w-logo-gate); height: auto; margin: 0 auto var(--s-5); }
.agegate__panel h2 { font-family: var(--font-display); font-weight: 500; margin-bottom: var(--s-3); }
.agegate__panel p  { margin-inline: auto; font-size: var(--fs-label); color: var(--c-text-muted); }
.agegate__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 560px) { .agegate__actions { flex-direction: row; } .agegate__actions .btn { flex: 1; } }
.agegate__remember {
  display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center;
  margin-top: var(--s-4); font-size: var(--fs-caption); color: var(--c-text-muted); cursor: pointer;
}
.agegate__remember input { width: 18px; height: 18px; accent-color: var(--c-brand); }
.agegate__legal { margin-top: var(--s-5); font-size: var(--fs-caption); color: var(--c-text-muted); }
.agegate__legal a { text-decoration: underline; text-underline-offset: 3px; }
body.is-gated { overflow: hidden; }

/* ---- Footer ---- */
/* Acik temada footer surface-1 (beyaz) olunca sayfadan DAHA PARLAK kaliyordu ve
   sayfa asagida "bitmiyordu". surface-2 footer'i oturtuyor; trustbar da ayni
   tonda oldugu icin sayfa ustten ve alttan ayni gri ile kapaniyor. */
.footer { border-top: 1px solid var(--c-border); background: var(--c-surface-2); margin-top: var(--section-gap); }

/* Guvence seridi — footer'in ust bandi. Tek satir ikon+metin listesi sikisik ve
   "dipnot" gibi okunuyordu: beyaz kart icinde esit hucreler, ikon tint zeminli
   dairede, baslik + kisa aciklama. Mobilde 2x2, genis ekranda tek satir.
   '.footer ul' (flex sutun) kuralini ezmek icin .footer onekli. */
.footer .footer__facts {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--c-border); border: 1px solid var(--c-border);
  border-radius: var(--r-card); overflow: hidden;
}
@media (min-width: 1024px) {
  .footer .footer__facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.footer__facts li {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--c-surface-1); padding: var(--s-4) var(--s-5);
}
.footer__facts b { display: block; font-size: var(--fs-label); font-weight: 600; color: var(--c-text); line-height: 1.3; }
.footer__facts small { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); line-height: 1.35; }
@media (max-width: 767px) {
  .footer .footer__facts { margin-top: var(--s-5); }
  .footer__facts li { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); }
  .footer .fact-ic { width: var(--s-6); height: var(--s-6); }
}
/* Odeme/kargo satiri config'e gore dusebilir: tek kalan son hucre bos kutu birakmasin. */
@media (max-width: 1023px) {
  .footer__facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.footer__grid { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
/* Orta genislikte marka blogu tam satir, gruplar ikiserli; genis ekranda tek satir.
   Eskiden 768px'te dogrudan 4 sutuna geciyordu ve sutunlar birbirine giriyordu. */
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-7); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1.05fr 1.15fr 1fr; gap: var(--s-6); }
  .footer__brand { grid-column: auto; }
}
.footer h2 { font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text); font-weight: 700; margin-bottom: var(--s-3); }
/* Dokunma hedefi >=44px (proje kurallari, PR listesi): aralik bosluk yerine hedefin kendisinde */
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer a, .footer .linkbtn {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-label); color: var(--c-text-muted);
}
.footer a:hover, .footer .linkbtn:hover { color: var(--c-text); }
/* Fare ile gezilen ekranda 44px'lik satirlar listeyi gereksiz uzatiyor.
   Dokunmatik girdide (pointer: coarse) 44px aynen korunur. */
@media (pointer: fine) {
  .footer a, .footer .linkbtn { min-height: 34px; }
}
.footer__logo img { height: 40px; width: auto; margin-bottom: var(--s-4); }
.footer__lede { max-width: 38ch; }
/* Kutulu buton degil: footer zaten yogun, iki cerceve gurultu ekliyordu.
   Guvence seridiyle ayni dil — marka renginde ikon + koyu metin. */
.footer__contact { margin-top: var(--s-3) !important; }
.footer__contact a {
  gap: var(--s-3); color: var(--c-text); font-weight: 600;
  font-size: var(--fs-label);
}
.footer__contact a:hover { color: var(--c-brand-text); }
.footer__contact svg { flex: none; color: var(--c-brand); }
.footer__address { font-style: normal; font-size: var(--fs-caption);
  color: var(--c-text-muted); line-height: var(--lh-body); margin: var(--s-2) 0 0; }

/* 1024 alti: gruplar kapali akordiyon. Eskiden izgara boslugu (32px) yuzunden
   basliklar 76px arayla bosolukta yuzuyor, aralarinda hicbir ayrac olmadigi icin
   liste dagilmis duruyordu. Bosluk sifirlandi, yerine ayrac kondu: duzgun,
   dokunulabilir bir satir listesi. */
@media (max-width: 1023px) {
  .footer__grid { gap: 0; }
  .footer__brand { padding-bottom: var(--s-5); }
  .footer__grid > nav,
  .footer__grid > div:not(.footer__brand) { border-top: 1px solid var(--c-border); }
  .footer__group summary { min-height: var(--tap-cta); }
  .footer__group[open] > ul,
  .footer__group[open] > .footer__address { padding-bottom: var(--s-3); }
}

/* Alt serit dar ekranda ortalanir: "18+" ve metin bir satir, telif alt satirda
   saga yaslaniyordu — dengesiz duruyordu. */
@media (max-width: 767px) {
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__copy { margin-left: 0; flex-basis: 100%; }
}

.footer__bottom {
  border-top: 1px solid var(--c-border); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  font-size: var(--fs-caption); color: var(--c-text-muted); align-items: center;
}
.footer__copy { margin-left: auto; }
.footer__age {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700; color: var(--c-text);
}

/* ---- Mobil alt navigasyon ---- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--c-surface-1) 94%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
  min-height: var(--tap-min); padding: var(--s-2) 0 var(--s-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  font-size: var(--fs-nav); font-weight: 500; color: var(--c-text-muted);
  white-space: nowrap;
  transition: color var(--d-btn) var(--e-out);
}
/* Aktif durum eskiden yalniz "biraz daha koyu gri" idi — hangi sekmede oldugun
   bir bakista okunmuyordu. Marka rengi + ikon arkasinda hap. */
.bottomnav a[aria-current="page"] { color: var(--c-brand-text); font-weight: 600; }
.bottomnav a[aria-current="page"] .bottomnav__icon { background: var(--c-brand-subtle); }
/* 320px'te sutun 64px'e dusuyor; "Kategoriler" 12px'te tasiyor. */
@media (max-width: 359px) { .bottomnav a { font-size: var(--fs-micro); } }
@media (min-width: 1024px) { .bottomnav { display: none; } }
body { padding-bottom: var(--h-bottomnav); }
body:has(.stickybar) { padding-bottom: calc(var(--h-bottomnav) + var(--h-stickybar)); }
@media (min-width: 1024px) { body, body:has(.stickybar) { padding-bottom: 0; } }


/* ============ PLP: filtre · siralama · sayfalama ============ */

.plp__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.plp__tools { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.sortform select, .plp__tools select {
  height: var(--h-btn); padding: 0 var(--s-4);
  background: var(--c-surface-1); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input);
  font-size: var(--fs-body);          /* 16px — iOS zoom onleme */
}

.plp { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .plp { grid-template-columns: 264px 1fr; gap: var(--s-7); align-items: start; } }

/* Desktop: solda sticky. Mobil: alttan acilan panel. */
.plp__side {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
.plp__side-head { display: none; }
.plp__filterbtn { display: inline-flex; }
@media (min-width: 1024px) {
  /* Ekrandan uzun suzgec listesi kendi icinde kayar: alt gruplar sayfanin sonuna inmeden erisilebilir */
  .plp__side { position: sticky; top: calc(var(--h-header) + var(--s-4));
    max-height: calc(100vh - var(--h-header) - var(--s-6)); overflow-y: auto; overscroll-behavior: contain; }
  .plp__filterbtn { display: none; }
}
@media (max-width: 1023px) {
  .plp__side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
    max-height: 86vh; overflow-y: auto;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    border: 1px solid var(--c-border-strong); border-bottom: 0;
    padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
    transform: translateY(101%); visibility: hidden;
    transition: transform var(--d-drawer) var(--e-out), visibility var(--d-drawer);
    box-shadow: var(--sh-modal);
  }
  /* Acilista gorunurluk ANINDA acilir: gecis basinda hidden kalirsa panele odak verilemiyordu */
  .plp__side.is-open { transform: translateY(0); visibility: visible;
    transition: transform var(--d-drawer) var(--e-out), visibility 0s; }
  .plp__side-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 var(--s-4); font-weight: 600;
  }
  .plp__side-head .btn { min-height: var(--tap-min); padding-inline: var(--s-3); }
}

.filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-4); }
.filters__title { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-muted); font-weight: 600; }
.filters__clear { font-size: var(--fs-caption); color: var(--c-brand-text); font-weight: 600; }
.filters__group { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.filters__group legend { font-size: var(--fs-label); font-weight: 600; margin-bottom: var(--s-3); padding: 0; }
.filters__range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.filters__range input {
  width: 100%; min-width: 0; height: var(--h-input); padding: 0 var(--s-3);
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input);
  font-size: var(--fs-body); font-variant-numeric: tabular-nums;
}
.filters__check {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); font-size: var(--fs-label); cursor: pointer;
}
.filters__check input { width: 20px; height: 20px; accent-color: var(--c-brand); flex: none; }
/* Secenek + urun sayisi (diger suzgecler uygulanmis halde). 0 olan secenek pasif, secili olan hep secilebilir */
.filters__opt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.filters__count { flex: none; margin-left: auto; font-size: var(--fs-caption); color: var(--c-text-muted); }
.filters__check.is-off { color: var(--c-text-muted); cursor: default; }
.filters__note { margin: calc(-1 * var(--s-2)) 0 var(--s-2); font-size: var(--fs-caption); color: var(--c-text-muted); }
.filters__range { margin-top: var(--s-2); }
.filters__more summary {
  display: flex; align-items: center; min-height: var(--tap-min); cursor: pointer;
  font-size: var(--fs-label); font-weight: 600; color: var(--c-brand-text);
}
.filters__more[open] summary { display: none; }
/* "N urunu goster": JS yoksa formu gonderir; mobil panelde altta yapisik. Masaustunde JS varken suzgec aninda
   uygulandigi icin gizli (form data-live alir). */
.filters__foot { margin-top: var(--s-2); }
@media (max-width: 1023px) {
  .filters__foot {
    position: sticky; bottom: calc(-1 * (var(--s-5) + env(safe-area-inset-bottom)));
    margin-inline: calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--c-surface-1); border-top: 1px solid var(--c-border);
  }
}
@media (min-width: 1024px) { .filters[data-live] .filters__foot { display: none; } }

/* Etkin suzgec cipleri: tek tikla kaldir */
.plp__chips { margin-bottom: var(--s-4); }
.chip--on { gap: var(--s-2); background: var(--c-surface-2); font-weight: 600; }
.chip__x { font-size: var(--fs-body); line-height: 1; color: var(--c-text-muted); }
.chip--clear { border-color: transparent; color: var(--c-brand-text); font-weight: 600; }
/* Guncelleme surerken eski sonuclar soluk (JS; aria-busy) */
.plp__main[aria-busy="true"] { opacity: .55; transition: opacity var(--d-btn) var(--e-out); }
.plp__head--search { justify-content: flex-end; margin-top: var(--s-5); }

/* ---- Sayfalama (crawlable) ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.pager__btn, .pager__num {
  display: inline-grid; place-items: center;
  min-width: var(--tap-min); min-height: var(--tap-min); padding-inline: var(--s-3);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-btn);
  font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color var(--d-btn) var(--e-out), background var(--d-btn) var(--e-out);
}
.pager__btn:hover, .pager__num:hover { background: var(--c-surface-2); }
.pager__num.is-current {
  background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-on-brand);
}
.pager__info { margin-left: auto; font-size: var(--fs-caption); color: var(--c-text-muted); }

/* ---- Arama sayfasi ---- */
.search--page {
  display: flex; gap: var(--s-3); max-width: 620px; margin: var(--s-5) 0 var(--s-4);
  position: static;
}
/* Header/drawer ile ayni alan dili: dolgulu yuzey + pill. Eskiden burada ucuncu
   bir arama alani gorunumu vardi (beyaz zemin, 12px radius) — ayni is icin ayri
   tasarim. Ic buyutec YOK: sayfada gorunur "Ara" butonu var, ikisi birden fazla. */
.search--page input {
  /* Arama SAYFASINDA alan birincil oge: .field input ile ayni olcu (52px) ve
     ayni kose. Serit varyanti 44px, bu 52px — ikisi de ayni dil. */
  flex: 1; min-width: 0; height: var(--h-input); padding: 0 var(--s-4);
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input);
  font-size: var(--fs-body);
}
.search--page input:focus { background: var(--c-surface-1); }
.search--page .btn { flex: none; }
@media (max-width: 479px) {
  /* 390px'te alan + "Ara" yan yana sikisiyordu; buton alt satira tam genislikte. */
  .search--page { flex-wrap: wrap; }
  .search--page .btn { flex: 1 0 100%; }
}

/* Mobil filtre paneli acikken arka perde */
.scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: var(--c-overlay); opacity: 0; visibility: hidden;
  transition: opacity var(--d-drawer) var(--e-out), visibility var(--d-drawer);
}
.scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .scrim { display: none; } }

/* ---- Uzun metin (kategori SEO icerigi, bilgi sayfalari) ---- */
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 var(--s-4); color: var(--c-text-muted); }
/* Kategori SEO metinlerinin 59'unda da hic baslik yok; ilk paragraf metnin
   giris satiri (51'inde dogrudan baslik). Duz gri bir duvar yerine giris
   paragrafi olarak ayrilir — icerik degismez, yalniz hiyerarsi kazanir. */
.prose > p:first-child {
  font-size: var(--fs-body-lg); color: var(--c-text); font-weight: 500;
  line-height: var(--lh-head); margin-bottom: var(--s-5);
}
/* Bilgi/sozlesme sayfalarinda metin sayfanin KENDISI: gri okunmuyor. */
.prose--doc p, .prose--doc li { color: var(--c-text); font-size: var(--fs-body-lg); }
.prose--doc h2, .prose--doc h3 { font-family: var(--font-display); font-weight: 500; }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin: var(--s-6) 0 var(--s-3); color: var(--c-text); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); color: var(--c-text-muted); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--c-text); }

/* ---- SEO metni (kategori + bolge) ----
   Eskiden sayfanin dibinde basliksiz, gri, 68ch'lik bir duvardi (baslik sr-only).
   Panel diline alindi; basliklar display font + kirmizi kisa cizgi; ilk bolum
   acik, devami native <details> ile. Metin degismez, yalniz hiyerarsi kazanir. */
.seotext {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
@media (min-width: 768px) { .seotext { padding: var(--s-7); } }
.seotext__eyebrow {
  font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brand-text); font-weight: 700; margin: 0 0 var(--s-2);
}
.seotext__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2);
  line-height: var(--lh-head); margin: 0 0 var(--s-5); }
.seotext__body { max-width: var(--measure); }
.seotext__body p { color: var(--c-text); line-height: var(--lh-body); }
/* .prose ilk paragraf vurgusu burada da gecerli; ilk blok baslik ise baslik ustu bosluk yok */
.seotext__body > h2:first-child { margin-top: 0; }
.seotext__body h2 {
  font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 500;
  line-height: var(--lh-head); padding-top: var(--s-4); position: relative;
}
.seotext__body h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: var(--s-6); height: var(--s-1); border-radius: var(--r-pill); background: var(--c-brand);
}
.seotext__more { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .seotext--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-8); align-items: start; }
  .seotext--wide .seotext__head { position: sticky; top: calc(var(--h-header) + var(--s-5)); }
  .seotext--wide .seotext__title { margin-bottom: 0; }
}
.seotext__more > summary {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min);
  padding-inline: var(--s-5); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 600; cursor: pointer; list-style: none;
  transition: background var(--d-btn) var(--e-out);
}
.seotext__more > summary::-webkit-details-marker { display: none; }
.seotext__more > summary::after { content: "\2193"; transition: transform var(--d-btn) var(--e-out); }
.seotext__more > summary:hover { background: var(--c-surface-2); }
.seotext__more[open] > summary::after { transform: rotate(180deg); }
.seotext__close, .seotext__more[open] .seotext__open { display: none; }
.seotext__more[open] .seotext__close { display: inline; }
.seotext__more[open] > .seotext__body { margin-top: var(--s-5); }

/* ---- Bolge sayfasi ---- */
.cityhero { position: relative; padding-block: var(--s-5) var(--s-7); overflow: hidden; }
.cityhero::before { content: ""; position: absolute; inset: 0; background: var(--glow-brand); pointer-events: none; }
.cityhero .container { position: relative; }
.cityhero .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); }
.cityhero__inner { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
@media (min-width: 1024px) {
  .cityhero__inner { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--s-8); }
}
.cityhero__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: 1.05; margin: 0; }
.cityhero .hero__lede { margin-bottom: var(--s-6); }
.cityhero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 519px) { .cityhero__cta { display: grid; grid-template-columns: 1fr; } }
.cityhero__facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
}
.cityhero__facts li {
  background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1);
}
.cityhero__facts b { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.1; color: var(--c-brand-text); }
.cityhero__facts span { font-size: var(--fs-caption); color: var(--c-text-muted); }
.cityhero + .section { padding-top: 0; }
.citytrust { padding-bottom: 0; }

/* Adimlar: numarali daireler, genis ekranda tek satir */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 768px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } }
.steps li {
  background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2);
}
.steps__n {
  display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-text-on-brand);
  font-weight: 700; margin-bottom: var(--s-2);
}
.steps b { font-size: var(--fs-body); }
/* Mobilde dikey kartlar ekran boyu kadar uzuyordu: numara solda, metin sagda */
@media (max-width: 767px) {
  .steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); padding: var(--s-4); }
  .steps__n { grid-row: span 2; margin-bottom: 0; }
}
.steps p { margin: 0; font-size: var(--fs-label); color: var(--c-text-muted); line-height: var(--lh-body); }

.citybody { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .citybody { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.cityfaq h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); margin: 0; }
@media (min-width: 1024px) { .cityfaq { position: sticky; top: calc(var(--h-header) + var(--s-4)); } }
.cityothers { padding-top: 0; }
.cityothers__title { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--s-4); }
.cityothers .chip { gap: var(--s-2); }
.cityothers .chip svg { color: var(--c-brand); }
.hubchips { margin-top: var(--s-5); }

/* ---- Bilgi kartlari (ORTAK) ----
   Hesabim, Iletisim ve Favorilerim ayni isi yapiyordu ama her biri kendi
   duzenini kuruyordu. Tek dil: .cardgrid + .infocard. Yeni UI dili DEGIL —
   .cart__summary / .plp__side ile ayni panel dili. */
.page__lede { color: var(--c-text-muted); font-size: var(--fs-body-lg);
  max-width: 60ch; margin: var(--s-3) 0 0; }
.page__subhead { font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h3); margin: var(--s-7) 0 var(--s-4); }

.cardgrid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 768px)  { .cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cardgrid { grid-template-columns: repeat(3, 1fr); } }

.infocard {
  display: flex; flex-direction: column;
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
.infocard h2 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-h3); margin: 0 0 var(--s-3);
}
.infocard h2 svg { flex: none; color: var(--c-brand); }
.infocard p { color: var(--c-text-muted); font-size: var(--fs-label); margin: 0 0 var(--s-4); }
/* Eylemler kartin DIBINE oturur: farkli uzunluktaki metinlerde butonlar
   birbirinden kaymiyor. */
.infocard__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; }
.infocard__actions .btn { flex: 1 1 auto; }
.infocard__note { font-size: var(--fs-caption); color: var(--c-text-muted);
  margin: var(--s-3) 0 0 !important; }
/* Kartin tasidigi ASIL deger (numara, saat): metinden ayrilir. */
.infocard__value { color: var(--c-text) !important; font-size: var(--fs-body-lg);
  font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 var(--s-4) !important; }
.infocard__address { font-style: normal; color: var(--c-text);
  font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--s-3); }
.cardgrid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .cardgrid--2 { grid-template-columns: repeat(2, 1fr); } }
/* Favori listesi doluyken yardim kartlari gereksiz yer kaplar (app.js gizler). */
#wishlist-help { margin-top: var(--s-6); }
/* Kart icindeki form (Hesabim > Siparisimi sorgula): kartin soluk paragraf kurali hata metnini ve uyariyi ezmesin. */
.infocard .field__error { color: var(--c-brand-text); margin: 0; }
.infocard form > .field__error { margin-bottom: var(--s-4); }
.infocard .notice { color: var(--c-text); margin: 0 0 var(--s-4); }

/* Tek satirlik yonlendirmeler: kart degil, dokunulabilir satir listesi. */
.linkcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
@media (min-width: 768px) { .linkcards { grid-template-columns: repeat(2, 1fr); } }
.linkcards a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-cta); padding: var(--s-3) var(--s-4);
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-input); font-size: var(--fs-label); font-weight: 600;
  transition: border-color var(--d-btn) var(--e-out), background var(--d-btn) var(--e-out);
}
.linkcards a:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.linkcards svg:first-child { flex: none; color: var(--c-brand); }
.linkcards svg:last-child { flex: none; margin-left: auto; color: var(--c-text-muted);
  transform: rotate(-90deg); }

/* ---- Iletisim ---- */
.contact { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 768px)  { .contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact { grid-template-columns: repeat(3, 1fr); } }
.contact__card {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
.contact__card h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.contact__list li { display: flex; flex-direction: column; gap: var(--s-1); }
.contact__link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-body-lg); font-weight: 600;
}
.contact__address { font-style: normal; color: var(--c-text-muted); line-height: var(--lh-body); }

/* ---- Link listesi (site haritasi) ---- */
/* HATA: sutun araligi yalniz --s-1 (4px) idi ve sayi sutunun SAG ucuna
   yaslaniyordu; sayi bir sonraki sutunun adina yapisip "Anal Dildo 140 Anal
   Mastürbatör" gibi okunuyor, hangi sayinin kime ait oldugu kayboluyordu.
   Genis sutun araligi + ayrac cizgisi satirlari birbirinden ayirir. */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-7); }
@media (min-width: 768px)  { .linklist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .linklist { grid-template-columns: repeat(3, 1fr); } }
.linklist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}
.linklist a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); flex: 1;
}
.linklist a:hover { color: var(--c-brand-text); }
/* Sayi ikincil: adla ayni agirlikta okunmamali. */
.linklist li > .caption { flex: none; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Cerez izni ----
   Eskiden ekranin alt seridini bastan basa kaplayan bir duvardi. Artik sol alt
   kosede kucuk bir kart: icerigi kapatmaz, sayfanin akisini bozmaz.
   Kabul/Reddet ESIT agirlikta kalir (Karar: yonlendirme yok). */
.consent {
  position: fixed; z-index: var(--z-modal);
  left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--h-bottomnav) + var(--s-3) + env(safe-area-inset-bottom));
  max-width: 420px;
  background: var(--c-surface-1);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-card);
  box-shadow: var(--sh-modal);
  padding: var(--s-5);
  animation: consent-in var(--d-drawer) var(--e-out);
}
@keyframes consent-in { from { opacity: 0; transform: translateY(var(--s-4)); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .consent { right: auto; bottom: var(--s-5); left: var(--s-5); }
}
.consent[hidden] { display: none; }
/* Cerez karti acikken WhatsApp butonu gizlenir: dar ekranda ust uste biniyorlardi. */
body:has(.consent:not([hidden])) .wafab { display: none; }
.consent__inner { display: grid; gap: var(--s-3); }
.consent__title { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.consent__text { font-size: var(--fs-caption); color: var(--c-text-muted); margin: 0; max-width: none;
  line-height: var(--lh-body); }
.consent__text a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.consent__note { font-size: var(--fs-caption); color: var(--c-text-muted); margin: 0; }
.consent__prefs { display: grid; gap: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--c-border); }
.consent__row { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap-min); cursor: pointer;
  font-size: var(--fs-label); }
.consent__row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-brand); flex: none; }
.consent__row .caption { color: var(--c-text-muted); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.consent__actions .btn { flex: 1 1 auto; min-height: var(--tap-min); }
/* "Ayarlar" butonlarla ayni agirlikta olmamali: ucuncul eylem. */
.consent__settings {
  justify-self: start; min-height: var(--tap-min); padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-caption); color: var(--c-text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.consent__settings:hover { color: var(--c-text); }

/* ---- Bildirim seridi ---- */
/* Eskiden blok bir <p> idi: "Sepet guncellendi." gibi iki kelimelik bir mesaj
   icin olcu araligi (68ch) boyunca uzanan, 20px koseli dev bir kutu ciziyordu.
   Simdi icerige gore buzusur ve tur SOL KENAR rengiyle okunur. */
.notice {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong);
  border-radius: var(--r-input);
  background: var(--c-surface-1); font-size: var(--fs-label);
  max-width: var(--measure);
}
.notice--ok    { border-left-color: var(--c-success); }
.notice--warn  { border-left-color: var(--c-warning); }
.notice--error { border-left-color: var(--c-danger); color: var(--c-text); }
.notice .link-more { margin-left: var(--s-2); }

/* ---- Adet stepper (dokunma hedefi 44px) ---- */
.stepper { display: inline-flex; align-items: stretch; gap: 0; }
.stepper__btn {
  min-width: var(--tap-min); min-height: var(--tap-min);
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border-strong); cursor: pointer;
  font-size: var(--fs-body-lg); line-height: 1;
}
.stepper__btn:first-of-type { border-radius: var(--r-input) 0 0 var(--r-input); }
.stepper__btn:last-of-type  { border-radius: 0 var(--r-input) var(--r-input) 0; }
.stepper__input {
  width: 64px; min-height: var(--tap-min); text-align: center;
  background: var(--c-surface-1); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-inline: none;
  font-size: var(--fs-body);           /* 16px — iOS zoom onleme */
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__input { -moz-appearance: textfield; }

/* ---- Sepet ---- */
.cart { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
@media (min-width: 1024px) { .cart { grid-template-columns: 1fr 360px; align-items: start; } }
.cart__lines { display: grid; gap: var(--s-4); }
.cartline {
  display: grid; grid-template-columns: var(--thumb-sm) 1fr; gap: var(--s-4);
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-4);
}
@media (min-width: 768px) { .cartline { grid-template-columns: var(--thumb-md) 1fr auto; } }
/* Kabin karttan farkli renkteydi: urun fotograflari beyaz fonda cekildigi icin
   gorselin cevresinde gri bir cerceve kaliyordu (ayni duzeltme .card__media'da
   yapilmisti, sepet satiri atlanmisti). */
.cartline__media {
  aspect-ratio: 1 / 1; background: var(--c-surface-1);
  border: 1px solid var(--c-border); border-radius: var(--r-input); overflow: hidden;
}
.cartline__media img { width: 100%; height: 100%; object-fit: contain; }
.cartline__body { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
/* Urun adi fiyattan kucuktu; sepette once NE aldigini okursun. */
.cartline__name { font-size: var(--fs-body); font-weight: 600; margin: 0; line-height: var(--lh-head); }
.cartline__unit { color: var(--c-text-muted); }
.cartline__qty { display: inline-flex; align-items: center; }
.cartline__end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
@media (min-width: 768px) {
  .cartline__end { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--s-3); }
}
/* Fiyatlar --c-text: sepette 3 kirmizi fiyat + kirmizi CTA fazlaydi; kirmizi
   karar anina (Siparise Devam Et) birakildi. DS: 18px'te kirmizi kullanilmaz. */
.cartline__total { font-size: var(--fs-price-sm); font-weight: 700; color: var(--c-text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "Cikar" ciplak bir metindi; simdi ikonlu ve hover'da yikici renge doner. */
.cartline__remove {
  min-height: var(--tap-min); padding-inline: var(--s-2);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-label); font-weight: 500; color: var(--c-text-muted);
  transition: color var(--d-btn) var(--e-out);
}
.cartline__remove:hover { color: var(--c-danger); }
.cartline__remove svg { flex: none; }

.cart__continue {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-min); font-size: var(--fs-label); font-weight: 600;
  color: var(--c-text-muted); transition: color var(--d-btn) var(--e-out);
}
.cart__continue:hover { color: var(--c-text); }
.cart__continue svg { transform: rotate(90deg); }

/* Ozet: toplam satiri digerlerinden ayrilir. */
.summary__total { border-top: 1px solid var(--c-border); padding-top: var(--s-3); align-items: baseline; }
.summary__total dt { font-size: var(--fs-body) !important; color: var(--c-text) !important; font-weight: 600; }
.summary__total dd { font-size: var(--fs-price-sm); font-weight: 700; }

/* Yikici eylem davetkar olmamali: blok ghost buton basliklar kadar one cikiyordu. */
.cart__clear { margin-top: var(--s-4); text-align: center; }
.cart__clear button {
  min-height: var(--tap-min); padding-inline: var(--s-3);
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-caption); color: var(--c-text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--d-btn) var(--e-out);
}
.cart__clear button:hover { color: var(--c-danger); }

/* Adet kontrolu satiri eziyordu (44+64+44 = 152px). Sayi alani daraltildi;
   dokunma hedefleri 44px kaldi. */
.cartline .stepper__input { width: 48px; }
.cart__summary {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5); position: sticky; top: calc(var(--h-header) + var(--s-4));
}
.cart__summary h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.cart__notes { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2);
  font-size: var(--fs-caption); color: var(--c-text-muted); }
.summary { margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
.summary > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.summary dt { color: var(--c-text-muted); font-size: var(--fs-label); }
.summary dd { margin: 0; font-weight: 600; }
.summary-lines { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.summary-lines li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-label); }
/* Uzun urun adinda tutar "5.000,90 / TL" diye bolunmesin: ad sarar, tutar tek satir */
.summary-lines li > .tnum { flex: none; white-space: nowrap; }

/* ---- Checkout ---- */
.checkout__lede { color: var(--c-text-muted); max-width: var(--measure); margin: var(--s-3) 0 0; }
.checkout__lede a { color: var(--c-brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.checkout__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 1024px) { .checkout__grid { grid-template-columns: 1fr 360px; align-items: start; } }
.checkout__card {
  background: var(--c-surface-1); border: 1px solid var(--c-border);
  border-radius: var(--r-card); padding: var(--s-5);
}
.checkout__card h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
/* Ozet sepette sticky, checkout'ta degildi: form ~4900px uzunlugunda, tutar ve
   "Sepeti duzenle" ilk ekrandan sonra kayboluyordu. Sepetle ayni davranis. */
@media (min-width: 1024px) {
  .checkout__summary { position: sticky; top: calc(var(--h-header) + var(--s-4)); }
}

/* ---- Form alanlari ---- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--fs-label); font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; min-height: var(--h-input); padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input);
  font-size: var(--fs-body); font-family: inherit;   /* 16px — iOS zoom onleme */
}
.field textarea { min-height: var(--s-9); resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--c-danger); }
.field__error { margin: 0; font-size: var(--fs-caption); color: var(--c-brand-text); }
.check {
  display: flex; gap: var(--s-3); align-items: flex-start;
  min-height: var(--tap-min); margin-top: var(--s-3); cursor: pointer;
  font-size: var(--fs-caption); color: var(--c-text-muted);
}
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-brand); flex: 0 0 auto; }
.check a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Sepet rozeti ---- */
.iconbtn { position: relative; }
/* Rozet IKONA ait, butona degil: satir duzeninde (ikon + "Sepetim") butonun sag
   ust kosesi etiketin ustune dusuyordu, rozet urunle ilgisiz bir yerde duruyordu. */
.iconbtn__icon { position: relative; display: inline-grid; place-items: center; }
.iconbtn__badge, .bottomnav__badge {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-text-on-brand);
  font-size: var(--fs-micro); font-weight: 700; line-height: 1;
}
.bottomnav__icon {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 26px; border-radius: var(--r-pill);
  transition: background var(--d-btn) var(--e-out);
}

/* ---- Favori (kalp) ---- */
.card { position: relative; }
/* Gorselin ustunde: renkli (promosyon) fotograflarda da okunsun diye yari saydam beyaz disk, cizgisiz */
.card__fav {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2;
  width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0;
  background: color-mix(in srgb, var(--c-surface-1) 85%, transparent);
  border: 0; border-radius: var(--r-pill);
  color: var(--c-text); cursor: pointer; transition: background var(--d-btn) var(--e-out);
}
@media (hover: hover) { .card__fav:hover { background: var(--c-surface-2); } }
.card__fav[aria-pressed="true"] { color: var(--c-brand-text); }
.card__fav[aria-pressed="true"] svg { fill: currentColor; }
.pdp__fav .pdp__fav-on, .pdp__fav[aria-pressed="true"] .pdp__fav-add { display: none; }
.pdp__fav[aria-pressed="true"] .pdp__fav-on { display: inline; color: var(--c-brand-text); }

/* ---- Blog ---- */
/* Liste: tek kolon mobil, 2 kolon tablet, 3 kolon masaustu. Kartin tamami tiklanir
   (postcard__link::after), metin linki klavye icin tek odak noktasi kalir. */
.postlist { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 768px)  { .postlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .postlist { grid-template-columns: repeat(3, 1fr); } }
.postcard {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); background: var(--c-surface-1);
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  transition: border-color var(--d-card) var(--e-out), transform var(--d-card) var(--e-out);
}
.postcard:hover { border-color: var(--c-border-strong); transform: translateY(-2px); }
.postcard__date { font-size: var(--fs-caption); color: var(--c-text-muted); }
/* Meta seridi: kategori · tarih · okuma suresi. Gorsel olmayan bir blogda
   karti "bitmis" gosteren sey bu — eskiden yalniz tarih vardi. */
.postcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: 0; font-size: var(--fs-caption); color: var(--c-text-muted);
}
.postcard__sep { color: var(--c-border-strong); }
.postcard__cat {
  color: var(--c-brand-text); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-micro);
}
/* Basliklar display serif: 216 yazilik listede tek tip sans gri bir blok
   olusturuyordu, editoryal bir his yoktu. */
.postcard__title { font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-body-lg); line-height: var(--lh-head); margin: 0; }
.postcard:hover { box-shadow: var(--sh-float); }
.postcard .link-more svg { transform: rotate(-90deg); }

/* Ilk sayfanin bastaki yazisi: listeye giris noktasi. */
.postcard--featured { margin-top: var(--s-6); gap: var(--s-3); padding: var(--s-6); }
.postcard--featured .postcard__title { font-size: var(--fs-h2); }
.postcard--featured .postcard__excerpt { font-size: var(--fs-body); max-width: 68ch; }
@media (min-width: 768px) { .postcard--featured { padding: var(--s-7); } }
/* Listede one cikan varsa ust bosluk ondan gelir. */
.postcard--featured + .postlist { margin-top: var(--s-4); }

.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin: var(--s-3) 0 0; font-size: var(--fs-label); color: var(--c-text-muted);
}
.post__back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-min); font-size: var(--fs-label); font-weight: 600;
  color: var(--c-text-muted); transition: color var(--d-btn) var(--e-out);
}
.post__back:hover { color: var(--c-text); }
.post__back svg { transform: rotate(90deg); }
.postcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.postcard__link:focus-visible { outline: none; }
.postcard:has(.postcard__link:focus-visible) { box-shadow: var(--focus-ring); }
.postcard__excerpt { margin: 0; font-size: var(--fs-label); color: var(--c-text-muted); }
.postcard .link-more { margin-top: auto; }

.post { max-width: var(--measure); }
.post__head { margin-bottom: var(--s-5); }
.post__body a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }
/* 1500 kelimelik bir yazida govde metni gri olunca okumak yoruyor. .prose'un
   muted rengi kategori SEO metni icin dogru; MAKALE govdesi tam kontrast olur. */
.post__body p, .post__body li { color: var(--c-text); font-size: var(--fs-body-lg); }
/* H1 display serif iken ara basliklar sans kaliyordu: ayni yazida iki ayri ses.
   Editoryal tutarlilik icin ara basliklar da serif. */
.post__body h2, .post__body h3 { font-family: var(--font-display); font-weight: 500; }
.post__body h2 { font-size: var(--fs-h3); }
.post__body img { max-width: 100%; height: auto; border-radius: var(--r-card); }
.post__cats { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
.post__label { font-size: var(--fs-label); font-weight: 600; margin: 0 0 var(--s-3); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding-inline: var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  font-size: var(--fs-label); color: var(--c-text);
  transition: background var(--d-btn) var(--e-out);
}
.chip:hover { background: var(--c-surface-2); }
.chip[aria-current="true"] { background: var(--c-text); border-color: var(--c-text); color: var(--c-surface-1); }

/* ---- Mobil menu (drawer) ---- */
.header__menu, .header__search { display: inline-flex; }
@media (min-width: 1024px) { .header__menu, .header__search { display: none; } }
/* Mobilde serit sikisikti: hamburger + logo + 4 ikon = 6 oge / 390px.
   Ustelik ARA, FAVORILER ve SEPET zaten alt navigasyonda — header onlari
   tekrarliyordu. Mobilde yalniz sepet kalir (rozet gorunur olmali); ara ve
   favoriler alt navigasyondan, hesap drawer'dan erisilir.
   Sonuc: solda 44px hamburger, sagda 44px sepet, ortada nefes alan logo. */
@media (max-width: 1023px) {
  .header__search, .header__fav, .header__account { display: none; }
  .header__logo { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
  .header__actions { margin-left: 0; }
}

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--c-overlay);
}
.drawer__panel {
  position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-bg); box-shadow: var(--sh-modal);
  /* Yuvarlatilmis sag kenar: panel sayfanin ustune BINEN bir yuzey gibi okunur,
     kenarlikla yapistirilmis bir sutun gibi degil. */
  border-radius: 0 var(--r-modal) var(--r-modal) 0;
  animation: drawer-in var(--d-drawer) var(--e-out);
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: calc(-1 * var(--s-4)); z-index: 1;
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--gutter)) 0;
  padding: var(--s-4) var(--gutter);
  background: var(--c-bg);
}
.drawer__title { font-size: var(--fs-h3); margin: 0; font-family: var(--font-display); font-weight: 500; }
/* Kapatma: yuzeyi olan dairesel hedef — eskiden zeminde yuzen ciplak bir carpiydi. */
#menu-close { background: var(--c-surface-2); }
#menu-close:hover { background: var(--c-surface-3); }
.search--drawer { display: flex; align-items: center; max-width: none; }
.drawer__groups, .drawer__links { list-style: none; margin: 0; padding: 0; }
.drawer__groups > li + li { border-top: 1px solid var(--c-border); }
.drawer__group summary, .drawer__group-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap-cta); font-weight: 600; cursor: pointer; list-style: none; color: var(--c-text);
}
.drawer__group summary::-webkit-details-marker { display: none; }
/* Cekmecede de ilk ve tek vurgulu oge: ust menudeki "Cok Satanlar" ile ayni dil */
.drawer__group-link--hot { color: var(--c-brand-text); font-weight: 800; }
.drawer__group-link--hot > span { display: inline-flex; align-items: center; gap: var(--s-2); }
/* "+" / "−" karakterleri yerine donen chevron: ayni dil ana menudeki ok ile. */
.drawer__group summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--s-1);
  border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-menu) var(--e-out);
}
.drawer__group[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.drawer__group[open] summary { color: var(--c-brand-text); }
/* Alt kategoriler bir rayla gruba bagli: duz girintide hangi baslığa ait oldugu
   kaybolmustu. */
.drawer__group .drawer__links {
  padding: 0 0 var(--s-3) var(--s-4); margin-left: var(--s-2);
  border-left: 2px solid var(--c-border);
}
.drawer__links a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); color: var(--c-text-muted);
}
.drawer__links a:hover { color: var(--c-text); }
/* Iletisim blogu panelin DIBINE oturur: liste ne kadar uzarsa uzasin sabit yer. */
.drawer__links--util {
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.drawer__links--util a { color: var(--c-text); font-weight: 500; }
.drawer__links--util svg { flex: none; color: var(--c-text-muted); }
.drawer__cta { font-weight: 600; }
.drawer__cta svg { color: var(--c-brand); }

/* ---- Checkout adimlari + odeme ---- */
.checkout__step { border: 0; margin: 0 0 var(--s-6); padding: 0; min-width: 0; }
.checkout__step legend {
  display: flex; align-items: center; gap: var(--s-3); padding: 0; margin-bottom: var(--s-3);
  font-size: var(--fs-body-lg); font-weight: 600;
}
.checkout__num {
  display: inline-grid; place-items: center; width: var(--s-6); height: var(--s-6);
  border-radius: var(--r-pill); background: var(--c-surface-3); font-size: var(--fs-label);
}
.checkout__after { text-align: center; margin-top: var(--s-3); }
@media (min-width: 1024px) { .checkout__summary { position: sticky; top: calc(var(--h-header) + var(--s-4)); } }
.checkout__trust { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.checkout__trust a { color: var(--c-brand-text); }
.summary__total { padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.summary__total dt, .summary__total dd { color: var(--c-text); font-size: var(--fs-body-lg); font-weight: 700; }

.paymethods { display: grid; gap: var(--s-3); }
.paymethod {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-input); cursor: pointer;
  min-height: var(--tap-cta);
}
.paymethod:has(input:checked) { border-color: var(--c-brand); background: var(--c-brand-subtle); }
.paymethod input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-brand); flex: 0 0 auto; }
.paymethod > span { display: grid; gap: var(--s-1); }

/* ---- Siparis onayi ---- */
.success { text-align: center; max-width: var(--measure); margin-inline: auto; }
.success__icon {
  display: inline-grid; place-items: center; width: var(--s-8); height: var(--s-8); margin: 0 0 var(--s-4);
  border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-success);
  font-size: var(--fs-h3); font-weight: 700;
}
.success__no { font-size: var(--fs-body-lg); margin: var(--s-3) 0; }
.bankinfo { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
.bankinfo > div { display: grid; gap: var(--s-1); }
.bankinfo dt { font-size: var(--fs-caption); color: var(--c-text-muted); }
.bankinfo dd { margin: 0; display: grid; gap: var(--s-2); }
.bankinfo code, .bankinfo__iban {
  font-family: var(--font-num); font-size: var(--fs-body-lg); letter-spacing: .04em;
  word-break: break-all; color: var(--c-text);
}

/* Link gorunumlu buton (footer "Cerez tercihleri"): davranis butondur, gorunum link */
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: left;
}
.linkbtn:hover { color: var(--c-text); }

/* PRG mesaji (layout): sayfa basinda, akista; sabit toast degil (ekran okuyucu role=status) */
.flashbar { padding-top: var(--s-4); }
.flashbar .notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0; }

/* Filtre: gorunur fiyat etiketleri; sonuclara inis header'in altinda kalmasin */
.filters__label { display: block; font-size: var(--fs-caption); color: var(--c-text-muted); margin-bottom: var(--s-1); }
/* Sayfa ici capalar yapiskan header'in ALTINDA kaliyordu: yalniz #urunler icin
   tanimliydi, #one-cikanlar / #cok-satanlar / galeri capalari atlayinca baslik
   header'a giriyordu. Capa hedefi olan her ogeye uygulanir. */
#urunler, #one-cikanlar, #cok-satanlar, .gallery__slide, [id^="gorsel-"] {
  scroll-margin-top: calc(var(--h-header) + var(--s-4));
}
/* Mobil panelin kendi basligi var ("Filtrele"); formun basligi ikinci kez gorunmesin */
@media (max-width: 1023px) { .filters__title { display: none; } }

/* Favoriler: kaldir butonu kartin tiklama alaninin USTUNDE (card__link::after tum karti kaplar) */
.card__remove { position: relative; z-index: 1; margin-top: var(--s-2); min-height: var(--tap-min); padding-inline: 0; justify-content: flex-start; }

/* Yasal sayfalar: satici kunyesi */
.legal-seller {
  display: grid; gap: var(--s-2); margin: var(--s-5) 0; padding: var(--s-4);
  background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--r-card);
  max-width: var(--measure); font-size: var(--fs-label);
}
.legal-seller > div { display: grid; grid-template-columns: var(--s-9) 1fr; gap: var(--s-3); }
.legal-seller dt { color: var(--c-text-muted); }
.legal-seller dd { margin: 0; }
.legal-seller a { color: var(--c-brand-text); }

/* On bilgilendirme (sayfa + checkout) */
.preinfo h2 { font-size: var(--fs-body-lg); }
.checkout__preinfo { margin-bottom: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-input); padding: 0 var(--s-4); }
.checkout__preinfo summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: var(--fs-label); }
.checkout__preinfo[open] { padding-bottom: var(--s-4); }
.legal-note a, .empty .caption a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* Metin ici linkler (yasal sayfalar, bilgi sayfalari) link oldugu anlasilsin */
.prose a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Sabit WhatsApp butonu ----
   Yesil --c-success token'i: beyaz metinle 5.33:1 (AA). Marka kirmizisi
   kullanilmadi — "bir ekranda tek birincil kirmizi CTA" (DS).
   Konum alt navigasyonun VE varsa yapiskan cubugun USTUNDE; ikisiyle de
   cakismaz, safe-area'ya saygi duyar. */
.wafab {
  position: fixed; z-index: var(--z-header);
  right: var(--gutter);
  bottom: calc(var(--h-bottomnav) + var(--s-3) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap-cta); min-width: var(--tap-cta);
  padding-inline: var(--s-3);
  justify-content: center;
  background: var(--c-success); color: var(--c-text-on-brand);
  border-radius: var(--r-pill); box-shadow: var(--sh-float);
  font-size: var(--fs-label); font-weight: 600;
  transition: transform var(--d-btn) var(--e-out), box-shadow var(--d-btn) var(--e-out);
}
.wafab:hover { transform: translateY(-2px); box-shadow: var(--sh-modal); }
.wafab svg { flex: none; }
/* Dar ekranda yalniz ikon: serit zaten alt navigasyon + cubukla dolu. */
.wafab__label { display: none; }
body:has(.stickybar) .wafab {
  bottom: calc(var(--h-bottomnav) + var(--h-stickybar) + var(--s-3) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .wafab { bottom: var(--s-5); padding-inline: var(--s-4); }
  .wafab__label { display: inline; }
  body:has(.stickybar) .wafab { bottom: var(--s-5); }
}
@media print { .wafab { display: none; } }

/* Gonderiliyor durumu (cift gonderim engeli, app.js) */
[aria-busy="true"] { opacity: .7; cursor: progress; }
/* Kirik/eksik gorsel: bos kutu yerine durust yedek (app.js 'error' dinleyicisi) */
.is-broken { position: relative; background: var(--c-surface-2); }
.is-broken::after {
  content: "Görsel yüklenemedi"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-caption); color: var(--c-text-muted); text-align: center; padding: var(--s-3);
}
.is-broken img { visibility: hidden; }

/* Footer akordiyonu: mobilde dokunulabilir baslik, masaustunde duz baslik */
.footer__group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); }
.footer__group summary::-webkit-details-marker { display: none; }
.footer__group summary::after { content: "+"; color: var(--c-text-muted); }
.footer__group[open] summary::after { content: "−"; }
.footer__group summary h2 { margin: 0; }
@media (min-width: 1024px) {
  .footer__group summary { cursor: default; pointer-events: none; min-height: 0; margin-bottom: var(--s-3); }
  /* HATA: yalniz `.footer__group summary::after` (0-1-2) yaziyordu; acik durum kurali
     `.footer__group[open] summary::after` (0-2-2) DAHA OZGUL oldugu icin onu eziyordu
     ve tum gruplar `open` oldugundan masaustunde basliklarin yaninda "−" goruluyordu.
     Medya sorgusu ozgulluk eklemez — acik durum da burada bastirilmali. */
  .footer__group summary::after,
  .footer__group[open] summary::after { content: none; display: none; }
}
/* ---- Kurulum sihirbazi (views/install) ----
   Yeni UI dili yok: notice, field, btn, checkout__card kullanilir. Burada yalniz yerlesim. */
.kurulum { max-width: var(--measure); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.checklist .notice { display: flex; align-items: flex-start; margin: 0; max-width: none; }
.progress { width: 100%; height: var(--s-4); accent-color: var(--c-brand); }
.codeblock {
  max-width: 100%; overflow-x: auto; margin: 0; padding: var(--s-4); white-space: pre;
  background: var(--c-surface-2); border-radius: var(--r-input); font-size: var(--fs-caption);
}
.kurulum summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; }

/* Bakim modunda yoneticinin gordugu uyari seridi (ziyaretci hic gormez) */
.onizleme-seridi { display: flex; max-width: none; margin: 0; border-radius: 0; border-inline: 0; border-top: 0; }
.onizleme-seridi a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Hesabim (istege bagli uyelik) ----
   Yeni UI dili DEGIL: form panelleri .checkout__card, kartlar .infocard, menu ve listeler .linkcards,
   alanlar .field. Masaustunde solda hesap menusu; telefonda pano kartlari menudur, alt sayfalarda
   "Hesabim" geri baglantisi (menuyu her sayfanin ustune yigmak ilk ekrani yiyordu). */
.account__grid { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
.account__nav { display: none; }
.account__main { min-width: 0; }
.account__main > h1 { margin-top: 0; }
@media (min-width: 1024px) {
  .account__grid { grid-template-columns: var(--w-account-nav) minmax(0, 1fr); align-items: start; }
  .account__nav { display: block; position: sticky; top: var(--s-5); }
  .account__back { display: none; }
}
.account__nav .linkcards { grid-template-columns: 1fr; }
.linkcards a[aria-current="page"] { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.linkcards__main { display: grid; gap: var(--s-1); min-width: 0; }
.linkcards__main .caption { font-weight: 400; color: var(--c-text-muted); }
.linkcards__end { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
.linkcards .linkcards__end + svg { margin-left: var(--s-2); }
.authbox { max-width: var(--w-auth); }
.account__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.account__actions .btn { flex: 1 1 auto; }
.account__actions form, .infocard__actions form { display: contents; }
.account__cards { margin-top: var(--s-5); }
.account__section { margin-top: var(--s-6); }
.account__section > h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.account__section .caption a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.account__verify { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.account__benefits { margin: 0 0 var(--s-4); padding-left: var(--s-5); display: grid; gap: var(--s-2);
  color: var(--c-text-muted); font-size: var(--fs-label); }
.field__help { margin: 0; font-size: var(--fs-caption); color: var(--c-text-muted); }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.field__row a { font-size: var(--fs-label); color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px;
  min-height: var(--tap-min); display: inline-flex; align-items: center; }


/* ---- Ana sayfa bannerlari (panel: Icerik > Ana sayfa > Bannerlar) ----
   Gorsel oranlari img/source width-height ozniteliklerinden gelir (CLS yok). Kaydirma urun galerisiyle ayni
   scroll-snap dili; JS'siz de kayar. Seritlerde odak halkasi kirpilmasin diye halka kadar ic bosluk (eksi dis bosluk).
   scroll-padding ic boslukla ayni: yoksa ilk kart hizasi 4px'te kalir, tarayici yuklenirken seridi kendiliginden
   kaydirir ve Chrome bunu kullanici kaydirmasi sayip LCP olcumunu keser (PageSpeed: NO_LCP). */
.promo-link { display: block; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface-1); }
.promo-link img { display: block; width: 100%; height: auto; }
.promo-link:focus-visible { border-radius: var(--r-card); }
.promo { padding-block: var(--s-5); }

.promo-slider { padding-block: var(--s-5) var(--s-6); }
.promo-slider__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: var(--s-1); margin: calc(var(--s-1) * -1); scroll-padding-inline: var(--s-1);
}
.promo-slider__track::-webkit-scrollbar { display: none; }
.promo-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.promo-slider__slide + .promo-slider__slide { margin-inline-start: var(--s-2); }
.promo-slider__ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.promo-slider__btn {
  display: inline-grid; place-items: center; flex: none;
  min-width: var(--tap-min); min-height: var(--tap-min); padding: 0;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-surface-1); color: var(--c-text); cursor: pointer;
  transition: background var(--d-btn) var(--e-out);
}
.promo-slider__btn:hover { background: var(--c-surface-2); }
.promo-slider__btn:disabled { opacity: .4; cursor: default; }
/* Durdur/baslat: donerken durdur ikonu, durunca baslat ikonu */
[data-slider-pause] svg + svg, [data-slider-pause][aria-pressed="true"] svg:first-child { display: none; }
[data-slider-pause][aria-pressed="true"] svg + svg { display: block; }
.promo-slider__dots { display: flex; }
.promo-slider__dot {
  display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.promo-slider__dot::before {
  content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--c-border-strong);
}
.promo-slider__dot[aria-current="true"]::before { width: var(--s-5); background: var(--c-brand); }
/* Dar ekranda oklar yok (kaydirma + noktalar): 5 nokta + durdur 320 px'e sigar */
@media (max-width: 479px) { .promo-slider__btn[data-slider-prev], .promo-slider__btn[data-slider-next] { display: none; } }

.promo-rail__track {
  display: flex; gap: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: var(--s-1); margin: calc(var(--s-1) * -1); scroll-padding-inline: var(--s-1);
}
/* Gorunur adet: tasarim sistemi "ana sayfa carousel" 1.5 / 2 / 3 / 4 / 5 / 6 */
.promo-rail__item { flex: 0 0 calc((100% - var(--s-4)) / 1.5); min-width: 0; scroll-snap-align: start; }
@media (min-width: 480px)  { .promo-rail__item { flex-basis: calc((100% - var(--s-4)) / 2); } }
@media (min-width: 768px)  { .promo-rail__item { flex-basis: calc((100% - var(--s-4) * 2) / 3); } }
@media (min-width: 1024px) { .promo-rail__item { flex-basis: calc((100% - var(--s-4) * 3) / 4); } }
@media (min-width: 1280px) { .promo-rail__item { flex-basis: calc((100% - var(--s-4) * 4) / 5); } }
@media (min-width: 1440px) { .promo-rail__item { flex-basis: calc((100% - var(--s-4) * 5) / 6); } }
/* Uclu banner: telefonda bir tanesi ve komsunun kenari, 768'den itibaren uc sutun (kaydirma yok) */
.promo-rail--uclu .promo-rail__item { flex-basis: 85%; }
@media (min-width: 768px) {
  .promo-rail--uclu .promo-rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
.promo-rail__nav { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }