/* ==========================================================================
   TEMA: TUNGA — saat / elektronik / teknoloji
   ==========================================================================
   BU DOSYA TAM BİR STİL DOSYASIDIR, YAMA DEĞİL.

   Temanın kendi düzeni (resources/views/themes/tunga/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
   (.btn, .badge, .alert, .field, .pagination, .table-scroll …) kendi çizimi
   vardır. O sınıflar korunuyor çünkü tema, çekirdek PARÇALARI da basıyor
   (shop.partials.alerts, shop.karsilastirma.dugme, shop.elektronik.urun-kutusu,
   dijital ürünün ek hizmet formu …) ve o parçalar bu adları kullanıyor.

   KARAKTER: yoğun, ticari, sekmeli. İki katmanlı koyu başlık, geniş arama,
   5 kolonluk yoğun ürün ızgarası, köşeli kırmızı yüzde rozeti, turuncu aksiyon.

   RENK ROLLERİ SABİTTİR: zemin belirteci (--page-bg, --card-bg, --surface,
   --tng-mint) 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ü):
     #ffffff üzerine #33383f gövde metni ............ 11,81:1
     #ffffff üzerine #6b7280 ikincil metin .......... 4,83:1
     #ffffff üzerine #c2410c turuncu bağlantı/fiyat . 5,18:1
     #c2410c üzerine #ffffff turuncu düğme metni .... 5,18:1
     #9a3412 üzerine #ffffff turuncu düğme :hover ... 7,31:1
     #c8362f üzerine #ffffff kırmızı yüzde rozeti ... 5,22:1
     #1c1c22 üzerine #ffffff koyu başlık şeridi ..... 16,95:1
     #1c1c22 üzerine #a8adb8 başlıktaki ikincil ..... 7,54:1
     #d7f2ec üzerine #14161b banner başlığı ........ 15,34:1
     #d7f2ec üzerine #0f766e banner vurgusu ......... 4,64:1
     #ffffff üzerine #838b96 denetim kenarlığı ...... 3,44:1 (WCAG 1.4.11)
   Parlak turuncu (#f97316) yalnızca SÜS/ZEMİN belirtecidir; üzerine koyu metin
   gelir (#f97316 üzerine #14161b = 8,64:1). Beyaz metinle 2,86:1'de kalırdı —
   bu yüzden AKSİYON turuncusu koyulaştırıldı (#c2410c).
   ========================================================================== */

:root {
  /* --- Tipografi: TEK AİLE, sıkı geometrik sans. Serif YOK. --- */
  --font-heading: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: -0.01em;
  --heading-transform: uppercase;

  /* --- Ham palet --- */
  --tng-ink-900: #14161b;
  --tng-ink-800: #1c1c22;
  --tng-ink-700: #2b2d34;
  --tng-ink-600: #33383f;
  --tng-ink-300: #a8adb8;
  --tng-line: #e3e5ea;
  --tng-line-strong: #cfd3da;
  --tng-surface: #f4f5f7;
  --tng-orange-700: #9a3412;
  --tng-orange-600: #c2410c;
  --tng-orange-500: #f97316;
  --tng-orange-050: #fff2e8;
  --tng-red: #c8362f;
  --tng-mint: #d7f2ec;
  --tng-mint-ink: #0f766e;

  /* --- Rol belirteçleri (panelden ince ayar yapılabilenler dâhil) --- */
  --primary: #1c1c22;
  --accent: #c2410c;
  --title: #14161b;
  --text: #33383f;
  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --border: #e3e5ea;
  --radius: 4px;
  --card-radius: 6px;
  --btn-radius: 4px;
  --container: 1360px;

  --primary-strong: #0e0f13;
  --primary-hover: #2b2d34;
  --primary-focus: #4b5563;
  --primary-line: #d5d8de;
  --primary-soft: #f4f5f7;
  --on-primary: #ffffff;

  --accent-strong: #9a3412;
  --accent-light: #f97316;
  --accent-soft: #fff2e8;
  --on-accent: #ffffff;

  /*
   | SOLUK METİN KOYULAŞTIRILDI — ÖLÇÜLEREK DÜZELTİLDİ.
   |
   | #6b7280 beyaz üstünde 4,83:1 ile geçiyordu, ama bu tema soluk metni
   | çoğunlukla BEYAZ ÜSTÜNDE DEĞİL `--surface` (#f4f5f7) üstünde basıyor:
   | KDV notu, taksit tablosu başlıkları, adım şeridi numarası, üstü çizili
   | eski fiyat, "Önceki/Sonraki" ve /sepet /odeme yardımcı metinleri.
   | Hesaplanmış renklerle ölçüldü: #6b7280 / #f4f5f7 = 4,43:1 — 4,5 eşiğinin
   | ALTINDA (22 ölçümde bulgu). Kaynaktaki belirteci beyaza karşı ölçmek bu
   | hatayı gizliyordu; gerçek zemin ata zincirinden okunmalı.
   | YENİ DEĞER: #686e7a → beyazda 5,12:1 · #f4f5f7 üstünde 4,70:1.
   */
  --muted: #686e7a;
  --border-strong: #cfd3da;
  --surface: #f4f5f7;
  --white: #ffffff;

  /* Etkileşimli denetim kenarlığı — WCAG 1.4.11 gereği ≥3:1.
     Panelden AYARLANAMAZ (config/themes.php `adjustable` beyaz listesinde yok);
     beyaz zeminde 3,44:1 ölçüldü. --border ise yalnızca DEKORATİF çizgidir. */
  --control-border: #838b96;
  --control-border-strong: #5c6b80;

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

  --radius-sm: 3px;
  --radius-lg: 8px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 27, 0.07);
  --shadow: 0 6px 18px rgba(20, 22, 27, 0.1);
  --shadow-lg: 0 18px 44px rgba(20, 22, 27, 0.16);
  --card-shadow: none;
  --card-hover-shadow: 0 8px 20px rgba(20, 22, 27, 0.13);

  --btn-height: 44px;
  --btn-tracking: 0.02em;
  --btn-transform: uppercase;
  --section-space: 40px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* BELGENİN YAZI TİPİ KÖKTE BİLDİRİLİR. Tunga TEK aile kullanır (Rubik) ve bu
   bildirim `var()` ardına saklanmaz: aile adı burada AÇIKÇA yazılıdır, böylece
   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örür.
   Bileşenler --font-heading / --font-body belirteçlerini kullanır. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.55;
  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: 700;
  line-height: 1.18;
  letter-spacing: var(--heading-tracking);
}

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

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

button { font: inherit; color: inherit; }

/* Odak halkası HER YERDE görünür: klavye kullanıcısı nerede olduğunu bilmeli. */
:focus-visible {
  outline: 3px solid var(--tng-orange-600);
  outline-offset: 2px;
}

