/* ==========================================================================
   TEMA: ELEGANT — kırtasiye / ofis / hediyelik
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/elegant/shop/layouts/app.blade.php)
   `css/shop.css` dosyasını YÜKLEMEZ. Bu yüzden burada kendi sıfırlaması, kendi
   ızgarası, kendi tipografisi ve çekirdekten devralınan bileşen sınıflarının
   (.container, .btn, .badge, .alert, .field, .check, .qty, .cartitem, .summary,
   .pagination, .datatable, .table-scroll …) kendi çizimi vardır. O adlar
   korunuyor çünkü tema çekirdek PARÇALARI da basıyor (shop.partials.alerts,
   shop.karsilastirma.dugme, shop.karsilastirma.serit, dijital ürünün ek hizmet
   formu, elektronik ürün kutusu, teslimat slotu …) ve o parçalar bu adları
   kullanıyor.

   KARAKTER: sıcak bej kâğıt zemini, taba tek aksiyon rengi, asimetrik
   editoryal mozaik, çok bol boşluk. Çerçeve yok, gölge yok, rozet yok.
   Başlığın markası ORTADA ve menü markanın İKİ YANINA bölünmüş; başlık
   YAPIŞKAN DEĞİL, sayfa akışında kalır.

   RENK ROLLERİ SABİTTİR: zemin belirteci (--page-bg, --card-bg, --surface,
   --elg-kagit-*) METİN rengi olarak KULLANILMAZ; ön plan belirteci (--title,
   --text, --muted, --on-primary, --on-accent) zemin olarak kullanılmaz.

   --------------------------------------------------------------------------
   KONTRAST — HESAPLANDI (WCAG 2.1 bağıl parlaklık formülü)
   --------------------------------------------------------------------------
   Sayfa zemini #f7f3ec (L = 0,8993) üzerinde:
     --title   #33261a … 13,25:1     --danger  #a3302a …  6,30:1
     --text    #4f4034 …  8,98:1     --success #1f6b41 …  5,86:1
     --muted   #6e5e52 …  5,61:1     --warning #8a6510 …  4,81:1
     --accent  #8b5c2a …  5,18:1     --primary #4a3624 … 10,29:1
   Kart zemini #fbf8f2 (L = 0,9405) üzerinde:
     --title 13,83:1 · --text 9,37:1 · --muted 5,85:1 · --accent 5,41:1
   Yüzey #efe8dc (L = 0,8123) üzerinde:
     --title 12,04:1 · --text 8,15:1 · --muted 5,09:1 · --accent 4,71:1
   Taba düğme #8b5c2a üzerine beyaz ..................... 5,73:1
   Taba :hover #6f4820 üzerine beyaz .................... 8,00:1
   Koyu kahve #4a3624 üzerine beyaz başlık .............. 11,39:1
   Koyu kahve #4a3624 üzerine alt bilgi gövdesi #e8ded0 .. 8,56:1
   Koyu kahve #4a3624 üzerine alt bilgi ikincili #c9b8a4 . 5,90:1
   Denetim kenarlığı #8c7c6c (WCAG 1.4.11 eşiği 3:1):
     bej 3,64:1 · kart 3,80:1 · yüzey 3,31:1

   İKİ PALET REDDEDİLDİ — ÖLÇÜM SONUCU:
     1) Brifingdeki taba önerisi #a8763e beyaz metinle YALNIZCA 3,94:1
        veriyordu; bej zemin üzerinde metin olarak 3,56:1'de kalıyordu.
     2) İlk koyulaştırma #8f5f2c beyazda 5,47:1 ve bejde 4,94:1 ile geçiyordu
        ama YÜZEY (#efe8dc) üzerinde 4,49:1'e düşüyordu — eşiğin 0,01 altı.
        Belirteci yalnızca beyaza karşı ölçmek bu hatayı gizler; gerçek zemin
        ata zincirinden okunmalı (aynı tuzak tunga.css'te 22 ölçümde bulgu
        vermişti). Son değer #8b5c2a: üç zeminde de 4,7–5,4 bandında.

   FOTOĞRAF ÜSTÜNE METİN YAZILMAZ. Bütün alt yazılar fotoğrafın ALTINDA, bej
   zemin üzerinde durur. Gerekçesi ölçülebilir: fotoğraf üstündeki metnin
   kontrastı FOTOĞRAFA bağlıdır ve mağaza sahibi dosyayı değiştirdiğinde bir
   daha ölçülmez. Ayrıntısı public/img/themes/elegant/LISANS.md içinde.
   ========================================================================== */

:root {
  /* --- Tipografi: TEK AİLE, ince ve geniş geometrik sans. SERİF YOK. --- */
  --font-heading: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: 0.16em;
  --heading-transform: none;

  /* --- Ham palet: sıcak bej kâğıt + taba/karamel + koyu kahve --- */
  --elg-kagit-000: #fdfbf7;
  --elg-kagit-100: #fbf8f2;
  --elg-kagit-200: #f7f3ec;
  --elg-kagit-300: #efe8dc;
  --elg-kagit-400: #e3d9c8;
  --elg-kagit-500: #d4c7b0;

  --elg-taba-700: #6f4820;
  --elg-taba-600: #8b5c2a;
  --elg-taba-100: #f0e5d6;

  --elg-kahve-900: #33261a;
  --elg-kahve-800: #4a3624;
  --elg-kahve-700: #5c4531;
  --elg-kahve-600: #4f4034;
  --elg-kahve-400: #6e5e52;
  --elg-kahve-200: #c9b8a4;
  --elg-kahve-100: #e8ded0;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #4a3624;
  --accent: #8b5c2a;
  --title: #33261a;
  --text: #4f4034;
  --page-bg: #f7f3ec;
  --card-bg: #fbf8f2;
  --border: #e3d9c8;
  --radius: 2px;
  --card-radius: 0px;
  --btn-radius: 0px;
  --container: 1320px;

  --primary-strong: #3a2a1b;
  --primary-hover: #5c4531;
  --primary-focus: #6f4820;
  --primary-line: #e3d9c8;
  --primary-soft: #f0e5d6;
  --on-primary: #ffffff;

  --accent-strong: #6f4820;
  --accent-light: #a97a44;
  --accent-soft: #f0e5d6;
  --on-accent: #ffffff;

  /*
   | SOLUK METİN ÜÇ ZEMİNE KARŞI ÖLÇÜLDÜ, yalnızca beyaza karşı DEĞİL.
   | Bu tema soluk metni çoğunlukla bej (#f7f3ec) ve yüzey (#efe8dc) üzerinde
   | basıyor: KDV notu, birim fiyat satırı, üstü çizili eski fiyat, sayfalama,
   | /sepet ve /odeme yardımcı metinleri. #6e5e52 → bej 5,61:1 · kart 5,85:1 ·
   | yüzey 5,09:1. Üçü de gövde eşiğinin (4,5:1) üstünde.
   */
  --muted: #6e5e52;
  --border-strong: #d4c7b0;
  --surface: #efe8dc;
  --white: #fdfbf7;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği ≥3:1.
     Panelden AYARLANAMAZ (config/themes.php `adjustable` beyaz listesinde
     yok): kontrast tek değerin değil ÇİFTİN özelliğidir. */
  --control-border: #8c7c6c;
  --control-border-strong: #6e5e52;

  --success: #1f6b41;
  --danger: #a3302a;
  --warning: #8a6510;

  --radius-sm: 0px;
  --radius-lg: 2px;
  --pill: 999px;

  /*
   | GÖLGE YOK — bilinçli. Bu tema derinliği gölgeyle değil BOŞLUKLA kuruyor.
   | Belirteçler yine de tanımlı olmak ZORUNDA: yaprak CSS dosyaları
   | (shop-karsilastirma, shop-birim, shop-dijital, shop-teslimat,
   | shop-sepet-zekasi, shop-abonelik, shop-bayi, shop-koleksiyon,
   | shop-elektronik …) `var(--shadow)` okuyor ve tanımsız kalırsa o bildirim
   | geçersiz olur — karşılaştırma şeridi ve birim fiyat satırı renksiz kalır.
   */
  --shadow-sm: 0 1px 0 rgba(51, 38, 26, 0.05);
  --shadow: 0 1px 0 rgba(51, 38, 26, 0.07);
  --shadow-lg: 0 2px 0 rgba(51, 38, 26, 0.09);
  --card-shadow: none;
  --card-hover-shadow: none;

  --btn-height: 46px;
  --btn-tracking: 0.2em;
  --btn-transform: none;
  --section-space: 88px;
  --ease: cubic-bezier(0.33, 0, 0.2, 1);

  /* --- Temanın kendi ölçüleri --- */
  --elg-dokunma: 44px;
  --elg-kenar: 20px;
  --elg-bosluk: 14px;
  --elg-dar: 680px;
  --elg-cizgi: 1px solid var(--border);
}

