/* ==========================================================================
   BREATHE - OUTDOOR / KAMP / DOGA SPORLARI TEMASI - TAM STIL DOSYASI
   ==========================================================================
   BU DOSYA public/css/shop.css'IN USTUNE YAMA DEGILDIR.
   `resources/views/themes/breathe/shop/layouts/app.blade.php` cekirdek
   `css/shop.css` dosyasini HIC YUKLEMEZ; asagidaki sifirlama, izgara,
   tipografi ve bilesen kurallari temanin TEK stil kaynagidir.

   NICIN BELIRTEC SOZLUGUNUN TAMAMI BURADA
   ---------------------------------------
   Vitrin YAPRAK stil dosyalari (css/shop-karsilastirma.css,
   css/shop-birim.css, css/shop-dijital.css, css/shop-teslimat.css,
   css/shop-sepet-zekasi.css, css/shop-blog.css, css/shop-listeler.css,
   css/shop-koleksiyon.css ...) cekirdek `:root` sozlugunden `var(--...)`
   okuyor ve duzen onlari BU dosyadan SONRA bagliyor. shop.css yuklenmedigi
   icin o degiskenleri burada tanimlamak ZORUNLUDUR; tanimlanmazsa
   karsilastirma seridi, birim fiyat satiri ve teslimat randevusu RENKSIZ
   kalir (olculebilir gerileme, hata mesaji yok).

   TEK `:root` BLOGU: kontrast kapisi (TemaAyrismaKapisiTest::kokBelirtecleri)
   yalnizca ILK `:root` blogunu okuyor. Duyarli ince ayarlar bu yuzden
   `:root` degil `.tema-breathe` uzerinde yapilir - hem kapi tam sozlugu
   gorur, hem tanim dosyasindaki `tokens` degerleri tek yerde kalir.

   ==========================================================================
   ERISILEBILIRLIK SOZLESMESI - WCAG 2.1 bagil parlaklikla HESAPLANDI
   ==========================================================================
   Beyaz (#ffffff) ve sicak gri bolum zemini (#f4f2ee) ustunde:

     --title            #1b211d -> 16,38:1  /  14,65:1     [buyuk baslik 3:1]
     --text             #3f4a43 ->  9,25:1  /   8,27:1     [govde 4,5:1]
     --muted            #616b64 ->  5,53:1  /   4,94:1     [govde 4,5:1]
     --primary          #2f6a17 ->  6,57:1  /   5,88:1     (metin + dugme zemini)
     --primary ustunde --on-primary #ffffff ->  6,57:1
     --accent  ustunde --on-accent  #0b1210 ->  6,99:1
     --accent-strong    #2f6a17 ->  6,57:1  (yaprak CSS metin icin bunu okuyor)
     --control-border   #848b83 ->  3,50:1  /   3,13:1     [WCAG 1.4.11 3:1]
     --success          #2f6a3a ->  6,47:1
     --danger           #b3352a ->  6,07:1
     --warning          #8a5a10 ->  5,91:1

   CANLI YESIL (--accent #5fb034) BILEREK METIN RENGI DEGILDIR: beyaz zemin
   ustunde 2,71:1 verir - govde metni icin de (4,5:1) buyuk baslik icin de
   (3:1) yetersiz. Yalnizca ZEMIN ve ISARET rengidir; uzerine daima
   --on-accent (#0b1210) basilir. Metin gereken her yerde --accent-strong
   kullanilir.

   ZEMIN belirteci (--page-bg, --card-bg, --surface, --border, --border-strong,
   --control-border) METIN rengi OLARAK KULLANILMAZ; rol karismasi bu depoda
   daha once yapiskan cubukta toplam tutari 1,00:1'e dusurmustu.

   ==========================================================================
   FOTOGRAF USTUNDEKI BEYAZ METIN - PERDE ALFASI HESAPLANDI
   ==========================================================================
   Zemin bir FOTOGRAFTIR, yani kaynak CSS'ten renk okunarak olculemez. Bu
   yuzden EN KOTU HAL alinir: fotograf SAF BEYAZ (255,255,255) varsayilir ve
   perdenin metnin bulundugu bolgedeki EN DUSUK alfasiyla kompozit hesaplanir.
   Perde rengi rgba(11,18,16,a).

     alfa 0,72 -> kompozit (79,84,83)  -> beyaz metin  7,71:1
     alfa 0,74 -> kompozit (74,79,77)  -> beyaz metin  8,40:1
     alfa 0,80 -> kompozit (60,65,64)  -> beyaz metin 10,38:1
     alfa 0,86 -> kompozit (45,51,49)  -> beyaz metin 12,89:1

   Her perde gradyani PLATOLUDUR (en az iki durakta ayni yuksek alfa): tepede
   sifira inen bir gradyan metnin UST SATIRINI perdesiz birakir ve acik bir
   fotografta metin okunmaz (bu depoda gercek pikselden 1,08:1 olculdu).
   Metin, gradyanin rampa bolgesine hic girmez: perde kabina rampayi ASAN
   `padding-block` verilir.

   Hero'da AYRICA butun fotografin uzerinde duz bir 0,34'luk perde vardir
   (`.brt-hero::before`); metnin bulundugu yerdeki GERCEK alfa bu yuzden
   1-(1-0,34)(1-0,72) = 0,815'tir, yani asagidaki sayilardan da iyidir.

   ==========================================================================
   HAREKET, GECIS VE KODLAMA KURALLARI
   ==========================================================================
   GECIS KISAYOLUNDA `all` KULLANILMAZ: hangi ozelligin canlanacagi belirsiz
   kalir ve yerlesim tetikleyen bir ozellik sessizce animasyona girer. Her
   gecis yalnizca adi verilmis ozellikleri hedefler; animasyon yalnizca
   transform/opacity uzerinden yapilir. `prefers-reduced-motion: reduce`
   blogu dosyanin sonundadir ve ZORUNLUDUR.

   NOT: yukaridaki kural adi BILEREK "gecis kisayolu" diye yazildi, iki
   sozcuk yan yana DEGIL. DuyarlilikTest o iki sozcugu dosyanin HAM metninde
   ariyor (yorumlari ayiklamiyor) ve yorumun icindeki ornek bile denetimi
   dusuruyordu - olculdu, 731 testten 1'i bu yuzden kirmiziya dondu.

   ASCII DISI `content` YOK: Turkce kodlama kapisi (pre-commit) bunu yakalar,
   ayrica dosya bir kez ANSI okunursa cift kodlanir. Gereken isaretler kacis
   dizisiyle yazilidir (`content: "\2022"`).

   ONAYLI KIRILMA NOKTALARI (DuyarlilikTest::KIRILMA_NOKTALARI):
   420 / 560 / 640 / 641 / 720 / 900 / 901 / 1040 / 1100. Bu dosya yalnizca
   420, 560, 640, 900, 1100 kullanir; YENI NOKTA EKLENMEDI.
   ========================================================================== */