/* ==================== 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; }

.tng-kap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* Mobilde uzun süzgeç listesini atlamak için: yalnızca dar ekranda görünür. */
.tng-atla {
  display: none;
  min-height: 44px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--tng-orange-600);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height);
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-transform);
  cursor: pointer;
  background: var(--tng-ink-800);
  color: var(--on-primary);
  transition-property: background-color, border-color, color, transform;
  transition-duration: 140ms;
  transition-timing-function: var(--ease);
}

.btn:hover { text-decoration: none; background: var(--tng-ink-700); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Turuncu = AKSİYON (sepete ekle, filtrele, gönder) */
.btn--turuncu, .btn--gold { background: var(--tng-orange-600); color: #ffffff; }
.btn--turuncu:hover, .btn--gold:hover { background: var(--tng-orange-700); }

/* Koyu = ikincil aksiyon */
.btn--navy { background: var(--tng-ink-800); color: var(--on-primary); }
.btn--navy:hover { background: var(--tng-ink-700); }

.btn--outline {
  background: transparent;
  color: var(--title);
  border-color: var(--control-border);
}
.btn--outline:hover { background: var(--tng-surface); border-color: var(--control-border-strong); }

.btn--ghost {
  background: transparent;
  color: var(--tng-orange-600);
  border-color: transparent;
  text-transform: none;
}
.btn--ghost:hover { background: var(--accent-soft); }

/* Küçük değişke GÖRSEL olarak küçük ama dokunma hedefi 44px KALIR. */
.btn--sm { min-height: 44px; padding: 6px 14px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* ==================== ROZETLER ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--tng-surface);
  color: var(--title);
}

.badge--danger { background: var(--tng-red); color: #ffffff; }
.badge--gold { background: var(--tng-orange-600); color: #ffffff; }
.badge--info { background: var(--tng-ink-800); color: #ffffff; }
.badge--success { background: var(--success); color: #ffffff; }
.badge--warning { background: var(--warning); color: #ffffff; }

/* İMZA AYRINTI: KÖŞELİ kırmızı yüzde rozeti (yuvarlak DEĞİL) */
.tng-yuzde {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  padding: 5px 8px 6px;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  background: var(--tng-red);
  color: #ffffff;
}

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

.alert {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--tng-ink-800);
  border-radius: var(--radius);
  background: var(--tng-surface);
  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(--tng-orange-600); }

/* ==================== BAŞLIK — KATMAN 1 (KOYU) ==================== */

.tng-bas {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--tng-ink-800);
}

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

.tng-marka {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  justify-content: center;
  color: #ffffff;
}
.tng-marka:hover { text-decoration: none; }
.tng-marka__ad {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.tng-marka__alt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tng-ink-300);
}

/* GENİŞ ARAMA — başlığın ortasında, sağında koyu ARA düğmesi */
.tng-arama { display: flex; width: 100%; }
.tng-arama input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--control-border);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
  background: #ffffff;
}
.tng-arama input::placeholder { color: var(--muted); }
.tng-arama button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--tng-ink-900);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--tng-ink-900);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.tng-arama button:hover { background: var(--tng-orange-600); border-color: var(--tng-orange-600); }

/* SAĞDA ÜÇ DİKEY BLOK: hesap / favori / sepet */
.tng-eylemler { display: flex; align-items: stretch; gap: 4px; }

.tng-eylem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  min-height: 48px;
  padding: 4px 8px;
  border-radius: var(--radius);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.tng-eylem:hover { text-decoration: none; background: var(--tng-ink-700); }
.tng-eylem svg { stroke: currentColor; }
.tng-eylem__sayi {
  position: absolute;
  top: 0;
  right: 6px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: var(--pill);
  background: var(--tng-orange-600);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.tng-burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: 1.5px solid var(--tng-ink-700);
  border-radius: var(--radius);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

/* ==================== BAŞLIK — KATMAN 2 (BEYAZ KATEGORİ ŞERİDİ) ==================== */

.tng-katnav {
  background: #ffffff;
  border-bottom: 1px solid var(--tng-line);
  box-shadow: var(--shadow-sm);
}

.tng-katnav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.tng-katnav__oge { position: relative; }

/* İnce ayırıcı: madde aralarında bir çizgi */
.tng-katnav__oge + .tng-katnav__oge::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: var(--tng-line);
}

.tng-katnav__bag {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 46px;
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tng-ink-700);
}
.tng-katnav__bag:hover { text-decoration: none; color: var(--tng-orange-600); }
.tng-katnav__bag--vurgu { color: var(--tng-red); }

/* Açılır alt menü — hover VE klavye (:focus-within) ile açılır */
.tng-katnav__alt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--tng-line);
  border-top: 2px solid var(--tng-orange-600);
  background: #ffffff;
  box-shadow: var(--shadow);
}
.tng-katnav__oge:hover .tng-katnav__alt,
.tng-katnav__oge:focus-within .tng-katnav__alt { display: block; }

.tng-katnav__alt a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14.5px;
  color: var(--text);
}
.tng-katnav__alt a:hover { text-decoration: none; background: var(--tng-surface); color: var(--tng-orange-600); }

/* ==================== MOBİL MENÜ ==================== */

.tng-mobmenu { display: none; padding: 10px 0 16px; background: #ffffff; border-bottom: 1px solid var(--tng-line); }
.tng-mobmenu.is-open { display: block; }
.tng-mobmenu a,
.tng-mobmenu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 4px;
  border-bottom: 1px solid var(--tng-line);
  font-size: 15px;
  color: var(--title);
  cursor: pointer;
}
.tng-mobmenu details a { padding-left: 18px; color: var(--text); }
.tng-mobmenu .tng-arama { margin-bottom: 12px; }
.tng-mobmenu .tng-arama input { border-color: var(--control-border); }

/* ==================== HERO: SOL DİKEY KATEGORİ RAYI + KAYDIRMALI BANNER ==================== */

.tng-hero {
  display: grid;
  grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
  gap: 16px;
  margin: 18px 0;
}

.tng-ray {
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: #ffffff;
  overflow: hidden;
}
.tng-ray__baslik {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tng-line);
  background: var(--tng-surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--title);
}
.tng-ray__oge a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--tng-line);
  font-size: 14.5px;
  color: var(--text);
}
.tng-ray__oge:last-child a { border-bottom: 0; }
.tng-ray__oge a:hover { text-decoration: none; background: var(--accent-soft); color: var(--tng-orange-700); }

/* Banner: mint-turkuaz zemin YALNIZCA bu alanda */
.tng-banner { position: relative; border-radius: var(--card-radius); background: var(--tng-mint); overflow: hidden; }
.tng-banner__slaytlar { position: relative; }
.tng-banner__slayt {
  display: none;
  align-items: center;
  gap: 24px;
  min-height: 300px;
  padding: 28px 64px;
}
.tng-banner__slayt.is-active { display: flex; }
.tng-banner__metin { flex: 1 1 auto; min-width: 0; }
.tng-banner__etiket {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tng-mint-ink);
}
.tng-banner__baslik { font-size: 34px; font-weight: 800; text-transform: uppercase; }
.tng-banner__alt { margin: 10px 0 18px; font-size: 16px; color: var(--tng-ink-600); }