/* ==================== SIFIRLAMA ==================== */

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

/* BELGENİN YAZI TİPİ KÖKTE, AÇIKÇA BİLDİRİLİR. Elegant TEK aile kullanır
   (Jost) ve bu bildirim `var()` ardına saklanmaz: hem var() desteklemeyen bir
   bağlam (bazı tarayıcı form denetimleri) hem de
   `php artisan cea:tasarim-ayrisma` tipografi ölçümü doğru aileyi görmeli. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.25;
  color: var(--title);
  letter-spacing: 0.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

del { color: var(--muted); text-decoration-thickness: 1px; }

/* Odak halkası HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmeli.
   Taba (#6f4820) bej zeminde 7,24:1. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

/* ==================== YARDIMCI ==================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }
.stack > * + * { margin-top: 16px; }

.elg-en {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--elg-kenar), env(safe-area-inset-left, 0px))
                  max(var(--elg-kenar), env(safe-area-inset-right, 0px));
}

.elg-en--dar { max-width: var(--elg-dar); }
.elg-en--orta { max-width: 900px; }

/* İçerik atlama bağlantısı: yalnızca odaklandığında görünür. */
.elg-atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
}
.elg-atla:focus {
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  background: var(--primary);
  color: var(--on-primary);
}

/* ==================== İMZA: ORTALANMIŞ BÖLÜM BAŞLIĞI ====================
   İnce çizgi başlığın ALTINDA durur (Parti A'da vast onu ÜSTÜNE koydu).
   Çizgi bir ::after sözde ögesidir; içerik değil SÜS olduğu için metin
   üretmiyor ve ekran okuyucudan gizlenmesine gerek yok.
   ================================================================== */

.elg-bolum { padding-block: clamp(40px, 6vw, 88px); }
.elg-bolum--sik { padding-block: clamp(28px, 4vw, 56px); }

.elg-bolum__bas {
  margin-bottom: clamp(28px, 4vw, 52px);
  text-align: center;
}

.elg-bolum__baslik {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  letter-spacing: var(--heading-tracking);
  color: var(--title);
}

.elg-bolum__baslik::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--elg-taba-600);
}

.elg-bolum__not {
  max-width: 52ch;
  margin: 14px auto 0;
  font-size: 14px;
  color: var(--muted);
}

/* ==================== DÜĞMELER ==================== */

.btn,
.elg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-height);
  padding: 0 26px;
  border: 1px solid var(--accent);
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--btn-tracking);
  text-align: center;
  cursor: pointer;
  transition-property: background-color, border-color, color;
  transition-duration: 180ms;
  transition-timing-function: var(--ease);
}

.btn:hover,
.elg-btn:hover {
  text-decoration: none;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn:disabled,
.btn[disabled],
.elg-btn:disabled,
.elg-btn[disabled] {
  background: var(--elg-kagit-400);
  border-color: var(--elg-kagit-400);
  color: var(--elg-kahve-600);
  cursor: not-allowed;
}

/* Çekirdekte "gold" ve "navy" birincil eylemlerdir; bu temada birincil eylem
   TABA'dır. İki ad da aynı çizime bağlanır ki çekirdek sayfalarda (sepet,
   ödeme, hesabım) düğme kimliksiz kalmasın. */
.btn--gold,
.btn--navy,
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--gold:hover,
.btn--navy:hover,
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* İMZA AYRINTI: İNCE ÇERÇEVELİ, ZEMİNSİZ düğme. */
.btn--outline,
.elg-btn--cerceve {
  background: transparent;
  border-color: var(--control-border);
  color: var(--title);
}
.btn--outline:hover,
.elg-btn--cerceve:hover {
  background: var(--elg-taba-100);
  border-color: var(--accent);
  color: var(--elg-taba-700);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.btn--ghost:hover { background: var(--elg-taba-100); border-color: transparent; }

/* Küçük değişke GÖRSEL olarak küçük ama dokunma hedefi 44px KALIR. */
.btn--sm { min-height: var(--elg-dokunma); padding: 0 16px; font-size: 11px; }
.btn--lg { min-height: 54px; padding: 0 34px; font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* SESSİZ METİN DENETİMİ — saç teli alt çizgi, zeminsiz.
   Kartta ve ürün sayfasında ikincil eylemler bu biçimde. */
.elg-metin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--elg-dokunma);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.elg-metin-btn:hover { color: var(--elg-taba-700); }
.elg-metin-btn:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* ==================== ROZETLER (çekirdek parçalar için) ====================
   ANA SAYFA VE KARTTA ROZET BASILMAZ; bu çizim yalnızca çekirdek
   görünümlerinde (sepet satırı, sipariş durumu, yorumun "satın aldı" işareti)
   geçen .badge ögeleri içindir. Bu temanın rozeti ZEMİNSİZ ve ÇERÇEVELİDİR.
   ================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--title);
}

.badge--gold { border-color: var(--accent); color: var(--elg-taba-700); }
.badge--info { border-color: var(--control-border); color: var(--text); }
.badge--success { border-color: var(--success); color: var(--success); }
.badge--danger { border-color: var(--danger); color: var(--danger); }
.badge--warning { border-color: var(--warning); color: var(--warning); }
.badge--muted { border-color: var(--border-strong); color: var(--muted); }

.stars, .elg-yildiz { color: var(--accent); letter-spacing: 0.14em; }

/* ==================== UYARI ŞERİTLERİ ==================== */

.alert {
  margin: 18px 0;
  padding: 13px 16px;
  border: var(--elg-cizgi);
  border-left: 2px solid var(--primary);
  background: var(--card-bg);
  color: var(--title);
  font-size: 15px;
}
.alert ul { padding-left: 18px; list-style: disc; }
.alert--success { border-left-color: var(--success); }
.alert--error { border-left-color: var(--danger); }
.alert--info { border-left-color: var(--accent); }

/* ==========================================================================
   BAŞLIK — TEK KATMAN, ÜÇ BÖLGE, ORTADA MARKA, YAPIŞKAN DEĞİL
   --------------------------------------------------------------------------
   Menü markanın İKİ YANINA bölünmüştür: solda ilk üç madde, ortada ince
   harf aralıklı kelime markası, sağda kalan maddeler + iki küçük ikon.
   `position: sticky` BİLEREK YOK: başlık sayfa akışında kalır ve aşağı
   kaydırıldığında ekrandan çıkar (Parti A'da tunga ve seasy yapışkan).
   ========================================================================== */

.elg-bas {
  border-bottom: var(--elg-cizgi);
  background: var(--page-bg);
}

.elg-bas__sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-block: 18px;
}

/* ORTADAKİ KELİME MARKASI: ince, çok geniş harf aralığı, BÜYÜK HARF.
   Büyük harf CSS `text-transform` ile DEĞİL, App\Support\Metin::buyuk() ile
   sunucuda üretilir (CSS dönüşümü 'istanbul' → 'ISTANBUL' yapar). */
.elg-marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: var(--elg-dokunma);
  justify-content: center;
  text-align: center;
}
.elg-marka:hover { text-decoration: none; }

.elg-marka__ad {
  font-family: var(--font-heading);
  font-size: clamp(15px, 2.2vw, 21px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.42em;
  /* Geniş harf aralığı son harften sonra da boşluk bırakır; sola kayma göze
     çarpar, bu yüzden aynı değer text-indent ile geri alınır. */
  text-indent: 0.42em;
  color: var(--title);
}

.elg-marka__alt {
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--muted);
}

/* SOL VE SAĞ MENÜ */
.elg-menu__sira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
}
.elg-menu--sag .elg-menu__sira { justify-content: flex-end; }

/*
 | min-width DE 44px — ÖLÇÜLEREK EKLENDİ: 1024px'te "SEÇKİ" bağlantısı
 | 39,5x44 px, "GİRİŞ" 37,1x44 px çıkıyordu (headless Chrome, gerçek
 | getBoundingClientRect). Yükseklik kapıdan geçiyordu ama GENİŞLİK geçmiyordu;
 | yalnızca min-height yazmak bu sınıfta yetersizdi çünkü kısa Türkçe sözcükler
 | 40px'in altında kalıyor. justify-content: center min-width büyüdüğünde metni
 | hedefin ortasında tutar.
 */
.elg-menu__bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--text);
}
.elg-menu__bag:hover { text-decoration: none; color: var(--accent); }
.elg-menu__bag[aria-current="page"] { color: var(--title); border-bottom: 1px solid var(--accent); }

/* SAĞDAKİ İKİ KÜÇÜK İKON + (dar ekranda) çekmece düğmesi */
.elg-eylem {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.elg-ikon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  border: 0;
  background: none;
  color: var(--title);
  cursor: pointer;
  list-style: none;
}
.elg-ikon-btn:hover { text-decoration: none; color: var(--accent); }
.elg-ikon-btn svg { stroke: currentColor; }
.elg-ikon-btn::-webkit-details-marker { display: none; }