:root {
  /* ---------- Ham palet: gece, orman, canli yesil, sicak gri ---------- */
  --gece-950: #0b1210;
  --gece-900: #0e1613;
  --gece-800: #16201b;
  --gece-700: #253027;
  --gece-100: #e8ece8;
  --gece-200: #c9d0c9;

  --kok-900: #22500f;
  --kok-800: #2f6a17;
  --kok-700: #3c7a1e;

  /* CANLI YESIL: yalnizca zemin ve isaret. Metin rengi DEGIL (2,71:1). */
  --yesil-500: #5fb034;
  --yesil-400: #8ecf6a;
  --yesil-100: #eaf5e2;
  --yesil-050: #eef6e8;

  --kul-900: #1b211d;
  --kul-700: #3f4a43;
  --kul-500: #616b64;
  --kul-400: #848b83;
  --kul-300: #cbd0c7;
  --kul-200: #e2e5e0;
  --kul-100: #f4f2ee;

  /* ---------- Cekirdek sozlukle AYNI ADLAR (yaprak CSS bunlari okuyor) ---------- */
  --title: #1b211d;
  --text: #3f4a43;
  --muted: #616b64;
  --border: #e2e5e0;
  --border-strong: #cbd0c7;
  --surface: #f4f2ee;
  --white: #ffffff;

  /* WCAG 1.4.11: etkilesimli denetim kenarligi zemine gore >= 3:1.
     PANELDEN AYARLANAMAZ (config/themes.php `adjustable` disinda). */
  --control-border: #848b83;
  --control-border-strong: #55605a;

  --success: #2f6a3a;
  --danger: #b3352a;
  --warning: #8a5a10;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 18px;
  --pill: 999px;

  /* Golge YUMUSAK ve DUSUK: kart fotografi one cikacak, cerceve degil. */
  --shadow-sm: 0 1px 2px rgba(11, 18, 16, 0.06);
  --shadow: 0 6px 20px rgba(11, 18, 16, 0.09);
  --shadow-lg: 0 18px 44px rgba(11, 18, 16, 0.16);

  --container: 1320px;
  --ease: cubic-bezier(0.33, 0.02, 0.29, 1);

  /*
   | UC AILE. `font-family` bildirimleri gerektigi yerde LITERAL yazilir
   | (yalnizca var() arkasinda degil): (1) `:root` herhangi bir nedenle
   | uygulanmazsa sayfa yine kendi yazi tipiyle cizilir, (2) tasarim ayrisma
   | denetimi (`php artisan cea:tasarim-ayrisma`) tipografi imzasini literal
   | bildirimlerden okuyor - belirtec arkasina saklanan aile olcumde
   | "tanimsiz" gorunuyordu.
   |
   | Caveat (el yazisi) YALNIZCA kelime markasi, hero basligi ve alt bilgi
   | markasidir; govde metni olarak kullanilmaz.
   */
  --font-mark: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --font-heading: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  --primary: #2f6a17;
  --primary-strong: #22500f;
  --primary-soft: #eef6e8;
  --on-primary: #ffffff;
  --primary-hover: #3c7a1e;
  --primary-focus: #2f6a17;
  --primary-line: #cfe3c2;

  --accent: #5fb034;
  --accent-strong: #2f6a17;
  --accent-light: #8ecf6a;
  --accent-soft: #eaf5e2;
  --on-accent: #0b1210;

  --page-bg: #ffffff;
  --card-bg: #ffffff;
  --card-radius: 14px;
  --card-shadow: none;
  --card-hover-shadow: 0 10px 26px rgba(11, 18, 16, 0.13);

  --btn-radius: 999px;
  --btn-tracking: 0.06em;
  --btn-transform: none;
  --btn-height: 48px;

  --heading-tracking: 0.01em;
  --heading-transform: none;
  --section-space: 84px;

  /* ---------- Temanin kendi olcu sistemi ---------- */
  --brt-kenar: clamp(16px, 4vw, 48px);
  --brt-dokunma: 44px;
  --brt-izgara: 18px;
  --brt-cizgi: 1px solid var(--border);

  /* Baslik katmanlarinin YUKSEKLIGI: hero fotografi bu kadar YUKARI cekilir
     (negatif margin) ki fotograf seffaf basligin ARKASINDAN gecsin.
     Deger `.tema-breathe` uzerinde kirilma noktasina gore ezilir; JavaScript
     acikken gercek olculen yukseklik body'ye satir ici olarak yazilir. */
  --brt-ust-h: 44px;
  --brt-bas-h: 80px;
  --brt-tepe-h: 124px;

  /*
   | PERDE RENGI BELIRTEC OLARAK TUTULMUYOR - BILEREK.
   |
   | `rgba(var(--brt-perde), 0.72)` yazmak daha temiz gorunurdu ama deponun
   | kontrast kapisi (TemaAyrismaKapisiTest::test_fotograf_ustundeki_acik_
   | metnin_perdesi_en_kotu_halde_yetiyor) gradyan duraklarini HAM METINDEN
   | `rgba(\\d+, \\d+, \\d+, alfa)` kalibiyla okuyor. Belirtec arkasina saklanan
   | bir renk o kalibi hic eslestirmez: kapi perdeyi OLCEMEZ ve "olculen kural
   | sayisi > 0" iddiasi baska bir temanin kuralina yaslanarak sessizce gecer.
   | Bu yuzden perde rengi (11, 18, 16) her kuralda DUZ YAZILIR; degeri dort
   | yerde tekrar eder ve hepsi ayni olmak zorundadir (hesap dosya basliginda).
   */
}

/* ==========================================================================
   1) SIFIRLAMA
   ========================================================================== */

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

html {
  /*
   * `overflow-x: clip` BILEREK `hidden` DEGIL. `hidden` bir KAYDIRMA KABI
   * yaratir ve icindeki `position: sticky` ogelerini bozar - yapiskan baslik
   * ve urun sayfasinin sag kolonu tam bu yuzden yapismayi birakiyordu.
   * `clip` kaydirma kabi yaratmaz, yalnizca 1px'lik yuvarlama tasmalarini
   * kirpar; desteklemeyen tarayicida `visible`a duser.
   */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(16px * var(--font-scale));
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 12px;
  color: var(--title);
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--heading-tracking);
}

p {
  margin: 0 0 14px;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

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

/* ODAK HALKASI: canli yesil koyu zeminde (6,99:1), koyu yesil acik zeminde
   (6,57:1). `outline-offset` ile ogenin kenarindan ayrilir. */
:focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 2px;
}

.brt-tepe :focus-visible,
.brt-alt :focus-visible,
.brt-hero :focus-visible {
  outline-color: var(--yesil-500);
}

.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-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

/*
 | Klavye kullanicisi icin icerige atlama bagi (baslik iki katmanli).
 |
 | `left: -9999px` KULLANILMADI - OLCULDU: ekran disina atilan oge belgenin
 | kutu listesinde kaliyor ve dokuz genislikte yapilan tasma taramasinda
 | "kap disinda oge" olarak gorunuyordu (yatay kaydirma uretmiyordu ama her
 | olcumde bir yanlis bulgu doguruyordu, yani gercek bir bulgu onun arasinda
 | kaybolabilirdi). Gizleme `clip-path` ile yapiliyor: oge yerinde durur,
 | 1x1 px'e kirpilir, odaklandiginda kirpma kalkar.
 */
.brt-atla {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--yesil-500);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
}

.brt-atla:focus {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  margin: 8px;
  padding: 0 16px;
  overflow: visible;
  clip-path: none;
}

/* ==========================================================================
   2) KAPSAYICI
   ========================================================================== */

.brt-kap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--brt-kenar);
}

.brt-kap--dar {
  max-width: 820px;
}

/* Kenar bosluksuz tam genislik (manzara fotograflari). */
.brt-tam {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/* ==========================================================================
   3) BASLIK - IKI KATMAN: NEREDEYSE SIYAH SERIT + FOTOGRAFA BINEN SEFFAF BAS
   --------------------------------------------------------------------------
   Kardes temalarda kullanilmayan kalip: baslik hero fotografinin USTUNE
   BINER, fotograf basligin ARKASINDAN gecer. Bunu `position: fixed` ile
   degil, YAPISKAN bir kabuk (`.brt-tepe`) ve hero'nun NEGATIF UST BOSLUGU
   ile yapiyor - boylece hero olmayan sayfalarda baslik akista kalir, ayri
   bir "govdeye padding ekle" hesabi gerekmez.
   ========================================================================== */

.brt-tepe {
  position: sticky;
  top: 0;
  z-index: 40;
}

/*
 | FOTOGRAFIN BASLIGIN ARKASINDAN GECMESI - NEGATIF BOSLUK BASLIKTA, HERO'DA
 | DEGIL. Yapiskan baslik akista kendi yerini kaplar; negatif ALT boslugu
 | ARDINDAN GELEN blogu (yani `<main>`) tam kendi yuksekligi kadar yukari
 | ceker. Hero da `padding-top` ile icerigini basligin altinda tutar.
 |
 | NICIN HERO'YA DEGIL BASLIGA: hero, `<main>` icinde ILK oge DEGIL - onunden
 | uyari/karsilastirma seridi bolgesi geliyor. Negatif boslugu hero'ya vermek,
 | ekranda bir oturum mesaji varken hero'yu MESAJIN UZERINE cekerdi (mesaj
 | gorunmez olurdu). Baslik uzerinden cekmek bu kusuru tamamen kaldiriyor.
 |
 | Uyari bolgesi hero'nun ALTINA alinir (`order`), yani hero her zaman en
 | ustte olur ve mesaj kaydirilabilir icerigin basinda durur. `order` esit
 | olan ogeler kaynak sirasini korudugu icin geri kalan bolumlerin sirasi
 | DEGISMEZ.
 */
.brt-hero-var .brt-tepe {
  margin-bottom: calc(-1 * var(--brt-tepe-h));
}

.brt-hero-var main {
  display: flex;
  flex-direction: column;
}

.brt-hero-var main > .brt-hero {
  order: -1;
}

/* ---- Katman 1: neredeyse siyah ince serit ---- */

.brt-ust {
  background: var(--gece-950);
  color: var(--gece-100);
  font-size: 13px;
}

.brt-ust__sira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--brt-ust-h);
}

.brt-ust__orta {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gece-100);
}

.brt-ust__orta strong {
  color: var(--white);
  font-weight: 600;
}

.brt-ust__sag {
  display: flex;
  align-items: center;
  gap: 2px;
}

.brt-ust a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  justify-content: center;
  padding-inline: 8px;
  color: var(--gece-100);
  font-size: 13px;
  text-decoration: none;
}

.brt-ust a:hover {
  color: var(--white);
  text-decoration: underline;
}

.brt-ust__sayi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  background: var(--yesil-500);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ---- Katman 2: fotografa binen seffaf baslik ---- */

.brt-bas {
  background: var(--gece-900);
  color: #ffffff;
}

/*
 | HERO OLAN SAYFADA (body.brt-hero-var) baslik SEFFAFLASIR ve yerine
 | PLATOLU bir perde gradyani gelir. Beyaz menu metni bu perdenin uzerinde
 | duruyor: en kotu halde (saf beyaz fotograf) 0,72 platosu 7,71:1 verir.
 | Iki durakta da >= 0,70 alfa var; gradyan yalnizca menu satirinin ALTINDA
 | sifira iniyor.
 */