.tng-banner__ok {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1.5px solid var(--tng-ink-900);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--tng-ink-900);
  cursor: pointer;
  transform: translateY(-50%);
}
.tng-banner__ok:hover { background: var(--tng-ink-900); color: #ffffff; }
.tng-banner__ok--geri { left: 10px; }
.tng-banner__ok--ileri { right: 10px; }

.tng-banner__noktalar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

/* Otomatik geçişi durduran düğme (WCAG 2.2.2) */
.tng-banner__dur {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--tng-ink-900);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--tng-ink-900);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.tng-banner__dur:hover { background: var(--tng-ink-900); color: #ffffff; }
.tng-banner__nokta {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tng-banner__nokta::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(20, 22, 27, 0.28);
}
.tng-banner__nokta[aria-current="true"]::after { background: var(--tng-ink-900); }

/* ==================== ÜÇ TANITIM KUTUSU ==================== */

.tng-vaatler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.tng-vaat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tng-line);
  border-left: 4px solid var(--tng-orange-600);
  border-radius: var(--card-radius);
  background: #ffffff;
}
.tng-vaat svg { flex: 0 0 auto; stroke: var(--tng-orange-600); }
.tng-vaat strong { display: block; font-family: var(--font-heading); font-size: 14.5px; color: var(--title); }
.tng-vaat span { font-size: 13.5px; color: var(--muted); }

/* ==================== BÖLÜM BAŞLIĞI ==================== */

.tng-bolum { margin-bottom: var(--section-space); }

.tng-bolum__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tng-ink-900);
}
/* h1 DE KAPSANIR: kategori/ürün listesi sayfasının başlığı SAYFA başlığıdır ve
   h1'dir (bkz. themes/tunga/shop/category.blade.php). Ana sayfadaki bölüm
   başlıkları h2 kalır; iki etiket de aynı görünür. */
.tng-bolum__bas h1,
.tng-bolum__bas h2 {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
}
.tng-bolum__bas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tng-orange-600);
}

/* ==================== ÜRÜN IZGARASI — 5 KOLON, YOĞUN ==================== */

.tng-izgara {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.tng-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==================== ÜRÜN KARTI ==================== */

.tng-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition-property: transform, box-shadow, border-color;
  transition-duration: 150ms;
  transition-timing-function: var(--ease);
}
.tng-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--tng-line-strong);
}

.tng-kart__gorsel {
  position: relative;
  display: block;
  padding: 10px;
  border-bottom: 1px solid var(--tng-line);
}
.tng-kart__gorsel:hover { text-decoration: none; }
.tng-kart__gorsel img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.tng-kart__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--tng-surface);
  color: var(--muted);
  font-size: 13px;
}

.tng-kart__isaretler {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 6px;
}

.tng-kart__fav {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--tng-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  cursor: pointer;
}
.tng-kart__fav:hover { color: var(--danger); border-color: var(--control-border); }
.tng-kart__fav[aria-pressed="true"] { color: var(--danger); }

.tng-kart__govde { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }

.tng-kart__marka {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.tng-kart__ad {
  display: block;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--title);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tng-kart__ad:hover { color: var(--tng-orange-600); }

.tng-kart__puan { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

.tng-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 2px; }
.tng-kart__fiyat del { font-size: 13px; color: var(--muted); }
.tng-kart__fiyat strong {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--title);
}
.tng-kart__fiyat strong.tng-indirimli { color: var(--tng-red); }

.tng-kart__taksit {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tng-mint-ink);
}

.tng-kart__stok { font-size: 12.5px; }

.tng-kart__ayak { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 0 12px 12px; }

/* "Son bakılanlar" mini kartı — JS tarafından kurulur (localStorage). */
.tng-kart--mini { padding: 10px; }
.tng-kart--mini:hover { text-decoration: none; }
.tng-kart--mini img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.tng-kart--mini .tng-kart__govde { gap: 4px; padding: 8px 0 0; }
.tng-kart__mini-fiyat { font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--title); }

/* ==================== İKİ GENİŞ BANNER ==================== */

.tng-ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--section-space);
}
.tng-serit-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 22px 24px;
  border-radius: var(--card-radius);
  background: var(--tng-ink-800);
  color: #ffffff;
}
.tng-serit-banner:hover { text-decoration: none; background: var(--tng-ink-700); }
.tng-serit-banner--mint { background: var(--tng-mint); color: var(--tng-ink-900); }
.tng-serit-banner--mint:hover { background: #c6ebe3; }
.tng-serit-banner__ust {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tng-orange-500);
}
.tng-serit-banner--mint .tng-serit-banner__ust { color: var(--tng-mint-ink); }
.tng-serit-banner__baslik { font-family: var(--font-heading); font-size: 22px; font-weight: 800; text-transform: uppercase; }
.tng-serit-banner__alt { font-size: 14.5px; }

/* ==================== MARKA ŞERİDİ ==================== */

.tng-markalar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.tng-marka-kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 60px;
  padding: 10px 16px;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: #ffffff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tng-ink-700);
}
.tng-marka-kutu:hover { text-decoration: none; border-color: var(--tng-orange-600); color: var(--tng-orange-600); }

/* ==================== SSS ==================== */

.tng-sss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tng-sss details {
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: #ffffff;
}
.tng-sss summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--title);
  cursor: pointer;
}
.tng-sss p { padding: 0 14px 14px; font-size: 14.5px; }

/* ==================== BÜLTEN BANDI ==================== */