.elg-sayac {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  padding: 0 4px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}

/* ARAMA <details> İLE AÇILIR — JavaScript'e bağlı DEĞİL. Betik yüklenmese
   bile arama çalışır; <summary> klavyeyle odaklanır ve durumu ekran
   okuyucuya kendiliğinden duyurulur. */
.elg-ara { position: relative; }

.elg-ara__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 2 * var(--elg-kenar)));
  padding: 16px;
  border: 1px solid var(--control-border);
  background: var(--elg-kagit-000);
}

.elg-arama { display: flex; gap: 8px; }
.elg-arama__alan {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--elg-dokunma);
  padding: 8px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--elg-kagit-000);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
}
.elg-arama__alan::placeholder { color: var(--muted); }
.elg-arama__gonder {
  flex: 0 0 auto;
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.elg-arama__gonder:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.elg-burger { display: inline-flex; }

/* ÇEKMECE MENÜ — public/js/shop.js `#mobile-menu` kimliğini arıyor ve
   `.is-open` sınıfını takıp çıkarıyor. KİMLİK DEĞİŞTİRİLEMEZ. */
.elg-cekmece {
  display: none;
  padding-bottom: 18px;
  border-top: var(--elg-cizgi);
}
.elg-cekmece.is-open { display: block; }
.elg-cekmece > a,
.elg-cekmece summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px dotted var(--border);
  font-size: 15px;
  color: var(--title);
  cursor: pointer;
}
/* Alt kategori: girinti + küçük punto ile ayrılır, dokunma hedefi 44px KALIR.
   Çekmecede `<details>` YOKTUR (gerekçesi header.blade.php içinde ölçümle
   yazılı); ağaç düz basılır. */
.elg-cekmece > a.elg-cekmece__alt {
  min-height: var(--elg-dokunma);
  padding-left: 18px;
  border-bottom: 1px dotted var(--border);
  font-size: 14px;
  color: var(--text);
}
.elg-cekmece .elg-arama { margin: 16px 0; }

/* ==========================================================================
   ANA SAYFA — 1) ASİMETRİK MOZAİK VİTRİN
   --------------------------------------------------------------------------
   SOLDA büyük yatay fotoğraf (2/3), SAĞDA dikey iki küçük kutu üst üste
   (1/3): biri FOTOĞRAF, biri BEJ ZEMİNDE METİN + ince çerçeveli düğme.
   Mobil öncelikli: tek kolon, 901px'ten itibaren 2/1 asimetri.
   ========================================================================== */

.elg-vitrin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--elg-bosluk);
  padding-block: clamp(20px, 3vw, 40px);
}

.elg-vitrin__yan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--elg-bosluk);
}

.elg-kare { margin: 0; }
.elg-kare__resim { width: 100%; height: 100%; object-fit: cover; }

.elg-vitrin__buyuk .elg-kare__resim { aspect-ratio: 3 / 2; }
.elg-vitrin__yan .elg-kare__resim { aspect-ratio: 4 / 3; }

/* Alt yazı fotoğrafın ALTINDA, bej zemin üzerinde (13,25:1). */
.elg-kare__yazi {
  padding-top: 10px;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
}

/* BEJ ZEMİNDE METİN KUTUSU — fotoğrafın yerine geçen üçüncü blok. */
.elg-soz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--surface);
}
.elg-soz__ust {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--elg-taba-700);
}
.elg-soz__baslik {
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 200;
  letter-spacing: 0.04em;
  color: var(--title);
}
.elg-soz__metin { font-size: 14.5px; color: var(--text); }

/* ==========================================================================
   ANA SAYFA — 3/5) ÜRÜN IZGARASI: ÜÇ KOLON, BÜYÜK KARTLAR, BOL BOŞLUK
   --------------------------------------------------------------------------
   Parti A'da 4 (vast) ve 5 (tunga) kolon kullanıldı; bu tema ÜÇ kolon
   kullanır ve kart aralığı belirgin biçimde geniştir.
   ========================================================================== */

.elg-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 44px) var(--elg-bosluk);
  list-style: none;
}

/* ==========================================================================
   ÜRÜN KARTI — ÇERÇEVE YOK, GÖLGE YOK, ROZET YOK
   --------------------------------------------------------------------------
   İNDİRİM ROZETİ BASILMAZ: indirim varsa fiyatın yanında ÜSTÜ ÇİZİLİ eski
   fiyat durur. Bu ölçülebilir bir yerleşim farkıdır — çekirdek ve dört Parti A
   teması da rozet basıyor.
   ========================================================================== */

/* Kart kökü `<figure>` (gerekçesi product-card.blade.php başında ölçümle
   yazılı); yerel figure kenar boşluğu SIFIRLANIR. */
.elg-urun { position: relative; margin: 0; }

.elg-urun__resim-kap {
  position: relative;
  display: block;
  background: var(--card-bg);
}

/* Fotoğraf KARE. object-fit: contain — kırtasiye ürünü (defter, kalem, kutu)
   kırpılırsa tanınmaz hâle gelir. */
.elg-urun__resim {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(14px, 2vw, 26px);
}

.elg-urun__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  color: var(--elg-kahve-400);
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 200;
  letter-spacing: 0.1em;
}

.elg-urun__govde {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding-top: 16px;
  text-align: center;
}

/* Kartta TEK bağlantı var ve tıklama alanı ::after ile KARTIN TAMAMINA
   yayılır: hedef 44px'ten büyük, ekran okuyucu ürünü iki kez okumaz.
   Eylem satırı kaplamanın ÜSTÜNDE durur (z-index), yani ayrı basılabilir. */
.elg-urun__ad {
  display: block;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--title);
}
.elg-urun__ad::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.elg-urun__ad:hover { text-decoration: none; color: var(--accent); }

.elg-urun__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  color: var(--title);
}
.elg-urun__fiyat del { font-size: 12.5px; }

.elg-urun__ek { font-size: 12.5px; color: var(--muted); }

.elg-urun__eylem {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 2px;
}

/* Karşılaştırma düğmesi (çekirdek parça) bu temanın sessiz metin denetimine
   indirilir. Parça AYNEN çağrılır: çerez, aria-pressed durumu ve
   JavaScript'siz çalışma sözleşmesi korunur. */
.elg-urun .krs-ekle__btn,
.elg-urun-sayfa .krs-ekle__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--elg-dokunma);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.elg-urun .krs-ekle__btn[aria-pressed="true"],
.elg-urun-sayfa .krs-ekle__btn[aria-pressed="true"] { color: var(--elg-taba-700); }

/* ==========================================================================
   ANA SAYFA — 4) ÜÇLÜ MOZAİK: FARKLI YÜKSEKLİKLERDE ÜÇ DİKEY FOTOĞRAF
   --------------------------------------------------------------------------
   Asimetri CSS ızgarasında satır aralığı (margin-block-start) ve farklı
   `aspect-ratio` değerleriyle kurulur; JavaScript ya da mutlak konum YOK.
   ========================================================================== */

.elg-uclu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--elg-bosluk);
}

.elg-uclu > * { margin: 0; }
.elg-uclu__resim { width: 100%; object-fit: cover; }
.elg-uclu > :nth-child(1) .elg-uclu__resim { aspect-ratio: 3 / 4; }
.elg-uclu > :nth-child(2) .elg-uclu__resim { aspect-ratio: 2 / 3; }
.elg-uclu > :nth-child(3) .elg-uclu__resim { aspect-ratio: 4 / 5; }

/* ==========================================================================
   ANA SAYFA — KATEGORİ SATIRI (saç teli çizgilerle ayrılmış)
   ========================================================================== */

.elg-oda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
}