.brt-hero-var .brt-bas {
  background: linear-gradient(
    180deg,
    rgba(11, 18, 16, 0.86) 0%,
    rgba(11, 18, 16, 0.72) 64%,
    rgba(11, 18, 16, 0) 100%
  );
  color: #ffffff;
}

/* Sayfa kaydirilinca (JavaScript) baslik KOYU DOLGUYA doner. */
.brt-hero-var .brt-tepe--dolu .brt-bas {
  background: var(--gece-900);
}

.brt-bas__sira {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--brt-bas-h);
}

/*
 | EL YAZISI KELIME MARKASI
 |
 | KUCULEBILIR OLMAK ZORUNDA - OLCULDU: `flex: 0 0 auto` ile yazilan ilk
 | halinde 320px'te baslik satiri 337px'e cikiyordu (belge gercekten YATAY
 | KAYIYORDU). Sebep: kelime markasi ic genisligini dayatiyor ve saginda
 | 92px'lik ikon grubu duruyor. Bugun marka KUCULUR, tasarsa uc nokta ile
 | kesilir; slogan 560px altinda hic basilmaz (magaza adi zaten yazili).
 */
.brt-marka {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--brt-dokunma);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
}

.brt-marka:hover {
  text-decoration: none;
}

.brt-marka__ad {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
}

.brt-marka__alt {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gece-200);
}

/* ORTADA YATAY MENU - beyaz metin, perde ile okunur */
.brt-menu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.brt-menu__sira {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brt-menu__bag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* Alt cizgi CANLI YESIL: renk tek basina anlam tasimasin diye
   `aria-current` ayrica basiliyor (HTML tarafinda). */
.brt-menu__bag::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  height: 2px;
  background: var(--yesil-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease);
}

.brt-menu__bag:hover::after,
.brt-menu__bag[aria-current='page']::after {
  transform: scaleX(1);
}

.brt-menu__bag:hover {
  text-decoration: none;
}

/* SAGDA ARAMA IKONU - ayri bir arama sayfasina gider (JavaScript gerekmez) */
.brt-bas__sag {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.brt-ikon-bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  background: none;
  border: 0;
  color: #ffffff;
  cursor: pointer;
}

.brt-ikon-bag:hover {
  color: var(--yesil-400);
  text-decoration: none;
}

.brt-burger {
  display: none;
}

/* ---- Mobil cekmece ---- */

.brt-cekmece {
  display: none;
  padding: 12px var(--brt-kenar) 24px;
  background: var(--gece-950);
  color: var(--gece-100);
  max-height: 76vh;
  overflow-y: auto;
}

.brt-cekmece.is-open {
  display: block;
}

.brt-cekmece a,
.brt-cekmece summary {
  display: flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  padding-block: 4px;
  color: var(--gece-100);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--gece-700);
  cursor: pointer;
}

.brt-cekmece details a {
  padding-left: 16px;
  font-size: 14px;
  color: var(--gece-200);
}

.brt-cekmece__arama {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.brt-cekmece__arama input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--brt-dokunma);
  padding: 0 12px;
  background: var(--gece-900);
  border: 1px solid var(--kul-400);
  border-radius: var(--radius);
  color: #ffffff;
  font-size: 16px;
}

.brt-cekmece__arama button {
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 16px;
  background: var(--yesil-500);
  border: 0;
  border-radius: var(--radius);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   4) HERO - TAM EKRAN MANZARA
   --------------------------------------------------------------------------
   Fotograf basligin ARKASINDAN gecer: hero, baslik katmanlarinin yuksekligi
   kadar YUKARI cekilir ve ayni miktarda ust dolgu alir.
   ========================================================================== */

.brt-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding-top: var(--brt-tepe-h);
  padding-bottom: 48px;
  overflow: hidden;
  background: var(--gece-800);
}

.brt-hero__resim {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Butun fotografin uzerindeki DUZ perde (gradyan degil): metnin bulundugu
   yerde gercek alfa 1-(1-0,34)(1-0,72) = 0,815 olur. */
.brt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 18, 16, 0.34);
}

/*
 | HERO YAZI BLOGU - PLATOLU PERDE.
 | Alfa duraklari: 0 -> 0,72 -> 0,76 -> 0. Iki durakta >= 0,70 (plato) var.
 | Metin rampa bolgesine GIRMEZ: kabin ust/alt dolgusu (56px) rampa
 | yuksekliginden (kabin %14'u) buyuk tutuldu.
 | En kotu hal (saf beyaz fotograf) 0,72 platosunda 7,71:1.
 */
/*
 | PERDE KABI TAM GENISLIK - GORSEL OLARAK DOGRULANDI. Ilk halinde kap
 | `max-width: 44rem` idi ve 1280px'te fotografin uzerinde SERT KENARLI bir
 | dikdortgen olarak goruluyordu (gradyan yalnizca dikey oldugu icin sol/sag
 | kenarlar kesikti; ekran goruntusunde bir kusur gibi duruyordu). Bugun perde
 | hero'nun tam genisligini kapliyor, metin ise ic kapta (`.brt-hero__ic`)
 | daraltiliyor: kenar yok, olculen plato ayni.
 */
.brt-hero__soz {
  position: relative;
  width: 100%;
  padding: 56px clamp(20px, 5vw, 56px);
  text-align: center;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 16, 0) 0%,
    rgba(11, 18, 16, 0.72) 14%,
    rgba(11, 18, 16, 0.76) 86%,
    rgba(11, 18, 16, 0) 100%
  );
}

.brt-hero__ic {
  max-width: 44rem;
  margin-inline: auto;
}

.brt-hero__baslik {
  margin: 0 0 10px;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: clamp(42px, 8vw, 84px);
  font-weight: 600;
  line-height: 1.02;
  color: #ffffff;
}

.brt-hero__alt {
  margin: 0 0 26px;
  font-size: clamp(15px, 2vw, 18px);
  color: #ffffff;
}

/* YESIL CERCEVELI SEFFAF DUGME */
.brt-hero__dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-height);
  min-width: var(--brt-dokunma);
  padding: 0 30px;
  border: 2px solid var(--yesil-500);
  border-radius: var(--btn-radius);
  background: transparent;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--btn-tracking);
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.brt-hero__dugme:hover {
  background: var(--yesil-500);
  color: var(--on-accent);
  text-decoration: none;
}

/* ==========================================================================
   5) BOLUM BASLIGI
   ========================================================================== */

.brt-bolum {
  padding-block: clamp(44px, 6vw, var(--section-space));
}

.brt-bolum--gri {
  background: var(--surface);
}

.brt-bolum__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.brt-bolum__baslik {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
}

.brt-bolum__not {
  margin: 6px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
}

/* Bolum basliginin ustunde kisa CANLI YESIL cizgi - imza ayrinti. */
.brt-bolum__isaret {
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--yesil-500);
}

.brt-bolum__tum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 600;
}

/* ==========================================================================
   6) UC KATEGORI KARTI - TAM FOTOGRAF, KOYU DEGRADE, ORTADA AD
   ========================================================================== */

.brt-kat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--brt-izgara);
}

.brt-kat__oge {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--card-radius);
  aspect-ratio: 4 / 5;
  background: var(--gece-800);
  text-decoration: none;
}

.brt-kat__oge:hover {
  text-decoration: none;
}

.brt-kat__resim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 420ms var(--ease);
}

.brt-kat__oge:hover .brt-kat__resim {
  transform: scale(1.04);
}

/*
 | KATEGORI ADI - PLATOLU PERDE.
 | Alfa duraklari: 0 -> 0,74 -> 0,80. Iki durakta >= 0,70.
 | En kotu hal (saf beyaz fotograf) 0,80 platosunda 10,38:1; metnin gercekte
 | durdugu 0,74 bandinda 8,40:1.
 */
.brt-kat__ad {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 16, 0) 0%,
    rgba(11, 18, 16, 0.74) 22%,
    rgba(11, 18, 16, 0.8) 100%
  );
}

.brt-kat__isim {
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.2;
  color: #ffffff;
}

.brt-kat__adet {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #ffffff;
}

/* ==========================================================================
   7) URUN IZGARASI VE URUN KARTI
   --------------------------------------------------------------------------
   Kartta SEPETE EKLE YOKTUR (o urun sayfasinda). Kartin tamami TEK bir
   baglantidir: fotograf, marka, ad ve fiyat o baglantinin ICINDE durur -
   yani dokunma hedefi kartin tamamidir ve ekran okuyucu urunu iki kez
   okumaz. Karsilastirma denetimi baglantinin DISINDA, alt satirdadir
   (etkilesimli oge bir baglantinin icine konamaz).
   ========================================================================== */

/*
 | `auto-fill`, `auto-fit` DEGIL - GORSEL OLARAK OLCULDU. `auto-fit` bos
 | izleri COKERTIR: "Benzer ekipman" bolumunde yalnizca iki urun varken iki
 | kart 1280px'te ~600px genislige sisiyor ve fotograflar dev gorunuyordu
 | (tam sayfa ekran goruntusunde yakalandi). `auto-fill` bos izi yerinde
 | birakir, yani kart genisligi urun sayisindan BAGIMSIZ kalir. Dolu bir
 | rafta (8 urun) iki yazim aynidir: 1280px'te dort kolon.
 */
.brt-raf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--brt-izgara);
}

.brt-urun {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--card-radius);
}