.tng-bulten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 16px;
  background: var(--tng-ink-900);
  color: #ffffff;
}
.tng-bulten__baslik { font-size: 19px; font-weight: 800; color: #ffffff; text-transform: uppercase; }
.tng-bulten__alt { margin-top: 4px; font-size: 14.5px; color: var(--tng-ink-300); }

/* ==================== ALT BİLGİ — DÖRT KOLON ==================== */

.tng-alt { border-top: 3px solid var(--tng-orange-600); background: var(--tng-ink-800); color: var(--tng-ink-300); }

.tng-alt__ana {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 32px 16px;
}
.tng-alt h4 {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}
.tng-alt__bag a {
  /* display:flex (inline-flex DEĞİL): "Blog" gibi kısa bir bağlantı metni
     30-41px genişlikte kalıyordu (tarayıcıda ölçüldü). Satırı doldurunca
     dokunma hedefi kolon genişliğine çıkar. */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
}
.tng-alt__bag a:hover { color: #ffffff; }
.tng-alt__rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tng-alt__rozetler li {
  padding: 4px 8px;
  border: 1px solid var(--tng-ink-700);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.tng-alt__odeme { display: flex; flex-wrap: wrap; gap: 8px; }
.tng-alt__odeme li {
  padding: 6px 10px;
  border: 1px solid var(--tng-ink-700);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.tng-alt__bitis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--tng-ink-700);
  font-size: 13.5px;
}

/* ==================== SAYFA YOLU ==================== */

.tng-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; font-size: 13.5px; color: var(--muted); }
.tng-yol a { display: inline-flex; align-items: center; min-height: 44px; }
.tng-yol a:hover { color: var(--tng-orange-600); }
.tng-yol [aria-current="page"] { color: var(--title); font-weight: 600; }

/* ==================== KATEGORİ / LİSTE SAYFASI ==================== */

.tng-liste-duzen {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 40px;
}

.tng-suzgec {
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: #ffffff;
}
.tng-suzgec__baslik {
  padding: 12px 14px;
  border-bottom: 1px solid var(--tng-line);
  background: var(--tng-ink-800);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tng-suzgec__grup { border-bottom: 1px solid var(--tng-line); }
.tng-suzgec__grup > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--title);
  cursor: pointer;
}
.tng-suzgec__govde { padding: 0 14px 12px; }
.tng-suzgec__govde a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  color: var(--text);
}
.tng-suzgec__govde a:hover { color: var(--tng-orange-600); }
.tng-suzgec__govde a.is-active { color: var(--tng-orange-600); font-weight: 700; }
.tng-suzgec__alt { padding-left: 14px; font-size: 13.5px; }
.tng-suzgec__eylem { padding: 12px 14px; }

.tng-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tng-etiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--pill);
  font-size: 13.5px;
  color: var(--title);
  background: #ffffff;
}
.tng-etiket:hover { text-decoration: none; border-color: var(--tng-red); color: var(--tng-red); }

.tng-liste-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: var(--tng-surface);
  font-size: 14.5px;
}
.tng-liste-bar strong { color: var(--title); }
.tng-sirala { display: flex; align-items: center; gap: 8px; }

.tng-bos {
  padding: 48px 20px;
  border: 1px dashed var(--control-border);
  border-radius: var(--card-radius);
  text-align: center;
}
.tng-bos h3 { margin-bottom: 8px; font-size: 19px; }

/* ==================== ÜRÜN SAYFASI ==================== */

.tng-urun {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 28px;
}

/* SOL: DİKEY küçük resim şeridi + büyük ana fotoğraf */
.tng-galeri { display: grid; grid-template-columns: minmax(0, 84px) minmax(0, 1fr); gap: 10px; }
.tng-galeri__seri { display: flex; flex-direction: column; gap: 8px; }
.tng-galeri__kucuk {
  display: block;
  padding: 4px;
  border: 1.5px solid var(--tng-line);
  border-radius: var(--radius);
  background: #ffffff;
  cursor: pointer;
}
.tng-galeri__kucuk.is-active { border-color: var(--tng-orange-600); }
.tng-galeri__kucuk img { width: 100%; height: auto; }
.tng-galeri__ana {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: #ffffff;
}

/* SAĞ: bilgi kolonu */
.tng-bilgi { display: flex; flex-direction: column; gap: 12px; }
.tng-bilgi h1 { font-size: 26px; font-weight: 700; text-transform: none; }
.tng-bilgi__marka {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tng-orange-600);
}
.tng-bilgi__ust { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--muted); }
.tng-bilgi__ust strong { color: var(--title); }

.tng-fiyat-blok {
  padding: 14px 16px;
  border: 1px solid var(--tng-line);
  border-left: 4px solid var(--tng-orange-600);
  border-radius: var(--card-radius);
  background: var(--tng-surface);
}
.tng-fiyat-blok__satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.tng-fiyat-blok strong { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--tng-red); }
.tng-fiyat-blok del { font-size: 16px; color: var(--muted); }
.tng-fiyat-blok__kdv { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

.tng-adet-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.tng-adet { display: inline-flex; align-items: stretch; border: 1.5px solid var(--control-border); border-radius: var(--radius); overflow: hidden; }
.tng-adet button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--tng-surface);
  color: var(--title);
  font-size: 18px;
  cursor: pointer;
}
.tng-adet button:hover { background: var(--tng-line); }
.tng-adet input {
  width: 64px;
  min-height: 44px;
  border: 0;
  border-left: 1px solid var(--control-border);
  border-right: 1px solid var(--control-border);
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
}

.tng-ozet { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--tng-line); border-radius: var(--card-radius); }
.tng-ozet li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tng-ozet svg { flex: 0 0 auto; stroke: var(--tng-orange-600); }

.tng-secenek { margin-bottom: 12px; }
.tng-secenek__baslik { margin-bottom: 6px; font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--title); }
.tng-secenek__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.tng-secenek__liste label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  font-size: 14.5px;
  cursor: pointer;
}
.tng-secenek__liste label:hover { border-color: var(--tng-orange-600); }
.tng-secenek__liste input { accent-color: var(--tng-orange-600); }
.tng-renk { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--control-border); border-radius: 50%; }

/* İMZA: SEKMELİ BÖLÜM */
.tng-sekmeler { margin: 8px 0 var(--section-space); border: 1px solid var(--tng-line); border-radius: var(--card-radius); background: #ffffff; }

.tng-sekme-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tng-line);
  background: var(--tng-surface);
}
.tng-sekme {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tng-ink-700);
  cursor: pointer;
}
.tng-sekme:hover { color: var(--tng-orange-600); }
.tng-sekme[aria-selected="true"] {
  background: #ffffff;
  border-bottom-color: var(--tng-orange-600);
  color: var(--tng-orange-700);
}
.tng-sekme-panel { padding: 20px; }
.tng-sekme-panel[hidden] { display: none; }

.tng-prose { font-size: 15.5px; line-height: 1.7; }
.tng-prose h3 { margin: 18px 0 8px; font-size: 17px; text-transform: none; }
.tng-prose p { margin-bottom: 10px; }
.tng-prose ul { margin: 0 0 12px 18px; list-style: disc; }
.tng-prose a { color: var(--tng-orange-600); text-decoration: underline; }

.tng-yorum { padding: 14px 0; border-bottom: 1px solid var(--tng-line); }
.tng-yorum__bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.tng-yorum__yazar { font-family: var(--font-heading); font-weight: 700; color: var(--title); }
/*
 | YILDIZ RENGİ KOYULAŞTIRILDI — ÖLÇÜLEREK DÜZELTİLDİ.
 |
 | `--tng-orange-500` (#f97316) beyaz üstünde 2,80:1, yüzey üstünde 2,57:1.
 | Bu temanın KENDİ yazılı kuralı "parlak turuncu YALNIZCA süs/zemin olarak,
 | üzerine koyu metinle" diyordu — ama ★ karakterleri METİNDİR ve o kural
 | burada çiğneniyordu (ürün kartı, liste, yorum satırı). Puan sayısı yıldızın
 | yanında yazıyla da basıldığı ve şerit aria-hidden olduğu için bilgi
 | kaybı yoktu; görünürlük kaybı vardı: 2,8:1'de yıldızlar açık ekranda
 | soluyor. YENİ DEĞER #b45309 → beyazda 5,02:1 · #f4f5f7 üstünde 4,60:1
 | (yalnızca 3:1 grafik eşiğini değil, 4,5 METİN eşiğini de geçer) ve
 | altın-kehribar görünüm korunur.
 */
