/* ==========================================================
   CEA Mağaza — vitrin stilleri
   Palet: lacivert #0b2545 + altın #d9a22b (ana site ile aynı)
   ========================================================== */

:root {
  --navy-900: #061729;
  --navy-800: #0b2545;
  --navy-700: #123a63;
  --navy-600: #1b4f80;
  --navy-100: #e6eef6;
  --navy-050: #f4f8fc;

  --gold-700: #8a6314;
  --gold-600: #a8791a;
  --gold-500: #d9a22b;
  --gold-400: #e8bc5c;
  --gold-100: #fbf1d9;

  --title: #0b2545;
  --text: #43536b;
  --muted: #64748b;
  --border: #dfe6ef;
  --border-strong: #c6d3e2;
  --surface: #f6f9fc;
  --white: #fff;

  /* ==========================================================
     ETKİLEŞİMLİ DENETİM KENARLIĞI — WCAG 1.4.11 (3:1)
     ----------------------------------------------------------
     NEDEN AYRI BELİRTEÇ: --border ve --border-strong DEKORATİF
     çizgilerdir (kart çerçevesi, ayırıcı, tablo satırı). Bilgi
     taşımadıkları için WCAG onlara eşik koymaz ve beş temada da
     1,19–2,18:1 bandındadır — bilinçli olarak öyle bırakıldı;
     hepsini 3:1'e çıkarmak arayüzü kafes gibi gösterirdi.

     Bir metin girdisinin DURAĞAN kenarlığı ise girdinin nerede
     başlayıp bittiğini gösteren TEK görsel işarettir; az gören
     kullanıcı 1,26:1'lik çizgiyi göremediği için formu bulamaz.
     WCAG 1.4.11 kullanıcı arayüzü bileşenleri için 3:1 ister.
     Bu yüzden input/select/textarea/onay kutusu/çerçeveli düğme
     yalnızca aşağıdaki belirteci kullanır; beş temada da
     --card-bg, --page-bg ve --surface üstünde ≥3:1 ölçülmüştür.

     KALINLIK DEĞİL RENK: 3:1'e çıkarken 1.5px kalınlığa
     dokunulmadı, yalnızca ton koyulaştı (kurumsal #c6d3e2 →
     #838b96). Kalınlık artırmak hem düzeni kaydırır hem de
     kenarlığı "seçili" gibi gösterirdi.

     ÖLÇÜLÜ SERTLİK: eşik 3:1 olduğu için hedef ~3,3:1 seçildi,
     4,5:1 DEĞİL. Metin eşiğine çıkarmak durağan kenarlığı odak
     halkasıyla (--primary-focus, 4,47–18,58:1) karıştırırdı;
     odak durumu ayırt edilebilir kalmalı.

     PANELDEN AYARLANAMAZ: config/themes.php `adjustable` beyaz listesinde
     YOKTUR; gerekçesi orada yazılı (kontrast tek değerin değil, ÇİFTİN
     özelliğidir; sanitizeValue tek başına eşik uygulayamaz).

     --control-border-strong yalnızca ÜZERİNE GELME/vurgu adımıdır;
     durağan kenarlıktan belirgin şekilde daha güçlü olmak zorunda
     (eskiden hover --border-strong'a giderdi, yani kenarlık
     SOLUYORDU — bu bir gerilemeydi).
     ========================================================== */
  --control-border: #838b96;
  --control-border-strong: #5c6b80;

  --success: #157347;
  --danger: #c8362f;
  --warning: #a8791a;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 23, 41, 0.06);
  --shadow: 0 4px 16px rgba(6, 23, 41, 0.08);
  --shadow-lg: 0 16px 48px rgba(6, 23, 41, 0.12);

  --container: 1240px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================
     TEMA BELİRTEÇLERİ (tokens)
     public/css/themes/<tema>.css dosyaları YALNIZCA bu değişkenleri
     ve birkaç bileşen kuralını geçersiz kılar; HTML yapısı değişmez.
     Panelden ince ayar yapılabilenler: --primary, --accent, --title,
     --text, --page-bg, --card-bg, --border, --radius, --card-radius,
     --btn-radius, --font-scale, --container
     ========================================================== */
  --font-heading: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  --primary: var(--navy-800);
  --primary-strong: var(--navy-900);
  --primary-soft: var(--navy-050);
  --on-primary: #fff;

  --primary-hover: var(--navy-700);
  --primary-focus: var(--navy-600);
  --primary-line: var(--navy-100);

  --accent: var(--gold-500);
  --accent-strong: var(--gold-700);
  --accent-light: var(--gold-400);
  --accent-soft: var(--gold-100);
  --on-accent: var(--navy-900);

  --page-bg: var(--white);
  --card-bg: var(--white);
  --card-radius: 16px;
  --card-shadow: none;
  --card-hover-shadow: var(--shadow);

  --btn-radius: var(--pill);
  --btn-tracking: 0;
  --btn-transform: none;
  --btn-height: 44px;

  --heading-tracking: -0.015em;
  --heading-transform: none;
  --section-space: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.6;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ==========================================================
   CÜMLE İÇİ BAĞLANTI — WCAG 2.5.8 (AA) EŞİĞİ 24px
   ----------------------------------------------------------
   Paragraf/tablo hücresi/etiket içindeki bağlantılar 20–22px yüksekliğindeydi
   (ölçüldü) — 24px'lik AA eşiğinin de altında. Bunlar DÜĞME DEĞİL, cümlenin
   parçası olan metin bağlantılarıdır; 44px'e çıkarmak paragrafın satır
   yüksekliğini bozardı.
   `min-height` KULLANILAMAZ: satır içi (inline) kutuda etkisizdir. Dikey
   DOLGU satır içi kutuda satır yüksekliğini DEĞİŞTİRMEZ (metin akışı aynı
   kalır) ama tıklanabilir/boyanan kutuyu büyütür → 20 + 2×2 = 24px.
   ========================================================== */
p > a:not(.btn), td > a:not(.btn), label > a:not(.btn),
.prose a:not(.btn), li > span > a:not(.btn), p > span > a:not(.btn) {
  padding-block: 2px;
}

/* GÜVENLİ ALAN: çentikli/kavisli ekranlarda yatay modda sol-sağ kenar içeriği
   yutuyordu. env() masaüstünde 0 döner → max() ile 20px kalır, yani masaüstü
   dolgusu birebir aynı. */
.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--section-space); }
.section--surface { background: var(--surface); }
.stack { display: grid; gap: 16px; }
.muted { color: var(--muted); }
.text-gold { color: var(--accent-strong); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Butonlar ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-height); padding: 0 20px; border-radius: var(--btn-radius);
  font-family: var(--font-heading); font-size: calc(15px * var(--font-scale)); font-weight: 600;
  letter-spacing: var(--btn-tracking); text-transform: var(--btn-transform);
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--accent); color: var(--on-accent); }
.btn--gold:hover { background: var(--accent-light); }
.btn--navy { background: var(--primary); color: var(--on-primary); }
.btn--navy:hover { background: var(--primary-hover); }
/* Çerçeveli düğme: çerçeve düğmenin TEK sınırı, dekoratif değil. */
.btn--outline { border: 1.5px solid var(--control-border); color: var(--primary); }
.btn--outline:hover { border-color: var(--primary); background: var(--primary-soft); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { color: var(--primary-focus); }
.btn--ghost:hover { background: var(--primary-soft); }
/* ==========================================================
   KÜÇÜK DÜĞME — GÖRSEL 36px, DOKUNMA HEDEFİ 44px
   ----------------------------------------------------------
   Ölçüm: `.btn--sm` her yerde 36px yüksekliğindeydi (ürün kartı "Sepete ekle",
   bölüm başlığı "Tümünü gör"), yani WCAG 2.5.5 eşiğinin 8px altında.
   min-height'ı 44px'e çıkarmak ürün kartı ızgarasını ve bölüm başlıklarını
   masaüstünde de büyütürdü; bu yüzden GÖRSEL yükseklik 36px kalır ve
   tıklanabilir alan ::before ile dikeyde büyütülür.

   NİÇİN 6px, 4px DEĞİL: `inset` PADDING kutusuna göre hesaplanır, BORDER
   kutusuna göre değil. `.btn--outline` 1,5px+1,5px kenarlık taşıdığı için
   4px'lik yayılma gerçekte 42px veriyordu (tarayıcının vuruş testiyle
   ölçüldü — inset aritmetiğine güvenilmedi). 6px ile kenarlıklı düğmede 45px,
   kenarlıksızda 48px olur; ikisi de eşiği geçer.

   Yalnızca NEGATİF inset kullanıldığı için düğmenin kendi kutusu da
   tıklanabilir kalır; düzen (layout) hiç değişmez.
   ========================================================== */
.btn--sm { position: relative; min-height: 36px; font-size: 14px; padding: 0 14px; }
.btn--sm::before { content: ''; position: absolute; inset: -6px 0; }
.btn--lg { min-height: 52px; font-size: 16px; padding: 0 28px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------------- Formlar ---------------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label {
  font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--title);
}
/* ==========================================================
   FORM ALANI YAZI BOYU 16px — PAZARLIK KONUSU DEĞİL
   ----------------------------------------------------------
   iOS Safari, 16px'in ALTINDA yazı boyu olan bir alana odaklanınca sayfayı
   ZORLA yakınlaştırır ve kullanıcı bir daha uzaklaştıramaz; sayfa yanlamış
   hâlde kalır. Eskiden 15px'ti (ölçüm: 41 sayfada 1740 alan). 1px'lik
   masaüstü farkı bu hatanın yanında önemsizdir.
   ========================================================== */
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 16px;
  color: var(--title); background: var(--card-bg);
  border: 1.5px solid var(--control-border); border-radius: var(--radius);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-focus); box-shadow: 0 0 0 3px rgba(27, 79, 128, 0.16);
}
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
/* minmax(0, 1fr) — düz `1fr`in örtük alt sınırı `auto`dur (min-content).
   Uzun bir etiket ya da geniş bir alan izi genişletip sayfayı yatay
   kaydırtıyordu (ölçüm: /iletisim 320px'de belge genişliği 404px). */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field-error { font-size: 13px; color: var(--danger); }