.elg-oda__bag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: 20px;
  background: var(--page-bg);
}
.elg-oda__bag:hover { text-decoration: none; background: var(--surface); }
.elg-oda__ad {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--title);
}
.elg-oda__alt { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   ALT BİLGİ — İKİ KOLON (Parti A'da hep 3-4 kolon)
   --------------------------------------------------------------------------
   SOLDA marka + kısa metin, SAĞDA bağlantı listeleri.
   BAĞLANTISIZ SAYFA YOKTUR: /kampanyalar, /temalar, /blog, /karsilastirma ve
   blog RSS beslemesi buradan bağlanır.
   ========================================================================== */

.elg-alt {
  margin-top: clamp(40px, 6vw, 88px);
  background: var(--primary);
  color: var(--elg-kahve-100);
}

.elg-alt__sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(36px, 5vw, 64px);
}

.elg-alt__marka {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #ffffff;
}
.elg-alt__metin {
  max-width: 42ch;
  margin-top: 16px;
  font-size: 14px;
  color: var(--elg-kahve-100);
}

.elg-alt__kanal { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.elg-alt__kanal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  color: var(--elg-kahve-100);
}
.elg-alt__kanal a:hover { color: #ffffff; }
.elg-alt__kanal svg { stroke: currentColor; }

.elg-alt__listeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 24px;
}

.elg-alt__baslik {
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #ffffff;
}

.elg-alt__bag {
  /* display:flex (inline-flex DEĞİL): "Blog" gibi kısa bir bağlantı metni
     30-40px genişlikte kalır; satırı doldurunca dokunma hedefi kolon
     genişliğine çıkar (aynı ölçüm tunga.css'te de yapılmıştı). */
  display: flex;
  align-items: center;
  min-height: var(--elg-dokunma);
  font-size: 13.5px;
  color: var(--elg-kahve-100);
}
.elg-alt__bag:hover { color: #ffffff; }

.elg-alt__dip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 18px;
  border-top: 1px solid var(--elg-kahve-700);
  font-size: 12.5px;
  color: var(--elg-kahve-200);
}

/* ==========================================================================
   SAYFA YOLU (kırıntı)
   ========================================================================== */

.elg-iz,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  padding-block: 10px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* min-width de 44px: kısa bir kırıntı ("Ofis") 30px genişlikte kalıyordu. */
.elg-iz a,
.elg-iz > span,
.breadcrumb a,
.breadcrumb > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
}
.elg-iz a:hover,
.breadcrumb a:hover { color: var(--accent); }
.elg-iz [aria-current="page"],
.breadcrumb [aria-current="page"] { color: var(--title); }

/* Ayraç bir SÜStür, dokunma hedefi değil: 44px genişlik kuralından çıkarılır.
   Özgüllük `.elg-iz > span` (0,1,1) ile EŞİT olmak zorunda, aksi hâlde taban
   kural ayracı da 44px yapar ve kırıntı satırı gereksiz yayılır. */
.elg-iz > .elg-iz__ayrac { min-width: 0; }
.elg-iz__ayrac::before { content: "\2022"; }

/* ==========================================================================
   LİSTE / KATEGORİ SAYFASI — SÜZGEÇ SAĞDA (Parti A'da yok)
   --------------------------------------------------------------------------
   tunga solda 264px'lik kolon, vast listenin ÜSTÜNDE yatay şerit, quick tek
   büyük <details> paneli, seasy iki yatay şerit kullanıyor. Bu tema SAĞ
   kolonda dar bir dikey süzgeç kullanır; ürün ızgarası solda kalır.
   DOM sırası süzgeç → liste (klavye sırası mantıklı, mobilde süzgeç listenin
   üstünde); 901px'ten itibaren ızgara yerleşimi süzgeci SAĞA taşır.
   ========================================================================== */

.elg-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: 48px;
}

.elg-liste__bas { margin-bottom: 28px; text-align: center; }
.elg-liste__ad {
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 200;
  letter-spacing: 0.12em;
  color: var(--title);
}
.elg-liste__ad::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--elg-taba-600);
}
.elg-liste__not {
  max-width: 58ch;
  margin: 14px auto 0;
  font-size: 14px;
  color: var(--muted);
}

.elg-suzgec { display: block; }

/* Kutu iki biçimde geliyor: uzun listeler `<details>`, kısa gruplar
   `<fieldset>`. Yerel fieldset çerçevesi ve dolgusu SIFIRLANIR; ayırıcı yalnızca
   alt çizgidir. */
.elg-suzgec__kutu {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--elg-cizgi);
}
.elg-suzgec__kutu > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--title);
  cursor: pointer;
}
/* <legend>: <summary> ile AYNI görünür, ama tıklanabilir değil (grup zaten
   açık). Bu yüzden 44px dokunma hedefi kuralı buraya UYGULANMAZ; ölçü yalnızca
   satır yüksekliğidir. */
.elg-suzgec__ad {
  display: block;
  width: 100%;
  padding: 15px 0 9px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--title);
}
.elg-suzgec__govde { padding-bottom: 16px; }

.elg-suzgec__liste { display: flex; flex-direction: column; }
.elg-suzgec__liste a {
  display: flex;
  align-items: center;
  min-height: var(--elg-dokunma);
  font-size: 14px;
  color: var(--text);
}
.elg-suzgec__liste a:hover { color: var(--accent); }
.elg-suzgec__liste a[aria-current="page"] { color: var(--elg-taba-700); }
.elg-suzgec__liste a.elg-alt-kat { padding-left: 14px; font-size: 13px; }

.elg-suzgec__eylem { display: grid; gap: 8px; padding-block: 18px; }

.elg-liste-sayi {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-align: center;
}
.elg-liste-sayi strong { font-weight: 400; color: var(--title); }

.elg-bos {
  padding: clamp(40px, 6vw, 72px) 20px;
  border: 1px dashed var(--control-border);
  text-align: center;
}
.elg-bos h2 { margin-bottom: 10px; font-size: 19px; font-weight: 300; letter-spacing: 0.08em; }
.elg-bos p { margin-bottom: 22px; color: var(--muted); }

/* ==========================================================================
   ÜRÜN SAYFASI — TEK KOLON, MERKEZE HİZALI, YUKARIDAN AŞAĞI AKAN
   --------------------------------------------------------------------------
   Parti A'nın hiçbirinde yok: vast iki kolon (fotoğraf yığını + yapışkan
   kolon), tunga iki kolon (galeri + bilgi), quick ve seasy de çoklu kolon.
   YAPIŞKAN SATIN ALMA KUTUSU YOK.
   Sıra: üç fotoğraf yan yana → ortalanmış ad ve fiyat → ortalanmış varyant ve
   adet → ortalanmış taba sepete ekle → dar (680px) açıklama → özellik
   listesi → benzer ürünler.
   ========================================================================== */

.elg-urun-sayfa { padding-bottom: 40px; }

/* Üç fotoğraf yan yana, ortalanmış. Mobil öncelikli: tek kolon. */
.elg-foto-sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--elg-bosluk);
  margin-bottom: clamp(28px, 4vw, 52px);
}

.elg-foto-sira figure { margin: 0; background: var(--card-bg); }
.elg-foto-sira img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(14px, 2vw, 26px);
}
.elg-foto-sira__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  color: var(--elg-kahve-400);
  font-family: var(--font-heading);
  font-size: clamp(30px, 6vw, 56px);
  font-weight: 200;
}

.elg-tepe { max-width: 720px; margin-inline: auto; text-align: center; }

/* min-width DE 44px — ÖLÇÜLEREK EKLENDİ: kısa bir marka adı ("VEGA") 35,9x44
   px çıkıyordu; yükseklik geçiyor, GENİŞLİK geçmiyordu. */
.elg-tepe__marka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--muted);
}
.elg-tepe__marka:hover { color: var(--accent); }

.elg-tepe__ad {
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 200;
  letter-spacing: 0.06em;
  color: var(--title);
}

.elg-tepe__ozet { max-width: 56ch; margin: 16px auto 0; font-size: 15px; color: var(--text); }

.elg-tepe__kod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}

.elg-fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  font-family: var(--font-heading);
}
.elg-fiyat__tutar { font-size: clamp(24px, 3.4vw, 32px); font-weight: 300; color: var(--title); }
.elg-fiyat del { font-size: 16px; }
.elg-fiyat__kdv { flex: 1 0 100%; font-size: 12.5px; color: var(--muted); }

.elg-not { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* Ortalanmış varyant seçimi */
.elg-secim { margin: 26px 0 0; padding: 0; border: 0; text-align: center; }
.elg-secim__ad {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.elg-secim__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.elg-secim__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}
.elg-secim__oge:hover { border-color: var(--accent); }
.elg-secim__oge input { accent-color: var(--accent); }
.elg-boya { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--border-strong); }

.elg-stok { margin-top: 20px; font-size: 13.5px; }

/* Ortalanmış adet + taba sepete ekle */
.elg-adet-sira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.elg-adet {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--elg-kagit-000);
}
.elg-adet button {
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  border: 0;
  background: none;
  color: var(--title);
  font-size: 17px;
  cursor: pointer;
}
.elg-adet button:hover { background: var(--surface); }
.elg-adet button:disabled { color: var(--muted); cursor: not-allowed; }
.elg-adet input {
  width: 62px;
  min-height: var(--elg-dokunma);
  border: 0;
  border-inline: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  color: var(--title);
}

.elg-ikincil-sira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 22px;
}

/* Dar açıklama sütunu — merkeze hizalı KAP, metin SOLA yatık.
   Uzun metni ortalamak okumayı zorlaştırır (her satır başka yerden başlar);
   ortalanan şey kabın kendisi, metin değil. */