.stars, .tng-yildiz { color: #b45309; letter-spacing: 0.08em; }

.tng-yorum-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 22px; }

.tng-panel { padding: 16px; border: 1px solid var(--tng-line); border-radius: var(--card-radius); background: var(--tng-surface); }
.tng-panel h2 { margin-bottom: 4px; font-size: 16px; }
.tng-panel__alt { margin-bottom: 12px; font-size: 13.5px; color: var(--muted); }

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

.field, .tng-alan { margin-bottom: 12px; }
.field label, .tng-alan label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--title);
}
.field .hint, .tng-alan .hint { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--title);
  background: #ffffff;
}
textarea { min-height: 96px; }
select { cursor: pointer; }

input:hover, select:hover, textarea:hover { border-color: var(--control-border-strong); }

.tng-alan-satir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.tng-onay {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  cursor: pointer;
}
.tng-onay input { width: 18px; height: 18px; accent-color: var(--tng-orange-600); }

/* ==================== SAYFALAMA ==================== */

.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--tng-line);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--title);
  background: #ffffff;
}
.pagination a:hover { text-decoration: none; border-color: var(--tng-orange-600); color: var(--tng-orange-600); }
.pagination .is-current { background: var(--tng-ink-800); border-color: var(--tng-ink-800); color: #ffffff; }
.pagination .is-disabled { color: var(--muted); background: var(--tng-surface); }

/* ==================== KAYAN TABLO KABI ==================== */

/* Tabloya display:block VERİLMEZ: satır/sütun ilişkisi erişilebilirlik
   ağacında kalır. Dar ekranda KAP kayar ve klavyeyle odaklanabilir. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--tng-orange-600); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--tng-line); text-align: left; }
th { font-family: var(--font-heading); font-weight: 700; color: var(--title); }
thead th { background: var(--tng-surface); }

/* ==================== 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: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--tng-ink-900);
  color: #ffffff;
  font-size: 14px;
}
.tema-onizleme__ayrinti { color: var(--tng-ink-300); }
.tema-onizleme__eylemler { display: flex; flex-wrap: wrap; gap: 8px; }
.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1.5px solid #ffffff;
  border-radius: var(--radius);
  color: #ffffff;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
}
.tema-onizleme__btn--birincil { background: var(--tng-orange-600); border-color: var(--tng-orange-600); }

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

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

/* ==========================================================================
   ÇEKİRDEK GÖRÜNÜM UYUMLULUĞU — EZİLMEYEN SAYFALAR
   ==========================================================================
   Tunga yedi vitrin görünümünü eziyor; GERİ KALANLAR çekirdekten geliyor
   (sepet, ödeme, iletişim, sözleşme sayfaları, blog, kampanya listesi,
   karşılaştırma, garanti sorgulama, takas, üyelik formları, bayi, oto araç
   seçici…). O sayfalar `css/shop.css` yüklenmediği için burada karşılığı
   olmayan bir sınıf STİLSİZ kalır: kapsayıcı genişliği kaybolur, kart
   çerçevesi gitmez, form satırı tek kolona yığılır.

   ÖLÇÜLDÜ (headless tarayıcı, 19 çekirdek sayfa, CSSOM'daki tanımlı sınıflar
   ile sayfada kullanılan sınıfların farkı): karşılığı olmayan 17 sınıf vardı —
   container · breadcrumb · section-head · panel · panel--sss · panel__desc ·
   stack · center · check · field-row · empty · steps · steps__item ·
   steps__no · prose · datatable · kargo-tablo.

   Aşağıdaki bölüm o on yediyi TUNGA'nın dilinde (köşeli, yoğun, turuncu
   aksiyon) yeniden çiziyor. Çekirdek dosyadan KOPYALANMADI: aynı GÖREVİ farklı
   biçimde yapıyor. Liste ölçümden geldiği için ölü kural yok.
   ========================================================================== */

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

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  padding-block: 4px;
  font-size: 13.5px;
  color: var(--muted);
}
/* min-width de 44px: kısa bir kırıntı ("Moda") 30px genişlikte kalıyordu. */
.breadcrumb a,
.breadcrumb > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.breadcrumb a:hover { color: var(--tng-orange-600); }
.breadcrumb [aria-current="page"] { color: var(--title); font-weight: 600; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tng-ink-900);
}
.section-head h2 { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.section-head p { font-size: 14.5px; color: var(--muted); }

.panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.panel h2 { margin-bottom: 4px; font-size: 17px; }
.panel__desc { margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.panel--sss { margin: 0 0 8px; padding: 4px 16px; }
/* <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-weight: 600;
  color: var(--title);
  cursor: pointer;
}

.stack { display: grid; gap: 14px; }
.center { text-align: center; }

/* Yerel onay kutusu 18px kalır (appearance:none ile yeniden çizmek yüksek
   kontrast kipini bozar); DOKUNMA HEDEFİ saran etikettir. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 10px;
  padding-block: 4px;
  font-size: 14.5px;
  line-height: 1.45;
  cursor: pointer;
}
.check input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; accent-color: var(--tng-orange-600); }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.field-error { font-size: 13px; color: var(--danger); }

/* İletişim / adres / yorum düzenleri: MOBİL ÖNCELİKLİ tek kolon; geniş ekranda
   iki kolona açılır (aşağıdaki 901px bloğunda). */
.contact-grid,
.addr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }

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

/* Ödeme adımı göstergesi — Tunga'da köşeli kutular (çekirdekte yuvarlak). */
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--muted);
}
.steps__no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--tng-line-strong);
  border-radius: var(--radius-sm);
  background: var(--tng-surface);
  font-size: 13px;
  font-weight: 700;
}
.steps__item.is-active { color: var(--title); font-weight: 700; }
.steps__item.is-active .steps__no {
  border-color: var(--tng-orange-600);
  background: var(--tng-orange-600);
  color: #ffffff;
}

/* Sözleşme / bilgi sayfalarının uzun metni */
.prose { font-size: 15.5px; line-height: 1.7; }
.prose h2 { margin: 22px 0 8px; font-size: 19px; text-transform: none; }
.prose h3 { margin: 18px 0 8px; font-size: 17px; text-transform: none; }
.prose p { margin-bottom: 10px; }
.prose ul, .prose ol { margin: 0 0 12px 20px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--tng-orange-600); text-decoration: underline; }

/* Çekirdek tablolar: taban `table` kuralı zaten geçerli, kimlik farkı burada. */
.datatable, .kargo-tablo { width: 100%; border-collapse: collapse; }
.datatable th, .kargo-tablo th { background: var(--tng-surface); }
.datatable tbody tr:hover, .kargo-tablo tbody tr:hover { background: var(--tng-surface); }