/* Onay kutusu 18px kalır (yerel denetim), DOKUNMA HEDEFİ etikettir: etikete
   basmak da kutuyu değiştirir, bu yüzden hedef ≥44px etiket yüksekliğidir. */
.check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 4px;
  font-size: 14px; line-height: 1.45; cursor: pointer; margin-bottom: 12px;
}
/* Onay kutusu/radyo GERÇEK yerel denetim olarak bırakılır: kenarlığını tarayıcı
   çizer (Chrome #767676 ≈ 4,5:1) ve `appearance: none` ile devralmak kutuyu
   sıfırdan çizmek demektir — yüksek kontrast kipini ve zorlanmış renkleri de
   bozar. Bu yüzden burada yalnızca boyut ve `accent-color` verilir. */
.check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; accent-color: var(--primary-hover); }

/* ---------------- Uyarılar ---------------- */
.alert {
  display: flex; gap: 10px; padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; margin-bottom: 16px; border: 1px solid transparent;
}
.alert--success { background: #eaf6ef; border-color: #bfe3cd; color: #14603a; }
.alert--error { background: #fdeceb; border-color: #f5c6c3; color: #96241e; }
.alert--info { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-hover); }
.alert ul { margin: 0; padding-left: 18px; list-style: disc; }

/* ---------------- Rozetler ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--pill); letter-spacing: 0.02em;
}
.badge--gold { background: var(--accent); color: var(--on-accent); }
.badge--success { background: #eaf6ef; color: var(--success); }
.badge--danger { background: #fdeceb; color: var(--danger); }
.badge--warning { background: var(--accent-soft); color: var(--accent-strong); }
.badge--info { background: var(--primary-line); color: var(--primary-hover); }
.badge--primary { background: var(--primary); color: var(--on-primary); }
.badge--muted { background: var(--surface); color: var(--muted); }

/* ==========================================================
   ÜST BAR + HEADER
   ========================================================== */
.topbar {
  background: var(--primary-strong); color: rgba(255, 255, 255, 0.86); font-size: 13px;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: #fff; }
.topbar a:hover { color: var(--accent-light); }
.topbar__links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* ==========================================================
   ÜST ŞERİT BAĞLANTILARI — MASAÜSTÜNDE DE DEĞİŞTİ, GEREKÇE:
   Bağlantılar 20,8px yüksekliğindeydi. İlk denemede ::before ile büyütüldü ama
   TARAYICININ VURUŞ TESTİ gerçek hedefin yalnızca 33,8px olduğunu gösterdi:
   şeridin altındaki yapışkan başlık (z-index 60) yayılmanın alt yarısını
   çalıyordu. inset aritmetiği "44,8px" diyordu — ölçüm yalanı buydu.
   Bu yüzden gerçek yükseklik verildi: şerit 40px'ten 44px'e çıkıyor (+4px).
   ========================================================== */
.topbar__links a { display: inline-flex; align-items: center; min-height: 44px; }

.hdr { position: sticky; top: 0; z-index: 60; background: var(--card-bg); border-bottom: 1px solid var(--border); }
.hdr__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 24px; min-height: 74px;
}
.hdr__logo { display: flex; align-items: center; gap: 10px; }
.hdr__logo-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--primary); color: var(--accent);
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  border: 1.6px solid var(--accent);
}
.hdr__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--title); letter-spacing: 1px; }
.hdr__logo-sub { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--muted); }