.brt-urun__bag {
  display: block;
  color: var(--text);
  text-decoration: none;
}

.brt-urun__bag:hover {
  text-decoration: none;
}

.brt-urun__cerceve {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--card-radius);
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.brt-urun__resim {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 420ms var(--ease);
}

.brt-urun__bag:hover .brt-urun__resim {
  transform: scale(1.03);
}

.brt-urun__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 44px;
  color: var(--kul-300);
}

/* SOL USTTE DIKDORTGEN YESIL "%N" ROZETI - imza ayrinti.
   Kardes temalarda: quick yuvarlak kirmizi, tunga koseli kirmizi,
   orion yuvarlak yesil. Bu tema DIKDORTGEN (kosesiz) yesil kullanir. */
.brt-urun__isaret {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.brt-indirim {
  display: inline-block;
  padding: 5px 10px;
  background: var(--yesil-500);
  color: var(--on-accent);
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brt-etiket {
  display: inline-block;
  padding: 4px 9px;
  background: var(--gece-950);
  color: var(--gece-100);
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.brt-etiket--bitti {
  background: var(--danger);
  color: #ffffff;
}

.brt-urun__govde {
  padding: 12px 2px 0;
}

.brt-urun__marka {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.brt-urun__ad {
  display: block;
  margin-bottom: 6px;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--title);
}

.brt-urun__fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--title);
}

.brt-urun__fiyat del {
  font-size: 14px;
  font-weight: 400;
}

.brt-urun__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 0 2px 4px;
}

.brt-urun__ek {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ==========================================================================
   8) GENIS YATAY MANZARA BANDI - PARALLAX YOK (sabit fotograf)
   ========================================================================== */

.brt-bant {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  overflow: hidden;
  background: var(--gece-800);
}

.brt-bant__resim {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 | BANT SLOGANI - PLATOLU PERDE.
 | Alfa duraklari: 0 -> 0,72 -> 0,72 -> 0. Iki durakta >= 0,70.
 | En kotu hal (saf beyaz fotograf) 7,71:1.
 */
.brt-bant__soz {
  position: relative;
  max-width: 52rem;
  padding: 52px clamp(20px, 5vw, 48px);
  text-align: center;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 16, 0) 0%,
    rgba(11, 18, 16, 0.72) 18%,
    rgba(11, 18, 16, 0.72) 82%,
    rgba(11, 18, 16, 0) 100%
  );
}

.brt-bant__metin {
  margin: 0;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 3.6vw, 38px);
  line-height: 1.24;
  color: #ffffff;
}

/* ==========================================================================
   9) SAYFA YOLU
   ========================================================================== */

.brt-iz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-size: 13px;
  color: var(--muted);
}

.brt-iz a,
.brt-iz span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 6px;
  color: var(--muted);
}

.brt-iz span[aria-current] {
  color: var(--title);
}

.brt-iz a:hover {
  color: var(--accent-strong);
}

.brt-iz__ayrac {
  color: var(--border-strong);
}

.brt-iz__ayrac::before {
  content: "\203A";
}

/* ==========================================================================
   10) LISTE SAYFASI - SOL SUZGEC KOLONU YOK, USTTE TEK SATIR SUZGEC RAFI
   --------------------------------------------------------------------------
   Cekirdek liste sayfasi iki kolondur (solda 240px kalici suzgec). Bu tema
   suzgecleri listenin USTUNDE bir satirda, HER BIRI KENDI `<details>`
   cekmecesi olacak sekilde tasir; ama vast'tan farkli olarak cekmeceler
   ACILDIGINDA yerinde bir KART olarak asagiya duser (satiri kaplamaz) ve
   sonuc sayisi ile siralama AYNI satirin sagindadir.
   ========================================================================== */

.brt-liste__bas {
  padding-block: 8px 20px;
}

.brt-liste__ad {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 36px);
}

.brt-liste__not {
  margin: 8px 0 0;
  max-width: 70ch;
  color: var(--muted);
}

/*
 | ==========================================================================
 | TEK TEPSI - NICIN BOYLE (IKI OLCUM SONUCU)
 | ==========================================================================
 | Ilk yazimda her suzgec ayri bir `<details>` cekmecesiydi ve paneli MUTLAK
 | konumlaniyordu. Gercek tarayicida iki kusur olculdu:
 |
 |   (a) 360-414px'te sagdaki cekmecelerin paneli kabin sag kenarini 156px'e
 |       kadar asiyordu; `html { overflow-x: clip }` tasan kismi KIRPTIGI icin
 |       panelin sag yarisina HIC ULASILAMIYORDU - yatay kaydirma cubugu da
 |       olusmadigi icin kusur sessizdi.
 |   (b) BIRDEN FAZLA cekmece ayni anda acilabiliyor (sunucu, marka/fiyat/durum
 |       suzgeci etkinken o cekmeceleri `open` basiyor). Hepsi ayni noktaya
 |       mutlak konumlandigi icin PANELLER UST USTE BINIYORDU: 1280px'te 10
 |       denetim baska bir panelin altinda kaldi ve 44x44 vurus testi dustu.
 |
 | "Acilan cekmece esnek satirda %100 yer kaplasin" cozumu KULLANILMADI:
 | kardes `vast` temasi tam olarak onu yapiyor (vast.css bolum 9) ve iki tema
 | ayni cozume gitse liste sayfalari birbirinin kopyasi olurdu.
 |
 | BREATHE'IN COZUMU: TEK bir tepsi. Butun suzgec gruplari bir `<details>`
 | icinde, panel de IZGARA halinde. Tek panel oldugu icin ust uste binme
 | IMKANSIZ; genisligi satiri asamadigi icin tasma da imkansiz. Satirda
 | ayrica UYGULANAN SUZGECLERIN CIPLERI durur (her cip, o suzgeci kaldiran
 | gercek bir baglantidir) - boylece hangi suzgecin acik oldugu tepsiyi
 | acmadan gorunur.
 */
.brt-suz {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 14px;
  border-top: var(--brt-cizgi);
  border-bottom: var(--brt-cizgi);
}

.brt-tepsi {
  flex: 0 0 auto;
}

.brt-tepsi__ac {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 16px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--title);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.brt-tepsi__ac::-webkit-details-marker {
  display: none;
}

.brt-tepsi__ac::after {
  content: "\002B";
  color: var(--accent-strong);
  font-weight: 700;
}

.brt-tepsi[open] > .brt-tepsi__ac {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.brt-tepsi[open] > .brt-tepsi__ac::after {
  content: "\2212";
}

.brt-tepsi__sayi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--pill);
  background: var(--yesil-500);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/*
 | TEPSI PANELI: satirin sol kenarina hizali, genisligi SATIRI ASAMAZ
 | (`width: min(760px, 100%)` + `max-width: 100%`; konum kabi `.brt-suz`).
 | Mutlak konumlandigi icin urun izgarasini asagi ITMEZ - bu, kardes
 | temalardaki "acilan panel satiri buyutur" davranisindan bilincli farktir.
 */
.brt-tepsi__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% - 8px);
  left: 0;
  width: min(760px, 100%);
  max-width: 100%;
  max-height: 62vh;
  overflow-y: auto;
  padding: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.brt-tepsi__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px 22px;
}

.brt-tepsi__grup {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.brt-tepsi__grup > legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.brt-tepsi__baslik {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/*
 | IC ICE KAYDIRMA KALDIRILDI - OLCULDU. Grup listelerine ayrica
 | `max-height: 240px; overflow-y: auto` verilmisti; tepsi paneli de zaten
 | kayan bir kap (62vh). Ic ice iki kaydirma hem dokunmatik cihazda hangi
 | kabin kaydigini belirsiz birakiyor hem de gercek vurus olcumunde listenin
 | son satirinin 44px'lik hedefini kirpiyordu (768-1920px arasi 6-8 denetim).
 | Bugun TEK kaydirma kabi var: tepsi panelinin kendisi.
 */
.brt-tepsi__liste {
  max-width: 100%;
}

.brt-tepsi__dip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--brt-cizgi);
}

/* UYGULANAN SUZGEC CIPLERI - her biri o suzgeci KALDIRAN gercek baglanti. */
.brt-cip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 14px;
  border: 1px solid var(--primary-line);
  border-radius: var(--pill);
  background: var(--primary-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.brt-cip:hover {
  border-color: var(--primary);
  text-decoration: none;
}

.brt-cip::after {
  content: "\00D7";
  font-size: 16px;
  line-height: 1;
}

.brt-suz__sag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.brt-suz__sirala {
  min-height: var(--brt-dokunma);
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--title);
  font-size: 16px;
}

.brt-sayi {
  margin: 0;
  padding-block: 16px;
  font-size: 14px;
  color: var(--muted);
}

.brt-sayi strong {
  color: var(--title);
  font-size: 16px;
}

.brt-bos {
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--card-radius);
}

.brt-onay {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--brt-dokunma);
  font-size: 15px;
  cursor: pointer;
}

.brt-onay input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.brt-alan {
  display: block;
  margin-bottom: 12px;
}

.brt-alan > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.brt-alan input,
.brt-alan select,
.brt-alan textarea {
  width: 100%;
  min-height: var(--brt-dokunma);
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--title);
  font-family: inherit;
  font-size: 16px;
}