.elg-yazi {
  max-width: var(--elg-dar);
  margin-inline: auto;
  font-size: 15.5px;
  line-height: 1.85;
  text-align: left;
}
.elg-yazi h2, .elg-yazi h3, .elg-yazi h4 { margin: 26px 0 10px; font-size: 17px; letter-spacing: 0.08em; }
.elg-yazi p { margin-bottom: 14px; }
.elg-yazi ul, .elg-yazi ol { margin: 0 0 14px 20px; list-style: disc; }
.elg-yazi ol { list-style: decimal; }
/*
 | CÜMLE İÇİNDEKİ BAĞLANTIYA 44px YÜKSEKLİK VERİLMEZ — ONAYLI İSTİSNA.
 | Ölçüldü (headless Chrome, dokuz genişlik): teslimat metnindeki "iade
 | koşulları" 83x23 px, "kargo ve teslimat" 105,7x23 px. WCAG 2.5.5 hedef
 | boyutunun "Inline" istisnası tam bunu kapsıyor: bir cümlenin ya da metin
 | bloğunun İÇİNDEKİ bağlantı eşikten muaftır. Zorla 44px yükseklik vermek
 | satır kutularını şişirir, paragrafın satır aralığını bozar ve okunurluğu
 | düşürür — yani erişilebilirliği artırmaz, azaltır. (Bağımsız duran
 | bağlantılar için istisna GEÇMEZ; onlar `.panel .stack a[href^="tel:"]`
 | kuralında 44px'e çıkarıldı.)
 */
.elg-yazi a { color: var(--accent); text-decoration: underline; }
.elg-yazi > :last-child { margin-bottom: 0; }

/* Özellik / döküm listesi */
.elg-dokum {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--elg-dar);
  margin: 0 auto;
  gap: 0;
}
.elg-dokum > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-block: 11px;
  border-bottom: 1px dotted var(--border);
  font-size: 14px;
}
.elg-dokum dt { min-width: 140px; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); }
.elg-dokum dd { margin: 0; color: var(--title); }

.elg-madde { max-width: var(--elg-dar); margin: 20px auto 0; padding-left: 20px; list-style: disc; font-size: 14.5px; }
.elg-madde li { padding-block: 3px; }

/* Değerlendirmeler */
.elg-yorum { padding-block: 18px; border-bottom: 1px dotted var(--border); text-align: left; }
.elg-yorum__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
.elg-yorum__kisi { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.1em; color: var(--title); }

.elg-alan { display: block; margin-bottom: 16px; text-align: left; }
.elg-alan > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.elg-ikili-alan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* ==================== FORM ALANLARI ==================== */

/*
 | ÖZGÜLLÜĞÜ SIFIR OLAN TABAN: `:where()` içindeki seçiciler özgüllüğe KATKI
 | YAPMAZ. Bilerek böyle: `input[type='number']` biçiminde yazılsa (0,1,1)
 | temanın KENDİ sınıflarını (`.elg-adet input`, `.elg-arama__alan`) EZER ve
 | adet kutusu %100 genişliğe atlar. `:where()` ile her sınıf kuralı bu tabanı
 | yener, çekirdek görünümlerdeki çıplak alanlar ise yine doğru biçimlenir.
 |
 | 16px ALTINA DÜŞÜLMEZ: iOS Safari 16px altındaki alana odaklanınca sayfayı
 | ZORLA yakınlaştırır ve kullanıcı bir daha uzaklaştıramaz.
 */
:where(input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden'])),
:where(select),
:where(textarea),
.field input,
.field select,
.field textarea,
.elg-alan input,
.elg-alan select,
.elg-alan textarea,
.coupon input,
.filters input {
  width: 100%;
  min-height: var(--elg-dokunma);
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--elg-kagit-000);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
}
:where(textarea) { min-height: 104px; }
:where(select) { cursor: pointer; }

:where(input:not([type='checkbox']):not([type='radio'])):hover,
:where(select):hover,
:where(textarea):hover { border-color: var(--control-border-strong); }

/* Onay kutusu ve radyo yukarıdaki genişlik kuralına GİRMEZ. Yerel çizim
   KORUNUR (appearance:none ile yeniden çizmek yüksek kontrast kipini bozar);
   dokunma hedefi saran etikettir. */
:where(input[type='checkbox']),
:where(input[type='radio']) {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

.field { display: block; margin-bottom: 16px; }
.field > label,
.field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.field-error { display: block; margin-top: 5px; font-size: 13px; color: var(--danger); }
.hint { font-weight: 300; color: var(--muted); }

.field-row,
.addr-grid,
.contact-grid,
.elg-ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}

.check,
.elg-onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--elg-dokunma);
  margin-bottom: 6px;
  padding-block: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}
.check input,
.elg-onay input { flex: 0 0 18px; margin-top: 5px; }

.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--elg-dokunma);
  padding: 12px 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-size: 14.5px;
  cursor: pointer;
}
.radio-card__price { margin-left: auto; color: var(--title); }

/* Çekirdek ürün sayfası adet kutusu (ezilmeyen sayfalarda geçer) */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--elg-kagit-000);
}
.qty button {
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  border: 0;
  background: none;
  color: var(--title);
  cursor: pointer;
}
.qty input {
  width: 62px;
  min-height: var(--elg-dokunma);
  border: 0;
  border-inline: 1px solid var(--border);
  background: none;
  font-size: 16px;
  text-align: center;
}
.qtyrow { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 20px; }
.qty-not { font-size: 13px; color: var(--muted); }

/* Çekirdek varyant seçimi */
.optgroup { margin-block: 18px; }
.optgroup__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted); }
.optlist { display: flex; flex-wrap: wrap; gap: 8px; }
.optlist label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}
.swatch { width: 16px; height: 16px; border: 1px solid var(--border-strong); }

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK KATMANI — ELEGANT DİLİNDE
   --------------------------------------------------------------------------
   NİÇİN GEREKLİ: bu tema yedi görünümü eziyor, ama vitrinin geri kalanı
   (sepet, ödeme, hesabım, blog, iletişim, sözleşme sayfaları, kampanya
   listesi, koleksiyon, karşılaştırma rehberleri, bayi, abonelik, tema
   mağazası, üyelik formları) ÇEKİRDEK görünümlerdir ve çekirdek sınıf
   sözlüğünü kullanır. `css/shop.css` yüklenmediği için o sayfalar STİLSİZ
   kalırdı: kapsayıcı genişliği kaybolur, kart çerçevesi gitmez, form satırı
   tek kolona yığılır, tablo hizasız kalır. Sessiz bir gerileme olurdu —
   hata yok, log yok.

   Aşağıdaki bölüm çekirdeğin PAYLAŞILAN bileşen sözlüğünü ELEGANT'ın dilinde
   yeniden çiziyor: keskin köşe, gölgesiz yüzey, saç teli çizgi, geniş harf
   aralığı, taba tek aksiyon. Çekirdek dosyadan KOPYALANMADI; aynı GÖREVİ
   farklı biçimde yapıyor.

   Modüllerin kendi sınıfları (krs-, dij-, elk-, oto-, ky-, abn-, bayi-,
   blog-, kol-, tm-, vl-, yapi-, teslimat, hediye, kombin, tazelik, birim-)
   kendi yaprak CSS dosyalarından gelir ve yukarıdaki :root belirteçlerini
   okur; onları yeniden tanımlamak GEREKMEZ ve tanımlamak yanlış olurdu.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--elg-kenar), env(safe-area-inset-left, 0px))
                  max(var(--elg-kenar), env(safe-area-inset-right, 0px));
}

.section { padding-block: clamp(32px, 4vw, 64px); }
.section--surface { background: var(--surface); }

.section-head {
  margin-bottom: 26px;
  padding-bottom: 0;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 300;
  letter-spacing: 0.16em;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin: 14px auto 0;
  background: var(--elg-taba-600);
}
.section-head p { margin-top: 12px; font-size: 14px; color: var(--muted); }
.eyebrow { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: 0.24em; color: var(--muted); }

.panel {
  margin-bottom: 20px;
  padding: 22px;
  border: var(--elg-cizgi);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.panel h2, .panel h3 { font-size: 16px; font-weight: 300; letter-spacing: 0.12em; }
.panel__desc { margin: 8px 0 18px; font-size: 13.5px; color: var(--muted); }
.panel--sss { margin: 0 0 8px; padding: 4px 20px; }

/* <summary> bir dokunma hedefidir; yerel açılır üçgen KORUNUR (klavye ve
   ekran okuyucu davranışı yerelden gelir, kendi okumuzu çizmiyoruz). */
details.panel > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--title);
  cursor: pointer;
}