.search {
  display: flex; align-items: center; background: var(--surface);
  border: 1.5px solid var(--control-border); border-radius: var(--pill); overflow: hidden;
  max-width: 560px; width: 100%;
}
.search:focus-within { border-color: var(--primary-focus); background: var(--card-bg); }
/* min-width: 0 → esnek kapta arama girdisi kendi min-content'i kadar yer
   istiyordu; 16px yazı boyu iOS'un zorla yakınlaştırmasını engeller. */
.search input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 18px; border: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--title);
}
.search input:focus { outline: none; }
.search button {
  min-height: 46px; padding: 0 20px; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
}
.search button:hover { background: var(--primary-hover); }

.hdr__actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hdr__action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
  font-family: var(--font-heading); color: var(--title);
}
.hdr__action:hover { background: var(--primary-soft); }
.hdr__action-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--pill); background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700;
}
/* flex: 0 0 44px — esnek kapta hamburger 37,3px'e SIKIŞIYORDU (ölçüldü) */
.hdr__burger { display: none; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: var(--radius); }

/* Kategori menüsü */
.catnav { background: var(--primary); }
.catnav__list { display: flex; flex-wrap: wrap; }
.catnav__item { position: relative; }
.catnav__link {
  display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px;
  font-family: var(--font-heading); font-size: 14px; font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.catnav__link:hover, .catnav__item:hover > .catnav__link { background: var(--primary-hover); color: #fff; }
.catnav__sub {
  position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 50;
}
.catnav__item:hover .catnav__sub, .catnav__item:focus-within .catnav__sub { display: block; }
.catnav__sub a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text);
}
.catnav__sub a:hover { background: var(--primary-soft); color: var(--primary-hover); }

/* ==========================================================
   MOBİL MENÜ
   YAPIŞKAN BAŞLIĞIN İÇİNDEDİR: menü açıkken başlık 720px'e uzuyor ve
   360px yüksekliğindeki yatay ekranda görünen alanın %200'ünü yutuyordu
   (ölçüldü). Menü artık KENDİ İÇİNDE kayar; taşma yüksekliği görünür alana
   göre sınırlanır (dvh yoksa vh'e düşer).
   ========================================================== */
.mobmenu { display: none; padding: 12px 0 32px; border-top: 1px solid var(--border); }
.mobmenu.is-open { display: block; }
.mobmenu {
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Alt çubuklu/çentikli cihazda son bağlantı ekran kenarının altında kalmasın */
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.mobmenu details { border-bottom: 1px solid var(--border); }
.mobmenu summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; font-family: var(--font-heading); font-weight: 600;
  color: var(--title); cursor: pointer; list-style: none;
}
.mobmenu summary::-webkit-details-marker { display: none; }
.mobmenu details a { display: block; min-height: 44px; padding: 10px 0 10px 14px; font-size: 15px; }
.mobmenu > a {
  display: block; min-height: 52px; padding-block: 14px;
  font-family: var(--font-heading); font-weight: 600; color: var(--title);
  border-bottom: 1px solid var(--border);
}