/* ==================================================================
   SEPET VE ÖDEME BİLEŞENLERİ — ÇEKİRDEK SINIF UYUMLULUK KATMANI

   DÜŞMAN DENETİMİNDE ÖLÇÜLDÜ VE YAZILDI. BU BLOK HİÇ YOKTU.

   Bu tema `css/shop.css` YÜKLEMEZ. Sepet (shop/cart.blade.php) ve ödeme
   (shop/checkout.blade.php) görünümleri EZİLMEZ — çekirdek Blade'i kullanır
   ve `.cartitem`, `.summary`, `.qty`, `.coupon` sınıflarını basar. O sınıflar
   yalnızca shop.css'te tanımlıydı; bu dosyada KARŞILIĞI YAZILMAMIŞTI.

   TARAYICIDA ÖLÇÜLEN DURUM (1280px, dolu sepet, /sepet ve /odeme):
     .cartitem   display:block · grid-template-columns:none · border-bottom:0
                 padding-bottom:0 · genişlik 1233px
                 → görsel/ad/adet/fiyat ızgara yerine düz blok olarak akıyor,
                   satırlar arasında ayırıcı çizgi yok.
     .summary    background:transparent · border:0 · padding:0
                 genişlik 1233px (kardeş temalarda 320-395px'lik yan kart)
                 → "Sipariş özeti" bir KART DEĞİL; zeminsiz, çerçevesiz,
                   boşluksuz ve tam genişlikte. Ödeme hunisinin en kritik
                   kutusu biçimsizdi.
     .qty input  genişlik 139px · text-align:start
                 (kardeş temalarda 56-72px, ortalanmış)
                 → adet kutusu bir sayaç gibi görünmüyordu.
     .coupon     hiç kural yok → alan ve düğme alt alta düşüyordu.
   Karşılaştırma: vast/quick/seasy bu katmanı yazmış (.cartitem için 5/7/11
   kural), tunga'da SIFIR kural vardı.

   DEĞERLER BU TEMANIN DİLİNDE: keskin 4px yarıçap, --tng-line çizgi,
   --tng-surface zemin, --tng-ink başlık, turuncu yalnızca vurguda. Kardeş
   temalardan kopyalanmadı; ölçüler tunga'nın 6px kart yarıçapı ve 12px
   ızgara boşluğuyla hizalı.

   DUYARLILIK: ızgara `minmax(0, 1fr)` kullanır (çıplak `1fr` YASAK) ve
   641px altında tek kolona düşer — onaylı kırılma noktası.
   ================================================================== */

/* İKİ KOLONLU DÜZEN — bu üç sınıf da hiç tanımlı değildi; `.summary` bu yüzden
   yan kart değil, 1233px'lik tam genişlikte bir blok olarak ölçülüyordu.
   Çıplak `1fr` YASAK olduğu için `minmax(0, 1fr)` kullanılır. */
.cartlayout,
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.cartlist {
  overflow: hidden;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

.cartitem {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--tng-line);
}
.cartitem:last-child { border-bottom: 0; }

.cartitem__img {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid var(--tng-line);
  border-radius: var(--radius);
  background: var(--tng-surface);
}
.cartitem__img img { width: 100%; height: 100%; object-fit: cover; }

.cartitem__name {
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--tng-ink-900);
}
.cartitem__meta { margin-bottom: 10px; font-size: 13px; color: var(--muted); }

.cartitem__right {
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: right;
}
.cartitem__total {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--tng-ink-900);
}

.summary {
  padding: 18px;
  border: 1px solid var(--tng-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  /* Yapışkanlık: başlık 168px yüksekliğinde ve sticky (bkz. .tng-ust). */
  position: sticky;
  top: 184px;
}
.summary h3 {
  margin-bottom: 14px;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.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: 2px solid var(--tng-ink-900);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--tng-ink-900);
}
.summary__note { margin-top: 10px; font-size: 12px; color: var(--muted); }

.coupon { display: flex; gap: 8px; margin-block: 16px; }
.coupon input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  font: inherit;
  /* 16px ALTINA İNMEZ: iOS Safari daha küçük alanda sayfayı yakınlaştırır. */
  font-size: 16px;
}

.qty {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
}
/* Dokunma hedefi: 44x48 — WCAG 2.5.5 eşiğinin üstünde. */
.qty button {
  width: 44px;
  min-height: 48px;
  font-size: 20px;
  color: var(--tng-ink-800);
}
.qty button:hover { background: var(--tng-surface); }
.qty button:disabled { opacity: 0.45; cursor: not-allowed; }
.qty input {
  width: 60px;
  min-height: 48px;
  border: 0;
  font: inherit;
  font-size: 16px;
  text-align: center;
}
.qty input:focus { outline: none; }

/* 641px ALTI: sepet satırı tek kolona düşer, özet yapışkanlıktan çıkar.
   Onaylı kırılma noktası (bkz. tests/Feature/DuyarlilikTest.php). */
/* 1100px ALTI: yan özet kolonu ALTA iner (onaylı kırılma noktası).
   DOM SIRASI DEĞİŞMEZ: özet formun ALTINDA kalır; "Siparişi onayla" düğmesi
   ve sözleşme onayı akışın sonunda olmalı (bkz. shop.css'teki aynı karar). */
@media (max-width: 1100px) {
  .cartlayout,
  .checkout {
    grid-template-columns: minmax(0, 1fr);
  }
  .summary { position: static; }
}

/* 641px ALTI: sepet satırı tek kolona düşer. Onaylı kırılma noktası
   (bkz. tests/Feature/DuyarlilikTest.php). */
@media (max-width: 640px) {
  .cartitem {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }
  .cartitem__img { width: 72px; height: 72px; }
  .cartitem__right { grid-column: 1 / -1; text-align: left; }
}

/* ==================================================================
   DUYARLILIK — mobil öncelikli DÜZELTMELER
   Onaylı kırılma noktaları (bkz. tests/Feature/DuyarlilikTest.php):
   420 · 560 · 640/641 · 720 · 900/901 · 1040 · 1100 ve yükseklik 480/640
   ================================================================== */