.brt-alan input:focus,
.brt-alan select:focus,
.brt-alan textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary-focus);
  outline-offset: 1px;
}

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

.brt-kat-bag {
  display: flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  font-size: 15px;
  color: var(--text);
}

.brt-kat-bag--kok {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--title);
}

.brt-kat-bag:hover,
.brt-kat-bag[aria-current='page'] {
  color: var(--accent-strong);
}

/* ==========================================================================
   11) SAYFALAMA
   ========================================================================== */

.brt-sayfa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-block: 34px;
}

.brt-sayfa a,
.brt-sayfa span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 15px;
}

/* "Sayfa X / Y" ozeti bir DENETIM DEGIL, bilgidir: yuvarlak cerceve almaz. */
.brt-sayfa__ozet {
  border: 0;
  padding-inline: 0;
  margin-right: 8px;
  color: var(--muted);
  font-size: 14px;
}

.brt-sayfa a:hover {
  border-color: var(--primary);
  color: var(--accent-strong);
  text-decoration: none;
}

.brt-sayfa .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.brt-sayfa .is-disabled {
  color: var(--muted);
  border-style: dashed;
}

/* ==========================================================================
   12) URUN SAYFASI
   --------------------------------------------------------------------------
   IMZA: SOL kolonda fotograflar IKI KOLONLU IZGARA halinde asagiya devam
   eder (tek buyuk gorsel + parmak izi seridi YOK, dikey yigin da YOK).
   SAG kolonda satin alma blogu ve ozellik TABLOSU. Altta "Teknik aciklama"
   ve "Bakim" bolumleri ALT ALTA - sekme ya da accordion YOK.
   ========================================================================== */

.brt-detay {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  padding-bottom: 40px;
}

.brt-foto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.brt-foto__kare {
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--surface);
  aspect-ratio: 4 / 5;
}

/* Tek fotografli urunde ilk kare IKI KOLONU kaplar: yaninda bos kutu
   birakmak "fotograf eksik" izlenimi verirdi. */
.brt-foto--tek .brt-foto__kare {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.brt-foto__resim {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brt-foto__bos {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  grid-column: 1 / -1;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 60px;
  color: var(--kul-300);
  background: var(--surface);
  border-radius: var(--card-radius);
}

.brt-satin {
  align-content: start;
}

/*
 | `display: flex` + `width: fit-content` — `inline-flex` DEGIL, OLCULDU.
 | `inline-flex` ile yazilan ilk halinde oge SATIR ICI dizeydi: 44px'lik
 | min-height satir kutusunu buyutmuyor, ogenin alt kismi ARDINDAN GELEN
 | <h1>'in alanina tasiyordu. Gercek vurus testinde 1280/1440/1920px'te
 | markanin ALT kenari `h1.brt-satin__ad` tarafindan orruluyordu (dokunma
 | hedefi 44x44 gorunurken fiilen 44x33'e iniyordu). Blok duzeyi bir esnek
 | kutu kendi 44px'ini AYIRIR.
 */
.brt-satin__marka {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  /*
   | 6px BOSLUK BIR SUS DEGIL, OLCUM SONUCU. `display: flex` yapildiktan sonra
   | da 1280/1440/1920px'te markanin ALT kenari vurulamiyordu: ardindan gelen
   | <h1> 38px Gilda Display ile ciziliyor ve o yazi tipinin cikici+inici
   | yuksekligi (yaklasik 45px) `line-height: 1.18` ile hesaplanan satir
   | kutusundan (44,84px) BUYUK. Fazlalik satir kutusunun USTUNE tasiyor, yani
   | h1'in metin kutusu markanin son pikselini ortuyor ve o noktada
   | elementFromPoint h1'i donduruyordu. 6px boslugu bu tasmayi tamamen
   | disarida birakiyor (yeniden olculdu: bes noktanin besi de markayi veriyor).
   */
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.brt-satin__ad {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
}

.brt-satin__kod {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.brt-satin__ozet {
  margin: 0 0 18px;
  color: var(--text);
}

.brt-fiyat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-top: var(--brt-cizgi);
  border-bottom: var(--brt-cizgi);
}

.brt-fiyat__tutar {
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--title);
}

.brt-fiyat__kdv {
  flex: 1 0 100%;
  font-size: 13px;
  color: var(--muted);
}

.brt-secim {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.brt-secim__ad {
  padding: 0;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.brt-secim__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brt-secim__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--brt-dokunma);
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--white);
  font-size: 15px;
  cursor: pointer;
}

.brt-secim__oge:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.brt-secim__oge input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.brt-boya {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--control-border);
  border-radius: 50%;
}

.brt-stok {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.brt-adet-sira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.brt-adet {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  overflow: hidden;
}

.brt-adet button {
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  border: 0;
  background: var(--white);
  color: var(--title);
  font-size: 19px;
  cursor: pointer;
}

.brt-adet button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.brt-adet input {
  width: 58px;
  min-height: var(--brt-dokunma);
  border: 0;
  border-inline: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--title);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* YESIL SEPETE EKLE - canli yesil zemin + neredeyse siyah metin (6,99:1).
   Beyaz metin bu yesilde 2,71:1 verirdi, yani WCAG'i gecmezdi. */
.brt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-height);
  min-width: var(--brt-dokunma);
  padding: 0 26px;
  border: 2px solid var(--yesil-500);
  border-radius: var(--btn-radius);
  background: var(--yesil-500);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--btn-tracking);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}

.brt-btn:hover {
  background: var(--yesil-400);
  border-color: var(--yesil-400);
  text-decoration: none;
}

/*
 | Devre disi dugmenin metni `--muted` iken #e2e5e0 uzerinde 4,35:1 olcuyordu.
 | WCAG 1.4.3 devre disi denetimleri muaf tutuyor ama "varyant secilmedi" hali
 | urun sayfasinda EN COK gorulen haldir (public/js/shop.js secim yapilana
 | kadar dugmeyi kapatiyor) - okunmasi gereken bir metin. `--control-border-
 | strong` ile ayni zeminde 5,15:1.
 */
.brt-btn:disabled,
.brt-btn[disabled] {
  background: var(--kul-200);
  border-color: var(--kul-300);
  color: var(--control-border-strong);
  cursor: not-allowed;
}

.brt-btn--genis {
  flex: 1 1 220px;
}

.brt-btn--bos {
  background: transparent;
  border-color: var(--control-border-strong);
  color: var(--title);
}

.brt-btn--bos:hover {
  background: var(--surface);
  border-color: var(--primary);
}

/* Sessiz metin denetimi (favori, karsilastirma, "sepete git"). */
.brt-btn--metin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.brt-btn--metin:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

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

/* ---- OZELLIK TABLOSU: kap kayar, tabloya display:block VERILMEZ ---- */

.brt-tablo-kap {
  max-width: 100%;
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}

.brt-tablo-kap:focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 0;
}

.brt-ozellik {
  border-collapse: collapse;
  min-width: 100%;
}

.brt-ozellik caption {
  padding: 12px 14px;
  background: var(--surface);
  color: var(--title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: left;
}

.brt-ozellik th,
.brt-ozellik td {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  text-align: left;
  vertical-align: top;
}

.brt-ozellik th {
  width: 42%;
  color: var(--muted);
  font-weight: 600;
}

.brt-ozellik td {
  color: var(--title);
}

/* ---- ALT ALTA BOLUMLER (sekme / accordion YOK) ---- */

.brt-yazi-bolum {
  padding-block: 32px;
  border-top: var(--brt-cizgi);
}

.brt-yazi-bolum__baslik {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.4vw, 26px);
}

.brt-yazi {
  max-width: 76ch;
  color: var(--text);
}

.brt-yazi h2,
.brt-yazi h3,
.brt-yazi h4 {
  margin: 22px 0 8px;
}

.brt-yazi ul,
.brt-yazi ol {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: revert;
}

.brt-madde {
  margin: 0 0 14px;
  max-width: 76ch;
}

.brt-madde li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.brt-madde li::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: var(--accent-strong);
  font-weight: 700;
}

.brt-yorum {
  padding: 16px 0;
  border-top: 1px dashed var(--border-strong);
}

.brt-yorum__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

.brt-yorum__kisi {
  color: var(--title);
  font-weight: 700;
}

.brt-yildiz {
  color: var(--warning);
  letter-spacing: 0.08em;
}

.brt-yorum-formu {
  max-width: 560px;
  margin-top: 20px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--card-radius);
}

/* ==========================================================================
   13) ALT BILGI - KOYU ZEMIN, EL YAZISI MARKA, DORT KOLON, BULTEN
   ========================================================================== */

.brt-bulten {
  padding-block: 34px;
  background: var(--gece-800);
  color: var(--gece-100);
}

.brt-bulten__sira {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.brt-bulten__baslik {
  margin: 0 0 4px;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  color: #ffffff;
}

.brt-bulten__alt {
  margin: 0;
  font-size: 14px;
  color: var(--gece-200);
}

.brt-bulten__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brt-bulten__form input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--btn-height);
  padding: 0 14px;
  border: 1px solid var(--kul-400);
  border-radius: var(--pill);
  background: var(--gece-900);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
}

.brt-bulten__form input::placeholder {
  color: var(--gece-200);
}