/* ==========================================================
   ANASAYFA
   ========================================================== */
.hero {
  position: relative; background:
    radial-gradient(circle at 85% 15%, rgba(217, 162, 43, 0.24) 0%, rgba(217, 162, 43, 0) 45%),
    linear-gradient(160deg, #0b2545 0%, #061729 100%);
  color: rgba(255, 255, 255, 0.85); overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding-block: 64px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  font-family: var(--font-heading); color: var(--accent-light);
  background: rgba(217, 162, 43, 0.12); border: 1px solid rgba(217, 162, 43, 0.32);
  border-radius: var(--pill); padding: 6px 14px; margin-bottom: 20px;
}
.hero h1 { font-size: calc(44px * var(--font-scale)); color: #fff; margin-bottom: 16px; }
.hero p { font-size: 18px; margin-bottom: 24px; max-width: 520px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cards { display: grid; gap: 12px; }
.hero__card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--card-radius);
}
.hero__card strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 15px; }
.hero__card span { font-size: 13px; color: rgba(255, 255, 255, 0.66); }
.hero__card-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; background: rgba(217, 162, 43, 0.18); color: var(--accent-light);
}

.trust { background: var(--primary-strong); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 20px;
}
.trust__item {
  display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-heading); font-size: 13px; font-weight: 500;
}
.trust__item svg { color: var(--accent-light); flex: 0 0 auto; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.section-head h2 { font-size: calc(28px * var(--font-scale)); }
.section-head p { color: var(--muted); font-size: 15px; }
.eyebrow {
  display: inline-block; font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 8px;
}

.catgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.catcard {
  display: block; padding: 20px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.catcard:hover { box-shadow: var(--card-hover-shadow); border-color: var(--border-strong); }
.catcard strong { display: block; font-family: var(--font-heading); font-size: 16px; color: var(--title); margin-bottom: 6px; }
.catcard span { font-size: 13px; color: var(--muted); }

/* ==========================================================
   ÜRÜN KARTI + GRID
   ========================================================== */
/* ==========================================================
   ÜRÜN IZGARASI
   `minmax(0, 1fr)` kullanılır, `auto-fit/minmax(NNNpx, …)` KULLANILMAZ:
   sabit bir minimum (ör. 230px) en dar ekranda kabından geniş bir kolon
   üretip sayfayı yatay kaydırır. Kolon SAYISI kırılma noktalarıyla verilir.
   Ölçülen kolon sayısı: 320/360/390/414 → 2 · 768/1024 → 3 · 1280/1440/1920 → 4
   (`--5` izleğinde en geniş ekranda 5).

   `--3` ve `--4` DEĞİŞKELERİ: kategori/koleksiyon/favoriler şablonlarında bu
   kolon sayıları SATIR İÇİ stille yazılıydı; satır içi stil medya sorgusuyla
   ezilemediği için 320px'de bile 3-4 kolon zorlanıyordu (kart genişliği ~65px).
   ========================================================== */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.pcard:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-2px); }