/*
 | ÇEKİRDEK /iletisim SAYFASINDAKİ tel: / mailto: BAĞLANTILARI — ÖLÇÜLEREK
 | EKLENDİ. O görünüm (resources/views/shop/pages/contact.blade.php) bu kolun
 | dosyası DEĞİL ve değiştirilmedi; sorun yalnızca stille çözüldü.
 | Ölçüldü (headless Chrome, dokuz genişlikte): telefon bağlantısı 115,5x23 px,
 | e-posta 123,4x23 px. Bunlar bir cümlenin içindeki satır içi bağlantı DEĞİL
 | (WCAG 2.5.5 "Inline" istisnası GEÇMEZ): "Telefon" başlığının altında duran
 | BAĞIMSIZ denetimler. Satırı doldurunca hedef yükseklik 44px'e çıkar.
 */
.panel .stack a[href^="tel:"],
.panel .stack a[href^="mailto:"] {
  display: flex;
  align-items: center;
  min-height: var(--elg-dokunma);
}

.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.statcard { padding: 18px; border: var(--elg-cizgi); background: var(--card-bg); }
.success-box { padding: 26px; border: 1px solid var(--primary-line); background: var(--surface); }

.empty {
  padding: clamp(40px, 6vw, 72px) 20px;
  border: 1px dashed var(--control-border);
  background: transparent;
  text-align: center;
}
.empty h3 { margin-bottom: 10px; font-size: 19px; font-weight: 300; letter-spacing: 0.08em; }

/* Çekirdek ürün ızgaraları — ELEGANT bol boşluklu ve en çok ÜÇ kolon. */
.pgrid,
.catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 40px) var(--elg-bosluk);
}
.pgrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.pgrid--4,
.pgrid--5 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.listlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.filters__group { padding-block: 14px; border-bottom: var(--elg-cizgi); }
.filters__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 10.5px; letter-spacing: 0.2em; color: var(--muted); }
.filters__list { display: flex; flex-direction: column; }
.filters__list a { display: flex; align-items: center; min-height: var(--elg-dokunma); font-size: 14px; color: var(--text); }
.filters__list a.is-active { color: var(--elg-taba-700); }
.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 16px;
  border-bottom: var(--elg-cizgi);
}

/* Çekirdek ürün sayfası artıkları (ezilmeyen sayfalarda geçebilir) */
.pdetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pcard { position: relative; }
.pcard__brand { display: inline-block; font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
.pcard__name { display: block; font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.12em; color: var(--title); }
.pcard__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--font-heading); }
.pinfo__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--muted); }
.pinfo__tax { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.reviews-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pfeatures { margin-block: 20px; }
.pfeatures li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  border-bottom: 1px dotted var(--border);
  font-size: 14px;
}
.gallery__main { background: var(--card-bg); }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gallery__thumb {
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
}
.gallery__thumb.is-active { border-color: var(--accent); }

.tabs__nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--elg-cizgi); }
.tabs__btn {
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  cursor: pointer;
}
.tabs__btn.is-active { border-bottom-color: var(--accent); color: var(--title); }
.tabs__panel { display: none; padding-block: 22px; }
.tabs__panel.is-active { display: block; }

/* Sepet / ödeme / hesap */
.cartlayout,
.checkout,
.acclayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px; }

.cartlist { display: flex; flex-direction: column; }
.cartitem {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px;
  border-bottom: var(--elg-cizgi);
}
.cartitem__img { width: 88px; height: 88px; object-fit: contain; background: var(--card-bg); }
.cartitem__name { font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.08em; color: var(--title); }
.cartitem__meta { font-size: 12.5px; color: var(--muted); }
.cartitem__total { font-family: var(--font-heading); color: var(--title); }

.coupon { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }

.summary { padding: 22px; border: var(--elg-cizgi); background: var(--card-bg); }
.summary__row { display: flex; justify-content: space-between; gap: 14px; padding-block: 8px; font-size: 14px; }
.summary__row--total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: var(--elg-cizgi);
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--title);
}
.summary__note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

.accnav { display: flex; flex-wrap: wrap; gap: 2px; }
.accnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--elg-dokunma);
  padding: 0 14px;
  border: var(--elg-cizgi);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.accnav a.is-active { border-color: var(--accent); color: var(--title); }

/* Ödeme adımı göstergesi — ince çerçeveli kare numaralar. */
.steps { display: flex; flex-wrap: wrap; gap: 18px; padding-block: 18px; }
.steps__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--control-border);
  font-size: 11px;
}
.steps__item.is-active { color: var(--title); }
.steps__item.is-active .steps__no { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Sayfalama — küçük numaralar, çerçeve yok, geçerli sayfa altı çizgili. */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding-block: 36px; }
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elg-dokunma);
  min-height: var(--elg-dokunma);
  padding: 0 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text);
}
.pagination a:hover { text-decoration: none; color: var(--accent); }
.pagination .is-current { color: var(--title); border-bottom: 1px solid var(--accent); }
.pagination .is-disabled { color: var(--control-border); }

/* Tablolar: KABI kaydırılır, tabloya display:block VERİLMEZ (satır-sütun
   ilişkisi erişilebilirlik ağacında kalır ve ekran okuyucu "sütun 3: Tutar"
   diyebilir). */
.table-scroll,
.krs-tablo-kap,
.responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 12px; border-bottom: var(--elg-cizgi); text-align: left; }
th { font-family: var(--font-heading); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; color: var(--title); }
thead th { border-bottom: 1px solid var(--control-border); }

.datatable,
.kargo-tablo { min-width: 100%; border-collapse: collapse; }
.datatable tbody tr:hover,
.kargo-tablo tbody tr:hover { background: var(--surface); }

/* Uzun metin sayfaları (sözleşme, gizlilik, hakkımızda, blog yazısı) */
.prose { font-size: 15.5px; line-height: 1.85; }
.prose h2 { margin: 30px 0 10px; font-size: 20px; font-weight: 300; letter-spacing: 0.08em; }
.prose h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 300; letter-spacing: 0.08em; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 14px 20px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--accent); text-decoration: underline; }
.prose > :last-child { margin-bottom: 0; }

.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; }

/* Birim fiyat satırı: YAPISI shop-birim.css'ten gelir, buradaki yalnızca
   temanın tipografisine bağlama. YAPI BOZULMAZ — public/js/shop.js
   [data-unit-price] düğümünü, .birim-fiyat atasını ve .birim-fiyat__paket
   düğümünü ARIYOR; yapı bozulursa varyant seçildiğinde ekranda YANLIŞ birim
   fiyat kalır. */
.birim-fiyat { font-family: var(--font-heading); letter-spacing: 0.06em; }

/* ==================== ANA ALAN ==================== */

main { display: block; min-height: 40vh; }

/* ==================== TEMA ÖNİZLEME ŞERİDİ (panel personeli) ==================== */

.tema-onizleme {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  /* Çentikli cihazda alt tutamak düğmeyi ÖRTMESİN. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--primary-strong);
  color: #ffffff;
  font-size: 14px;
}
.tema-onizleme__ayrinti { color: var(--elg-kahve-200); }
.tema-onizleme__eylemler { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--elg-dokunma);
  padding: 0 16px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.tema-onizleme__btn--birincil { background: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   DUYARLILIK — MOBİL ÖNCELİKLİ
   --------------------------------------------------------------------------
   ÖLÇÜLEN GENİŞLİKLER: 320 · 360 · 390 · 414 · 768 · 1024 · 1280 · 1440 · 1920
   KULLANILAN KIRILMA NOKTALARI (yalnızca depo genelinde ONAYLI değerler —
   tests/Feature/DuyarlilikTest::KIRILMA_NOKTALARI): 560 · 641 · 900 · 901 ·
   1100 ve yükseklik 480.
   Yeni bir nokta EKLENMEDİ: dağınık kırılma noktaları "1024'te düzeldi ama
   1040'ta bozuk" gibi izi sürülemez hatalar üretiyor (Parti A'da vast
   768/1024/1440 kullanıp kapıya takıldı).
   ========================================================================== */

@media (min-width: 560px) {
  .elg-foto-sira { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elg-ikili-alan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 641px) {
  /* ÜÇLÜ MOZAİK: üç dikey fotoğraf yan yana, FARKLI yüksekliklerde.
     Asimetri satır aralığı ile kurulur (mutlak konum yok). */
  .elg-uclu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 32px);
  }
  .elg-uclu > :nth-child(1) { margin-block-start: 0; }
  .elg-uclu > :nth-child(2) { margin-block-start: clamp(24px, 4vw, 64px); }
  .elg-uclu > :nth-child(3) { margin-block-start: clamp(10px, 2vw, 28px); }

  .elg-alt__sira { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

  .elg-dokum > div { flex-wrap: nowrap; }
}

@media (min-width: 901px) {
  /* Başlığın üç bölgesi açılır: solda ilk üç madde, ortada marka, sağda kalan
     maddeler + iki ikon. Çekmece düğmesi gizlenir. */
  .elg-burger { display: none; }
  .elg-bas__sira { gap: 24px; padding-block: 24px; }

  /* ASİMETRİ: solda 2/3 fotoğraf, sağda 1/3 iki kutu. */
  .elg-vitrin { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

  /* ÜÇ KOLON ÜRÜN IZGARASI */
  .elg-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px) clamp(18px, 2vw, 34px); }

  /* SÜZGEÇ SAĞA GEÇER: DOM sırası süzgeç → liste, görsel sıra liste →
     süzgeç. Izgara yerleşimi açıkça verilir. */
  .elg-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 248px); }
  .elg-liste__ana { grid-column: 1; grid-row: 1; }
  .elg-liste__suzgec { grid-column: 2; grid-row: 1; }

  .cartlayout,
  .checkout { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .acclayout { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .listlayout { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .listlayout--tek { grid-template-columns: minmax(0, 1fr); }
  .pdetail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .reviews-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .accnav { flex-direction: column; }
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; }
}

@media (min-width: 1100px) {
  .elg-vitrin { gap: clamp(18px, 2vw, 28px); }
  .elg-izgara { gap: 64px clamp(24px, 2.4vw, 40px); }
}

/*
 | 900px VE ALTI: başlıkta menü listeleri gizlenir, çekmece devralır.
 | Anahtar 900/901 çiftindedir çünkü onaylı listede 1039/1041 YOKTUR ve
 | `max-width: 1040` ile `min-width: 1040` tam 1040'ta ÇAKIŞIR (menü hem gizli
 | hem gerekli olurdu).
 |
 | MARKA ORTADA KALIR: solda çekmece düğmesi, ortada kelime markası, sağda iki
 | ikon. Yani temanın kimliği (ortalanmış ince marka) dar ekranda da bozulmaz.
 */
@media (max-width: 900px) {
  .elg-menu { display: none; }
  .elg-bas__sira { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); }
}