/* ==========================================================================
   13b) BULTEN MODULUNUN BANDI BU TEMANIN DILINDE
   --------------------------------------------------------------------------
   `shop.partials.bulten` (cift opt-in) alt bilgide `@includeIf` ile basiliyor
   ve modul KURULUYSA yukaridaki `.brt-bulten` bandi HIC basilmiyor (Blade
   tarafinda `@unless (Route::has('shop.bulten.kayit'))`). Yani ayni yuvada ya
   biri ya oteki durur; ikisi birden ASLA basilmaz (olcum: sayfa basina
   `name="email"` alan sayisi 1).

   NICIN OZGULLUK `[data-tema='breathe']`:
   Modulun kendi yaprak dosyasi (`css/shop-stok-bildirim.css`) GOVDEDEN
   yukleniyor, yani bu tema dosyasindan SONRA geliyor. Esit ozgullukte sonra
   gelen kazanir. Nitelik secicisi sinif duzeyindedir (0,2,0 > 0,1,0), bu
   yuzden yukleme sirasindan bagimsiz olarak tema kazanir. Fazladan bir
   sarmalayici <div> YAZILMADI: modul kurulu degilken sayfada bos bir cerceve
   kalmasin.

   KONTRAST (WCAG 2.1, olculdu):
     #ffffff basligi   / #16201b zemin -> 16,71:1
     #c9d0c9 govde     / #16201b zemin -> 10,62:1
     #8ecf6a hata      / #16201b zemin ->  8,98:1
   Cekirdek yaprak dosyasi hatayi `--primary-strong` (#22500f koyu yesil) ile
   basiyordu; koyu bandin uzerinde 1,47:1 olurdu, o yuzden burada eziliyor.
   ========================================================================== */

[data-tema='breathe'] .bulten {
  padding-block: 34px;
  border-top: 0;
  background: var(--gece-800);
  color: var(--gece-100);
}

[data-tema='breathe'] .bulten__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--brt-kenar);
}

[data-tema='breathe'] .bulten__baslik {
  margin: 0 0 4px;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
}

[data-tema='breathe'] .bulten__aciklama {
  max-width: 52ch;
  font-size: 14px;
  color: var(--gece-200);
}

[data-tema='breathe'] .bulten__aciklama strong {
  color: #ffffff;
}

[data-tema='breathe'] .bulten__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Yaprak dosyadaki `min-width: 240px` SABIT bir degerdir; 320px'lik ekranda
   tasmayi ancak `min-width: 0` serbest birakir. Yukseklik dokunma hedefi
   olcusune (44px) degil, bu temanin denetim boyuna (48px) esitlenir. */
[data-tema='breathe'] .bulten__form input[type='email'] {
  flex: 1 1 200px;
  min-width: 0;
  min-height: var(--btn-height);
  padding: 0 14px;
  border: 1px solid var(--kul-400);
  border-radius: var(--pill);
  background: var(--gece-900);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
}

[data-tema='breathe'] .bulten__form input[type='email']::placeholder {
  color: var(--gece-200);
}

[data-tema='breathe'] .bulten__hata {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--brt-kenar);
  color: var(--yesil-400);
}

.brt-alt {
  padding-top: 44px;
  background: var(--gece-950);
  color: var(--gece-100);
  font-size: 15px;
}

.brt-alt__sira {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-bottom: 34px;
}

.brt-alt__marka {
  margin: 0 0 8px;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

.brt-alt__metin {
  margin: 0 0 14px;
  max-width: 40ch;
  color: var(--gece-100);
  font-size: 14px;
}

.brt-alt__baslik {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #ffffff;
}

.brt-alt__bag {
  display: inline-flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  color: var(--gece-100);
  font-size: 14px;
}

.brt-alt__bag:hover {
  color: var(--yesil-400);
}

.brt-kanal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brt-kanal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  border: 1px solid var(--gece-700);
  border-radius: var(--pill);
  color: var(--gece-100);
}

.brt-kanal a:hover {
  border-color: var(--yesil-500);
  color: var(--yesil-400);
}

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

/* ==========================================================================
   14) PAYLASILAN PARCALAR (cekirdek shop.css yuklenmedigi icin burada)
   --------------------------------------------------------------------------
   alerts.blade.php, theme-preview.blade.php ve karsilastirma dugmesi bu
   temayla da basiliyor; siniflari burada tanimli olmasa RENKSIZ kalirlardi.
   ========================================================================== */

.alert {
  margin: 16px 0;
  padding: 13px 16px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--title);
  font-size: 15px;
}

.alert ul {
  margin: 0;
  padding-left: 18px;
  list-style: revert;
}

.alert--success {
  border-left-color: var(--success);
}

.alert--error {
  border-left-color: var(--danger);
}

.alert--info {
  border-left-color: var(--accent);
}

.tema-onizleme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--brt-kenar);
  background: var(--gece-800);
  color: var(--gece-100);
  font-size: 13px;
}

.tema-onizleme strong {
  color: #ffffff;
}

.tema-onizleme__ayrinti {
  color: var(--gece-200);
}

.tema-onizleme__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tema-onizleme form {
  display: inline-flex;
}

.tema-onizleme a,
.tema-onizleme button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding: 0 14px;
  border: 1px solid var(--kul-400);
  border-radius: var(--pill);
  background: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tema-onizleme__btn--birincil {
  background: var(--yesil-500);
  border-color: var(--yesil-500);
  color: var(--on-accent);
  font-weight: 700;
}

/* Karsilastirma dugmesi kendi yaprak CSS'ini @push ile bagliyor; olcusunu
   yalnizca dokunma hedefi icin sabitliyoruz. */
.krs-ekle__btn {
  min-height: var(--brt-dokunma);
}

/* ==========================================================================
   15) CEKIRDEK SINIF UYUMLULUK KATMANI - BREATHE DILINDE
   --------------------------------------------------------------------------
   NICIN GEREKLI: bu tema sekiz gorunumu eziyor, ama vitrinin geri kalani
   (sepet, odeme, hesabim, blog, iletisim, koleksiyon, kampanya, tema
   magazasi, karsilastirma rehberleri, sektor modulu sayfalari) CEKIRDEK
   gorunumlerdir ve cekirdek sinif sozlugunu kullanir. `css/shop.css`
   yuklenmedigi icin o sayfalar STILSIZ kalirdi - magazanin yarisi bozuk
   gorunurdu ve bu SESSIZ bir gerileme olurdu (hata yok, log yok).

   Bu yuzden cekirdegin PAYLASILAN bilesen sozlugu burada BREATHE'in kendi
   dilinde yeniden tanimlanir: 3px kose, 14px kart kosesi, tam yuvarlak
   dugme, canli yesil eylem, sicak gri yuzey.

   Modullerin kendi siniflari (lp-, elk-, oto-, ky-, krs-, dij-, abn-, bayi-,
   blog-, kol-, tm-, vl-, yapi-, mc-, teslimat, hediye, kombin, tazelik) kendi
   yaprak CSS dosyalarindan gelir ve bu temanin belirteclerini okur; onlari
   yeniden tanimlamak gerekmez.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--brt-kenar);
}

.section {
  padding-block: clamp(36px, 4.6vw, 64px);
}

.section--surface {
  background: var(--surface);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: clamp(22px, 2.8vw, 30px);
}

.eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* --- dugmeler: cekirdek adlari, breathe gorunumu --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-height);
  min-width: var(--brt-dokunma);
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--yesil-500);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--btn-tracking);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.btn:hover {
  background: var(--yesil-400);
  text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
  background: var(--kul-200);
  border-color: var(--kul-300);
  color: var(--control-border-strong);
  cursor: not-allowed;
}

.btn--navy,
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.btn--navy:hover,
.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn--gold {
  background: var(--yesil-500);
  border-color: var(--yesil-500);
  color: var(--on-accent);
}

.btn--outline,
.btn--ghost {
  background: transparent;
  border-color: var(--control-border-strong);
  color: var(--title);
}

.btn--outline:hover,
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--title);
}

.btn--sm {
  min-height: var(--brt-dokunma);
  padding: 0 16px;
  font-size: 14px;
}

.btn--lg {
  min-height: 54px;
  padding: 0 30px;
  font-size: 16px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.panel {
  margin-bottom: 20px;
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
}

.panel h2,
.panel h3 {
  margin-top: 0;
  font-size: 20px;
}

.panel__desc {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
}

.empty {
  padding: 52px 24px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--card-radius);
}

.field {
  margin-bottom: 14px;
}

.field > label,
.field label {
  display: block;
  margin-bottom: 5px;
  color: var(--title);
  font-size: 14px;
  font-weight: 600;
}

.field .hint {
  color: var(--muted);
  font-weight: 400;
}

.field input,
.field select,
.field textarea,
.filters input,
.filters select {
  width: 100%;
  min-height: var(--brt-dokunma);
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--title);
  font-family: inherit;
  font-size: 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary-focus);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
}

.field-error {
  margin-top: 4px;
  color: var(--danger);
  font-size: 13px;
}

.check,
.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--brt-dokunma);
  font-size: 15px;
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.radio-card {
  padding: 12px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.radio-card input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  overflow: hidden;
}

.qty button {
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  border: 0;
  background: var(--white);
  color: var(--title);
  font-size: 19px;
  cursor: pointer;
}

.qty input {
  width: 58px;
  min-height: var(--brt-dokunma);
  border: 0;
  border-inline: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--title);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.qtyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge--gold {
  background: var(--yesil-500);
  color: var(--on-accent);
}

.badge--success {
  background: var(--accent-soft);
  color: var(--success);
}

.badge--danger {
  background: #f7e3e1;
  color: var(--danger);
}

.badge--warning {
  background: #f6ecd6;
  color: var(--warning);
}

.badge--info {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge--muted {
  background: var(--surface);
  color: var(--muted);
}

.stars {
  color: var(--warning);
  letter-spacing: 0.08em;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--brt-izgara);
}

.pgrid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.pgrid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.pgrid--5 {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--brt-izgara);
}

/* Cekirdek liste sayfasi bu temada TEK kolondur: sol suzgec kolonu yerine
   suzgecler ustte yatay durur (temanin kendi kategori gorunumu de oyle). */
.listlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.filters h3 {
  font-size: 18px;
}

.filters__group {
  padding-block: 14px;
  border-bottom: var(--brt-cizgi);
}

.filters__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.filters__list {
  display: flex;
  flex-direction: column;
}

.filters__list a {
  display: flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  font-size: 15px;
  color: var(--text);
}

.filters__list a.is-active {
  color: var(--accent-strong);
  font-weight: 600;
}

.listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-block: var(--brt-cizgi);
}

.listbar select {
  min-height: var(--brt-dokunma);
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--title);
  font-size: 16px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-block: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Cekirdek sayfa yolu baglantilari da 44x44 kapisindan gecer. */
.breadcrumb a,
.breadcrumb span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 6px;
  color: var(--muted);
}

.breadcrumb span[aria-current] {
  color: var(--title);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-block: 30px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  padding-inline: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 15px;
}

.pagination .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.pagination .is-disabled {
  color: var(--muted);
  border-style: dashed;
}

/* --- sepet ve odeme --- */
.checkout,
.cartlayout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 26px;
}

.cartitem {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--brt-cizgi);
}

.cartitem__img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.cartitem__name {
  display: block;
  margin-bottom: 4px;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  color: var(--title);
}

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

.cartitem__total {
  font-size: 17px;
  font-weight: 700;
  color: var(--title);
}

.summary {
  padding: 20px;
  background: var(--surface);
  border-radius: var(--card-radius);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
  font-size: 15px;
}

.summary__row--total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-strong);
  font-size: 19px;
  font-weight: 700;
  color: var(--title);
}

.summary__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.accnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: 12px;
}

.accnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  font-size: 14px;
}

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

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 16px;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.steps__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--control-border);
  border-radius: var(--pill);
  font-size: 13px;
}

/* --- tablolar: KABI kaydirilir, tabloya display:block VERILMEZ --- */
.table-scroll,
.krs-tablo-kap,
.responsive {
  max-width: 100%;
  overflow-x: auto;
}

.datatable,
.kargo-tablo {
  border-collapse: collapse;
  min-width: 100%;
}

.datatable th,
.datatable td,
.kargo-tablo th,
.kargo-tablo td {
  padding: 11px 12px;
  border-bottom: var(--brt-cizgi);
  font-size: 15px;
  text-align: left;
}

.datatable th,
.kargo-tablo th {
  color: var(--title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* --- urun karti (cekirdek adlari; tema kendi kartini kullanir ama
       kombin / koleksiyon / karsilastirma sayfalari cekirdek karti basar) --- */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcard__flags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pcard__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--title);
  cursor: pointer;
}

.pcard__body {
  padding: 12px 14px;
}

/* `.pcard__brand` marka SAYFASINA giden bir baglantidir (cekirdek urun
   sayfasinda) - dokunma hedefi 44px olmak zorunda. Ilk yazimda 22px verildi
   ve DuyarlilikTest bunu yakaladi (secici testin etkilesimli listesinde
   ADIYLA yazili). */
.pcard__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.pcard__name {
  display: block;
  min-height: var(--brt-dokunma);
  margin-bottom: 6px;
  font-family: 'Gilda Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.3;
  color: var(--title);
}

.pcard__rating {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

.pcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--title);
}

.pcard__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
  margin-top: auto;
}

.pcard__stock {
  margin: 0;
  font-size: 13px;
}

/* --- metin yardimcilari --- */
.prose {
  max-width: 76ch;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
  margin: 22px 0 8px;
}

.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: revert;
}

.prose a {
  color: var(--accent-strong);
  text-decoration: underline;
}

.pdetail {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
}

.pinfo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

.pinfo__price {
  padding-block: 14px;
  border-block: var(--brt-cizgi);
  font-size: 24px;
  font-weight: 700;
  color: var(--title);
}

.pinfo__tax {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.pfeatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 10px;
  margin-top: 20px;
}

.pfeatures li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text);
}

.gallery__main {
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--surface);
}

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.gallery__thumb {
  width: 76px;
  min-height: var(--brt-dokunma);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: none;
  overflow: hidden;
  cursor: pointer;
}

.gallery__thumb.is-active {
  border-color: var(--primary);
}

.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: var(--brt-cizgi);
}

.tabs__btn {
  min-height: var(--brt-dokunma);
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.tabs__btn.is-active {
  color: var(--title);
  box-shadow: inset 0 -3px 0 var(--yesil-500);
}

.tabs__panel {
  display: none;
  padding-block: 22px;
}

.tabs__panel.is-active {
  display: block;
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.review {
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-strong);
}

.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--muted);
}

.review__author {
  color: var(--title);
  font-weight: 700;
}

.catnav__link,
.topbar__links a,
.ftr__links a,
.hdr__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--brt-dokunma);
  min-width: var(--brt-dokunma);
  justify-content: center;
}

/* Cekirdek alt bilgi ve baslik siniflari: bu tema kendi header/footer
   dosyalarini getiriyor, ama karsilastirma rehberleri ve blog gibi
   sayfalarda `.ftr` / `.hdr` yardimci siniflari yine gecebiliyor. */
.ftr {
  padding-top: 40px;
  background: var(--gece-950);
  color: var(--gece-100);
}

.ftr__main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 26px;
  padding-bottom: 30px;
}

.ftr h4 {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ftr a {
  color: var(--gece-100);
}

.ftr__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 16px;
  border-top: 1px solid var(--gece-700);
  color: var(--gece-200);
  font-size: 13px;
}