.pcard__media { position: relative; aspect-ratio: 1; background: var(--surface); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__flags { position: absolute; top: 10px; left: 10px; display: grid; gap: 6px; justify-items: start; }
/* ==========================================================
   FAVORİ DÜĞMESİ — GÖRSEL DAİRE 36px, HEDEF 44px
   Düğmenin kendisi 44×44 oldu (eskiden 36×36 → hedef eşiğin altındaydı);
   beyaz daire ::before ile 4px içeride çizilir, yani DAİRE ESKİ YERİNDE
   ve ESKİ BOYUTUNDA kalır (üst/sağ 10px, çap 36px). Masaüstünde görsel fark yok.
   ========================================================== */
.pcard__fav {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: none; color: var(--primary-hover); box-shadow: none; padding: 0;
}
.pcard__fav::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-sm);
}
.pcard__fav svg { position: relative; }
.pcard__fav:hover { color: var(--danger); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px; flex: 1; }
.pcard__brand { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
/* Ürün sayfasındaki marka bağlantısı 17px yüksekliğindeydi (12px yazı × 1,4
   satır). Başlığın üstünde tek başına duran bir GEZİNME bağlantısı, cümle içi
   bağlantı değil → 44px. Dolgu hedefi büyütür, negatif dış boşluk düzendeki
   büyümeyi geri alır: başlık ile arasındaki boşluk değişmez. */
a.pcard__brand {
  display: inline-block;
  padding-block: 14px; margin-block: -14px;
  /* Kısa marka adı ("Kuzey") 29px genişlikte kalıyordu — hedef 44×44 */
  padding-inline: 8px; margin-inline: -8px; min-width: 44px;
}
/* ==========================================================
   ÜRÜN ADI BAĞLANTISI — HEDEF 44px, KART YÜKSEKLİĞİ AYNI
   Tek satırlık adlarda kutu 20,3px kalıyordu (ölçüldü).
   ::before KULLANILMADI: bu ögede satır kırpma için `overflow: hidden` var,
   mutlak konumlu bir pseudo kutunun DIŞINA taşamaz — kırpılır ve hedef
   gerçekte büyümez. Bunun yerine dikey DOLGU hedefi büyütür, aynı ölçüdeki
   NEGATİF DIŞ BOŞLUK düzendeki büyümeyi geri alır: kart yüksekliği değişmez.
   Komşular (marka, puan, fiyat) etkileşimli değil, çakışma sorun değil.
   ========================================================== */
.pcard__name {
  padding-block: 12px; margin-block: -12px;
  font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--title);
  line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__rating { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.pcard__stars { color: var(--accent); letter-spacing: 1px; }
.pcard__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard__price strong { font-family: var(--font-heading); font-size: calc(19px * var(--font-scale)); color: var(--title); }
.pcard__price del { font-size: 14px; color: var(--muted); }
.pcard__foot { padding: 0 14px 14px; }
.pcard__stock { font-size: 12px; margin-bottom: 8px; }

/* ==========================================================
   KATEGORİ / LİSTE SAYFASI
   ========================================================== */
/* ==========================================================
   KIRINTI YOLU (BREADCRUMB)
   Bağlantılar 20,8px yüksekliğindeydi. Bunlar gezinme denetimi (menü) sayılır,
   cümle içi bağlantı değil → 44px. Kabın dikey dolgusu 16px'ten 6px'e
   çekildiği için ŞERİDİN TOPLAM YÜKSEKLİĞİ neredeyse aynı kalır
   (eski: 21+32 = 53px · yeni: 44+12 = 56px).
   ========================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--muted); padding-block: 6px; }
/* min-width: kısa kırıntı ("Moda") 30,3px genişlikte kalıyordu — hedef 44×44 */
.breadcrumb a, .breadcrumb > span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.breadcrumb a:hover { color: var(--primary-hover); text-decoration: underline; }

.listlayout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
/* Bayi başvuru formu tek kolon ister (eskiden satır içi stille yazılıydı) */
.listlayout--tek { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.filters {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 20px; position: sticky; top: 92px;
}
.filters h3 { font-size: 16px; margin-bottom: 4px; }
.filters__group { padding-block: 16px; border-bottom: 1px solid var(--border); }
.filters__group:last-of-type { border-bottom: 0; }
.filters__title {
  font-family: var(--font-heading); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-strong); margin-bottom: 10px;
}
.filters__list { display: grid; gap: 0; max-height: 260px; overflow-y: auto; }
/* Süzgeç bağlantıları 34,8px'ti; ALT ALTA dizili oldukları için ::before ile
   büyütmek komşu hedeflerle ÇAKIŞIRDI (tıklama hangi bağlantıya gider
   belirsizleşir). Bu yüzden gerçek min-height verilir; kabın 260px'lik yüksekliği
   değişmediği için masaüstünde yalnızca kaydırmadan önce görünen satır sayısı azalır. */
.filters__list a { display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 14px; }
.filters__list a:hover { color: var(--primary-hover); }
.filters__list a.is-active { color: var(--primary-hover); font-weight: 600; }

.listbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
/* 42px → 44px: dokunma hedefi eşiği (ölçüm: select#sort 42px) */
.listbar select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--control-border); border-radius: var(--radius); font: inherit; font-size: 16px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  /* Sayfa numarası tıklanabilir bir denetimdir; çerçevesi hedefin sınırıdır. */
  border: 1px solid var(--control-border); border-radius: var(--radius); font-size: 14px; background: var(--card-bg);
}
.pagination a:hover { border-color: var(--primary-focus); color: var(--primary-hover); }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pagination .is-disabled { opacity: 0.45; }

.empty {
  padding: 56px 24px; text-align: center; background: var(--surface);
  border: 1px dashed var(--border-strong); border-radius: var(--card-radius);
}
.empty h3 { font-size: 20px; margin-bottom: 8px; }

/* ==========================================================
   ÜRÜN DETAY
   ========================================================== */
.pdetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.gallery__main {
  aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--card-radius); overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================
   GALERİ KÜÇÜK GÖRSELLERİ
   Dar ekranda alt alta sarmak yerine YATAY KAYAR (scroll-snap): 8 küçük görsel
   320px'de dört satıra taşıyordu ve "sepete ekle" bloğunu ekranın dışına itiyordu.
   Kap kendi içinde kaydığı için sayfa yatay kaymaz.
   Masaüstünde (≥901px) eski davranış korunur: sarmalı ızgara.
   ========================================================== */
.gallery__thumbs {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: 4px;
  /* Kaydırma zinciri sayfaya taşmasın (mobilde yanlışlıkla sayfa kaymaz) */
  overscroll-behavior-x: contain;
}
.gallery__thumbs:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gallery__thumb {
  /* Küçük görsel bir <button>; kenarlık dokunma hedefini çizer. */
  flex: 0 0 auto; scroll-snap-align: start;
  width: 76px; height: 76px; border: 1.5px solid var(--control-border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); padding: 0;
}
@media (min-width: 901px) {
  .gallery__thumbs { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
}
.gallery__thumb.is-active { border-color: var(--accent); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pinfo h1 { font-size: calc(30px * var(--font-scale)); margin-bottom: 10px; }
.pinfo__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.pinfo__price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 0; border-block: 1px solid var(--border); margin-bottom: 20px;
}
.pinfo__price strong { font-family: var(--font-heading); font-size: calc(34px * var(--font-scale)); color: var(--title); }
.pinfo__price del { font-size: 18px; color: var(--muted); }
.pinfo__tax { font-size: 13px; color: var(--muted); width: 100%; }

.optgroup { margin-bottom: 18px; }
.optgroup__title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--title); margin-bottom: 8px; }
.optlist { display: flex; flex-wrap: wrap; gap: 8px; }
.optlist label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--control-border); border-radius: var(--pill); font-size: 14px; cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
/* Üzerine gelince kenarlık GÜÇLENMELİ. Eskiden --border-strong'a gidiyordu;
   durağan hâl artık daha koyu olduğu için bu hover kenarlığı SOLDURUYORDU. */