/*
 | 560px VE ALTI: başlıktaki ARAMA ikonu gizlenir ve aramanın TEK yolu
 | çekmecenin en üstündeki formdur (orada kaldırılamaz). Gerekçe ölçümdür: üç
 | ikon + marka 320px'te markaya 128px bırakıyor ve geniş harf aralıklı kelime
 | markası kırpılıyordu.
 */
@media (max-width: 560px) {
  .elg-ara { display: none; }
  .elg-marka__alt { display: none; }
  .elg-izgara { gap: 22px 12px; }
}

/* Kısa / yatay ekranda başlık incelir. */
@media (max-height: 480px) {
  .elg-bas__sira { padding-block: 10px; }
  .elg-marka__alt { display: none; }
}

/* ==========================================================================
   HAREKETİ AZALT — WCAG 2.3.3 (ZORUNLU BLOK)
   --------------------------------------------------------------------------
   Bu temada yalnızca renk geçişleri canlandırılıyor (transform ya da
   @keyframes YOK) ama blok yine de şart: yaprak CSS dosyaları ve modül
   stilleri bu sayfalarda da yükleniyor ve onlar hareket üretebiliyor.

   TOPLU GEÇİŞ KISAYOLU HİÇBİR YERDE KULLANILMADI; her geçiş
   `transition-property` ile tek tek yazıldı. Hangi özelliğin canlandığı
   belirsiz kalırsa yerleşim tetikleyen bir özellik sessizce animasyona girer
   (Parti A'da üç tema bu kapıya takıldı).

   YASAK BİLDİRİMİN ADI BURADA DÜZ YAZILMAZ — ÖLÇÜLDÜ: bu açıklama önce
   "transition + iki nokta + all" biçiminde yazılıydı ve
   tests/Feature/DuyarlilikTest::test_animasyonlar_yalnizca_transform_ve_
   opacity_kullaniyor DÜŞTÜ. O denetim dosyanın HAM metnini tarıyor, yorumları
   sökmüyor; yani kuralı ANLATAN yorum kuralı İHLAL EDİYORMUŞ gibi görünüyor.
   Kapıyı gevşetmek yerine yorum yeniden yazıldı: sürekli kırmızı bir kapı
   kapı değildir, ama kapıyı yanlış alarmla kırmızıya boyamak da onu
   değersizleştirir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BASKI — kırtasiye katalogu kâğıda da düzgün çıkar
   ========================================================================== */