/* Geniş ekranda çekirdek iki kolonlu düzenler açılır (mobil öncelikli). */
@media (min-width: 901px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
  .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .tng-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tng-hero { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
  .tng-banner__slayt { padding: 24px 60px; }
  .tng-banner__baslik { font-size: 28px; }
  .tng-yorum-duzen { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .tng-bas__ust {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 10px;
  }
  .tng-arama { grid-column: 1 / -1; order: 3; }
  .tng-burger { display: inline-flex; }
  .tng-eylem { min-width: 52px; font-size: 11px; }
  .tng-katnav { display: none; }

  .tng-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tng-izgara--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tng-hero { grid-template-columns: minmax(0, 1fr); }
  .tng-ray { order: 2; }
  .tng-liste-duzen { grid-template-columns: minmax(0, 1fr); }
  .tng-urun { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tng-alt__ana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tng-bulten { grid-template-columns: minmax(0, 1fr); }
  .tng-atla { display: inline-flex; }
}

@media (max-width: 640px) {
  .tng-izgara,
  .tng-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tng-vaatler { grid-template-columns: minmax(0, 1fr); }
  .tng-ikili { grid-template-columns: minmax(0, 1fr); }
  .tng-sss { grid-template-columns: minmax(0, 1fr); }
  /*
   | BANNER DENETİMLERİ İKİ SATIRA AYRILDI — ÖLÇÜLEREK DÜZELTİLDİ.
   |
   | ÖNCEKİ HÂL: oklar da (mutlak, bottom:8px, left:8/58px) nokta+duraklat kabı
   | da (mutlak, right:8px, bottom:8px) AYNI satırdaydı. Nokta kabı 244px
   | genişliğinde ve sağa yapışık olduğu için 320px'te 52px'ten, 360px'te
   | 92px'ten başlıyordu; "SONRAKİ" oku ise 74–118px arasındaydı. ÖLÇÜLDÜ
   | (elementFromPoint vuruş testi): okun MERKEZİNDE
   | `BUTTON.tng-banner__dur` dönüyordu — yani 320 ve 360px'te sonraki
   | duyuru okuna DOKUNULAMIYORDU. Sessiz bir hataydı: yatay kaydırma 0,
   | dokunma hedefi 44x44, düğme görünür — ama tıklanamaz.
   |
   | BUGÜN: oklar alttan 60px'e çıkarıldı, nokta+duraklat satırı altta kaldı
   | ve tam genişliğe yayılıp sağa hizalandı. Slaytın alt dolgusu iki satırı
   | (44 + 8 + 44 + 8 = 104px) taşıyacak kadar büyütüldü.
   */
  .tng-banner__slayt { min-height: 240px; padding: 20px 16px 112px; }
  .tng-banner__baslik { font-size: 22px; }
  .tng-banner__ok { top: auto; bottom: 60px; transform: none; }
  .tng-banner__ok--geri { left: 8px; }
  .tng-banner__ok--ileri { left: 58px; right: auto; }
  .tng-banner__noktalar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    transform: none;
  }
  .tng-fiyat-blok strong { font-size: 24px; }
  .tng-bilgi h1 { font-size: 21px; }
  .tng-sekme { padding: 0 12px; font-size: 12.5px; }
  .tng-sekme-panel { padding: 14px; }
}

@media (max-width: 560px) {
  .tng-galeri { grid-template-columns: minmax(0, 1fr); }
  .tng-galeri__seri { flex-direction: row; overflow-x: auto; order: 2; }
  .tng-galeri__kucuk { flex: 0 0 68px; }
  .tng-alan-satir { grid-template-columns: minmax(0, 1fr); }
  /* Çekirdek form satırı da dar ekranda tek kolona düşer. */
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .tng-marka__ad { font-size: 20px; }
  .tng-eylem__etiket { display: none; }
  .tng-alt__ana { grid-template-columns: minmax(0, 1fr); }
}

/* Kısa/yatay ekranda yapışkan başlık yüksekliği azalır (640px altı yükseklik). */
@media (max-height: 640px) {
  .tng-bas__ust { padding: 6px 16px; }
  .tng-marka__alt { display: none; }
  .tng-katnav__bag { min-height: 44px; }
}

/* ==================================================================
   HAREKETİ AZALT — WCAG 2.3.3
   Yalnızca transform/opacity canlandırılıyor; burada hepsi durdurulur.
   ================================================================== */

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

  .tng-kart:hover { transform: none; }
}

/* ==========================================================================
   Ç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ü:
     .radio-card__price    tema: inline 54x19  çekirdek: block 47x45 (kural 1)
     .tema-onizleme__metin tema: kural 0       çekirdek: min-width 0
   Ödeme sayfasındaki kargo/ödeme seçim kartının TUTARI satır içine düşüyor ve
   sağa itilmiyordu; tunga'nın sıkı/köşeli diline göre yazıldı.
   ========================================================================== */

.radio-card__price {
  margin-left: auto;
  color: var(--title);
  font-family: var(--font-heading);
  font-weight: 700;
}

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

/* ==========================================================================
   HESABIM DÜZENİ — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   `/hesabim` ezilmeyen bir çekirdek sayfadır ve bu tema `css/shop.css`
   yüklemez. In-process HTTP çekirdeğiyle MÜŞTERİ oturumu açılarak ölçüldü
   (HTTP koşumunda müşteri parolası bilinmediği için bu sayfalar önce hiç
   ölçülememişti): tunga.css'te .acclayout · .accnav · .statcards ·
   .statcards--3 · .statcard için SIFIR kural vardı — hesap panosunun yan
   menüsü ve sayaç kartları TAMAMEN STİLSİZDİ.
   Kırılma noktaları 901 ve 640: ikisi de onaylı listede.
   ========================================================================== */

.acclayout {
  display: grid;
  align-items: start;
  gap: 26px;
  grid-template-columns: 240px minmax(0, 1fr);
}

.accnav {
  border: 1px solid var(--border);
  background: var(--card-bg);
  padding: 8px;
}

.accnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  font-size: 14px;
}

.accnav a:hover {
  background: var(--primary-soft);
  text-decoration: none;
}