.optlist label:hover { border-color: var(--control-border-strong); }
.optlist input { position: absolute; opacity: 0; width: 0; height: 0; }
.optlist input:checked + span { font-weight: 600; }
.optlist label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.optlist label:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
/* Renk örneği: beyaz/krem bir örnek, kart zemininde YALNIZCA kenarlığı
   sayesinde görünür — yani kenarlık bilgi taşır, dekoratif değildir. */
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--control-border); }

.qtyrow { display: flex; gap: 12px; align-items: stretch; margin-bottom: 16px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--control-border); border-radius: var(--pill); overflow: hidden; }
.qty button { width: 44px; min-height: 48px; font-size: 20px; color: var(--primary-hover); }
.qty button:hover { background: var(--primary-soft); }
.qty input { width: 56px; min-height: 48px; text-align: center; border: 0; font: inherit; font-size: 16px; }
.qty input:focus { outline: none; }

.pfeatures { display: grid; gap: 10px; margin-top: 24px; }
.pfeatures li { display: flex; gap: 10px; font-size: 14px; }
.pfeatures svg { color: var(--accent-strong); flex: 0 0 auto; }

.tabs { margin-top: 56px; }
.tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs__btn {
  min-height: 48px; padding: 0 20px; font-family: var(--font-heading); font-size: 15px;
  font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent;
}
.tabs__btn.is-active { color: var(--primary); border-bottom-color: var(--accent); font-weight: 600; }
.tabs__panel { padding-top: 24px; display: none; }
.tabs__panel.is-active { display: block; }
.prose { max-width: 76ch; }
.prose h2, .prose h3 { margin: 24px 0 10px; font-size: 19px; }
.prose p { margin-bottom: 12px; line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.prose li { margin-bottom: 5px; }

.review { padding: 18px 0; border-bottom: 1px solid var(--border); }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.review__author { font-family: var(--font-heading); font-weight: 600; color: var(--title); }
.stars { color: var(--accent); letter-spacing: 2px; }

/* ==========================================================
   SEPET / ÖDEME
   ========================================================== */
.cartlayout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.cartlist { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.cartitem { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 18px; border-bottom: 1px solid var(--border); }
.cartitem:last-child { border-bottom: 0; }
.cartitem__img { width: 96px; height: 96px; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cartitem__img img { width: 100%; height: 100%; object-fit: cover; }
.cartitem__name { font-family: var(--font-heading); font-weight: 600; color: var(--title); margin-bottom: 4px; }
.cartitem__meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cartitem__right { text-align: right; display: grid; gap: 8px; align-content: start; }
.cartitem__total { font-family: var(--font-heading); font-size: 17px; color: var(--title); font-weight: 600; }

.summary {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: 22px; position: sticky; top: 92px;
}
.summary h3 { font-size: 18px; margin-bottom: 16px; }
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; font-size: 15px; }
.summary__row--total {
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--title);
}
.summary__note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.coupon { display: flex; gap: 8px; margin-block: 16px; }
.coupon input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--control-border); border-radius: var(--radius); font: inherit; font-size: 16px; }

/* ==========================================================
   ÖDEME DÜZENİ — MOBİLDE ÖZET NEREDE?
   ----------------------------------------------------------
   KARAR: özet FORMUN ALTINDA kalır (DOM sırası değişmez).
   GEREKÇE: "Siparişi onayla" düğmesi ve mesafeli satış sözleşmesi onay kutusu
   `.summary` bloğunun İÇİNDEDİR. Özeti forma göre yukarı taşımak, tutarı
   düğmeden bütün bir formun boyu kadar uzaklaştırırdı — yani "müşteri tutarı
   görmeden onaylamasın" şartını KÖTÜLEŞTİRİRDİ. Bugünkü sırada tutar,
   KDV dökümü ve kargo bedeli onay düğmesinin hemen üstündedir.
   Kargo/teslimat seçimi tutarı değiştirdiğinde müşteri yine aşağıda güncel
   tutarı görür; seçim ile onay arasında tutarı görmediği bir an yoktur.
   ========================================================== */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 24px; margin-bottom: 20px; }
.panel h2 { font-size: 19px; margin-bottom: 4px; }
/* ==========================================================
   AKORDEON BAŞLIĞI (SSS)
   <summary> bir dokunma hedefidir; ölçümde 25,6px yüksekliğindeydi.
   `list-style: none` + kendi oku YOK: yerel açılır üçgen korunur (klavye ve
   ekran okuyucu davranışı yerelden gelir).
   ========================================================== */
details.panel > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  cursor: pointer; font-family: var(--font-heading); font-weight: 600; color: var(--title);
}
/* SSS kartı eskiden satır içi `margin:0;padding:16px 20px` taşıyordu */
.panel--sss { margin: 0; padding: 16px 20px; }
.panel__desc { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
/* Radyo kutusu 20px kalır (yerel denetim); DOKUNMA HEDEFİ bu karttır.
   Kart zaten 16px dolgulu olduğu için min-height eklemek masaüstünü değiştirmez. */
.radio-card {
  display: flex; gap: 12px; padding: 16px; min-height: 44px; border: 1.5px solid var(--control-border);
  border-radius: var(--radius); margin-bottom: 10px; cursor: pointer;
}
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.radio-card input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; accent-color: var(--primary-hover); }
.radio-card strong { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--title); }
.radio-card span { font-size: 13px; color: var(--muted); }
.radio-card__price { margin-left: auto; font-family: var(--font-heading); font-weight: 600; color: var(--title); }