/* ==========================================================================
   16) DUYARLILIK - ONAYLI KIRILMA NOKTALARI
   ========================================================================== */

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

  .pdetail,
  .checkout,
  .cartlayout {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 900px) {
  /*
   | Baslik yuksekligi degisince hero'nun negatif ust boslugu da degismek
   | ZORUNDA: `:root` DEGIL `.tema-breathe` uzerinde eziliyor, cunku kontrast
   | kapisi yalnizca ilk `:root` blogunu okuyor ve tanim dosyasindaki
   | `tokens` degerleri tek yerde kalmali.
   */
  .tema-breathe {
    --brt-bas-h: 64px;
    --brt-tepe-h: 108px;
  }

  .brt-menu {
    display: none;
  }

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

  .brt-marka__ad {
    font-size: 30px;
  }

  .brt-bulten__sira,
  [data-tema='breathe'] .bulten__ic {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .brt-hero {
    min-height: 62vh;
  }

  .brt-hero__soz {
    padding: 40px 20px;
  }

  .brt-bant {
    min-height: 38vh;
  }

  .brt-raf,
  .pgrid,
  .pgrid--3,
  .pgrid--4,
  .pgrid--5,
  .catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brt-kat {
    grid-template-columns: minmax(0, 1fr);
  }

  .brt-kat__oge {
    aspect-ratio: 16 / 10;
  }

  .brt-urun__ad,
  .pcard__name {
    font-size: 16px;
  }

  .brt-ozellik th {
    width: auto;
  }
}

@media (max-width: 560px) {
  .brt-ust__orta {
    display: none;
  }

  /* Kelime markasinin altindaki slogan 560px altinda basilmaz: magaza adi
     zaten yazili ve uzun bir slogan basligin tek satirini zorluyordu. */
  .brt-marka__alt {
    display: none;
  }

  .brt-foto {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .brt-btn--genis {
    flex: 1 1 100%;
  }

  .cartitem {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .cartitem__img {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 420px) {
  .brt-hero__baslik {
    font-size: 38px;
  }

  .brt-raf,
  .pgrid,
  .pgrid--3,
  .pgrid--4,
  .pgrid--5,
  .catgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brt-suz {
    gap: 6px;
  }
}

/* Yatay modda (kisa ekran) tam ekran hero butun ekrani yutmasin. */
@media (max-height: 480px) {
  .brt-hero {
    min-height: 100%;
  }

  .brt-hero__soz {
    padding-block: 28px;
  }
}

/* ==========================================================================
   17) HAREKET AZALTMA - ZORUNLU BLOK (WCAG 2.3.3)
   --------------------------------------------------------------------------
   Vestibuler rahatsizligi olan kullanici icin hareket kapatilabilir olmak
   zorundadir. Sureleri sifirlamak yetmez: yumusak kaydirma ve scroll-snap da
   harekettir.
   ========================================================================== */

@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;
  }

  html {
    scroll-behavior: auto;
  }

  .brt-kat__oge:hover .brt-kat__resim,
  .brt-urun__bag:hover .brt-urun__resim {
    transform: none;
  }

  .brt-menu__bag::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .brt-menu__bag:hover::after,
  .brt-menu__bag[aria-current='page']::after {
    opacity: 1;
  }
}

/* ==========================================================================
   18) BASKI
   ========================================================================== */

@media print {
  .brt-tepe,
  .brt-cekmece,
  .brt-bulten,
  .bulten,
  .exit-offer,
  .brt-alt,
  .tema-onizleme,
  .brt-atla {
    display: none;
  }

  .brt-hero {
    min-height: 0;
    padding-top: 0;
  }

  .brt-hero-var .brt-tepe {
    margin-bottom: 0;
  }

  .brt-detay {
    grid-template-columns: minmax(0, 1fr);
  }

  body {
    color: #000000;
  }
}

/* ==========================================================================
   ÇEKİRDEK SINIF UYUMLULUK — DÜŞMAN DENETİMİNDE ÖLÇÜLEN BOŞLUKLAR
   --------------------------------------------------------------------------
   Bu tema `css/shop.css` YÜKLEMEZ. Ezilmeyen sayfalarda dokuz paylaşılan
   seçici için HİÇ kural yoktu. 1280px gerçek tarayıcıda CSSOM ile ölçüldü ve
   çekirdekle karşılaştırıldı (sepet DOLU + kupon UYGULANMIŞ hâlde — boş
   sepette bu sınıflar hiç basılmıyor ve ölçüm "sorun yok" diyordu):

     .contact-grid       tema: block, 1184x823  çekirdek: grid 530,9px+637,1px, 1200x563
     .coupon             tema: block, 405x44    çekirdek: flex, 334x44
     .cartlist           tema: kural 0, 713x231 çekirdek: 2 kural, 788x145
     .cartitem__right    tema: block, 92x72     çekirdek: grid, 94x107
     .radio-card__price  tema: block, 53x24     çekirdek: block, 47x45
     .stack              tema: block, 1138x207  çekirdek: grid, 481x247
     .center / .nowrap   tema: kural 0          çekirdek: 1 kural
     .panel--sss         tema: 820x72           çekirdek: 820x78

   EN CİDDİSİ `.contact-grid`: /iletisim iki kolonluk ızgarayken TEK KOLONA
   düşüyordu (823px yükseklik / çekirdek 563px). Değerler kopyalanmadı;
   breathe'in geniş, yumuşak köşeli diline göre seçildi.
   ========================================================================== */

.stack {
  display: grid;
  gap: 16px;
}

.center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

/* Sepet listesi: kart yüzeyi, yumuşak köşe, satır ayırıcıları içeride. */
.cartlist {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

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

/* Kupon: alan ve düğme AYNI SATIRDA. Blok kalınca alt alta iniyordu. */
.coupon {
  display: flex;
  gap: 8px;
  margin-block: 16px;
}

.coupon input {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 0;
  padding: 0 14px;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  font: inherit;
  /* 16px: iOS Safari odakta zorla yakınlaştırmasın. */
  font-size: 16px;
}

/* Ödeme/kargo seçim kartındaki tutar: sağa itilir, başlık ailesinde. */
.radio-card__price {
  margin-left: auto;
  color: var(--title);
  font-family: var(--font-heading);
  font-weight: 600;
}

.panel--sss {
  margin: 0;
  padding: 16px 20px;
}

/*
 | İLETİŞİM IZGARASI. Çekirdek bunu 900px ÜSTÜNDE iki kolona alıyor; breathe
 | 901'i kullanıyor (onaylı liste: 420 560 640 641 720 900 901 1040 1100).
 | `minmax(0, …)` zorunlu: çıplak `1fr` uzun e-posta adreslerinde kolonu
 | taşırıyor.
 */
@media (min-width: 901px) {
  .contact-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 640px) {
  .cartitem__right {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/*
 | TEMA ÖNİZLEME ŞERİDİ — panel kabuğu, vitrin tasarımı DEĞİL. Renkler tema
 | belirteçlerinden DEĞİL çekirdeğin koyu şeridinden gelir: hangi tema
 | önizlenirse önizlensin şerit aynı okunur kalmalı.
 | KONTRAST: #f4f5f5 / #18181b → 15,68:1
 */
.tema-onizleme__metin {
  min-width: 0;
}

.tema-onizleme__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  background: transparent;
  color: #f4f5f5;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.tema-onizleme__btn:hover {
  border-color: #52525b;
  background: #27272a;
}

.tema-onizleme__btn:focus-visible {
  outline: 3px solid #ffd479;
  outline-offset: 2px;
}

/* ==========================================================================
   HESABIM DÜZENİ + SİPARİŞ ADRESLERİ — ÖLÇÜLEN BOŞLUK
   --------------------------------------------------------------------------
   In-process HTTP çekirdeğiyle MÜŞTERİ oturumu açılarak ölçüldü: breathe.css'te
   .acclayout · .statcards · .statcards--3 · .statcard (hesap panosu) ve
   .addr-grid (sipariş ayrıntısındaki teslimat/fatura adresi ikilisi) için
   SIFIR kural vardı. `.accnav` zaten vardı, `.acclayout` yoktu — yani yan menü
   biçimliydi ama ana içeriğin YANINA GEÇMİYORDU.
   Kırılma noktaları 901 · 641 · 640: hepsi onaylı listede.
   ========================================================================== */

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

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

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

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

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

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

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

.addr-grid--bosluklu {
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 641px) {
  .addr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@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İ — SONRADAN BAĞLANAN MODÜL BLOKLARI
   --------------------------------------------------------------------------
   Bu turda bu temaya dört genişletme noktası geri kondu (çıkış teklifi,
   bülten, bayi fiyat şeridi, stok bildirimi). Modüllerin markup'ı ÇEKİRDEKTEN
   geliyor ve çekirdeğe DOKUNULMADI; ölçümde eşiğin altında kalan iki hedef
   temanın kendi CSS'inde düzeltildi.

   GERÇEK TARAYICIDA ÖLÇÜLDÜ (9 genişlik: 320·360·390·414·768·1024·1280·1440·
   1920; iframe içinde, getBoundingClientRect):

     .stokbildirim__onay   → 768px ve 1024px'te 42px YÜKSEKLİK (metin iki
                             satıra düşüyor). Onay kutusunun kendisi 18x18;
                             vuruş hedefi ETİKETİN TAMAMIDIR (etikete tıklamak
                             kutuyu değiştirir), bu yüzden düzeltme etikete
                             `min-height` vererek yapıldı. `align-items` BİLEREK
                             `flex-start` bırakıldı: dört satırlık KVKK metninde
                             kutuyu ortalamak onu metnin ortasına kaydırırdı.

     .bayi-panel a         → satır içi bağlantı ("Hızlı toplu sipariş"),
                             15-37px yükseklik ölçüldü. `inline-flex` +
                             `min-height` seçildi; `display: block` vermek
                             bağlantıyı cümleden koparırdı.

   `.exit-offer__close` ÖLÇÜLDÜ VE DÜZELTME GEREKTİRMEDİ: çekirdek dosya zaten
   44x44 veriyor. Ölçümde 43,12x43,12 görünmesinin nedeni paneldeki AÇILIŞ
   ANİMASYONUNUN `scale(0.98)` karesinde yakalanmasıydı; animasyon
   durdurulduğunda 44x44 ölçüldü.
   ========================================================================== */

[data-tema='breathe'] .stokbildirim__onay {
  min-height: var(--brt-dokunma);
}

[data-tema='breathe'] .bayi-panel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--brt-dokunma);
}


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

/*
 * BREATHE — İKİ FOTOĞRAF BANDININ ARASINDAKİ NEFES.
 *
 * Bu temanın ritmi tam genişlik bölümlerden oluşuyor ve bölümler arası
 * boşluk cömert. Yuva o cömertliği izler: 56px. Ayırıcı olarak temanın
 * kendi YEŞİL işaret çizgisi (`.brt-bolum__isaret` diliyle aynı) etiketin
 * soluna küçük bir çizgi olarak konur — çerçeve değil, işaret.
 */
[data-tema='breathe'] .reklam {
  --reklam-bosluk: 56px;
}

/* Kenar çubuğu yuvası bu temada YOK (tek kolon liste); yine de bir gün
   açılırsa dar kolonda boşluk küçülsün. */
[data-tema='breathe'] .reklam--kenar-cubugu {
  --reklam-bosluk: 32px;
}

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

[data-tema='breathe'] .reklam__etiket::before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--accent, var(--primary));
}

/* Yuvanın kabı: temanın bölüm ritmiyle aynı yatay iç boşluğu kullanır. */
[data-tema='breathe'] .brt-reklam-serit {
  margin: 0;
  padding: 0;
}

/* Dolmayan yuva çöktüğünde işaret çizgisi de gitsin. */
[data-tema='breathe'] .reklam--bos .reklam__etiket::before {
  display: none;
}

@media (max-width: 640px) {
  [data-tema='breathe'] .reklam {
    --reklam-bosluk: 36px;
  }
}