.accnav a.is-active {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

.statcards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

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

.statcard {
  border: 1px solid var(--border);
  background: var(--card-bg);
  padding: 16px 18px;
}

.statcard span {
  color: var(--muted);
  font-size: 13px;
}

.statcard strong {
  display: block;
  color: var(--title);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
}

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

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

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

/* ==========================================================================
   DOKUNMA HEDEFİ — /iletisim TELEFON VE E-POSTA BAĞLANTILARI
   --------------------------------------------------------------------------
   Gerçek tarayıcıda 390px'te ölçüldü (elementFromPoint ile dört yönde vuruş
   sınaması): `a[href^="tel:"]` ve `a[href^="mailto:"]` 16-20px YÜKSEKLİKTE
   ölçüldü — dokunma hedefi eşiği 44x44. Bağlantılar ÇEKİRDEK /iletisim
   görünümünden geliyor; çekirdek DEĞİŞTİRİLMEDİ, düzeltme temanın kendi
   CSS'inde. (Aynı düzeltme orion temasında zaten vardı; sekiz temanın altısında
   yoktu.)

   `inline-flex` + `min-height` seçildi: `display: block` vermek bağlantıyı
   metin akışından çıkarır ve iletişim kartındaki satır düzenini bozar.
   ========================================================================== */

a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* DOKUNMA HEDEFİ — sayfa yolundaki kısa kategori bağı 34x44 ölçüldü
   (genişlik eşiğin altında). */
.tng-yol a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* ==========================================================================
   MODÜL BLOKLARI TUNGA'NIN DİLİNDE
   --------------------------------------------------------------------------
   Çift opt-in bülten, "stoğa gelince haber ver" ve B2B bayi şeridi çekirdek
   parçalardır ve kendi yaprak dosyalarını (`shop-stok-bildirim.css`,
   `shop-bayi.css`) GÖVDEDEN yükler — yani bu temadan SONRA gelirler ve eşit
   özgüllükte sonra gelen kazanır. Bu yüzden kurallar `.tema-tunga` /
   `.tng-bilgi` kabıyla SARILIR (özgüllük 0,2,0 > 0,1,0).

   Bülten bandı `.tng-alt` alt bilgisinin DIŞINDA, ondan hemen önce basıldığı
   için gövde sınıfıyla (`.tema-tunga`) sarılır; alt bilgiyle sarmak kuralı
   hiç eşleştirmezdi.

   ÖLÇÜLEN KONTRASTLAR (WCAG bağıl parlaklık)
   ------------------------------------------
   bant başlığı   #ffffff / #14161b = 18,10:1
   bant metni     #a8adb8 / #14161b =  8,04:1
   bant düğmesi   #ffffff / #c2410c =  5,18:1
   ========================================================================== */

/*
 | BÜLTEN BANDI — TEMANIN KENDİ BANDININ (.tng-bulten) GÖRSEL İKİZİ.
 |
 | Modül kuruluyken tema kendi bandını BASMAZ (bkz. themes/tunga/shop/partials/
 | footer.blade.php); bu yüzden modülün bandı aynı yuvayı, aynı koyu mürekkep
 | zeminle ve aynı iki kolonlu ızgarayla doldurur. Ziyaretçi için görsel dil
 | değişmez, yalnızca kayıt akışı çift opt-in olur.
 */
.tema-tunga .bulten {
  padding: 22px 0;
  border-top: 0;
  background: var(--tng-ink-900);
  color: #ffffff;
}

.tema-tunga .bulten__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  max-width: var(--container);
  padding: 0 16px;
}

.tema-tunga .bulten__baslik {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--heading-tracking);
  color: #ffffff;
}

.tema-tunga .bulten__aciklama {
  max-width: none;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--tng-ink-300);
}

.tema-tunga .bulten__aciklama strong {
  color: #ffffff;
}

/*
 | Yaprak dosyadaki `min-width: 240px` SABİTTİR ve 320px'lik ekranda kabı
 | genişletip sayfayı yatay kaydırır; `min-width: 0` daralmaya izin verir.
 | 16px punto ZORUNLU: altına düşerse iOS Safari odaklanınca sayfayı zorla
 | yakınlaştırır ve kullanıcı geri alamaz.
 */
.tema-tunga .bulten__form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  min-height: var(--btn-height);
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  background: #ffffff;
  color: var(--title);
  font-size: 16px;
}

/* Modülün düğmesi `btn--gold` adıyla gelir; bu temada o ad zaten TURUNCU
   dolgudur (#ffffff / #c2410c = 5,18:1) ve koyu bandın üstünde net keser.
   Yalnızca hizalama düzeltilir. */
.tema-tunga .bulten__form .btn {
  flex: 0 0 auto;
}

.tema-tunga .bulten__hata {
  max-width: var(--container);
  padding: 0 16px;
  color: var(--tng-orange-500);
}

/* Dar ekranda bant tek kolona iner (onaylı kırılma noktası). */
@media (max-width: 640px) {
  .tema-tunga .bulten__ic {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 | STOK BİLDİRİM KUTUSU — satın alma kolonunda, turuncu kenar şeridiyle.
 | Tema uyarı/vurgu bloklarını hep SOL KENAR ÇİZGİSİYLE işaretler (bkz.
 | `.alert`); bu kutu da aynı dili kullanır, yeni bir kalıp uydurulmaz.
 */
.tng-bilgi .stokbildirim {
  border: 1px solid var(--border);
  border-left: 3px solid var(--tng-orange-600);
  border-radius: var(--card-radius);
  background: var(--tng-surface);
}

.tng-bilgi .stokbildirim__baslik {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--heading-tracking);
  color: var(--title);
}

.tng-bilgi .stokbildirim__aciklama {
  color: var(--text);
}

/* Onay kutusunun KENDİSİ 18px kalır (appearance:none yüksek kontrast kipini
   bozar); dokunma hedefi SARAN ETİKETTEDİR — temanın `.tng-onay` kalıbı. */
.tng-bilgi .stokbildirim__onay {
  min-height: 44px;
  color: var(--text);
}

.tng-bilgi .stokbildirim__form input[type="email"],
.tng-bilgi .stokbildirim__form select {
  background: #ffffff;
}

/* Bayi şeridi: başlık bandı turuncu vurguyla ayrılır, panel köşesi kart köşesi. */
.tng-bilgi .bayi-panel {
  border-radius: var(--card-radius);
}

.tng-bilgi .bayi-panel__head {
  border-bottom: 2px solid var(--tng-orange-600);
  background: var(--tng-surface);
}

/* ==========================================================================
   DOKUNMA HEDEFİ — BAYİ ŞERİDİNDEKİ "HIZLI TOPLU SİPARİŞ" BAĞLANTISI
   --------------------------------------------------------------------------
   GERÇEK TARAYICIDA ÖLÇÜLDÜ (dokuz genişlikte, elementFromPoint vuruşuyla):
   `.bayi-panel a` 102,2x15 px çıkıyor — eşik 44x44. Bağlantı ÇEKİRDEK
   `shop/partials/dealer-price.blade.php` parçasından geliyor ve bu temada
   ancak bayi kancası konduktan SONRA basılıyor. Çekirdek DEĞİŞTİRİLMEDİ;
   düzeltme temanın kendi CSS'inde, bu dosyadaki `a[href^="tel:"]` kalıbının
   aynısıyla. `inline-flex`: `block` vermek bağlantıyı cümleden koparırdı.
   ========================================================================== */

.bayi-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}


/* ==========================================================================
   REKLAM YUVASI — TUNGA 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.
   ========================================================================== */

/*
 * TUNGA — TURUNCU PAZARYERİ: EN KISA RİTİM.
 *
 * Bu temada sayfa yoğun ve bölümler arası boşluk en kısa olanı. Yuva 28px
 * ile ayrılır. Ayırıcı: etiketin SOLUNDA dikey turuncu bir çubuk —
 * kardeş temaların yatay çizgisinden ayrışır ve kutu izlenimi vermez.
 */
[data-tema='tunga'] .reklam {
  --reklam-bosluk: 28px;
}

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

[data-tema='tunga'] .reklam__etiket {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  opacity: 1;
}

[data-tema='tunga'] .reklam__etiket::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--primary);
}

[data-tema='tunga'] .reklam--bos .reklam__etiket::before {
  display: none;
}

@media (max-width: 900px) {
  [data-tema='tunga'] .reklam--kenar-cubugu {
    --reklam-bosluk: 32px;
  }
}