.steps { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.steps__item {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);
  font-family: var(--font-heading);
}
.steps__no {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.steps__item.is-active { color: var(--primary); font-weight: 600; }
.steps__item.is-active .steps__no { background: var(--primary); border-color: var(--primary); color: #fff; }

.success-box { text-align: center; max-width: 640px; margin-inline: auto; }
.success-box__icon {
  width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 20px;
  border-radius: 50%; background: #eaf6ef; color: var(--success);
}

/* ==========================================================
   HESAP
   ========================================================== */
/* minmax(0, 1fr) — ÖLÇÜLEN HATA: 1100px altında tek kolona düşen bu ızgaranın
   `1fr` izi örtük olarak `auto` (min-content) tabanına sahipti. İçindeki geniş
   tablo (`.table-scroll`) min-content'ini 718px'e çıkarınca 320px'lik ekranda
   BÜTÜN SAYFA yatay kaydı (belge genişliği 738px ölçüldü). minmax(0, ...) tabanı
   sıfıra çeker; tablo yine kendi kabında kayar. */
.acclayout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.accnav { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 12px; }
.accnav a {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px;
  border-radius: var(--radius); font-size: 15px; font-family: var(--font-heading);
}
.accnav a:hover { background: var(--primary-soft); }
.accnav a.is-active { background: var(--primary); color: var(--on-primary); font-weight: 600; }

.datatable { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.datatable table { font-size: 14px; }
.datatable th, .datatable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.datatable th {
  background: var(--surface); font-family: var(--font-heading); font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.datatable tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover { background: var(--primary-soft); }
/* ==========================================================
   KAYAN TABLO KABI
   overflow-x SARMALAYICIDA durur, tabloya `display: block` VERİLMEZ:
   tablo semantiği (satır/sütun ilişkisi) erişilebilirlik ağacından düşerdi.
   Blade tarafında kaba `tabindex="0" role="region" aria-label` verilir ki
   fare kullanamayan biri kabı klavyeyle (Tab + ok tuşları) kaydırabilsin.
   ========================================================== */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Kargo ücret tablosu (eskiden satır içi stille yazılıydı) */
.kargo-tablo { max-width: 760px; margin-bottom: 28px; }

.statcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Hesap genel bakışta üç kutu vardı ve SATIR İÇİ stille yazılıydı */
.statcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.statcard { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px; }
.statcard span { font-size: 13px; color: var(--muted); }
.statcard strong { display: block; font-family: var(--font-heading); font-size: 26px; color: var(--title); }

/* ==========================================================
   FOOTER
   ========================================================== */
.ftr { background: var(--primary); color: rgba(255, 255, 255, 0.74); font-size: 14px; margin-top: 64px; }
.ftr__main { padding-block: 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.ftr a:hover { color: var(--accent-light); }
/* ==========================================================
   ALT BİLGİ BAĞLANTI LİSTESİ — MASAÜSTÜNDE DE DEĞİŞTİ, GEREKÇE:
   Bağlantılar 32,4px yüksekliğindeydi (ölçüldü). Bunlar alt alta dizili
   gezinme bağlantıları; ::before ile büyütmek komşu hedeflerle çakışır
   (bir satırın alt 6px'i üsttekinin hedefine girer, tıklama belirsizleşir).
   Bu yüzden gerçek 44px satır yüksekliği verildi ve boşluk (gap) 2px'ten 0'a
   çekildi. SONUÇ: alt bilgi sütunu masaüstünde yaklaşık 70px uzuyor
   (6 bağlantı × 44px = 264px, eskiden 6 × 34,4 = 206px). Bilinçli takas:
   iş sahibinin şartı "mobil tamamen" ve alt bilgi düşük yoğunluklu bir alan.
   ========================================================== */
.ftr__links { display: grid; gap: 0; }
.ftr__links a { display: flex; align-items: center; min-height: 44px; }
.ftr__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ftr__badges li {
  font-family: var(--font-heading); font-size: 12px; padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--pill);
}
.ftr__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09); padding-block: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* ==========================================================
   DUYARLI (RESPONSIVE)
   ========================================================== */
@media (max-width: 1100px) {
  .pgrid, .pgrid--5, .pgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listlayout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; }
  .cartlayout, .checkout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .acclayout { grid-template-columns: minmax(0, 1fr); }
  .ftr__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statcards, .statcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .hdr__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .hdr__inner .search { display: none; }
  .hdr__burger { display: grid; }
  .catnav { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: 44px; gap: 32px; }
  .hero h1 { font-size: 32px; }
  .pdetail { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search--mobile { display: flex !important; margin-bottom: 14px; }
}

@media (max-width: 640px) {
  .pgrid, .pgrid--5, .pgrid--4, .pgrid--3, .catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding-block: 36px; }
  .addr-grid { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .cartitem { grid-template-columns: 72px minmax(0, 1fr); }
  .cartitem__img { width: 72px; height: 72px; }
  .cartitem__right { grid-column: 1 / -1; text-align: left; }
  .ftr__main { grid-template-columns: minmax(0, 1fr); }
  .statcards { grid-template-columns: minmax(0, 1fr); }
  .pinfo__price strong { font-size: 28px; }
}

/* ==========================================================
   ÇOK DAR EKRAN (≤420px) — BAŞLIK EYLEMLERİ İKON MODUNA GEÇER
   ----------------------------------------------------------
   ÖLÇÜLEN HATA (giriş yapılmış müşteri, 320 ve 360px): logo + üç eylem +
   hamburger yan yana sığmıyor, belge genişliği 383px'e çıkıyor ve BÜTÜN SAYFA
   yatay kayıyordu. Bu taşmanın KÖKÜ iki yerde düzeltildi:
     · .hdr__inner ızgarasında `1fr` → `minmax(0, 1fr)` (örtük `auto` taban)
     · .hdr__actions { min-width: 0 } ve .hdr__burger { flex: 0 0 44px }
       (hamburger 37,3px'e sıkışıyordu)

   BU BLOK AYRI BİR KARAR: taşma düzeldikten sonra da 320px'te eylem şeridine
   yalnızca 170px kalıyor, bir etiket ise 61px genişliğinde (ölçüldü). Üç
   etiketi bu alana sığdırmak metinleri üst üste bindirir/kırpar. Bu yüzden
   ≤420px'te etiketler GÖRSEL olarak kaldırılır ama erişilebilirlik ağacında
   KALIR (.visually-hidden kuralları) — ekran okuyucu yine "Sepet" der ve
   dokunma hedefi 44×44 kalır. 421px'ten itibaren etiketler geri gelir.
   ========================================================== */
@media (max-width: 420px) {
  .hdr__action .nowrap {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .hdr__action { padding: 0 4px; gap: 0; }
  .hdr__actions { gap: 2px; }
  .hdr__inner { gap: 8px; }
  .hdr__logo-text { font-size: 17px; }
}

/* ==========================================================
   YATAY (LANDSCAPE) / KISA EKRAN — ör. 640×360
   Yapışkan başlık 360px yüksekliğinde ekranın %20,8'ini yiyordu; menü
   açıkken %200'e çıkıyordu. Kısa ekranda başlık incelir, üst şerit ve
   kategori şeridi kalkar — içerik için ekranın en az %85'i kalır.
   ========================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .hdr__inner { min-height: 52px; }
  .topbar { display: none; }
  /* 48px → 44px: eşiğin ALTINA İNMEZ, yalnızca eşiğe iner */
  .catnav__link { min-height: 44px; }
  /* Menü açıkken yapışkan başlık 360px'lik ekranın %98'ini yutuyordu; 150px
     pay bırakınca %73'e iner ve arkadaki sayfa görünür kalır. Menü kendi
     içinde kaydığı için hiçbir bağlantı erişilemez olmaz. */
  .mobmenu { max-height: calc(100dvh - 150px); }
  .hero__inner { padding-block: 24px; }
  .section { padding-block: 24px; }
}

/* ==========================================================
   HAREKETİ AZALT
   Süre sıfırlamanın yanına scroll-behavior de eklendi: scroll-snap ve
   kaydırma davranışı da harekettir (WCAG 2.3.3).
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .gallery__thumbs { scroll-snap-type: none; }
}

/* ==========================================================
   ŞABLONLARDAN TAŞINAN IZGARALAR — MOBİL ÖNCELİKLİ
   ----------------------------------------------------------
   Aşağıdaki üç düzen daha önce Blade şablonlarında SATIR İÇİ `style`
   niteliğiyle yazılıydı. Satır içi stil medya sorgusundan daha güçlü olduğu
   için dar ekranda hiçbir şekilde tek kolona düşürülemiyordu; ölçümde
   /iletisim 320px'de 404px, ürün sayfası yorum sekmesi 519px genişlik
   üretiyordu. Buradaki kurallar TABANDA TEK KOLON (mobil öncelikli) ve
   `min-width` sorgusuyla genişler.
   ========================================================== */
.contact-grid,
.addr-grid,
.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.addr-grid--bosluklu { gap: 16px; margin-bottom: 24px; }

@media (min-width: 641px) {
  /* İki kolon ancak 641px'ten itibaren: 640px'te tek kolon 300px'lik alan
     bırakır, iki kolon ise 138px — form etiketleri okunmaz hâle gelir. */
  .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
  /* Sabit 360px'lik yorum formu kolonu YALNIZCA 901px'ten sonra:
     901 - 40 dolgu - 40 boşluk = 821px, yani sol kolona 461px kalır. */
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
  .reviews-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
}

/* Ödeme akışında sipariş/işlem numaraları ve imza dizeleri için tek aralıklı yazı */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* ==========================================================
   TEMA ÖNİZLEME ŞERİDİ
   Yalnızca giriş yapmış panel personeli ?tema= ile gezdiğinde
   basılır (bkz. shop/partials/theme-preview.blade.php).
   Tema CSS'lerinden bağımsız olsun diye sabit renk kullanır.
   ========================================================== */
.tema-onizleme {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  /* Çentikli cihazın alt tutamacı düğmeleri örtmesin */
  padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: #111318; color: #f4f4f5;
  font-family: 'Lexend', system-ui, sans-serif; font-size: 14px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}
.tema-onizleme strong { color: #ffd479; }
.tema-onizleme__metin { min-width: 0; }
.tema-onizleme__ayrinti { color: #a1a1aa; }
.tema-onizleme__eylemler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tema-onizleme__eylemler form { margin: 0; }
.tema-onizleme__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #3f3f46; background: transparent; color: #f4f4f5;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tema-onizleme__btn:hover { background: #27272a; border-color: #52525b; }
.tema-onizleme__btn--birincil { background: #ffd479; border-color: #ffd479; color: #1a1200; }
.tema-onizleme__btn--birincil:hover { background: #ffe0a0; border-color: #ffe0a0; }
.tema-onizleme__btn:focus-visible { outline: 3px solid #ffd479; outline-offset: 2px; }

/* Şerit içeriği kapatmasın */
body:has(.tema-onizleme) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 640px) {
  .tema-onizleme { font-size: 13px; }
  .tema-onizleme__ayrinti { display: none; }
}