@media print {
  .elg-bas,
  .elg-alt,
  .pagination,
  .tema-onizleme { display: none; }

  body { background: #ffffff; }
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUKLAR
   --------------------------------------------------------------------------
   Bu tema `css/shop.css` YÜKLEMEZ. 1280px gerçek tarayıcıda CSSOM ile ölçüldü
   (sepet DOLU hâlde — boş sepette bu sınıf hiç basılmıyor):
     .cartitem__right      tema: block 88x71  çekirdek: grid 94x107 (kural 1)
     .tema-onizleme__metin tema: kural 0      çekirdek: min-width 0
   ========================================================================== */

.cartitem__right {
  display: grid;
  align-content: start;
  gap: 8px;
  text-align: right;
}

/* 640 ONAYLI kırılma noktası. */
@media (max-width: 640px) {
  .cartitem__right {
    grid-column: 1 / -1;
    text-align: left;
  }
}

.tema-onizleme__metin {
  min-width: 0;
}

/* ==========================================================================
   .statcards--3 — ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   `/hesabim` panosu üç sayaç kartı bastığında `.statcards--3` ile üç kolona
   iner; bu temada kural yoktu ve kartlar dört kolonluk ızgarada kalıyordu
   (in-process müşteri oturumuyla ölçüldü). 901 ve 640 onaylı noktalardır.
   ========================================================================== */

.statcards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 901px) {
  .statcards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .statcards--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   GENİŞLETME NOKTASI MODÜLLERİNİN ELEGANT'A ÇEVİRİSİ
   --------------------------------------------------------------------------
   Ürün sayfasına ve alt bilgiye dört modül bağlanıyor:
     shop.partials.bulten        → alt bilgi, çift opt-in bülten
     shop.partials.stok-bildirim → ürün sayfası, "gelince haber ver"
     shop.partials.dealer-price  → ürün sayfası, B2B bayi fiyat şeridi
     shop.partials.exit-offer    → kabuk sonu, çıkış teklifi katmanı

   ÜÇÜ İÇİN KURAL YAZILMADI, BİRİ İÇİN YAZILDI — ÖLÇÜMLE:
   Modül stilleri (shop-stok-bildirim.css, shop-bayi.css, shop-sepet-zekasi.css)
   sabit renk kullanmıyor, hepsi `var(--…)` okuyor; bu tema o belirteçlerin
   TAMAMINI tanımlıyor, dolayısıyla stok formu, bayi şeridi ve çıkış teklifi
   kutusu kendiliğinden elegant'ın paletiyle çiziliyor. Kardeş temalar
   (teknomart, comforte, meniac) da onlar için tek satır yazmıyor.

   BÜLTEN AYRI: bu temada alt bilgi KOYU KAHVE (#4a3624). Modül CSS'i
   alt bilgiyi açık zeminli varsayıyor ve üç yerde kırılıyor (hesaplandı,
   WCAG 2.1 bağıl parlaklık):
     .bulten__aciklama  → var(--muted) #6e5e52 · koyu kahve üstünde 1,60:1
     .bulten__form input → zemin var(--surface) #efe8dc + `color: inherit`
                           (#e8ded0) · yani açık zeminde AÇIK metin, 1,15:1
     .bulten__hata      → var(--primary-strong) #3a2a1b · 1,25:1
   Düzeltilmiş değerler aşağıda her kuralın yanında yazılı.
   ========================================================================== */

/* Bant koyu alt bilginin İLK şeridi: üstten çizgi yerine ALTTAN ayrılır,
   çünkü üstünde başka bir yüzey değil sayfanın kendisi var. */
.elg-alt .bulten {
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 0;
  border-bottom: 1px solid var(--elg-kahve-700);
}

/* İç kap alt bilginin kolonlarıyla AYNI hizada dursun: modül 1200px + 16px
   kullanıyor, bu temanın kabı 1320px + --elg-kenar. */
.elg-alt .bulten__ic {
  max-width: var(--container);
  padding-inline: max(var(--elg-kenar), env(safe-area-inset-left, 0px))
                  max(var(--elg-kenar), env(safe-area-inset-right, 0px));
  gap: 20px clamp(20px, 4vw, 56px);
}

/* Alt bilgi başlıklarının diliyle aynı: ince, çok geniş harf aralıklı. */
/*
 | BÜYÜK HARFE ÇEVİRME YOK — bu dosyanın başındaki kuralın aynısı:
 | CSS `text-transform: uppercase` Türkçe'de 'i' harfini 'I' yapar
 | ("gelince" → "GELINCE", "Bayi" → "BAYI"). Bu üç başlığın metni ÇEKİRDEK
 | modül parçalarından geliyor, yani sunucuda App\Support\Metin::buyuk()
 | ile üretilemiyor. Bu yüzden temanın "ince + geniş harf aralıklı" dili
 | küçük harfle kuruldu; büyük harf hiç kullanılmadı.
 */
.elg-alt .bulten__baslik {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: #ffffff;                 /* koyu kahve üstünde 11,39:1 */
}

.elg-alt .bulten__aciklama {
  max-width: 46ch;
  font-size: 13px;
  color: var(--elg-kahve-200);    /* #c9b8a4 · koyu kahve üstünde 5,90:1 */
}

.elg-alt .bulten__aciklama strong {
  font-weight: 400;
  color: var(--elg-kahve-100);    /* #e8ded0 · 8,57:1 */
}

/* Alan KÂĞIT zeminli: koyu bantta tek açık yüzey odağı oraya çeker.
   Yazı rengi AÇIKÇA verilir — modülün `color: inherit` bildirimi burada
   alt bilginin açık metnini miras alıyordu. */
.elg-alt .bulten__form input[type="email"] {
  min-height: var(--elg-dokunma);
  border: 1px solid var(--elg-kagit-500);
  border-radius: var(--radius);
  background: var(--elg-kagit-000); /* #fdfbf7 */
  color: var(--title);              /* #33261a · kâğıt üstünde 14,17:1 */
  font-family: var(--font-body);
  font-size: 16px;                  /* iOS Safari 16px altında ZORLA yakınlaştırır */
}

.elg-alt .bulten__form input[type="email"]::placeholder {
  color: var(--muted);              /* #6e5e52 · kâğıt üstünde 6,00:1 */
}

/*
 | DÜĞME TERSİNE ÇEVRİLDİ — WCAG 1.4.11 ÖLÇÜMÜ:
 | Temanın birincil düğmesi taba (#8b5c2a). Koyu kahve alt bilgi üstünde o
 | düğmenin SINIRI 1,99:1 kalıyor, yani denetimin nerede başladığı 3:1
 | eşiğinin altında. Kâğıt zeminli ters düğme aynı yerde 11,01:1 veriyor;
 | üstündeki kahve yazı da kâğıt üstünde 11,01:1.
 */
.elg-alt .bulten__form .btn {
  border-color: var(--elg-kagit-000);
  background: var(--elg-kagit-000);
  color: var(--primary);
}

.elg-alt .bulten__form .btn:hover {
  border-color: var(--elg-kagit-300);
  background: var(--elg-kagit-300); /* #efe8dc · alt bilgiye karşı 9,35:1 */
  color: var(--primary-strong);
}

.elg-alt .bulten__hata {
  max-width: var(--container);
  padding-inline: max(var(--elg-kenar), env(safe-area-inset-left, 0px))
                  max(var(--elg-kenar), env(safe-area-inset-right, 0px));
  color: #f0b4ab;                   /* koyu kahve üstünde 6,41:1 */
}

/* 640 ONAYLI kırılma noktası (modül CSS'i de aynı noktada formu tam
   genişliğe alıyor); burada yalnızca kap boşluğu daraltılır. */
@media (max-width: 640px) {
  .elg-alt .bulten { padding-block: 22px; }
}

/* --------------------------------------------------------------------------
   ÜRÜN SAYFASI: iki modül TEK KOLONLU, MERKEZE HİZALI tepeye giriyor
   --------------------------------------------------------------------------
   `.elg-tepe` 720px'lik ortalanmış bir sütun ve `text-align: center` taşıyor.
   Modüllerin kendi çizimi sola hizalı bir kutu varsayıyor; ikisi de burada
   ortalanır, ama UZUN metinler (KVKK açık rıza cümlesi, kademe listesi)
   SOLA hizalı kalır — ortalanmış çok satırlı metin satır başlarını her
   satırda kaydırır ve okuma hızını düşürür.
   -------------------------------------------------------------------------- */

.elg-tepe .bayi-panel,
.elg-tepe .stokbildirim {
  max-width: 520px;
  margin-inline: auto;
  text-align: left;
}

/* Bayi şeridi FİYATIN dibinde duruyor: çerçeveli kutu bu temanın diline
   yabancı (bu tema çerçeve değil BOŞLUK kullanıyor), o yüzden kutu
   saç teli çizgilere indirgenir. */
.elg-tepe .bayi-panel {
  margin-top: 22px;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.elg-tepe .bayi-panel__head {
  padding: 14px 0 8px;
  border-bottom: 0;
}

.elg-tepe .bayi-panel__head h2 {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.elg-tepe .bayi-panel__body { padding: 0 0 16px; }

.elg-tepe .bayi-total--big {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  font-weight: 300;
}

.elg-tepe .stokbildirim {
  margin-top: 26px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 0 0;
  background: transparent;
}

.elg-tepe .stokbildirim__baslik {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--title);
}

/*
 | Onay cümlesi uzun: ortalanmazsa okunur kalır.
 |
 | `min-height` ÖLÇÜLEREK EKLENDİ: KVKK onay kutusunun dokunma hedefi kutunun
 | KENDİSİ (18x18) değil, onu saran ETİKETTİR. Etiketin yüksekliği metnin kaç
 | satıra sardığına bağlı; gerçek tarayıcıda 768px'te 42px ölçüldü (eşik 44).
 | Kardeş temalarda da aynı ölçüm çıktı, düzeltme üçüne birden yazıldı.
 */
.elg-tepe .stokbildirim__onay {
  text-align: left;
  min-height: var(--elg-dokunma);
  align-items: center;
}


/* ==========================================================================
   REKLAM YUVASI — ELEGANT DİLİNDE
   ==========================================================================
   TABAN BU DOSYADA DEĞİL: `public/css/reklam.css` (R1 kolu) `.reklam`,
   `.reklam__etiket`, `.reklam__birim` ve `.reklam--bos` kurallarını
   tanımlar; yer ayırma (`--reklam-yer`), asgari mesafe tabanı (24px) ve
   dolmayan yuvanın çöküşü ORADADIR ve BURADA TEKRARLANMAZ. Bu bölüm
   yalnızca temanın kendi ritmini ve kendi tipografisini uygular.

   O dosya reklam basılacaksa `@stack('head')` üzerinden yükleniyor; bu
   temanın düzeni `@stack('head')` taşıdığı için taban kurallar burada da
   geçerli. (Tema `css/shop.css` yüklemez, ama `reklam.css` yaprak bir
   dosyadır ve sıfırlama içermez — iki sıfırlama üst üste binmez.)

   KART GÖRÜNÜMÜ VERİLMEZ — BİLEREK: zemin, çerçeve, gölge ve yuvarlatma
   bir arada reklamı ÜRÜN KARTINA benzetir; bu AdSense'in ayrı bir
   yasağıdır ve mağaza sahibinin hesabını kapattırır. Temalar birbirinden
   ZEMİNLE değil, BOŞLUK RİTMİ · AYIRICI ÇİZGİ · ETİKET TİPOGRAFİSİ ve
   ÖLÇÜ ile ayrışır.

   SABİT GENİŞLİK YOK: yalnızca `max-width` kullanılır. Duyarlılık kapısı
   9 genişlikte (320·360·390·414·768·1024·1280·1440·1920) yatay kaydırmayı
   SIFIR ölçüyor; sabit bir genişlik ya da `min-width: <px>` o kapıyı
   düşürürdü.

   GEÇİŞ KISAYOLU `all` DEĞERİYLE YAZILMAZ (depo kuralı; DuyarlilikTest
   `transition` bildirimini `all` ile arayıp düşürür — bu satır ilk
   yazımda kuralı ANLATIRKEN kalıbı da içerdiği için kapı 13 dosyada
   birden düştü, ÖLÇÜLDÜ). Bu bölümde hiç geçiş bildirimi yok.
   ========================================================================== */

/*
 * ELEGANT — ÇİZGİ YOK, ZEMİN YOK, YALNIZCA BOŞLUK.
 *
 * Bu temanın yazılı karakteri: "Çerçeve yok, gölge yok, rozet yok."
 * Reklam yuvası da o karaktere uyar — HİÇBİR ayırıcı çizgi kullanmaz.
 * Ayrım TAMAMEN boşlukla yapılır ve bu temanın boşluğu kardeşlerinden
 * belirgin biçimde daha geniştir (72px). Etiket sağa yaslıdır; temanın
 * bölüm başlıkları da asimetrik yerleşir.
 */
[data-tema='elegant'] .reklam {
  --reklam-bosluk: 72px;
}

[data-tema='elegant'] .reklam--kenar-cubugu {
  --reklam-bosluk: 64px;
}

[data-tema='elegant'] .reklam__etiket {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
  opacity: 1;
  text-align: right;
}

@media (max-width: 900px) {
  [data-tema='elegant'] .reklam {
    --reklam-bosluk: 48px;
  }
}