/*
 * MOTOTEKER — Bilesen katmani
 * Master Plan V4.1.1 §6.2 / §6.6 / §6.8 · DESIGN.md
 *
 * KURAL: Ham renk kodu YOK — her deger tokens.css'ten gelir.
 * Bu dosya hem public hem panel duzenine hizmet eder; ayni buton
 * her yerde ayni gorunur (product register).
 *
 * Bilerek YAPILMAYANLAR:
 *   - yan-serit kenarlik (border-left: 4px) — yasak
 *   - gradyan, cam efekti, gradyan metin
 *   - bolum ustu kucuk buyuk-harf etiket
 *   - kenarlik + genis golge ayni ogede
 */

/* ==========================================================================
   Temel
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-default);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
}

/*
 | PANEL ZEMINI — Tur 3, F2.
 |
 | `--surface-muted` (1,092:1) yerine `--surface-page` (1,17:1). Fark
 | kucuk gorunuyor ama kartin siniri artik hem zeminden hem guclenen
 | kenarliktan okunuyor. Gerekce ve olcum `tokens.css`te.
 |
 | ⛔ PUBLIC SITE DISARIDA. Orada zemin BEYAZ olmak zorunda: tam
 | genislikte bolumler, hero perdesi ve urun seridi beyaz uzerine
 | kurulu bir dil. Panel bir belge, vitrin bir sahne.
 |
 | ⚠️ KARAR GUNCELLENDI, IPTAL EDILMEDI — 18 Agustos 2026 (revize m.15).
 |
 | Ayrimin kendisi dogru: panel bir belge, vitrin bir sahne. Kusur,
 | MUSTERININ YANLIS TARAFA konmus olmasiydi. `/hesabim` ve giris
 | ekranlari `body.panel` tasiyordu, yani musteri yonetim paneliyle ayni
 | zemini goruyordu ve `/sepet`ten `/hesabim`a gecince arama kutusunu,
 | sepet sayacini, dil secicisini ve altbilginin tamamini kaybediyordu.
 |
 | Musteri artik MAGAZA tarafinda: `body.panel` yalniz yonetim ve bayi
 | panelinde. `PanelSiniriTest` bunu kilitliyor.
 */
body.panel { background: var(--surface-page); }

/*
 | BASLIK OLCUSU ILE SATIR YUKSEKLIGI/HARF ARALIGI CIFT HALINDE.
 |
 | Onceden dordune de tek bir `--leading-tight` (1.2) ve tek bir
 | `-0.02em` veriliyordu. 21px'lik bir h3 icin 1.2 cok siki, 32px'lik
 | bir h1 icin gevsek kaliyordu; harf araligi ise kucuk baslikta fazla,
 | buyukte azdi. Her adim artik kendi ciftini tasiyor.
 */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-tight);  letter-spacing: var(--track-heading); }
h2 { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight);  letter-spacing: var(--track-heading); }
h3 { font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-snug);   letter-spacing: var(--track-title); }
h4 { font-size: var(--text-lg);  font-weight: 600; line-height: var(--leading-snug);   letter-spacing: var(--track-title); }

p { margin: 0 0 var(--space-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Govde metni okunur genislikte kalir. */
.metin { max-width: var(--olcu-genislik); }

/*
 | ==========================================================================
 | TIPOGRAFI DISIPLINI — 11 Agustos 2026
 | ==========================================================================
 |
 | 1. SAHTE ITALIK VE SAHTE KALIN KAPALI.
 |
 | Depoda italik yuz YOK. `<em>` bes yonetim ekraninda ve `<blockquote>`
 | musteri yorumlarinda kullaniliyordu; tarayici govde yuzunu EGEREK
 | sahte italik uretiyordu — "profesyonel degil"in en klasik gostergesi.
 | Italik dosya eklemek dosya sayisini ikiye katlar (~130 KB); vurgu
 | agirlik ve renkle veriliyor, bedava.
 |
 | `font-synthesis-weight: none` ayni gerekceyle: degisken yuz zaten
 | 300..800 arasini gercekten cizebiliyor, tarayicinin kalinlastirmasina
 | gerek yok — ve dusmesi gereken bir durum olursa sahte kalin yerine
 | dogru agirligi gormek isteriz.
 */
body {
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

em, i, cite { font-style: normal; font-weight: 600; color: var(--text-default); }
blockquote { font-style: normal; }

/*
 | 2. RAKAM DISIPLINI — hizalanan rakam.
 |
 | Bu bildirimlerin bes tanesi 11 Agustos'a kadar OLU IDI: `tnum`
 | ozelligi Inter altkumelerinden dusmus durumdaydi (`pyftsubset`
 | varsayilan `--layout-features` listesinde `tnum` yoktur). Olculdu:
 | Inter 400'de rakam genislikleri 833..1323 arasinda degisiyordu,
 | yani "1" ile "4" arasinda 490 birim (%37) fark vardi ve fiyat
 | sutunlari alt alta kaymiyordu — CSS bunu acikca istedigi hâlde.
 |
 | Font yeniden altkumelendi; bu blok artik gercekten calisiyor.
 */
:where(
  table,
  .tutar, .fiyat, .fiyat-belirsiz,
  .grafik-deger, .veri-listesi dd,
  .hesap-sayac, .sayfalama,
  .kunye-satirlar dd,
  input[type="number"], time
) {
  font-variant-numeric: tabular-nums lining-nums;
}

/*
 | 2b. KUCUK METIN HARF ARALIGI — Tur 4, T3'te BAGLANDI.
 |
 | ⛔ UC BELIRTEC TANIMLIYDI VE HICBIRI CAGRILMIYORDU:
 |     --track-ui     0.005em   15px
 |     --track-small  0.012em   13px
 |     --track-micro  0.020em   12px
 |
 | Tur 1'de "16px notr nokta; yukari cikinca negatif, asagi ininci
 | pozitif" diye bir olcek kuruldu ama yalniz NEGATIF yarisi
 | baglandi. Kucuk metin duzeltmesiz kaldi ve kimse fark etmedi —
 | belirtec tanimli oldugu icin is bitmis GORUNUYORDU.
 |
 | Barlow'a gecince onemi artti: olculdu, Barlow Inter'den %13 DAR
 | ciziliyor. Yani ayni puntoda harfler birbirine daha yakin ve
 | acilmaya en cok ihtiyac duyan yer kucuk metin.
 |
 | ⚠️ 77 KURALIN HEPSINE YAZILMADI. `--text-sm` 52, `--text-xs` 24
 | kuralda geciyor ve hepsini elle duzenlemek 77 kirilma sansi
 | demekti. Onun yerine metnin KOSU halinde okundugu yerler secildi —
 | harf araligi tek kelimede degil, dizide fark eder.
 |
 | ⚠️ `--track-body` SILINDI: degeri 0'di, yani "duzeltme yok"
 | demekti. `letter-spacing: 0` yazan bir kural gurultu; notr nokta
 | artik yalniz belirtec yorumunda anlatiliyor.
 |
 | ⛔ `.kaps`, `th` ve oteki buyuk harf kosulari BURADA YOK — onlarin
 | kendi `--track-caps` degeri var ve o cok daha genis (0.060em).
 | Ikisi ust uste binmesin diye `:where()` kullaniliyor: ozgulugu
 | sifir, yani sonraki her kural onu rahatca eziyor.
 */
:where(td, .dugme, .bos-durum, .kunye-satirlar dt, .kunye-satirlar dd) {
  letter-spacing: var(--track-ui);
}

:where(.rozet, .cip) {
  letter-spacing: var(--track-small);
}

/*
 | ⚠️ `.dot` BURAYA YAZILMADI VE SEBEBI OLCULDU: `.teknik, .sku, .dot,
 | .ebat` kurali ona zaten `--track-tech` veriyor ve o kuralin
 | ozgulugu 0-1-0. `:where()` ile yazilan bir kural (ozgulugu 0) onu
 | HIC EZEMEZDI — yani satir yazilir, ekranda hicbir sey degismezdi.
 | Olu bir kural eklemek, eksik kuraldan kotudur: sonraki okuyan
 | "burasi halledilmis" sanir.
 */

/*
 | 3. TEKNIK DIZGI — SKU, DOT, ebat, yuk/hiz endeksi.
 |
 | `slashed-zero` bir sus degil: `EG-ATT1015-12080-18-R-TT` icinde
 | 0 ile O karisirsa yanlis urun aranir.
 |
 | `ligatures: none` cunku JetBrains Mono kod ligaturleri tasiyor
 | (`--`, `->`) ve bu diziler bayi notlarinda ve SKU'larda geciyor;
 | birlestirilirlerse kod okunamaz hale gelir.
 */
.teknik, .sku, .dot, .ebat,
.olcu-serit, .olcu-serit-ek {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
  font-variant-ligatures: none;
  letter-spacing: var(--track-tech);
}

/*
 | 4. BUYUK HARF KOSUSU — `case` olmadan buyuk harf hep amatordur.
 |
 | Kucuk harf yuksekligine gore cizilmis parantez, tire, kesme ve ₺
 | isaretini KAIDE YUKSEKLIGINE tasir; "(58W)" ve "1.234,56 ₺" buyuk
 | harf icinde tam da bu yuzden alcak duruyordu. `cpsp` buyuk harf
 | kosusuna fontun kendi optik nefesini ekler.
 |
 | TURKCE KOSULU: bu sinifi tasiyan ogenin en yakin `lang` atasi
 | METNIN dili olmali. `lang="tr"` icinde Ingilizce bir dize
 | buyutulurse "title" -> "TİTLE" olur. KULLANICI URETIMI ICERIKTE
 | KULLANILMAZ.
 */
.kaps,
th,
.yan-menu-baslik,
.footer-baslik {
  text-transform: uppercase;
  font-feature-settings: "case" 1, "cpsp" 1;
  letter-spacing: var(--track-caps);
  line-height: var(--leading-caps);
}

/*
 | ⛔ TANIMLAYICI BUYUTULMEZ — yukaridaki kuralin kendi uyarisinin somut
 | hali. Bir KOD (`sehir_ici`) dil tasimaz; `lang="tr"` altinda buyutulunce
 | `SEHİR_İCİ` oluyor ve ekranda YANLIS bir tanimlayici gorunuyor. Kavram
 | sozlugu ekraninda goruldu: yonetici o kodu veri dosyasiyla eslestirmek
 | zorunda ve eslestiremiyordu.
 |
 | Harf araligi da sifirlaniyor: `letter-spacing` bir kod dizisini okunmaz
 | yapar, ozellikle alt cizgili adlarda.
 */
th code {
  text-transform: none;
  letter-spacing: normal;
}

/* ==========================================================================
   Component katmani — resources/views/components/*.blade.php
   ==========================================================================
   Bu bloktaki siniflarin tek tuketicisi component dosyalari. Elle
   yazilmalari beklenmiyor; component'in isi zaten dogru sinifi vermek.
   ========================================================================== */

/*
 | BASLIK OLCULERI — `<x-baslik olcu="...">`.
 |
 | Her adim UC degeri birlikte tasiyor (boyut + satir yuksekligi + harf
 | araligi). Component'in varlik sebebi bunlari ayrilamaz kilmak: elle
 | yazilan basliklarda en sik hata punto buyutup leading'i eski birakmak.
 */
.baslik-hero    { font-size: var(--text-hero);    line-height: var(--leading-hero);    letter-spacing: var(--track-hero); }
.baslik-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--track-display); }
.baslik-4xl     { font-size: var(--text-4xl);     line-height: var(--leading-display); letter-spacing: var(--track-display); }
.baslik-3xl     { font-size: var(--text-3xl);     line-height: var(--leading-tight);   letter-spacing: var(--track-heading); }
.baslik-2xl     { font-size: var(--text-2xl);     line-height: var(--leading-tight);   letter-spacing: var(--track-heading); }
.baslik-xl      { font-size: var(--text-xl);      line-height: var(--leading-snug);    letter-spacing: var(--track-title); }
.baslik-lg      { font-size: var(--text-lg);      line-height: var(--leading-snug);    letter-spacing: var(--track-title); }

/* Baslik ailesiyle cizilen basliklar — `<x-baslik display>`. */
h1.baslik-display-ailesi, h2.baslik-display-ailesi,
h3.baslik-display-ailesi, h4.baslik-display-ailesi { font-family: var(--font-display); font-weight: 700; }

/*
 | Baslik ustu mikro etiket. Bolum ustu "eyebrow" deseninin kendisi
 | DESIGN.md'de yasakli degil; yasak olan onu KUCUK BUYUK HARF (small
 | caps) ile cizmek — Inter'de gercek small-caps yok, tarayici sentetik
 | uretiyor ve agirlik tutmuyor. Burada gercek buyuk harf kullaniliyor.
 */
.baslik-ust {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text-muted);

  /*
   | Harf araligi Tur 4'te eklendi. 12px BUYUK HARF, olcegin en kucuk
   | ve en sikisik noktasi; `--track-micro` (0.020em) degil
   | `--track-caps-sm` (0.040em) yaziliyor cunku buyuk harf kosusu
   | kucuk harften belirgin daha fazla nefes ister — `İ`nin noktasi
   | ve `Ş`nin kuyrugu komsu harfe deger.
   */
  letter-spacing: var(--track-caps-sm);
}

/*
 | TUTAR OLCULERI — `<x-tutar boyut="...">`.
 | `.tutar` taban kurali yukarida; bunlar yalniz olcu degistiriyor.
 */
.tutar-lg      { font-size: var(--text-lg); }
.tutar-2xl     { font-size: var(--text-2xl); }
.tutar-display { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; letter-spacing: var(--track-display); }

/*
 | "Deger yok" ile "sifir" AYRI SEYLER ve ayri gorunmeliler. Fiyati
 | girilmemis bir urune 0,00 ₺ yazmak, o urunun bedava oldugunu soyler.
 */
.tutar-yok { color: var(--text-muted); }

/*
 | EBAT ENDEKSI — "120/70ZR-17 (58W)" icindeki yuk/hiz kismi.
 | Ebattan bir tik kisik: asil bilgi olcu, endeks ek bilgi.
 */
.ebat-endeks { color: var(--text-muted); }
.ebat-endeks abbr { text-decoration: none; border-block-end: 1px dotted currentColor; cursor: help; }

/*
 | SKU KIRILMASI. `overflow-wrap: anywhere` kodu ORTASINDAN kirar ve
 | okunmaz hale getirir; tireden kirmak dogru yer.
 */
.sku { word-break: keep-all; overflow-wrap: break-word; hyphens: none; }

/* Ikon olcu sarmali — `<x-ikon boyut="...">`. */
.ikon-kap { display: inline-flex; align-items: center; }
.ikon-kucuk .ikon { inline-size: var(--ikon-sm); block-size: var(--ikon-sm); }
.ikon-buyuk .ikon { inline-size: var(--ikon-xl); block-size: var(--ikon-xl); }

/* ==========================================================================
   Gradyansiz derinlik — DESIGN.md gradyan yasagi korunuyor
   ==========================================================================
   Yasak keyfi degil: 5 Agustos'ta MACH BANDI sorunu yasandi (tek
   segmentli dogrusal rampanin uclarinda goz var olmayan bir kenar
   uretiyor) ve 10 Agustos'ta iki perde seridi sahibin kendi istegiyle
   kaldirildi. Derinlik gradyanla degil, KATMANLA uretiliyor.
   ========================================================================== */

/*
 | ⛔ BURADA IKI OLU KURAL VARDI — Tur 4'te silindi.
 |
 |   `.yukselti`     dort katmanli golge merdiveni
 |   `.isikli-kenar` bir piksellik ic golge ("isik alan ust kenar")
 |
 | Ikisi de guzel yazilmisti ve HICBIR EKRANDA KULLANILMIYORDU. Tarandi:
 | blade, php ve js havuzunda adlari hic gecmiyor, parcali kurulan bir
 | sinif da degiller.
 |
 | ⚠️ OLU KURAL ZARARSIZ DEGIL: okuyani "bu var, kullanilabilir" diye
 | yaniltir ve birlestirme kararlarini bozar. Golge gerektiginde tema
 | zaten `--shadow-sm/md` belirteclerini veriyor; dorduncu bir yol
 | tutmak, hangisinin dogru oldugunu belirsizlestiriyordu.
 */

/* ==========================================================================
   Urun seridi (slider) — Revize m.1
   ==========================================================================
   Sahibinin istegi: sagdan sola kayan, mouse ustune gelince duran ve
   uzerinde durulan lastigin %40 buyudugu bir serit.

   SIFIR JAVASCRIPT. Uc davranisin ucu de CSS'te ve bu bir gosteris
   degil zorunluluk: CSP `script-src 'self'` altinda bir slider
   kutuphanesi zaten calismaz, elle yazilan JS ise klavye ve ekran
   okuyucu yukunu beraberinde getirirdi.
   ========================================================================== */

.serit-kabuk {
  /*
   | Kenar yumusatma SVG MASKEYLE. `mask-image: linear-gradient(...)`
   | isini gorurdu ama gradyan yasagi regex'i kural govdesinde
   | `linear-gradient` ariyor ve `mask-image` baglaminda oldugunu
   | bilmiyor. Gecis, ait oldugu yere — bir vektor dosyasinin icine —
   | tasindi.
   */
  mask-image: url("/img/kenar-solma.svg");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.urun-serit,
.yorum-serit {
  /*
   | JS KAPALIYKEN DE KULLANILIR: serit elle kaydirilabilir bir liste.
   | Animasyon bir ZENGINLESTIRME, tasiyici degil.
   */
  overflow-x: auto;
  overflow-y: hidden;

  /*
   | ⛔ `overflow-y: hidden` KALDIRILAMAZ ve `visible` yapilamaz: bir
   | eksende tasma gizliyse obur eksen de `visible` olamaz (CSS kurali),
   | yazilsa bile `auto`ya cevrilir ve bu sefer dikey kaydirma cubugu
   | dogar. Buyuyen kart bu yuzden seritten disari CIKAMAZ.
   |
   | Cozum kartin kacmasi degil, seride SIGACAK KADAR YER acmak.
   | `--space-4` buyume orani 1.12 icin olculdu; ikisi birlikte
   | degistirilir (bkz. `.urun-serit-oge:hover`).
   */
  scrollbar-width: none;
  padding-block: var(--space-4);
}

.urun-serit::-webkit-scrollbar,
.yorum-serit::-webkit-scrollbar { display: none; }

.urun-serit-ray,
.yorum-serit-ray {
  display: flex;
  gap: var(--space-3);
  inline-size: max-content;
  padding-inline: var(--space-3);
}

/*
 | Kart olcusu SABIT: akiskan birakilsaydi animasyon mesafesi ekran
 | genisligine gore degisir ve dikis yeri kaymaya baslardi.
 */
.urun-serit-oge { inline-size: 17rem; flex: none; }

/*
 | YORUM OGESI URUN OGESINDEN GENIS: icinde bir cumle var, bir ebat
 | degil. 17rem'de alinti dort bes satira boluniyor ve kayarken
 | okunmuyor; 24rem'de iki uc satirda bitiyor.
 |
 | ⚠️ SABIT OLCU ZORUNLU — ustteki notun aynisi: akiskan birakilsaydi
 | animasyon mesafesi ekran genisligine gore degisir ve dikis yeri
 | kaymaya baslardi.
 */
.yorum-serit-oge { inline-size: 24rem; flex: none; }

/* ==========================================================================
   YORUM KARTI SERIT ICINDE — 16 Agustos 2026
   ==========================================================================
   Izgara ile serit AYNI karti basiyor; asagidakiler yalnizca seride ozel
   olan farklar. Ortak gorunum yukarida, `.yorum-karti` altinda.
   ========================================================================== */

/*
 | ESIT YUKSEKLIK. Ray `display: flex` ve ogeler varsayilan olarak
 | geriliyor; kart da `block-size: 100%` alinca en uzun yorum boyu
 | belirliyor ve KAYARKEN kartlar zipzip inip cikmiyor.
 */
.yorum-serit-oge > .yorum-karti {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: none;
}

/*
 | FOTOGRAF SABIT ORANDA. Musteri fotograflari her olcude geliyor
 | (telefon dikey, fotograf makinesi yatay); serbest birakilsaydi her
 | kart baska yukseklikte olurdu ve serit dalgalanirdi.
 |
 | `cover`, `contain` DEGIL: bu bir sahne fotografi, urun cekimi degil.
 | Kirpmak sahneyi daraltir ama urunu yanlis tanitmaz.
 */
.yorum-serit-oge .yorum-karti-gorsel {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--surface-muted);
}

.yorum-serit-oge .yorum-karti-gorsel img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 | IMZA KART DIBINDE. Yorumlar farkli uzunlukta; imzalar ayni hatta
 | oturmazsa serit kayarken alt kenar titriyor gibi gorunur.
 |
 | ⚠️ SECICI UZUN, cunku `.yorum-karti figcaption` (0,1,1) tek sinifli
 | bir kurali yener. Teknoloji kartinda ayni tuzaga bir kez dusuldu:
 | kural yazilir, `auto` sessizce `0` olur.
 */
.yorum-serit-oge .yorum-karti figcaption { margin-block-start: auto; }

/*
 | ALINTI DORT SATIRDA KESILIR. Kayan bir seritte sekiz satirlik bir
 | yorum okunmuyor; okunmayan metin kart yuksekligini de sisiriyor.
 |
 | ⛔ BILGI KAYBI DEGIL: tam metin Hakkimizda'daki IZGARADA kesilmeden
 | duruyor. Serit bir vitrin, arsiv degil.
 */
.yorum-serit-oge .yorum-karti blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/*
 | ⚠️ HAREKET AZALTMA KAPISI BILEREK YOK — SAHIBININ KARARI (11 Agustos 2026).
 |
 | Ilk surum bu blogu `@media (prefers-reduced-motion: no-preference)`
 | icine almisti. Sonuc olculdu: sahibinin Windows'unda animasyon
 | efektleri kapali oldugu icin Chrome `reduce` bildiriyor ve serit HIC
 | kaymiyordu. Sahibi bunu gorunce net konustu: *"kapali olsa dahi
 | oynamasi lazim, zorunluluk yani"*.
 |
 | Karar kabul edildi ve kapi kaldirildi. Ama tavizin ne oldugu burada
 | yazili dursun:
 |
 |   KAYBEDILEN  Vestibuler rahatsizligi olan bir kullanici icin
 |               isletim sistemi tercihi ARTIK DINLENMIYOR. Bu bir
 |               WCAG ihlali DEGIL (2.3.3 AAA seviyesinde ve
 |               "etkilesimle tetiklenen" hareketi kapsiyor), ama
 |               yaygin kabul goren bir nezaket kuralindan sapma.
 |
 |   KORUNAN     WCAG 2.2.2 (Duraklat/Durdur/Gizle) — A SEVIYESI ve
 |               ZORUNLU. 5 saniyeden uzun, otomatik baslayan hareketin
 |               durdurulabilir olmasi gerekiyor ve MEKANIZMA VAR:
 |               fareyle uzerine gelmek ya da sekme tusuyla serit
 |               icine odaklanmak animasyonu aninda durduruyor.
 |               Asagidaki `animation-play-state: paused` kurali bu
 |               yuzden pazarliga acik DEGIL — o kalkarsa madde ihlal
 |               edilir.
 |
 | Yani: hareket her makinede baslar, ama her kullanici durdurabilir.
 |
 | `tokens.css` icindeki GLOBAL `prefers-reduced-motion` blogu yerinde
 | duruyor ve sitedeki oteki butun gecisleri kapatmaya devam ediyor;
 | bu istisna YALNIZ urun seridine ait.
 */

/*
 | KAYMA. Sure kart sayisina degil, MESAFEYE gore secildi: 8 kart ×
 | (17rem + 1.5rem bosluk) ≈ 296px/sn'lik sakin bir hiz. Daha hizlisi
 | okunmuyor, daha yavasi durmus gibi gorunuyor.
 |
 | `translate3d` DEGIL `translateX`: ucuncu eksen yok ve GPU katmani
 | zaten `will-change` ile isteniyor.
 |
 | ⛔ `!important` KALKTI — Tur 4, T5. Burada su yaziyordu: *"`!important`
 | GEREKLI ve tek kullanildigi yer burasi: `tokens.css` global
 | hareket-azaltma blogu `animation-duration: 0.01ms !important` yaziyor
 | ve ozgulluk yarisi onu kazandirir."*
 |
 | Dogruydu — ama olcegi yoktu. Her yeni istisna ayni yolla eklenseydi
 | dagilmis bir `!important` yigini kalirdi ve hangi animasyonun neden
 | acik oldugu okunamaz hale gelirdi.
 |
 | Artik tek bir kapi var: sarmalayici `data-hareket="zorunlu"`
 | tasiyor (`public/home.blade.php`) ve `tokens.css`teki global blok
 | isaretli ogeyi ve TORUNLARINI disarida birakiyor.
 |
 | ⚠️ DAVRANIS DEGISMEDI: serit hareket azaltma isteyen makinede de
 | doner — sahibinin karari buydu. Degisen sey yalnizca istisnanin
 | NEREDE ilan edildigi: kural icinde gizli bir `!important` degil,
 | isaretlemede gorunur bir oznitelik.
 */
/*
 | ⛔ URUN SERIDI BU KURALDAN CIKARILDI — 23 Agustos 2026.
 |
 | `serit-kay` KUSURSUZ DONGU ICIN CIFT KART KUMESINE MUHTAC: animasyon
 | tam bir kume genisligi kayinca basa doner ve dikis yeri gorunmez.
 | Coverflow'a gecerken o kopya kaldirildi (dongu artik aritmetik), yani
 | animasyon tek kume uzerinde donseydi her turda GORUNUR bir sicrama
 | olurdu.
 |
 | Urun seridinin JS'siz tabani bu yuzden artik "kendiliginden kayan"
 | degil, "elle kaydirilabilir" bir liste — zaten ustteki yorumun
 | vaat ettigi taban da oydu: *"JS kapaliyken de kullanilabilir: serit
 | zaten `overflow-x: auto`."*
 |
 | ⚠️ YORUM SERIDI DEGISMEDI: o hâlâ kumesini iki kez basiyor
 | (`yorum-serit.blade.php`), dolayisiyla marquee orada dogru calisiyor.
 */
.yorum-serit-ray {
  animation: serit-kay 46s linear infinite;
  will-change: transform;
}

/*
 | DURMA — WCAG 2.2.2 icin ZORUNLU (yukariya bak). `:hover` fare icin,
 | `:focus-within` KLAVYE icin; ikisi ayni satirda cunku ayni davranis.
 | Yalniz `:hover` yazilsaydi sekme tusuyla gezen kullanici hareket
 | eden bir seride odaklanmis olur ve okuyamazdi.
 */
/*
 | ⚠️ Buradaki `!important` de Tur 4'te KALKTI — sebebi ustteki ile
 | ayni. Global blogu yenmek icin konmustu; artik o blok bu agacin
 | icine hic girmiyor. Ozgulluk zaten yetiyor: `.urun-serit:hover
 | .urun-serit-ray` (0-2-0) > `.urun-serit-ray` (0-1-0).
 |
 | Muafiyet kurali `animation-play-state`e DOKUNMUYOR — yalniz sure,
 | tekrar ve gecikmeyi geri aliyor. Yani durdurma hicbir sey ile
 | yarismyor.
 */
.urun-serit:hover .urun-serit-ray,
.urun-serit:focus-within .urun-serit-ray,
.yorum-serit:hover .yorum-serit-ray,
.yorum-serit:focus-within .yorum-serit-ray { animation-play-state: paused; }

@keyframes serit-kay {
  from { transform: translateX(0); }
  /*
   | Tam olarak BIR KUME genisligi kadar. Kume iki kez basildigi icin
   | -%50 sonunda ekrandaki goruntu baslangicla ayni olur ve donus
   | gozle secilmez.
   */
  to   { transform: translateX(-50%); }
}

/*
 | %40 BUYUME. `transform` disinda hicbir sey degismiyor — genislik ya
 | da kenar boslugu animasyonu komsu kartlari da iterdi ve serit
 | titrerdi.
 |
 | `z-index` gerekli: buyuyen kart komsularinin ALTINDA kalirdi.
 | Deger token'dan; keyfi bir 999 yok.
 */
.urun-serit-oge .kart-urun {
  /*
  | ⚠️ `block-size: 100%` — 18 Agustos 2026'da eklendi.
  |
  | `.urun-serit-oge` bir esnek oge ve en uzun kadar UZUYOR; ama kendisi
  | `display: block` oldugu icin ICINDEKI kart uzamiyordu. Olculdu:
  | oge 393px, kart 190px. Aradaki 203px, kartin BEYAZ ZEMINININ
  | bittigi yerden sonra acikta kalan bosluktu — sahibi anasayfada
  | "kart ortada kesilmis, alti bombos" diye gordu.
  |
  | Yan fayda: `.kart-urun-alt`in `margin-top: auto`u ancak kart kutusu
  | doldugunda ise yarar; artik butun seritte fiyatlar AYNI CIZGIDE.
  */
  block-size: 100%;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/*
 | ⛔ BUYUME ORANI SERIDIN YUKSEKLIGINE BAGLIDIR — ikisi birlikte
 | degistirilir. Sebep bir CSS kurali: `.urun-serit` yatayda elle
 | kaydirilabilsin diye `overflow-x: auto` tasiyor ve bir eksende
 | tasma gizlenmisse OBUR EKSEN `visible` OLAMAZ. Yani buyuyen kart
 | seritten disari TASAMAZ; sigmayan kadari kirpilir.
 |
 | ⚠️ Ilk surum `scale(1.4)` idi (sahibinin ilk istegi "%40 buyusun").
 | Olculdu: kart 430px, serit 478px, 1.4 ise 602px istiyor — ustten ve
 | alttan 62'ser piksel KIRPILIYORDU. Sahibi 12 Agustos 2026'da bunu
 | gorup revize etti: "cok kotu buyuyor ve buyudugunde kart hala ayni
 | cizginin altinda kaliyor."
 |
 | 1.12 secildi cunku 430 x 1.12 = 482px ve serit `--space-4` nefes
 | payiyla 494px — kirpilma yok, iki tarafta 6px pay kaliyor.
 | Orani buyutmek isteyen `.urun-serit` padding'ini de buyutmeli:
 | gereken pay = kart yuksekligi x (oran - 1) / 2.
 */
.urun-serit-oge:hover .kart-urun,
.urun-serit-oge:focus-within .kart-urun {
  transform: scale(1.12);
  position: relative;
  z-index: var(--z-dropdown);
  box-shadow:
    0 1px  1px  color-mix(in srgb, var(--brand-navy-950) 4%, transparent),
    0 2px  4px  color-mix(in srgb, var(--brand-navy-950) 5%, transparent),
    0 8px  16px color-mix(in srgb, var(--brand-navy-950) 6%, transparent),
    0 20px 40px color-mix(in srgb, var(--brand-navy-950) 8%, transparent);
}

/*
 | KENARDAKI KART DISARI TASMASIN. Ilk kart soldan, son kart sagdan
 | buyurse yarisi kirpilirdi; buyume yonu kenara gore ayarlaniyor.
 */
.urun-serit-oge:first-child .kart-urun { transform-origin: left center; }
.urun-serit-oge:last-child  .kart-urun { transform-origin: right center; }

.serit-alt { margin-block-start: var(--space-2); text-align: center; }

/* ==========================================================================
   COVERFLOW KIPI — 23 Agustos 2026
   ==========================================================================
   Ustteki butun kurallar SERIDIN JS'SIZ HALINI anlatiyor ve oldugu gibi
   duruyor: yatay kaydirilabilir bir liste. Asagidakiler yalnizca
   `[data-serit-hazir]` varken devreye giriyor — o niteligi
   `one-cikan-serit.js` kendi kendine koyuyor.

   ⛔ SIRA BOYLE OLMAK ZORUNDA. CSS'i once coverflow'a kurup JS ile geri
   almak, betik hic yuklenmezse USTUSTE BINMIS bir kart yigini birakirdi.
   Zenginlestirme her zaman calisan halin USTUNE yazilir.

   ⚠️ IKI ESKI DAVRANIS BURADA KAPANIYOR:
     `serit-kay` animasyonu  — hareketi artik betik yonetiyor
     hover buyutme (1.12)    — 3B donusumle ayni ozellik uzerinde
                               yarisirdi; kart hem egilip hem buyuyemez
   ========================================================================== */

[data-serit-hazir] .urun-serit {
  overflow: hidden;

  /*
   | Bakis mesafesi kart genisliginin katı. Kucuk sayi = yakin goz =
   | daha sert perspektif.
   |
   | ⚠️ 3 -> 1.8, tarayicida secildi. 21st'in 3'u kare kapak icin
   | dogru; bizim uzun kartta geri cekilme neredeyse gorunmuyordu ve
   | egim bir "yana yatma" gibi okunuyordu.
   */
  perspective: calc(var(--serit-kart) * 1.8);

  /*
   | ⛔ KENDI YIGIN BAGLAMINI KURUYOR. Betik kartlara 0-9 arasi z-index
   | yaziyor; `isolation` olmasaydi bu sayilar sayfanin genel yiginina
   | karisir ve bir kartin acilmis bir menunun ustune cikmasi mumkun
   | olurdu.
   */
  isolation: isolate;
}

[data-serit-hazir] .urun-serit-ray {
  position: relative;
  display: block;
  inline-size: 100%;
  padding-inline: 0;
  transform-style: preserve-3d;

  /* Yatay surukleme bizim; dikey kaydirma sayfanin. */
  touch-action: pan-y;
  cursor: grab;


  /*
   | ⛔ YUKSEKLIK BURADA DEGIL, BETIKTE.
   |
   | Once `calc(var(--serit-kart) * 1.62)` yaziyordu ve o oran bir
   | TAHMINDI. Dar ekranda tutmadi: kart genisligi 208px'e inerken metin
   | (aile adi, cipler, fiyat) kucultmuyor, kart 374px kaliyor ama
   | hesaplanan yukseklik 337px oluyordu — 375px'te olculdu, kartin
   | alt 37px'i kirpiliyordu.
   |
   | Betik en uzun karti olcuyor ve yuksekligi ondan yaziyor. Oran diye
   | bir sey kalmadi.
   */

  animation: none;
}

[data-serit-hazir] .urun-serit-ray:active { cursor: grabbing; }

/*
 | ⛔ GORSEL YUKSEKLIGI SERITTE SABIT — 23 Agustos 2026.
 |
 | Sahibi bildirdi: *"kartin alti ortadaki yer fazla kacti, fiyati bile
 | gozukmuyor."* Olculdu (1920px, merkez kart):
 |
 |     kart          384 x 477
 |     gorsel        382 x 287   — kartin %60'i
 |     olcu serit    382 x  45
 |     govde         382 x 143   — ad + cipler + fiyat, hepsi bu kadar
 |
 | Sebep: `.kart-urun-gorsel` `aspect-ratio: 4/3` tasiyor, yani
 | YUKSEKLIGI GENISLIKTEN turuyor. Kart 272px'ten 384px'e cikinca gorsel
 | 204px'ten 287px'e firladi — ama ad, cip ve fiyat SABIT punto. Metin
 | buyumedi, gorsel buyudu; oran bozuldu.
 |
 | ⚠️ `aspect-ratio` GLOBAL OLARAK DEGISTIRILMEDI: ayni kural
 | `/lastikler` izgarasinda da geciyor ve orada kart 272px, oran dogru.
 | Duzeltme yalniz coverflow kipinde.
 |
 | 13rem = 208px — kartin ozgun genisligindeki gorsel yuksekligiyle
 | (204px) neredeyse ayni. Yani lastik "her zamanki" boyunda kaliyor,
 | kart uzamiyor.
 */
[data-serit-hazir] .kart-urun-gorsel {
  aspect-ratio: auto;
  block-size: 13rem;
}

[data-serit-hazir] .urun-serit-oge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: var(--serit-kart);
  will-change: transform, opacity;
}

/*
 | ⛔ HOVER BUYUTME KAPALI. Ustteki kural `transform: scale(1.12)`
 | yaziyor; coverflow ayni ozelligi her karede yeniden yaziyor. Ikisi
 | ayni anda acik kalsaydi kazanan, olayin sirasina gore degisirdi —
 | yani kart bazen egilir bazen buyurdu.
 */
[data-serit-hazir] .urun-serit-oge:hover .kart-urun,
[data-serit-hazir] .urun-serit-oge:focus-within .kart-urun {
  transform: none;
  box-shadow: var(--shadow-md);
}

/* --- Denetimler: JS yokken hic gorunmezler --- */

.serit-denetim { display: none; }
[data-serit-hazir] .serit-denetim { display: flex; }

.serit-oklar {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.serit-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /*
   | 44px — dokunma hedefi tabani. `--dokunma-hedefi` bu is icin var.
   */
  inline-size: var(--dokunma-hedefi);
  block-size: var(--dokunma-hedefi);

  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
  color: var(--text-default);
  cursor: pointer;
}

.serit-ok:hover { background: var(--surface-muted); }
.serit-ok:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.serit-noktalar {
  align-items: center;
  justify-content: center;
  gap: var(--space-1);

  /*
   | ⛔ SARABILMELI — 296/375/640'ta OLCULDU, ucunde de tasiyordu.
   |
   | Nokta sayisi urun sayisi kadar; her nokta 24px dokunma hedefi.
   | Sekiz urunle gosterge 248px oluyor, iki okla birlikte 320px —
   | 281px'lik gorunur alani asiyor. Kap `justify-content: center`
   | tasidigi icin tasma IKI YANA birden dagiliyordu: sol ok -35px'te,
   | sag ok +36px'te. Yani "ortalanmis" bir satir sessizce sayfayi
   | yatay kaydiriyordu.
   |
   | `min-inline-size: 0` olmadan flex cocugu icerik genisliginin
   | altina inemez; ikisi birlikte gerekiyor.
   */
  flex-wrap: wrap;
  min-inline-size: 0;
}

/*
 | ⛔ NOKTA GORSEL OLARAK KUCUK, DOKUNMA HEDEFI OLARAK DEGIL.
 | Gorunen daire 8px; tiklanabilir alan seffaf dolguyla 24px'e
 | cikiyor. WCAG 2.5.8 gorunen boyutu degil, HEDEF boyutunu olcuyor.
 */
.serit-nokta {
  appearance: none;
  border: 0;
  padding: var(--space-1);
  background: none;
  cursor: pointer;
  line-height: 0;
}

.serit-nokta::before {
  content: "";
  display: block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  opacity: 0.35;
}

.serit-nokta[aria-current="true"]::before {
  background: var(--action-secondary);
  opacity: 1;
}

.serit-nokta:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-pill); }

/*
 | URUN KARTI GORSELI — Faz 2'de eklendi, kosullu basiliyor.
 |
 | `aspect-ratio` SABIT: gorseller farkli olculerde geliyor ve kart
 | yuksekliginin gorselden gorsele degismesi izgarayi bozardi.
 | `object-fit: contain` cunku lastik cekimleri seffaf zeminli ve
 | kirpilirsa lastigin bir parcasi kaybolur.
 */
.kart-urun-gorsel {
  /*
  | ⚠️ `relative` — REV-54 rozeti buranin SOL ALTINA konumlaniyor.
  | Kartin kendisine gore konumlansaydi gorseli olmayan kartlarda
  | boslukta asili kalirdi.
  */
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-muted);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  overflow: hidden;
}

/*
| --- Distributor firma garantisi rozeti — Tur 3, F9 (REV-54) -------------
|
| Sahibinin WhatsApp gorselindeki istek: gorselin SOL ALTINDA.
|
| ⚠️ `z-index` GEREKLI: kartta yayilan baglanti deseni var (baslik
| baglantisinin `::after`'i kartin tamamini kapliyor). Rozet onun altinda
| kalirsa GORUNUR ama uzerine gelen imlec baglantiyi gosterir — okunan
| sey ile tiklanan sey ayrisir. Rozet bir baglanti DEGIL; ustte durup
| kendi olarak okunmali.
|
| ⚠️ `pointer-events: none` — rozet tiklamayi YUTMUYOR: kartin tamami
| urune gitmeye devam ediyor. Ustte durmasi gorunurluk icin, tiklama
| calmak icin degil.
*/
.kart-rozet-garanti {
  position: absolute;
  inset-block-end: var(--space-1);
  inset-inline-start: var(--space-1);
  z-index: 1;
  pointer-events: none;
  padding: 0.15rem var(--space-1);
  border-radius: var(--radius-control);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  /*
  | Uzun etiket dar kartta tasmasin: kart genisliginin en fazla
  | dortte ucunu kaplar, gerekirse iki satira iner.
  */
  max-inline-size: 75%;
}

.kart-urun-gorsel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/*
| --- GORSELSIZ KART: olcu paneli — 18 Agustos 2026 ---------------------
|
| 44 aktif SKU'nun 3'unde fotograf yok. Once bu kartlarda medya yuvasi
| HIC basilmiyordu; sonuc anasayfa seridinde olculdu: serit ogesi
| 393px, icindeki kart 190px, altta 203px beyaz delik.
|
| ⛔ YER TUTUCU DEGIL. "Resim yok" ikonu ya da bos gri cerceve,
| hicbir sey dememekten kotu olurdu. Panelde duran sey GERCEK VERI:
| lastigin ebadi ve pozisyonu — fotografin tuttugu yeri tutuyor.
|
| Zemin `--surface-inverse`: gorselli kartta bu yuksekligin ALTINDA
| duran olcu seridi zaten laciverttir. Gorselsiz kartta o serit hic
| basilmiyor (sablonda `@if`), yani iki lacivert blok UST USTE GELMEZ;
| serit yukari tasinip panele donusmus oluyor.
|
| `aspect-ratio` gorselinkiyle AYNI (4:3) — iki kart turu izgarada ve
| seritte ayni yuksekligi tutar; satir raggedlesmez.
*/
.kart-urun-gorsel-yazi {
  display: grid;
  place-content: center;
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

/*
| Rozet panelin sol altinda duruyor (`.kart-rozet-garanti` mutlak
| konumlu, kapsayici `.kart-urun-gorsel` zaten `relative`). Ebat
| ORTALANMIS oldugu icin ikisi carpismaz; dip dolgusu rozete ait.
*/
.kart-urun-gorsel-ebat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  text-align: center;
}

/*
| ⚠️ `--text-lg` DEGIL: bu ebat artik bir bant satiri degil, kartin
| gorsel capasi. Ince bantta 19px dogruydu; 4:3 bir panelin ortasinda
| ayni deger kaybolur.
*/
.kart-urun-gorsel-yazi .olcu-serit-ebat {
  font-size: var(--text-2xl);
  line-height: 1.15;
}

/*
| Rozet fotografli kartta ACIK zemin uzerinde duran LACIVERT bir cip.
| Lacivert panelde ayni deger cipi zemine yapistiriyor: yazi okunuyor
| (beyaz/lacivert 19.47:1) ama etiket olmaktan cikip serbest metne
| donusuyor. Zemin bir tik kaldirilip sac teli bir cerceve veriliyor.
|
| ⚠️ `border` DEGIL `inset box-shadow`: kenarlik kutuyu 2px buyutur ve
| rozetin sol/alt bosluklari fotografli kartlarla ayrisirdi.
*/
.kart-urun-gorsel-yazi .kart-rozet-garanti {
  background: color-mix(in srgb, var(--text-inverse) 12%, var(--surface-inverse));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-inverse) 24%, transparent);
}

/* ==========================================================================
   Anasayfa bayi haritasi — Revize m.2
   ==========================================================================
   Yeri bilincli: urun seridi (acik zemin) ile musteri yorumlari (beyaz)
   arasinda, sahibinin gosterdigi noktada. Kendi zemini `--surface-sunken`
   — ardisik iki beyaz bolum yan yana gelmesin diye.
   ========================================================================== */

.bolum-harita { background: var(--surface-sunken); }

.harita-arama { margin-block: var(--space-3) var(--space-2); }

/* Alan ve dugme ayni taban cizgisinde otursun. */
.harita-arama form { align-items: end; }
.harita-arama .alan { flex: 0 1 18rem; }
.harita-arama .dugme { min-block-size: var(--dokunma-hedefi); }

/*
 | Harita TAM GENISLIKTE: bir Turkiye haritasi 1180px kabin icinde kucuk
 | bir kutu gibi duruyordu.
 |
 | Boy `.bayi-harita`dan geliyor; burada YALNIZ ust bosluk var. Sabit
 | `block-size: 30rem` kaldirildi: iki harita ayni kabi paylasiyor ve
 | farkli yukseklik yazmak, anasayfa ile /bayiler'i farkli davranmaya
 | zorluyordu.
 */
.harita-genis {
  margin-block-start: var(--space-3);
}

/* Dar ekranda kisalir; 26rem telefonda ekranin yarisini yerdi. */
@media (max-width: 720px) {
  .bayi-harita { block-size: 20rem; }
}

/* ==========================================================================
   BAGLANTI SISTEMI — Tur 4 · sahibi "cok cirkin" dedi ve hakliydi
   ==========================================================================
   ⛔ PROJE BAGLANTININ NASIL GORUNECEGINE HIC KARAR VERMEMISTI.
   Taban kural yalnizca `a { color }` idi; ALT CIZGI TARAYICI
   VARSAYILANIYDI. Yani "guzel" duran her baglanti tek tek
   `text-decoration: none` yazarak kacmisti — 20'den fazla kural.
   Karar veren yoktu, kacan vardi.

   --- ALT CIZGI KALDIRILAMAZ, OLCULDU ---

   `--text-link` ile `--text-default` arasindaki kontrast **1,61:1**
   (tarayicida olculdu). WCAG 1.4.1 (G183) govde metni icinde alt
   cizgiyi ancak 3:1 varsa kaldirmaya izin veriyor. 1,61 < 3 — yani
   renk TEK BASINA ayirt edici olamaz ve alt cizgi ZORUNLU.

   ⚠️ DEGERLER BURAYA HAM YAZILMIYOR: ham hex yalniz `tokens.css`te
   durur ve tarama YORUMLARI DA okur. Renkleri gormek icin belirtec
   tanimlarina bakilir.

   Soru "kaldirayim mi" degil, "nasil DOGRU cizerim" idi.

   --- OFFSET: 0.22em, CUNKU BARLOW'UN UZANTILARI 0,20em ---

   Tarayicida olculdu (canvas, 100px):
       g 20 · ğ 20 · ç 19 · ş 19 · y 20 · p 19  (piksel, kaide alti)

   Varsayilan alt cizgi (~0,08em) tam bunlarin ICINDEN geciyor.
   Turkce'de `ğ ç ş` neredeyse her kelimede var, yani carpisma istisna
   degil KURAL.

   ⚠️ `skip-ink` TEK BASINA COZMEZ: harflerin cevresine bosluk koyar ve
   her kelimede uc dort bosluk olunca cizgi KEMIRILMIS gorunur.
   Cozum cizgiyi uzantilarin ALTINA indirmek. `skip-ink` yine de acik
   birakiliyor — daha derine inen nadir bir glif (`Q`, bazi rakam
   kuyruklari) icin ikinci savunma.

   --- RENK: %60 karisim = 3,04:1, KEYFI DEGIL ---

   Alt cizgi bir sus degil; WCAG'in dayandigi RENK DISI ISARET. Yani
   metin degil ama ANLAMLI bir gostergedir ve 1.4.11'in 3:1 esigini
   gecmesi gerekir. Olculen adaylar:

       %30 → 1,66:1   %40 → 2,00:1   %50 → 2,44:1
       %55 → 2,72:1   %60 → 3,04:1   %70 → 3,78:1

   %60 esigi gecen ILK deger. Daha koyusu (kelimenin kendi rengi,
   7,45:1) cizgiyi metinle esit agirliga cikarir ve okumayi bolerdi;
   daha acigi esigin altina duser.

   --- KALINLIK: 1px, `from-font` DEGIL ---

   Barlow'un kendi alt cizgi metrigi 17px govdede kaba cikiyor.
   Sabit 1px hem ongorulebilir hem net.

   --- HOVER: RENK DEGIL, AGIRLIK ---

   Uzerine gelince cizgi kelimenin kendi rengine ve 2px'e cikiyor.
   Durum degisikligi boylece renk korlerine de ulasiyor.
   ========================================================================== */

a {
  color: var(--text-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--text-link) 60%, var(--surface-default));
  text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              text-decoration-thickness var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

a:hover,
a:focus-visible {
  color: var(--action-secondary-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/*
 | --- ARAYUZ BAGLANTILARI: ALT CIZGI YOK ---
 |
 | WCAG 1.4.1 bir baglantinin METIN BLOGU ICINDE ayirt edilmesini
 | duzenliyor. Kirinti yolu, footer listesi ve gezinti bir metin blogu
 | DEGIL — her ogesi zaten baglanti. Orada alt cizgi bilgi tasimiyor,
 | yalnizca gurultu.
 |
 | ⛔ AYRICA GERCEK BIR KUSURU DA COZUYOR. Isaretlemede `<a>` ile
 | icerigi ayri satirlarda yazildiginda satir sonu BIR BOSLUK olarak
 | ciziliyor ve ALT CIZGI ONUN DA ALTINDAN GECIYOR — kelime bitiyor,
 | cizgi devam ediyor. Sahibinin ekran goruntusunde gorunen tam olarak
 | buydu ("Lastikler " + cizgi).
 |
 | Olculdu: dokuz public sayfada 81 alti cizili baglantinin **49'unda**
 | ic bosluk vardi ve 49'unun HEPSI footer ya da kirinti yolu — yani
 | duz metin icindeki baglantilar degil. Alt cizgi kalkinca kusur
 | kokunden gidiyor, 49 yerde isaretleme duzeltmeye gerek kalmadan.
 |
 | ⚠️ FOOTER'IN KENDI ICINDE ZATEN TUTARSIZDI: `.footer-liste a`
 | alti cizili degildi ama hemen yanindaki iletisim `<dl>`'i ve sosyal
 | `<ul>`'u ciziliydi. Karar verilmis, uc listeden birine uygulanmisti.
 | Kural artik `footer.ana a` — footer'da duz metin yok, istisna da yok.
 |
 | Odak ve hover'da cizgi GERI GELIYOR: renk disi isaret kaybolmuyor,
 | yalnizca dinlenme halinde susuyor.
 */
:where(footer.ana, .kirinti, nav.birincil, .yan-menu, header.ana) a {
  text-decoration-line: none;
}

:where(footer.ana, .kirinti, nav.birincil, .yan-menu, header.ana) a:hover,
:where(footer.ana, .kirinti, nav.birincil, .yan-menu, header.ana) a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/*
 | KIRINTI YOLU. Ayri bir sinif cunku `.not` yalnizca "kisik sesli
 | metin" demek ve kirinti yolu bir gezinti — ikisini ayni ada
 | baglamak, birine dokununca otekini bozardi.
 */
.kirinti {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Odak: her etkilesimli ogede gorunur, marka mavisi. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-control);
}

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

/* ==========================================================================
   Duzen
   ========================================================================== */

.kap { max-width: var(--kap-genislik); margin: 0 auto; padding-inline: var(--space-3); }

/*
 | ⛔ CATI KABI GOVDE KABINDAN GENIS — 16 Agustos 2026.
 |
 | Sahibi ekran goruntusuyle gosterdi: catidaki yazilar "cok daraşık,
 | küçük" duruyordu. Olculdu ve sebep sanilanin disindaydi:
 |
 |     ekran            1720px
 |     cati kabi        1180px  (`--kap-genislik`)
 |     EKRANDA BOSTA    540px
 |     kabin ICINDE artan  0px
 |
 | Yani cati dar oldugu icin degil, KABA KAPALI oldugu icin sikisikti.
 | 540px bos dururken gezinti boslugu 8px'e sikismisti.
 |
 | `--kap-genislik` bir OKUMA olcusudur: govde metni 1180px'ten genis
 | olmamali, goz satir sonundan satir basina donerken kaybolur. Cati
 | metin degil KABUK; o olcuye uymasi icin hicbir sebep yok.
 |
 | ⚠️ YALNIZ CATI. Footer ve icerik `--kap-genislik`te kaliyor: onlarin
 | icinde okunacak metin var.
 */
/*
 | ⚠️ BOSLUK BURADA DEGIL. Cati kabinin `gap`i asagida, 1024px ustu
 | blogunda tanimli (`header.ana .kap`). Buraya bir `gap` yazmak
 | OZGULLUK ESITLIGINDE kaybediyor — bu turda bir kez denendi ve
 | hesaplanan deger degismedi. Kural yasadigi yerde degistirilir.
 */
header.ana > .kap { max-width: min(1560px, 100%); }
/*
 | ⛔ 1100px -> 46rem (736px) — 21 Agustos 2026, tema turu.
 |
 | Iki kap arasindaki fark 1180 ile 1100 idi: 80px. Bu bir RITIM DEGIL,
 | GORUNMEZLIK. Kanit: `.bolum-giris` kendi `max-inline-size: 62ch`ini
 | koyuyor — cunku kap satir uzunlugu isini yapmiyordu.
 |
 | 46rem gercek bir okuma olcusudur (~72ch, govde 17px'te). On tuketicinin
 | onu da okunan ya da doldurulan yuzey: blog govdesi, CMS metni, urun
 | aciklamasi, bayi basvuru formu, asistan.
 |
 | Ritim uc kadrandan biri: 1180 -> 736 -> 1180. Tek degere mal oluyor.
 */
.kap-dar { max-width: 46rem; }

section { padding-block: var(--space-6); }

/*
 | ==========================================================================
 | KOYU YUZEY SOZLESMESI — 21 Agustos 2026, tema turu
 | ==========================================================================
 |
 | ⛔ `section.koyu` YERINE `.koyu`: sinif elementten AYRILDI. Sebep
 | olculdu — panellerde `<section>` neredeyse hic yok (45 ekranda toplam
 | 14 tane); paneller kart tabanli. Element'e cakili bir sozlesme oraya
 | tasinamazdi.
 |
 | Kazanc yalniz kapsam degil: artik TEK bir koyu yuzey sozlugu var ve
 | panel, sitenin kendi koyu bolumleriyle AYNI DILI konusuyor. Sahibinin
 | istedigi "premium" tam olarak bu — yeni bir gorunum degil.
 |
 | ⚠️ `<section class="koyu">` yazan mevcut Blade'ler aynen calisiyor.
 |
 | ⛔ BU IKINCI BIR PALET DEGIL. Buradaki her kural token TUKETIYOR,
 | token TANIMLAMIYOR. `prefers-color-scheme` yok, `body` seviyesinde
 | tema anahtari yok. Koyu yuzey bir BOLUM karari; bir TEMA degil.
 | ThemeTest'in ikili palet bekcisi artik bu secicileri de tariyor.
 */
.koyu {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

/*
 | RAKAM SERIDININ ZEMINI — 21 Agustos 2026, tema turu.
 |
 | `stats-turkey-background-v01.webp` uc haftadir depoda bagsiz duruyordu.
 | `GorselEnvanteriTest` onu "belgesiz oksuz" saymiyordu ama sartini da
 | yaziyordu: *"gorselin EN ACIK pikseli uzerinde AA gecmeli — hero
 | videosundaki disiplinin aynisi. Olculmeden baglanmayacak."*
 |
 | OLCULDU (2.400.000 pikselin tamami tarandi, PHP GD):
 |
 |     en acik piksel   rgb(14, 82, 166)  @ 37,331   L = 0.0888
 |     en koyu piksel                                L = 0.0035
 |     ortalama                                      L = 0.0097
 |
 |     BEYAZ METIN en acik piksel uzerinde  7.56:1  -> AA ve AAA gecer
 |     BEYAZ METIN ortalama uzerinde       17.58:1
 |
 | Yani PERDE GEREKMIYOR — ve bu iyi, cunku perde bir gradyandir ve gradyan
 | bu projede sifira kilitli. Gorsel yeterince koyu oldugu icin metin
 | dogrudan uzerine oturuyor.
 |
 | ⛔ ZEMIN RENGI DURUYOR: `background-image` DEGIL, `background` kisayolu
 | kullanilsaydi `.koyu`nun lacivertini ezerdi ve gorsel yuklenemedigi an
 | (yavas bag, engelleyici, 404) metin SEFFAF zeminde kalirdi. Renk taban,
 | gorsel ustu.
 |
 | ⛔ ANLAM: serit "kac ILDE bayimiz var" sayisini basiyor
 | (`PageController::kurumsalRakamlar()`). Turkiye zemini dekorasyon degil,
 | rakamin konusu.
 */
.bolum-rakam {
  background-image: url("/img/stats-turkey-background-v01.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
 | ⛔ ETIKET BU BOLUMDE BEYAZ — ve bu bir zevk karari degil, OLCUM.
 |
 | `.rakam-etiket` normalde `--text-on-inverse-muted` tasiyor ve
 | duz lacivert uzerinde 10.46:1 veriyor — fazlasiyla yeterli. Ama gorsel
 | zemine girdigi anda olcu degisti:
 |
 |     rakam (beyaz, 48px/700)  en acik piksel uzerinde  7.56:1  ✅
 |     etiket (--text-on-inverse-muted, 15px/400)        4.07:1  ❌ AA 4.5
 |
 | 15px/400 BUYUK METIN DEGIL, govde metnidir; esigi 3.0 degil 4.5. Yani
 | gorsel, duz lacivertte sorunsuz olan bir rengi okunmaz sinirin altina
 | itiyordu.
 |
 | ⚠️ BU KUSURU ILK BEKCIM KACIRDI: yalniz `--text-inverse`i olcuyordu,
 | cunku kapinin ozgun metni de oyle yazilmisti ("`--text-inverse` gorselin
 | en acik pikseli uzerinde AA gecmeli"). Kapi eksik tanimlanmisti; yuzeyin
 | EN SOLUK metni olculmeliydi.
 |
 | ⛔ COZUM PERDE DEGIL: perde gradyandir, gradyan sifira kilitli.
 | ⛔ COZUM PUNTO BUYUTMEK DE DEGIL: 15px etiketi 24px'e cikarmak rakami
 | bastirirdi; hiyerarsi zaten punto ve agirlikta (48/700 ↔ 15/400), renkte
 | degil. Projenin kendi kurali: renk tek basina anlam tasimaz.
 */
.bolum-rakam .rakam-etiket { color: var(--text-inverse); }

/*
 | ⛔ KOYU BOLUM DAHA COK NEFES ALIR, DAHA AZ DEGIL.
 |
 | 48px dolgulu bir koyu bant SERIT gibi okunur; 64px'lik bant BOLUM gibi
 | okunur. Sayfanin agirlik merkezi olmasi istenen bir yuzeyin, notr bir
 | bantla ayni yukseklikte olmasi anlamsizdi. Yedinci bir `--space`
 | basamagi GEREKMIYOR: mevcut olcekten atama yetiyor.
 */
section.koyu { padding-block: var(--space-8); }

/*
 | KOYU YUZEYDE KART — 18 Agustos 2026, 21 Agustos'ta GENELLESTIRILDI.
 |
 | `.koyu` bolum vardi ama IC BILESENLERI YOKTU: kart hâlâ beyaz zemin
 | ve gri kenarlik tasiyordu, yani lacivertin uzerinde beyaz dikdortgenler
 | duruyordu. Bolum koyu, icerigi acik — ikisi birbiriyle kavga ediyordu.
 |
 | ⛔ KURAL BIR SINIF ADINA CAKILIYDI (`.teknoloji-karti`). Artik `.kart`
 | ailesinin tamamini tutuyor. Bu hem sadelestirme hem GIZLI BIR HATA
 | DUZELTMESI: bugun `.koyu` icine konan herhangi bir `.kart` lacivert
 | uzerinde BEYAZ KUTU olarak ciziliyordu — yani yukaridaki yorumun
 | tarif ettigi kusur, tarif edildikten sonra da yasiyordu.
 |
 | ⛔ CAM EFEKTI YOK: kart zemini lacivertin KENDI acilmis tonu
 | (`color-mix`), yari saydam bir katman degil.
 |
 | ⚠️ ORAN %7'DEN %12'YE CIKTI. Olculdu: %7 ile bolum/kart kontrasti
 | 1.136 idi ve projenin KENDI acik merdiven esigi (> 1.15) altindaydi.
 | %12 ile 1.297 — acik taraftaki 1.173'u de geciyor. %12 uydurulmadi:
 | dosyada zaten bir yerde kullaniliyordu, dogru olan sistem yapildi.
 |
 | ⚠️ GOLGE DEGIL ISIKLI KENAR: lacivert zeminde lacivert golge gorunmez.
 */
.koyu .kart {
  background: var(--surface-inverse-raised);
  border-color: var(--border-on-inverse);
  color: var(--text-inverse);
  box-shadow: var(--kenar-isik);
}

/*
 | ⛔ UCUNCU KADEME BIR BLOK, KART DEGIL. Kartin ICINDEKI ikincil yuzey
 | (tablo basligi, ozet kutusu) buraya duser — "ic ice kart yok" kurali
 | koyu tarafta da gecerli.
 */
.koyu .kart .yuzey-inset,
.koyu thead th {
  background: var(--surface-inverse-inset);
  border-color: var(--border-on-inverse);
  color: var(--text-inverse);
}

.koyu .bolum-giris,
.koyu .not,
.koyu .kart p {
  color: var(--text-on-inverse-muted);
}

/*
 | ⛔ BEYAZ DIKDORTGEN OLARAK BAGIRIYORDU: `.dugme-sade` zemini
 | `--surface-default`. Koyu bantta cerceveli ve seffaf duruyor.
 | Kenarlik `%40` secildi cunku 3:1'i gecen ILK basamak o (3.57);
 | `%34` 2.87 ile gecmiyor.
 */
.koyu .dugme-sade {
  background: transparent;
  border-color: var(--border-on-inverse-strong);
  color: var(--text-inverse);
}

/*
 | ⛔ `--action-secondary` KOYUDA KULLANILAMAZ: lacivert uzerinde 2.61:1,
 | dugmenin siniri erir. `--brand-blue-500` ile beyaz metin 4.83:1 ve
 | zemine 4.03:1 — ikisi de gecer.
 */
.koyu .dugme-ikincil { background: var(--brand-blue-500); }

/*
 | ⛔ ODAK HALKASI TERS YUZEYIN KENDI HALKASINI KULLANIR. Varsayilan
 | halkanin ic 2px'i ZEMINE ESIT olmak uzere tasarlandi ve lacivertte
 | beyaz kaliyordu.
 */
.koyu :focus-visible { box-shadow: var(--focus-ring-ters); outline: none; }

/*
 | ⚠️ ROZET DOKUNULMADI — ve bu bilincli. `tint + ink` cifti kendi
 | yuzeyini TASIYAN bir cip; lacivertin uzerinde acik bir pil olarak
 | okunur ve ink/tint orani (5.80-6.95) zemin ne olursa olsun korunur.
 | Ayni sekilde `.olcum-uyari` / `.olcum-tehlike` koyu bantta dogal
 | olarak parliyor — bu bir kazanc, duzeltilecek bir kusur degil.
 |
 | Tek istisna notr rozet: zemini `--surface-muted` ve koyuda kirli
 | gorunuyor.
 */
.koyu .rozet-notr {
  background: color-mix(in srgb, var(--text-inverse) 12%, transparent);
  color: var(--text-inverse);
}

/*
 | ⛔ ACIK ZEMINDEKI MAVI BAGLANTI KOYUDA OKUNMAZ: `--brand-blue-700`
 | lacivert uzerinde 2,61:1. Ters yuzeyin kendi vurgusu var
 | (`--brand-blue-300`, 10,46:1 olculu) ve baglanti onu kullanir.
 */
/*
 | KOYU KABUKTA KIRINTI YOLU.
 |
 | Kirinti varsayilan olarak `--text-muted` (koyu gri) — lacivert uzerinde
 | okunmaz. Kisik ters metin 10.46:1, bulundugun sayfa tam beyaz 19.47:1:
 | nerede oldugun, nereden geldiginden daha parlak.
 */
/*
 | KPI seridi: koyu bant kart izgarasini SARIYOR, kartlarin kendisi degil.
 | Vitrindeki `section.koyu` ile ayni nefes olcusu (64px degil 32px cunku
 | bu bir SAYFA bolumu degil, bir SERIT).
 */
.kpi-serit {
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-4);
  margin-block-end: var(--space-3);
}

/*
 | ⛔ RAKAM PANONUN EN PARLAK OGESIDIR.
 |
 | Tarayicida olculdu ve TERSTI: `.koyu .kart p` kurali `.tutar`i da
 | yakaliyordu; rakam 8.07:1, etiketi 15.02:1 idi. Yani goz once etikete
 | gidiyordu — bir olcum kutusunda tam olarak istenmeyen sey.
 |
 | ⚠️ `.olcum-uyari` / `.olcum-tehlike` DISARIDA: onlar kendi tint zeminini
 | tasiyor ve rakami kendi ink rengiyle yaziyor. Koyu bantta acik bir pil
 | olarak parliyorlar — bu bir kazanc, ezilecek bir kural degil.
 */
.koyu .olcum:not(.olcum-uyari):not(.olcum-tehlike) .tutar { color: var(--text-inverse); }
/*
 | Etiket DESTEK seviyesinde: rakam 15.02:1, etiketi 8.07:1. Ikisi de
 | AAA esiginin (7) ustunde ama aralarinda bir hiyerarsi var — goz once
 | sayiya gidiyor, sonra neyin sayisi oldugunu okuyor.
 */
.koyu .olcum:not(.olcum-uyari):not(.olcum-tehlike) .olcum-etiket { color: var(--text-on-inverse-muted); }

/*
 | EKRAN GIRIS BANDI — panel kabugunun ucuncu parcasi.
 |
 | Yan menu (dikey) + ust cubuk (yatay) + bu bant, kesintisiz bir L
 | cercevesi kuruyor. Baslik ilk kez KENDI ZEMININE oturuyor: onceden
 | kirinti yolunun 24px altinda zeminsiz bir metindi.
 |
 | ⛔ `clamp()` YOK: panelde akiskan tipografi yasak. `--text-4xl` sabit
 | 42px. Guc, punto buyutmekten degil, basligin kendi bandina
 | oturmasindan geliyor.
 |
 | ⛔ IKINCI AILE DE YOK: Barlow Condensed panele girmiyor. Kontrast
 | aileden degil ZEMINDEN geliyor.
 */
.panel-tepe {
  padding-block: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--border-on-inverse);
}

.ekran-giris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ekran-giris h1 {
  margin: 0;
  font-size: var(--text-4xl);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

/* Eylem yuvasi kendi genisliginde kalir; baslik satiri boyunca gerilmez. */
.ekran-giris-eylem { flex: none; }

.koyu .kirinti,
.koyu .kirinti a { color: var(--text-on-inverse-muted); }
.koyu .kirinti a:hover { color: var(--text-inverse); }
.koyu .kirinti [aria-current="page"] { color: var(--text-inverse); }

/*
 | EYLEM BAGLANTISI — kendi satirinda duran yonlendirme linki.
 |
 | Sahibi (24 Agustos 2026): "mavi yazili alti cizili cok cirkin duran
 | kisimlar" — "Finansal durumum →" gibi, kendi satirinda duran yonlendirme
 | linkleri taban kuralin mavi+cizili haliyle tarayici linki gibi duruyordu.
 | Olcum: 40 ciplak <a>, 8'i `p.not` icinde eylem cagrisi.
 |
 | NN/g kurali ikiye ayirir: SATIR ICI link renk+cizgi ister (taban kural
 | dogru, DOKUNULMADI); kendi satirinda duran yonlendirme, islevi belliyse
 | cizgisiz olabilir — hover/odakta cizgi GERI GELMELI. Bu sinif tam onu
 | yapar. Gercek eylem cagrilari icin emsal ayri: `dugme dugme-sade`
 | (home.blade.php'deki yazili karar).
 |
 | ⛔ SATIR ICI LINKE KULLANILMAZ — paragraf icinde cizgisiz link
 | erisilebilirlik kaybidir (WCAG 1.4.1'in tam kacisi).
 |
 | Ok ayri span'da (`.baglanti-ok`): hover'da yalniz ok kayar, metin
 | sabit durur. 0.25rem mevcut sub-8px kumesinden (4px).
 */
.baglanti-eylem {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: 600;
  color: var(--text-link);
  text-decoration-line: none;
}

.baglanti-eylem:hover,
.baglanti-eylem:focus-visible { text-decoration-line: underline; }

.baglanti-ok { transition: translate var(--duration-fast) var(--ease-out); }
.baglanti-eylem:hover .baglanti-ok { translate: 0.25rem 0; }
.baglanti-eylem:hover .baglanti-ok-geri { translate: -0.25rem 0; }

.koyu a:not(.dugme) { color: var(--brand-blue-300); }
.koyu a { color: var(--text-inverse); }
section.sakin { background: var(--surface-muted); }

/*
 | BOLUM RITMI — 4 Agustos denetiminin cikardigi is.
 |
 | Sayfa uc adet 96px'lik bos beyaz koridorla bolunmustu ve o
 | koridorlarda HICBIR SEY yoktu. Sebep bosluklarin ust uste
 | binmesiydi:
 |
 |   hero bolumu 48px alt dolgu
 | + bulucu seridi zaten negatif margin ile hero'nun altina binip
 |   kendi boslugunu getiriyordu
 | + sonraki bolumun 48px ust dolgusu
 |
 | Bosluk bir ayirici olmali; ust uste binen iki ayirici delik olur.
 */
/*
 | Hero bolumu UST DOLGU ALMAZ: cati (ust bant + baslik) videonun
 | uzerinde yuzuyor, video sayfanin tam tepesinden basliyor. Taban
 | `section` kuralinin 48px'i burada sifirlanmazsa video beyaz bir
 | cerceve icinde kalir.
 */
section.bolum-hero { padding-block: 0 var(--space-6); }

/*
 | Rengi degisen bolum KENDI SINIRINI tasir. Ustune bir de bosluk
 | koymak, ayni isi iki kez yapmaktir.
 */
section.koyu + section:not(.koyu),
section:not(.sakin) + section.sakin { padding-block-start: var(--space-6); }

/*
 | Public bolum basligi. Yonetim ekranlarindaki h2 (1.5rem) veri
 | yogun bir tabloya dogru olcu; 1180px genisligindeki bir pazarlama
 | bolumunun basligi olarak cilizdi ve hiyerarsi kayboluyordu.
 | Olcek DEGISMEDI — public bolum bir ust basamagi kullaniyor.
 */
/*
 | Public bolum basligi — pazarlama register'i, baslik ailesi.
 | `h1` ile ayni 2rem'de duruyordu ve sayfa basligi ile bolum basligi
 | ayirt edilemiyordu; artik kendi akiskan adiminda (32 -> 40px).
 */
/*
 | GOSTERIM EKSENI: 400 ve 700 — 21 Agustos 2026, tema turu.
 |
 | ⛔ OLCULEN KUSUR: `--font-display` tasiyan YEDI kuralin YEDISI de
 | `font-weight: 700` idi. Ustune `--text-hero` ile `--text-display` ayni
 | tavana ciktigi icin ortada tek boyut vardi. Bir aile, bir agirlik, bir
 | boyut — "yapay zeka tasarimi gibi duruyor" sikayetinin tipografik adi.
 |
 | Buyuk baslik artik 400: 52px'lik Condensed 400, 52px'lik Condensed
 | 700'den DAHA AZ MUREKKEP, DAHA COK VARLIK tasir. Sahibinin karari
 | "bagirmasin, agirlik merkezi versin" idi; buyukluk bagirmaz, agirlik
 | bagirir.
 |
 | ⚠️ VURGU AYNI BOYUTTA 700 KALIR. Ayni punto icinde 400 <-> 700 gercek
 | bir kontrast ekseni — renk yok, gradyan yok, eyebrow yok. Uc yasagin
 | hicbirine dokunmadan ses kazaniliyor.
 */
.bolum-baslik {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.bolum-baslik strong,
.bolum-baslik b { font-weight: 700; }

.bolum-giris {
  max-inline-size: 62ch;
  margin-block-end: var(--space-4);
  color: var(--text-muted);
}

section.koyu .bolum-giris { color: var(--text-on-inverse-muted); }

/* 2B icin grid; breakpoint gerekmeden akar. */
/*
 | min() ZORUNLU: cipilak minmax(240px,…) 320px genisligindeki bir
 | ekranda kap dolgusuyla birlikte tasiyordu (WCAG 1.4.10 Reflow).
 | min(...,100%) sutunun kaba sigmasini garanti eder.
 */
/*
 | `.izgara-genis` BASINA DA CALISIR.
 |
 | Daha once yalniz `grid-template-columns` yazan bir DEGISTIRICIYDI ve
 | `.izgara` olmadan kullanildiginda hicbir sey yapmiyordu: kutu `block`
 | kaliyor, sutun tanimi sessizce olu duruyordu. Uc gorunum tam olarak
 | bunu yapmisti ve hicbiri hata vermedi. Temel kurallar ikisine birden
 | yazilinca yanlis kullanim imkansiz hale geliyor.
 */
.izgara,
.izgara-genis {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.izgara-genis { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* 1B icin flex. */
.dizi { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.dizi-arali { justify-content: space-between; }

.yigin { display: flex; flex-direction: column; gap: var(--space-2); }

/*
 | ⛔ BUTON KAPSAYICI GENISLIGINE GERILMEZ — Tur 1, madde 3.
 |
 | `.yigin` bir sutun flex kutusu ve `align-items` varsayilani `stretch`;
 | icindeki her buton kapsayicinin tam genisligini aliyordu. Sonucu
 | olculdu: katalogdaki "Urun ekle" butonu 324px, kapsayicisi da 324px —
 | sayfanin en gurultulu ogesi, oysa seyrek kullanilan bir eylem.
 |
 | ⚠️ GENISLIK BIR ONEM GOSTERGESI DEGILDIR. Bir butonun ne kadar
 | onemli oldugunu sinifi soyler (`.dugme-birincil` / `-ikincil`),
 | kapsayicisinin genisligi degil.
 |
 | Tek kural 18 gorunumdeki 51 butonu birden duzeltiyor; alternatif her
 | butonu ayri bir sarmalayiciya almakti — biri unutuldugunda sessizce
 | gerilmis kalirdi.
 */
.yigin > .dugme { align-self: start; }

/* ==========================================================================
   Buton — yedi durum
   ========================================================================== */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit; font-weight: 600; font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              /*
               | OPAKLIK TUR 4'TE EKLENDI. Listede yoktu ve olculdu:
               | `[disabled]` 0,5'e, `[aria-busy]` 0,75'e ANINDA
               | sicriyordu. "Isleniyor" hali bir geri bildirim degil,
               | bir sicrama olarak okunuyordu.
               |
               | `--ease-in`: dugme SONUYOR. Yavas baslar, hizli biter —
               | "cekiliyor" hissi. `--ease-out` ile sonen bir oge,
               | gitmeye karar veremiyormus gibi asili kalir.
               */
              opacity var(--duration-fast) var(--ease-in),
              /* Basma geri bildirimi ayri ve daha KISA: bkz. `.dugme:active`. */
              transform var(--duration-press) var(--ease-out);
}

.dugme-birincil { background: var(--action-primary); color: var(--text-inverse); }
.dugme-birincil:hover { background: var(--action-primary-hover); color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   BIRINCIL EYLEMIN RENGI YUZEYE BAGLI — Tur 3, F2
   --------------------------------------------------------------------------
   Ertelenmis teknik borc kapaniyor (`EN-SON-YAPILACAKLAR` §3): not
   "`.dugme-birincil` adi anlamini tasimiyor; her iki panelde de sayfanin
   birincil eylemi artik `.dugme-ikincil` (mavi)" diyordu.

   TUR 3'TE OLCULDU: `.dugme-birincil` yonetim ve bayi tarafinda SIFIR
   yerde kullaniliyordu; on dort kullanimin hepsi musteri tarafindaydi.

   ⚠️ BU CUMLE BAYATLADI — 21 Agustos 2026, tema turu. Bugun yonetim
   tarafinda ALTI kullanim var (arama, bayi-fiyatlari, bayiler, denetim,
   toplu-mesaj, urun-metinleri) ve altisi da DOGRU: sayfanin birincil
   eylemi, mavi ciziliyor.

   ⛔ Tema turu bu alti kullanimi KALDIRMADI. Plan "panelde
   `.dugme-birincil` markup'tan tamamen ciksin" diyordu; okundu ve
   REDDEDILDI, cunku bu bolum tam olarak o sorunu cozuyor: ad her yerde
   dogru, renk yuzeye bagli. Kaldirmak, olculmus bir karari geri almak
   olurdu.

   ⛔ Alti kullanim ekran giris bandina da TASINMADI: altisi da BAGLAMSAL
   form gonderimi ("Filtrele" filtre alanlarinin yaninda durmak zorunda).
   Bant, sayfa duzeyinde bir eylemi olan ekranlar icin acik duruyor.

   ⛔ YENIDEN ADLANDIRMA YAPILMADI ve sebebi olcum: on dort musteri
   dosyasina dokunmak, hicbir kullanicinin gormeyecegi bir kazanc icin
   dort yuzeyde regresyon riski demekti.

   Bunun yerine RENK YUZEYE BAGLANDI: yonetim ve bayi panelinde birincil
   eylem MAVI. Boylece `.dugme-birincil` adi her yerde dogru — "sayfanin
   birincil eylemi" — ve kirmizi yasagi bir DISIPLIN olmaktan cikip
   YAPISAL hâle geliyor: o siniftan kirmizi cikmasi artik mumkun degil.

   ⛔ KAPSAM `body.pano`: yalniz yonetim ve bayi paneli. Musteri
   hesabi, giris ekranlari, kurumsal filo ve vitrin DISARIDA — oradaki
   kirmizi marka dilinin parcasi.

   ⛔ TEHLIKE DUGMESI ETKILENMEZ: `--danger-ink` ayri bir token.

   ⚠️ ILK DENEMEM `body.pano` altinda `--action-primary`i YENIDEN
   TANIMLAMAKTI ve "ikili palet yasagi" testi onu dusurdu. Test hakliydi:
   bilesen katmani token TUKETIR, token TANIMLAMAZ — yoksa proje iki
   palet tasimaya baslar ve ikisi zamanla ayrisir. Kural gevsetilmedi;
   ayni sonuc var olan tokenlar TUKETILEREK elde edildi.
   -------------------------------------------------------------------------- */
body.pano .dugme-birincil { background: var(--action-secondary); }
body.pano .dugme-birincil:hover { background: var(--action-secondary-hover); }

.dugme-ikincil { background: var(--action-secondary); color: var(--text-inverse); }
.dugme-ikincil:hover { background: var(--action-secondary-hover); color: var(--text-inverse); }

.dugme-sade {
  background: var(--surface-default); color: var(--text-default);
  border-color: var(--border-strong);
}
.dugme-sade:hover { background: var(--surface-muted); color: var(--text-default); }

.dugme-tehlike { background: var(--danger-ink); color: var(--text-inverse); }
.dugme-tehlike:hover { background: color-mix(in srgb, var(--danger-ink) 88%, var(--neutral-white)); color: var(--text-inverse); }

/*
 | BASMA GERI BILDIRIMI — madde P7'de degisti.
 |
 | ONCE: `translateY(1px)`. Butonu ASAGI itiyordu ve bitisik iki buton
 | arasinda hangisinin basildigi 1 px'lik bir kaymadan okunuyordu —
 | dokunmatikte parmagin altinda kaliyor, hic gorunmuyordu.
 |
 | SIMDI: `scale(0.98)`. Buton MERKEZINE dogru buzuluyor, yani hareket
 | her kenarindan ayni anda okunuyor ve parmak bir kenari kapatsa bile
 | oteki kenar gorunuyor.
 |
 | 60 ms (`--duration-press`) cunku basma ANLIK olmali: parmak
 | kalktiginda hâlâ suren bir animasyon "kaydettim mi" tereddudu
 | yaratir.
 |
 | ⚠️ SITE GENELINDE, yalniz panelde degil. `.dugme` tek bir bilesen;
 | ayni butonun musteri tarafinda baska turlu davranmasi tasarim
 | sisteminin kendi sozunu bozardi.
 */
.dugme:active { transform: scale(0.98); }

.dugme[disabled],
.dugme[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Yuklenirken: metin yerinde kalir, durum aria ile bildirilir. */
.dugme[aria-busy="true"] { cursor: progress; opacity: 0.75; }

.dugme-kucuk { padding: 0.375rem 0.75rem; font-size: var(--text-xs); }

/* ==========================================================================
   Kart — ic ice kart YOK
   ========================================================================== */

.kart {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  padding: var(--space-2);
}

/* --------------------------------------------------------------------------
   PANELDE KART NEFES ALIR — Tur 3, F2
   --------------------------------------------------------------------------
   Sahibi: "cok basic duruyor", "cartlar ic ice giriyor".

   Ic ice gorunmenin renk tarafi tokens'ta cozuldu; BURASI olcu tarafi.
   Olculdu: kart ici dolgu 16px, `.izgara` araligi 16px. Yani kartin
   ICINDEKI nefes ile kartlar ARASINDAKI nefes tipatip aynıydi — goz
   bir kutunun nerede bitip otekinin nerede basladigini olcuden de
   secemiyordu.

   Ikisi birden 24px'e cikiyor: oran ayni kalsa da mutlak boslugun
   artmasi kutulari birbirinden ayiran seyin ta kendisi. Ustune
   `--shadow-sm` kartı zeminden bir adim kaldiriyor.

   ⛔ GENIS GOLGE DEGIL: `--shadow-sm` 1px'lik bir iz. Token notu
   "kenarlik + genis golge ayni ogede birlesmez" diyor ve bu kural
   duruyor — kart hem kenarlik hem KISA golge tasiyor.

   ⛔ PUBLIC SITE DISARIDA: orada kart olculeri pazarlama dilinin
   parcasi ve zemin beyaz; ayni degeri oraya tasimak vitrini panele
   benzetirdi.
   -------------------------------------------------------------------------- */

body.panel .kart {
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

body.panel .izgara,
body.panel .izgara-genis,
body.panel .yigin { gap: var(--space-3); }

/*
 | HESAP SAYFASI: MAGAZA KABUGU, BELGE YOGUNLUGU — 18 Agustos 2026.
 |
 | `/hesabim` `body.panel`den cikinca kart dolgusu 24px'ten 16px'e dustu
 | ve yedi kart alt alta ince gorundu (tarayicida olculdu). Olcu geri
 | veriliyor; PANEL GORUNUMU degil — golge yok, zemin beyaz, cati ve
 | altbilgi magazanin.
 */
/*
 | ZEMIN KADEMESI — Tur 7. Sahibi "yedi ozdes beyaz kutu" hissini
 | %50 diye puanladi; sebep kartlarin zeminden HIC ayrismamasiydi.
 |
 | ⛔ GOLGE YOK karari AYNEN duruyor: ayrismayi golge degil ZEMIN
 | yapiyor. Panelin ayni kosulda olcup yarattigi `--surface-page`
 | tokeninin ikinci uygulamasi — yeni token acilmadi.
 */
body.hesap-yuzeyi { background: var(--surface-page); }

body.hesap-yuzeyi .kart { padding: var(--space-3); }
body.hesap-yuzeyi .kart > h2 { margin-block-end: var(--space-1); font-size: var(--text-xl); }

/*
 | ⚠️ BOLUNMEYEN DEGER SATIRI TASIRMASIN. Hesap ekraninda e-posta
 | adresi tek parca bir kelimedir; 296px'te `<dd>` kutusunu 12px
 | tasiriyordu (kapanis taramasinda olculdu). `anywhere` yalniz
 | GEREKTIGINDE boluyor — normal metin etkilenmiyor.
 */
body.hesap-yuzeyi dd { overflow-wrap: anywhere; }
body.hesap-yuzeyi .izgara,
body.hesap-yuzeyi .izgara-genis,
body.hesap-yuzeyi .yigin { gap: var(--space-3); }

/*
 | Kart icinde ikinci kutu cizilmez: kesikli cerceve yalniz hesapta
 | kalkar, bos durum kartin kendi sesi olur. Yonetim/bayi/vitrindeki
 | kullanim DEGISMEZ — bilesen ortak, olcek anahtari `body`.
 */
body.hesap-yuzeyi .bos-durum { border: 0; padding: var(--space-4) var(--space-2); }
body.hesap-yuzeyi .bos-durum-baslik { font-size: var(--text-lg); }

/*
 | Tiklanabilir kart. Hover'da KENARLIK ve GOLGE birlikte degisiyor —
 | Tur 1, madde 11. Once yalniz kenarlik rengi degisiyordu ve bes
 | kartlik bir izgarada hangisinin uzerinde oldugun zor secilirdi.
 |
 | ⚠️ "HAREKET YOK" KURALI 14 AGUSTOS'TA DARALTILDI — madde P7.
 |
 | Once boyle yaziyordu: "⛔ HAREKET YOK (kaydirma, buyume). Kartlar
 | izgarada yan yana; biri buyurse komsulari kayar ve fare hedefi tam
 | tiklarken kacar." Itirazin OZU HÂLÂ GECERLI ve korunuyor:
 |
 |   · BUYUME YOK. `scale` kullanilmiyor — buyuyen kart komsularinin
 |     uzerine tasar ve tiklama hedefi gercekten kayar.
 |   · DURAN KART HIC OYNAMIYOR. Yukselme YALNIZ `.kart-baglantili`de,
 |     yani ZATEN tiklanabilir olan kartlarda. `.kart`in kendisine
 |     hicbir hareket eklenmedi.
 |   · 1 PX, KOMSUYU KAYDIRMAZ. `transform` yerlesimi etkilemez;
 |     izgara sabit kalir. Fare hedefi 1 px oynuyor — 44 px'lik bir
 |     hedefte olculebilir bir kayip degil.
 */
.kart-baglantili {
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/*
 | ⛔ KENARLIK + GENIS GOLGE AYNI OGEDE BIRLESMEZ — DESIGN.md L232.
 |
 | Bu kural dokuz aydir yaziliydi ve BURADA CIGNENIYORDU: `.kart` zaten
 | `border: 1px solid` tasiyor, hover ustune `--shadow-md` (0 4px 12px)
 | koyuyordu. Hicbir test korumuyordu; 21 Agustos 2026 tema turunda
 | bekcisi yazilirken ortaya cikti.
 |
 | ⚠️ MAVI KENARLIK KALDI: o bir dekorasyon degil, "bu kart tiklanabilir"
 | bildirimi. Degisen yalniz golge — `--shadow-sm` bir TEMAS golgesi
 | (0 1px 2px), hale degil, ve token yorumunda "1px'lik bir iz" diye
 | zaten istisna gerekcesi yazili.
 */
.kart-baglantili:hover {
  border-color: var(--brand-blue-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Pano giris kartlari — Tur 1, madde 11
   --------------------------------------------------------------------------
   Sekiz kart ayni tipografik agirliktaydi: baslik ile aciklama arasindaki
   fark yalnizca punto idi. Ikon karti bir bakista ayirt edilir kiliyor,
   baslik bir tik buyuyor.
   -------------------------------------------------------------------------- */

/*
 | ⛔ KARTIN TAMAMI <a> AMA TAMAMI BAGLANTI GIBI GORUNMEZ.
 |
 | Olculdu: kart bir baglanti oldugu icin hem baslik hem aciklama MAVI
 | ve ALTI CIZILI cikiyordu — sekiz kartlik izgara bir dizin listesi
 | gibi okunuyordu. Ayni kusur icin `.kart h3 a`da zaten bir kural
 | vardi ama o, `<a>` BASLIGIN ICINDEYKEN calisiyor; burada `<a>`
 | kartin KENDISI.
 |
 | Kural `.pano-kart`a bagli, `.kart-baglantili`ye degil: o sinif
 | musteri tarafindaki urun vitrininde de kullaniliyor ve bu tur
 | yalniz yonetim panelini kapsiyor.
 */
.pano-kart {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.pano-kart h3 { color: var(--text-default); }
.pano-kart .not { color: var(--text-muted); }

/* Alti cizgi hover'a birakildi: tiklanabilirlik kartin kendi hover'inda. */
.pano-kart:hover h3 { text-decoration-line: underline; }

.pano-kart-ust { display: flex; align-items: center; gap: var(--space-1); }

.pano-kart-ust h3 { margin: 0; font-size: var(--text-lg); }

/*
 | Ikon baslikla ayni renkte DEGIL: baslik metindir, ikon isarettir.
 | Hover'da markaya donuyor — kartin tiklanabilirligini ikinci bir
 | kanaldan daha soyluyor.
 */
.pano-kart-ust .ikon {
  flex: none;
  inline-size: var(--ikon-lg);
  block-size: var(--ikon-lg);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

/*
 | ⚠️ ANLAMSAL TOKEN, HAM MARKA TOKENI DEGIL. Once `--brand-blue-500`
 | yazilmisti; `ThemeTest` reddetti ("METIN RENGI ham marka token'indan
 | alinmaz"). Test hakliydi: ham marka tokeni koyu temada yeniden
 | tanimlanmiyor, `--action-secondary` tanimlaniyor — yani ham tokenle
 | yazilan renk koyu temada yanlis kalirdi.
 */
.pano-kart:hover .ikon { color: var(--action-secondary); }

.kart h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); }

/*
 | KART BASLIGINDAKI IKON — bayi portali, madde P2.
 |
 | Ikon basligin ONUNDE ve HER ZAMAN metinle birlikte; tek basina
 | birakilmiyor. Olcu 1.375rem'den 1.125rem'e iniyor: `--text-base`
 | bir baslikta tam boy ikon metni ezip kartin agirlik merkezini
 | ikona kaydiriyordu.
 |
 | Renk `--text-muted`: ikon bir ISARET, bir vurgu degil. Basligin
 | kendi rengiyle ayni tonda basilsaydi iki esit agirlikli oge yan
 | yana durur ve goz once hangisine bakacagini bilemezdi.
 */
.kart > h3 > .ikon,
.kart > h4 > .ikon {
  inline-size: var(--ikon-md); block-size: var(--ikon-md);
  vertical-align: -0.15em;
  color: var(--text-muted);
}

/*
 | Kart basligindaki baglanti MAVI ve ALTI CIZILI degil. Urun listesi
 | bir baglanti listesi degil, bir vitrindir; alti cizili mavi baslik
 | magaza degil dizin hissi veriyordu. Alti cizgi hover'a birakildi —
 | tiklanabilirlik kartin kendi hover'iyla da belli oluyor.
 */
/*
 | ⚠️ SEVIYE BAGIMSIZ — 25 Agustos 2026.
 |
 | Kural yalnizca `h3` diyordu ve bu, kendi gerekcesini TAM ISKALADIGI
 | yerde birakiyordu. Olculdu: anasayfa seridinde kart basligi `<h3>`
 | (kural tutuyor, cizgi yok) ama KATALOGDA `<h2>` — cunku sayfanin
 | `h1`'i "Lastikler" ve kartlar bir seviye asagi iniyor. Sonuc:
 | /lastikler'de 24 urun basligi mavi + alti cizili, 27px, karttaki EN
 | BUYUK yazi. Yukaridaki yorum "urun listesi bir vitrindir" diyor;
 | vitrinin kendisi bu kuraldan disarida kalmisti.
 |
 | Baslik seviyesi bir BELGE YAPISI karari; baglantinin gorunumu ona
 | bagli olamaz. `:is()` bilerek — `:where()` ozgullugu (0,1,1)'e
 | dusururdu ve bu kural rakip kurallarla ayni yerde yarisiyor.
 */
.kart :is(h2, h3, h4) a { color: var(--text-default); font-weight: 600; text-decoration: none; }
.kart :is(h2, h3, h4) a:hover { text-decoration-line: underline; }
.kart :is(h2, h3, h4) a:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-control); }

/* ==========================================================================
   Facet filtre cubugu — §6.6
   Filtreler dagilmis etiketler degil, TEK bir yuzeyde gruplaniyor.
   ========================================================================== */

.filtre-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
}

.filtre-cubugu label {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

/*
 | ⛔ BES SECIM KUTUSU, DORT AYRI GENISLIK — Tur 4'te olculdu:
 | 87 / 87 / 108 / 109 / 103. Icerige gore boyutlaniyorlardi ve satir
 | rastgele gorunuyordu. Sahibinin "her sey karisik" dedigi seyin
 | musteri tarafindaki hali.
 |
 | ⚠️ MOBILDE ZATEN DUZELTILMISTI (T1c, 10rem) ama masaustu
 | "satir yatay, 10rem cubugu ~305px uzatir ve sardirir" gerekcesiyle
 | disarida birakilmisti. Gerekce 10rem icin dogruydu, 7rem icin
 | DEGIL — yeniden olculdu:
 |
 |     en uzun secenek metni  59px
 |     7rem = 112px           hepsine yeter
 |
 |     TR satir sonu 1055 / 1130 kap  -> 75px pay
 |     EN            1040 / 1130      -> 90px
 |     DE            1106 / 1130      -> 24px   (en dar)
 |
 | ⚠️ DE'nin 24px'i ince ama RISK YOK: `.filtre-cubugu` zaten
 | `flex-wrap: wrap`. Daha uzun bir ceviri gelirse satir TASMAZ, SARAR.
 | Catida ayni hatayi bir kez yaptim (TR sigdi, EN tasti); orada sarma
 | yoktu, burada var.
 */
.filtre-cubugu select { font-weight: 400; inline-size: 7rem; }
.kart .ebat { color: var(--text-link); font-weight: 600; font-size: var(--text-sm); }
.kart .fiyat { font-size: var(--text-lg); font-weight: 700; margin-top: var(--space-1); }
.kart .fiyat-belirsiz { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }

/* ==========================================================================
   Urun karti v2 — TEMA-ANALIZ Bolum 2 §14 anatomisi
   Fotografsiz katalogda gorsel capa OLCU SERIDIDIR: kartin ustunde tam
   genislik ters yuzey, mono ebat. Fotograf ~190 SKU'da ayni gorunurdu;
   ebat + nitelik cipleri gercek ayirt edicidir. Alt satir daima kartin
   dibine oturur — kisa iceren kartlar izgarada dans etmez.
   ========================================================================== */

.kart-urun { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.olcu-serit {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-family: var(--font-mono);
}

.olcu-serit-ebat { font-size: var(--text-lg); font-weight: 700; }
.olcu-serit-ek   { font-size: var(--text-xs); color: var(--text-on-inverse-muted); white-space: nowrap; }

.kart-urun-govde {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2);
}

/*
 | ⚠️ BASLIK SEVIYESI GORUNUMU DEGISTIRMEZ — 26 Agustos 2026.
 |
 | `urun-karti` basligini CAGIRANDAN aliyor: anasayfa seridi `h3`,
 | katalog ve arama `h2` basiyor (18 Agustos'taki WCAG duzeltmesi).
 | CSS ise yalniz `h3` icin kural tasiyordu; `h2` global kurala
 | dusuyordu (27px/700 + 16px alt margin). Sonuc olculdu: BIREBIR ayni
 | kart anasayfada 17px/0 margin, katalogda 27px/16px — baslik alti
 | bosluk flex gap ile 24px'e cikiyordu.
 |
 | Baslik seviyesi bir BELGE YAPISI karari; kartin gorunumu ona bagli
 | olamaz. Degerler h3'un bugun aldiklarinin aynisi.
 */
.kart-urun-govde :is(h2, h3) {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--track-title);
}

.cip-dizi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kart-urun-alt { margin-top: auto; padding-top: var(--space-1); }

/*
 | Fiyat solda, "Incele" sagda — TEK SATIR. `baseline` degil `end`
 | hizalama: fiyat 18px, "Incele" 12px ve taban cizgisine hizalanirsa
 | kucuk metin buyugun altina kayik gorunuyor.
 */
.kart-urun-alt-satir {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}

.kart-urun-alt .fiyat-belirsiz { margin: 0; }
.kart-urun-alt .fiyat { margin-bottom: 0; }

/*
 | "Incele" — GORSEL ISARET, baglanti degil (`aria-hidden`). Ok isareti
 | metnin PARCASI degil, `::after`: ceviriye girmemesi gerekiyor ve
 | yonu diller arasi degismiyor.
 */
.kart-urun-incele {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-link);
  white-space: nowrap;
}

.kart-urun-incele::after {
  content: " →";
  transition: margin-inline-start var(--duration-fast) var(--ease-out);
}

.kart-urun:hover .kart-urun-incele::after,
.kart-urun:focus-within .kart-urun-incele::after { margin-inline-start: 0.25rem; }

/*
 | YAYILAN BAGLANTI — Revize m.4: "kartlar tiklanabilir degil".
 |
 | Baslik baglantisinin `::after`'i karti bastan asagi kapliyor; kartin
 | herhangi bir yerine tiklamak urun detayina goturuyor. Erisilebilir ad
 | degismiyor (yalniz baslik metni), sekme durgusu tek.
 |
 | ⛔ Bu desenin sarti: kart icinde IKINCI BIR BAGLANTI OLAMAZ, katman
 | onu yutar. Blade tarafi bunu gozetiyor (gorsel <div>, "Incele" <span>).
 |
 | Metin secimi bozulmasin diye katman `pointer-events` ile degil, dogal
 | yigin sirasiyla calisiyor: `::after` en ustte ama seffaf; altindaki
 | metin yine de fare ile secilebiliyor cunku katman kendi uzerinde
 | surukleme baslatmiyor.
 */
.kart-urun { position: relative; }

/*
 | ⛔ SECICI `h3`E DEGIL, `:is(h2,h3)`E BAKAR — 23 Agustos 2026.
 |
 | Kart basliginin etiketi CAGRI YERINE GORE degisiyor: `urun-karti`
 | `baslikSeviyesi` parametresini aliyor ve `/lastikler` ile `/arama`
 | onu `h2` yapiyor (WCAG 1.3.1: h1'in hemen altinda h3'e atlamamak
 | icin — dogru karar). Kural ise ham `h3`e kilitliydi.
 |
 | Sonucu: sitenin ANA URUN LISTESINDE yayilan katman hic olusmuyordu.
 | Tarayicida olculdu (`/lastikler`, 23 Agustos):
 |     kart alani            271 × 417 px
 |     gercek baglanti        94 ×  32 px   — kartin %2,7'si
 |     `::after` position    static, content: none  — kural eslesmedi
 |     kartin ortasinda      IMG (baglanti degil)
 |
 | ⚠️ Sessiz kusurdu cunku kart GORSEL OLARAK tiklanabilir
 | goruniyordu: `.kart-baglantili:hover` sinif tabanli, etikete bagli
 | degil — fare gelince kenarlik + golge + 1px kalkis veriyor ve
 | "Incele →" oku isliyordu. Kullanici gorsele basiyor, hicbir sey
 | olmuyordu. Urun detayindaki "Ayni seride" kartlari `h3` varsayilanini
 | kullandigi icin ORADA calisiyordu — kusur yalniz listede.
 */
.kart-urun :is(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
}

/*
 | Odak halkasi TUM KARTI cerceveliyor, yalniz basligi degil: tiklama
 | alani kart oldugu icin klavye kullanicisinin gordugu alan da o
 | olmali. Halka yayilan katmanin uzerinde ciziliyor.
 |
 | ⚠️ ICE CIZILIYOR (`--focus-ring-ic`): `.kart-urun` `overflow: hidden`
 | tasiyor ve disa cizilen bir golge kirpilir — halka hic gorunmezdi.
 |
 | `:focus-within` KULLANILMIYOR: fareyle tiklayinca da tetiklenir ve
 | her tiklamada kart cercevelenirdi. `:focus-visible` yalniz klavye
 | odaginda konusur.
 */
.kart-urun :is(h2, h3) a:focus-visible { box-shadow: none; }
.kart-urun :is(h2, h3) a:focus-visible::after { box-shadow: var(--focus-ring-ic); }

/*
 | tabular-nums: `td.sayisal`da vardi ama KPI/bakiye rakamlarinda yoktu;
 | yan yana uc finansal kartta rakamlar birbirine gore kayiyordu.
 */
.tutar { font-size: var(--text-2xl); font-weight: 700; margin: var(--space-1) 0 0.25rem; font-variant-numeric: tabular-nums; }
.not   { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Rozet — tint + ink. Renk TEK BASINA anlam tasimaz; metin de yazilir.
   ========================================================================== */

.rozet {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}

/*
 | ⛔ ON BIR AD, BES GORUNUM — Tur 4, T4.
 |
 | Olculdu: 11 varyant tanimli ama yalnizca 5 farkli gorsel sonuc
 | uretiyorlar. Alti kural GOVDESI kelimesi kelimesine tekrardi.
 |
 | ⛔ ADLAR BIRLESTIRILMEDI, KURAL GOVDELERI BIRLESTIRILDI. Bu ayrim
 | onemli: `rozet-cekilebilir` isaretlemede `rozet-basari`dan DAHA COK
 | sey soyluyor — parayi cekebilirsin, sadece "iyi bir sey" degil. Ayni
 | sekilde `incompatible`, `kisitli`, `check`. Adlari bese indirmek
 | ekrandan bilgi silmek olurdu.
 |
 | ⚠️ ASIL RISK TEKRARIN KENDISI DEGIL, SAPMASIYDI: alti ayri govde
 | varken birinin tonunu degistirip kardeslerini unutmak sessizce iki
 | farkli yesil uretirdi. Artik tek govde var; degistiren herkes
 | hepsini birden degistiriyor.
 */
/*
 | Adlarin anlamlari — bekci testi seciciyi TARADIGI icin aciklamalar
 | secici satirlarinin ARASINA yazilmiyor:
 |
 |   verified / check / incompatible / high → uyumluluk seviyeleri
 |   cekilebilir / kisitli                  → bayi finansal durumu (§2.4)
 |
 | ⚠️ ILK YAZIMDA aciklamalari `.rozet-verified,  /* ... *​/` diye satir
 | sonuna koymustum ve `ThemeTest`in rozet bekcisi DUSTU: tarama
 | `\.rozet-(...)\s*[,{]` ariyor, arada yorum olunca eslesme kopuyor.
 | Test hakliydi — yorumun yeri seciciyi bozmamali.
 */
.rozet-basari,
.rozet-verified,
.rozet-cekilebilir {
  background: var(--success-tint); color: var(--success-ink);
  border-color: color-mix(in srgb, var(--success-ink) 25%, transparent);
}

.rozet-uyari,
.rozet-check,
.rozet-kisitli {
  background: var(--warning-tint); color: var(--warning-ink);
  border-color: color-mix(in srgb, var(--warning-ink) 25%, transparent);
}

.rozet-tehlike,
.rozet-incompatible {
  background: var(--danger-tint); color: var(--danger-ink);
  border-color: color-mix(in srgb, var(--danger-ink) 25%, transparent);
}

.rozet-bilgi,
.rozet-high {
  background: var(--info-tint); color: var(--info-ink);
  border-color: color-mix(in srgb, var(--info-ink) 25%, transparent);
}

.rozet-notr   { background: var(--surface-muted); color: var(--text-default);
                border-color: var(--border-default); }

/*
 | Blok 3 — Uyumluluk Guven Puani dort seviyesi.
 | Eski rozet beyaz metinle 2.80:1 idi; artik tint+ink.
 |
 | ⚠️ 15 AGUSTOS 2026 — `.rozet-check_required` → `.rozet-check`.
 |
 | ⛔ BU BIR ISIM TERCIHI DEGIL, CANLI BIR HATANIN DUZELTMESIYDI.
 | `admin/uyumluluk/index.blade.php:23` ekrana `rozet-check` basiyordu;
 | CSS'te tanimli olan ise `rozet-check_required` idi. Yani "Kontrol
 | gerekli" rozeti aylardir TINT'SIZ, saydam kenarlikli cikiyordu —
 | oteki uc seviye renkliyken o tek basina gorunmez gibiydi.
 |
 | ⚠️ HICBIR TEST YAKALAMADI: rozet sinifinin CSS'te KARSILIGI OLDUGUNU
 | olcen bir kural yoktu. Bu turda konuluyor.
 |
 | Yon secimi: CSS adi isaretlemeye uyduruldu, tersi degil. Sebep,
 | `check_required` dosyadaki TEK snake_case sinif olmasiydi — DB
 | degerinden (`Fitment::LEVEL_CHECK_REQUIRED`) kopyalanmis, CSS
 | konvansiyonuna hic uymamis.
 */
/*
 | Bu dort ad ve bayi portalinin iki finansal adi (§2.4) YUKARIDA,
 | gorsel kardesleriyle ayni govdede tanimli. Buradaki not tarihcesi
 | tasidigi icin duruyor — ozellikle `check_required` hatasinin
 | anlatildigi kisim.
 */

/* ==========================================================================
   Bildirim / uyari — TAM kenarlik, yan serit DEGIL
   ========================================================================== */

.uyari,
.bildirim {
  padding: var(--space-2);
  border: 1px solid;
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}

.uyari-bilgi,   .bildirim-bilgi { background: var(--info-tint); color: var(--info-ink);
                                  border-color: color-mix(in srgb, var(--info-ink) 30%, transparent); }
.uyari-uyari,   .bildirim-uyari { background: var(--warning-tint); color: var(--warning-ink);
                                  border-color: color-mix(in srgb, var(--warning-ink) 30%, transparent); }
.uyari-tehlike, .bildirim-hata  { background: var(--danger-tint); color: var(--danger-ink);
                                  border-color: color-mix(in srgb, var(--danger-ink) 30%, transparent); }
.uyari-basari,  .bildirim-ok    { background: var(--success-tint); color: var(--success-ink);
                                  border-color: color-mix(in srgb, var(--success-ink) 30%, transparent); }

/* Tip verilmemis .uyari icin varsayilan: uyari tonu (geriye donuk uyum). */
.uyari:not([class*="uyari-"]) {
  background: var(--warning-tint); color: var(--warning-ink);
  border-color: color-mix(in srgb, var(--warning-ink) 30%, transparent);
}

/* ==========================================================================
   Tablo — dar ekranda yatay kaydirma
   ========================================================================== */

/*
 | ⛔ `min-inline-size: 0` ZORUNLU, sus degil.
 |
 | Panel duzeni `body.panel` GRID ve `.panel-govde` FLEX. Bir kaydirma
 | kabi bunlarin torunuysa OTOMATIK EN KUCUK BOYUTU icerigi kadardir
 | (`min-width: auto`) ve kucultulmeyi REDDEDER. Sonuc: tablo icinde
 | kaydirilacagina SAYFAYI genisletir.
 |
 | ⚠️ OLCULDU (390 px, bayi > fiyatlarim): sayfa 809 px'e cikiyordu ve
 | sarmalin DISINDA tasan hicbir oge yoktu — sucu bulmak zor, cunku
 | kabin kendi kutusu 353 px gorunuyor. Ayni sayfada IKI sarmaldan
 | birinin `min-width` degeri `0px`, otekininki `auto` cikti; fark
 | ata zincirindeki flex/grid baglamindan geliyordu.
 |
 | ⚠️ TARAYICIDA UC KEZ OLCULDU VE UCUNDE AYNI SONUC CIKMADI (734 / 809 /
 | olculemedi). Bu satir yine de dogru: eksik olan ozellik gercek ve
 | duzeltmesi standart. Kesin dogrulama gercek bir tarayicida yapilmali.
 */
.tablo-sarmal {
  overflow-x: auto;
  min-inline-size: 0;
  border-radius: var(--radius-panel);
}

table, .tablo {
  width: 100%; border-collapse: collapse;
  background: var(--surface-default);
  font-size: var(--text-sm);
}

th, td {
  text-align: left;
  padding: 0.625rem var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

/*
 | `text-transform`, `case` ve `--leading-caps` YUKARIDAKI ORTAK KURALDAN
 | geliyor (bkz. "BUYUK HARF KOSUSU"). Burada tekrar edilmiyor: iki ayri
 | yerde yazilsalardi biri guncellenip oteki unutulurdu — nitekim bu
 | dosyada tam olarak o olmustu ve `case` hicbir yerde yoktu.
 */
/*
 | ⚠️ 15 AGUSTOS 2026 — BASLIK BANDI KOYULASTI (Tur 3, F2).
 |
 | `--surface-muted` beyaz satirlarin uzerinde 1,092:1 veriyordu:
 | basligin nerede bitip verinin nerede basladigi gorunmuyordu.
 | `--surface-sunken` ile 1,240:1 — bir BANT oldu.
 */
th {
  background: var(--surface-sunken);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted);
}

/*
 | SATIR AYRIMI — sahibinin "renk degistirerek, ekleyerek" onerisi.
 |
 | Yogun tablolarda (katalogda 199 urun, bayilerde on bes basvuru) goz
 | satiri kaybediyordu. Cift satirlar cok hafif bir tonda: metin
 | kontrasti 11,14:1'de kaliyor, yani okunabilirlikten hicbir sey
 | goturmuyor.
 |
 | ⛔ `.satir-detay` DISARIDA: o satir kendi zeminini tasiyor ve ozet
 | satiriyla AYNI kaydin parcasi; seritlemeye katilsaydi ikisi
 | birbirinden kopardi.
 |
 | ⚠️ Zemin `tr`ye veriliyor, `td`ye DEGIL: `td` zemini `tr` zeminin
 | USTUNE basar ve grafik vurgusu gibi satir bazli vurgular gorunmez
 | olurdu.
 */
tbody tr:nth-child(even):not(.satir-detay) { background: var(--surface-inset); }

tbody tr:last-child td { border-bottom: 0; }
td.sayisal, th.sayisal { text-align: right; font-variant-numeric: tabular-nums; }

/*
 | TEKNIK DIZGI SARMAZ — Tur 1, madde 5.
 |
 | SKU, ebat ve DOT dar hucrede ortadan ikiye boluniyordu:
 | "EG-TRAILHOUND" ust satirda, "WILD-12070R17" altta. Ikisi ayri
 | okununca kod tanimaz hâle geliyor; operator listede aradigi SKU'yu
 | goremiyor. Kaydirma zaten var, bolmeye gerek yok.
 */
td .sku, td .ebat, td .dot, td .teknik,
th .sku, th .ebat, th .dot, th .teknik { white-space: nowrap; }

/*
 | Tutar hucresi `.sayisal` sinifini TASIMASA da rakamlari hizali
 | olsun: yan yana iki tutar sutununda biri hizali digeri degilse
 | goz karsilastiramaz.
 */
body.pano td .tutar { font-variant-numeric: tabular-nums lining-nums; }

/*
 | Satir eylemleri TEK GRUPTA ve etiketleri KIRPILMADAN. `.tablo-yogun`
 | icin bu kural zaten vardi; yogun olmayan tablolarda da ayni sorun
 | vardi — kural gorev sinifina baglandi.
 */
body.pano .tablo-islem { flex-wrap: nowrap; inline-size: max-content; }
body.pano .tablo-islem > *,
body.pano .tablo-islem .dizi > * { flex: none; }
body.pano .tablo-islem .dugme { white-space: nowrap; }
body.pano td .rozet { white-space: nowrap; }

/*
 | KATLANIR DETAY SATIRI — Tur 1, madde 9.
 |
 | Ozet satirin hemen altinda, tam genislikte bir `<td colspan>`.
 | Kapaliyken yalniz `<summary>` kadar yer kaplar; acikken satirin
 | detayi tablonun tamamini kullanir.
 |
 | Ust kenarlik KALDIRILIYOR: ozet satiriyla detay satiri AYNI kaydin
 | iki parcasi, iki ayri kayit degil. Aradaki cizgi onlari birbirinden
 | koparirdi.
 */
.satir-detay > td {
  border-block-start: 0;
  padding-block-start: 0;
  background: var(--surface-sunken);
}

/*
 | Isaret bizim — katlanir basliklarla AYNI dil (bkz. "Acma isareti").
 | Onceden tarayicinin ucgeni cikiyordu; artik dort katlanir yuzeyin
 | dordu de ayni gorunuyor.
 */
.satir-detay > td > details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.satir-detay > td > details > summary::-webkit-details-marker { display: none; }

.satir-detay > td > details > summary > .ikon {
  flex: none;
  /*
   | `--ease-in-out`: ok ekranda KALIYOR, yalnizca donuyor. Yer
   | degistiren hareketin iki ucu da yumusak olmali — `--ease-out` ile
   | donen bir ok, itilmis gibi baslar.
   */
  transition: transform var(--duration-base) var(--ease-in-out);
}

.satir-detay > td > details[open] > summary > .ikon { transform: rotate(180deg); }

.satir-detay summary {
  cursor: pointer;
  padding-block: 0.25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.satir-detay details[open] > summary { margin-block-end: var(--space-2); }

/* Detay icinde tablo tablonun icinde: ic tablo kendi zeminini alsin. */
.satir-detay table { background: var(--surface-default); }

/* ==========================================================================
   Gunluk is / seyrek is — Tur 1, madde 4
   ==========================================================================
   Katalog ekraninda bes tam genislik blok vardi ve hepsi ayni agirliktaydi:
   toplu fiyat, filtre, urun aileleri, yeni urun, urun listesi. Gunde bir
   yapilmayan uc is, gunluk isin ONUNDE duruyordu.

   ⛔ HICBIRI KALDIRILMADI, ASAGI ALINDI. Ayni sayfa, ayni formlar.
   `<details>` — JS yok.

   ⚠️ 15 AGUSTOS 2026: BLOKLAR ACIK BASLIYOR. Siralamayi duzelten sey
   asagi alinmalariydi, katlanmalari degil; sayfanin en altinda acik
   durmalari gunluk isi asagi itmiyor. Katlama kullanicinin elinde.
   -------------------------------------------------------------------------- */

/*
 | ⛔ UST BOSLUK YOKTU — Tur 4'te olculdu ve sahibi ekran goruntusuyle
 | gosterdi.
 |
 | Kural yalnizca `margin-block-end` tasiyordu. Iki bolum arka arkaya
 | gelince aralarinda 32px oluyordu, ama bir bolum BOLUM OLMAYAN bir
 | bloktan sonra geldiginde (urun tablosu + sayfalama + notlar) hicbir
 | sey almiyordu.
 |
 | Olculdu: urun listesinin bitisi 113px, "Toplu fiyat guncelleme"
 | basliginin ustu 160px — arada 47px ve o 47px'in icinde IKI PARAGRAF
 | duruyordu. Yani yeni bolum bir onceki bolumun kuyruguna yapisiyordu.
 |
 | ⚠️ `margin-block-start` DEGIL, ustteki komsuya bakan bir kural: iki
 | `.is-katlanir` yan yana gelince ikisinin bosluklari toplanmasin diye
 | daraltiliyor. Dikey ritim bolumler arasinda AYNI kalmali.
 */
.is-katlanir {
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-4);
}

/* Ard arda gelen bolumlerde bosluk toplanmasin. */
.is-katlanir + .is-katlanir { margin-block-start: var(--space-4); }

/* Kabin ilk cocuguysa ustunde zaten sayfa dolgusu var. */
.is-katlanir:first-child { margin-block-start: 0; }

.is-katlanir > summary,
.filtre-bar > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  /* Dokunma hedefi: baslik satiri zaten yuksek, dolgu onu 44px'in ustunde tutar. */
  padding-block: var(--space-1);
}

/* Baslik `<summary>` icinde: acma dugmesi ile bolum basligi AYNI sey. */
.is-katlanir > summary > h2,
.filtre-bar > summary > h2 { margin: 0; }

.is-katlanir[open] > summary,
.filtre-bar[open] > summary { margin-block-end: var(--space-2); }

/* --------------------------------------------------------------------------
   ACMA ISARETI — Tur 3, F1 (D2)
   --------------------------------------------------------------------------
   ⚠️ ONCEKI YORUM YANLISTI. "Isaret tarayicinin kendisi" yaziyordu; degildi.

   `<summary>`nin tarayici varsayilani `display: list-item`tir ve UCGENI
   CIZEN ODUR. Ustteki kural `display: flex` veriyor — `list-item` dusuyor,
   ucgen kayboluyor. Geriye tiklanabilir oldugunu soyleyen hicbir izi
   olmayan bir baslik kaliyor.

   Sahibi ekran goruntusuyle bildirdi: katalogdaki "Toplu fiyat guncelleme",
   "Urun aileleri", "Yeni urun" — ucu de alti bos baslik gibi duruyor.

   ISARET ARTIK BIZIM: `genislet` ikonu `<summary>`nin ilk cocugu, acilinca
   180 derece donuyor. Donme `transform` — yerlesim kaydirmaz.
   -------------------------------------------------------------------------- */

.is-katlanir > summary,
.filtre-bar > summary,
.adres-duzenle > summary,
.adres-ekle > summary { list-style: none; }

.is-katlanir > summary::-webkit-details-marker,
.filtre-bar > summary::-webkit-details-marker,
.adres-duzenle > summary::-webkit-details-marker,
.adres-ekle > summary::-webkit-details-marker { display: none; }

/*
 | ⚠️ ADRES KATLANIRLARI DA BU LISTEYE GIRDI — 26 Agustos 2026.
 |
 | `.adres-duzenle > summary` ve `.adres-ekle > summary` (8464)
 | `display: flex` tasiyor; flex, `<summary>`nin `list-item`
 | varsayilanini dusuruyor ve TARAYICI UCGENI HIC CIZILMIYORDU.
 | "Duzenle" ve "Yeni adres ekle" duz baglanti gibi duruyor, acilir
 | oldugu ancak tiklayinca anlasiliyordu — sahibinin katalog
 | ekraninda bildirdigi kusurun aynisi (yukaridaki tarihce).
 |
 | Paralel kural yazilmadi: proje bu isi zaten cozmus, secici listesi
 | genisledi. Boylece ok davranisi tek yerden yonetiliyor.
 */
.is-katlanir > summary > .ikon,
.filtre-bar > summary > .ikon,
.adres-duzenle > summary > .ikon,
.adres-ekle > summary > .ikon {
  flex: none;
  color: var(--text-muted);
  /*
   | `--ease-in-out`: ok ekranda KALIYOR, yalnizca donuyor. Yer
   | degistiren hareketin iki ucu da yumusak olmali — `--ease-out` ile
   | donen bir ok, itilmis gibi baslar.
   */
  transition: transform var(--duration-base) var(--ease-in-out);
}

.is-katlanir[open] > summary > .ikon,
.filtre-bar[open] > summary > .ikon,
.adres-duzenle[open] > summary > .ikon,
.adres-ekle[open] > summary > .ikon { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Filtre bari — ekleme C · Tur 3, F1'de ONARILDI
   --------------------------------------------------------------------------
   ⛔ ZORLA ACMA KURALI KALDIRILDI ve sebebi olculdu.

   Once filtre masaustunde `::details-content` uzerinden `open` YAZILMADAN
   acik tutuluyordu. P7 hareket katmani
   `body.pano details:not(.yan-menu-grup)::details-content{opacity:0}`
   kuralini ekleyince opakligi geri veren kural `[open]` istedi; filtrede
   `open` yoktu. Ozgulluk de solmayi kazandirdi: (0,2,3) > (0,2,1).

   Sonuc: kutu DOGRU YUKSEKLIKTE ama TAMAMEN SAYDAM basildi — sahibinin
   ekraninda "Filtre" basligi ve altinda bos bir alan.

   ⚠️ Yalniz katalog degildi: her yonetim panosunun filtresi ayni bileseni
   kullaniyor.

   Yeni kurulum: `filtre-bar.blade.php` HER ZAMAN `open` basiyor. Gorunurluk
   artik bir HTML gercegi; tarayici davranisina bagli bir varsayim degil.
   Katlama her genislikte kullanicinin elinde kaliyor — mobilde yedi alanli
   pano filtresini kapatabilmek hâlâ degerli.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   YOGUN TABLO — Revize m.14. Faz 6.1b
   --------------------------------------------------------------------------
   Olculdu: yonetim katalogunda tablo 199 satir x 197 px idi (~39.000 px,
   ekranin otuz kati). Sahibinin "199 urun taranamaz" demesi bir olcum.

   Uc sey birlikte calisiyor ve ucu de ayri:
     sayfalama   — controller'da (25 satir)
     `.tablo-yogun` — satir dolgusu ve satir ici formun yerlesimi
     `.tablo-uzun`  — yukseklik tavani + yapiskan baslik

   ⛔ SUTUN GIZLENMIYOR. Dar ekranda sutun dusuren bir tablo, veriyi
   arayan operatore "burada bir sey yok" dedirtir; `.tablo-sarmal`
   yatay kaydirma zaten var.
   -------------------------------------------------------------------------- */

.tablo-yogun th,
.tablo-yogun td {
  padding: 0.375rem var(--space-1);
  vertical-align: middle;
}

/*
 | Satir ici islemler TEK SIRADA. Once alt alta iki formdu ve satir
 | yuksekliginin yarisini onlar yiyordu.
 */
.tablo-islem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.tablo-islem form { margin: 0; }

/* Yogun tabloda dar girdiler daha da dar: satir sismesin. */
.tablo-yogun .girdi-dar { width: 5.5rem; }
.tablo-yogun .dugme { padding-block: 0.25rem; }

/*
 | SATIR ICI FORM SARMAZ.
 |
 | Olculdu: sarmaya izin verilince fiyat girdisi bir satira, KDV ve
 | dugme alt satira dusuyor ve tek basina bu, satir yuksekligini
 | 34 px'ten 76 px'e cikariyordu — 25 satirda 1.000 px fark.
 |
 | Sarmayi kapatmanin bedeli sutunun genislemesi; dar ekranda
 | `.tablo-sarmal` zaten yatay kaydiriyor. Veriyi gizlemek yerine
 | kaydirmak, bu projede baska yerlerde de verilen karar.
 |
 | ⚠️ TEK BASINA `nowrap` ISI KOTULESTIRDI (olculdu: 116 px -> 157 px).
 | Sebep: tablo hucresi dar kalinca flex ogeleri SIKISIYOR ve bu kez
 | dugmenin METNI dikey sariyor. Sarmayi kapatmak ancak tabloya bir
 | ASGARI GENISLIK verilirse ise yariyor — o zaman tablo sikismak
 | yerine tasiyor ve `.tablo-sarmal` kaydiriyor.
 */
.tablo-yogun .tablo-islem { flex-wrap: nowrap; inline-size: max-content; }
.tablo-yogun .tablo-islem .dugme { white-space: nowrap; }

/*
 | ⚠️ SIKISMA DA KAPATILMALI, yoksa `nowrap` tek basina yetmiyor.
 |
 | Olculdu: hucre 168 px kalinca flex ogeleri kucultuluyor ve "Kaydet"
 | dugmesinin metni harf harf sariyordu — hucre 103 px. Flex'te
 | `nowrap` tasmayi degil SIKISMAYI tetikliyor; `flex: none` ile ogeler
 | dogal genisliklerini koruyor, hucrenin max-content'i buyuyor ve
 | tablo sutuna gercekten yer veriyor.
 */
.tablo-yogun .tablo-islem > *,
.tablo-yogun .tablo-islem .dizi > * { flex: none; }

/*
 | ASGARI GENISLIK. Alti sutun + satir ici form icin olculen ihtiyac
 | ~1050 px; altina inildiginde tablo sikismak yerine kayiyor.
 */
.tablo-yogun { min-inline-size: 66rem; }

/*
 | Rozetler yogun satirda kucuk kalir ve SARMAZ: sarma satiri yeniden
 | uzatirdi ve butun kazanci gotururdu.
 */
.tablo-yogun .rozet { white-space: nowrap; }

/*
 | YAPISKAN BASLIK SATIRI.
 |
 | ⚠️ `position: sticky` yalniz KENDI KAYDIRMA KABINDA calisir.
 | `.tablo-sarmal` `overflow-x: auto` tasidigi icin zaten bir kaydirma
 | kabi; ama dikey bir siniri olmadigindan dikeyde hic kaymiyor ve
 | yapiskanlik gorunmez kaliyordu. `.tablo-uzun` o siniri veriyor:
 | tavan asilinca tablo KENDI ICINDE kayiyor ve baslik yerinde kaliyor.
 |
 | Tavan `70dvh`: sayfalama sonrasi cogu sayfa buna hic degmiyor —
 | kural yalniz gercekten uzun kalan listelerde devreye giriyor.
 */
.tablo-uzun { max-block-size: 70dvh; overflow-y: auto; }

/*
 | ⚠️ 15 AGUSTOS 2026 — KENDI KABINDA KAYAN TABLO. `.tablo-uzun`
 | OPT-IN kaldi: gercekten devasa, sayfalanmayan bir liste icin bilincli
 | bir tercih. Ust cubuk onu ilgilendirmiyor cunku kendi kabinda kayiyor.
 */
.tablo-uzun thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);

  /* Zemin ZORUNLU: seffaf kalirsa altindan gecen satirlar okunur. */
  background: var(--surface-muted);
}

/*
 | ⛔ KISA TABLODA YAPISKAN BASLIK YOK — 15 Agustos 2026, ikinci
 | duzeltme.
 |
 | ⚠️ BU BENIM AYNI GUN YAPTIGIM DUZELTMENIN YAN ETKISIYDI. Tavani
 | kaldirinca (dogruydu) baslik SAYFA kaydirmasina yapisti ve
 | yapisiklik artik BUTUN tablolarda calisiyordu — uc satirlik bir
 | tabloda bile.
 |
 | Sonuc sahibinin ekraninda su: sayfa biraz kayinca baslik yerinde
 | kaliyor, ILK SATIR onun ALTINA giriyor ve basligin ustunde YARIM
 | bir satir asili kaliyor. Uc ayri kartta ayni goruntu.
 |
 | Yapiskan baslik UZUN listede is gorur: operator dorduncu sutunun ne
 | oldugunu unutmasin diye. Uc satirlik bir tabloda kazandirdigi hicbir
 | sey yok, kaybettirdigi sey ise ilk satirin okunabilirligi.
 |
 | ⛔ YAPISKANLIK `.tablo-uzun`A GERI DONDU ve orada DOGRU calisiyor:
 | o sinif kendi kaydirma kabini kuruyor, yani baslik tablonun KENDI
 | icinde duruyor, sayfanin degil. Gercekten uzun bir liste icin
 | bilincli bir tercih — blanket bir kural degil.
 |
 | Yonetim tablolarinin cogu ZATEN SAYFALI; basligin kayip gitmesi
 | pratikte olmuyor.
 */

/*
 | ⚠️ 15 AGUSTOS 2026 — TAVAN KALKTI. Sahibi ekrani acti ve
 | *"buradaki karisikligi goruyorsun dimi"* dedi; hakliydi.
 |
 | ⛔ BURADA YAZDIGIM GEREKCE YANLISTI. Soyle demistim: *"Tavan yalniz
 | gercekten uzun listelerde devreye girer; kisa tablo 70dvh'ye hic
 | degmez ve hicbir sey degismis gorunmez."*
 |
 | O VARSAYIM BIR DURUMDA COKUYOR ve tam da o durum sahibinin
 | ekranindaydi: satir icindeki `<details>` (Detay ve islemler / Erisim
 | ve iliski) acilinca tablo ANIDEN cok uzuyor — satir sayisi UC olsa
 | bile. Tavan devreye giriyor ve uc sey birden bozuluyor:
 |
 |   1. Acilan icerik 70dvh'lik kutuya HAPSOLUYOR; belgeler, uyari ve
 |      islem dugmeleri sayfanin hizasiyla alakasiz duruyor.
 |   2. Satirlar ORTADAN KESILIYOR — yarim bir satir, okunacak bir sey
 |      degil.
 |   3. Sayfanin kaydirmasi ile tablonun kaydirmasi birbiriyle
 |      yarisiyor. Sahibinin ta basta *"cartlar ic ice giriyor"*
 |      dedigi his tam olarak budur.
 |
 | Cozum tavani KALDIRMAK: yapiskan baslik korunuyor ama artik SAYFA
 | kaydirmasina yapisiyor (yukaridaki kural). Sayfa icinde kayan kutu
 | kalmiyor; yonetim tablolari zaten sayfali.
 */

/*
 | KAYDIRMA ISARETI — Tur 1, madde 5.
 |
 | Tablo yatayda kayiyordu ama KAYDIGI YETERINCE BELLI DEGILDI.
 |
 | ⛔ GOLGE DENENDI VE GERI ALINDI. Standart cozum iki katmanli bir
 | `linear-gradient` + `radial-gradient` zeminidir; bu projede GRADYAN
 | YASAK ve yasak testli (`ThemeTest`: "GRADYAN HIC YOK — istisna da
 | kalkti"). Istisnalar 10 Agustos 2026'da sahibinin karariyla
 | kapatilmisti; bir tablo golgesi icin yeniden acilmaz.
 |
 | Yerine tarayicinin KENDI isareti okunur kilindi: ince ama gorunur
 | bir kaydirma cubugu. Gradyan yok, JS yok, ve kaydirma yoksa cubuk da
 | yok — sahte bir isaret gostermiyor.
 */
.tablo-sarmal {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* ==========================================================================
   Form alani — etiket, yardim, hata
   ========================================================================== */

/*
 | ⚠️ `position: relative` — alan ipucusu balonunun capasi.
 |
 | Balon dugmeye degil ALANA capali: dugmeye capalanmis bir balon dar
 | ekranda saga tasabilir (uzun etiketten sonra "?" saga kayiyor). Alanin
 | genisligi zaten kabin icinde, dolayisiyla balon da hicbir yone tasamaz.
 */
.alan { position: relative; display: flex; flex-direction: column; gap: 0.375rem; }
.alan-etiket { font-size: var(--text-sm); font-weight: 600; }

/* ==========================================================================
   FORM SATIRI — Tur 4 · sahibi "her sey karisik" dedi ve HAKLIYDI
   ==========================================================================
   ⛔ FORM SATIRLARI `.dizi` KULLANIYORDU VE O `align-items: center`.

   Sonucu tarayicida olculdu (yonetim > katalog > toplu fiyat):

       select "Ürün ailesi"   genislik 158   ust 362
       select "Konum"         genislik 102   ust 362
       select "Yön"           genislik  79   ust 362
       input  "Oran (%)"      genislik 245   ust 348   <-- 14px YUKARIDA
       buton  "Önizle"        genislik  82   ust 349   <-- 13px YUKARIDA

   Iki ayri kusur ust uste biniyordu:

   1. DENETIMLER AYNI SATIRDA DEGILDI. `.alan` kutulari ORTADAN
      hizalaniyordu; "Oran"in altinda `.alan-yardim` oldugu icin o kutu
      daha uzun ve denetimi 14px yukari kayiyordu. Goz bunu "bozuk"
      olarak okur, sebebini soyleyemese de.

   2. DORT DENETIM, DORT GENISLIK. Icerige gore boyutlaniyorlardi
      (158/102/79/245), yani satir rastgele gorunuyordu.

   ⚠️ TEK EKRAN DEGIL: `.dizi` + `.alan` deseni **33 formda, 14
   dosyada** var. Sahibi "her yerde" derken olcumle hakliydi.

   --- COZUM ---

   `align-items: start`: etiket satirlari hizalaninca DENETIMLER de
   hizalanir. Yardim metni asagida sarkar ve kimseyi itmez.

   Etiketi olmayan denetim (buton) `align-self: end` ile KENDI SATIRININ
   dibine hizalanir. Once sabit bir ofset (`--alan-etiket-bloku`)
   kullaniliyordu; satir sardiginda hayalet bosluk uretti ve 25 Agustos
   2026'da olculerek kaldirildi — ayrinti asagidaki kuralin yorumunda.

   `flex-basis: 11rem`: dort denetim tek genislikte. Uzun secenek
   metni kesilir — tutarli bir satir, tam gorunen bir secenekten daha
   degerli; secenek zaten acilinca tam okunuyor.
   ========================================================================== */

.alan-satiri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}

.alan-satiri > .alan {
  flex: 0 1 11rem;
  /* Tasan uzun secenek metni satiri bozmasin. */
  min-inline-size: 0;
}

/*
 | ⚠️ DAR GIRDI BIR ISTISNA DEGIL, RITMIN PARCASI.
 |
 | `.girdi-dar` bilincli bir sinif: dort haneli bir yil alani 11rem
 | istemiyor. Ama kutu 11rem kalip girdi 7rem olunca ETIKET ile GIRDI
 | ayni genislikte olmuyor ve bir sonraki ogeye kadar olu bosluk
 | kaliyordu — tarayicida olculdu (kutu 176, girdi 112).
 |
 | Kutu girdiye uyuyor. Iki farkli genislik SORUN DEGIL: her biri
 | icerigin tipine gore — ad uzun, yil dort hane. Karisiklik ayni isi
 | yapan DORT denetimin dort ayri genislikte olmasiydi; farkli isi
 | yapanlarin farkli olmasi ritimdir.
 */
.alan-satiri > .alan:has(.girdi-dar) { flex-basis: 7rem; }

/*
 | Etiket satiri OLMAYAN her sey (buton, tek basina bir metin) denetim
 | hattina iner. `:not(.alan)` secildi cunku kural neyin hizalanacagini
 | degil, neyin ETIKETI OLMADIGINI biliyor.
 */
.alan-satiri > :not(.alan) {
  /*
   | ⛔ SABIT OFSET YERINE HIZALAMA — 25 Agustos 2026, olculdu.
   |
   | Sabit `margin-block-start` yalniz oge etiketli alanlarla AYNI
   | SATIRDAYKEN dogru. Satir sardiginda oge kendi satirina duser,
   | ustunde hizalanacak bir etiket hatti kalmaz ve ofset aciklanamayan
   | bir bosluga donusur.
   |
   | OLCULDU: /admin/ayarlar'da 35 satirin 34'u SARIYOR — 375px'te de,
   | 1280px'te de. Yani bu bir mobil kusuru degil, mekanizma kusuruydu:
   | 113 ogede 29,25px hayalet bosluk sayildi.
   |
   | `align-self: end` ayni isi kosulsuz yapiyor: oge kendi SATIRININ
   | dibine hizalanir. Etiketli alanlarla ayni satirdaysa girdinin
   | altiyla hizali kalir (eski davranis korunur); kendi satirindaysa
   | hizalanacak bir sey yoktur ve bosluk dogmaz.
   |
   | ⚠️ Ofset degeri SILINMEDI, yalniz kosullu hale geldi: asagidaki
   | "gorunur etiketi olmayan satir" kurali da yerinde duruyor.
   */
  align-self: end;
}

/*
 | ⚠️ GORUNUR ETIKETI OLMAYAN SATIRDA OFSET YOK — 18 Agustos 2026.
 |
 | Ustteki kural "her `.alan` bir etiket satiri tasir" varsayiyor. Bayi
 | hizli siparis aramasinda etiket `.gizli-erisilebilir` — ekran
 | okuyucuya var, goze yok. Sonuc: girdinin ustunde bosluk yokken dugme
 | yine de asagi iniyordu.
 |
 |   OLCULDU (/bayi/hizli-siparis, 1440px): "Ara" dugmesi girdiden
 |   29px asagida. Sahibinin ekran goruntusu 12'si tam olarak buydu.
 |
 | ⛔ KOSUL SATIRIN TAMAMINA BAKIYOR: satirdaki HICBIR alanin gorunur
 | etiketi yoksa ofset kalkar. Bir kismi etiketliyse satirin bir etiket
 | hatti vardir ve ofset dogru kalir.
 */
.alan-satiri:not(:has(> .alan > .alan-etiket)) > :not(.alan) {
  margin-block-start: 0;
}

/*
 | type yazilmamis <input> de metin girdisidir. Oznitelik seciciler
 | eksik oznitelige EŞLEŞMEZ; bu yuzden dislama listesi kullanilir.
 */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="file"]),
select,
textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font: inherit; font-size: var(--text-sm);
  background: var(--surface-default);
  color: var(--text-default);

  /*
   | ⛔ DENETIM KABINI TASIRAMAZ — 296px'te olculdu.
   |
   | `<select>` en uzun secenegine gore buyur ve varsayilan
   | `min-width: auto` kuculmeyi REDDEDER. Bayi secicisinde secenek
   | "Alanya Moto Servis (Demo) Atolyesi" oldugunda kutu 244px'e cikti
   | ve 281px'lik gorunur alanda sayfayi yatay kaydirtti.
   |
   | Olcum: bayi-fiyatlari ve fiyatlandirma ekranlari +4px tasiyordu;
   | bu iki satirla ikisi de +0.
   */
  min-inline-size: 0;
  max-inline-size: 100%;
}

/*
 | ⛔ DOSYA GIRDISI DE KABINI TASIRAMAZ.
 |
 | `[type="file"]` yukaridaki dolgu/kenarlik kuralindan BILEREK dislidir
 | (tarayici kendi dugmesini cizer) — ama genisligi de sinirsiz kaliyordu.
 | Kutunun eni "Dosya Sec" dugmesi + dosya adiyla belirlenir ve kuculmez:
 | kampanyalar ekrani 296px'te +13px tasiyordu. Yalniz genislik sinirlanir,
 | gorunumune dokunulmaz.
 */
input[type="file"] { max-inline-size: 100%; }

/* Placeholder de 4.5:1 esigini gecmeli — acik gri kullanilmaz. */
::placeholder { color: var(--text-muted); opacity: 1; }

.alan-yardim { font-size: var(--text-xs); color: var(--text-muted); }

/* ==========================================================================
   ALAN IPUCU — etiketin yanindaki "?" ve acilan balon
   ==========================================================================
   Sahibinin istegi (23 Agustos 2026): alanin altindaki minik aciklama
   satirlari yerine, etiketin yaninda yuvarlak bir soru isareti ve ustune
   gelince acilan bir balon.

   ⛔ METIN GIZLENMIYOR, YERI DEGISIYOR. Balon `display: none` DEGIL:
   girdinin `aria-describedby` zinciri ona bakiyor ve `display: none`
   olsaydi ekran okuyucu da okuyamazdi. Gorunurluk `opacity` +
   `visibility` ile yonetiliyor; icerik DOM'da ve erisim agacinda
   duruyor.

   ⚠️ WCAG 1.4.13 (Content on Hover or Focus) uc sart koyuyor:
     gorunur     -> `:hover` VE `:focus-visible` (ikisi de var)
     ustune git  -> balonun kendisi de `:hover` ile acik kaliyor
     kapatilabil -> Escape (`panel.js`)
   ========================================================================== */

.alan-ipucu {
  /*
   | ⛔ `position: relative` YOK — ve bu bilincli.
   |
   | Varken balon buraya capalaniyordu: sarmalayici 16px genisliginde
   | oldugu icin `inset-inline: 0` balonu 16px'lik DIKEY BIR SERIDE
   | ceviriyordu. Tarayicida gorulup duzeltildi.
   |
   | Capa `.alan` (alanin tamami) olmali; o tam genislikte ve kabin
   | icinde, dolayisiyla balon hicbir yone tasamiyor.
   */
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: var(--space-1);
}

.alan-ipucu-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /*
   | ⚠️ GORUNEN DAIRE KUCUK, DOKUNMA HEDEFI DEGIL. Daire 16px; tiklanabilir
   | alan seffaf dolguyla 24px'e cikiyor. WCAG 2.5.8 gorunen boyutu degil
   | HEDEF boyutunu olcuyor.
   */
  inline-size: 1rem;
  block-size: 1rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  cursor: help;

  /* Artik <button> degil <span role=button> (etiketlenebilirlik kusuru —
     bilesen dosyasindaki not). Butonun dogal secilemezligi elle verilir. */
  user-select: none;

  /*
   | ⛔ BU SATIR ASAGIDAKI `::after` ICIN VAR, SUS DEGIL.
   |
   | `::after` mutlak konumlu ve 24px'lik dokunma hedefini o ciziyor.
   | Mutlak konumlu kutu EN YAKIN KONUMLU ATAYA capalanir. Bu satir
   | yokken en yakin konumlu ata `.alan` oluyordu (balon icin oyle
   | ayarlanmisti) ve hedef BUTUN ALANI kapliyordu:
   |
   |     elementFromPoint(girdinin tam ortasi) -> BUTTON.alan-ipucu-dugme
   |
   | Yani girdiye tiklayan kullanici ipucu dugmesine basiyordu; alan
   | tamamen kullanilamaz hale gelmisti. Tarayicida olculdu.
   |
   | ⚠️ BALON ETKILENMIYOR: balon dugmenin ICINDE degil KARDESI, yani
   | onun en yakin konumlu atasi hala `.alan`.
   */
  position: relative;
}

.alan-ipucu-dugme::after {
  /* Dokunma hedefini 24px'e tasiyan seffaf halka — capasi ustteki satir. */
  content: "";
  position: absolute;
  inset: -0.25rem;
}

.alan-ipucu-dugme:hover {
  border-color: var(--action-secondary);
  color: var(--action-secondary);
}

.alan-ipucu-dugme:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.alan-ipucu-balon {
  position: absolute;
  /*
   | ⛔ CAPA ALANIN KENDISI (`.alan`), DUGME DEGIL.
   |
   | Once dugmeye capaliydi — once ortalanmis, sonra basa. Ikisi de dar
   | ekranda tasiyabiliyordu: ortalanmis olan SOLA (288px'lik balon,
   | 40px'teki dugmede -104'e kadar), basa capali olan SAGA (uzun bir
   | etiketten sonra "?" saga kayinca).
   |
   | Alan zaten kabin icinde ve tam genislikte; ona capalanan balon
   | HICBIR YONE tasamaz.
   */
  inset-block-end: calc(100% + var(--space-1));

  /*
   |
   | Ortalanmis bir balon (`inset-inline-start: 50%; translate: -50%`)
   | daha zarif duruyor ama kartin SOL kenarina yakin bir alanda ekran
   | disina tasar ve okunmaz olur — 288px'lik bir balon, 40px'teki bir
   | dugmede -104'e kadar gider.
   |
   | Genislik alandan geliyor: max-content ama alani asamaz.
   */
  inset-inline: 0;

  inline-size: fit-content;

  /* Genis panelde tek devasa satir olmasin: rahat okunur bir satir boyu. */
  max-inline-size: min(100%, 26rem);

  /*
   | GORUNUM: BEYAZ KART, LACIVERT HAP DEGIL — sahibinin karari,
   | 24 Agustos 2026: *"gosterdigi yazi biraz boktan, profesyonel premium
   | bir sekle kart icinde guzel gozukecek sekilde."*
   |
   | Ters zemin (lacivert) kucuk puntoyla sikisik bir hap gibi okunuyordu.
   | Simdi panel yuzeyinin kendisi: beyaz zemin + ince kenarlik + TEMAS
   | golgesi; metin --text-sm ve 1.55 satir yuksekligiyle nefes aliyor.
   | Cift kontrast zaten olculmus (--text-default / --surface-default).
   |
   | ⛔ GOLGE `--shadow-sm`, `--shadow-md` DEGIL — ve bunu bekci soyledi:
   | kenarlik + genis golge ayni ogede "hayalet kart" yasagina takilir
   | (ThemeTest; sinir kenarligin, yukselti golgenin isi — ikisi birden
   | konusamaz). Ilk yazimda md koydum, test dustu, tasarim kurala geldi.
   |
   | ⛔ GRADYAN/BULANIKLIK YOK (tema yasagi); yaricap kontrol olcegi.
   */
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-default);
  color: var(--text-default);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  text-align: start;

  /*
   | ⛔ `display: none` DEGIL. Girdinin `aria-describedby`si bu ogeye
   | bakiyor; gizlemek yardimi ekran okuyucudan da kaldirirdi.
   */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast) var(--ease-out);

  z-index: var(--z-tooltip);
}

.alan-ipucu-dugme:hover + .alan-ipucu-balon,
.alan-ipucu-dugme:focus-visible + .alan-ipucu-balon,
.alan-ipucu-balon:hover {
  opacity: 1;
  visibility: visible;
}

/*
 | ⛔ ESCAPE ILE KAPANDIGINDA `:hover` HÂLÂ DOGRU OLABILIR. `panel.js`
 | isareti koyuyor; ozgullugu yukaridaki kurallardan yuksek olmali,
 | yoksa fare hâlâ ustundeyken balon geri acilirdi.
 */
.alan-ipucu[data-ipucu-kapali] .alan-ipucu-balon {
  opacity: 0;
  visibility: hidden;
}
.alan-hata   { font-size: var(--text-xs); font-weight: 600; color: var(--danger-ink); }

/*
 | Iliskili alanlari gruplayan <fieldset>. Tarayicinin varsayilan
 | fieldset cercevesi ve dolgusu bu tasarimda yabanci duruyor; sifirlanip
 | projenin kendi olcegiyle yeniden kuruluyor.
 |
 | ⚠️ SINIF ONCEDEN VARDI, KURALI YOKTU: `/bayi/dukkanim` calisma saati
 | bloklari bu sinifi kullaniyor ve hicbir sey uygulanmiyordu — Faz 7'de
 | `.izgara-genis` ile ogrenilen "olu degistirici" deseninin aynisi.
 */
.alan-kume {
  display: flex; flex-direction: column; gap: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  padding: var(--space-3);
  margin: 0;
  min-inline-size: 0;   /* fieldset varsayilani icerigi tasirir */
}

.alan-kume > legend {
  padding-inline: var(--space-1);
  font-size: var(--text-sm); font-weight: 600;
}

/*
 | PASIF DUGME — sistem geneli, olculdu ki kendiliginden OLMUYOR.
 |
 | `.dugme` ozel boyali: tarayici `disabled` denetimde kendi gri tonunu
 | ancak kendi boyadigi dugmede uygular. Bu kural olmadan kilitli dugme
 | tipki canli gibi gorunur — "tiklayinca hicbir sey olmayan dugme",
 | sahibinin en basta istemedigi sey.
 |
 | Ilk cozum `<fieldset disabled>` idi ve TUM alani kilitliyordu; canli
 | tutar ozeti gelince (ucuncu karar) kilit yalniz gonderim dugmesine
 | indi — tutar alani yazilabilir kalmali ki ozet islesin.
 */
.dugme:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  border-color: var(--border-default);
  cursor: not-allowed;
}

/*
 | CANLI TUTAR OZETI — kart yukleme kartinin "yukleme sonrasi" paneli.
 |
 | ⛔ BU BIR KART DEGIL, BASILI BIR IC PANEL: `.kart` sinifi bilerek
 | yok (kart icinde kart yasak), yaricap kontrol olceginden. Zemin
 | `--surface-muted` — kart beyazindan bir kademe geride durur, ozet
 | "hesap makinesi ciktisi" gibi okunur.
 |
 | Son satir (yukleme sonrasi) panelin tek vurgusu: ust cizgi + buyuk
 | punto + basari murekkebi. Izgara hucre hucre kenarlik cizer; cizgi
 | iki hucreye birden konur ki tam genislikte tek cizgi okunssun.
 */
.tutar-onizleme {
  background: var(--surface-muted);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
}

.tutar-onizleme .onizleme-sonuc-etiket,
.tutar-onizleme .onizleme-sonuc {
  border-block-start: 1px solid var(--border-default);
  padding-block-start: 0.5rem;
  margin-block-start: 0.25rem;
}

.tutar-onizleme .onizleme-sonuc-etiket { align-self: center; font-weight: 600; }

.tutar-onizleme .onizleme-sonuc {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--success-ink);
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* Betik deger tazelerken kisa bir soluklasma — goz "degisti"yi yakalar. */
.onizleme-sonuc.deger-tazeleniyor { opacity: 0.3; }

/*
 | Montaj kaniti gorseli — §8.4. Yonetici plakayi okuyabilmeli, yani
 | kucuk bir kucuk resim yetmez; ama telefonla cekilmis 4000px'lik bir
 | fotograf da yonetim tablosunu tasirir. Ust sinir kutuyu, `height:auto`
 | orani koruyor.
 */
/*
 | Kurtarma kodlari — §9.2. Tek sutunda, esit genislikte rakamlarla.
 | Kullanici bunlari ELLE KOPYALIYOR; satirlarin hizali olmasi okuma
 | hatasini dusuruyor ve kod yanlis okunursa hesaba girilemiyor.
 */
.kod-listesi {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  /*
   | Taban `min(..., 100%)` ile sarili: 320px'lik bir ekranda 11rem'lik
   | sabit bir taban satiri tasirirdi. `ThemeTest` bu kurali tariyor.
   */
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-1);
}

.kod-listesi > li {
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  text-align: center;
}

.kanit-gorseli {
  display: block;
  max-inline-size: min(100%, 40rem);
  block-size: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
}

.alan[data-hata] input,
.alan[data-hata] select,
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger-ink);
}

input[disabled], select[disabled], textarea[disabled] {
  background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed;
}

/* ==========================================================================
   Bos durum ve yuklenme — "kayit yok" demez, arayuzu ogretir
   ========================================================================== */

.bos-durum {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-panel);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-muted);
}
/*
 | ⚠️ BU KURAL KALIYOR. Musteri tarafi ve bayi portali `.bos-durum`
 | icinde hala `<h3>` kullaniyor ve o ekranlar bu turun kapsami disinda.
 | Yonetim paneli `<x-bos-durum>` bilesenine gecti; oradaki baslik artik
 | `.bos-durum-baslik`.
 */
.bos-durum h3 { color: var(--text-default); margin-bottom: var(--space-1); }

/*
 | `<x-bos-durum>` bileseninin parcalari — Tur 1, madde 6.
 | Taban `.bos-durum` kurallarina DOKUNULMADI; hepsi yeni sinif.
 */
.bos-durum > .ikon {
  inline-size: var(--ikon-xl);
  block-size: var(--ikon-xl);
  /* Ikon metinden sonra gelir: once ne oldugunu oku, sonra sekli gor. */
  color: var(--text-muted);
  margin-block-end: var(--space-2);
}

.bos-durum-baslik {
  margin: 0 0 var(--space-1);
  color: var(--text-default);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Bos bir kutuda satirin ekrani bastan basa gecmesi okumayi zorlastirir. */
.bos-durum-metin { margin: 0 auto; max-inline-size: 46ch; }
.bos-durum-metin > p { margin: 0; }
.bos-durum-metin > p + p { margin-block-start: var(--space-1); }

.bos-durum-eylem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/*
 | IC ICE BAGLAMDA KUCULUR — Tur 1, madde 11.
 |
 | Madde 9'da bayi detayi katlanir bir satira girince icindeki "Belge
 | yuklenmemis" kutusu, kendisinden buyuk bir bosluk kaplar hâle geldi:
 | sayfanin ana bos durumuyla bir tablo hucresinin ici ayni olcuyu
 | tasiyamaz. Ayni bilesen, daha kucuk ses.
 */
details .bos-durum,
.satir-detay .bos-durum {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

details .bos-durum > .ikon,
.satir-detay .bos-durum > .ikon {
  inline-size: var(--ikon-lg);
  block-size: var(--ikon-lg);
  margin-block-end: 0.375rem;
}

/*
 | ⛔ `.iskelet` SILINDI — Tur 1, madde 6.
 |
 | Nabiz animasyonlu bir yukleme iskeletiydi ve gorunumlerde SIFIR
 | kullanimi vardi (olculdu). Panelde JS yok, dolayisiyla asenkron
 | yukleme de yok: sunucu sayfayi dolu gonderiyor. Gosterecek bir
 | "yukleniyor" ani olmayan bir bilesen olu koddur.
 |
 | `.bos-durum` ile BIRLESTIRILMEDI: iskelet "veri geliyor", bos durum
 | "veri yok" demek. Ikisini tek sinifta toplamak, yanlis anlam tasiyan
 | bir sinif birakirdi.
 |
 | JS geldiginde (Tur 2, madde 15) geri gerekirse: bu commit'ten
 | `git show` ile alinir.
 */

/*
 | §5.10 — "kaynagi olmayan rakam uydurulmaz".
 | Olcum yoksa KPI kutusu bos deger degil, SEBEP gosterir.
 */
.olcum-yok {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-panel);
  padding: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.olcum-yok .olcum-yok-baslik { font-weight: 600; color: var(--text-default); display: block; }

/* ==========================================================================
   Pano olcumleri ve grafik — §6.10
   ========================================================================== */

/*
 | Maskelenmis KPI. Deger silinmez, GIZLENIR; kutunun ritmi bozulmasin
 | diye yer tutucu kalir. Anlami tasiyan sey yanindaki rozet ve nottur,
 | bu isaret degil — bu yuzden ekran okuyucudan gizlenir (aria-hidden).
 */
.tutar-maskeli { color: var(--text-muted); letter-spacing: 0.15em; }

/* --------------------------------------------------------------------------
   KPI iki kademe — Tur 1, madde 2
   --------------------------------------------------------------------------
   Once on kart da ayni agirliktaydi ve hepsi ayni anda bagiriyordu.
   Birincil olcumler artik daha genis kutuda ve daha buyuk rakamla,
   kalani daralmis halde.

   ⛔ KADEME FARKI RENKLE DEGIL, OLCUYLE ANLATILIYOR. Renk bu temada
   anlam tasir (birincil eylem, tehlike); bir karti "onemli" diye
   renklendirmek o sozlugu bozardi.
   -------------------------------------------------------------------------- */

/*
 | ⛔ `.kpi-birincil` SILINDI — 21 Agustos 2026, tema turu.
 |
 | Kurali `.izgara-genis` ile BIREBIR AYNIYDI (300px esik). Iki ad, tek
 | davranis: panoya ozel bir izgara ailesi kurulmus ama hicbir seyi farkli
 | yapmiyordu. Cagri yerleri `.izgara izgara-genis` kullaniyor.
 */

.kpi-kart-buyuk .tutar { font-size: var(--text-4xl); line-height: var(--leading-display); }

/*
 | Ikincil kartlar daha dar bir izgaraya siginir: birincil satirla ayni
 | genislikte olsalardi kademe farki yalniz yazi boyutunda kalirdi.
 |
 | ⚠️ ESIK 200px DEGIL 168px — Tur 4, T4. Sebep olculdu:
 |
 | Yonetim panosunda ALTI ikincil kart var. 1137px'lik kapta 200px esigi
 | BES sutun uretiyordu; altinci kart tek basina ikinci satirda kaliyordu.
 |
 |     5 sutun → 2 satir → 143 + 24 + 143 = 310px, yaninda dort bos yuva
 |     6 sutun → 1 satir → 169px, yetim yok
 |
 | Dar sutunda baslik bir satir daha tasiyor (77px'e cikan tek baslik
 | "Bugunku garanti basvurusu"); blogun yariya inmesinin bedeli bu.
 |
 | ⛔ KART SAYISINA GORE AYARLANMADI. `auto-fit` esigi bir ALT SINIR:
 | kap daraldikca 6→5→4→3 diye kendiliginden dusuyor, genisledikce
 | sutunlar `1fr` ile yayiliyor. Altiya sabitlenmis bir izgara, kart
 | sayisi degisen her panoda yeniden kirilirdi.
 */
/*
 | ⛔ `.kpi-ikincil` -> `.izgara-yogun` — panoya ozel bir ad olmaktan cikip
 | IZGARA AILESINE katildi. Ailenin uc basamagi artik:
 |     izgara-yogun 168px · izgara 240px · izgara-genis 300px
 | Ustundeki olculmus 168px gerekcesi aynen gecerli.
 */
.izgara-yogun { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.izgara-yogun .tutar { font-size: var(--text-xl); }
.izgara-yogun h3 { font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   OLCUM KUTUSU — Tur 4, T4
   --------------------------------------------------------------------------
   Bilesenin kendi dosyasi neden var oldugunu anlatiyor
   (`components/olcum.blade.php`): ayni kutu 14 dosyada 32 kez elle
   yazilmisti, uc ayri sozcukle.

   BURASI o kutunun tek gorsel kurali.

   ⛔ RAKAMLAR ORTAK HATTA INER. Sebep ekranda gorildu, testte degil:
   basliklar 1, 2 ve 3 satir olunca alti kartin rakami alti ayri
   yukseklikte duruyordu (26 / 51 / 77px'lik basliklarin altinda). Goz
   bir satir sayiyi soldan saga tarayamiyor, her kartta yeniden ariyordu
   — sahibinin "her sey karisik" dediginin olculebilir hali.

   Kutu bir sutun ve rakam `auto` ust bosluguyla dibe cekiliyor: baslik
   kac satir olursa olsun rakamlar ayni hatta.

   ⚠️ OZGULLUK KONTROL EDILDI. Bu turda bir kez `margin-block-start:auto`
   daha ozgul bir `margin` bildirimine yenilip sessizce 0 olmustu
   (teknoloji kartlari). Hesaplanan deger tarayicida dogrulandi.
   -------------------------------------------------------------------------- */

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

/*
| --- OLCUM KUTUSU TIKLANABILIR — 18 Agustos 2026 -----------------------
|
| Sahibi: *"orda totalde 6 kart var, tikladigimizda NOKTA ATISINI onlarla
| alakali yere gidelim."*
|
| ⛔ KUTU BIR `<a>` DEGIL. Baglanti GORUNMEZ ve AYRI bir oge: erisilebilir
| adi etiket metni, `::after` yerine kendisi `inset: 0` ile kutuyu
| kapliyor. Kutu `<a>` olsaydi ekran okuyucu etiketi + rakami + rozeti
| TEK NEFESTE baglanti adi olarak okurdu.
|
| ⚠️ `position: relative` KUTUYA veriliyor — yayilan katmanin capasi o.
*/
.olcum-baglantili { position: relative; cursor: pointer; }

/*
| Baglanti GORUNMEZ: erisilebilir adi etiket metni, isi kutunun
| tamamini tiklanabilir yapmak. Gorunur etiket olduğu yerde kaliyor —
| ipucusuyla birlikte.
*/
.olcum-yayilan { position: absolute; inset: 0; }

/*
| ⚠️ IPUCU YAYILAN KATMANIN USTUNDE DURMAK ZORUNDA. Katman kutunun
| tamamini ortuyor; ipucu altinda kalirsa uzerine gelen imlec
| baglantiyi bulur ve baloncuk HIC ACILMAZ. Ayni desen urun kartindaki
| garanti rozetinde de var.
*/
.olcum-baglantili .ipucu { position: relative; z-index: 1; }

/*
| Odak halkasi TUM KUTUYU cerceveliyor, yalniz baglantiyi degil:
| tiklama alani kutu oldugu icin klavye kullanicisinin gordugu alan da
| o olmali.
|
| `:focus-within` KULLANILMIYOR: fareyle tiklayinca da tetiklenir ve
| her tiklamada kutu cercevelenirdi.
*/
.olcum-yayilan:focus-visible { box-shadow: var(--focus-ring-ic); border-radius: var(--radius-panel); }

/*
| --- OLCUM KADEMESI: uyari / tehlike — 18 Agustos 2026 ------------------
|
| Sahibi: *"renk ayrimlarina da dikkat et, karisik gozuken aslinda
| renklerde oluyor."* Panolar girisinde alti olcum yan yana duruyordu ve
| ucu ALARM olcumuydu (bekleyen onay, acik risk vakasi, vadesi gecen
| havale). Renk hicbirinde yoktu: "Bekleyen onay: 1" ile "Bugunku
| siparis: 0" birebir ayni kutuydu.
|
| ⛔ KART TAMAMEN BOYANMIYOR. Alti kutunun ucu dolu kirmizi olsaydi
| ekran alarm panosuna donerdi; oysa "bekleyen onay" gunun normal isi.
| Boyanan sey ZEMININ TONU (tint) ve RAKAMIN rengi (ink) — ikisi de
| zaten tanimli token, yeni renk uretilmedi.
|
| ⛔ RENK TEK BASINA ANLAM TASIMIYOR (rozet kuralinin aynisi): rakamin
| yaninda etiketi hep yaziyor ("Acik risk vakasi") ve kirmizi olan
| olcumler `--danger-ink` ile 6.95:1, sari olanlar `--warning-ink` ile
| 5.51:1 kontrastta — renk gormeyen de sayiyi ayni netlikte okur.
|
| ⚠️ KENARLIK + GENIS GOLGE BIRLIKTE KULLANILMADI: kart zaten kendi
| golgesini tasiyor, uzerine bir de renkli cerceve koymak kutuyu
| "uyari kutusu"na cevirirdi. Ayirt edici olan ton farki.
*/
.olcum-uyari   { background: var(--warning-tint); }
.olcum-tehlike { background: var(--danger-tint); }

.olcum-uyari   .tutar { color: var(--warning-ink); }
.olcum-tehlike .tutar { color: var(--danger-ink); }

/*
| Etiket ve not, renkli zeminde kendi tonunun koyu ucuna cekiliyor.
| Gri metin renkli zeminde soluk kalir — o yuzden notr gri yerine
| zeminin KENDI hue'sunun koyusu kullaniliyor.
*/
.olcum-uyari   .olcum-etiket,
.olcum-uyari   .not { color: var(--warning-ink); }
.olcum-tehlike .olcum-etiket,
.olcum-tehlike .not { color: var(--danger-ink); }

/*
 | ⚠️ `:last-child` KASITLI — kural KENDINI SINIRLIYOR.
 |
 | Once bu secici `.olcum > .tutar` idi ve yanlisti. Tarayicida denendi:
 | rakamin ARDINDA bir sey olan kutularda (bayi bakiye kartlari: tutar +
 | durum rozeti, maskeli KPI: tutar + rozet, delta cipli KPI) rakami dibe
 | cekmek onun altindaki ogeyi de suruklüyor, rozetler kart genisligine
 | yayiliyor ve bosluk kaybolmuyor — yalnizca yer degistiriyordu.
 |
 | Rakami dibe cekmek YALNIZ rakam son ogeyken hem guvenli hem faydali:
 | o zaman ustundeki tek degisken baslik satir sayisidir ve `auto` tam
 | olarak o farki yutar. Ardinda icerik varsa kutunun dikey duzenini
 | icerigin kendisi kuruyor; kural karisimiyor.
 */
.olcum > .tutar:last-child { margin-block-start: auto; }

/*
 | ⚠️ ROZET KENDI GENISLIGINDE KALIR.
 |
 | Kutu sutun yonlu bir flex oldugu icin cocuklarin varsayilani
 | `stretch`: durum rozeti kart genisligine yayilip bir bandroluna
 | donusuyordu (bayi bakiye kartlarinda tarayicida gorildu). Rozet
 | metnini sarmali; `<dl>` gibi tam genislik isteyen ogeler ise
 | gerilmeye devam etmeli — o yuzden kural rozete OZEL, genel degil.
 */
.olcum > .rozet { align-self: flex-start; }

.olcum-etiket { display: flex; align-items: center; gap: 0.375rem; }
.olcum-etiket .ikon { flex: none; inline-size: var(--ikon-sm); block-size: var(--ikon-sm); color: var(--text-muted); }

/*
 | Delta cipi. Eskiden her kartin altinda uc satirlik bir karsilastirma
 | metni vardi; en cok tekrar edeni "Onceki donem 0 — yuzde degisim
 | hesaplanmaz." idi. Tek satira indi, ayrinti `title`'da duruyor.
 |
 | ⛔ RENK YOK — kasitli. Bir olcumde artis iyi (tahsilat), digerinde
 | kotudur (geciken cari). Yesil/kirmizi bir cip, ayni bileseni iki
 | zit anlamda kullanmak olurdu. Yon UCGEN ISARETIYLE anlatiliyor ve
 | isaretin ne dedigi `title`'da kelimeyle yaziyor.
 */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  /* Imlecle bekleyince `title` cikacagini bildirir. */
  cursor: help;
}

/*
 | Sparkline — dekoratif, `aria-hidden`. Kartin son satiri degil,
 | rakamla cip arasindaki nefes: degerin nereden geldigini goz ucuyla
 | gosterir, okunacak bir sey iddia etmez.
 */
.grafik-sparkline {
  display: block;
  inline-size: 100%;
  max-inline-size: 100px;
  block-size: 28px;
  margin-block-start: var(--space-1);
  overflow: visible;
}

.grafik-sparkline polyline {
  fill: none;
  stroke: var(--action-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /*
   | `preserveAspectRatio="none"` cizgiyi yatayda gerdigi icin kalinlik
   | da gerilirdi; `vector-effect` onu piksel olcusunde sabitliyor.
   */
  vector-effect: non-scaling-stroke;
}

/*
 | Grafik kutusu. Kutuphane YOK: dagilim `<meter>`, zaman serisi satir ici
 | SVG. Ikisi de satir ici stil gerektirmez — genislik ve nokta dizisi
 | VERIDIR, bicim buradan gelir.
 */
.grafik { display: flex; flex-direction: column; }
.grafik > h3 { margin-bottom: var(--space-2); }

.grafik-cizgi {
  inline-size: 100%;
  block-size: 5rem;
  display: block;
  margin-block: var(--space-1) var(--space-2);
}

/*
 | CIZGI ALTI DOLGU — Tur 1, madde 7.
 |
 | ⛔ GRADYAN DEGIL, DUZ RENK. Gradyan bu projede yasak ve testli
 | ("GRADYAN HIC YOK — istisna da kalkti"). Saydamlik `color-mix` ile
 | veriliyor; sonuc tek bir duz renk, hicbir gecis yok.
 |
 | Dolgu YALNIZ olcek sifirdan basliyorsa ciziliyor (bilesende karar
 | veriliyor): sifirdan baslamayan bir alan grafigi buyuklugu abartir.
 */
.grafik-cizgi-dolgu {
  fill: color-mix(in srgb, var(--action-secondary) 8%, transparent);
  stroke: none;
}

.grafik-cizgi polyline {
  fill: none;
  stroke: var(--brand-blue-500);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* viewBox esnerken cizgi kalinligi sabit kalir. */
  vector-effect: non-scaling-stroke;
}

.grafik-satirlar {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--space-1);
}

.grafik-satir {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
}

.grafik-etiket { color: var(--text-muted); overflow-wrap: anywhere; }
.grafik-deger  { font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 | `<meter>` tarayici varsayilanlari cok farklidir; sifirlanip token'la
 | yeniden kurulur. Cizilmese bile satirdaki sayi okunur kalir — anlam
 | asla yalniz cubuga bagli degildir.
 */
.grafik-olcu {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 100%;
  block-size: 0.625rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.grafik-olcu::-webkit-meter-inner-element { block-size: 100%; }
.grafik-olcu::-webkit-meter-bar {
  background: var(--surface-sunken);
  border: 0; border-radius: var(--radius-pill);
}
.grafik-olcu::-webkit-meter-optimum-value,
.grafik-olcu::-webkit-meter-suboptimum-value,
.grafik-olcu::-webkit-meter-even-less-good-value {
  background: var(--brand-blue-500);
  border-radius: var(--radius-pill);
}
.grafik-olcu::-moz-meter-bar {
  background: var(--brand-blue-500);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   `<x-grafik>` — SUNUCU TARAFINDA SVG (Revize m.14, Faz 6.1c)
   ==========================================================================
   Kutuphane yok, JS yok, CSP temiz. Geometri VERIDIR (Blade uretir);
   renk ve kalinlik BURADAN gelir — satir ici stil sifir.

   ⛔ Renk tek basina anlam tasimaz: her grafigin altinda etiketli deger
   listesi basiliyor ve palet adimlari arasinda ACIKLIK farki da var,
   yalniz ton farki degil.
   ========================================================================== */

.grafik-kutu { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.grafik-baslik { font-weight: 600; font-size: var(--text-sm); color: var(--text-muted); }

/* --- Palet. Dolgu ve kontur ayni token'dan; oge turune gore biri isler. --- */
.grafik-renk-1 { fill: var(--grafik-1); stroke: var(--grafik-1); color: var(--grafik-1); }
.grafik-renk-2 { fill: var(--grafik-2); stroke: var(--grafik-2); color: var(--grafik-2); }
.grafik-renk-3 { fill: var(--grafik-3); stroke: var(--grafik-3); color: var(--grafik-3); }
.grafik-renk-4 { fill: var(--grafik-4); stroke: var(--grafik-4); color: var(--grafik-4); }
.grafik-renk-5 { fill: var(--grafik-5); stroke: var(--grafik-5); color: var(--grafik-5); }

/* --- Donut --- */

.grafik-donut { inline-size: 100%; max-inline-size: 12rem; block-size: auto; align-self: center; }

/*
 | Dilimler CIZGI olarak ciziliyor (`stroke-dasharray`), dolgu olarak
 | degil: bir cemberin konturu tek bir `<circle>` ile parcalanabiliyor
 | ve yay yolu (`A`) hesabina gerek kalmiyor.
 */
.grafik-donut circle {
  fill: none;
  stroke-width: 5;
}

.grafik-donut-zemin { stroke: var(--surface-sunken); }

/*
 | Halkanin ortasindaki toplam — Tur 1, madde 7. `<text>` yalniz burada
 | kullanilabiliyor: donut'un olcegi iki eksende AYNI (`preserveAspectRatio`
 | varsayilan). Cizgi ve sutunda olcek `none` ve yazi gerilirdi.
 |
 | Punto SVG BIRIMIYLE yaziliyor (viewBox 42 birim genis), token'la degil:
 | token `rem` tasir ve SVG icinde viewBox olcegine takilir.
 */
.grafik-donut-toplam {
  fill: var(--text-default);
  font-size: 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Sutun --- */

.grafik-sutun { inline-size: 100%; block-size: 8rem; display: block; }

.grafik-sutun-cubuk { stroke: none; }

/*
 | EKSEN ETIKETI — Tur 1, madde 7.
 |
 | Ilk etiket · olcek · son etiket. SVG `<text>` DEGIL: cizgi ve sutun
 | `preserveAspectRatio="none"` kullaniyor ve orada yazi yatayda
 | gerilip okunmaz hâle gelirdi.
 */
.grafik-eksen {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.grafik-eksen-olcek { color: var(--text-default); font-weight: 600; }

/* --------------------------------------------------------------------------
   Grafik etkilesimi — Tur 2, madde 15
   --------------------------------------------------------------------------
   Bu bolumdeki siniflari `public/js/panel.js` ekliyor. JS yuklenmezse
   hicbiri DOM'a girmez ve panel Tur 1 sonundaki hâliyle calisir; bu
   yuzden hicbir kural bir seyi GIZLEMIYOR, yalniz vurgu ekliyor.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Okuma satiri — fare ya da klavye bir noktaya geldiginde degeri yazar.
   --------------------------------------------------------------------------
   ⛔ YUKSEKLIGI SABIT ve bu bir sus degil, TITREMENIN caresi (Tur 3, F1/D3).

   Sahibi bildirdi: "tablolara mouse ile ustune getirdigimde titriyor."
   Sebep olculdu:

     - Okuma satiri grafik ile DOKUM TABLOSUNUN ARASINDA duruyor.
     - `panel.js` icine satirin BUTUN metnini kopyaliyor
       (`kaynak.textContent`) — cok sutunlu bir satirda bu uzun bir dize.
     - Eski `min-block-size: 1.25rem` = 20px idi; tek satir bile
       14px x 1.55 = 21.7px tutuyordu. Metin sarinca 40px'i asiyordu.

   Sonuc kendini besleyen bir dongu: imlec satira girer -> metin yazilir ->
   tablo asagi kayar -> imlec satirdan cikar -> metin silinir -> tablo geri
   kayar -> imlec yine satira girer. Saniyede birkac kez. "Titriyor."

   Uc kural birlikte calisiyor ve ucu de gerekli:
     `block-size` SABIT (min degil)  — bos ya da dolu, kutu ayni
     `line-height` kutuya esit       — tek satir kutuyu tam doldurur
     `nowrap` + `ellipsis`           — uzun metin sarmaz, kirpilir

   ⚠️ KIRPMAKLA BILGI KAYBOLMUYOR: bu satir zaten dokum satirinin bir
   KOPYASI ve orijinali ekranda, hemen altinda duruyor. Ekran okuyucu da
   `aria-live` uzerinden metnin TAMAMINI okur — kirpma yalniz gorsel.
   -------------------------------------------------------------------------- */
.grafik-okuma {
  block-size: 1.5rem;
  line-height: 1.5rem;
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 | CIZGI GRAFIGINDE JS'IN TURETTIGI NOKTA ISARETLERI.
 |
 | ⛔ `<circle>` DEGIL, SIFIR UZUNLUKTA `<line>` — sebebi olculdu.
 |
 | Cizgi grafigi `preserveAspectRatio="none"` kullaniyor: genis bir
 | kartta yatay olcek ~13x, dikey ~4x. Bir daire orada YASSI BIR ELIPS
 | olarak ciziliyordu — sahibinin "mouseyi getiriyorum yuvarlak bir sey
 | cikiyor, cok cirkin" dedigi sey buydu.
 |
 | `x1==x2 && y1==y2` olan bir cizgi, `stroke-linecap: round` ile capi
 | `stroke-width` kadar olan TAM BIR DAIRE cizer; `vector-effect:
 | non-scaling-stroke` de kalinligi EKRAN PIKSELINE baglar. Yani
 | geometri degil KALEM olcekleniyor ve isaret her genislikte yuvarlak
 | kaliyor.
 |
 | IKI KATMAN: beyaz halka altta, renkli cekirdek ustte. Tek katman
 | olsaydi mavi nokta mavi cizginin uzerinde kaybolurdu — isaretin
 | gorevi tam olarak "buradayim" demek.
 */
.grafik-nokta-halka,
.grafik-nokta-cekirdek {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* Gorunmez ama isaretlenebilir: cizgiyi benek dizisine cevirmiyoruz. */
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.grafik-nokta-halka    { stroke: var(--surface-default);  stroke-width: 11; }
.grafik-nokta-cekirdek { stroke: var(--action-secondary); stroke-width: 7; }

/*
 | HEDEF ALANI GORUNMEZ AMA GENIS. Isaret ekranda ~9 px; otuz noktali
 | bir seride noktalar arasi bosluk ondan buyuk ve imlec cogu zaman
 | ikisinin ARASINA duserdi. Dikdortgen butun sutunu hedef yapiyor:
 | gorunen isaret kucuk, dokunulan alan genis.
 |
 | ⛔ `fill: transparent`, `fill: none` DEGIL: `none` fare olaylarini da
 | dusurur ve hedef hic calismaz.
 */
.grafik-hedef { fill: transparent; }

.grafik-nokta:hover .grafik-nokta-halka,
.grafik-nokta:hover .grafik-nokta-cekirdek,
.grafik-nokta.grafik-vurgu .grafik-nokta-halka,
.grafik-nokta.grafik-vurgu .grafik-nokta-cekirdek { opacity: 1; }

/*
 | Vurgu — hem SVG seklinde hem dokum satirinda. Renk TEK BASINA anlam
 | tasimiyor: ayni anda okuma satiri degeri YAZIYLA soyluyor.
 */
.grafik-vurgu { outline: none; }

/*
 | ⚠️ `:not(.satir-detay)` OZGULLUK ICIN, anlam icin degil (Tur 3, F2).
 | Satir seritlemesi `tbody tr:nth-child(even):not(.satir-detay)` ile
 | geliyor ve o (0,2,2); vurgu tek basina (0,1,2) kalsaydi CIFT
 | satirlarda vurgu hic gorunmezdi. Iki secici artik esit ve bu kural
 | dosyada SONRA geldigi icin kazaniyor.
 */
.grafik-liste > div.grafik-vurgu,
tbody tr.grafik-vurgu:not(.satir-detay) { background: var(--surface-sunken); }

/*
 | VURGU VE HOVER GECISI — Tur 4, T6'da eklendi.
 |
 | Olculdu: `panel.js` grafige gelince ilgili satira `.grafik-vurgu`
 | ekliyordu ama o sinifta HICBIR GECIS yoktu — zemin aninda
 | degisiyordu. Grafikle tablo arasindaki bagi kuran sey tam da bu
 | vurgu; sicrayarak gelince bag "ayni anda oldu" degil "bir sey
 | bozuldu" gibi okunuyor.
 |
 | Tablo satirinda GENEL BIR HOVER KURALI DA YOKTU. Eklendi: fare
 | satirin uzerindeyken hangi satirda olundugu belli olmali — yogun bir
 | tabloda goz kaymasini engelleyen en ucuz sey budur.
 |
 | ⚠️ `--ease-out`: gelen bir sey. Vurgu "varir", cekilmez.
 |
 | ⛔ HOVER YALNIZ ISARETLEYICI ICIN: `@media (hover: hover)` ile
 | sarilmadi cunku dokunmatikte `:hover` zaten tetiklenmiyor ve
 | tetiklendigi nadir durumda (kalem) davranis dogru.
 */
:where(.grafik-liste > div, tbody tr) {
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

tbody tr:hover:not(.satir-detay):not(.grafik-vurgu) {
  background: var(--surface-inset);
}

.grafik-sutun-cubuk.grafik-vurgu,
.grafik-donut-dilim.grafik-vurgu { opacity: 0.75; }

/* Klavye odagi GORUNUR kalmali — dokum satiri artik odaklanilabilir. */
.grafik-liste > div:focus-visible,
tbody tr:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Grafik kutusundaki bos durum, sayfa bos durumundan kisik sesle konusur. */
.grafik-kutu .bos-durum,
.grafik .bos-durum { padding: var(--space-2); font-size: var(--text-sm); }

.grafik-kutu .bos-durum > .ikon,
.grafik .bos-durum > .ikon {
  inline-size: var(--ikon-lg);
  block-size: var(--ikon-lg);
  margin-block-end: 0.375rem;
}

.grafik-taban {
  stroke: var(--border-default);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- Cizgi: son nokta isareti --- */

/*
 | Sifir uzunlukta cizgi + yuvarlak uc = ekran pikseline bagli, TAM
 | YUVARLAK bir nokta. `preserveAspectRatio="none"` altinda `<circle>`
 | elipse donuyordu (bilesendeki nota bakin).
 */
.grafik-cizgi-son {
  stroke: var(--brand-blue-500);
  stroke-width: 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/*
 | SON NOKTA KIRPILMASIN. Isaret serinin son x'inde, yani `viewBox`in
 | tam kenarinda duruyor; SVG varsayilan olarak tasani kirptigi icin
 | ekranda YARIM bir nokta gorunuyordu (sahibinin ekran goruntusunde
 | sag ucta duran o kucuk tirnak).
 |
 | ⛔ TASACAK BASKA BIR SEY YOK: `<polyline>` ve dolgu `<polygon>`
 | tam olarak 0..100 arasinda kaliyor, taban cizgisi de oyle. Tasma
 | iznini yalniz yuvarlak uc kullaniyor.
 */
.grafik-cizgi { overflow: visible; }

/* --- Deger listesi: grafik cizilmese de okunur kalan kisim --- */

.grafik-liste {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: var(--text-sm);
}

.grafik-liste > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.grafik-liste dt {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.grafik-liste dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

/* Benek `currentColor` aliyor; palet sinifi `color`u da ayarliyor. */
.grafik-benek {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

/* ==========================================================================
   Ust bant · baslik · gezinti · footer
   ========================================================================== */

/*
 | `--border-inverse` HEP `transparent`: lacivert bant beyaz sayfadan
 | zaten 19:1 ile ayriliyor, gorunur bir kenara ihtiyac yok.
 |
 | ⚠️ Bu satir eskiden KOYU TEMA icindi — orada lacivert ile sayfa
 | arasindaki oran 1,1:1 kaliyor ve bant sayfaya karisiyordu. Koyu tema
 | 13 Agustos 2026'da kaldirildi; kenarlik yerinde birakildi cunku o
 | 1px yerlesim ayiriyor, silmek bandi bir piksel kaydirirdi.
 */
.ust-bant {
  background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--text-xs); padding-block: var(--space-1);
  border-block-end: 1px solid var(--border-inverse);
}
.ust-bant .kap { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.ust-bant .ikincil { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   Cati — ust bant + baslik + bildirim seridi

   Butun sayfalarda AKIS ICINDE duran notr bir sarmalayici. Yalniz
   ANASAYFADA akistan cikip videonun uzerine biniyor; diger on public
   sayfa bit duzeyinde etkilenmiyor (butun bindirme kurallari
   `body.anasayfa` altinda kapsanmis).
   ========================================================================== */

.site-ustluk { position: relative; }

/*
 | ANASAYFA: cati akistan cikar, video sayfanin tepesinden baslar.
 | `fixed` DEGIL — kaydirinca cati gider; yapisik baslik istenmedi.
 |
 | Perde platosu, hero basligindakinin TERSI yonde: icerik kutusu
 | platonun ICINDE bitiyor, rampa altta ve orada metin YOK.
 | En kotu durum (bembeyaz kare): beyaz 10,02:1 · gumus 5,39:1.
 |
 | PERDE KALKTI (10 Agustos 2026). Sahibin karari: "o arkalarinda ki
 | mavi 2 seridi kaldirir misin, yazilari ona gore ayarla".
 |
 | Once %88'den %76'ya indirilmis, sonra rampasi smoothstep'e bolunmustu.
 | Ikisi de bandin KENARINI yumusatti ama bandin KENDISINI kaldirmadi;
 | ekranda hâlâ mavi bir serit duruyordu.
 |
 | Kontrast garantisi silinmedi, YER DEGISTIRDI: banttan HARFE tasindi.
 | Artik her harfin arkasinda kendi lacivert konturu var (`--metin-konturu`),
 | yani beyaz harfin dokundugu her piksel lacivert — 19,47:1, video ne
 | gosterirse gostersin. Ayni ispat, kaplanan alan 40 kat kucuk.
 */
body.anasayfa .site-ustluk {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
}

body.anasayfa header.ana {
  background: transparent;
  border-block-end-color: transparent;
}

/*
 | CATI METNI DE KENDI KONTURUNU TASIR.
 |
 | Perde kalkinca menu, ikonlar ve dil kodlari dogrudan videonun
 | uzerinde kaldi ve bunlar 16 px'lik KUCUK metin — hero basligindan
 | cok daha kirilgan. Kontur ince (2px): 3px bu olcekte harfin ic
 | bosluklarini kapatiyordu.
 |
 | Ikonlar `currentColor` ciziyor ve kontur metne ait; onlar icin
 | `filter: drop-shadow` ayni isi vektorde yapiyor.
 */
body.anasayfa header.ana .marka,
body.anasayfa header.ana nav.birincil a,
body.anasayfa header.ana .hesap :is(a, .cikis-formu button),
body.anasayfa header.ana .dil a {
  paint-order: stroke fill;
  -webkit-text-stroke: var(--metin-konturu) var(--brand-navy-950);
  text-shadow: var(--metin-golgesi);
}

body.anasayfa header.ana .ikon {
  filter: drop-shadow(0 0 2px var(--brand-navy-950))
          drop-shadow(0 1px 6px color-mix(in srgb, var(--brand-navy-950) 70%, transparent));
}

/*
 | KELIME MARKASI ANASAYFADA DA KIRMIZI — istisna KALKTI.
 |
 | Kisa bir sure beyazdi ve gerekcesi perdeydi: marka kirmizisi %76'lik
 | bantta 2,29:1'e dusuyordu, yani okunmuyordu. Perde 10 Agustos 2026'da
 | kaldirilip yerine metin konturu gelince olcum degisti — kirmizi artik
 | LACIVERT KONTURUN uzerinde duruyor ve orada 4,44:1.
 |
 | Marka 20 px / 700, yani WCAG'e gore buyuk metin; esik 3:1. 4,44 onu
 | rahatca geciyor. Beyazlatmanin teknik gerekcesi kalmadi ve gerekcesi
 | olmayan bir istisna, istisna olarak kalmamali: "marka her sayfada
 | ayni gorunur" kurali geri geldi. On bir public sayfa artik ayni.
 |
 | Kirmizinin ilk ekranda ikinci kez gorunmesi bir sorun degil: marka
 | bir AKSIYON degil, bir imza. PRODUCT.md kirmiziyi aksiyona ayiriyor
 | ve o kural "Goster" dugmesinde duruyor.
 */
body.anasayfa header.ana .marka { color: var(--text-inverse); }

body.anasayfa nav.birincil a,
body.anasayfa .hesap :is(a, .cikis-formu button),
body.anasayfa .arama-ac { color: var(--text-inverse); }

/*
 | Anasayfada video uzerinde: ikincil ogeler kisik tonda kalir.
 | `nav.birincil a.nav-ikincil` 11 Agustos'ta eklendi — bir ustteki
 | kural butun menu baglantilarini bembeyaz yapiyordu ve "Bayi
 | basvurusu" oradaki tek dusuk oncelikli madde olmasina ragmen
 | "Lastikler" ile ayni agirlikta okunuyordu.
 */
/*
 | ⚠️ `nav.birincil a.nav-ikincil` KALDIRILDI — Tur 4, olu CSS.
 |
 | Ustteki not "Bayi basvurusu" icin yazilmisti. O baglanti bugun
 | `.hesap` icinde ve sinifi `ikincil` — yani ILK secici zaten
 | yakaliyor ve kisma CALISIYOR. `nav-ikincil` diye bir sinif ise
 | isaretlemede HIC yok; secici hicbir seye degmiyordu.
 |
 | ⛔ DAVRANIS DEGISMEDI: silinen sey eslesmeyen bir seciciydi.
 */
/*
 | ⛔ GORSELIN USTUNDE SOLUK RENK YOK — 25 Agustos 2026.
 |
 | Bu kural PERDE DONEMINDEN kalmaydi. `--text-on-inverse-muted` DUZ
 | LACIVERT icin secilmis bir ton ve orada 10.46:1 veriyor; ama catinin
 | altindaki yuzey 10 Agustos'ta perdeden FOTOGRAFA dondu ve renkler
 | onunla birlikte gozden gecirilmedi.
 |
 | Olculdu — poster'in menu bandindaki EN PARLAK nokta (L = 174) uzerinde:
 |
 |     menu baglantilari  (--text-inverse)        2.22:1   kabul edilmis taban
 |     "Bayi basvurusu"   (.ikincil, muted)       1.19:1   ❌
 |     TR / EN / DE       (muted / blue-300)      1.03:1   ❌  ustelik 13px
 |
 | Yani duz lacivertte sorunsuz iki renk, gorselin uzerinde GORUNMEZ.
 | `.bolum-rakam`da birebir ayni kusur birebir ayni sekilde cozulmustu:
 | "gorsel zemine girdigi anda olcu degisti, yuzeyin EN SOLUK metni
 | olculmeli". Burada o ders uygulanmamisti.
 |
 | ⛔ COZUM PERDE DEGIL: perde gradyandir, gradyan sifira kilitli — ve
 | zaten sahibinin kendi istegiyle kalkti. Cozum, gorsel uzerindeki
 | yuzeyde soluk tonu HIC KULLANMAMAK.
 */
body.anasayfa header.ana .hesap :is(a.ikincil, .cikis-formu button),
body.anasayfa header.ana .dil a { color: var(--text-inverse); }

/*
 | AKTIF DIL ARTIK RENKLE ISARETLENMIYOR.
 |
 | Ust kural uc dil kodunu da beyaza cekti; ayrim renkte kalsaydi
 | kaybolurdu. Zaten kalmamaliydi: projenin kendi kurali "renk tek
 | basina anlam tasimaz" ve bu satir onu ciğniyordu — TR ile EN
 | arasindaki TEK fark renkti (agirlik ucunde de 600).
 |
 | `aria-current="true"` isareti dogruydu, eksik olan GORSEL karsiligi.
 */
body.anasayfa header.ana .dil a[aria-current="true"] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/*
 | ⚠️ HOVER DA BEYAZ KALIR. `--brand-blue-300` poster uzerinde 1.03:1
 | veriyor; dinlenmede beyaz olan bir baglantiyi hover'da o tona
 | cekmek, imleci uzerine getireni ODULLENDIRMEK yerine yaziyi
 | KAYBETTIRIRDI. Hover'in kendi isareti zaten var: kapsayici muafiyet
 | listesi (`nav.birincil`, `header.ana`) hover'da alt cizgiyi geri
 | getiriyor.
 */
/*
 | ⛔ `body.anasayfa nav.birincil a[aria-current="page"]` SILINDI — olu kural.
 |
 | Anasayfa menude YOK (Lastikler · Lastik Bulucu · Bayiler · Kanit
 | Merkezi · Kampanyalar · Blog · Hakkimizda), yani `body.anasayfa`
 | iken hicbir menu baglantisi `aria-current="page"` tasimiyor —
 | tarayicida olculdu, eslesme sayisi sifir. Kural hicbir seye
 | degmiyordu; degseydi de `--brand-blue-300` poster uzerinde 1.03:1
 | verecekti, yani kusurlu olurdu.
 */

body.anasayfa header.ana nav.birincil a:hover,
body.anasayfa header.ana .hesap :is(a, .cikis-formu button):hover { color: var(--text-inverse); }

/* Acik zeminli hover dolgusu lacivert perdede okunmuyor; renk yetiyor. */
body.anasayfa .hesap-ikon:hover,
body.anasayfa .arama-ac:hover { background: transparent; color: var(--brand-blue-300); }

header.ana { border-bottom: 1px solid var(--border-default); background: var(--surface-default); }
header.ana .kap {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-2); flex-wrap: wrap;
}

/*
 | KELIME MARKASI — 11 Agustos 2026'da BASLIK AILESINE bagladi.
 |
 | `--font-display` bugune kadar SIFIR seciciden cagriliyordu: token
 | tanimliydi, `theme:build` `@font-face` uretiyordu, OKUBENI.md
 | anlatiyordu — ama hicbir CSS kurali onu istemedigi icin tarayici
 | Archivo'yu HIC INDIRMIYORDU. 34 KB'lik dosya bosuna duruyordu.
 | Sebep tarihsel: baslik `92f6124`/`badfff5` commit'lerinde ekrandan
 | kalkinca display register'i okuz kaldi.
 |
 | `font-family` TABAN KURALA yaziliyor, `body.anasayfa header.ana
 | .marka` kuralina degil: o kural ThemeTest:792'de TAM DIZE olarak
 | aranıyor ve icine bir bildirim eklemek testi dusururdu.
 */
.marka {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--text-xl);
  color: var(--text-wordmark); text-decoration: none;
  letter-spacing: var(--track-wordmark);
}
.marka span { color: var(--brand-red-600); }

/*
 | ⚠️ MASAUSTUNDE SARMA YOK — 15 Agustos 2026.
 |
 | Sahibi cati goruntusunu gonderip *"bu cirkinligi de duzeltir misin"*
 | dedi. Menu iki satira tasiyor ve ikinci satirda tek basina bir oge
 | kaliyordu; logo da o yuzden iki satirlik bloga karsi ortalanip
 | asagi kayiyordu.
 |
 | ⛔ SARMAYI KAPATMAK TEK BASINA COZUM DEGILDI: sekiz madde zaten
 | sigmiyordu. Once "Bayi basvurusu" dogru komsusuna (Bayi girisi)
 | tasindi, sonra kalan yedi madde icin sarma kapatildi. Sirasi
 | onemli — once yer acilmadan `nowrap` vermek tasmaya cevirirdi.
 |
 | ⚠️ MOBILDE SARMA ACIK KALIYOR: dar ekranda tek satirda tutmak
 | menuyu okunamayacak kadar kucultmek ya da tasirmak demekti.
 */
/*
 | ⛔ MENU ORTALANIYOR — 18 Ağustos 2026. Sahibi geniş ekran görüntüsü
 | gönderdi: "solda birikmişler, düzgün bir şekilde premium şekilde
 | yapabilir miyiz."
 |
 | OLCULDU (1712 px ekran):
 |     nav kutusu   1067 px   (flex: 1 ile geriliyor)
 |     baglantilar   536 px   kutunun SOLUNA yapisik
 |     olu bosluk    531 px   kutunun SAGINDA
 |
 | Kutu geriliyordu ama icerigi gerilmiyordu; menu markaya yapisip
 | yardimcilara kadar bos bir koridor birakiyordu.
 |
 | ⚠️ SAYFA ORTASINA DEGIL, IKI KOMSUNUN ORTASINA. Sag blok (arama,
 | sepet, hesap, bayi basvurusu, dil = 341 px) sol markadan (81 px) cok
 | daha agir; menuyu sayfa merkezine koymak onu yardimcilara yaslardi.
 | `center` iki yana ESIT nefes payi birakiyor.
 |
 | ⚠️ DAR EKRANDA KENDILIGINDEN GERI CEKILIYOR: icerik kutuyu doldurunca
 | `center` ile `flex-start` ayni sonucu verir. Yeni bir kirilma noktasi
 | gerekmedi — 1180 px kabinindeki olcum (marka 121 + menu 631 +
 | yardimci 331 + dil 88 = 1171 px) aynen gecerli.
 */
nav.birincil {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  flex-wrap: wrap;
  align-items: center;

  /*
   | ⛔ `safe center` — DUZ `center` DEGIL. Ilk yazimda duz `center`
   | konmustu ve MOBILDE KUSUR URETTI: 375 px'te kutu 230 px, baglantilar
   | 604 px; `center` tasan icerigi ORTALIYOR ve her iki yana 187 px
   | tasiyordu. Sol taraftaki tasma KAYDIRILARAK ULASILAMAZ — "Lastikler"
   | ekranin disinda kaliyordu.
   |
   | `safe` anahtar sozcugu tam bunun icin: yer varsa ortalar, tasma
   | olacaksa `start` gibi davranir. Boylece genis ekranda denge, dar
   | ekranda erisilebilirlik.
   |
   | ⚠️ TARAYICIDA OLCULEREK BULUNDU. Kaynak okuyarak gorunmezdi: kural
   | dogru yazilmisti, yanlis olan sonucuydu.
   */
  justify-content: safe center;
}

/*
 | ⚠️ OLCULDU, TAHMIN EDILMEDI — 1180 px kabinde catinin icerigi:
 |     marka 121 + menu 631 + yardimci 331 + dil 88 = 1171 px
 | uzerine uc arayuz bosluğu (3 × 24 = 72) = 1243 px. Yani 63 px
 | tasiyordu ve tasan sey her seferinde SONUNCU kume oluyordu:
 | once "Bayi basvurusu", o tasininca "TR EN DE".
 |
 | ⛔ OGE TASIMAK COZUM DEGILDI: hangi kume sona kalirsa o dusuyor.
 | Yer acmak gerekiyordu, yer degistirmek degil. Genis ekranda
 | araliklar sikilastiriliyor — hicbir sey kaldirilmadan sigiyor.
 |
 | ⚠️ DOKUNMA HEDEFI KORUNDU: kucultulen sey ARALIK, tiklanabilir
 | alan degil. `nav.birincil a` dolgusu ve 24 px'lik yukseklik esigi
 | (WCAG 2.5.8) aynen duruyor.
 */
@media (min-width: 1024px) {
  /*
   | ⚠️ BOSLUK 8px'TEN 24px'E GERI ACILDI. Tur 3'te tek satira
   | sigdirmak icin sikistirilmisti ve o zaman dogruydu: olcum 1171px
   | icerik + 72px bosluk / 1180px kap idi, yani bir piksel bile
   | fazlalik yoktu.
   |
   | Iki sey degisti: (1) Barlow Inter'den %13 dar, (2) cati kabi
   | artik 1560px'e kadar aciliyor.
   |
   | ⛔ AMA SABIT 24px YAZILAMADI — olculdu ve 1100px'te TR ile DE IKI
   | SATIRA SARDI. 1024 ile 1280 arasi hala dar; genisleyen sey EKRAN,
   | menu degil.
   |
   | Bosluk AKISKAN: 1100px'te 8px (eski deger, sarmiyor), 1720px'te
   | 24px. Formul dogrusal — her 100px ekran icin ~2,6px bosluk.
   |
   | ⚠️ YENI KIRILMA NOKTASI EKLENMEDI ve bu bilincli: kume
   | (296/640/720/721/900/1024) `ThemeTest` ile kilitli ve dorduncu bir
   | esik duzeni bir kez daha kirardi. `clamp()` esiksiz cozuyor.
   */
  nav.birincil {
    flex-wrap: nowrap;
    gap: clamp(var(--space-1), (100vw - 1100px) * 0.026 + var(--space-1), var(--space-3));
  }
  nav.birincil a { white-space: nowrap; }

  /*
   | ⛔ KAP BOSLUGU DA AKISKAN — Tur 4, cok dilli olcum.
   |
   | Sabit `--space-2` (16px) ile ALMANCA cati 1024–1100px bandinda iki
   | satira tasiyordu. Olculdu (1009px, Almanca):
   |
   |     marka 81 · nav 502 · hesap 258 · dil 76 · uc bosluk 48 = 965
   |     kullanilabilir (1009 − 48 dolgu)                       = 961
   |
   | Fark DORT PIKSEL. O dort piksel dil seciciyi alt satira dusuruyor
   | ve cati 77px'ten 117px'e ciiyordu.
   |
   | ⚠️ TURKCEDE GORUNMUYOR — menu adlari kisa oldugu icin siniyor.
   | Tek dilde bakan biri bu hatayi hic gormez; uc dili birden olcmek
   | sart.
   |
   | Nav bosluguyla ayni yaklasim: esiksiz clamp. 8px'lik daralma uc
   | boslukta 24px kazandiriyor — dort piksellik acigin cok uzerinde,
   | yani ceviriler biraz uzasa da tasmiyor.
   */
  header.ana .kap {
    gap: clamp(var(--space-1), (100vw - 1100px) * 0.02 + var(--space-1), var(--space-2));
  }

  header.ana .hesap { gap: var(--space-1); }
  header.ana .dil { gap: 0.125rem; }
}

/*
 | ⚠️ SARDIGINDA SAGA YAPISIR — 15 Agustos 2026.
 |
 | Olculdu: 1100 px kabinde `.dil` (TR EN DE) ikinci satira dusuyor ama
 | SOLA yapisiyordu; ekranin sol alt kosesinde tek basina uc harf.
 | Duzeltilen sarma, yerini baska bir oksuze birakmis oluyordu.
 |
 | `margin-inline-start: auto` iki durumu birden cozuyor: tek satirda
 | zaten sagda duruyor (menunun `flex: 1`i onu oraya itiyor), sardiginda
 | da sagda kaliyor — yani catı iki satira dustugunde bile SAG SUTUN
 | hizasi bozulmuyor.
 */
header.ana .dil { margin-inline-start: auto; }

/*
 | DOKUNMA HEDEFI — WCAG 2.2 AA, SC 2.5.8. 11 Agustos 2026.
 |
 | Olculdu: bu baglantilar 22px yuksekligindeydi ve esik 24px. Footer'da
 | ve onay kutusunda ayni olcum yapilip duzeltilmisti (bkz. `.footer-liste a`
 | ve `.onay-kutusu`), CATI o turda plana dahil DEGILDI — yani ihlal
 | sitenin HER SAYFASINDA duruyordu.
 |
 | Aralik istisnasi kurtarmiyor: komsu baglantilar arasi bosluk 16px,
 | adim 38px degil. Satir ici istisna da gecmiyor — bunlar cumle icinde
 | gecen baglantilar degil, bir gezinti listesi.
 |
 | Cozum `.hesap a` ile ayni: yaziyi buyutmeden KUTUYU buyut.
 */
nav.birincil a {
  display: inline-flex; align-items: center;
  min-block-size: var(--dokunma-esigi);
  color: var(--text-default); text-decoration: none;
  font-weight: 400; font-size: var(--text-sm);
}

/*
 | Menudeki en dusuk oncelikli baglanti — bugun yalniz "Bayi basvurusu".
 | Ziyaretcilerin cok kucuk bir kismini ilgilendiriyor; menuden cikarmak
 | yerine agirligini dusuruyoruz. `.hesap a.ikincil` ile ayni ton.
 */
nav.birincil a.nav-ikincil { color: var(--text-muted); font-weight: 400; }
nav.birincil a.nav-ikincil:hover { color: var(--text-link); }
/*
 | `--text-link` acik temada zaten `--brand-blue-700`; degisen bir sey
 | yok. Koyu temada ise marka mavisi 2.4:1 kaldigi icin token acik tona
 | doner. Ham marka rengi yazsaydik koyu temada okunmazdi.
 */
nav.birincil a:hover { color: var(--text-link); }
nav.birincil a[aria-current="page"] { color: var(--text-link); font-weight: 600; }

/* --------------------------------------------------------------------------
   Acilir arama — buyutec, tiklayinca acilir

   Onceki hâli her sayfada 220px'lik bir kutu + "Ara" dugmesi olarak
   duruyordu ve basligin yarisini yiyordu. Arama BIR EYLEM, surekli duran
   bir alan degil.

   Acma/kapama `<details>` ile NATIVE: JS kapaliyken de calisiyor,
   `aria-expanded` tarayicidan geliyor, klavye bedava. `arama.js` yalnizca
   KATMAN ekliyor (odak, Escape, disari tiklama).
   -------------------------------------------------------------------------- */

.arama { position: relative; }

.arama-ac {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--dokunma-hedefi); min-block-size: var(--dokunma-hedefi);
  border-radius: var(--radius-control);
  color: var(--text-default);
  cursor: pointer;
  /* Varsayilan ucgen isaretci yok — hedef ikonun kendisi. */
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.arama-ac::-webkit-details-marker { display: none; }
.arama-ac:hover { color: var(--text-link); background: var(--surface-muted); }

/* Acikken dugme de durumu gosterir; anlam yalniz panelin varligina
   bagli kalmaz. */
.arama-acilir[open] > .arama-ac { color: var(--text-link); background: var(--surface-muted); }

/*
 | PANEL OPAK OLMAK ZORUNDA. Anasayfada baslik VIDEONUN UZERINDE ve
 | saydam; yariseffaf bir panel icindeki metnin kontrastini video
 | karesine baglardi — hero perdesindeki hatanin aynisi.
 |
 | z-index --z-overlay (300), --z-dropdown (100) DEGIL: `.bulucu-serit`
 | 100 kullaniyor ve DOM'da BASLIKTAN SONRA geliyor; esitlikte serit
 | panelin ustune binerdi.
 |
 | Kenarlik + golge ayni ogede: `.bulucu-serit` ile ayni istisna ve ayni
 | gerekce — video/gorsel uzerinde YUZEN bir panel, kenarlik olmadan
 | kenarini, golge olmadan yuzdugunu kaybeder.
 */
.arama-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: var(--z-overlay);

  display: flex; gap: var(--space-1);
  inline-size: min(26rem, calc(100vw - var(--space-6)));
  padding: var(--space-2);

  background: var(--surface-default);
  /*
   | ⛔ KENARLIK KALDIRILDI — 21 Agustos 2026.
   |
   | Burada `1px solid var(--border-default)` + `--shadow-md` vardi:
   | DESIGN.md L232'nin yasakladigi birlesim. Yuzen bir panelde AYRIMI
   | YAPAN SEY YUKSELTIDIR; kenarlik ikinci bir sinir cizip "hayalet
   | kart" gorunumu uretiyordu.
   |
   | ⚠️ VE KENARLIK ERISILEBILIRLIK ISI DE YAPMIYORDU: `--border-default`
   | beyaz uzerinde 1.28:1 — WCAG 1.4.11'in 3:1 sinirinin cok altinda.
   | Yani gorunur bir sinir degil, dekoratif bir cizgiydi. Sinir
   | gerekseydi cozum ZAYIF bir kenarlik + golge degil, GUCLU bir
   | kenarlik olurdu.
   */
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}

.arama-panel input { flex: 1; min-inline-size: 0; background: var(--surface-muted); }
.arama-panel .dugme { flex: 0 0 auto; }

/*
 | Acilma hareketi DURUM anlatir. Isaret yalniz kullanici acinca konur
 | (`arama.js`): `/arama` sayfasinda panel ACIK BASILIR ve orada
 | animasyon bir sayfa yukleme koreografisi olurdu.
 |
 | Bitis durumu panelin DOGAL durumu: animasyon hic calismasa da panel
 | dogru gorunur. Hareket azaltmada sure 0.01ms'ye duser (tokens.css).
 */
.arama-acilir[data-etkilesim][open] > .arama-panel {
  animation: arama-acilma var(--duration-fast) var(--ease-out);
}

@keyframes arama-acilma {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}

.dil { display: flex; gap: var(--space-1); font-size: var(--text-xs); }
/*
 | 24x24 taban: TR/EN/DE baglantilari metin boyu kadar kaliyordu ve
 | WCAG 2.5.8 Target Size (Minimum) esigini gecmiyordu. Aralik
 | istisnasina guvenmek yerine hedefin kendisi buyutuldu.
 */
/*
 | Hesap girisi — §6.3. Dil secicinin solunda, aramanin saginda.
 | Birincil baglanti (Giris / Hesabim) govde renginde ve okunur;
 | bayi girisi ikincil, cunku ayri bir alan ve musteri akisiyla
 | esit agirlikta olmamali.
 */
.hesap { display: flex; align-items: center; gap: var(--space-1); }

.hesap :is(a, .cikis-formu button) {
  display: inline-flex; align-items: center;
  min-block-size: var(--dokunma-esigi);
  color: var(--text-default);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
}
.hesap :is(a, .cikis-formu button):hover { color: var(--text-link); text-decoration-line: underline; }
.hesap :is(a.ikincil, .cikis-formu button) { color: var(--text-muted); font-weight: 400; }

/*
| CIKIS DUGMESI — YALNIZ TARAYICI SIFIRLAMASI.
|
| ⛔ RENK, PUNTO, AGIRLIK, DOKUNMA HEDEFI VE KONTUR BURADA YOK ve
| olmamali: dugme artik `.hesap :is(a, .cikis-formu button)` seciciyle
| baglantilarin KENDI kurallarina giriyor.
|
| ⚠️ ONCE OYLE DEGILDI ve sahibi yakaladi: dugmenin kendi kopya
| kurallari vardi, anasayfadaki DORT kurali (metin konturu, ters renk,
| ikincil ton, hover) hicbirini almiyordu ve koyu hero gorselinin
| ustunde OKUNMUYORDU. Kopya kural bugun degil yarin ayrisir; tek
| kaynak ayrisamaz.
|
| Burada kalan tek is, tarayicinin dugmeye verdigi cerceve/zemin/
| tipografiyi silmek — baglantinin zaten tasimadigi seyler.
*/
.cikis-formu { display: inline-flex; margin: 0; }

.cikis-formu button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/*
 | Ikon baglantilari — 44px dokunma hedefi (WCAG 2.5.8'in rahatca
 | uzerinde). Ikon `currentColor` kullandigi icin rengi buradan alir;
 | ayri bir dolgu rengi tanimlanmaz.
 */
.ikon { inline-size: var(--ikon-lg); block-size: var(--ikon-lg); flex: none; }

.hesap-ikon {
  position: relative;
  justify-content: center;
  min-inline-size: var(--dokunma-hedefi); min-block-size: var(--dokunma-hedefi);
  border-radius: var(--radius-control);
}
.hesap-ikon:hover { color: var(--text-link); text-decoration: none; background: var(--surface-muted); }
.hesap-ikon:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/*
 | Sayac rozeti. `aria-hidden` — sayinin okunur karsiligi yanindaki
 | gizli metinde ("Sepette 3 urun var"), rozet yalniz gorsel.
 */
.hesap-sayac {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px;
  min-inline-size: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
  color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: 700; line-height: 1.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/*
 | DIL SECICI — `tr` / `en` / `de`.
 |
 | `text-transform` KALDIRILDI, buyuk harf ARTIK CEVIRIDEN geliyor.
 | Gerekce: bu dizeler `config/locales.php`'ten okunan dil KODLARI ve
 | bir dil kodunun buyuk harfi hangi dilin kuralina gore yapilacagi
 | belirsiz — `lang="tr"` altinda `i` harfi tasiyan bir kod (ornek
 | ileride `it` eklenirse) "İT" olurdu. Kodlari oldugu gibi basip
 | buyuk harfi sablonda vermek belirsizligi tamamen kaldiriyor.
 */
.dil a {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: var(--dokunma-esigi); min-block-size: var(--dokunma-esigi);
  color: var(--text-muted); text-decoration: none; font-weight: 600;
  letter-spacing: var(--track-caps-sm);
}
.dil a[aria-current="true"] { color: var(--text-link); }

header.portal {
  background: var(--surface-inverse); color: var(--text-inverse);
  padding-block: var(--space-2);

  /* Lacivert bandin alt siniri — hep saydam (bkz. `.ust-bant` notu). */
  border-block-end: 1px solid var(--border-inverse);
}
header.portal .kap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
header.portal a { color: var(--text-inverse); text-decoration: none; font-size: var(--text-sm); }
header.portal a:hover { color: var(--text-on-inverse-muted); }
header.portal .marka { color: var(--text-inverse); font-size: var(--text-lg); }

/* ==========================================================================
   Yonetim kabugu — sol sidebar. TEMA-ANALIZ Bolum 2 §13.
   Yatay 13 baglantili serit pano detayinda ucuncu satira tasip ~190px
   dikey yiyordu ve 20 baglanti ayrimsiz tek sarmaldi. Sidebar saf CSS
   grid; JS YOK, CSP sorunu YOK.

   Kurallar `body.pano` altina KAPSANMISTIR — `header.portal` bayi
   duzeniyle paylasilir, orasi yatay kalir.
   ========================================================================== */

body.pano {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-block-size: 100dvh;
}

body.pano > header.portal {
  position: sticky;
  top: 0;
  block-size: 100dvh;
  overflow-y: auto;
  padding-block: var(--space-3);
}

body.pano > header.portal .kap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  max-width: none;
  padding-inline: var(--space-2);
}

/*
 | ⛔ `.yan-alt` KALDIRILDI — 15 Agustos 2026.
 |
 | Kural "rol rozeti ve cikis daima en altta" diyordu ve alti bildirim
 | tasiyordu; ama `yan-alt` sinifi ALTI DUZENIN HICBIRINDE basilmiyordu.
 | Yani kural hic calismamisti.
 |
 | Rol rozeti ve cikis bugun ust cubukta duruyor (`.panel-ust-hesap`,
 | `layouts/admin.blade.php:341`, `layouts/dealer.blade.php:264`) —
 | kenar cubugundan oraya tasinmis ve kural geride kalmis.
 |
 | ⚠️ `.yan-menu-alt` ILE KARISTIRILMASIN: o AYRI bir sey (menu grubu
 | altindaki ikincil baglantilar), yasiyor ve kullaniliyor.
 */

.yan-menu { display: flex; flex-direction: column; gap: var(--space-3); }

/*
 | Grup artik `<details>` — Tur 1, madde 8. Sutun akisi `<details>`'in
 | kendisinde degil, `.yan-menu-icerik` sarmalayicisinda: masaustunde
 | katlamayi geri acan kural boylece tek ogeyi hedefliyor (bkz. asagi).
 |
 | ⚠️ Sarmalayicinin sebebi "flex `<details>`'i bozuyor" DEGIL. Olculdu:
 | `display: flex` verilmis bir `<details>` kapaliyken icerigini duzgun
 | gizliyor (Chrome 151). Ilk aksi teshis olcum hatasiydi —
 | `content-visibility: hidden` altinda `getBoundingClientRect()` bayat
 | deger donduruyor, dogrusu `checkVisibility()`.
 */
.yan-menu-icerik { display: flex; flex-direction: column; gap: 0.125rem; }
.yan-menu-grup + .yan-menu-grup { margin-top: var(--space-2); }

/* ==========================================================================
   MOBIL ERGONOMI — Tur 2, madde 17
   ==========================================================================
   DOKUNMA HEDEFI DENETIMI YAPILDI (390px, /admin/katalog, 171 etkilesimli
   oge). 44px'in altinda kalanlar:

     .dugme-kucuk            59 adet   24px
     yan menu baglantisi     27 adet   24px
     .girdi-dar              26 adet   27px
     select (form)            7 adet   20px
     onay kutusu              6 adet   13px
     .sayfalama-baglanti      5 adet   36px
     .dugme-ikincil           3 adet   28px

   ⛔ HEPSI 44px YAPILMADI VE SEBEBI SU: yogun tablodaki 59 satir
   dugmesini 44px'e cikarmak, madde 5'te 34px'e indirilen satir
   yuksekligini geri sisirirdi — 25 satirlik bir listede ~500px.
   O dugmeler WCAG 2.2'nin AA esigini (2.5.8 Target Size Minimum,
   24x24) ZATEN GECIYOR; 44px bir AAA/mobil kilavuz hedefi.

   Yukseltilenler: GEZINME ve FORM ogeleri — tabloya sikismayan,
   parmakla dogrudan aranan hedefler. Onay kutusu ayri bir hikaye:
   13px AA esigini de GECMIYORDU, o her ekranda duzeltildi.
   -------------------------------------------------------------------------- */

/*
 | Onay kutusu 13px'ti — WCAG 2.2 AA'nin 24px esigini gecmiyordu.
 | Mobile ozel degil, HER YERDE duzeltiliyor: kucuk hedef masaustunde
 | de kucuk hedeftir, yalniz fare onu affeder.
 */
input[type="checkbox"],
input[type="radio"] {
  /* 24px = WCAG 2.2 AA 2.5.8 esigi. Olculdu: onceki hâl 13px'ti. */
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

@media (max-width: 720px) {
  /*
   | Yan menu birincil gezinme; 24px'lik bir baglanti parmakla
   | isabet ettirilmesi zor bir hedef.
   */
  body.pano .yan-menu a {
    min-block-size: var(--dokunma-hedefi);
    display: flex;
    align-items: center;
  }

  /*
   | Sayfalama kurali BURADA DEGIL, `.sayfalama-baglanti` taniminin
   | HEMEN ALTINDA (dosyanin sonuna dogru). Once buraya yazilmisti ve
   | CALISMADI: taban kural `min-height: 2.25rem` ile daha ASAGIDA
   | duruyor, ayni ozgullukte ve sonra geldigi icin eziyordu.
   | Olculdu — 36px kalmisti.
   */

  /* Katlanir bolum basliklari da parmakla aciliyor. */
  body.pano summary:not(.yan-menu-baslik) { min-block-size: var(--dokunma-hedefi); }

  /*
   | Form ogeleri — tablo ICINDEKILER HARIC. Dislama `:not()` ile
   | yaziliyor cunku tablo satirindaki dugme baska bir isin parcasi:
   | orada hedef kucuk ama komsulari da kucuk ve satir yatayda
   | kaydiriliyor.
   */
  body.pano .dugme:not(.tablo-islem .dugme, .tablo-yogun .dugme),
  body.pano select:not(.tablo-yogun select),
  body.pano input:not([type="checkbox"], [type="radio"], [type="hidden"], .tablo-yogun input) {
    min-block-size: var(--dokunma-hedefi);
  }
}

/* --------------------------------------------------------------------------
   YAPISKAN ILK SUTUN — Tur 2, madde 17
   --------------------------------------------------------------------------
   Yogun tablo mobilde yatayda kayiyor ve ilk sutun ekrandan cikinca
   SATIRIN KIMLIGI kayboluyordu: operator "hangi bayinin bakiyesine
   bakiyorum" sorusunu cevaplayamiyordu.

   ⛔ SINIR 720 DEGIL 1024 — 25 Agustos 2026, olculerek duzeltildi.

   Eski gerekce "genis ekranda tablo zaten sigiyor" diyordu. OLCULDU ve
   YANLISTI: `.tablo-yogun` asgari 1056px istiyor, oysa 1023px'lik bir
   ekranda sarmalayici yalniz 910px. Yani 721-1023 bandinin TAMAMINDA
   tablo kayiyor ama satir kimligi kayboluyordu — tabletin ve yatay
   telefonun tamami bu bantta.

   Olcum (denetim ekrani): 375→278px, 720→623px, 721→608px, 900→787px,
   1023→910px sarmalayici; tablo her birinde 1056px ve HEPSINDE kayiyor.

   Zemin ZORUNLU: seffaf kalirsa altindan gecen hucreler okunur.
   -------------------------------------------------------------------------- */

/*
 | TABLO ICI BAGLANTI — DOKUNMA ESIGI. 25 Agustos 2026, olculdu.
 |
 | ⛔ BULGU: hucre icindeki ciplak `<a>`lar 18px yuksekligindeydi;
 | WCAG 2.5.8 AA esigi 24px. Olcum (375px): /admin/ceviri'de 23
 | baglantinin 16'si, /admin/icerik'te 13'un 5'i esigin ALTINDA.
 | Hedef kutusu satir kutusuna esitti — hicbir kural onlara olcu
 | vermiyordu.
 |
 | ⚠️ `--dokunma-hedefi` (44px) DEGIL `--dokunma-esigi` (24px)
 | kullanildi: 44px tablo satirini iki katina cikarirdi ve yogun
 | tablonun butun anlami satir yogunlugu. Esik, tablonun karakterini
 | bozmadan kurali saglayan olcu.
 |
 | ⚠️ Dugme gorunumlu baglantilar (`.dugme`) haric: onlarin kendi
 | olculeri var ve `inline-flex` zaten daha buyuk.
 */
td a:not(.dugme),
th a:not(.dugme) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--dokunma-esigi);
}

/*
 | ⛔ KOSULSUZ — 25 Agustos 2026, olculerek. Once ≤720, sonra ≤1024
 | denendi; ikisi de yetmedi: panel kabugunda yan menu 240px aldigi icin
 | 1280px'lik ekranda bile sarmalayici 1056px'in ALTINDA kaliyor ve tablo
 | KAYIYOR. Yani "genis ekranda sigar" varsayimi hicbir genislikte dogru
 | degil.
 |
 | ⚠️ Kaydirma OLMAYAN cok genis ekranda zararsiz: yapiskan bir sutun
 | kaydirilacak bir sey yoksa hicbir gorsel fark uretmez.
 */
body.pano .tablo-yogun th:first-child,
body.pano .tablo-yogun td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--surface-default);
}

/*
 | Baslik hucresi hem yatayda hem dikeyde yapiskan; zemini kendi rengi.
 |
 | ⛔ Z-INDEX `--z-sticky` USTUNDE OLMAK ZORUNDA — olculdu.
 | `.tablo-uzun thead th` yapiskan basliklara `--z-sticky` (200)
 | veriyor; bu hucre 2'de kaliyordu ve yatay kaydirmada komsu
 | baslik hucreleri sabit KOSE hucresinin USTUNE biniyordu.
 | Ikisi bes yonetim ekraninda bir arada kullaniliyor.
 */
body.pano .tablo-yogun thead th:first-child {
  z-index: calc(var(--z-sticky) + 1);
  background: var(--surface-muted);
}

/*
 | Sabit sutunun sagina ince bir sinir: altindan kayan icerikle
 | arasindaki siniri gosterir. Golge DEGIL — gradyan yasagi golgeyi
 | de zorlastiriyor ve kenarlik burada yeterli.
 */
body.pano .tablo-yogun th:first-child,
body.pano .tablo-yogun td:first-child {
  border-inline-end: 1px solid var(--border-default);
}

@media (max-width: 1024px) {
  /*
   | ⛔ iOS ODAK YAKINLASTIRMASI — olculdu: 30 girdinin HEPSI 15px.
   |
   | Safari, punto 16px'in ALTINDA olan bir alana odaklaninca sayfayi
   | kendiliginden yakinlastirir; kullanici her form alanina dokundugunda
   | duzen ziplar ve geri cikmak icin elle uzaklastirmasi gerekir.
   | Bu bir tercih degil, tarayici davranisi — tek caresi esigi gecmek.
   |
   | `--text-base` (17px) kullanildi, ham `16px` degil: olcek tokenlardan
   | gelir. Kural TUM KABUKLARI kapsiyor (`body.pano` oneki YOK) cunku
   | yakinlastirma vitrinde ve hesap ekraninda da oluyor.
   */
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]),
  select,
  textarea {
    font-size: var(--text-base);
  }
}

/*
 | ⛔ MASAUSTUNDE KATLANMA YOK. Katlama mobil icin eklendi (menu tam acik
 | geldiginde icerik ekranin dortte ucunu yiyordu); genis ekranda menunun
 | tamami zaten sigiyor ve her tiklamada acmak gereksiz surtunme olurdu.
 |
 | ⛔ KAPALI `<details>`'I ACAN TEK DOGRU KURAL `::details-content` UZERINDE.
 | Once cocuk ogeye `display` verilmisti (`> a { display: block }`) —
 | EKRAN GORUNTUSUYLE DOGRULANDI KI CALISMIYOR: 1425px'te dort grup bos
 | baslik olarak kaldi. Tarayici gizlemeyi cocuga degil, `::details-content`
 | sozde ogesine `content-visibility: hidden` yazarak yapiyor; cocuktaki
 | `display` bunu asamaz.
 |
 | `block-size` da sifirlaniyor, ikisi birden geri alinmali.
 | Destek: Chrome 131+, Firefox 141+, Safari 18.4+ (2025). Daha eskisinde
 | tarayici zaten eski slot davranisindaydi ve icerik gizlenmiyordu.
 */
/*
 | MENU DARALTICI — 25 Agustos 2026.
 |
 | ⛔ SORUN OLCULDU: 721-1024px bandinda yan menu icerigin USTUNDE tam
 | genislikte aciliyordu. `@media (min-width: 721px)` gruplari zorla
 | aciyor, `@media (max-width: 1024px)` izgarayi tek sutuna indiriyor;
 | ikisi ust uste gelince yirmi baglanti + bes grup basligi bir duvar
 | olusturuyor ve icerik ancak onun altinda basliyordu.
 |
 | ⛔ BETIK YOK — katlama `<details>`in kendisi. Menu zaten `<details>`
 | gruplarindan kuruluydu; ayni dil bir kademe yukari tasindi.
 */
.menu-katlanir-dugme {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--dokunma-hedefi);
  padding-inline: var(--space-2);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.menu-katlanir-dugme:hover { background: var(--surface-muted); }

.menu-katlanir-dugme:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/*
 | ⚠️ 1024 USTUNDE SARMALAYICI GORUNMEZ: ozet gizlenir ve icerik
 | zorla acilir — grup basliklarinda kullanilan desenin AYNISI
 | (asagidaki 721px bloguna bak). Masaustunde hicbir sey degismez.
 */
@media (min-width: 1024px) {
  .menu-katlanir:not([open])::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .menu-katlanir-dugme { display: none; }
}

@media (min-width: 721px) {
  .yan-menu-grup:not([open])::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  /* Acilip kapanmayan bir baslikta ucgen isareti yaniltici olurdu. */
  .yan-menu-grup > summary { cursor: default; list-style: none; }
  .yan-menu-grup > summary::-webkit-details-marker { display: none; }
}

/*
 | Grup basligindaki ikon — Tur 2, madde 14. Basliktan bir tik kisik
 | renk: isaret metnin onune gecmez.
 */
.yan-menu-baslik .ikon {
  flex: none;
  /*
   | ⛔ TERS HIYERARSI DUZELTILDI — 21 Agustos 2026.
   |
   | Grup basligi ikonu 1rem, altindaki YAPRAK BAGLANTI ikonu 1.125rem
   | idi: kapsayan, kapsanandan kucuktu. Goz once buyuk olani gruplayici
   | sanar; menu kendi yapisini ters anlatiyordu.
   |
   | Kural: KAPSAYAN KAPSANANDAN BUYUKTUR. Yeni bir olcu eklenmedi, var
   | olan iki basamak yer degistirdi.
   */
  inline-size: var(--ikon-lg);
  block-size: var(--ikon-lg);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   IPUCU — Tur 3, F3 (REV-11)
   --------------------------------------------------------------------------
   Sahibi: "mouseyi ustunde sabit tuttugumda bilgi veriyor ama cirkin bir
   fontta, oraya guzel bir gorunum tema planlamasi lazim."

   Sebep teknikti: `title="..."` baloncugunu ISLETIM SISTEMI ciziyor.
   Fontu, rengi, gecikmesi, kosesi bizim degil ve CSS ile
   degistirilemez — tema disiplini oraya hic ulasmiyordu.

   ⛔ JS YOK: `:hover` + `:focus-within`. Ikisi birden, cunku `:hover`
   yalniz fare icin ve klavyeyle gezen kullaniciya ulasmaz.

   ⚠️ BALON YERLESIM KAYDIRMAZ: `position: absolute` ile akistan
   cikmis. Yukseklik degistiren bir ipucu, D3'te duzeltilen titremenin
   aynisini uretirdi.
   -------------------------------------------------------------------------- */

.ipucu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Ipucu tasidigi belli olsun: alti noktali cizgi, imlec yardim. */
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 0.2em;
  cursor: help;
}

.ipucu:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-control); }

.ipucu-balon {
  position: absolute;
  inset-block-end: calc(100% + 0.375rem);
  inset-inline-start: 0;
  z-index: var(--z-tooltip);

  inline-size: max-content;
  max-inline-size: 18rem;
  padding: 0.375rem var(--space-1);

  border-radius: var(--radius-control);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);

  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.4;
  /* Tetikleyici alti cizgili; balon degil. */
  text-decoration: none;
  white-space: normal;

  /*
   | ⚠️ BURADA YAZAN GEREKCE YANLISTI — Tur 4, T4'te duzeltildi.
   |
   | Eski not soyle diyordu: *"`display: none` DEGIL; gizli balon DOM'da
   | kalmali ki ekran okuyucu metni okuyabilsin — `visibility`
   | gorunurlugu kapatir, erisilebilirlik agacindan silmez."*
   |
   | Ikinci cumle dogru degil: `visibility: hidden` de ogeyi
   | erisilebilirlik agacindan siler, tipki `display: none` gibi. Ikisi
   | arasindaki gercek fark ERISILEBILIRLIK degil YERLESIM: `visibility`
   | ile gizlenen balon yerini korur ve KAYDIRMA ALANINA katilir.
   |
   | ⛔ BU SESSIZ BIR HATA URETIYORDU. Yonetim panosunda olculdu: en
   | sagdaki kartin 288px'lik balonu belgeyi 120px tasiriyor ve sayfaya
   | KIMSE FAREYI USTUNE GOTURMEDEN yatay kaydirma cubugu koyuyordu.
   | Bileseni kullanan her sag kenar ogesi ayni seyi yapardi.
   |
   | Metnin ekran okuyucuya ulasmasi artik gizleme bicimine degil,
   | tetikleyicideki `aria-describedby` bagina dayaniyor — gizli bir
   | ogeye yapilan bu bag AT tarafindan okunur. Yani erisilebilirlik
   | eskisinden daha saglam, davranis daha ucuz.
   */
  display: none;
  opacity: 0;
  /*
   | ⛔ YON FARKI — Tur 4, T6. Projede ilk kez bir gecis IKI YONE
   | AYRI egri kullaniyor.
   |
   | Taban kural KAYBOLMAYI anlatiyor (balonun varsayilan hali gizli):
   | `--ease-in`, yavas baslar hizli gider — "cekiliyor".
   | Gorunur durumun kurali (`.ipucu:hover > .ipucu-balon`, asagida)
   | BELIRMEYI anlatiyor: `--ease-out`, hizli baslar yavas oturur —
   | "varmis".
   |
   | Ikisi ayni egriyle yazilsaydi balon acilirken ve kapanirken ayni
   | hissi verirdi. Envanterin "yumusatma cesidi = 1" bulgusunun
   | ekrandaki karsiligi tam olarak buydu: her sey ayni notada.
   */
  transition: opacity var(--duration-fast) var(--ease-in), display var(--duration-fast) allow-discrete;
}

/* BELIRME yonu — gerekcesi taban kuralin yaninda yazili. */
.ipucu:hover > .ipucu-balon,
.ipucu:focus-within > .ipucu-balon,
.ipucu:focus > .ipucu-balon {
  display: block;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete;
}

/*
 | ⚠️ SOLMANIN BASLANGIC DEGERI — `display: none`'a gecisin bedeli.
 |
 | Akista olmayan bir oge gorunur olurken tarayicinin gecis icin bir
 | "onceki deger"i yoktur; opaklik dogrudan 1'e sicrar ve T6'da kurulan
 | beliris solmasi kaybolurdu. `@starting-style` o ilk kareyi verir.
 |
 | ⛔ DESTEKLEMEYEN TARAYICIDA BOZULMAZ: kural yok sayilir, balon
 | solmadan acilir. Bilgi ve yerlesim aynen calisir — kaybedilen yalniz
 | cila. `visibility` gunlerindeki yatay kaydirma cubugu ise her yerde
 | kalkiyor.
 */
@starting-style {
  .ipucu:hover > .ipucu-balon,
  .ipucu:focus-within > .ipucu-balon,
  .ipucu:focus > .ipucu-balon { opacity: 0; }
}

/* KPI birincil kartinin basligindaki tur isareti. */
.kpi-kart h3 { display: flex; align-items: center; gap: 0.375rem; }
.kpi-kart h3 .ikon { flex: none; inline-size: var(--ikon-sm); block-size: var(--ikon-sm); color: var(--text-muted); }

.yan-menu-baslik {
  margin: 0 0 0.25rem;
  padding-inline: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  /* Buyuk harf uclusu ortak kuraldan (bkz. "BUYUK HARF KOSUSU"). */
  color: var(--text-on-inverse-muted);
}

/*
 | ⚠️ 15 AGUSTOS 2026 — HER SATIRDA IKON (Tur 3, F2 / REV-51).
 |
 | Sahibi motomaylastik panelinin sol seridini gonderdi: "ne guzel
 | iconlu profesyonel duruyor." Bizde ikon yalniz GRUP BASLIKLARINDA
 | vardi; yirmi dort baglantinin kendisi duz metindi.
 |
 | `block` -> `flex`: ikon ile metin ayni satirda ve dikeyde ortali.
 | Ikon `flex: none` — uzun bir baslik sarsa bile ikon ezilmiyor.
 */
body.pano .yan-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.375rem var(--space-1);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}

/*
 | ⛔ IKON SOLGUN, METIN DEGIL. Menude okunan sey ADDIR; ikon onu
 | bulmaya yardim eder ve onunle YARISMAZ. Aktif satirda tam opakliga
 | cikiyor — orada ikon da durumun parcasi.
 */
body.pano .yan-menu a > .ikon {
  flex: none;
  inline-size: var(--ikon-md);
  block-size: var(--ikon-md);
  opacity: 0.65;
}

body.pano .yan-menu a:hover > .ikon,
body.pano .yan-menu a[aria-current="page"] > .ikon { opacity: 1; }

body.pano .yan-menu a:hover {
  background: color-mix(in srgb, var(--neutral-white) 12%, transparent);
  color: var(--text-inverse);
}

/*
 | AKTIF DURUM: dolgu + 3px kirmizi sol serit — Tur 1, madde 8 (ekleme B).
 |
 | ⚠️ BU BIR KARAR DEGISIKLIGI. Buradaki eski not "aktif durum DOLGUYLA
 | anlatilir — yan vurgu seridi yok (§6.2)" diyordu. Sahibi 13 Agustos
 | 2026'da serit istedi ve gerekcesini de koydu: bu, temanin TEK
 | dekoratif kirmizi izni. Eski karar sessizce silinmedi, degistirildi.
 |
 | ⛔ KIRMIZI BASKA HICBIR YERDE DEKORATIF KULLANILMAZ. Kirmizi yalniz
 | iki anlam tasir: birincil eylem ve tehlike. Buradaki serit tek istisna.
 |
 | `box-shadow: inset` kullaniliyor, `border-left` DEGIL: kenarlik
 | metni 3px kaydirirdi, aktif madde komsulariyla hizasini kaybederdi.
 */
body.pano .yan-menu a[aria-current="page"] {
  background: var(--action-secondary);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-red-600);
}

/* Panolar alt listesi: girinti hiyerarsiyi tasir, ayri bir grup degil. */
.yan-menu-alt { display: flex; flex-direction: column; gap: 0.125rem; margin-inline-start: var(--space-2); }
body.pano .yan-menu-alt a { font-size: var(--text-xs); color: var(--text-on-inverse-muted); }
body.pano .yan-menu-alt a:hover,
body.pano .yan-menu-alt a[aria-current="page"] { color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Panel ekran aciklamasi — `<x-panel-aciklama>` (Revize m.14, Faz 6.1b)
   --------------------------------------------------------------------------
   Sahibi "gereksiz yazilardan kurtulmak" dedi. Paragraflar SILINMEDI,
   katlandi: ekran ilk acilista veriyi gosteriyor, kuralin gerekcesi bir
   tik uzakta duruyor. `<details>` yerlisi — JS yok.
   -------------------------------------------------------------------------- */

.panel-aciklama {
  margin-block-end: var(--space-3);
  font-size: var(--text-sm);
}

.panel-aciklama > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--dokunma-esigi);
  font-weight: 600;
  color: var(--text-link);
}

.panel-aciklama > summary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
  border-radius: var(--radius-control);
}

.panel-aciklama-govde {
  max-width: var(--olcu-genislik);
  margin-block-start: var(--space-1);
  color: var(--text-muted);
}

.panel-aciklama-govde p { margin: 0 0 var(--space-1); }
.panel-aciklama-govde p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Panel kabugu — UST CUBUK ve NEFES PAYI (Revize m.14, Faz 6.1a)
   ==========================================================================
   Sahibi "sayfa basligi tarayici cizgisinin hemen altinda, nefes payi
   yok" dedi. Olculdu ve dogruydu: `<h1>` y=0'daydi, `main`'in dolgusu
   sifirdi ve `.kap` yalniz yatay dolgu tasiyordu.

   Kabuk artik iki parca: yapiskan ust cubuk + dolgulu icerik alani.
   ========================================================================== */

.panel-govde {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  min-inline-size: 0;
}

/*
 | UST CUBUK. Yapiskan: uzun bir tabloda asagi inince "neredeyim" ve
 | "nasil cikarim" ekrandan kaybolmuyor.
 |
 | Zemin `--surface-default`: govde `--surface-page` uzerinde ve cubuk
 | ondan AYRISMALI. Alt kenarlik iki temada da gorunur bir dikis.
 |
 | ⚠️ YORUM DUZELTILDI (Tur 4): burada "govde `--surface-muted`" yaziyordu.
 | Kontrast kademesi kurulurken (satir 35) sayfa zemini `--surface-page`e
 | tasindi ama bu yorum geride kaldi. Kural dogruydu, ANLATIMI yanlisti —
 | ve yanlis anlatim bir sonraki okuyani yanlis yere goturur.
 */
/*
 | ⛔ ODAK YAPISKAN CUBUGUN ALTINDA KALMASIN — WCAG 2.4.11 (Focus Not
 | Obscured, Minimum, AA). 22 Agustos 2026, bagimsiz erisilebilirlik
 | denetimi.
 |
 | TARAYICIDA YENIDEN URETILDI (1280x900, `/admin/katalog`):
 |     `.panel-ust` yapiskan, 64px
 |     Tab ile ilerlerken odaklanan baglanti  top: 19px
 |     Cubugun alt kenari                     bottom: 64px
 |     → odaklanan ogenin 44 PIKSELI cubugun altinda
 |
 | Tarayicinin "odaklanan ogeyi gorunume kaydir" davranisi yapiskan
 | katmanlari BILMEZ; onu `scroll-padding` ile soylemek gerekiyor.
 |
 | ⚠️ VITRINDE GEREKMIYOR ve olculdu: public sayfalarda yapiskan oge YOK
 | (`.sepet-ozet` yan sutun, ustten ortmuyor). Kural yalniz panel govdesine
 | bagli — gereksiz yere her yuzeye yayilmiyor.
 |
 | ⚠️ PROJE BU TEKNIGI ZATEN BILIYORDU: `scroll-margin-top` iki yerde
 | kullaniliyor (sepet ozeti, hesap bolumleri). Panel tarafinda hic yoktu.
 |
 | 5rem = 64px cubuk + 16px nefes payi.
 |
 | ⛔ `body`YE DEGIL `:root`A YAZILIYOR ve bunu olcerek ogrendim: once
 | `body.pano`ya koydum, `scroll-padding-top: 80px` hesaplandi ama ORTULME
 | DEVAM ETTI (47px). Sebep — `scroll-padding` KAYDIRAN KAPSAYICIDA
 | calisir ve standart modda o `html`dir, `body` degil.
 |
 | ⚠️ `:root` DEGIL `html` — ikisi ayni ogeyi seciyor ama `components.css`
 | icinde `:root` YASAK ve kural hakli: belirtec tanimi yalniz
 | `tokens.css`te olmali. Ilk yazimda `:root:has()` yazdim, `BILESEN
 | KATMANI BELIRTEC TANIMLAMAZ` bekcisi dusurdu. Kural gevsetilmedi —
 | esdeger secici kullanildi.
 |
 | ⚠️ `:has()` KULLANILDI cunku CSS ust ogeyi secemez ve kural yalniz
 | panelde gecerli olmali; `html`e kosulsuz yazmak vitrindeki capa
 | atlamalarini da etkilerdi.
 */
html:has(body.pano) {
  scroll-padding-block-start: 5rem;
}

.panel-ust {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  /*
   | ⛔ ZEMIN BURADAN KALKTI: `.koyu` sozlesmesi veriyor. Burada
   | `--surface-default` birakmak, ozgulluk esitliginde sirayla kazanan
   | bir kavga uretirdi.
   */
  border-block-end: 1px solid var(--border-on-inverse);
}

.panel-ust-hesap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/*
 | KIRINTI YOLU. Ayirici `/` isaretleme icinde ve `aria-hidden`:
 | `::before` ile uretilseydi bazi ekran okuyucular onu okur, bazilari
 | okumazdi — ayirici bir icerik degil, bir cizgi.
 */
.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-inline-size: 0;
}

/*
 | DOKUNMA HEDEFI — WCAG 2.2 AA (SC 2.5.8), 24px.
 |
 | Olculdu: kirinti baglantisi 22px idi ve bu cubuk YONETIM ile BAYI
 | panelinin HER SAYFASINDA duruyor. Footer (Faz 0) ve `.onay-kutusu`
 | duzeltilmisti, ust cubuk o turlarda plana dahil degildi.
 |
 | Aralik istisnasi kurtarmiyor: kirinti maddeleri arasi bosluk 6px.
 | Satir ici istisna da gecmiyor — bunlar cumle icinde gecen baglantilar
 | degil, bir gezinti yolu.
 |
 | Yukseklik `min-block-size` + `inline-flex` ile veriliyor; dolgu
 | vermek maddeler arasi ritmi bozardi.
 */
.kirinti a,
.kirinti [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--dokunma-esigi);
}

.kirinti a { color: var(--text-muted); }
.kirinti a:hover { color: var(--text-link); }

/* Bulundugun sayfa: baglanti degil, vurgulu metin. */
.kirinti [aria-current="page"] { color: var(--text-default); font-weight: 600; }

/*
 | ICERIK ALANI. `--space-6` ust dolgu tam olarak sahibin istedigi nefes
 | payi; alt dolgu daha kucuk cunku sayfanin sonunda zaten bosluk var.
 |
 | `flex: 1` — kisa ekranlarda bile ust cubuk yukarida kalir, icerik
 | alani govdeyi doldurur.
 */
body.pano main#icerik {
  flex: 1;
  padding-block: var(--space-6) var(--space-4);
  min-inline-size: 0;
}

/*
 | Panelde kap GENIS. 1180px public sitenin okuma genisligi; bir yonetim
 | tablosu icin dar ve 199 satirlik listede sutunlari sikistiriyordu.
 */
body.pano main#icerik > .kap { max-width: 88rem; }

/*
 | BOLUM RITMI — Revize m.14 ("Filtre basligi bir paragrafin icine
 | giriyor").
 |
 | Olculdu: panel ekranlarindaki BUTUN basliklar `margin-top: 0`
 | tasiyordu. Public sitede bu gorunmuyor cunku orada her bolum kendi
 | `<section>` dolgusunu tasiyor; panelde icerik duz bir yigin ve bir
 | baslik, kendinden onceki kartin dibine yapisiyordu.
 |
 | `* + h2` — YALNIZ kendinden once bir kardes varsa. Ilk baslik
 | (sayfanin `<h1>`'inin hemen ustu) fazladan bosluk almiyor.
 |
 | ⚠️ Once `var(--space-5)` yazilmisti ve OYLE BIR TOKEN YOK: olcek
 | 1-2-3-4-6-8 diye gidiyor. Tanimsiz degisken bildirimi hesaplama
 | aninda gecersiz kiliyor, yani kural sessizce oluyordu — tarayicida
 | `margin-top: 0px` olculup yakalandi. `ThemeTest` artik tanimsiz
 | token kullanimini tariyor.
 |
 | `--space-4` ayrica DOGRU deger: kartlarin `.bosluk-alt` boslugu da
 | 32px ve komsu kenar bosluklari birlesiyor — her yerde tek tip 32px
 | ayrim cikiyor, ust uste binen 64px degil.
 */
body.pano main#icerik .kap > * + h2,
body.pano main#icerik .kap > * + h3 { margin-block-start: var(--space-4); }

/*
| PANEL BOLUM RITMI — 24 Agustos 2026.
|
| Bolum basligi `<x-panel-bolum>` ile `<section>`in ICINE tasindi; yani
| ustteki `* + h2` kurali artik ates almiyor ve bolumler birbirine
| yapisiyordu. Ritim bolum duzeyinde geri veriliyor.
|
| ⚠️ YENI SINIF YOK: kural `<section>` elemanina baglaniyor. Panelde
| `<section>` yalnizca bu bilesenden cikiyor (53 blade'in 44'unde hic
| yoktu), yani secici genis gorunse de tek tuketicisi var.
*/
/*
 | ⛔ UZUN KELIME SATIRI KIRAR — 296px'te olculdu.
 |
 | Panelde kirilamayan uzun dizeler var: Almanca bilesik kelimeler
 | ("Hochgeschwindigkeitsklasse"), SKU'lar, dosya adlari. Bunlar
 | kabi disari itiyordu: kanit +68px, urun-metinleri +11px.
 |
 | `break-word` secildi, `anywhere` DEGIL: `anywhere` en-kucuk-icerik
 | olcusunu de degistirir ve izgara sutunlarini beklenmedik yerde
 | daraltir. `break-word` yalniz sigmayan kelimeyi kirar.
 |
 | Kapsam `body.pano`: vitrin tipografisi etkilenmez.
 */
body.pano main { overflow-wrap: break-word; }

body.pano main#icerik .kap > * + section { margin-block-start: var(--space-4); }

/*
| TABLO CERCEVESI PANELDE VARSAYILAN — 24 Agustos 2026.
|
| ⛔ OLCULEN KUSUR: 79 tablo sarmalayicisinin 76'si cercevesizdi.
| `.tablo-sarmal` yalnizca `overflow-x` ve yaricap tasiyordu; beyaz tablo
| `--surface-page` (neutral-150) zemininde 1.17:1 kontrastla duruyor,
| yani zeminden NEREDEYSE HIC ayrismıyordu. Sahibinin "cercevesi yok"
| dedigi seyin birebir olcumu bu.
|
| ⚠️ SINIFLA DEGIL VARSAYILANLA COZULDU: `.tablo-cerceveli` sinifi 2026
| Temmuz'undan beri vardi ve 79 tablonun yalnizca 4'unde kullanilmisti.
| Elle yayilmasi gereken bir cozumun basarisizligi olculmus durumda —
| ayni hata `<x-dugme>`de de yasandi (1 kullanim / 66 elle yazim).
|
| ⛔ VITRIN ETKILENMEZ: kapsam `body.pano`. `.tablo-cerceveli` sinifi
| public sepet icin CSS'te YASIYOR, olu sinif degil.
*/
body.pano .tablo-sarmal { border: 1px solid var(--border-default); }

/*
| ⛔ KART ICINDE CIFT CERCEVE OLMAZ. Kart zaten kendi kenarligini
| tasiyor; icindeki tablonun ikinci bir cizgi cekmesi "ic ice kutu"
| goruntusu uretir — kacinilan seyin ta kendisi.
*/
body.pano .kart .tablo-sarmal { border: 0; }

/*
 | Panel bolum basligi govdeden AYRISIR. Public sitede `h2` bir
 | pazarlama basligi; burada bir bolum ayiricisi ve isi hiyerarsi
 | kurmak. Bir tik buyuk + 700.
 */
/*
 | PANEL BASLIK KADEMESI — Tur 2, madde 13.
 |
 | `--text-4xl` token dosyasinda "panel sayfa basligi" diye tanimliydi
 | ama HICBIR YERDE KULLANILMIYORDU: panelin h1'i genel h1 kuralina
 | dusuyor ve 32px kaliyordu — bolum basligiyla (26px) arasindaki fark
 | alti puntoydu ve sayfanin neyle ilgili oldugu goz ucuyla secilmiyordu.
 |
 | Dort kademe artik acikca ayrisiyor:
 |   sayfa basligi 40 · bolum basligi 26 · kart basligi 18 · govde 16
 */
body.pano main#icerik h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-display);
}

body.pano main#icerik h2 { font-size: var(--text-2xl); font-weight: 700; }
body.pano main#icerik h3 { font-size: var(--text-lg); }

/*
 | Tablet ve altinda sidebar tek sutuna doner: sabit yukseklik ve
 | yapiskanlik kalkar, menu yatay akar. Icerik dar ekranda 15rem'i
 | kaybetmemeli.
 */
@media (max-width: 1024px) {
  body.pano { grid-template-columns: 1fr; }

  /* Dar ekranda ust cubuk da yapismaz: iki yapiskan serit ust uste biner. */
  .panel-ust { position: static; padding-inline: var(--space-3); }

  body.pano main#icerik { padding-block: var(--space-4) var(--space-3); }

  body.pano > header.portal {
    position: static;
    block-size: auto;
    overflow-y: visible;
  }

  body.pano > header.portal .kap { padding-inline: var(--space-3); }

  .yan-menu { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  /*
   | Grup artik `<details>` (blok); yatay akis IC KAPSAYICIDA kuruluyor.
   | Eski `.yan-menu-grup { flex-direction: row }` kurali blok bir ogede
   | etkisiz kalirdi.
   */
  .yan-menu-icerik { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
  .yan-menu-baslik { margin: 0; }
  .yan-menu-alt { flex-direction: row; flex-wrap: wrap; margin-inline-start: 0; }
  /* `.yan-alt` mobil karsiligi da kalkti — sinif hicbir yerde basilmiyor. */
}

/*
 | ≤720px — KATLAMA BURADA DEVREDE. Her grup basligi dokunulabilir bir
 | satir; yalnizca aktif sayfanin grubu acik geliyor.
 |
 | Ucgen isareti burada KALIYOR (masaustunun aksine): grup gercekten
 | acilip kapaniyor, isaret dogruyu soyluyor.
 */
@media (max-width: 720px) {
  .yan-menu { flex-direction: column; }
  .yan-menu-grup + .yan-menu-grup { margin-top: 0; }

  .yan-menu-grup > summary {
    padding: var(--space-2) var(--space-1);
    /* Dokunma hedefi: 8+8 dolgu + ~16px satir = 40px. */
    cursor: pointer;
    /* Menu baglantilariyla ayni yaricap — ayni ailenin ogeleri. */
    border-radius: var(--radius-control);
  }

  .yan-menu-grup[open] > summary { color: var(--text-inverse); }
  .yan-menu-grup > .yan-menu-icerik { padding-block-end: var(--space-2); }
}

/*
 | `margin-top` KALDIRILDI: son bolumun 48px alt dolgusunun ustune 48px
 | daha biniyor ve footer'in ustunde 96px'lik bos bir beyaz koridor
 | birakiyordu. Renk degisimi zaten ayirici; ikincisine gerek yok.
 */
footer.ana {
  background: var(--surface-inverse); color: var(--text-inverse);

  /* 48/32 idi. Lacivert alan sayfanin sonunda gereginden buyuk duruyordu. */
  padding-block: var(--space-4) var(--space-3);

  /* Lacivert bandin ust siniri — hep saydam (bkz. `.ust-bant` notu). */
  border-block-start: 1px solid var(--border-inverse);
}
footer.ana a { color: var(--text-inverse); }

/*
 | Footer'daki kelime markasi. `.marka` lacivert yaziyor ve footer'in
 | zemini de lacivert — yani "Euro" HER IKI TEMADA DA gorunmuyordu,
 | sayfada yalniz kirmizi "Grip" okunuyordu. Koyu tema denetimi
 | sirasinda cikti; `header.portal .marka` icin ayni satir zaten vardi.
 */
footer.ana .marka { color: var(--text-inverse); }
footer.ana .ikincil { color: var(--text-on-inverse-muted); font-size: var(--text-sm); }

/*
 | FOOTER IZGARASI GRID DEGIL FLEX — 4 Agustos denetiminin cikardigi is.
 |
 | `auto-fit, minmax(15rem, 1fr)` 1180px'lik kapta DORT sutun aciyordu
 | ama o gun footer'da UC blok vardi: "Bilgi" sutunu yayinlanmis CMS
 | sayfasi olmadigi surece hic basilmiyor (bu dogru davranis). Sonuc:
 | izgaranin ortasinda bos bir hucre. Yani "yoksa basma" kurali dogru
 | calisiyordu, izgara onu takip etmiyordu. Flex'te eksik blok bosluk
 | birakmaz, sira kapanir.
 |
 | --- 10 Agustos 2026: OLCULER YENIDEN AYARLANDI ---
 |
 | Iki sorun vardi:
 |
 | 1. `margin-inline-start: auto` abone blogunu saga SAVURUYORDU. Ayni
 |    deseni catida ve bulucu barinda da duzelttik: bir ogeyi kenara
 |    itmek, satirin ortasinda aciklanamayan bir bosluk birakiyor.
 |
 | 2. `max-inline-size` ust sinirlari UC BLOGA gore kurulmustu. Hukuki
 |    sayfalar yayinlaninca "Bilgi" sutunu acildi ve dort blogun ust
 |    sinirlari toplami 1296px ederken kabin ic genisligi 1132px —
 |    footer ikinci satira sariyordu.
 |
 | Ust sinirlar KALDIRILDI. Gerekcesi: `.kap` zaten 1180px'te duruyor,
 | yani blogun "cok genislemesi" diye bir risk kabin disinda yok. Sinir
 | yerine BUYUME ORANI kullaniliyor — marka ve abone genis, iki baglanti
 | sutunu dar. Boylece uc blokla da dort blokla da satir tam doluyor,
 | ne bosluk ne tasma.
 |
 | Tabanlar toplami 51rem (816px) + 3 bosluk; dort blok her zaman tek
 | satira sigiyor.
 */
.footer-izgara {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

/*
 | SUTUN ICI DOLGU SIFIR — olculmus bir hata kapaniyor.
 |
 | `.footer-marka` ve `.footer-abone` birer `<section>`; global
 | `section { padding-block: 48px }` kurali footer'in ICINE sizip her
 | birine 96 px olu dolgu ekliyordu. Iki `<nav>` sutunu `section`
 | olmadigi icin etkilenmiyordu: olculdugunde "Bilgi" sutunu 259 px
 | iken marka 417 px cikiyor, satirin yuksekligini de en uzun sutun
 | belirledigi icin footer'in tamami sisiyordu.
 |
 | Ayni sizinti hero videoda da yasanmisti. Sutunlarin arasindaki
 | bosluk zaten `.footer-izgara`nin `gap`inden geliyor; ic dolgu
 | hicbir sey eklemiyordu.
 */
.footer-izgara > * { padding-block: 0; }

.footer-marka       { flex: 1.5 1 15rem; }
.footer-baglantilar { flex: 1 1 9.5rem; }
.footer-abone       { flex: 1.7 1 17rem; }

/* Buyuk harf uclusu ortak kuraldan (bkz. "BUYUK HARF KOSUSU"). */
.footer-baslik {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
}

.footer-liste,
.footer-iletisim {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--text-sm);
}

.footer-iletisim dd { margin: 0; }

/*
 | DOKUNMA HEDEFI — WCAG 2.2 SC 2.5.8 (AA), tercih degil zorunluluk.
 |
 | Olculdu: baglantilar 17px yuksekligindeydi, aralarindaki bosluk 6px.
 | Maddenin iki istisnasi da bu durumu kurtarmiyordu:
 |
 |   Satir ici istisnasi — gecmez. Bunlar bir cumlenin icindeki
 |   baglantilar degil, dikey bir gezinti listesi.
 |
 |   Aralik istisnasi — gecmez. 17 + 6 = 23px adim; 24px capli daireler
 |   kesisiyor.
 |
 | 24px yukseklik + 6px bosluk = 30px adim. Ikisi de gecer.
 |
 | `inline-flex`: hedef metin kadar GENIS, sutunun tamami kadar degil —
 | bos alana tiklamak baglantiyi tetiklememeli.
 */
.footer-liste a,
.footer-iletisim a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--dokunma-esigi);
}

/*
 | ALT SERIT ORTALANDI.
 |
 | Onceden `justify-content: space-between` ile telif solda, sosyal
 | ikonlar sagdaydi; genis ekranda ikisi arasinda 900px bosluk kaliyor
 | ve tek satirlik bir seridi iki ayri parcaya bolunmus gosteriyordu.
 | Referans da ikisini ortaliyor.
 |
 | Siralama CSS ile ters cevrilmedi, ISARETLEMEDE degistirildi (sosyal
 | once, telif sonra): `order` ya da `column-reverse` gorsel sirayi
 | DOM'dan ayirir ve klavye sirasi ile ekranda gorunen sira ayrisir.
 */
/*
 | Alt serit TEK SATIR: telif solda, sosyal ikonlar ORTADA, "Basa don"
 | sagda. Once alt alta uc satirdi ve yalniz bu serit 183 px yer
 | kapliyordu — icerigi 110 px, gerisi bosluktu.
 |
 | IZGARA, `space-between` DEGIL. Once flex denendi ve olculdu:
 | ikonlar 614 px'te kaldi, ortasi 508 — cunku `space-between` artan
 | bosluğu esit dagitiyor ve telif (257 px) ile "Basa don" (69 px)
 | esit degil, yani ortadaki oge iki yanindakinin genislik farki
 | kadar kayiyor. `1fr auto 1fr` kaymayi tanimi geregi bitiriyor.
 |
 | Sutunlar ACIKCA veriliyor: sosyal adres girilmemisse ikinci sutun
 | bos kaliyor ve "Basa don" yine sagda duruyor, ortaya kaymiyor.
 */
.footer-alt {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-2);
  border-top: 1px solid var(--text-on-inverse-muted);
}

.footer-alt > p { grid-column: 1; margin: 0; }
.footer-alt > .footer-sosyal { grid-column: 2; }
.footer-alt > .footer-yukari { grid-column: 3; justify-self: end; }

/* Dar ekranda tek sutun; her sey alt alta ve ortali. */
@media (max-width: 640px) {
  .footer-alt {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-alt > p,
  .footer-alt > .footer-sosyal,
  .footer-alt > .footer-yukari { grid-column: 1; justify-self: center; }
}

.footer-sosyal {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ikon hedefi 44px: §2.5.8 dokunma hedefi kurali footer'da da gecerli. */
.footer-sosyal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--dokunma-hedefi);
  min-block-size: var(--dokunma-hedefi);
  border-radius: var(--radius-control);
}

/*
 | Basa don. Referansta sag altta yuzen yuvarlak bir dugme; burada alt
 | seridin icinde sade bir baglanti.
 |
 | Yuzen dugme YAPILMADI: `position: fixed` bir oge mobilde icerigin
 | uzerini orter ve bu sayfada altta zaten e-bulten formu var. Ayrica
 | yuzen dugme her ekranda durur, oysa bu baglantiya yalnizca sayfanin
 | SONUNA gelen birinin ihtiyaci var — dogal yeri tam da burasi.
 |
 | Hedef 44px: SC 2.5.8 esigi 24px ama bu tek basina duran bir eylem,
 | komsusu yok; kucuk tutmak icin bir sebep de yok.
 */
.footer-yukari {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--dokunma-hedefi);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);

  /*
   | IKON + CERCEVE — Revize m.19. Sahibi "ne kadar cirkin gorunuyor"
   | dedi ve haklıydı, ama sorun baglantinin KENDISI degildi: alt
   | seritte, iki yaninda ikon kumesi varken tek basina duran ciplak
   | bir metindi. Cevresine bir sey vermeden "guzellestirmek" mumkun
   | degil.
   |
   | Cerceve `outline` ile veriliyor, `border` ile degil: `border`
   | kutu olcusunu buyutur ve `1fr auto 1fr` izgarasinin ortadaki
   | hucresini kaydirirdi — footer alt seridi tam da bu sapmayi
   | duzeltmek icin izgaraya cevrilmisti (10 Agustos).
   */
  outline: 1px solid var(--border-inverse);
  outline-offset: 0;
  transition: color var(--duration-fast) var(--ease-out),
              outline-color var(--duration-fast) var(--ease-out);
}

.footer-yukari .ikon { inline-size: var(--ikon-sm); block-size: var(--ikon-sm); }

.footer-yukari:hover {
  color: var(--text-inverse);
  outline-color: var(--text-on-inverse-muted);
  text-decoration: none;
}

.footer-yukari:focus-visible { box-shadow: var(--focus-ring); outline-color: transparent; }

.footer-yukari:hover,
.footer-yukari:focus-visible { color: var(--text-inverse); }

/*
 | Yasal ozet artik footer'in EN ALTINDA ve tam genislikte.
 | `max-width: 46ch` kalkti: o sinir cumleyi 290 px'lik marka
 | sutununda dort satira yayiyordu, burada bir satira siginiyor.
 */
.footer-yasal {
  margin-block: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--text-on-inverse-muted);
}

/*
 | Footer baglantilarinin alti CIZILI DEGIL. Bunlar bir metin
 | paragrafinin icinde gecen baglantilar degil, tamami baglantidan
 | olusan bir liste — cizgi bilgi tasimiyor, gorultu yapiyordu.
 | Uzerine gelince ve odaklaninca cizgi geri geliyor.
 */
footer.ana .footer-liste a { text-decoration: none; }
footer.ana .footer-liste a:hover,
footer.ana .footer-liste a:focus-visible { text-decoration-line: underline; }

/*
 | E-bulten formu koyu zeminde duruyor. Girdiler ortak bilesen
 | katmanindan geliyor (acik zemin, koyu metin) — orada dogru kontrast
 | zaten var. Burada yalniz ETIKET renkleri devraliniyor; yardim ve
 | onay metni varsayilan gri kalirsa lacivert uzerinde okunmuyordu.
 */
.footer-bulten { margin-block-start: var(--space-2); }
.footer-bulten .onay-metin,
.footer-bulten .alan-yardim { color: var(--text-on-inverse-muted); }
.footer-bulten .onay-kutusu { font-size: var(--text-sm); }

/* ==========================================================================
   Gerekce ve olcum notlari — §5.1 aciklanabilirlik
   ========================================================================== */

/*
 | "Neden bu sonucu goruyorum?" acilir kutusu. Guven puani, bayi onerisi
 | ve risk alarmi ayni bileseni kullanir — gerekce her yerde ayni gorunur.
 */
/*
 | ⛔ `display: block` SUS DEGIL, KUSUR DUZELTMESI — 18 Agustos 2026.
 |
 | Sinif `margin-top` ile yazilmis, yani ALT SATIR olmasi tasarlanmis. Ama
 | depodaki 31 kullanimin hepsi `<span>` ve satir ici bir ogede `margin-top`
 | HICBIR SEY YAPMAZ. Sonuc: her gerekce kendinden onceki degere yapisik
 | cikiyordu — sahibi bunu hakedis ekraninda gordu ("IBAN yok" bayi adina
 | bitisikti), ama ayni kusur denetim, besleme, bayiler ve katalog
 | ekranlarinda da duruyordu.
 |
 | `<details class="gerekce">` kullanimlari zaten blok; onlar etkilenmiyor.
 */
.gerekce { display: block; margin-top: var(--space-1); font-size: var(--text-sm); }
.gerekce summary { cursor: pointer; font-weight: 600; color: var(--text-link); }
.gerekce > p { margin: var(--space-1) 0 0; color: var(--text-muted); }
.gerekce ul { margin: var(--space-1) 0 0; padding-left: 1.125rem; color: var(--text-muted); }

/* Etiket/deger listesi — finansal kartlar, teknik ozellikler. */
.veri-listesi {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.25rem var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}
.veri-listesi dt { color: var(--text-muted); }
.veri-listesi dd { margin: 0; font-variant-numeric: tabular-nums; }

/*
 | ⛔ VERI LISTESINDE ROZET SARILIR.
 |
 | Rozet normalde tek satirda durur — dogru karar, kisa etiket icin.
 | Ama "Kesin degil — kontrol gerekir" gibi bir cumle rozete girdiginde
 | `auto 1fr` izgarasini disari itiyor: uyumluluk ekrani +8px tasiyordu.
 | Sarma yalniz VERI LISTESI icinde acilir; rozetin baska yerdeki tek
 | satirlik davranisi korunur.
 */
.veri-listesi { grid-template-columns: auto minmax(0, 1fr); }
.veri-listesi .rozet { white-space: normal; }

/*
 | SAYISAL VARYANT — bayi portali, madde P3.
 |
 | Cari uclusunde (onayli / kullanilan / geciken) sayilar SAGA hizali
 | ve alt alta; `auto 1fr` ile etiket ne kadar uzarsa uzasin rakamlar
 | ayni sutunda kaliyor. `tabular-nums` zaten `.veri-listesi dd`de var,
 | yani basamaklar da hizali — sag hizalama olmadan o ozellik yarim
 | kaliyordu.
 */
.veri-listesi-sayisal { grid-template-columns: 1fr auto; }
.veri-listesi-sayisal dd { text-align: end; }

/*
 | RISK SATIRI. Geciken tutar sifirdan buyukken satir kirmizi ve KALIN.
 |
 | ⛔ RENK TEK BASINA ANLAM TASIMIYOR: kalinlik ikinci isaret, yanindaki
 | "Gecikmiş" cipi ucuncusu. `--danger-ink` metin olarak 6.95:1 —
 | `.alan-hata` bu tokeni zaten metin renginde kullaniyor.
 */
.veri-satir-risk { color: var(--danger-ink); font-weight: 700; }

/*
 | BAKIYE ACIKLAMALARI — dort kartin dipnotu, varsayilan kapali.
 | Etiket ile aciklama ALT ALTA: aciklamalar tam cumle, yan yana
 | dizilirse etiket sutunu en uzun basliga gore genisler ve kisa
 | satirlarda 150px'lik bosluk kalir (Revize m.6'da olculmus kusur).
 */
.bakiye-aciklama > summary { font-weight: 600; cursor: pointer; }

.bakiye-sozluk { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.bakiye-sozluk dt { font-weight: 600; }
.bakiye-sozluk dd { margin: 0 0 var(--space-2); color: var(--text-muted); }
.bakiye-sozluk dd:last-child { margin-block-end: 0; }

/*
 | YAPISIK VARYANT — deger etikete yapisir (Revize m.6).
 |
 | Paylasilan etiket sutunu bir TABLODA dogrudur: on satirin etiketi
 | alt alta hizalanir. Bir KARTTA ise sutun en uzun etikete gore
 | genisliyor ("Çalışma saatleri" 167px) ve kisa satirlar kocaman bir
 | bosluk aliyordu — "İl" ile "Antalya" arasinda 150px. Sahibinin
 | "hizalama bozuk" dedigi sey buydu.
 |
 | Burada her cift KENDI satirinda: `<dl>` bir yigin, ciftler
 | `<div>` icinde ve etiket ile deger yan yana duruyor. `<div>` HTML'de
 | `<dl>`'in gecerli cocugudur; gruplamanin standart yolu odur.
 */
.veri-listesi-yapisik {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.veri-listesi-yapisik > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

/* Etiketten sonra iki nokta: sutun hizasi olmadan cift okunur kalsin. */
.veri-listesi-yapisik dt::after { content: ":"; }

/* Kesinlik iddia etmeyen olcum notu (§14 — uyumluluk kesinlestirilmez). */
.olcu-notu { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.not-uyari { font-size: var(--text-xs); font-weight: 600; color: var(--warning-ink); margin-top: var(--space-1); }

.bosluk-ust { margin-top: var(--space-4); }
.bosluk-alt { margin-bottom: var(--space-4); }

/* Dar sayisal girdiler (tutar, kod) — tablo icinde satiri sismesin. */
.girdi-dar  { width: 7rem; }
.girdi-orta { width: 9.5rem; }

/*
 | ⛔ AILENIN UCUNCU BASAMAGI EKSIKTI — 26 Agustos 2026.
 |
 | `.girdi-genis` `/admin/ayarlar`da IKI YERDE basiliyordu (unvan,
 | adres, IBAN, liste ayarlari) ama `resources/css`te TANIMI YOKTU.
 | Sinif hicbir sey yapmiyor, girdi `.alan-satiri > .alan`in 11rem
 | flex-basis'inde kaliyordu: 300 karakterlik `maxlength` tasiyan
 | "REYHAN INTERCONTINENTAL TRADE DIS TICARET ANONIM SIRKETI" 57
 | karakterlik unvan ~176px'lik kutuda kirpiliyor, kartin gerisi bos
 | duruyordu.
 |
 | Ad zaten dogruydu — yalniz kurali yoktu. Iki satir da yukaridaki
 | `.girdi-dar` emsalinin (2932) birebir izdusumu: sinif kendi
 | genisligini, kap da kendi flex payini soyluyor.
 |
 | ⚠️ TAVAN 40rem: sinirsiz genislik uzun bir metin girdisini
 | okunmaz satir uzunluguna cikarirdi (65-75ch kurali).
 */
.girdi-genis { inline-size: 100%; }
.alan-satiri > .alan:has(.girdi-genis) { flex: 1 1 24rem; max-inline-size: 40rem; }

/*
 | Iki haneli sayilar icin (KDV orani gibi). Yogun tabloda `girdi-dar`
 | bile satiri sardiriyordu: iki dar girdi + dugme 199 px'lik sutuna
 | sigmiyordu ve hucre 136 px'e cikiyordu.
 |
 | ⚠️ AMA COK DARDI: 60 px'in 30 px'ini yatay dolgu, ~16 px'ini de
 | `type="number"` oklari yiyordu ve GERIYE 14 px KALIYORDU — "20"
 | ekranda "2C" diye okunuyordu. Planin "buton etiketi kirpiliyor"
 | diye not ettigi kusur buydu; buton degil, KDV girdisiymis.
 |
 | Cozum genisligi ucurmadan: yatay dolgu kisaldi, genislik bir tik
 | acildi. Oklar KALIYOR — dokunmatikte oran degistirmenin tek yolu.
 */
.girdi-mini {
  width: 4.5rem;
  padding-inline: var(--space-1);
}

/*
 | SAAT GIRDISI — bayi portali, madde P5.
 |
 | ⛔ BULUNAN HATA: calisma saatleri formu `type="time"` girdilerine
 | `.girdi-mini` veriyordu. O sinif IKI HANELI SAYI icin yazilmis
 | (yukaridaki yoruma bakin: KDV orani) — 72 px'in yatay dolgusu ve
 | tarayicinin saat kontrolu dustukten sonra geriye okunacak yer
 | kalmiyordu; ekranda "09:00" yerine "0!" ve "1£" gorunuyordu.
 |
 | ⛔ `.girdi-mini` DEGISTIRILMEDI: onu genisletmek KDV sutununu geri
 | bozardi. Saat kendi olcusunu aliyor.
 |
 | 8.5rem = 136 px: "09:00" + tarayicinin saat ikonu + dolgu.
 */
.girdi-saat { width: 8.5rem; }

/* --------------------------------------------------------------------------
   Calisma saatleri satiri — madde P5
   --------------------------------------------------------------------------
   Once her gun bordurlu bir kutuydu ve iki pencere alt alta duruyordu:
   yedi gun ekrani dolduruyor, tek bir bilgi veriyordu. Artik gun adi
   solda, pencereler sagda yan yana.
   -------------------------------------------------------------------------- */

.saat-satir {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--border-default);
}

/* Son satirin altinda cizgi yok: kartin kendi kenarligi zaten var. */
.saat-satir:last-of-type { border-block-end: 0; }

.saat-gun { font-weight: 600; }

.saat-pencereler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

/*
 | ⛔ PENCERE SARILABILIR — yoksa satir izgarayi disari iter.
 |
 | Saat penceresi iki zaman girdisi + ayrac tasiyor. Sarilamayan bir
 | flex satiri oldugunda 296px'te `.saat-satir` izgarasini 292px'e
 | genisletiyordu (gorunur alan 281px): dukkanim ekrani +52px tasti.
 |
 | ⚠️ IZGARAYI DEGISTIRMEK COZUM DEGIL: `minmax(0,8rem) minmax(0,1fr)`
 | denendi ve tasmayi +52'den +196'ya CIKARDI. Tek sutuna inmek ise
 | tasmayi hic azaltmadi. Sorun sutunlarda degil, sarilamayan pencerede.
 */
.saat-pencere { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-inline-size: 0; }

/*
 | KAPALI GUN SOLUK — ama `opacity` ILE DEGIL.
 |
 | `opacity` metnin kontrastini olculemez hâle getirir: zemin degisince
 | oran da degisir ve `WcagAuditTest` neyi olctugunu bilemez. Token
 | kullanildi; `--text-muted` zaten olculmus bir deger.
 */
.saat-satir-kapali .saat-gun { color: var(--text-muted); font-weight: 400; }

.saat-kapali-not {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 400;
}

/* Dar ekranda gun adi pencerelerin USTUNE gecer — 8rem sutun sigmiyor. */
@media (max-width: 720px) {
  .saat-satir { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Takvim gunu — madde P4
   --------------------------------------------------------------------------
   Once on dort gun on dort AYRI KART'ti ve kapasite tanimsizken hepsi
   ayni cumleyi tasiyordu. Artik gunde tek satir; ayrinti `<details>`
   icinde.
   -------------------------------------------------------------------------- */

.takvim-gun {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--surface-default);
  margin-block-end: var(--space-1);
}

/*
 | ⛔ `<summary>` VE ICI BOS SATIR AYNI OLCUYU PAYLASIR. Ikisi ayri
 | yazilsaydi acilabilen gun ile acilamayan gun ekranda farkli
 | yuksekliklerde durur ve liste testere disi gorunurdu.
 */
.takvim-gun > summary,
.takvim-gun-bos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  min-block-size: var(--dokunma-hedefi);
}

.takvim-gun > summary { cursor: pointer; }

/* Ici bos gun: ucgen yok, o yuzden onun yerini dolduran bosluk da yok. */
.takvim-gun-bos { color: var(--text-muted); }

.takvim-tarih { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

.takvim-ozet {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Slot tablosu ve randevu kartlari `<summary>` ile ayni ic bosluga girer. */
.takvim-gun > .tablo-sarmal,
.takvim-gun > .kart {
  margin: 0 var(--space-2) var(--space-2);
}

/* ==========================================================================
   SEPET EKRANI — 15 Agustos 2026
   ==========================================================================
   Sahibi: "her sey ic ice, yazilar birlesik gibi duruyor" ve "Siparisi
   tamamla sayfanin en sonunda, nerenin matematigi bu".

   OLCULEN UC KOK SEBEP:

   1. BASLIK KUTUNUN DISINDAYDI. `<h2>Motosikletiniz</h2>` -> `<p>` ->
      `<form class="kart">`: kutu yalniz FORMU sariyor, baslik bir onceki
      kartin altinda sahipsiz duruyordu. "Ic ice" sikayetinin harfi
      harfine kaynagi buydu. Artik her adim kendi `<section>`inda ve
      basligi de icinde.

   2. BOSLUK HIYERARSISI YOKTU. Kart ici dolgu 16px, izgara gap 16px,
      bolum ayirici `.bosluk-ust` 32px. Kartin ICINDEKI nefes ile
      bolumler ARASINDAKI nefes ayni mertebedeydi; goz bolumun nerede
      bittigini secemiyordu. `.sepet-adim` 48px + GORUNUR bir dikis.

   3. `.dizi-arali` OLU DEGISTIRICIYDI. `.dizi` olmadan tek basina
      hicbir sey yapmiyor (o `display:flex` ve `gap`i veren sinif);
      kupon formu bu yuzden blok kalip butonu girdinin dibine
      yapistiriyordu. Blade'de `.dizi` eklendi, CSS degismedi.
   ========================================================================== */

/*
 | IKI SUTUN. Sag sutun YAPISKAN ozet: "Siparisi tamamla" artik DOM'da
 | 15 bayi kartinin arkasinda degil, ekranda kaliyor.
 |
 | `.izgara-genis` kullanilamadi: o `auto-fit` ile esit sutun uretiyor,
 | burada oran gerekiyor. Emsal `.hesap-duzen`/`.hesap-yan`.
 */
.sepet-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--space-6);
  align-items: start;
}

.sepet-akis { min-inline-size: 0; }

/*
 | ⛔ YUZEN KART OLDUGUNU SOYLESIN — 26 Agustos 2026.
 |
 | `.sepet-ozet` yapiskan (sticky) ve sayfa kayarken yerinde duruyor,
 | ama gorsel olarak kupon `<details>`i ile AYNI agirliktaydi: duz
 | `.kart`, 1px kenarlik, golgesiz. Paranin konusuldugu ve sayfayla
 | birlikte kaymayan tek kart, hicbir sey soylemiyordu.
 |
 | ⚠️ `--shadow-sm` SERBEST: hayalet-kart yasagi `border` + `--shadow-md`
 | ciftini tutuyor (0 4px 12px). `--shadow-sm` (0 1px 2px) kenarlikla
 | birlikte kullanilabiliyor ve projede emsalleri var.
 | ⛔ `--shadow-md`'YE YUKSELTILMEZ.
 */
.sepet-ozet { position: sticky; top: var(--space-3); box-shadow: var(--shadow-sm); }

/*
 | ADIM AYIRICI — gorunur dikis + 48px.
 |
 | Projede `hr` kurali ya da `.ayirici` sinifi HIC YOKTU; bolumleri
 | ayiran tek arac bosluktu ve o da (2) yuzunden yetersizdi.
 */
.sepet-adim {
  /*
   | Dikisin IKI YANI ESIT DEGIL ve bilincli: cizginin ustunde biten
   | bolume 48px, altinda baslayan bolume 32px. Esit olsaydi cizgi iki
   | bolumun ortasinda "kime ait" belirsiz dururdu; asagi daha yakin
   | olunca cizgi ALTTAKI bolumun basligi gibi okunuyor.
   */
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-default);

  /* Adima capa ile donuldugunde baslik ustluk altinda kalmasin. */
  scroll-margin-top: var(--space-3);
}

.sepet-adim:first-of-type { margin-block-start: var(--space-4); }

/*
 | TAMAMLANAN ADIM TEK SATIRA COKER. Sayfanin uzunlugunu adim sayisi
 | degil AKTIF ADIM belirliyor: iki uzun liste asla ayni anda acik
 | kalmiyor.
 */
.adim-ozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  min-block-size: var(--dokunma-hedefi);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

/*
 | MONTAJ KARARI — iki buyuk secim.
 |
 | `<button>` cunku secim POST; `.bulucu-yol` dogru desen ama `<a>` icin
 | yazilmis ve onun `text-decoration`/`color` kurallari buton uzerinde
 | ters calisiyor. Secili durum ters yuzeyle gosteriliyor —
 | `.bulucu-yol-secili`nin yontemi.
 */
.sepet-secim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-2);
}

.sepet-secim-oge {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: flex-start;
  text-align: start;
  min-block-size: var(--dokunma-hedefi);
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  background: var(--surface-default);
  color: var(--text-default);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.sepet-secim-oge:hover {
  border-color: var(--brand-blue-500);
  box-shadow: var(--shadow-sm);
}

.sepet-secim-oge > .not { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Bayi listesi — kart DEGIL, satir
   -------------------------------------------------------------------------- */

.bayi-liste { list-style: none; margin: var(--space-2) 0 0; padding: 0; }

.bayi-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-block-size: var(--dokunma-hedefi);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--border-default);
}

.bayi-satir:last-child { border-block-end: 0; }

.bayi-satir-yer { display: block; font-size: var(--text-sm); color: var(--text-muted); }

/*
 | Montaj ucreti BUYUK ve sagda: 15 satir arasinda gercekten degisen
 | tek rakam o. Urun toplami satirda YAZMIYOR — hepsinde ayniydi.
 */
.bayi-satir-tutar {
  text-align: end;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.bayi-satir-tutar > .not { display: block; font-weight: 400; }

/* Kalemler dokumu satirin altina tam genislikte iner. */
.bayi-satir-kalemler { grid-column: 1 / -1; }

.bayi-satir-pasif { color: var(--text-muted); }

/* Dar ekranda tutar ve buton alt satira geciyor. */
@media (max-width: 720px) {
  .bayi-satir { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   Randevu saatleri
   -------------------------------------------------------------------------- */

/*
 | `.dizi` flex-wrap yapiyor ama sutun hizasi yok; 18 saat dugmesi
 | duzensiz uzunlukta satirlar uretirdi. `min()` sarmali ZORUNLU —
 | ThemeTest 320px tasma kurali.
 */
.saat-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

.saat-dugme {
  min-block-size: var(--dokunma-hedefi);
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------------
   Katlanir bolumler ve toplam karti
   -------------------------------------------------------------------------- */

.sepet-katlanir > summary,
.sepet-katlanir-kucuk > summary { cursor: pointer; font-weight: 600; }

.sepet-katlanir > summary { min-block-size: var(--dokunma-hedefi); display: flex; align-items: center; }

/*
 | GENEL TOPLAM AYRI: ust cizgi + buyuk punto + kalin. Uc isaret birden,
 | cunku renk tek basina anlam tasimaz. Eskiden yalniz `<strong>` vardi
 | ve 14px'te kaliyordu.
 |
 | `<div>` `<dl>`in gecerli cocugu; `.veri-listesi-yapisik` bu teknigi
 | zaten kullaniyor.
 */
.ozet-genel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--border-default);

  /*
   | ⛔ GENEL TOPLAM BIR BANT — 26 Agustos 2026.
   |
   | Satir yalniz ust cizgi + buyuk rakamdi ve kartin geri kalaniyla
   | ayni zemindeydi; goz toplami ARIYORDU. Sahibinin BEGENDIGI
   | kampanya kartinda buyuk rakam GRI PANELDE oturuyor — ayni etki
   | buraya tasindi.
   |
   | Negatif margin kartin ic dolgusunu (`--space-2`) yutuyor, yani
   | bant kenardan kenara uzaniyor. Deger yeni degil: kartin kendi
   | dolgusunun tersi.
   |
   | ⚠️ ALT NEGATIF YOK: banttan sonra "Siparisi tamamla" dugmesi
   | geliyor, bant kartin dibine yapismamali.
   |
   | Ayni sinif checkout ve siparis ozetinde de kullaniliyor; uc ekran
   | ayni bandi kazaniyor.
   */
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  padding-block-end: var(--space-2);
  background: var(--surface-muted);
}

.ozet-genel dt { font-size: var(--text-base); font-weight: 600; color: var(--text-default); }
.ozet-genel dd { font-size: var(--text-2xl); font-weight: 700; text-align: end; }

/*
 | Onay ekranindaki kompakt kalem listesi. Tutarlarin USTUNDE duruyor:
 | once "ne", sonra "kac para". 2px dikey dolgu mevcut sub-8px kumenin
 | uyesi (1, 2, 2.4, 3, 4, 6) — yeni deger yok.
 */
.ozet-kalemler {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
}

.ozet-kalemler li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 2px;
}

/*
 | Form ici grup dikisi — `.sepet-adim` ayiricisinin kucuk kardesi.
 | Uzun bir formu taranabilir kilan sey baslik degil, GORUNUR DIKIS:
 | ince cizgi + kisik sesli etiket. `.kaps` harf araligini zaten veriyor.
 */
.giris-grup {
  margin: var(--space-2) 0 0;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--border-default);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.sepet-tamamla { inline-size: 100%; margin-block-start: var(--space-2); }

/*
 | TABLO CERCEVESI. `.tablo-sarmal` yalniz `overflow-x` ve radius
 | veriyordu: yuvarlak kose vardi, cerceve yoktu ve tablo sayfanin
 | zeminine karisiyordu. `.kart` icine almak yasak (ic ice kart).
 */
.tablo-cerceveli { border: 1px solid var(--border-default); }

@media (max-width: 900px) {
  .sepet-duzen { grid-template-columns: 1fr; }

  /*
   | Ozet karti mobilde AKISIN ONUNE geciyor: CTA ilk ekranda kalsin.
   | `order` yalniz gorsel siralamayi degistiriyor; DOM sirasi
   | (dolayisiyla klavye ve ekran okuyucu sirasi) bozulmuyor cunku
   | ozet zaten kendi basina anlamli bir blok.
   */
  .sepet-ozet { position: static; order: -1; }
}

/* ==========================================================================
   HAREKET KATMANI — madde P7
   ==========================================================================
   ⛔ KAPSAM `body.pano`: yonetim paneli ve bayi portali. Musteri
   tarafi DISARIDA ve sebebi su — orada zaten kendi kompozisyonu var
   (hero videosu, kayan urun seridi) ve butun sayfayi kaplayan bir
   giris solmasi onlarla cakisirdi.

   ⛔ ROZET/CIP ANIMASYONU YOK. NABIZ, PARILTI, DIKKAT CEKME YOK.
   Panel bir telemetri ekrani: dikkat cekmek icin oynayan bir sayi, o
   sayiya olan guveni dusurur.

   ⛔ HAREKET AZALTMA `tokens.css`teki GLOBAL blokta zaten kapali —
   burada ikinci bir blok YAZILMIYOR. O blok sure, tekrar, gecikme ve
   kaydirmayi birden sifirliyor; madde P7'de `animation-delay` de
   eklendi (kademelenen kartlar yoksa yanip sonuyordu).
   ========================================================================== */

/*
 | GIRIS — icerik bir kez soluyor ve 8 px yukseliyor.
 |
 | ⛔ TEMEL DURUM GORUNUR. Kural `opacity: 0` ile BASLAMIYOR; solma
 | yalnizca `@keyframes`in `from` adiminda. Animasyon hic calismasa
 | (eski tarayici, kapali animasyon, yazdirma) icerik yerinde ve
 | okunur kalir. Tersi yazilsaydi tek bir destek eksigi sayfayi
 | bombos gosterirdi.
 */
/*
 | ⛔ MUSTERI TARAFI TUR 4'E KADAR DISARIDAYDI. Olculdu: `panel-giris`
 | yalnizca `body.pano` kapsamindaydi ve 11 public sayfa hicbir
 | hareket olmadan aciliyordu. Ayni urunun iki yarisi arasinda his
 | farki vardi ve gerekcesi yoktu — yalnizca kural oraya yazilmamisti.
 |
 | ⚠️ IKI SECICI, CUNKU DUZENLER FARKLI — tarayicida olculdu ve ILK
 | YAZDIGIM SECICI OLU CIKTI:
 |
 |   admin / dealer / fleet / hesap   <main id="icerik"><div class="kap">
 |   public                           <main id="icerik">@yield(...)
 |   auth                             <main id="icerik" class="giris-kabuk">
 |
 | Public duzende sarmalayici YOK; icerigi sayfanin kendisi basiyor ve
 | dogrudan cocuk her sayfada farkli (/lastikler'de sinifsiz bir
 | `<section>`). `main#icerik > .kap` orada hicbir seye uymuyordu.
 |
 | `:has()` ile kosul dogru yerden kuruluyor: sarmalayici VARSA o,
 | YOKSA `main`in kendisi. Sayfa sayfa liste tutmaya gerek kalmiyor.
 |
 | ⚠️ ANASAYFA DISARIDA: hero videosu ve bulucu bari ilk ekranda
 | duruyor; onlarin uzerine bir de giris hareketi koymak "sayfa
 | oynuyor" hissi verirdi.
 */
body:not(.anasayfa) main#icerik > .kap,
body:not(.anasayfa) main#icerik:not(:has(> .kap)) {
  animation: panel-giris var(--duration-base) var(--ease-out);
}

@keyframes panel-giris {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
}

/*
 | KADEMELENME — UC ADIMDA DURUYOR.
 |
 | Dorduncu karttan sonrasi bir ritim degil bir GECIKME olur: sekiz
 | kartlik bir izgarada son kart 280 ms sonra gelirdi ve kullanici
 | sayfanin yavas yuklendigini sanardi.
 |
 | `backwards` dolgu ZORUNLU: gecikme suresince kart baslangic
 | durumunda (gorunmez) beklemeli, yoksa once gorunup sonra kaybolur.
 */
body.pano main#icerik .izgara > .kart,
body.pano main#icerik .izgara > .grafik,
body:not(.anasayfa) main#icerik .izgara > .kart {
  animation: panel-giris var(--duration-base) var(--ease-out) backwards;
}

/*
 | ⚠️ UC ADIM YETMIYORDU — Tur 4'te ALTIYA cikarildi.
 |
 | Ustteki yorum "dorduncu karttan sonrasi bir ritim degil bir GECIKME
 | olur" diyordu ve gerekcesi sayiyla verilmisti: sekiz kartlik bir
 | izgarada son kart 280 ms sonra gelirdi. AMA O HESAP 40ms x 7 = 280ms
 | uzerineydi; uc adimda durunca 4-8. kartlar AYNI ANDA geliyor ve
 | kademe ritmi ortada kesiliyordu — goz once bir sira gorup sonra bir
 | blok goruyordu.
 |
 | Alti adim x 40ms = 240ms. Sekiz kartlik bir izgarada son uc kart
 | ayni anda gelir ama o zamana kadar ritim ZATEN KURULMUS olur.
 | Tavan 240ms; `--duration-base` (200ms) ile toplam 440ms.
 |
 | `backwards` dolgu ZORUNLU: gecikme suresince kart baslangic
 | durumunda (gorunmez) beklemeli, yoksa once gorunup sonra kaybolur.
 */
main#icerik .izgara > :nth-child(2) { animation-delay: var(--stagger-adim); }
main#icerik .izgara > :nth-child(3) { animation-delay: calc(var(--stagger-adim) * 2); }
main#icerik .izgara > :nth-child(4) { animation-delay: calc(var(--stagger-adim) * 3); }
main#icerik .izgara > :nth-child(5) { animation-delay: calc(var(--stagger-adim) * 4); }
main#icerik .izgara > :nth-child(6) { animation-delay: calc(var(--stagger-adim) * 5); }

/*
 | `<details>` ACILMA SOLMASI.
 |
 | ⛔ YUKSEKLIK ANIMASYONU YAPILMADI ve bu bilincli bir takas.
 | `interpolate-size` + `block-size` gecisi icin `::details-content`e
 | `overflow: hidden` gerekiyor; icerideki `.tablo-sarmal`in YAPISKAN
 | BASLIGI o anda kirpilirdi (yapiskan konumlanma, kirpan bir ataya
 | yakalanir). Okunabilir bir tablo basligi, yumusak bir acilmadan
 | daha degerli.
 |
 | ⛔ MENU GRUPLARI DISARIDA. `.yan-menu-grup` masaustunde
 | `::details-content` uzerinden ZORLA ACIK tutuluyor; oraya bir
 | opaklik kurali koymak o zorlamayla carpisirdi.
 |
 | ⛔ MENU DARALTICI DA DISARIDA — 25 Agustos 2026, olculdu.
 | `.menu-katlanir` bu kurala girdiginde menu KAPALIYKEN DE 555px yer
 | kapliyordu: opaklik 0 oluyor ama `content-visibility` gecisi
 | `allow-discrete` ile beklemede kaldigi icin kutu duruyordu. Yani
 | daraltici gorunmez bir duvara donusuyordu — duzeltmek istedigimiz
 | seyin daha kotusu.
 |
 | ⛔ JS YOK — sozun geregi.
 */
body.pano details:not(.yan-menu-grup, .menu-katlanir)::details-content {
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease-out),
    content-visibility var(--duration-base) allow-discrete;
}

body.pano details[open]:not(.yan-menu-grup, .menu-katlanir)::details-content { opacity: 1; }

/* --------------------------------------------------------------------------
   Doluluk cubugu — `<x-grafik tur="doluluk">`
   --------------------------------------------------------------------------
   Sparkline ile ayni disiplin: dekoratif, sayiyi tekrarlamaz, rengini
   token'dan alir. Gradyan YOK — iki duz dikdortgen.
   -------------------------------------------------------------------------- */

.grafik-doluluk {
  inline-size: 6rem;
  block-size: 0.375rem;
  flex: none;
}

.grafik-doluluk-ray  { fill: var(--surface-muted); }
.grafik-doluluk-dolu { fill: var(--action-secondary); }

/* Ters yuzeyde ikincil metin — opacity yerine token (kontrast korunur). */
.koyu .ikincil, section.koyu .ikincil { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   Hero — pazarlama yuzeyi. §6.4
   --------------------------------------------------------------------------
   METIN GORSELIN UZERINE BINMEZ. Solda tam opak lacivert panel, sagda
   gorsel. Iki sebep:

     1. Gorsel uzerine yazi koymak kontrasti GORSELE baglar ve olculemez
        hale getirir; gorsel degisince metin sessizce okunmaz olabilir.
        Bolunmus duzende beyaz / lacivert = 19.47:1, HER ZAMAN AA.
     2. Okunabilirlik icin "scrim" gradyani gerekmiyor — projede gradyan
        yasak ve bu duzen onu gereksiz kiliyor.

   Lacivert burada dekorasyon degil YAPISAL katman (DESIGN.md).
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-marketing);
  overflow: hidden;
}

/*
 | HERO KABI — 21 Agustos 2026, tema turu.
 |
 | ⛔ `display: contents` BILINCLI: `tam` bayragi kullanilmadiginda bu kap
 | yerlesime HIC katilmaz, yani bilesene gecen bes cagri yerinin ciktisi
 | birebir eskisi gibi kalir. Yeni bir sarmalayici eklemenin bedelini
 | odemeden yeni bir yetenek kazaniliyor.
 */
.hero-kap { display: contents; }

/*
 | TAM GENISLIK BANDI.
 |
 | ⚠️ OLCULEN TESHIS: lacivert zaten VARDI. `.hero` alti sayfada
 | `--surface-inverse` zemin tasiyor — ama `.kap` icinde, 14px
 | yuvarlatilmis bir KART olarak. Capa gibi okunmamasinin sebebi renk
 | degil KAP idi. Yani is "koyu capa ekle" degil, "elindeki laciverti
 | kutudan cikar".
 |
 | Bant ekranin iki kenarina dayanir; ic metin sutunu kendi olcusunu
 | (`--kap-genislik`) korur — okuma olcusu bozulmaz.
 */
.hero-tam {
  display: block;
  background: var(--surface-inverse);
}

.hero-tam .hero {
  max-inline-size: var(--kap-genislik);
  margin-inline: auto;
  padding-inline: var(--space-3);
  border-radius: 0;
}

/*
 | ⛔ BANT, BOLUMUN DOLGUSUNUN ICINDE KALMAZ.
 |
 | `section` her yerde 48px dikey dolgu tasiyor. Tam genislik bir hero o
 | dolgunun icinde kalirsa ustunde ve altinda beyaz bir serit olusur ve
 | "bant" olmaktan cikar — capa gibi okunmamasinin sebebi tam olarak buydu
 | (lacivert zaten vardi, KUTUDAYDI).
 |
 | ⚠️ `:has()` SECILDI, NEGATIF MARGIN DEGIL: negatif margin, bandin
 | bolumun ILK cocugu oldugunu VARSAYAR ve varsayim yazili olmayan bir
 | kural olur. `:has()` kosulu acikca soyluyor. Destek: Chrome 105+,
 | Safari 15.4+, Firefox 121+.
 */
section:has(> .hero-tam:first-child) { padding-block-start: 0; }

.hero-metin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
}

.hero-metin h1 {
  margin: 0;
  font-family: var(--font-display);
  /* Gosterim ekseni — bkz. `.bolum-baslik` notu. Vurgu icin `<strong>`. */
  font-weight: 400;
  color: var(--text-inverse);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--track-hero);
  text-wrap: balance;
}

.hero-metin h1 strong,
.hero-metin h1 b { font-weight: 700; }

.hero-metin p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-on-inverse-muted);
  text-wrap: pretty;
}

.hero-gorsel { min-height: 22rem; }

/*
| GORSELSIZ HERO — 24 Agustos 2026.
|
| ⛔ BILESEN BUNU VAAT EDIYORDU, CSS TUTMUYORDU. `bolum-hero.blade.php`
| yorumu harfiyen soyle diyor: *"Gorseli olmayan hero BASILIR, gorsel
| kutusu basilmaz."* Ama `.hero` iki sutun taniml ve tek sutuna dusus
| YALNIZ `@media (max-width: 720px)` icinde. Yani 720px ustunde gorselsiz
| bir hero sagda %54 BOS LACIVERT birakiyordu.
|
| ⚠️ KUSUR BUGUNE KADAR GORUNMEDI cunku mevcut alti cagrinin ALTISI DA
| `gorsel` geciyor. Kampanyalar sayfasi bunu ilk kullanan sayfa oldu ve
| kusur oyle ortaya cikti. Yani bu, "yeni sayfa yeni kusur acti" degil;
| yazildigi gunden beri orada duran ama cagiran olmadigi icin
| sinanmamis bir yol.
|
| ⛔ IKINCI KURAL SUS DEGIL. `.hero-metin` 48px yan dolgu tasiyor. Tam
| genislikli bantta bu dolgu, basligi bandin ALTINDAKI `.kap` icerigin-
| den 24px kaydirir — sahibinin "hizalama bozuk" dedigi kusurun ta
| kendisi. Sifirlaninca `<h1>` ile alttaki kartlar ayni sol hatta iner.
|
| Mevcut alti hero `gorsel` gectigi icin `:not(:has(...))` onlara HIC
| uymuyor: sifir regresyon.
*/
.hero:not(:has(.hero-gorsel)) { grid-template-columns: minmax(0, 1fr); }

.hero-tam .hero:not(:has(.hero-gorsel)) .hero-metin { padding-inline: 0; }

/* ==========================================================================
   Bayi haritasi — Leaflet kabi
   ==========================================================================
   Leaflet'in kendi CSS'i `public/vendor/leaflet/` altinda ve vendor
   varligidir; ham renk kodu tasimasi normaldir — ham renk yasagi bu
   dosyayi (token katmanini) baglar, vendor'i degil.

   Kap `hidden` ile baslar, JS acar. Boylece JS kapaliyken bos gri bir
   dikdortgen kalmaz.
   ========================================================================== */

/*
 | ⛔ OLCU: TAM GENISLIK, MAKUL BOY — 25 Agustos 2026 (ucuncu tur).
 |
 | Bu kutu bugun UC kez degisti ve her seferinde sahibinin gordugu bir
 | kusuru duzeltti. Sirasi kayda deger, cunku ikisi birbirini uretti:
 |
 |   1. Genislik serbestti  -> kap 2.56:1 aciliyor, Turkiye 1.92:1;
 |      fark komsu ulkelerle doluyordu. *"Turkiye harici yerleri
 |      gosteriyor."*
 |   2. Genislik yukseklikten turedi -> kap sutundan dar kaldi,
 |      ortalandi, iki yaninda sayfa zemini. *"Etrafi gri."*
 |   3. Yukseklik genislikten turedi -> 1265x659. Turkiye tam oturdu ama
 |      kap EKRANI KAPLADI. *"Kocaman oldu, scroll ile inerken takiliyor."*
 |
 | Ucuncusunun cozumu oran zorlamasini BIRAKMAK oldu ve bu artik
 | mumkun: ayni turda Turkiye kilidi de kalkti (`bayi-harita.js`).
 | Kadrajin Turkiye'nin kutusuna birebir uymasi ARTIK SART DEGIL —
 | kullanici zaten istedigi yere gidebiliyor, kenarda komsu ulkenin
 | gorunmesi bir kusur degil, normal bir harita.
 |
 | Boy 26rem: onceki 30rem'den kisa (sahibi "kocaman" dedi), 1265px
 | genislikte 3:1 civari bir bant. Karo siniri da kalktigi icin bu
 | oranda GRI OLUSMUYOR — eski kurulumda olusurdu.
 */
.bayi-harita {
  inline-size: 100%;
  block-size: 26rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.bayi-harita[hidden] { display: none; }

/* Balon icindeki metinler tema olceginde kalsin. */
/*
 | ⛔ HARITA DA TEMANIN PARCASI — 25 Agustos 2026.
 |
 | Leaflet kendi yazi yiginini getiriyor ve tarayicida uc yerde
 | GORUNUYORDU:
 |
 |     zoom "+" ve "−"     22px  "Lucida Console", Monaco, monospace
 |     kunye satiri        12px  "Helvetica Neue", Arial, ...
 |     kabin kendisi             "Helvetica Neue", Arial, ...
 |
 | Sayfanin geri kalani Barlow / Barlow Condensed / JetBrains Mono
 | tasirken haritanin dorduncu bir aile getirmesi, "vendor boyle
 | geliyor" ile aciklanabilir ama gorulen sey tutarsizlik.
 |
 | ⚠️ VENDOR DOSYASINA DOKUNULMADI: `public/vendor/leaflet/` bir varlik
 | ve guncellenince degisiklik ucardi. Ezme burada, token katmaninda.
 |
 | Kunye ve zoom METNI temanin ailesine gecer; ikon ve karo gorselleri
 | Leaflet'in kendi isi, onlara karisilmiyor.
 */
/*
 | ⚠️ KAP ICIN `.leaflet-container` DA YAZILIYOR — ozgulluk esitligi.
 | Yalniz `.bayi-harita` (0,1,0) yazilinca Leaflet'in kendi
 | `.leaflet-container` kurali (0,1,0) ile berabere kaliyor ve KAYNAK
 | SIRASI karar veriyor: leaflet.css sonra yuklendigi icin o kazaniyordu.
 | Tarayicida olculdu — kap "Helvetica Neue" kaliyordu. Alt ogeler zaten
 | daha ozgul seciciyle kapsandigi icin ekranda gorunen bir kusur
 | degildi, ama haritanin ICINE eklenecek her yeni metin yanlis aileyi
 | miras alirdi.
 */
.bayi-harita,
.bayi-harita.leaflet-container,
.bayi-harita .leaflet-control-attribution,
.bayi-harita .leaflet-control-zoom a { font-family: var(--font-body); }

.bayi-harita .leaflet-popup-content { font-size: var(--text-sm); }
.bayi-harita .leaflet-popup-content .not { margin-block-start: 0.25rem; }

.bayi-karti .cip-dizi { margin-block: var(--space-1); }

/*
| ⚠️ `wrap` DEGIL `column` — 18 Agustos 2026.
|
| Once `flex-wrap: wrap` idi ve niyeti "ad ile rozet ayni satirda"
| olsun diyeydi. Uc sutunlu izgarada bu SADECE kisa adlarda tutuyor:
| 16 bayinin 15'inde rozet alt satira dusuyor, birinde kaliyor. Sonuc
| niyet edilen duzen degil, KARTTAN KARTA DEGISEN bir duzen — ekranda
| tek basina duran o bir kart yanlis dizilmis gibi gorunuyordu.
|
| Rozet artik DAIMA adin altinda. Yakinlik korunuyor (rozet hala
| kimligin yaninda, kartin dibinde degil) ama 16 kart ayni.
*/
.bayi-karti-baslik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.bayi-karti-baslik h3 { margin: 0; }

/*
 | Haftalik saat ozeti. Ic ice liste oldugu icin `<dd>` icinde duruyor;
 | gun adi sabit genislikte, saat penceresi yaninda.
 */
.bayi-saatler { list-style: none; margin: 0; padding: 0; }

.bayi-saatler li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-1);
}

.bayi-gun { color: var(--text-muted); }

/* Tarih rakamlari sutun hizasinda dursun (`tnum` artik gercekten calisiyor). */
.bayi-tatil { font-variant-numeric: tabular-nums lining-nums; }

/*
 | Kart eylemleri: "Bu bayiyi sec" (POST) ve yol tarifi. Kartin dibine
 | oturur — kisa iceren kartlar izgarada dans etmesin.
 */
.bayi-karti { display: flex; flex-direction: column; }

.bayi-karti-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

/*
 | Sepette secili bayi. Cerceve + ust seride ihtiyac yok: kartin kendi
 | kenarligi marka mavisine donuyor ve dugme "Sepette secili" diyor —
 | durum iki ayri kanalda birden okunuyor, yalniz renkte degil (1.4.1).
 */
.bayi-karti-secili { border-color: var(--brand-blue-500); }

/* ==========================================================================
   Bulucu seridi — hero'nun alt kenarina biner
   ==========================================================================
   Panelleri CSS DEGIL JS gizler (`bulucu-serit.js`). JS kapaliyken dort
   panel de gorunur kalir ve her form calisir; burada `hidden` kurali
   yazsaydik uc arama yolu erisilemez olurdu.
   ========================================================================== */

/*
 | KART DEGIL, BAR.
 |
 | Onceki hâli `.kap` icinde yuzen, koseleri yuvarlatilmis, golgeli bir
 | kartti; videonun altinda ikinci bir kutu gibi duruyordu. Yeni hâli
 | motolastik.com'un desenini alir ama RENGINI ALMAZ.
 |
 | Bar LACIVERT, kirmizi DEGIL. Dort gerekce:
 |   1. PRODUCT.md'nin birinci anti-referansi birebir "tam genislikte
 |      kirmizi bant"i tarif ediyor.
 |   2. DESIGN.md kimlik maddesi #1: lacivert YAPISAL katman.
 |   3. Olcum: beyaz etiket marka kirmizisi uzerinde 4,38:1 — yani o
 |      referansin bari AA'yi GECMIYOR. Lacivertte 19,47:1.
 |   4. Kirmizi isini yapar: ilk ekranda goz gidecek tek doygun renk
 |      "Goster" dugmesi olur.
 */
.bulucu-serit {
  position: relative;
  z-index: var(--z-dropdown);
}

/*
 | Bar videonun SON PIKSELLERINI orter: negatif margin `--bulucu-bar-yuk`
 | ile birebir ayni degerin tersi. Iki kazanc — perde ile bar arasinda
 | gorunur bir dikis kalmaz (video barin altinda biter) ve bar sayfa
 | akisina 0 px ekler, yani hero'nun yuksekligi hesabi bozulmaz.
 |
 | `border-block-end` KOYU TEMA ICIN: acik temada tabla beyaz, bar
 | lacivert, ayrim zaten var. Koyu temada tabla koyu grafite iner ve
 | lacivertle 1,14:1 kalir — bant sayfadan ayrilmaz. `--border-inverse`
 | acik temada seffaf, koyu temada gorunur bir kil cizgisi.
 */
/*
 | BAR ARTIK SAYDAM — ustteki perdeyle ayni karar (10 Agustos 2026).
 |
 | Lacivert dolgu, hero'nun altinda ikinci bir mavi serit olarak
 | okunuyordu; sahibin istegi ikisinin de kalkmasi. Bar hâlâ videonun
 | son piksellerinin uzerinde duruyor (negatif margin degismedi) ama
 | artik videoyu ORTMUYOR, uzerinde yuzuyor.
 |
 | Kenarlik da kalkti: ayirici gorevini videodan beyaz panele gecis
 | zaten yapiyor, ustune bir de cizgi cekmeye gerek yok. `.bulucu-bar`
 | bu yuzden ThemeTest'in koyu tema `--border-inverse` listesinden de
 | cikarildi — zemini olmayan bir bandin sinira ihtiyaci yok.
 |
 | Metnin kontrasti CATIDAKI ILE AYNI YOLDAN geliyor: her etiket kendi
 | lacivert konturunu tasiyor. Secili sekme zaten beyaz dolgu — kendi
 | zeminini getirdigi icin onda kontur yok.
 */
.bulucu-bar {
  margin-block-start: calc(var(--bulucu-bar-yuk) * -1);
  background: transparent;
}

/*
 | Etiket ve secili OLMAYAN sekmeler dogrudan videonun uzerinde.
 | Kontur ince: bu metinler 14 px ve 3 px onlari bogar.
 */
.bulucu-serit-etiket,
.bulucu-sekme[aria-selected="false"] {
  paint-order: stroke fill;
  -webkit-text-stroke: var(--metin-konturu) var(--brand-navy-950);
  text-shadow: var(--metin-golgesi);
}

.bulucu-sekme[aria-selected="false"] .ikon {
  filter: drop-shadow(0 0 2px var(--brand-navy-950))
          drop-shadow(0 1px 6px color-mix(in srgb, var(--brand-navy-950) 70%, transparent));
}

.bulucu-bar > .kap {
  display: flex; align-items: flex-end; gap: var(--space-3);
  flex-wrap: wrap;
  min-block-size: var(--bulucu-bar-yuk);
}

.bulucu-serit-etiket {
  /* Alt bosluk YOK: etiket sekmelerle ayni taban cizgisinde oturuyor. */
  margin: 0;
  align-self: center;
  font-size: var(--text-sm); font-weight: 700;
  text-transform: uppercase;
  font-feature-settings: "case" 1, "cpsp" 1;
  letter-spacing: var(--track-caps-sm);
  line-height: var(--leading-caps);
  color: var(--text-on-inverse-muted);
}

.bulucu-tabla {
  background: var(--surface-default);
  border-block-end: 1px solid var(--border-default);
}

.bulucu-tabla > .kap { padding-block: var(--space-3); }

/*
 | Sekme degistirince SAYFA ZIPLAMAZ: en yuksek panelin yeri onceden
 | ayrilir. Yalniz `[data-sekmeli]` altinda — JS kapaliyken dort panel
 | alt alta duruyor ve ayrilmis yukseklik olu bosluk olurdu.
 */
.bulucu-serit[data-sekmeli] .bulucu-tabla > .kap { min-block-size: 8rem; }

/*
 | Etiket ile sekmeler BIR GRUP.
 |
 | Onceden `margin-inline-start: auto` vardi: etiket tam solda, sekmeler
 | tam sagda ve aralarinda 400 pikselden fazla bos lacivert kaliyordu.
 | Ikisi tek bir seyin parcasi ("lastigini bul" + nasil) ama ekranda
 | birbiriyle ilgisiz iki oge gibi duruyordu. Sabit bir bosluk onlari
 | okunacak sirada tutuyor.
 */
/*
 | ⚠️ Bu bosluk BUGUNE KADAR HIC UYGULANMIYORDU: `var(--space-5)`
 | yaziliydi ve oyle bir token yok (olcek 1-2-3-4-6-8). Tanimsiz
 | degisken bildirimi hesaplama aninda gecersiz kiliyor, yani etiket
 | ile sekmeler arasinda hicbir zaman bosluk olmadi. 12 Agustos
 | 2026'da `ThemeTest`'in yeni token taramasi yakaladi.
 */
.bulucu-sekmeler {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-inline-start: var(--space-4);
}

.bulucu-sekme {
  /* Dis (`::after`) icin konumlandirma tabani. */
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: var(--dokunma-hedefi);
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: none;
  color: var(--text-on-inverse-muted);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  border-start-start-radius: var(--radius-control);
  border-start-end-radius: var(--radius-control);
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

/* Ikon metnin YANINDA kucuk kalir; agirlik metinde olmali. */
.bulucu-sekme .ikon { inline-size: var(--ikon-md); block-size: var(--ikon-md); }

/*
 | DIS: secili sekme beyaza doner, ust koseleri yuvarlanir ve `::after`
 | ile barin 1px alt kenarligini YALNIZ KENDI ALTINDA orter. Goz o
 | noktada kesintisiz tek bir kâgit gorur — sekme fiziksel olarak
 | panele baglanmis olur.
 |
 | Altcizgi yerine dis: bar lacivert oldugu icin ince kirmizi bir cizgi
 | hem zayif kalirdi hem de tam olarak bar/panel dikisinin uzerine
 | dusup ikisini birbirinden AYIRIRDI.
 */
.bulucu-sekme::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 1px;
  background: transparent;
}

.bulucu-sekme:hover { color: var(--text-inverse); }

/*
 | Durum UC KANALDAN birden okunuyor: `aria-selected` (ekran okuyucu),
 | zemin ve renk. Hicbiri harekete bagli degil — hareket azaltma acikken
 | de secili sekme aninda okunur.
 |
 | Olcum: beyaz zeminde `--text-link` 7,00:1 (ThemeTest hesapliyor).
 */
.bulucu-sekme[aria-selected="true"] {
  background: var(--surface-default);
  color: var(--text-link);
}
.bulucu-sekme[aria-selected="true"]::after { background: var(--surface-default); }

.bulucu-sekme:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-control); }

/*
 | PANEL GECISI. `hidden` -> `display: none` oldugu icin `transition`
 | calismaz; bu yuzden GIRIS animasyonu kullaniliyor.
 |
 | IKI KAPI birden var:
 |   [data-sekmeli]   — JS calisti, sekme modundayiz. JS kapaliyken dort
 |                      panel de gorunur ve HICBIRI animasyonlanmaz.
 |   [data-etkilesim] — kullanici GERCEKTEN sekme degistirdi. Ilk
 |                      yuklemede yok; sayfa yukleme koreografisi olmaz.
 |
 | Bitis durumu panelin DOGAL durumu: animasyon hic calismasa da panel
 | dogru gorunur.
 */
.bulucu-serit[data-sekmeli][data-etkilesim] .bulucu-panel:not([hidden]) {
  animation: bulucu-panel-gir var(--duration-base) var(--ease-out);
}

@keyframes bulucu-panel-gir {
  from { opacity: 0; transform: translateY(0.25rem); }
  to   { opacity: 1; transform: none; }
}

/*
 | Secilen sekmenin ikonu secim ANINI isaretler. Dekorasyon degil:
 | dokunmatikte hover yok ve kullanici hangi sekmeye bastigini
 | parmaginin altinda goremez; bu hareket eylemi geri bildirir.
 */
.bulucu-serit[data-sekmeli][data-etkilesim] .bulucu-sekme[aria-selected="true"] .ikon {
  animation: bulucu-ikon-vurgu var(--duration-base) var(--ease-out);
}

@keyframes bulucu-ikon-vurgu {
  from { transform: scale(0.85); }
  to   { transform: none; }
}

/* JS yokken paneller ayrisabilsin diye ince bir ayirici. */
.bulucu-panel + .bulucu-panel { margin-block-start: var(--space-3); }
.bulucu-serit[data-sekmeli] .bulucu-panel + .bulucu-panel { margin-block-start: 0; }

.bulucu-alanlar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: end;
}
.bulucu-alanlar .alan { flex: 1 1 12rem; margin: 0; }
.bulucu-alanlar .bulucu-alan-genis { flex: 2 1 20rem; }
.bulucu-alanlar .dugme { min-block-size: var(--dokunma-hedefi); }

/* ==========================================================================
   Lastik bulucu SAYFASI — uc yol karti (Revize m.8)
   ==========================================================================
   Sahibi "cok kotu, biraz ikonlar resimler" dedi. Yollar dun uc duz
   dugmeydi; artik ikonlu, aciklamali secim kartlari. Ikon kumesi
   anasayfa bulucu seridiyle AYNI (`<x-ikon>`) — iki yuzeyin birbirine
   benzememesi bu sayfanin en gorunur tutarsizligiydi.
   ========================================================================== */

.bulucu-yollar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-2);
}

.bulucu-yol {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-3);
  color: var(--text-default);
  text-decoration: none;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-panel);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.bulucu-yol:hover { border-color: var(--brand-blue-500); }
.bulucu-yol:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.bulucu-yol .ikon-kap { color: var(--text-link); }
.bulucu-yol-ad  { font-weight: 600; }
.bulucu-yol-not { font-size: var(--text-sm); color: var(--text-muted); }

/*
 | Sayac rozeti icerigi kadar. `.bulucu-yol` bir sutun flex ve varsayilan
 | `align-items: stretch`; montaj kanitlari ekranina bayi basina bekleyen
 | sayisini ekleyince "1" rozeti kartin BUTUN GENISLIGINE yayildi.
 | (18 Agustos 2026, tarayicida olculdu.)
 */
.bulucu-yol > .rozet { align-self: flex-start; }

/*
 | Secili yol: SOL KENARLIK DEGIL, tam cerceve + ters yuzey. Yan serit
 | kenarlik (`border-left: 3px`) DESIGN.md'de yasak ve yasagin sebebi
 | tam da bu: bir ogeyi "secili" gostermenin kolay ama ucuz yolu.
 */
.bulucu-yol-secili {
  color: var(--text-inverse);
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
}
.bulucu-yol-secili .ikon-kap    { color: var(--text-inverse); }
.bulucu-yol-secili .bulucu-yol-not { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   "Nasil olcerim" anlatimi — Revize m.8
   ==========================================================================
   Fotograf YOK ve bilerek yok (gerekce partial'in basinda). Yerine kesit
   cizimi ve kunyenin parcalara ayrilmis hali var.
   ========================================================================== */

.olcum-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  align-items: start;
}

.olcum-cizim { margin: 0; }

/*
 | Cizim `currentColor` kullaniyor; rengi buradan geliyor ve iki temada
 | da okunur. Ham renk kodu SVG'de de yok.
 */
.olcum-cizim svg {
  inline-size: 100%;
  block-size: auto;
  max-inline-size: 20rem;
  color: var(--text-muted);
}

.olcum-cizim figcaption { margin-block-start: var(--space-1); }

/*
 | Ornek kunye. Mono yuz artik gercek bir dosya (JetBrains Mono);
 | `slashed-zero` ve `tabular-nums` acikca yaziliyor, KESIR (`frac`)
 | asla — "120/70" yigilmis bir kesire donusur ve ebat okunamaz olur.
 */
.olcum-kunye {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
  font-variant-ligatures: none;
  letter-spacing: var(--track-tech-lg);
}

.olcum-parca {
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-control);
  background: var(--surface-muted);
}

.olcum-ayrac { color: var(--text-muted); }

.olcum-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.olcum-liste dt { margin: 0; }
.olcum-liste dd { margin: 0; color: var(--text-muted); }

.olcum-anahtar {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
  font-variant-ligatures: none;
}

@media (max-width: 720px) {
  /*
   | ⚠️ MOBIL BELIRTEC DEGERLERI BURADAN TASINDI — Tur 4, T3.
   |
   | Burada bir `:root` blogu vardi ve `--bulucu-bar-yuk` ile
   | `--hero-yukseklik`i eziyordu. Gerekcesi dogruydu (mobilde bar iki
   | satira cikiyor, videonun uzerine bindigi miktar da ayni oranda
   | buyumeli) ama YERI yanlisti: bilesen katmani belirtec TUKETIR,
   | TANIMLAMAZ. Ikisi de artik `tokens.css` icinde, taban tanimlarinin
   | hemen yaninda.
   */
  .bulucu-bar > .kap {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-block: var(--space-2);
  }

  .bulucu-serit-etiket { align-self: flex-start; }

  /*
   | 2x2 IZGARA, yatay kaydirma DEGIL. Kaydirilan sekme seridi ucuncu ve
   | dorduncu yolu ekranin disinda birakir; kullanici olmadiklarini
   | sanir. Dort yol da ayni anda gorunur.
   */
  .bulucu-sekmeler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-inline-start: 0;
  }

  /*
   | DIS YOK. Sarma varken hangi sekmenin panele "bagli" oldugu yalan
   | olurdu — ust satirdaki bir sekme panele degmiyor. Onun yerine tam
   | yuvarlatilmis dolu cip: ayni bilgi, dogru metafor.
   */
  .bulucu-sekme {
    justify-content: center;
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
  }
  .bulucu-sekme::after { content: none; }

  .bulucu-alanlar .alan,
  .bulucu-alanlar .dugme { flex: 1 1 100%; }

  /* Anlatim tek sutuna duser: cizim ustte, kunye cozumlemesi altta. */
  .olcum-duzen { grid-template-columns: 1fr; }
  .olcum-cizim svg { max-inline-size: 100%; }
}

/* ==========================================================================
   Video hero — tam genislik, metin ON PLANDA
   ==========================================================================
   Bu, "metin gorselin uzerine binmez" kuralinin BILINCLI istisnasidir.
   Kural kontrasti gorsele bagimli kilmamak icin vardi; burada bagimlilik
   PERDE ile kirildi:

     Perde = lacivert %72 opaklik. En kotu durumda (video tamamen BEYAZ)
     bilesik zemin koyu bir lacivert-griye oturur ve beyaz metinle
     yaklasik 8.5:1 verir. Yani video ne olursa olsun metin AA'yi (4.5)
     rahatca gecer. Olcum ThemeTest icinde kod olarak dogrulanir.

   Perde DUZ dolgudur, gradyan DEGIL — gradyan yasagi korunur.

   Katman sirasi: poster (LCP) -> video -> perde -> icerik -> durdurma
   dugmesi. Poster her zaman basilir; video dosyasi yoksa ekran bugunku
   haliyle calisir, hicbir sey kirilmaz.
   ========================================================================== */

/*
 | TAM GENISLIKTE VIDEO HERO.
 |
 | Onceki iki hâli de reddedildi: (1) butun gorselin uzerine %72 lacivert
 | perde — fotograf oluyordu; (2) solda opak panel + sagda gorsel — hero
 | 1180px'lik kabin icinde kaliyor, sag ve sol bombos duruyordu.
 |
 | Simdi hero `.kap` DISINDA duruyor ve ekranin iki kenarina degiyor.
 | Yardimci bir sinif gerekmedi: `<main>` dolgusuz ve `@yield('icerik')`
 | sarmalayicisiz oldugu icin `.kap`a girmemek yetiyor. `100vw` + negatif
 | margin hilesi BILEREK kullanilmadi — dikey kaydirma cubugu varken
 | yatay tasma yaratir.
 |
 | Yuvarlak kose YOK: ekran kenarina degen bir yuzeyde yanlis durur.
 */
.hero-video {
  position: relative;
  isolation: isolate;
  display: grid;

  /*
   | DOLGU SIFIR — VIDEONUN TAM EKRAN OLMASININ SARTI.
   |
   | `.hero-video` bir `<section>` ve dosyanin basindaki genel kural
   | `section { padding-block: var(--space-6) }` diyor: 48 piksel ust,
   | 48 piksel alt. `box-sizing: border-box` ile birlikte bu, 720
   | piksellik hero'nun ICERIK kutusunu 624'e dusuruyordu. Kalan 96
   | piksel ciplak `--surface-inverse` olarak goruniyordu — ustte ve
   | altta iki lacivert serit.
   |
   | Perde bunu YILLARDIR gizliyordu: bant zaten lacivertti, seritleri
   | yutuyordu. Perde 10 Agustos 2026'da kalkinca ortaya ciktilar.
   | "Mavi seritlerin" bir parcasi bu dolguydu.
   */
  padding-block: 0;

  /*
   | Tek satir, kabin tamami. `0` taban tasmayi onler: `1fr` tek basina
   | icerigi kucultmez, uzun bir baslik satiri buyutur ve hero tasardi.
   */
  grid-template-rows: minmax(0, 1fr);

  align-items: end;
  block-size: var(--hero-yukseklik);
  min-block-size: 30rem;
  overflow: hidden;
  background: var(--surface-inverse);
}

/* Poster ve video ayni hucreyi paylasir; yer kaymasi olmaz. */
.hero-video-katman { grid-area: 1 / 1; }

/*
 | KATMAN IZGARAYI TAMAMEN DOLDURUR.
 |
 | `.hero-video` bir grid ve `align-items: end` diyor (metin alta
 | yaslansin diye). O kural HER hucreye isliyordu, video katmanina da:
 | katman 720 piksellik hero'nun icinde 624 piksele dusuyor ve ustte
 | altta 48'er piksel ciplak `--surface-inverse` kaliyordu.
 |
 | Perde varken bu gorunmuyordu — bant zaten lacivertti, seridi
 | yutuyordu. Perde 10 Agustos'ta kalkinca iki lacivert cizgi ortaya
 | cikti; "mavi seritler" sikayetinin bir parcasi da buydu.
 |
 | `align-self: stretch` yalniz bu hucre icin kapsayicinin hizalamasini
 | eziyor: metin hâlâ altta, video tam ekran.
 */
.hero-video-katman { position: relative; align-self: stretch; block-size: 100%; }

.hero-video-katman picture,
.hero-video-katman img,
.hero-video-oynatici {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;

  /*
   | FARE OLAYLARINA KAPALI — video ve poster birer ZEMIN.
   |
   | Sag tiklandiginda tarayici "Basa al · Kontrolleri goster · Videoyu
   | farkli kaydet · Video adresini kopyala" menusunu aciyordu. Video
   | dekoratif bir zemin; kullaniciya bir oynatici sunmuyoruz, o menuyu
   | sunmak da anlamsiz.
   |
   | `pointer-events: none` ile tiklama ALTTAKI kapsayiciya geciyor ve
   | tarayici normal SAYFA menusunu aciyor (Geri, Yeniden yukle, Sayfa
   | kaynagi...). Menu engellenmiyor, DOGRU menu aciliyor —
   | `contextmenu` olayini iptal etmek kullanicidan tarayicisinin
   | islevini calmak olurdu.
   |
   | Bedeli yok: video `aria-hidden` ve `tabindex="-1"`, poster salt
   | gorsel. Durdurma dugmesi ayri bir oge ve tiklanabilirligini
   | koruyor.
   */
  pointer-events: none;

  /*
   | Kirpma merkezden biraz YUKARIDAN aliniyor: alt ucluk baslik bandinin
   | altinda kaliyor, konu orada bosa gitmesin. 1280x900'de yatayda
   | ~%12, 1920x830'da dikeyde ~%23 kirpilir.
   */
  object-position: center 42%;
}

/* Video yalniz JS onu hazir isaretleyince gorunur. */
.hero-video-oynatici { opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.hero-video[data-video-durum="oynuyor"] .hero-video-oynatici,
.hero-video[data-video-durum="duraklatildi"] .hero-video-oynatici { opacity: 1; }

/*
 | HERO METIN KUTUSU SILINDI (10 Agustos 2026).
 |
 | Uzun bir hikâyesi vardi: once tam ekran %72 perde, sonra sol opak
 | panel, sonra platolu gradyan, sonra smoothstep rampa. Her adim bir
 | oncekinin bedelini odemek icindi.
 |
 | Sahibin son karari hepsini gereksiz kildi: "yaziyi da kaldir knk,
 | dogru lastik hayat kurtarir yazisi". Ekranda baslik yoksa onu
 | okunur kilacak bir perdeye de, kutuya da, dolguya da gerek yok.
 |
 | `<h1>` sayfada DURUYOR ama `.gizli-erisilebilir` ile gizli — her
 | sayfanin bir basligi olmali (WCAG 1.3.1, arama motoru). Gizli bir
 | ogenin gorsel stile ihtiyaci olmadigi icin buradaki kirk satir da
 | onunla birlikte gitti.
 */

/*
 | WCAG 2.2.2 Pause/Stop/Hide: 5 saniyeden uzun otomatik oynayan icerik
 | durdurulabilir OLMAK ZORUNDA. Dugme JS tarafindan acilir; video yoksa
 | gizli kalir cunku durduracak bir sey yoktur.
 */
/*
 | DURDURMA DUGMESI DURURKEN GORUNMEZ.
 |
 | Onceki hâli sag ustte dolgulu bir haptı ve ilk ekrandaki EN
 | dugme-gibi sey oydu: gercek eylem olan "Goster"den daha cok dikkat
 | cekiyordu. Ustelik sag kenari 1401 pikseldeydi — `.kap` 1303'te
 | bitiyor, yani dugme izgaranin 98 piksel DISINA tasmisti. Sayfanin
 | tek hizasiz ogesiydi.
 |
 | SILINMEDI, SAKLANDI. WCAG 2.2.2 otomatik oynayan icerigin
 | durdurulabilir olmasini SART kosuyor ve bu bir AA maddesi (§14,
 | Blok 23 canli cikis kapisi). Kural kontrolun VAR OLMASINI ister,
 | surekli GORUNMESINI degil:
 |
 |   - Klavyeyle sekmelendiginde belirir (`:focus-visible`).
 |   - Video duraklatilmissa GORUNUR kalir; yoksa yeniden baslatmanin
 |     yolu olmazdi.
 |   - Ekran okuyucu her zaman gorur.
 |
 | GIZLEME YONTEMI: ATLAMA BAGLANTISI DESENI, `visibility` DEGIL.
 |
 | Once `opacity: 0; visibility: hidden` yazilmisti ve yorumda "odak
 | sirasini korur" deniyordu. YANLISTI: `visibility: hidden` da tıpkı
 | `display: none` gibi ogeyi odak sirasindan CIKARIR. Tarayicida
 | olculdu — dugmeye ne fareyle ne klavyeyle ulasilabiliyordu, yani
 | kontrol kagit uzerinde vardi, gercekte yoktu.
 |
 | Dogrusu `.gizli-erisilebilir`in kullandigi teknik: oge 1x1 piksele
 | kirpilir ama GORUNUR kalir, dolayisiyla odaklanabilir. Odaklaninca
 | gercek olcusune doner.
 */
.hero-video-durdur {
  position: absolute;
  inset-block-start: var(--space-8);

  /*
   | `.kap` ILE AYNI RAY. Sabit `--space-3` gorunum alaninin kenarina
   | yapisiyordu; genis ekranda kap 1303'te biterken dugme 1401'e
   | gidiyordu. `max()` dar ekranda eski davranisi koruyor.
   */
  inset-inline-end: max(var(--space-3), calc((100% - var(--kap-genislik)) / 2 + var(--space-3)));

  z-index: var(--z-dropdown);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;

  /* Gorsel olarak yok, odak sirasinda VAR. */
  inline-size: 1px; block-size: 1px;
  padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 | HOVER TETIKLEYICISI KALKTI (10 Agustos 2026).
 |
 | Dugme hero'nun uzerinden her fare gecisinde belirip kayboluyordu;
 | sahibin sozu: "bu ekranda gelip gidiyor, bu olmasin". Yanip sonen
 | bir kontrol, surekli duran bir kontrolden daha rahatsiz edici.
 |
 | Geriye IKI yol kaldi ve ikisi de titremiyor:
 |   :focus-visible   klavyeyle sekmelendiginde belirir
 |   duraklatildi     video duruyorsa gorunur kalir (yeniden baslatma)
 |
 | Fare kullanicisi dugmeyi ARTIK GOREMEZ. Bu WCAG 2.2.2 acisindan
 | zayif bir nokta ve DEVAM.md'nin canli cikis listesinde duruyor:
 | hareketten rahatsiz olan bir fare kullanicisinin videoyu durdurma
 | yolu kalmadi. Kapatmanin dogru yolu catiyi seyreltip kucuk, sabit
 | (yanip sonmeyen) bir kontrol koymak olur.
 */
.hero-video-durdur:focus-visible,
.hero-video[data-video-durum="duraklatildi"] .hero-video-durdur {
  /* Gercek olcusune doner — kirpma kalkar, dolgu ve kenarlik gelir. */
  inline-size: auto; block-size: auto;
  min-block-size: var(--dokunma-hedefi); min-inline-size: var(--dokunma-hedefi);
  padding-inline: var(--space-2);
  border: 1px solid var(--text-on-inverse-muted);
  overflow: visible;
  clip-path: none;
}

.hero-video-durdur:hover { border-color: var(--text-inverse); }
.hero-video-durdur:focus-visible { box-shadow: var(--focus-ring); outline: none; }

@media (max-width: 720px) {
  /*
   | YUKSEKLIK VE ALT DOLGU BURADA YAZILMIYOR — ikisi de token'dan
   | geliyor ve mobil degerleri yukaridaki bulucu blogunda tanimli.
   |
   | Onceki hâli `block-size: min(78svh, 34rem)` ve 64px alt dolgu
   | diyordu. Bar mobilde 8rem'e cikinca baslikin IKINCI SATIRI barin
   | altinda kaldi: dolgu barin yuksekligini bilmiyordu. Tek degiskene
   | baglanan bir dolgu bunu bir daha yasatmaz.
   |
   | Kalan tek kural taban yukseklik: dar ve kisa ekranda 68svh
   | 30rem'in altina duser ve hero eziliyordu.
   */
  .hero-video { min-block-size: 26rem; }

  /*
   | ⛔ VIDEO DUGMESI CATININ ICINE DUSUYORDU — Tur 4, mobil tarama.
   |
   | 390px'te olculdu:
   |     dugme  229–366 / 64–108
   |     "Bayi basvurusu" linki  172–269 / 68–92
   | Dugme z-index'i daha yuksek oldugu icin linkin USTUNU kapatiyordu;
   | ekran goruntusunde iki metin ust uste biniyor.
   |
   | SEBEP: `.site-ustluk` MUTLAK KONUMLU ve hero'nun uzerine biniyor
   | (seffaf cati, kasitli tasarim). Hero 0'dan basliyor, dugme de
   | hero'nun tepesinden `--space-8` (64px) asagida. Genis ekranda cati
   | tek satir oldugu icin sorun yok; mobilde cati UC SATIR ve 151px.
   |
   | ⚠️ BU DEGER CATININ YUKSEKLIGINE BAGLI ve CSS o yuksekligi
   | okuyamiyor. Cati mobilde bir satir daha buyurse burasi yeniden
   | ayarlanmali — sayinin nereden geldigi bu yuzden yaziyor.
   | Olculen 151px'in ustune bir nefes: 168px.
   */
  .hero-video-durdur { inset-block-start: 10.5rem; }
}

.hero-gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Teknoloji kartlari — anasayfa
   ==========================================================================
   Bu kurallar "surus tipine gore secin" aile kartlarindan DEVRALINDI ve
   YENIDEN ADLANDIRILDI. Gecmisi burada duruyor cunku ikisi ayni yapi:
   sabit en-boy gorsel kutusu + govde. Sifirdan yazmak ayni kirk satiri
   ikinci kez yazmak olurdu; ad ise DEGISMEK ZORUNDAYDI — olu bir kavrami
   CSS'te yasatmak, silinen bolumu yarim silmek demektir.

   BIR SEY DUSTU: `.aile-karti-tum` (lacivert "Butun lastikler" karosu).
   Karsiligi olan bolum yok; izgara artik uc kartla tamamlaniyor.

   Kart TIKLANABILIR DEGIL: `<article>`, `<a>` degil. Kaydin kendi adresi
   yok ve tiklanan ama hicbir yere gitmeyen bir kart yalan soylerdi.
   ========================================================================== */

/*
 | 19rem taban: genis ekranda UC sutun cikar. 15rem'de dort sutun
 | oluyordu ve gorseller kucuk kaliyordu.
 */
.teknoloji-izgara {
  display: grid;
  /* min(): 19rem = 304px, 320px ekranda kap dolgusuyla tasiyordu (1.4.10). */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-3);
}

/*
 | ⛔ YUZEY TARIFI KALDIRILDI — 21 Agustos 2026, tema turu.
 |
 | Burada `background` + `border` + `border-radius` yeniden yaziliyordu ve
 | YARICAP FARKLIYDI: `--radius-marketing` (14px), oysa `.kart`
 | `--radius-panel` (10px). Ayni sayfada, ust uste, 4px arayla IKI KART
 | AILESI. "Yuzey dili iki ayri yerden geliyor" cumlesinin olculebilir
 | hali tam olarak buydu.
 |
 | Iki AYRI sozlesme birbirine karismisti:
 |   `.kart`            YUZEY sozlesmesi     (zemin, kenarlik, yaricap)
 |   `.kart-baglantili` ETKILESIM sozlesmesi (tiklanabilirlik)
 | `kart-urun` ikisini de tasiyor; `teknoloji-karti` hicbirini tasimiyordu
 | ve yuzeyi bastan taniyordu. Artik yuzeyi `.kart`tan aliyor ve
 | TIKLANAMAZ kalmaya devam ediyor — dogru ayrim buydu.
 |
 | ⚠️ `padding: 0` ZORUNLU: `.kart` 16px dolgu veriyor, bu kart ise gorseli
 | kenardan kenara basiyor.
 */
.teknoloji-karti {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/*
 | Sabit en-boy: gorsel yuklenmeden de yer kaplar (yer kaymasi yok).
 |
 | ⚠️ 16/10 -> 4/3, Tur 4. Gerekce kaynak gorsellerin degismesi:
 | teknoloji cekimleri artik ICERIGINE KIRPILMIS (`-v02`) ve kare
 | geliyor. 16/10'luk bir kutuda kare bir goruntu `contain` ile
 | YUKSEKLIGE sigar ve iki yaninda genis bosluk birakirdi — urun yine
 | kucuk gorunurdu. 4/3 o boslugu kapatiyor.
 |
 | Olculdu: kutu 361px genisliginde. 16/10 -> 225px yuksek, kare urun
 | 225px. 4/3 -> 271px, kare urun 271px. %20 daha buyuk urun, ayni
 | dosya.
 */
.teknoloji-karti-gorsel {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-muted);

  /*
   | ⛔ KIRPMA BURADA OLMAK ZORUNDA — 23 Agustos 2026.
   |
   | Sahibi iki ekran goruntusunu yan yana koyup gosterdi: imlec kartin
   | ustune gelince gorsel buyuyor ve KUTUSUNDAN TASIYOR — ustte
   | cercevenin yuvarlak kosesini kesiyor, altta lacivert govdenin
   | icine giriyor.
   |
   | Sebep: buyume `.teknoloji-karti-gorsel img`e veriliyor (scale 1.04)
   | ama kutu `overflow: visible` idi. Kirpma tek katman yukaridan,
   | `.teknoloji-karti`nin `overflow: hidden`indan geliyordu; o da kartin
   | TAMAMINI kirpiyor, gorsel kutusunu degil. Yani buyuyen gorselin
   | govdeye tasan kismi kartin icinde kaldigi surece gorunuyordu.
   |
   | ⚠️ `border-radius` DA GEREKLI: kutu kartin ust kosesinde
   | duruyor; kirpma dikdortgen olsaydi buyuyen gorsel yuvarlak koseyi
   | kare gosterirdi.
   */
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

/*
 | ⛔ MUTLAK KONUM ZORUNLU — `height: 100%` BU KUTUDA CALISMIYOR.
 |
 | Kutunun yuksekligi `aspect-ratio`dan geliyor, yani BELIRSIZ bir
 | yukseklik. `height: 100%` belirsiz bir yukseklige gore cozulemez ve
 | tarayici onu `auto` sayiyor; goruntu kendi ic oranini kullaniyor ve
 | KUTUYU ITIYOR.
 |
 | Tur 4'te ekranda goruldu ve olculdu: 361px genislikte kutu 271px
 | olmaliydi;
 |     kare gorsel (604x604)   -> kutu 359px'e cikti   (88px fazla)
 |     yatay gorsel (2000x1200)-> kutu 269px'te kaldi
 | Sonuc: uc kartin basliklari 571 / 481 / 571 — ortadaki 90px yukarida.
 |
 | ⚠️ ESKIDEN NEDEN GORUNMUYORDU: butun cekimler 1200x750 (16:10) idi ve
 | kutu da 16/10'du. Oranlar birebir tuttugu icin itme sifir cikiyordu.
 | Kural bastan kirilgandi; yalnizca veri onu gizliyordu.
 |
 | Mutlak konum goruntuyu akistan cikariyor: artik kutuyu itemiyor ve
 | oran KAYNAKTAN BAGIMSIZ tutuyor.
 */
.teknoloji-karti-gorsel img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;

  /*
   | `contain`, `cover` DEGIL. Studyo cekimlerinde lastigin tamami
   | karede duruyor; `cover` sirti ya da yanagi keser ve urunu yanlis
   | tanitirdi. Kesit fotografinda da kirpma teknik icerigi yer.
   */
  object-fit: contain;
}

.teknoloji-karti-govde {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);

  /*
   | ⚠️ `flex: 1` OLMADAN KAYNAK SATIRI KART DIBINE OTURMUYOR.
   |
   | Kaynak satirindaki `margin-block-start: auto` yalnizca ICINDE
   | oldugu kutunun bos alanini yiyebilir. Govde kartin kalan
   | yuksekligini doldurmayinca "bos alan" diye bir sey kalmiyor ve
   | auto hicbir sey yapmiyor.
   |
   | Olculdu: basliklar hizalandi (444) ama kaynaklar 565 / 565 / 538 —
   | ozeti kisa olan kart 27px yukarida kaliyordu.
   */
  flex: 1;
}

.teknoloji-karti-govde h3 { margin: 0; font-size: var(--text-lg); }
.teknoloji-karti-govde p  { margin: 0; color: var(--text-muted); }


/*
| --- Gorseli olmayan kart — 15 Agustos 2026 duzeltmesi -------------------
|
| Sahibi ekrani gosterdi: uc kartin ortadakinde gorsel yok ve kart
| BOZUK gorunuyordu. Sebep gorselin yoklugu DEGIL, HIZASIZLIK: iki
| kartin metni asagida (ustte gorsel var), ortadakinin metni yukarida.
| Yan yana duran uc kartta bu, "yuklenmedi" izlenimi veriyor.
|
| ⛔ BOS GORSEL CERCEVESI KONMADI ve konmayacak — kartin icindeki kural
| yerinde duruyor: bos bir cerceve "burada bir sey olmaliydi" der ve
| hicbir sey dememekten kotudur. Degisen sey cerceve degil HIZA.
|
| Govde en alta itiliyor: uc kartin metni ayni yerden basliyor, ustteki
| bosluk sessiz bir bosluk oluyor — kirik bir kutu degil.
|
| ⚠️ BU BIR GORUNUM YAMASI, ICERIK EKSIGININ COZUMU DEGIL. O kayda
| gorsel atanmasi ayri bir is ve panelden yapiliyor (Kanit ekrani).
|
| --- YAMA KALKTI — Tur 4, 16 Agustos 2026 -------------------------------
|
| Yorumun kendisi "icerik eksiginin cozumu degil" diyordu ve haklıydı.
| Icerik eksigi KAPANDI: uc kaydin ucune de gorsel atandi (ortadakine
| kesit fotografi, otekilere kirpilmis `-v02` cekimler).
|
| ⛔ YAMA ARTIK ZARARLIYDI. Govdeyi kartin dibine itmek, ozeti KISA olan
| kartin basligini asagi kaydiriyordu. Olculdu: basliklar 486 / 486 /
| 512 — ucuncu kart 26px kacikti. Yani gorsel bosluguna yazilmis bir
| yama, gorsel geldikten sonra BASKA bir hizasizlik uretiyordu.
|
| Hiza artik iki uctan birden kuruluyor: basliklar gorselin hemen
| altindan (yama olmadan), kaynak satirlari da kart dibinden
| (`.teknoloji-karti-kaynak` uzerindeki `margin-block-start: auto`).
*/

/* ==========================================================================
   Musteri yorumlari — anasayfa, en alt
   ==========================================================================
   TEK YORUMDA KARUSEL YOK. Hem yalan (hacim ima eder) hem islevsiz.
   Depoda ayni karar zaten var: `.bayi-serit:has(img:only-child)`.

   Izgara BREAKPOINT'SIZ iki durumu birden cozuyor:
     1 kayit  -> kart 46rem'de durur ve ORTALANIR (kasitli bir "one cikan
                 alinti" gorunumu)
     2-3      -> normal izgara
   `justify-items: center` + kart uzerinde `max-inline-size`. JS yok,
   `:has()` yok, medya sorgusu yok.
   ========================================================================== */

.yorum-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-3);
  justify-items: center;
}

.yorum-karti {
  inline-size: 100%;
  max-inline-size: 46rem;
  margin: 0;
}

/*
 | TEK YORUM KART DEGIL, ALINTIDIR.
 |
 | Bir kayit varken kenarlikli kart "listenin tek elemani" gibi duruyor
 | ve azligi vurguluyordu: baslik + alt baslik + cerceve, tek bir cumle
 | icin fazla mobilya. Kabuk kalkinca ayni cumle SECILMIS BIR SOZ gibi
 | okunuyor — bolumun giris metni zaten "secilmis yorumlardir" diyor.
 |
 | `:only-child`, `:has()` DEGIL: sarmalayiciya bakmaya gerek yok,
 | kartin kendisi tek cocuk olup olmadigini biliyor. Iki ve uzeri
 | kayitta kural hic devreye girmez ve normal izgara geri gelir.
 */
/*
 | ⛔ SECICI IZGARAYA KAPSANDI — 16 Agustos 2026, ekranda goruldu.
 |
 | Kural `.yorum-karti:only-child` idi ve niyeti dogruydu: IZGARADA tek
 | yorum varsa kart kabugu kalkip alintiya donusuyordu.
 |
 | Anasayfa seride gecince kural HER KARTA vurdu: seritte her kart kendi
 | `.yorum-serit-oge` sarmalayicisinin TEK COCUGU. Sonuc, on iki tane
 | kabugu soyulmus, ortalanmis, buyuk puntolu "one cikan alinti" — yani
 | serit kart gibi degil, ust uste binmis alintilar gibi goruniyordu.
 |
 | ⚠️ SECICININ KENDI YORUMU "sarmalayiciya bakmaya gerek yok" diyordu.
 | O varsayim tek bir duzen varken dogruydu; ikinci duzen gelince
 | kirildi. Artik kapsam ACIKCA yaziliyor.
 */
.yorum-izgara > .yorum-karti:only-child {
  max-inline-size: 52rem;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: center;
}

.yorum-izgara > .yorum-karti:only-child .yorum-puan { justify-content: center; }

.yorum-izgara > .yorum-karti:only-child blockquote {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.yorum-karti-gorsel { margin-block-end: var(--space-2); }

.yorum-karti-gorsel img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-control);
}

.yorum-puan {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}

/*
 | YILDIZ RENGI GRAFIT. Altin, beyaz zeminde 2,80:1 ile 1.4.11'i
 | gecmiyor ve ayrica PRODUCT.md'nin birinci anti-referansinin en
 | taninan isareti. Grafit 11,97:1.
 */
.yorum-yildizlar {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--text-default);
}

.yorum-yildizlar .ikon { inline-size: var(--ikon-sm); block-size: var(--ikon-sm); }

/* Puan METNI gizlenmiyor: yildizlar fazlalik, metin asil kanal. */
.yorum-puan-metin { font-size: var(--text-sm); color: var(--text-muted); }

/*
 | `white-space: pre-line`, `nl2br` DEGIL. Satir sonu bir SUNUM
 | tercihi; veritabanina `<br>` yazmak metni isaretlemeye baglar ve
 | ayni kayit bir e-postada ya da CSV'de bozuk cikar.
 */
/*
 | ⚠️ `--leading-relaxed` diye bir token YOK (olcek: hero, display,
 | tight, snug, body, caps). Satir yuksekligi bugune kadar govde
 | degerini MIRAS ALIYORDU; bildirim hesaplama aninda gecersizdi.
 | `--leading-body` (1.55) zaten dogru deger: alinti 18px ve govde
 | ritmini korumasi gerekiyor. 12 Agustos 2026'da `ThemeTest`'in yeni
 | token taramasi yakaladi.
 */
.yorum-karti blockquote {
  margin: 0;
  white-space: pre-line;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.yorum-karti figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.yorum-karti figcaption .not { display: block; margin-block-start: 0.25rem; }

/* ==========================================================================
   ADIMLAR BOLUMU SILINDI — Tur 4, olu CSS temizligi.
   --------------------------------------------------------------------------
   Bolumun tamami olcumle olu cikti — .adimlar, .adim, .adim-no,
   .adim h3, .adim p ve .adim-kanit: hicbiri isaretlemede TEK BASINA
   gecmiyor. Anasayfadaki serit zaten silinmisti (asagidaki eski nota
   bak); kurallari geride kalmisti.

   ⚠️ .adim-ozet KARISTIRILMASIN: o AYRI bir sinif, sepet ve randevu
   ekranlarinda bes yerde kullaniliyor ve bambaska bir yerde tanimli.

   ⚠️ OLCUM BIR KEZ YANILDI: tarayicinin kelime-siniri deseni
   class="adim-ozet" icindeki "adim" parcasina da esliyor ve .adim
   sinifini "kullaniliyor" gosteriyordu. Tam sinif ADI ile sayinca 0
   cikti — bir sinifin olu oldugunu, ADININ HIC GECMEMESIYLE degil
   TEK BASINA GECMEMESIYLE olcmek gerekiyor.
   ========================================================================== */

/* ==========================================================================
   Urun kunyesi — "urunun kendi teknik icerigi doku olur" (DESIGN.md)
   Bu siniflar Blade'de KULLANILIYORDU ama tanimli DEGILDI.
   ========================================================================== */

.ebat {
  display: inline-block;
  padding: 0.125rem var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-default);
  background: var(--surface-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

.fiyat { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-default); }

/*
 | Fiyati olmayan urun: SIFIR YAZILMAZ. Ton farki tek basina anlam
 | tasimasin diye metin de acikca farkli.
 */
.fiyat-belirsiz { font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); }

/* ==========================================================================
   Urun detay duzeni — §6.5
   --------------------------------------------------------------------------
   Sag sutunda URUN FOTOGRAFI YOKTUR ve olmayacaktir: elimizde her SKU'nun
   kendi fotografi yok, ailenin segment fotografini koymak da o lastigi
   YANLIS tanitirdi. Yerine "urunun kendi teknik icerigi doku olur"
   (DESIGN.md) ilkesi uygulaniyor: ebat lacivert bir veri panelinde,
   buyuk mono tipografiyle.
   ========================================================================== */

.urun-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ==========================================================================
   Urun galerisi — Revize m.4
   ==========================================================================
   JS YOK. `scroll-snap` parmakla, trackpad'le ve klavyeyle calisir; ok
   dugmesi eklemek sikilastirilmis CSP altinda ayri bir betik dosyasi
   demekti. Ayni desen bayi vitrininde (`.bayi-serit`) zaten kullaniliyor;
   fark su: lastik cekimleri SEFFAF DOLGULU ve `cover` sirti ya da yanagi
   keserdi, bu yuzden `contain`.
   ========================================================================== */

/*
 | ⛔ GENISLIK SINIRLANIR, YUKSEKLIK SABITLENMEZ — 25 Agustos 2026.
 |
 | Olculen kusur: kutu 623x320 (oran 1.95), kaynak gorseller 1158x1158
 | (oran 1.00). `contain` ile lastik 320x320'ye siginca kutunun %49'u
 | BOS kaliyordu — ustelik lastik cekimlerinin zemini acik, kutunun
 | zemini de `--surface-muted`, yani acik ustune acik. Sonuc: satin
 | alma kararinin verildigi sayfanin ana gorseli ilk bakista BOS KUTU
 | gibi duruyordu. Ekranda goruldu, sonra olculdu.
 |
 | Diskteki 35 urun gorselinin 33'u KARE (kalan ikisi 1.6 ve 1.33 ve
 | urun cekimi degil). Dogru kutu bu yuzden kare.
 |
 | ⚠️ YUKSEKLIGE TAVAN KONMADI, GENISLIGE KONDU. Tavan yuksekligeydi
 | kutu yine dikdortgen kalir ve bosluk sadece kucuUlurdu (623x416'da
 | hala %33). Genislik sinirlaninca kare gercekten kare oluyor ve
 | bosluk SIFIRLANIYOR. 26rem secildi cunku daha genisi fiyati ve
 | "Sepete ekle"yi ilk ekranin altina itiyordu.
 */
.urun-galeri {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin-block-end: var(--space-3);
  max-inline-size: min(100%, 26rem);
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
  scrollbar-width: thin;
}

.urun-galeri img {
  flex: 0 0 100%;
  inline-size: 100%;
  /* Kutu kaynagin oranini alir; sabit `block-size: 20rem` idi ve
     kareyi dikdortgene zorluyordu. Gerekce bir ustteki blokta. */
  aspect-ratio: 1 / 1;
  block-size: auto;
  object-fit: contain;
  scroll-snap-align: center;
  border-radius: var(--radius-panel);
}

/* Tek karede kaydirilacak bir sey yok; kaydirma ipucu vermek yaniltir. */
.urun-galeri:has(img:only-child) { scroll-snap-type: none; }

/* Serit `tabindex="0"` — klavyeyle odaklanip ok tuslariyla geziliyor. */
.urun-galeri:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* ==========================================================================
   Takim listesi — "bu olcu su takimda var"
   ==========================================================================
   Takimin kendi sayfasi YOK; baglanti esin urun sayfasina gidiyor.
   ========================================================================== */

.takim-listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.takim-listesi li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.takim-ad { font-weight: 600; }

/* Ebat cipi zaten cerceveli; alti cizgi ikinci bir cerceve gibi durur. */
.takim-listesi a { text-decoration: none; }
.takim-listesi a:hover .ebat { border-color: var(--brand-blue-500); }
.takim-listesi a:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-control); }

.kunye-paneli {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--text-inverse);
  background: var(--surface-inverse);
  border-radius: var(--radius-marketing);
}

/* Ebat sayfanin en buyuk veri ogesidir — urunun kimligi budur. */
/*
 | URUN KUNYESINDEKI EBAT — MONO'DAN BASLIK AILESINE tasindi.
 |
 | Bu, sayfanin en buyuk harfleri (`--text-hero`, 52px'e kadar) ve
 | 11 Agustos'a kadar CONSOLAS ile ciziliyordu: `--font-mono` hicbir
 | dosyaya bagli degildi.
 |
 | Mono'ya geri baglamak yerine Archivo secildi, cunku olculdu:
 | Archivo'nun rakamlari ZATEN DUBLEKS — 1000 birimlik em'de yayilma
 | 2 birim. Yani sutun hizasi kaybolmuyor. Buna karsilik 52px'lik bir
 | mono "terminal" gibi okunur ve marka sesi tasimaz. Mono gercekten
 | sabit genislik gereken kucuk boyda kaliyor: SKU, DOT, seri no.
 */
/*
 | ⛔ `--text-hero` DEGIL `--text-display` — 21 Agustos 2026.
 |
 | Bu bir VERI PLAKASI (lastik ebadi), bir baslik degil: 700 kalmak
 | ZORUNDA ve buyumemeli. `--text-hero` tavani 52 -> 72px'e ciktigi icin
 | paylasim koptu; plaka kendi basamaginda birakildi.
 */
.kunye-olcu {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-hero);
  letter-spacing: var(--track-tech-lg);
  font-variant-numeric: tabular-nums slashed-zero lining-nums;
}

.kunye-alt { margin: 0; color: var(--text-on-inverse-muted); }

.kunye-satirlar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
}

.kunye-satirlar dt { color: var(--text-on-inverse-muted); font-size: var(--text-sm); }
.kunye-satirlar dd { margin: 0; font-weight: 600; }

/* ==========================================================================
   Sayfalama — §6.6
   Ok SVG'si YOK; yon kelimeyle yaziliyor. Anlam ikona bagli degil.
   ========================================================================== */

.sayfalama {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.sayfalama-baglanti {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-2);
  color: var(--text-default);
  text-decoration: none;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.sayfalama-baglanti:hover { border-color: var(--border-strong); }
.sayfalama-baglanti:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Bulunulan sayfa: dolgu + aria-current. Renk TEK BASINA anlam tasimasin
   diye isaret hem gorsel hem anlamsal. */
.sayfalama-aktif {
  color: var(--text-inverse);
  background: var(--action-secondary);
  border-color: var(--action-secondary);
}

.sayfalama-kapali { color: var(--text-muted); background: var(--surface-muted); }
.sayfalama-bosluk { padding: 0 var(--space-1); color: var(--text-muted); }

/*
 | Mobilde 44px — Tur 2, madde 17.
 |
 | ⚠️ KURAL BURADA, mobil ergonomi bolumunde DEGIL: taban kural
 | (`min-height: 2.25rem`) bu satirlarda ve ayni ozgullukte. Yukariya
 | yazilan kopya, sonra gelen taban tarafindan eziliyordu — olculdu,
 | 36px kaliyordu.
 |
 | Yanlis sayfaya basmak, uzun bir listede yeri kaybetmek demek.
 */
@media (max-width: 720px) {
  .sayfalama-baglanti { min-height: var(--dokunma-hedefi); }
}

/* ==========================================================================
   Giris kabugu — auth ailesi. §4.1
   --------------------------------------------------------------------------
   Dort alanin girisi, kayit, iki adimli dogrulama ve parola ekranlari
   AYNI kabugu kullanir: marka kilidi + dar sutun + dikey ortalama.
   Kimligi tasiyan sey tipografik markadir; gorsel, gradyan ve dis
   kaynak YOKTUR. Gezinti de yoktur — kullanicinin tek isi giris.
   ========================================================================== */

/*
 | 100vh DEGIL 100svh: mobil tarayicida adres cubugu acikken vh tasar,
 | svh gorunen alani olcer.
 */
.giris-kabuk {
  min-height: 100svh;
  display: grid;

  /*
   | ⚠️ SUTUN ACIKCA BILDIRILIYOR — 18 Agustos 2026 (kapanis taramasi).
   |
   | Once sutun bildirilmemisti: ortuk sutun `auto` boyutlanir ve izgara
   | cocugunun varsayilan `min-inline-size: auto` degeriyle birlesince
   | hucre ICERIGININ ALTINA INEMEZ. 296px'lik ekranda kayit ekrani
   | 362px'e kilitleniyor ve SAYFA yatay kayiyordu (375px'te 6px).
   |
   | `minmax(0, 1fr)` sutunu tam kap genisligine sabitliyor; icerik artik
   | sarabiliyor. `justify-items: center` etkilenmiyor.
   */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  padding-block: var(--space-6);
}

/* ==========================================================================
   Blog — yazi karti ve video (Revize m.23-38, Faz 5.3)
   ==========================================================================
   Kart urun kartiyla AYNI yayilan baglanti desenini kullanir: kartin
   tamami tiklanabilir, erisilebilir ad yalniz baslik metni, kart basina
   tek sekme duragi. ⛔ Kart icinde ikinci bir baglanti olamaz.
   ========================================================================== */

.kart-yazi {
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kart-yazi-kapak {
  aspect-ratio: 16 / 9;
  background: var(--surface-muted);
  /*
   | ⚠️ Kirpma KABIN isi. Gorsel oranini kendi uzerinde tasiyor (asagida)
   | ama yuvarlatilmis kose ve tasma guvencesi burada duruyor.
   */
  overflow: hidden;
}

/*
| ⛔ ORAN GORSELIN USTUNDE, `block-size: 100%` DEGIL — ve bu bir kusur
| duzeltmesi.
|
| Eskiden `block-size: 100%` yaziliydi. Yuzde yukseklik, kabin yuksekligi
| ACIKCA verilmisse cozulur; buradaki kabin yuksekligi ise `aspect-ratio`
| ile TURETILIYOR. Yuzde cozulemeyince `auto`ya duser, gorsel kendi
| oranini dayatir ve KAP ONA GORE BUYUR.
|
| 24 Agustos 2026'da olculdu — ayni satirdaki kart kapaklari:
|     151px · 158px · 185px · 186px · 410px
| 410px olan dikey bir fotograftı (637x955) ve izgarayi tek basina
| bozuyordu.
|
| ⚠️ KUSUR ONCEDEN DE VARDI, GORUNMUYORDU: hicbir yazinin kapagi yoktu,
| yani kap her zaman BOS bir kutuydu ve oran serbestce tutuyordu. Gorseller
| eklenince ortaya cikti.
*/
.kart-yazi-kapak img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.kart-yazi-govde {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2);
}

.kart-yazi-ust {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-link);
}

.kart-yazi-baslik { margin: 0; font-size: var(--text-lg); }
/*
 | `:focus-visible` 25 Agustos 2026'da eklendi: kural yalnizca `:hover`
 | diyordu, yani cizgiyi FARE kullanicisi geri aliyor, klavye kullanicisi
 | alamiyordu. Kardes kurallar (`.kart :is(h2,h3,h4) a`, kapsayici
 | muafiyet listesi) ikisini de tasiyor; burasi tek istisnaydi.
 */
.kart-yazi-baslik a { color: var(--text-default); text-decoration: none; }
.kart-yazi-baslik a:hover,
.kart-yazi-baslik a:focus-visible { text-decoration-line: underline; }

/* Yayilan katman — gerekcesi `.kart-urun`da yazili. */
.kart-yazi-baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
}

/* Odak halkasi ICE ciziliyor: kart `overflow: hidden` tasiyor. */
.kart-yazi-baslik a:focus-visible { box-shadow: none; }
.kart-yazi-baslik a:focus-visible::after { box-shadow: var(--focus-ring-ic); }

.kart-yazi-alt {
  margin: auto 0 0;
  padding-block-start: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.yazi-kapak { margin: var(--space-3) 0 0; }

/*
 | ⛔ KAPAK ORANI SABIT — 26 Agustos 2026.
 |
 | Kural yalniz genislik+yaricap veriyordu, oran YOKTU. Kutuphanede
 | 637x955 PORTRE gorsel var (`blog/cift-iz-toprak-yol.webp`) — ayni
 | dosya 24 Agustos'ta liste kartlarinda 410px'lik kutuyu tasirmisti ve
 | cozum orada `aspect-ratio: 16/9 + cover` olmustu (bkz. yukarida
 | `.kart-yazi-kapak img`). Okuma sayfasinda ayni gorsel `kap-dar`in
 | 688px ic genisliginde ~1030px boy alir: baslik + kapak ilk IKI ekrani
 | doldurur, metnin ilk paragrafi hic gorunmez.
 |
 | Ayni karar okuma sayfasina tasiniyor; liste ve makale ayni kadraji
 | gosteriyor.
 */
.yazi-kapak img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  block-size: auto;
  border-radius: var(--radius-panel);
}

/*
|--------------------------------------------------------------------------
| YAZI ICI FIGUR — gorsel + KAYNAK
|--------------------------------------------------------------------------
|
| Sahibi 24 Agustos 2026'da soyle dedi: *"icerde olan bilgileri
| resimlendirmemiz lazim sekillendirmemiz lazim cirkin gozukuyor."*
| Olculdu: 15 yazinin hicbirinde kapak yoktu, govdede sifir gorsel vardi.
|
| ⛔ `figcaption` GIZLENEMEZ VE KUCULTULEREK YOK EDILEMEZ. Icinde yayin
| adi geciyor ve bu, fotografi kullanma karariyla birlikte gelen yukumluluk.
| `--text-xs` taban; `--text-2xs` (12px) bu satiri "okunmasin diye
| kucultulmus" hale getirirdi.
*/
.yazi-figur {
  margin-block: var(--space-4);
  margin-inline: 0;
}

.yazi-figur img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-panel);
  /*
   | ⚠️ `display: block` SUS DEGIL. `<img>` satir ici oldugu icin altinda
   | satir kutusunun ininti payi kadar bosluk kalir; `figcaption` o
   | boslugun ardindan baslar ve gorselden kopuk gorunur.
   */
  display: block;
}

.yazi-figur figcaption {
  margin-block-start: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/*
|--------------------------------------------------------------------------
| YAZI ICI ALINTI
|--------------------------------------------------------------------------
|
| ⛔ SOL KENARDA RENKLI SERIT YOK. `border-inline-start` ile cizilen kalin
| renkli cubuk alintinin evrensel klisesi ve bu projede yasak listesinde.
| Ayrim tipografiyle kuruluyor: daha buyuk punto, daha genis satir araligi
| ve ustte/altta ince cizgi.
|
| ⚠️ `<p>` ICERIDE. `blockquote` dogrudan metin tasimaz; ici akis icerigi
| ister. Ayrica `.sayfa-metin > p` kurali BURAYA islemez (dogrudan cocuk
| degil), yani alintinin satir araligini burada ayrica vermek zorundayiz.
*/
.yazi-alinti {
  margin-block: var(--space-4);
  margin-inline: 0;
  padding-block: var(--space-3);
  border-block: 1px solid var(--border-default);
}

.yazi-alinti p {
  margin: 0;
  color: var(--text-default);
  font-size: var(--text-lg);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Tikla-yukle video
   --------------------------------------------------------------------------
   Sayfa acilirken YouTube'a TEK BAYT gitmez: burada yalniz YEREL kapak
   ve bir baglanti var. `video.js` tiklamada <iframe> koyuyor; betik
   yuklenmezse baglanti dogal isini yapar ve video yeni sekmede acilir.
   -------------------------------------------------------------------------- */

.video-listesi { display: flex; flex-direction: column; gap: var(--space-3); }

.video-kutu {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-inverse);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.video-kapak {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  text-decoration: none;
}

.video-kapak img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 | Oynat kumesi kapagin UZERINDE. Metin gizlenmiyor: ikon tek basina
 | hangi video oldugunu soylemez ve erisilebilir ad ondan geliyor.
 */
.video-oynat {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-inverse);
  background: var(--surface-inverse);
  font-weight: 600;
}

.video-kapak:focus-visible { outline: none; }
.video-kapak:focus-visible .video-oynat { box-shadow: var(--focus-ring-ic); }

.video-sure {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-1);
  padding: 0.125rem var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-inverse);
  background: var(--surface-inverse);
  border-radius: var(--radius-control);
}

/* Betigin koydugu cerceve kutunun tamamini kaplar. */
.video-cerceve {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Hakkimizda rakam seridi — Revize m.22
   ==========================================================================
   Her deger bir SORGUDAN gelir; sifir olan madde seride hic basilmaz.
   Rakamlar `tnum` ile diziliyor — yan yana duran dort sayi birbirine
   gore kaymamali (`tabular-nums` Faz 1'den beri gercekten calisiyor).
   ========================================================================== */

.rakam-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  text-align: center;
}

.rakam-deger {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-inverse);
}

.rakam-etiket {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
}

/* Rakamlarin NEREDEN geldigi yaziliyor; "bunu kim saydi"nin cevabi olmali. */
.rakam-not {
  margin-block-start: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
}

/* ==========================================================================
   Kanit karti — Revize m.5
   ==========================================================================
   Gorsel `contain`: studyo cekimleri seffaf dolgulu ve `cover` lastigin
   bir parcasini keserdi (ayni karar urun galerisinde de verildi).
   ========================================================================== */

.kanit-karti { display: flex; flex-direction: column; gap: var(--space-1); }

.kanit-karti-gorsel {
  aspect-ratio: 16 / 10;
  background: var(--surface-muted);
  border-radius: var(--radius-panel);
  overflow: hidden;
  margin-block-end: var(--space-1);
}

.kanit-karti-gorsel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.kanit-karti p { margin: 0; }

/*
 | ⛔ KART ANATOMISI TERSTI — 26 Agustos 2026.
 |
 | Olculdu (16 kartin 16'sinda ayni duzen): OZET `<p class="not">`
 | ile 15px/soluk basiliyordu, GOVDE paragraflari ise sinifsiz ve
 | 17px/koyu. Goz karta girince once SONEK olan govdeyi guclu
 | goruyor, kartin asil iddiasi sonuk kaliyordu.
 |
 | Ozet bir LEAD: kartin ne iddia ettigini soyleyen cumle. Ayrintiyi
 | isteyen govdeyi okur. Kart artik "baslik -> iddia -> dayanak
 | rozeti" diye okunuyor.
 |
 | ⚠️ `>` DOGRUDAN COCUK SARTI ONEMLI: kaynak rozetindeki `.not`
 | (telif sahibi) bir `<p>`nin ICINDE duruyor ve bu kuraldan
 | ETKILENMIYOR.
 */
.kanit-karti > .not {
  font-size: var(--text-base);
  color: var(--text-default);
}

.kanit-karti > p:not([class]) {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/*
 | Kaynak rozeti: kaydin hangi tur dayanaga yaslandigi ACMADAN gorunur.
 | "Bagimsiz test" ile "uretici bulteni" arasindaki fark okuyucunun
 | kararini degistirir ve gizlenmemeli.
 */
.kanit-kaynak-rozet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

/*
 | KIMLIK KARTI — 24 Agustos 2026 premium duzeni.
 |
 | Ciplak <h1> + "Hesap bilgileri" dl'i tek kimlik kartinda birlesti.
 | Avatar bas harf dairesi: gradyansiz, gorselsiz — ters yuzey + beyaz
 | metin (olculmus cift). Boyut --space-6.
 */
.hesap-kimlik { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.hesap-avatar {
  flex: none;

  /*
   | 48 -> 64px ve display ailesi (Tur 7): monogram artik bir rozet
   | degil, mansetin gorsel capasi. Olcu tokenlari; inline/block-size
   | sub-8px taramasina girmez (o tarama padding|margin|gap|inset okur).
   */
  inline-size: var(--space-8); block-size: var(--space-8);
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
}

/* Ad one, e-posta geride — tek satirda agirlik kontrasti. */
.hesap-kimlik-ad { color: var(--text-default); font-weight: 600; }

.hesap-kimlik-metin { flex: 1 1 14rem; min-inline-size: 0; }
.hesap-kimlik-metin h1 { margin: 0; }
.hesap-kimlik-satir { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }

.hesap-kimlik-durum {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--text-muted);
}

/*
 | BOLUM BASLIGI ANATOMISI: h2 + hemen altinda kisik sesli tek cumle.
 | Yedi es beyaz kutu algisini kiran uc katmandan biri (otekiler:
 | grup basliklari + kimlik karti).
 */
.bolum-tanim {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
  max-inline-size: var(--olcu-genislik);
}

/* Grup basligi kartlarin ARASINDA — bolumler dogrudan cocuk kalir. */
/*
 | EDITORYAL AYRAC: kaps etiket + ufka uzanan ince cizgi. Markup'a
 | dokunulmadi (::after). Onundeki nefes 16 -> 32px: gruplar arasi
 | mesafe grup ICI mesafeden (24px) belirgin sekilde buyuk olmali.
 */
.hesap-grup-baslik {
  margin-block-start: var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}

.hesap-grup-baslik::after {
  content: ""; flex: 1;
  block-size: 1px;
  background: var(--border-default);
}

/*
 | AYAR SATIRI — [etiket+aciklama | durum | eylem]. Bugun Izinlerim
 | tuketiyor; satirlar arasi dikis sepet-adim emsali.
 */
.ayar-listesi { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }

.ayar-satiri {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-2);
}

.ayar-satiri + .ayar-satiri { border-block-start: 1px solid var(--border-default); }

.ayar-bilgi { flex: 1 1 16rem; min-inline-size: 0; }
.ayar-etiket { margin: 0; font-weight: 600; }
.ayar-aciklama { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

.ayar-durum {
  margin: 0;
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--text-muted);
}

/*
 | ⚠️ `flex: none` DEGIL: eylem kumesi normalde kuculmemeli ama
 | SIGMIYORSA kuculebilmeli. Olculdu — adres satirindaki uc dugme
 | 328px ediyordu ve 281px'lik ekranda +96px tasiyordu; `flex: none`
 | kumeyi daralmaktan aliyordu, `flex-wrap` tek basina yetmedi.
 */
.ayar-eylem { flex: 0 1 auto; min-inline-size: 0; margin: 0; }

/*
 | ADRES DEFTERI — 25 Agustos 2026.
 |
 | Duzenleme paneli satirin TAM GENISLIGINDE aciliyor: `.ayar-satiri`
 | sarilabilir bir flex satiri, `flex-basis: 100%` onu kendi satirina
 | indiriyor. Betik yok — katlama tarayicinin `<details>`i.
 */
.adres-duzenle,
.adres-ekle { flex: 1 0 100%; }

.adres-duzenle > summary,
.adres-ekle > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-link);
  min-block-size: var(--dokunma-hedefi);
  display: flex; align-items: center;
}

.adres-duzenle > summary:hover,
.adres-ekle > summary:hover { text-decoration-line: underline; }

.adres-duzenle > summary:focus-visible,
.adres-ekle > summary:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-control); }

/* Satir icindeki eylem kumesi dar ekranda sarilsin. */
.ayar-eylem.dizi { flex-wrap: wrap; gap: var(--space-1); }

/* ==========================================================================
   Hesabim — IKI SUTUN (Revize m.12)
   ==========================================================================
   Sahibi "sayfanin sagi solu cok bos" dedi. Icerik dar bir yigindi ve
   sayfa uzadikca kullanici nerede oldugunu kaybediyordu.

   Sol sutun YAPISKAN (`sticky`): bolum listesi sayfa kaydirilirken
   gorunur kalir; yoksa altta gezinti diye bir sey kalmazdi.
   ========================================================================== */

.hesap-duzen {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/*
 | ⚠️ IZGARA HUCRESI ICERIGININ ALTINA INEBILMELI — 18 Agustos 2026.
 |
 | Izgara ve flex cocuklarinda `min-inline-size` varsayilani `auto`dur:
 | hucre, EN UZUN ICERIGINDEN dar olamaz. Yan gezintideki "Garanti
 | kayitlarim" gibi uzun bir etiket 296px'lik ekranda sutunu 297,6px'e
 | kilitliyor ve SAYFA yatay kayiyordu (kapanis taramasinda olculdu).
 |
 | ⛔ ETIKET KISALTILMADI: kusur metinde degil, kutuda. Kutu icerigine
 | uymak zorunda kalmasin diye tabana iniyor; uzun etiket artik sariyor.
 */
.hesap-duzen > * { min-inline-size: 0; }

.hesap-yan {
  position: sticky;
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/*
 | Dokunma hedefi — WCAG 2.2 SC 2.5.8 (AA), en az 24px. Dikey bir
 | gezinti listesi; satir ici istisna gecmiyor. Olcu footer ve cati
 | menusunde verilen kararla ayni.
 */
.hesap-yan a {
  display: flex;
  align-items: center;

  /*
   | ⛔ `justify-content: space-between` KALKTI (Tur 7): satir artik
   | UC cocuklu (ikon + etiket + sayac) ve space-between ucunu uc kutuya
   | dagitirdi — ikon sola, etiket ORTAYA yapisirdi. Sayaci saga iten
   | is artik `.hesap-yan-etiket`in `flex: 1`i.
   */
  gap: var(--space-1);
  min-block-size: var(--dokunma-hedefi);
  padding: var(--space-1) var(--space-2);

  /* Menu bir uygulama sesidir, govde metni degil. */
  font-size: var(--text-sm);
  color: var(--text-default);
  text-decoration: none;
  border-radius: var(--radius-control);
}

.hesap-yan-etiket { flex: 1; }

.hesap-yan a:hover { background: var(--surface-muted); color: var(--text-link); }

/* Yan menu kart yuzeyinde: 24px kart dolgusu menude 8px'e iner. */
body.hesap-yuzeyi .hesap-yan { padding: var(--space-1); }

.hesap-yan-grup { margin: var(--space-2) var(--space-2) 0; }
.hesap-yan-grup:first-child { margin-block-start: 0; }

.hesap-yan a {
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/*
 | AKTIF BOLUM — JS'SIZ, `:has(:target)`.
 |
 | Duzenin yazili karari "tek rota, JS yok"; capaya tiklamak parcayi
 | degistirir, parca hangi bolumu hedefliyorsa onun baglantisi yanar.
 | Parca yokken sayfa tepede: ilk baglanti dogru bilgidir, sus degil.
 |
 | ⚠️ `inset 2px ...` bir box-shadow DEGERIDIR; sub-8px taramasi yalniz
 | padding|margin|gap|inset OZELLIKLERINI okur. Golge degil ic cizgi —
 | hayalet-kart bekcisiyle iliskisi yok.
 */
.hesap-duzen:not(:has(:target)) .hesap-yan a:first-of-type,
.hesap-duzen:has(#bolum-hesap:target) .hesap-yan a[href="#bolum-hesap"],
.hesap-duzen:has(#bolum-siparis:target) .hesap-yan a[href="#bolum-siparis"],
.hesap-duzen:has(#bolum-garanti:target) .hesap-yan a[href="#bolum-garanti"],
.hesap-duzen:has(#bolum-adres:target) .hesap-yan a[href="#bolum-adres"],
.hesap-duzen:has(#bolum-eposta:target) .hesap-yan a[href="#bolum-eposta"],
.hesap-duzen:has(#bolum-parola:target) .hesap-yan a[href="#bolum-parola"],
.hesap-duzen:has(#bolum-riza:target) .hesap-yan a[href="#bolum-riza"] {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: inset 2px 0 0 var(--brand-blue-300);
}

.hesap-yan a:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/*
 | ⛔ AKTIF HAPTA ODAK HALKASI — OLCULMUS KUSUR, Tur 7'de kapandi.
 |
 | Yukaridaki aktif blok `:has(...)` tasidigi icin ozgullugu (1,x,x);
 | tek satirlik `.hesap-yan a:focus-visible` (0,2,1) onun box-shadow'unu
 | EZEMIYORDU. Yani aktif bolumun capasi klavyeyle gezildiginde HIC
 | halka gostermiyordu — gorunmez odak.
 |
 | Cozum: ayni yedi seciciye `:focus-visible` ekli IKINCI liste. Halka
 | ters yuzey icin (`--focus-ring-ters`), ic cizgi korunuyor — iki
 | golge tek bildirimde birlesiyor.
 |
 | ⚠️ Ustteki yedi secici HARFIYEN korunur; bekci onlari literal
 | olarak ariyor.
 */
.hesap-duzen:not(:has(:target)) .hesap-yan a:first-of-type:focus-visible,
.hesap-duzen:has(#bolum-hesap:target) .hesap-yan a[href="#bolum-hesap"]:focus-visible,
.hesap-duzen:has(#bolum-siparis:target) .hesap-yan a[href="#bolum-siparis"]:focus-visible,
.hesap-duzen:has(#bolum-garanti:target) .hesap-yan a[href="#bolum-garanti"]:focus-visible,
.hesap-duzen:has(#bolum-adres:target) .hesap-yan a[href="#bolum-adres"]:focus-visible,
.hesap-duzen:has(#bolum-eposta:target) .hesap-yan a[href="#bolum-eposta"]:focus-visible,
.hesap-duzen:has(#bolum-parola:target) .hesap-yan a[href="#bolum-parola"]:focus-visible,
.hesap-duzen:has(#bolum-riza:target) .hesap-yan a[href="#bolum-riza"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--brand-blue-300), var(--focus-ring-ters);
  outline: none;
}

/* Sayac: rakamlar sutun hizasinda (`tnum` artik gercekten calisiyor). */
.hesap-yan-sayi {
  flex: none;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;

  /*
   | ⛔ SABIT RENK KALKTI: sayac artik baglantinin rengini MIRAS
   | ALIYOR. Lacivert aktif hapta `--text-muted` okunmaz kalirdi.
   |
   | Zemin `currentColor`in %10'u: acik satirda koyu bir tint, koyu
   | hapta beyaz bir tint — tek kural, iki yuzey. (`.koyu .rozet-notr`
   | emsalinin genellemesi.)
   |
   | 0.375rem = 6px, izinli sub-8px kumesinin MEVCUT uyesi.
   */
  padding-inline: 0.375rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.hesap-icerik { display: flex; flex-direction: column; gap: var(--space-3); }

/*
 | Capa hedefi. `tabindex="-1"` bolumlere klavye odagini tasiyor
 | (tarayici capaya atlarken odagi da goturuyor); halka gorunmesin
 | diye `outline` kapali — odak GORSEL olarak zaten sayfanin o
 | bolumune kayarak belli oluyor.
 |
 | `scroll-margin-top`: yapiskan sol sutun degil, kaydirma sonrasi
 | baslik ekranin tam tepesine yapismasin diye.
 */
.hesap-icerik > section { scroll-margin-top: var(--space-3); }
.hesap-icerik > section:focus { outline: none; }

@media (max-width: 900px) {
  /* Tek sutun: gezinti uste, yapiskanlik kalkar (kisa liste, kisa yol). */
  .hesap-duzen { grid-template-columns: 1fr; }
  .hesap-yan { position: static; flex-direction: row; flex-wrap: wrap; }
  .hesap-yan a { flex: 1 1 8rem; justify-content: center; }

  /* Yatay sarilan menude grup etiketi gurultu olur. */
  .hesap-yan-grup { display: none; }

  /* Yatay menude etiket buyumesin, satir ortali kalsin. */
  .hesap-yan-etiket { flex: 0 1 auto; }
}

/*
 | BOLUM KARTI DOLGUSU 24 -> 32px — manset olcegi buyudu (42px),
 | dolgu ona oranlandi.
 |
 | ⛔ SECICI DAR: `body.hesap-yuzeyi .kart` YAZILAMAZ — ozet
 | seridindeki olcum kutulari da `.kart` basar ve onlar sismemeli.
 | Kural 1812'deki space-3 kuralindan SONRA gelmek zorunda (ayni
 | ozgullukte, kaynak sirasi kazanir); tarayicida 32px olculdu.
 */
.hesap-icerik > section.kart { padding: var(--space-4); }

/*
 | OZET SERIDI — sayfanin tek koyu yuzeyi (Tur 7).
 |
 | ⛔ YUZEY UCLUSU TASIMIYOR: zemin `.koyu` sinifindan geliyor, burada
 | yalniz izgara + yaricap var. Yeni bir kart ailesi acmiyoruz —
 | `VitrinKartDiliTest`in korudugu kural bu.
 |
 | Kutu zemini/kenarligi/beyaz rakami `.koyu .kart` ve `.koyu .olcum`
 | sozlesmelerinden bedava geliyor; tek satir renk yazilmadi.
 */
.hesap-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-panel);
}

/*
 | Serit kutulari `body.hesap-yuzeyi .kart` kuralindan 24px dolgu
 | aliyordu; vitrin emsalinden sisman ve 296px'te dar. Tokenli
 | daraltma — olculdu.
 */
/*
 | ⚠️ `body.hesap-yuzeyi` ONEKI ZORUNLU — olculdu. Sade
 | `.hesap-ozet .kart` (0,2,0) ozgullugu `body.hesap-yuzeyi .kart`
 | (0,2,1) kuralini yenemiyor; kutular 24px kaliyordu (tarayicida
 | goruldu). Onekle (0,3,1) kazaniyor.
 */
body.hesap-yuzeyi .hesap-ozet .kart { padding: var(--space-2); }

/*
 | ⛔ SERIT ETIKETI KISIK SESE CEKILDI — 26 Agustos 2026.
 |
 | Etiket `body.hesap-yuzeyi .kart > h2` kuralina (yukarida, 0,2,1)
 | dusuyordu: 22px/700. Tarayicida olculdu — 195px'lik kutuda
 | "Uyelik yili" ve "Siparisler" TEK satir (26px), "Garanti kayitlari"
 | ve "Kayitli adresler" IKI satir (52px) oluyordu; dort kutu esitsiz
 | okunuyor, rakamlar ayni cizgide durmuyordu.
 |
 | Etiket bir BASLIK degil bir ETIKETTIR: isin sesi rakamda. 15px/600
 | dordunu de tek satira indiriyor ve kucuk-sessiz-etiket ile
 | kocaman-display-rakam arasindaki kontrasti buyutuyor.
 |
 | Onek ZORUNLU: (0,3,0) ozgullugu `.kart > h2` kuralinin (0,2,1)
 | ustune cikiyor; onceki kural aynen yerinde duruyor.
 */
body.hesap-yuzeyi .hesap-ozet .olcum-etiket {
  font-size: var(--text-sm);
  font-weight: 600;
}

/*
 | Rakamlar mansetle AYNI sesi konusuyor: display ailesi + 42px.
 | Tabular rakam sutun hizasini korur.
 |
 | ⚠️ 34 -> 42px (26 Agustos): etiket 22'den 15'e inince rakamla
 | arasindaki fark 1.55 kata cikti ama rakam kimlik mansetinden
 | (42px) kucuk kaliyordu. Serit sayfanin ikinci sesi; mansetle ayni
 | basamakta durmasi hiyerarsiyi netlestiriyor.
 */
.hesap-ozet .tutar {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

/*
 | ⚠️ HOVER KURALI YOKTU: `.olcum-baglantili` yalniz `cursor:pointer`
 | tasiyordu — tiklanabilir kutu fareyle hicbir sey soylemiyordu.
 | Koyu yuzeyde kenarlik kademesi en sessiz dogru sinyal.
 */
.koyu .olcum-baglantili:hover { border-color: var(--border-on-inverse-strong); }

/*
 | Form olcusu: uzun bir satir 68ch'e kadar uzayabilir ama TEK ALANLI
 | bir form o genislikte "bos sagli" durur. 36rem yazilir bir olcu.
 | `.ayar-eylem` formu `.yigin` tasimadigi icin etkilenmez.
 */
body.hesap-yuzeyi form.yigin { max-inline-size: 36rem; }

/* ==========================================================================
   Giris — IKI SUTUN (Revize m.9 / m.20)
   ==========================================================================
   Sahibi "basic duruyor, daha guzel ve satafatli olsun" dedi.

   ⛔ SATAFAT GRADYANSIZ: `ThemeTest` bu dosyada SIFIR `linear-gradient`
   secicisi bekliyor. Derinlik uc seyden geliyor — ters yuzey (lacivert
   panel), satir ici SVG dis deseni ve iki katmanli golge. Hicbiri
   gradyan degil.

   PANEL ISTEGE BAGLI: `.giris-duzen-iki` yalnizca `marka-panel` bolumu
   tanimliysa basiliyor. Kayit, parola sifirlama ve iki adimli dogrulama
   ekranlari tek sutunda kaliyor.
   ========================================================================== */

/*
 | ⚠️ AYNI TUZAK BIR KAT ASAGIDA. `.giris-kabuk` icin acilan sutun
 | burada da gerekiyordu: ortuk sutun `auto` boyutlanip cocugun
 | `min-inline-size: auto` degeriyle birlesince kutu icerigin altina
 | inemiyor ve dar ekranda sayfa yatay kayiyor.
 */
.giris-duzen {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.giris-duzen-iki {
  width: min(100%, 58rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  justify-items: stretch;
  align-items: stretch;
  gap: 0;
  margin-inline: auto;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.giris-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--text-inverse);
  background: var(--surface-inverse);
}

.giris-panel .marka { color: var(--text-inverse); font-size: var(--text-2xl); }

.giris-panel-cumle {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.giris-panel-liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.giris-panel-liste li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
}

/* Ikonlar dekoratif; erisilebilir ad yanlarindaki GORUNUR metinden gelir. */
.giris-panel-liste .ikon { color: var(--text-inverse); }

/*
 | Yonetim uyarisi. Kutu DEGIL: form ustundeki `.uyari` kutusundan buraya
 | tasindi ve burada alanin kimliginin parcasi. Ust cizgi ayirici.
 */
.giris-panel-uyari {
  margin: auto 0 0;
  padding-block-start: var(--space-2);
  border-block-start: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
}

/*
 | Dis deseni. Panelin ARKASINDA (`z-index: 0` + icerik `position:
 | relative` degil — icerik zaten akista ve desen `position: absolute`).
 |
 | Opaklik dusuk: desen bir DOKU, bir gorsel degil. Metin kontrasti
 | panelin duz lacivert zeminine gore olculuyor ve desen o olcumu
 | bozmayacak kadar sonuk (%6).
 */
.giris-desen {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 45%;
  block-size: 100%;
  color: var(--text-inverse);
  opacity: 0.06;
  pointer-events: none;
}

/* Panel varken form sutunu kendi yuzeyini tasir; kabuk dar kalmaz. */
.giris-duzen-iki .kap-giris {
  width: 100%;
  justify-content: center;
  padding: var(--space-6);
  background: var(--surface-default);
}

/*
 | Panel varken formun kendi cercevesi FAZLALIK: sutunun kendisi zaten
 | bir yuzey. Cerceve kalkinca form o yuzeyin icinde duruyor, uzerinde
 | degil.
 */
.giris-duzen-iki .kap-giris form.kart {
  padding: 0;
  border: 0;
  background: transparent;
}

.giris-duzen-iki .kap-giris h1 { text-align: start; font-size: var(--text-2xl); }
.giris-duzen-iki .kap-giris .giris-alt { text-align: start; }

/*
 | DAR EKRAN: tek sutun, panel INCELIR — kaldirilmaz.
 |
 | Paneli gizlemek en kolay yoldu ve yanlisti: telefonla giren bir bayi
 | de hangi alana girdigini gormeli. Uc satirlik liste dusuyor (o bir
 | tanitim, kimlik degil), marka ve tek cumle kaliyor. Desen de kaliyor
 | ama serit inceldigi icin dogal olarak kisiliyor.
 */
@media (max-width: 720px) {
  /*
   | TAM GENISLIK. Yuvarlatilmis koseler ekranin kenarina degdiginde
   | "tasmis kart" gibi duruyordu; kose ve golge kalkinca yerlesim
   | KASITLI okunuyor. Olculdu (375px): yatay tasma yok.
   */
  .giris-duzen-iki {
    grid-template-columns: 1fr;
    border-radius: 0;
    box-shadow: none;
  }

  .giris-panel { padding: var(--space-3) var(--space-4); gap: var(--space-1); }
  .giris-panel-liste { display: none; }
  .giris-panel-uyari { margin-block-start: var(--space-1); }
  .giris-duzen-iki .kap-giris { padding: var(--space-4); }
}

.kap-giris {
  width: min(100%, 27rem);
  padding-inline: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Marka kilidi: kelime marka + alan basligi. Logo dosyasi yok; marka tipografiktir. */
.giris-marka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.giris-marka .marka { font-size: var(--text-2xl); }

/* Alan basligi (h1) sablondan gelir; kabukta ortalanir ve kucultulur —
   giris ekraninda kimlik markadir, baslik onun altindaki gorevdir. */
.kap-giris h1 { margin: 0; font-size: var(--text-xl); text-align: center; }

.kap-giris form.kart { padding: var(--space-3); }

/*
 | Onay kutusu: kutu metnin ILK satirina hizalanir; metin sarilinca
 | kutu ortaya kaymaz. Yardim ve hata metni kutunun altina degil,
 | METNIN altina girer (2. sutun).
 */
/*
 | Onay kutusu — WCAG 2.2 SC 2.5.8 (AA), en az 24x24.
 |
 | Gorunen kare 16px ve oyle kalmali: 24px'e buyutmek onay kutusunu
 | sayfadaki her seyden iri gosterirdi. Hedef ise kare degil, ETIKETIN
 | TAMAMI — `<input>` `<label>`in icinde oldugu icin satirin herhangi
 | bir yerine tiklamak kutuyu degistiriyor.
 |
 | Olculdu: tek satirlik etiket 22px'te kaliyordu, iki piksel eksikti.
 | `min-block-size` o iki pikseli veriyor; cok satirli etiket zaten
 | daha yuksek ve etkilenmiyor.
 */
.onay-kutusu {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem var(--space-1);
  align-items: start;
  min-block-size: var(--dokunma-esigi);
  font-size: var(--text-sm);
}

.onay-kutusu input[type="checkbox"] {
  margin-top: 0.1875rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--action-secondary);
}

.onay-kutusu .onay-metin { font-weight: 400; }
.onay-kutusu .alan-yardim,
.onay-kutusu .alan-hata { grid-column: 2; }

/* ==========================================================================
   Iki adimli dogrulama — QR yerlesimi (revize m.14)
   ==========================================================================
   QR SAGDA DEGIL SOLDA: goz once kareyi goruyor, sonra "ne yapacagim"
   yazisini okuyor. Ters sirada kullanici once talimati okuyup sonra
   kareyi ariyordu.

   ⚠️ QR OLCUSU SABIT DEGIL, TAVANLI. `min()` ile hem kucuk ekranda
   tasmiyor hem buyuk ekranda gereksiz buyumuyor. Kod vektorel; buyutmek
   bulanikliga yol acmaz ama 12rem'den buyugu ekranda gurultu olurdu.
*/
.qr-yerlesim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.qr-yerlesim-kod { flex: 0 0 auto; }
.qr-yerlesim > div:last-child { flex: 1 1 18rem; min-inline-size: 0; }

.qr-kod {
  inline-size: min(12rem, 60vw);
  block-size: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

/* Parola girdisi + goster/gizle dugmesi tek satirda. */
.parola-alani { display: flex; gap: var(--space-1); }
.parola-alani input { flex: 1; min-width: 0; }
.parola-alani .dugme { flex: 0 0 auto; }

/* Kabuk alt kunyesi: siteye donus ve kucuk yazi. Ayri alanlarin
   giris adresleri BURADA DA yazilmaz (varlik sizintisi). */
.giris-alt {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   Bayi vitrin fotograflari — Blok 12 / §5.10
   ==========================================================================
   PUBLIC KARTTAKI SERIT: JS YOK. `scroll-snap` parmakla, trackpad'le ve
   klavyeyle calisir; ok dugmesi eklemek icin bir betik yuklemek
   gerekirdi ve sikilastirilmis CSP altinda bu ayri bir dosya demekti.

   Serit `tabindex="0"` tasidigi icin klavyeyle odaklanip ok tuslariyla
   kaydirilabilir; odak halkasi bu yuzden gorunur birakildi.
   ========================================================================== */

.bayi-serit {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
  scrollbar-width: thin;
}

.bayi-serit img {
  flex: 0 0 auto;
  inline-size: 100%;
  block-size: 11rem;
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: var(--radius-panel);
}

/*
 | Tek fotografta kaydirilacak bir sey yoktur; serit sabit bir gorsel
 | gibi durur.
 */
.bayi-serit:has(img:only-child) { scroll-snap-type: none; }

/* Bayi portali ve yonetim ekranindaki fotograf karti. */
.vitrin-karti { display: flex; flex-direction: column; gap: var(--space-1); }

.vitrin-onizleme {
  inline-size: 100%;
  block-size: 9rem;
  object-fit: cover;
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
}

/* ==========================================================================
   CMS sayfa metni — Blok 20
   ==========================================================================
   Yasal metinler UZUN. Okunabilirligi belirleyen iki sey var: satir
   uzunlugu ve basliklarin metinden ayrilmasi. Govde etiketlerini
   ContentRenderer uretiyor (h2/h3/p/ul), bu yuzden burada SINIF DEGIL
   ETIKET seciliyor — icerik yazari sinif yazamaz, yazmasi da gerekmez.
   ========================================================================== */

.sayfa-metin {
  max-width: 68ch;
  margin-inline: auto;
}

.sayfa-metin > h1 { margin-bottom: var(--space-2); }

.sayfa-metin > h2 {
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--text-xl);
}

.sayfa-metin > h3 {
  margin-block: var(--space-3) var(--space-1);
  font-size: var(--text-base);
}

.sayfa-metin > p {
  margin-block: 0 var(--space-2);
  line-height: 1.7;
  text-wrap: pretty;
}

.sayfa-metin > ul {
  margin-block: 0 var(--space-2);
  padding-inline-start: 1.25rem;
  line-height: 1.7;
}

.sayfa-metin > ul > li + li { margin-block-start: 0.25rem; }

/* Yayin tarihi basligin hemen altinda, govdeden ayri durur. */
.sayfa-metin > .not {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

/* ==========================================================================
   Dar ekran: yapisal davranis (akiskan tipografi DEGIL)
   ========================================================================== */

@media (max-width: 720px) {
  .kap { padding-inline: var(--space-2); }
  section { padding-block: var(--space-4); }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }

  header.ana .kap { gap: var(--space-1) var(--space-2); }

  /*
   | Dar ekranda basligi IKI SATIRA ayir: ustte marka + ikonlar, altta
   | gezinti. Onceden gezinti markanin YANINDA sikisip kendi icinde
   | sariyordu ve baslik uc dagink satira boluniyordu — video uzerinde
   | bu ozellikle kaba duruyordu.
   |
   | Siralama `order` ile; DOM sirasi (marka -> yardimci kume -> dil
   | -> gezinti) klavye ve ekran okuyucu icin DOGRU sira ve
   | degistirilmiyor.
   |
   | SECICILER DOGRUDAN COCUK (`>`), torun DEGIL. Once `header.ana
   | .arama` yaziliydi; arama yardimci kumenin icine tasininca o kural
   | ORADA DA eslesti ve `order: 1` bu kez kumenin ICINDE islendi —
   | buyutec sepet, hesap ve "Bayi girisi"nin arkasina dustu. Torun
   | secici, yalnizca bir yerlesim icin dogru olan kurali tasindigi
   | her yere goturuyordu.
   */
  header.ana .kap > .marka { order: 0; }
  header.ana .kap > .hesap { order: 1; }

  /*
   | ⛔ CATI 390px'TE DORT SATIRDI — 15 Agustos 2026, once GORULDU,
   | sonra olculdu.
   |
   | Marka / yardimci kume / dil / gezinti = 182px; ust bantla birlikte
   | 244px, yani 844px'lik ekranin %29'u icerik baslamadan gidiyordu.
   | Ustteki blogun yorumu "dar ekranda basligi IKI SATIRA ayir" diyor —
   | niyet oydu, sonuc dortlemisti. Hicbir test cati YUKSEKLIGINI
   | olcmuyor, o yuzden kimse gormedi.
   |
   | Ic genislik 390 - 32 = 358px. Hangi ikili yan yana sigiyor:
   |
   |     marka + hesap  = 121 + 16 + 259 = 396   ✗
   |     hesap + dil    = 259 + 16 +  88 = 363   ✗   (5px!)
   |     marka + dil    = 121 + 16 +  88 = 225   ✓   133px pay
   |
   | ⚠️ ILK DENEDIGIM YANLISTI: `.dil`i `.hesap`in yanina almak icin
   | bosluk 8px'e cekilecekti — TR'de 355 sigiyordu. UC DILI DE OLCUNCE
   | cikti: DE tam 358 (sifir pay), EN 364 TASIYOR ("Become a dealer",
   | "Bayi basvurusu"ndan 9px genis). Ceviriye dayanan bir hizalama,
   | ilk uzun cevirilde kirilir.
   |
   | ⚠️ IKINCI YANLIS: sarmayi `margin-inline-start: auto` yapiyor
   | sanmistim. Yapmiyor — flex SATIR BOLMESI auto kenar boslugunu 0
   | sayar; 270px o satir zaten tek kalinca COZULEN deger, sebep degil.
   | Sebep duz aritmetik: 363 > 358.
   |
   | Dogru esleme marka + dil: ikisinin de genisligi CEVIRIDEN BAGIMSIZ
   | (kelime markasi ve "TR EN DE" cevrilmiyor). Cati uc satira iniyor.
   | `auto` bosluk KALIYOR — dili o satirin sag ucuna dayiyor.
   */
  header.ana .kap > .dil { order: 0; }

  /*
   | DAR EKRANDA GEZINTI TEK SATIR, YATAY KAYDIRILIR — 11 Agustos 2026.
   |
   | Olculdu (390px): dort baglantiyla iki satir ~70px, alti baglantiyla
   | UC satir 104px. Cati toplam 205px'e cikiyordu, yani 844px'lik bir
   | ekranin dortte biri icerik baslamadan yeniyordu.
   |
   | Sarmak yerine KAYDIRMAK secildi:
   |   - Baglanti gizlenmiyor. "Mobilde daha az menu" kararini vermek
   |     icin hangi maddenin kime lazim oldugunu bilmiyoruz.
   |   - Acilir menu (`<details>`) daha az yer yer ama BIR TIK EKLIYOR
   |     ve catinin yuksekligi zaten tek satira indi; tikin bedelini
   |     odemek icin sebep kalmadi.
   |   - Yatay kaydirma KABIN ICINDE; sayfa govdesi yatay kaymiyor
   |     (1.4.10 ihlali degil).
   |
   | `scroll-snap` yok: kisa etiketlerde durak noktalari kaydirmayi
   | kasintili yapiyor. Kenar solmasi da yok — bu bir sus degil ve
   | maskesiz de hangi yone kayilacagi belli (ilk oge sola dayali).
   */
  header.ana .kap > nav.birincil {
    order: 2;
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: var(--space-3);
    overflow-x: auto;
    /* Dikey kaymayi kapat: tek satirlik bir seritte anlamsiz. */
    overflow-y: hidden;
    /* iOS'ta ivmeli kaydirma; masaustunde etkisiz. */
    -webkit-overflow-scrolling: touch;
    /* Kaydirma cubugu seridin yuksekligini buyutmesin. */
    scrollbar-width: none;
    /* Son ogenin sag kenarda kaba durmamasi icin nefes payi. */
    padding-inline-end: var(--space-1);
  }

  header.ana .kap > nav.birincil::-webkit-scrollbar { display: none; }

  /* Etiketler kirilmaz: "Lastik Bulucu" iki satira boluneceyse serit
     tek satir olmaktan cikardi. */
  header.ana .kap > nav.birincil a { white-space: nowrap; flex: none; }

  /*
   | Panel dar ekranda kabin genisligine oturur ve TASMAZ (1.4.10).
   | 320px'te: 320 - 32 = 288px, iki yanda esit bosluk kalir.
   */
  .arama-panel { inline-size: min(22rem, calc(100vw - var(--space-4))); }

  .ust-bant .kap { font-size: var(--text-xs); gap: var(--space-1); }
  .dugme { width: 100%; }
  .dizi > .dugme { width: auto; }

  /*
   | Arama dugmesi de muaf. Olmayinca dugme satirin tamamini kapliyor
   | ve arama kutusu tiklanamayacak bir kareye sikisiyordu — telefonda
   | aramayi tamamen kullanilmaz yapan bir hataydi.
   */
  .arama-panel .dugme { width: auto; flex: 0 0 auto; }

  /* Parola goster/gizle de muaf — girdinin yanindaki kucuk dugmedir. */
  .parola-alani .dugme { width: auto; }

  /* Grafik satiri dar ekranda yigilir: etiket ustte, cubuk ve deger altta. */
  .grafik-satir { grid-template-columns: 1fr auto; }
  .grafik-etiket { grid-column: 1 / -1; }

  /*
   | Hero dar ekranda TEK SUTUNA duser ve GORSEL USTE gecer: telefonda
   | once gorsel gorunur, metin hemen altinda okunur. Metnin gorselin
   | uzerine binmedigi duzen burada da korunur.
   */
  .hero { grid-template-columns: 1fr; }
  .hero-gorsel { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .hero-metin { padding: var(--space-4) var(--space-3); }

  /* Aile kartlari tek sutuna duser; gorsel biraz basiklasir. */
  .teknoloji-izgara { grid-template-columns: 1fr; }
  .teknoloji-karti-gorsel { aspect-ratio: 2 / 1; }

  /*
   | Urun detayi tek sutuna duser ve KUNYE USTE gecer: telefonda once
   | "hangi ebat" sorusu cevaplanir, ayrinti altta okunur.
   */
  .urun-duzen { grid-template-columns: 1fr; gap: var(--space-4); }
  .kunye-paneli { order: -1; padding: var(--space-4); }

  /*
   | ⛔ TELEFONDA "SEPETE EKLE" EKRANDAN CIKMAZ — 26 Agustos 2026.
   |
   | Tek sutuna dusen sayfada CTA sayfanin ortasinda kaliyordu: altinda
   | 2578px daha icerik var (teknoloji bolumleri, ilgili urunler) ve o
   | icerigi okurken satin alma dugmesi gorunmuyordu. Olculdu.
   |
   | ⛔ ONCE `position: sticky` YAZILDI VE CALISMADI. Sticky ancak KENDI
   | KAPSAYICI BLOGU icinde gezer; formun kabi (`.dizi.bosluk-ust`)
   | 137px. Tarayicida olculdu: buton y=1800'de aynen ekrandan cikti,
   | sabit bir ogeymis gibi. En genis ata (`.urun-duzen`) bile 1209px —
   | yani sticky bu isi HICBIR kapsayiciyla yapamaz. `fixed` sart.
   |
   | ⚠️ FORMUN KENDISI TASINDI, KOPYASI CIKARILMADI. Ikinci bir form
   | ikinci bir `id="adet"` (gecersiz HTML) ve ikinci bir dolu dugme
   | demekti — "sayfa basina TEK dolu buton" bekcisi hakli olarak
   | duserdi. Tek tanim, yeri degisti.
   |
   | ⚠️ BETIK YOK. Serit gorunurlugunu betige baglamak, betik
   | calismadiginda sayfayi SATIN ALINAMAZ birakirdi. `kesit.js`teki
   | kural burada da gecerli: betik hic calismasa bile islev durur.
   |
   | ⚠️ ASISTAN CEKMECESI ILE CAKISIYORDU: o da `fixed`, dipte 16px'te
   | ve z-index 300 (`--z-overlay`) ile seridin USTUNE binerdi —
   | olculdu. Cekmece bir dokunma hedefi yukari alindi.
   |
   | ⚠️ NEFES PAYI FOOTER'A: govdeye verilseydi footer'in lacivert
   | zemininin altinda beyaz serit kalirdi (10205'teki ders).
   */
  /*
   | ⛔ GIRIS HAREKETI BU YUZEYDE KAPALI — ve sebebi hareket sevmemek
   | DEGIL, `position: fixed`in kuralidir.
   |
   | `main#icerik` giris animasyonu `transform` kullaniyor (6490).
   | Transform tasiyan bir ata, icindeki `fixed` ogeye KAPSAYICI BLOK
   | yaratir: serit artik ekranin degil `main`in dibine cakilir.
   | Tarayicida olculdu — serit sayfayla birlikte kaydi
   | (dip: -1866 -> +1425) ve dipte HIC durmadi.
   |
   | ⚠️ ICERIK KAYBOLMUYOR: 6455'teki karar geregi taban durum zaten
   | GORUNUR; solma yalniz `@keyframes`in `from` adiminda yasiyor.
   | Animasyonu kapatmak icerigi yerinde birakir.
   |
   | ⚠️ KAPSAM EN DAR: yalniz urun sayfasi, yalniz 720 alti — yani tam
   | olarak seridin var oldugu yer. Masaustunde ve diger sayfalarda
   | giris hareketi aynen duruyor.
   */
  /*
   | ⚠️ SECICI OZGUN KURALIN SEKLINI TAKIP EDIYOR (6489) ve bu bir
   | suslemesizlik degil OLCUM sonucu: once `body.urun-yuzeyi
   | main#icerik` yazildi ve HUKMEDEMEDI — ozgun secici `:not()` +
   | `:has()` ile (1,2,2) tasiyor, kisa hali (1,1,2) kaliyordu.
   | Ayni sekil + dosyada sonra gelmek = esitlikte kazanir.
   */
  body.urun-yuzeyi main#icerik > .kap,
  body.urun-yuzeyi main#icerik:not(:has(> .kap)) { animation: none; }

  body.urun-yuzeyi .urun-duzen form {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    flex-wrap: nowrap;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-default);
    border-block-start: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
  }

  /*
   | Dugme kalan genisligi alir; adet girdisi dogal olcusunde kalir.
   |
   | ⚠️ `min-block-size` KEYFI DEGIL: bu dugme artik telefondaki TEK
   | satin alma yuzeyi ve olculdu — 40px'ti, dokunma hedefinin altinda.
   | Akista dururken cevresinde bol bosluk vardi, seritte yok.
   */
  body.urun-yuzeyi .urun-duzen form .dugme {
    flex: 1 1 auto;
    min-block-size: var(--dokunma-hedefi);
  }

  /*
   | Serit tarayicida 65px olculdu; cekmece 76px'e cikinca arada 11px
   | hava kaliyor. Ilk deneme (16+44=60) 5px BINIYORDU — olculdu.
   */
  body.urun-yuzeyi .asistan-cekmece {
    inset-block-end: calc(var(--dokunma-hedefi) + var(--space-4));
  }

  /*
   | Son blogun nefesi seridin altinda kalan yaziyi kurtarir.
   |
   | ⚠️ IKI KURAL, CUNKU IKI DURUM VAR — ve ikincisi OZGULLUK icin de
   | gerekli: taban kural (`body:has(.asistan-cekmece) > footer`,
   | 10260) benimkiyle (0,1,2) BERABERE kaliyor ve dosyada SONRA
   | geldigi icin kazaniyordu. Tarayicida olculdu: footer 136 degil 68
   | aldi. `:has()` benim seciciye de eklenince (0,2,2) ile hukmediyor.
   |
   | ⛔ NEFES PAYI GOVDEYE DEGIL SON BLOGA: govdeye eklenseydi
   | footer'in lacivert zemininin ALTINDA beyaz bir serit kalirdi
   | (10250'deki ders).
   */
  body.urun-yuzeyi > footer {
    /* Yalniz serit var (asistan modulu kapali): 65px'i gecer. */
    padding-block-end: calc(var(--space-4) + var(--dokunma-hedefi));
  }

  body.urun-yuzeyi:has(.asistan-cekmece) > footer {
    /* Serit (65) + cekmece (76 -> 120). 136px ikisini de gecer. */
    padding-block-end: calc(var(--space-6) + var(--dokunma-hedefi) * 2);
  }

  /* Filtreler dar ekranda alt alta yiginir. */
  .filtre-cubugu { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .filtre-cubugu label { justify-content: space-between; }

  /*
   | ⛔ `space-between` TEK BASINA BIRAKILINCA SATIRLAR DAGILIYORDU —
   | 15 Agustos 2026, 390px'te olculdu.
   |
   |   etiket           bosluk   secimin sol kenari
   |   Jant              190px   261
   |   Genislik          166px   261
   |   Konum             150px   239
   |   Kaucuk sertligi    96px   238
   |   Arac uyumu (OE)    90px   246
   |
   | Secim kutulari ICERIGE gore boyutlaniyordu (88-111px), o yuzden sol
   | kenarlari birbirini tutmuyordu: bes satirda bes ayri hiza.
   |
   | `space-between` bir AYAR LISTESI deseni ve dogru desen — ama deseni
   | ayakta tutan sey kontrollerin TEK BIR DIKEY HATTA oturmasi. Sabit
   | genislik onu geri veriyor.
   |
   | ⚠️ YALNIZ DAR EKRANDA. Masaustunde satir yatay: 10rem'lik bes kutu
   | satiri ~305px uzatir ve cubuk sarardi. Orada icerige gore
   | boyutlanmak DOGRU.
   |
   | 10rem secildi, 11rem degil: 390px'te panelin ic genisligi 304px;
   | 11rem (176px) etikete 116px birakiyordu ve "Arac uyumu (OE)" 111px.
   | Iki piksellik pay birakmak, ilk uzun ceviride kirilmak demekti.
   */
  .filtre-cubugu select { flex: none; inline-size: 10rem; }

  /*
   | ⛔ TERS DUSEN SATIR: onay kutusunun etiketinde <input> ONCE geliyor,
   | metin sonra. `space-between` ikisini ekranin iki ucuna atiyordu —
   | kutu x=69'da bitiyor, yazi x=198'de basliyordu: ARADA 129px.
   |
   | Ustteki bes satir [etiket ........ kontrol] duzenindeyken bu satir
   | [kontrol ........ etiket] oluyordu. Ayni listede birbirinin tersi
   | iki desen.
   |
   | `row-reverse` ile duzeltilmedi: gorsel sirayi DOM sirasindan
   | ayirmak 1.3.2'yi (anlamli sira) riske atar. Kutu metnin yanina
   | aliniyor — onay kutusunun evrensel dizilisi zaten bu.
   |
   | ⚠️ Masaustu tabani (`.filtre-cubugu label`, satir 960) zaten
   | `inline-flex` + `--space-1` ile bunu veriyordu; kirilan yalniz
   | mobildi. Burasi tabani GERI GETIRIYOR, yeni bir desen kurmuyor.
   |
   | `:has()` yeni bir bagimlilik degil — depoda zaten iki yerde var.
   */
  .filtre-cubugu label:has(input[type="checkbox"]) {
    justify-content: flex-start;
    gap: var(--space-2);
  }
}


/*
| --- Kanit galerisi — Tur 3, F9 (REV-20) ---------------------------------
|
| Sahibi: "garantide birden fazla gorsel yuklenebilsin, yonetimde galeri
| olarak gorunsun."
|
| ⚠️ SABIT KARE: fotograflar farkli oranlarda geliyor (telefon dikey,
| fotograf makinesi yatay). Serbest biraksaydik satirlar birbirini
| itekler ve galeri D3'teki gibi ziplardi. `object-fit: cover` kirpar
| ama HIC BIR SEYI GIZLEMEZ: tam gorsel tiklaninca acilir.
*/
.kanit-galeri {
  display: grid;
  /*
  | ⚠️ TABAN `min(10rem, 100%)` ILE SARILI: 10rem, dar bir ekranda
  | kabin genisliginden buyuk olabilir ve izgara tasar. Bu kural bu
  | dosyada baska yerlerde de yazili ve testle taraniyor.
  */
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.kanit-galeri li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.kanit-galeri img {
  inline-size: 100%;
  block-size: 10rem;
  object-fit: cover;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}

.kanit-adim {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/*
| --- Kampanya listesi — Tur 3 F9 (REV-45), tema turu 24 Agustos 2026 -----
|
| ⛔ `repeat(auto-fill, minmax(18rem, 1fr))` KALDIRILDI.
|
| Canli veride tek kampanya var ve o izgara tek karti sola yapistirip
| sagda ~860px bosluk birakiyordu — sahibinin "dagynik" dedigi seyin
| ekrandaki karsiligi buydu.
|
| ⚠️ `auto-fit`E CEVIRMEK COZUM DEGILDI: boslugu kapatir ama kartin
| YAPISINI kampanya sayisina baglar (1 tanede genis yatay, 2 tanede dar
| yiginlanmis). Bu, projede zaten olculup reddedilmis bir kusur —
| `.bayi-karti-baslik` notu: *"sonuc niyet edilen duzen degil, KARTTAN
| KARTA DEGISEN bir duzen."*
|
| Cozum: sutun sayisi OLMAYAN bir duzen. Kart her zaman kabin tam
| genisliginde bir serit; 1 kampanya da 8 kampanya da birebir ayni
| gorunur. Yan fayda: `minmax` hic yazilmadigi icin dar ekran tasma
| riski bu blokta konu bile degil.
*/
.kampanya-listesi {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/*
| YATAY SERIT KART — uc blok, `flex-wrap` ile akiyor.
|
| ⛔ YENI KIRILMA NOKTASI YOK. Uc blogun taban genisligi toplami
| (18+20+14 = 52rem) dar ekranda kaba sigmadigi icin bloklar
| KENDILIGINDEN alt alta iniyor. Kapali kirilma noktasi kumesine
| dokunulmadi.
|
| `padding: 0` + `overflow: hidden`: gorsel ve teklif paneli kartin kendi
| yaricapina kadar dayanir. Ayni desen `.kart-yazi`da yazili.
*/
.kampanya-kart {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  overflow: hidden;
}

/*
| ⛔ `border-radius: var(--radius-marketing)` KALDIRILDI — 14px'ti, oysa
| tasiyicisi `.kart` `--radius-panel` (10px) tasiyor. Ayni kartta 4px
| arayla iki yaricap: `VitrinKartDiliTest`in dogdugu kusurun ta kendisi.
| Kirpma artik kartin `overflow: hidden`inin isi.
|
| ⚠️ GORSEL MUTLAK KONUMLU. Kutu ya satir yuksekligine gerilir (yaninda
| daha uzun bir blok varken) ya da `min-block-size`a duser (tek basina
| bir satira sarildiginda). Yuzde yukseklik ikinci durumda COZULMEZ —
| `.kart-yazi-kapak`ta 24 Agustos'ta olculen `block-size: 100%` tuzaginin
| aynisi.
*/
.kampanya-gorsel {
  flex: 1 1 18rem;
  position: relative;
  min-block-size: 12rem;
  background: var(--surface-sunken);
  overflow: hidden;
}

.kampanya-gorsel img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Kimlik blogu: rozet seridi, ad, aciklama, kupon notu. */
.kampanya-tanim {
  flex: 2 1 20rem;
  padding: var(--space-3);
}

/*
| ⚠️ ROZET SERIDI KENDI SATIRINDA. Gerekce `.olcum > .rozet` kuralinda
| yazili: sutun yonlu kaplarda rozet gerilip bandrole doner.
*/
.kampanya-durum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}

/*
| Kart basligi `--text-base` (17px) idi; teklif panelindeki buyuk indirim
| rakaminin yaninda hiyerarsi kurmuyordu.
|
| ⚠️ OZGULLUK ESIT (`.kart h3` ile 0,1,1) — bu kural dosyada ONDAN SONRA
| durmak zorunda. Kampanya blogu 8400+ satirda, `.kart h3` 1898'de.
| Tarayicida hesaplanan deger dogrulandi.
*/
.kampanya-tanim h3 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-2);
}

/*
| TEKLIF PANELI — kartin ICINDEKI ikincil yuzey.
|
| ⛔ IKINCI BIR KART DEGIL: yalniz zemin tonu var, kenarlik ve yaricap
| yazilmiyor. "Ic ice kart yok" kurali boyle korunuyor.
|
| ⚠️ GORSELSIZ KARTIN SIGORTASI: gorsel basilmadiginda kart iki bloga
| iner ve bu panel kendi tonuyla duruyor — yani kart hicbir halde tek
| duz dikdortgene inmiyor. Bos gorsel cercevesi basmak yerine secilen
| yol bu.
*/
.kampanya-teklif {
  flex: 1 1 14rem;
  padding: var(--space-3);
  background: var(--surface-muted);
}

/*
| INDIRIM DEGERI — kartin optik capasi.
|
| ⛔ `<x-olcum>` KULLANILMADI: kok elemani `.kart`tir ve IC ICE KART
| uretirdi; degeri `--text-2xl` (27px) ile basar, kartin capasi olamaz;
| `margin-block-start: auto` kurali kartlar ARASI hizalama icin kurulu,
| burada hizalanacak kardesi yok.
|
| ⚠️ `--text-display` AKISKAN, `.tutar-display`in sabit 42px'i degil:
| 296px'te uzun bir tutar 42px'te kutuyu tasiriyordu.
*/
.kampanya-deger {
  margin: 0 0 var(--space-2);
}

.kampanya-oran {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums lining-nums;
}

/*
| ⛔ `font` KISAYOLU KULLANILMIYOR: `font-variant-numeric`i sifirlar ve
| `.tutar`in `tabular-nums`ini sessizce dusururdu.
*/
.kampanya-oran .tutar {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/*
| TABAN VE TAVAN — basligin ALTINDA ama ONUN PARCASI.
| Ayri bir `<dl>` satirina konsaydi "%20" akilda kalan tek sayi olur,
| tavan ikinci sinif bilgi olurdu.
*/
.kampanya-kosul {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/*
| ⛔ KOSUL SATIRINDAKI TUTAR SATIR PUNTOSUNA UYAR.
|
| `<x-tutar>`in TABANI `--text-2xl` (27px) — bilesenin en kucuk boyutu bu
| ve `base | lg | 2xl | display` disinda secenegi yok. Kosul listesi 15px;
| araya giren 27px'lik bir rakam, kartin asil capasi olan indirim
| degeriyle (52px) yarisiyordu. Tarayicida olculdu.
|
| ⚠️ BILESEN DEGISTIRILMEDI, YEREL OLCU VERILDI: para bicimlendirmesi
| hala tek kaynaktan (`Money::format`) geliyor; degisen yalniz bu kartin
| icindeki punto. Ayni desen ustteki `.kampanya-oran .tutar` kuralinda da
| var — orada BUYUTMEK, burada kucultmek icin.
*/
.veri-listesi .tutar {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/*
| --- Adim listesi — kampanya "nasil yararlanirim" bolumu ----------------
|
| ⚠️ BU SINIFLAR TUR 4'TE "OLU CSS" DIYE SILINMISTI ve o gun HAKLIYDI:
| cagiran kimse yoktu. Geri geliyorlar cunku ARTIK CAGIRAN VAR —
| kampanya sayfasindaki dort adimlik `<ol>`. Bir sonraki temizlik turu
| ayni gerekceyle tekrar silmesin diye bu not burada duruyor.
|
| ⛔ NUMARA DEKORATIF, `aria-hidden`. Sirayi `<ol>` zaten tasiyor; ekran
| okuyucuya "1" diye iki kez soylenmemeli.
*/
.adimlar {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  /*
   | ⚠️ OKUMA GENISLIGI BURADA, KAPTA DEGIL. Kap `.kap-dar` yapilsaydi
   | bolum 409px'ten baslar, ustteki kart ise 211'den: sol kenar bolumden
   | bolume 198px ziplardi (tarayicida olculdu). Kap hizali kaliyor,
   | satir uzunlugu listenin kendi isi oluyor.
   */
  max-inline-size: var(--olcu-genislik);
}

.adim {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.adim-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--border-on-inverse-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

.adim h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
}

.adim p { margin: 0; }


/*
| --- Harita ile konum secimi — Tur 3, F9 (REV-18) ------------------------
|
| Sahibi: "adreste harita olsun, noktadan secilebilsin; bayi koordinat
| girmekle ugrasmaz."
|
| ⚠️ SABIT YUKSEKLIK: Leaflet kabin yuksekligini kendi hesaplamaz ve
| yuksekligi olmayan bir kutuda harita HIC cizilmez — sessizce bos kalir.
| `aspect-ratio` yerine acik yukseklik: harita dar ekranda da
| kullanilabilir kalmali, orana birakilirsa telefonda serit gibi ezilirdi.
*/
.harita-secici {
  block-size: 22rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-marketing);
  background: var(--surface-sunken);
}

/*
| Klavyeyle gezende odak gorunur olmali: harita bir `role="application"`
| ve Enter tusu noktayi merkeze koyuyor. Odak halkasi olmadan kullanici
| haritanin odakta oldugunu bilemezdi.
*/
.harita-secici:focus-visible {
  outline: 3px solid var(--action-primary);
  outline-offset: 2px;
}

/*
| --- Hizli siparis urun gorseli — Tur 3, F11 (REV-01) --------------------
|
| Sahibi: "hizli siparişte butun urunler resimleriyle gorunsun."
|
| ⚠️ SABIT KARE: gorseller farkli oranlarda geliyor ve satir yuksekligi
| onlara birakilirsa tablo satirdan satira ziplar — D3'te kapatilan
| kusurun aynisi.
*/
.siparis-gorsel-hucre {
  inline-size: 4rem;
}

.siparis-gorsel {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  object-fit: contain;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}


/*
| --- Acilan satir icerigi — Tur 3, F2 duzeltmesi (15 Agustos 2026) -------
|
| Sahibi acilan "Detay ve islemler" blogunu gosterip karisik dedi.
| Tavan kalkinca hapsolma bitti ama ikinci bir sorun kaldi: acilan
| icerik, ustundeki tablo satirlariyla AYNI zeminde ve ayni hizada
| duruyordu — nerede bittigi belli degildi.
|
| ⛔ KART ICINDE KART YAPILMADI: acilan blok zaten bir tablo satirinin
| icinde; ona ayrica cerceve vermek "ic ice" hissini artirirdi.
| Ayrisma ZEMIN ve BOSLUK ile yapiliyor, kutuyla degil.
*/
body.pano tr.satir-detay > td {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inset);

  /* Solda ince bir dikis: bu blok ustteki satira AIT. */
  border-inline-start: 3px solid var(--border-default);
}

/* Panel icindeki basliklar govde metninden ayrissin ama bagirmasin. */
body.pano tr.satir-detay h3 {
  margin-block: var(--space-3) var(--space-1);
  font-size: var(--text-base);
}

body.pano tr.satir-detay h3:first-child { margin-block-start: 0; }

/*
| --- Islem satiri — girdi KIRPILMASIN ------------------------------------
|
| Sahibinin ekraninda "Hangi belge isteniy", "Saha notu (isteg l" ve
| "Red gerekcesi" yarim gorunuyordu: `girdi-orta` 9.5rem sabit ve
| yer isteyen bir yer tutucu metni tasiyamiyor.
|
| ⛔ SABIT GENISLIGI BUYUTMEK COZUM DEGIL: dar ekranda bu sefer tasar.
| Girdi, satirda KALAN yeri aliyor ve bir taban genislikten kucuk
| dusmuyor.
*/
body.pano tr.satir-detay .dizi {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

body.pano tr.satir-detay .dizi > input[type="text"],
body.pano tr.satir-detay .dizi > input:not([type]),
body.pano tr.satir-detay .dizi > .girdi-orta,
body.pano tr.satir-detay .dizi > .girdi-dar {
  flex: 1 1 14rem;
  inline-size: auto;
  min-inline-size: 0;

  /*
  | ⚠️ TAVAN — 18 Agustos 2026. Ustteki kural kirpilmayi cozdu ama
  | UST SINIR KOYMADI: girdi satirda kalan YERIN TAMAMINI aliyordu.
  |
  |   OLCULDU (1440 px ekran, /admin/bayiler):
  |     "Red gerekcesi"  girdisi  1200 px
  |     ikinci form                1159 px
  |
  | Bes yuz karakterlik bir gerekce alani ekranin tamamini kapliyordu.
  | Ayni kusurun kart icindeki hali bu dosyada zaten duzeltilmisti
  | (`.kart .alan` 34rem); ayni tavan burada da gecerli — panelde tek
  | bir olcu siniri olsun, kural ekrandan ekrana degismesin.
  |
  | ⛔ `flex-basis` KUCULTULMEDI: 14rem taban kirpilmayi onleyen sey.
  | Degistirilen yalniz tavan.
  */
  max-inline-size: 34rem;
}

/*
| ⚠️ AYNI TAVAN `x-alan` ICIN DE GECERLI — 18 Agustos 2026.
|
| Ustteki kural `.dizi > input` desenine bakiyor. Hakedis ekraninda red
| gerekcesi `x-alan` bileseniyle yeniden yazilinca isaretleme
| `<label class="alan">` oldu ve tavanin disina dustu: alan `colspan=7`
| bir hucrenin TAMAMINI aliyordu. Panelde tek bir olcu siniri var, kural
| bilesen degistirdi diye degismez.
*/
body.pano tr.satir-detay .alan {
  max-inline-size: 34rem;
}

/* Alanin yardim metniyle altindaki dugme birbirine yapismasin. */
body.pano tr.satir-detay .alan + .dugme {
  margin-block-start: var(--space-3);
}

/*
| Islem formlari alt alta gelirken birbirine yapismasin: her form kendi
| satiri, aralarinda nefes payi.
*/
body.pano tr.satir-detay form + form,
body.pano tr.satir-detay form + p,
body.pano tr.satir-detay p + form { margin-block-start: var(--space-2); }

/* ==========================================================================
   MOTOTEKER Asistan — Tur 5 / B1-B4
   ========================================================================== */

/*
 | ⛔ BU BOLUM SONRADAN YAZILDI ve sebebi kayda deger: B1-B4 boyunca asistan
 | CALISIYORDU, testler yesildi, cevaplar dogruydu — ama on iki sinifin
 | HICBIRININ CSS'i yoktu. Test isaretlemeyi okur, gorunumu okumaz. Yesil
 | takim "bitti" demek degil; ekrana bakmak ayri bir is.
 |
 | ⚠️ Ayni tarama iki OLU SINIF buldu: `.katman` ve `.etiket-dizi` hicbir
 | yerde tanimli degildi. Ornek sorular suslenmemis madde isareti olarak
 | dokuluyordu. Gercek adi `.cip-dizi`; gorunumler duzeltildi.
 */

/*
 | KOSE CEKMECESI — sahibinin karari: "her sayfada kosede acilir kutu".
 |
 | ⛔ `position: fixed` ve `<body>` seviyesinde. Baslikta dursaydi yapiskan
 | basligin yiginlama baglamina hapsolurdu.
 |
 | z-index --z-overlay (300): --z-sticky (200) olan yapiskan basligin
 | USTUNDE, --z-tooltip (600) altinda. Cekmece bir ipucunu ortemez.
 */
.asistan-cekmece {
  position: fixed;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: var(--z-overlay);
}

/*
 | ACICI LACIVERT, KIRMIZI DEGIL. Depoda kirmizi YALNIZ CTA ve kritik
 | aksiyon (tokens.css --brand-red-600). Her sayfada, her an duran bir
 | dugme CTA degildir; kirmizi olsaydi katalogdaki "Sepete ekle" ile
 | gorsel agirlikta yarisir ve satin alma yolunu zayiflatirdi.
 */
.asistan-acici {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-block-size: var(--dokunma-hedefi);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);

  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: 600;

  cursor: pointer;
  list-style: none;                    /* varsayilan ucgen isaretci yok */
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.asistan-acici::-webkit-details-marker { display: none; }
.asistan-acici:hover { background: var(--brand-blue-700); }
.asistan-acici .ikon { flex: 0 0 auto; }

/* Acikken dugme de durumu gosterir; anlam yalniz kutunun varligina bagli
   kalmaz — `.arama-acilir[open]` ile ayni ilke. */
.asistan-cekmece[open] > .asistan-acici { background: var(--brand-blue-700); }

/*
 | KUTU OPAK OLMAK ZORUNDA. Anasayfada hero VIDEO; yariseffaf bir kutu
 | icindeki metnin kontrastini video karesine baglardi — `.arama-panel`
 | ile birebir ayni gerekce.
 |
 | Yukseklik sinirlaniyor ve ICERIDE kayiyor: bes urunluk bir cevap
 | kucuk ekranda kutuyu ekran disina tasirdi.
 */
.asistan-kutu {
  position: absolute;
  inset-block-end: calc(100% + var(--space-1));
  inset-inline-end: 0;

  inline-size: min(24rem, calc(100vw - var(--space-4)));
  max-block-size: min(30rem, calc(100svh - var(--space-8)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);

  background: var(--surface-default);
  /*
   | ⛔ KENARLIK KALDIRILDI — 21 Agustos 2026.
   |
   | Burada `1px solid var(--border-default)` + `--shadow-md` vardi:
   | DESIGN.md L232'nin yasakladigi birlesim. Yuzen bir panelde AYRIMI
   | YAPAN SEY YUKSELTIDIR; kenarlik ikinci bir sinir cizip "hayalet
   | kart" gorunumu uretiyordu.
   |
   | ⚠️ VE KENARLIK ERISILEBILIRLIK ISI DE YAPMIYORDU: `--border-default`
   | beyaz uzerinde 1.28:1 — WCAG 1.4.11'in 3:1 sinirinin cok altinda.
   | Yani gorunur bir sinir degil, dekoratif bir cizgiydi. Sinir
   | gerekseydi cozum ZAYIF bir kenarlik + golge degil, GUCLU bir
   | kenarlik olurdu.
   */
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
}

.asistan-baslik {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/*
 | FORM: etiket kendi satirinda, girdi ve dugme yan yana. Cekmecede etiket
 | `gizli-erisilebilir` oldugu icin yer kaplamaz — ayni kural iki yuzeyde
 | de calisir.
 */
.asistan-form, .asistan-kutu form {
  display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: end;
  margin: 0;
}
.asistan-form > label, .asistan-kutu form > label { flex: 1 0 100%; }
.asistan-form > button, .asistan-kutu form > button { flex: 0 0 auto; }

/*
 | ⚠️ `:not([type="hidden"])` — `@csrf` formun ILK cocugu olarak gizli bir
 | girdi basiyor. Tarayici onu `display: none` yaptigi icin bugun zararsiz,
 | ama esnek kutu cocugu saymak niyeti yanlis anlatirdi.
 */
.asistan-form > input:not([type="hidden"]),
.asistan-kutu form > input:not([type="hidden"]) { flex: 1 1 16rem; min-inline-size: 0; }

/*
 | ⛔ OLCU SINIRI — TAM EKRAN YUZEYININ ASIL KUSURUYDU. 1280px ekranda
 | olculdu: soru kutusu 1192px, cevabin etiketi solda degeri sag kenarda,
 | aralarinda goz baglantiyi kuramayacak kadar bosluk. `.kap` tek basina
 | yetmiyor — kap sayfayi ortalar, SATIR UZUNLUGUNU kisaltmaz.
 |
 | ⚠️ CEKMECEDE ETKISIZ: kutu zaten 24rem. Tek kural iki yuzeye de dogru
 | davraniyor, yuzeye gore dallanma gerekmiyor.
 */
.asistan-form, .asistan-cevap, .asistan-ornekler { max-inline-size: 46rem; }

/*
 | OKUMA SATIRI — `aria-live` bolgesi.
 |
 | ⛔ BOSKEN `display: none` YAPILMAZ. Gizlenmis bir canli bolgeye icerik
 | yazildiginda cogu ekran okuyucu duyurmaz; bolge DAIMA agacta kalmali.
 | Bos `<p>`nin satir kutusu zaten sifir; yalniz bosluklari sifirlaniyor.
 |
 | ⛔ ANIMASYON YOK. Yukleme gostergesini nabiz gibi attirmak yavas bir
 | istekte bes saniyeyi asar ve WCAG 2.2.2'nin duraklatma kurali devreye
 | girer. Durumu METIN soyluyor ("Aranıyor…") — hem daha durust hem
 | ekran okuyucunun zaten okudugu sey.
 */
.asistan-okuma {
  margin-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.asistan-okuma:empty { margin-block: 0; }

.asistan-cevap { margin-block-start: var(--space-2); }

.asistan-ozet {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-default);
  text-wrap: pretty;
}

/*
 | ONAYLI URUN ACIKLAMASI — ALINTI, asistanin kendi sesi DEGIL.
 |
 | ⛔ YAN SERIT (border-inline-start) YOK. Renkli yan cizgi ucuz alinti
 | isareti; ayrimi ZEMIN yapiyor: acik gomme yuzey, cevabin geri kalani
 | duz zeminde. Malzeme farki, cizgi degil.
 */
.asistan-aciklama {
  margin-block: var(--space-1) 0;
  padding: var(--space-1) var(--space-2);

  background: var(--surface-inset);
  border-radius: var(--radius-control);

  font-size: var(--text-sm);
  color: var(--text-default);
  line-height: var(--leading-body, 1.6);
  text-wrap: pretty;
}

/*
 | SATIRLAR — etiket solda, deger sagda. Urun adi + fiyat, durum + deger:
 | ikisi de ayni okuma yonunu istiyor.
 */
.asistan-satirlar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.375rem var(--space-2);
  align-items: baseline;
  margin-block: var(--space-2) 0;
}
.asistan-satirlar dt {
  min-inline-size: 0;
  font-size: var(--text-sm);
  color: var(--text-default);
}
.asistan-satirlar dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/*
 | MASKELI DEGER — pano KPI'siyla ayni gorsel dil (`.tutar-maskeli`).
 | Sozcuk duzeyinde zaten ayrismiyor ("maskelendi" ayni sabitten);
 | gorsel duzeyde de ayrismasin.
 */
.asistan-satirlar dd.maskeli { color: var(--text-muted); font-weight: 400; letter-spacing: 0.15em; }
.asistan-satirlar dd.maskeli .not { letter-spacing: normal; display: block; font-size: var(--text-xs); }

.asistan-kaynak {
  margin-block: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.asistan-kaynak a { color: var(--text-link); }

.asistan-ornekler { padding: 0; margin-block-start: var(--space-2); }

/*
 | Ornek gruplarinin basligi — revize m.13.
 |
 | Ornek sayisi dortten yirmi bese cikinca duz bir cip yigini okunmaz
 | oldu; basliklar onu "para / randevularim / siparislerim" diye
 | ayiriyor. Baslik KUCUK ve SESSIZ: cipler asil ogedir, baslik yalniz
 | onlari ayirir.
 */
.asistan-ornek-baslik {
  margin-block: var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.asistan-ornek-baslik:first-of-type { margin-block-start: var(--space-1); }
.asistan-ornekler > .not { margin-block-end: var(--space-1); }

/*
 | ⛔ SAYFA SONUNA PAY — CANLI TARAYICIDA OLCULDU. Sayfanin en altina
 | inildiginde yuzen acici footer'in YASAL SATIRININ ustune biniyordu:
 | "Yasal garanti: 2 yil veya 1,6 mm dis derinligi…". Kalici olarak
 | ortulen bir yasal metin kabul edilemez.
 |
 | ⚠️ PAY GOVDEYE DEGIL, SON BLOGA veriliyor: `body`ye eklenen dolgu
 | footer'in LACIVERT zemininin altinda beyaz bir serit birakirdi —
 | zemin footer'da biter, govdede degil.
 |
 | `:has()` ile kosullu: modul kapaliyken cekmece basilmiyor ve o zaman
 | bosluga da gerek yok. Depoda kurulu desen (bkz. `main#icerik` kurali).
 */
body:has(.asistan-cekmece) > footer,
body:has(.asistan-cekmece) > main:last-of-type {
  padding-block-end: calc(var(--space-3) + var(--dokunma-hedefi));
}

/*
 | ⚠️ DAR EKRAN ICIN AYRI KURAL YOK ve bu bir eksiklik degil, OLCUM
 | sonucu. Once fazladan bir dar-ekran blogu yazilmisti: acici tam
 | genislik, kutu tam genislik. Dar ekranda olculdu ve ikisi de GEREKSIZ
 | cikti — kutunun taban kurali zaten `calc(100vw - …)` ile sinirli,
 | acici da dogal halinde siginiyor. Tam genislik acici hicbir sey
 | kazandirmiyor, yalniz ekranin dibinden bir serit goturuyordu.
 |
 | ⛔ O BLOK IZINSIZ BIR KIRILMA NOKTASI DA GETIRIYORDU ve `ThemeTest`
 | onu yakaladi — silindikten SONRA bile, cunku tarama dosyanin METNINI
 | okuyor ve bu yorumdaki ornek deger de veri sayiliyordu. Ayni tuzaga
 | bu depoda ikinci kez dusuldu: aciklama yazarken kuralin kendi
 | soz dizimini yazma.
 |
 | Calismayan kuraldan beteri, calisiyor sanilan gereksiz kuraldir.
 */

/*
 | ORNEK SORULAR — GERCEKTEN TIKLANABILIR dugmeler.
 |
 | ⛔ ONCE `<span class="cip">` IDI ve `.cip` bu depoda yalniz HARF ARALIGI
 | veriyor; hicbir zemin, hicbir dolgu. Ekranda duz metin olarak duruyordu.
 | Dugme gibi gorunup tiklanmayan bir sey, duz metinden de kotudur.
 |
 | ⚠️ `type="submit"` + `form="…"` + `formnovalidate`: BETIKSIZ DE CALISIR.
 | Tarayici formu tiklanan dugmenin degeriyle gonderir; `formnovalidate`
 | olmasaydi bos ve `required` olan soru girdisi gonderimi engellerdi.
 | JS varsa `asistan.js` `submitter`i okuyup istegi yerinde yapiyor.
 */
.asistan-ornek {
  display: inline-block;
  padding: 0.25rem 0.75rem;

  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);

  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-link);
  letter-spacing: var(--track-small);
  text-align: start;

  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.asistan-ornek:hover  { background: var(--surface-muted); border-color: var(--border-strong); }
.asistan-ornek:active { background: var(--surface-sunken); }

/*
 | SONUC SAYACI — katalog izgarasinin baslangic cizgisi.
 |
 | ⛔ CUMLE DEGIL OLCUM. Once `<p>44 ürün.</p>` idi: noktali, govde
 | boyutunda, gorevi belirsiz. Sahibi "cok amatorce duruyor" dedi.
 |
 | ⚠️ INCE CIZGI SUS DEGIL, SINIR: filtre yukarida biter, sonuc asagida
 | baslar. Kutu ya da rozet kullanmadim — bir sayac icin cerceve fazla
 | agirlik olurdu; tek bir hairline yeter.
 |
 | ⚠️ `tabular-nums`: filtre degistikce sayi degisiyor ve rakamlar esit
 | genislikte olmazsa satir her seferinde hafifce kayiyor.
 */
.sonuc-sayaci {
  margin-block: var(--space-3) var(--space-2);
  padding-block-end: var(--space-1);
  border-block-end: 1px solid var(--border-default);

  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-ui);
}

/*
 | ⛔ SAYFALAMA ORTALANDI. Olculdu: satir 1132px genislikteydi ve dort
 | dugme sol kenara yapisik duruyordu — geri kalan bin piksel bos.
 | Izgaranin altinda asimetrik duran bir kontrol kumesi, hizalanmamis
 | gibi gorunuyordu.
 */
.sayfalama { justify-content: center; }

/* Sayfa numaralari esit genislikte: 1 ile 2 arasinda kutu boyu oynamasin. */
.sayfalama-baglanti { font-variant-numeric: tabular-nums; }

/*
|--------------------------------------------------------------------------
| "Lastigin icinde ne var" — KESIT HAREKETI
|--------------------------------------------------------------------------
|
| Sahibi: "buraya animasyon ve sekilli sukullu bir sey yapmamiz lazim,
| premium ust duzey, vay be dedirtecek."
|
| ⛔ GENEL AMACLI "BELIR VE YUKSEL" YAPILMADI. Her bolume ayni girisi
| takmak bir tasarim degil bir refleks; ekranda da oyle okunuyor.
| Buradaki hareket BU BOLUMUN KONUSUNU anlatiyor: baslik "lastigin
| icinde ne var" diyor, kartlar da lastigin KATMANLARI. O yuzden:
|
|   1. Kartlarin ustunden bir KESIT CIZGISI soldan saga cekiliyor —
|      lastigi ortadan kesip icine bakmanin isareti.
|   2. Kartlar sirayla ve HAFIF olceklenerek yerine oturuyor; ust uste
|      binmis katmanlarin yerlesmesi gibi.
|
| ⛔ `data-hareket="zorunlu"` KULLANILMADI ve bu bilincli: o isaret
| yalnizca hareketin BILGININ KENDISI oldugu yerde (durdurulabilir hero
| videosu, sonsuz serit). Buradaki giris dekoratif; hareket azaltma
| isteyen kullanici onu gormemeli. Tokens.css'teki kural aynen gecerli.
|
| ⛔ VARSAYILAN DURUM = SON DURUM. Hicbir kural kartlari gizlemiyor:
| baslangic durumu YALNIZ `@keyframes` icinde yasiyor ve `backwards` ile
| yalnizca gecikme boyunca uygulaniyor. Betik hic calismazsa, gozcu hic
| ateslemezse, sekme arka plandaysa — kartlar oldugu gibi gorunur.
|
| ⚠️ BU SATIR BIR HATANIN ARDINDAN YENIDEN YAZILDI. Ilk yazimda kartlar
| `opacity: 0` ile basliyordu ve tarayicida olculdu: boyama yapmayan bir
| baglamda gozcu ATESLEMIYOR, bolum tamamen gorunmez kaliyordu.
*/

/* Kesit cizgisi — kartlarin ustunde, bolumun genisligince. */
.teknoloji-izgara { position: relative; }

.teknoloji-izgara::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--space-3) * -0.5);
  inset-inline: 0;
  block-size: 1px;
  background: var(--border-default);
}

/*
 | ⚠️ IKINCI CIZGI: kirmizi olan yalnizca CEKILIRKEN gorunuyor ve
 | soluyor. Kalici kirmizi bir cizgi bolume gereksiz agirlik verirdi;
 | kirmizi bu depoda CTA rengi.
 */
.teknoloji-izgara[data-kesit="hazir"]::after {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--space-3) * -0.5);
  inset-inline: 0;
  block-size: 1px;
  background: var(--brand-red-600);
  transform: scaleX(0);
  transform-origin: left center;
}

.teknoloji-izgara[data-kesit="cizildi"]::after {
  animation: kesit-cizgisi var(--duration-cizim) var(--ease-out) forwards;
}

@keyframes kesit-cizgisi {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/*
 | KATMANLARIN OTURMASI.
 |
 | ⚠️ `transform` ve `opacity` — duzen ozelligi animasyonlanmiyor.
 | Ofset 18px: hissedilir ama sicramaz. Olcek 0.985: "yerine oturdu"
 | duygusu icin yeterli, buyuyup kuculen bir kart izlenimi vermiyor.
 */
/*
 | ⛔ KART GIRIS ANIMASYONU KALDIRILDI — ve sebebi iki kez olculmus bir
 | tehlike.
 |
 | 1. Ilk yazimda kartlar `opacity: 0` ile basliyor, gozcu tetikleyince
 |    geri geliyordu. Tarayicida olculdu: GOZCU ATESLEMEDI ve bolum
 |    tamamen gorunmez kaldi. Sebep: boyama yapmayan bir baglamda
 |    IntersectionObserver geri cagrisi hic calismiyor.
 |
 | 2. Sonra baslangic durumu yalniz `@keyframes` icine tasindi
 |    (`animation-fill-mode: backwards`). Ayni tarayicida olculdu:
 |    ANIMASYON DA ILERLEMIYOR ve `backwards` dolgu kartlari `from`
 |    durumunda — yani yine `opacity: 0` — KALICI birakiyordu.
 |
 | Iki denemede de ayni sonuc: kademeli bir giris, staggering icin
 | `animation-delay` istiyor; `delay` de dogru gorunmek icin `backwards`
 | istiyor; `backwards` ise animasyon ilerlemezse icerigi hapsediyor.
 | Bu zincirin guvenli bir ucu yok.
 |
 | ⛔ KARAR: ICERIGI GIZLEYEBILEN HICBIR HAREKET BIRAKILMADI. Bolumun
 | hareketi artik iki yerde yasiyor ve ikisi de SUS katmaninda:
 |   · kesit cizgisi — bir `::after`, kaybolsa kimse bir sey kaybetmez
 |   · imlec/odak yaniti — kartin ustundeki kirmizi cizgi ve gorselin
 |     hafif yaklasmasi
 |
 | ⚠️ DERS: "varsayilan durum = son durum" kurali yalnizca CSS'te degil,
 | KEYFRAME + FILL-MODE bilesiminde de gecerli. Baslangic durumunu nereye
 | koyarsan koy, animasyon calismazsa orada kalir.
 */

/* ==========================================================================
   KENAR ISIGI — 21st.dev `InfoCard`tan porte edildi, 23 Agustos 2026
   ==========================================================================
   Ozgun bilesen imlecin acisina gore donen bir `conic-gradient` kenarlik
   kuruyordu. Fikir alindi, TEKNIK ALINMADI.

   ⛔ GRADYAN KULLANILMADI ve bu bir tercih degil kural: `ThemeTest`
   *"GRADYAN HIC YOK — istisna da kalkti ... SIFIR"* diyor. `conic-gradient`
   o testin regex'inde adiyla yazmiyor; yazmiyor diye kullanmak, kurali
   degil regex'teki bosluğu izlemek olurdu.

   YERINE: cerceve `overflow: hidden` tasiyan bir kutu, icinde DUZ RENKLI
   bir cubuk imlecin acisina gore donuyor. Kart opak ve 2px iceride
   duruyor, dolayisiyla cubugun yalnizca KENARDAKI bandi goruluyor. Ayni
   gorsel sonuc, sifir gradyan.

   ⚠️ ESKI UST CIZGI KALDIRILDI, USTUNE EKLENMEDI: ikisi de ayni motifin
   (kesit cizgisi) etkilesim yankisiydi. Ust uste binen iki kirmizi isaret
   birbiriyle yarisirdi.
   ========================================================================== */

.teknoloji-karti-cerceve {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-marketing);

  /* Kenarligin kalinligi: kart bu kadar iceride duruyor. */
  padding: 2px;

  /* Durgun haldeki kenar — isik sonunce goruleni bu. */
  background: var(--border-default);
}

.teknoloji-karti-cerceve::before {
  content: '';
  position: absolute;

  /*
   | Cubuk KARTTAN BUYUK: donerken kosede bosluk kalmasin diye. Merkeze
   | oturtuluyor, sonra imlecin acisiyla donduruluyor.
   */
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 240%;
  block-size: 38%;

  background: var(--action-primary);
  transform: translate(-50%, -50%) rotate(var(--kart-aci, 0rad));
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.teknoloji-karti-cerceve:hover::before,
.teknoloji-karti-cerceve:focus-within::before { opacity: 1; }

/*
 | ⛔ KARTIN KENDI KENARLIGI KAPANIYOR. `.kart` 1px kenarlik veriyor;
 | cercevenin 2px rimiyle birlikte IKI CIZGI goruluruz. Kenarlik gorevi
 | artik cercevede.
 */
.teknoloji-karti-cerceve > .teknoloji-karti {
  position: relative;   /* isigin ustunde */
  flex: 1;
  border: 0;
  border-radius: calc(var(--radius-marketing) - 2px);
}

/*
 | BASLIK SILME — ayni bilesenden, `clip-path` ile.
 |
 | Ozgun bileseninde baslik metninin ARKASINA bir renk blogu yukaridan
 | asagi aciliyor. Gradyan yok, yalniz `clip-path` — bu yuzden oldugu
 | gibi alinabildi.
 |
 | ⚠️ METIN RENGI DEGISMIYOR ve degismesine gerek yok: beyaz hem lacivert
 | govde (19.47:1) hem kirmizi blok uzerinde AA gecirir. Renk cevirmek
 | ikinci bir kontrast karari acardi.
 */
.teknoloji-karti-baslik {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: 0.25em;
  margin-inline-start: -0.25em;
}

.teknoloji-karti-baslik::before {
  content: '';
  position: absolute;
  inset: -0.12em -0.25em;
  background: var(--action-primary);
  z-index: -1;

  /* Kapali: ortada sifir yuksekliginde bir cizgi. */
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transition: clip-path var(--duration-base) var(--ease-out);
}

.teknoloji-karti-cerceve:hover .teknoloji-karti-baslik::before,
.teknoloji-karti-cerceve:focus-within .teknoloji-karti-baslik::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Gorsel imlec altinda hafifce yaklasiyor — kesit fotografina bakmak. */
.teknoloji-karti-gorsel img {
  transition: transform var(--duration-base) var(--ease-out);
}

.teknoloji-karti:hover .teknoloji-karti-gorsel img,
.teknoloji-karti:focus-within .teknoloji-karti-gorsel img { transform: scale(1.04); }

/*
 | PANEL FORM ALANLARININ OLCUSU — 18 Agustos 2026.
 |
 | ⛔ SAHIBI BILDIRDI: "konusuyla alakali olan yerler cok cirkin dagilmis."
 | Kusurun yarisi gruplamaydi (kartlara bolundu), yarisi OLCU:
 |
 |   OLCULDU (1440 px ekran, musteri yorumlari):
 |     "İznin nereden alındığı"  girdisi  1137 px
 |     "Görsel alt metni"        girdisi  1087 px
 |
 | Kirk karakterlik bir metin alani sayfanin tamamini kapliyordu. Bos bir
 | girdi ne kadar genisse o kadar "doldurulmamis" gorunur; ayrica goz
 | etiketten degere giderken bin piksel yol aliyor.
 |
 | ⚠️ TABLO ICI GIRDILER DISARIDA: `.tablo-yogun` ve `.alan-satiri` kendi
 | olculerini veriyor (`girdi-dar` 7rem, `girdi-orta` 9.5rem). Bu kural
 | yalniz KART ICINDEKI yigin formlarina bakiyor.
 |
 | ⚠️ `max-inline-size`, `width` DEGIL: dar ekranda alan kabina uyar,
 | kirpilmaz.
 */
/*
 | ⚠️ `[type="file"]` DISLAMASI KALDIRILDI — 18 Agustos 2026.
 |
 | Ilk yazimda `file` da `checkbox`/`radio` ile birlikte disarida
 | birakilmisti ve GEREKCESI YAZILMAMISTI — cunku yoktu, uc tur bir
 | cirpida elenmisti. Sonucu musteri yorumlari ekraninda goruldu:
 |
 |   AYNI KARTTA, AYNI `.alan` yapisinda:
 |     "Gorsel"           (file)  1310 px
 |     "Gorsel alt metni" (text)   544 px
 |
 | Ust ustte duran iki alan iki ayri olcude. Dosya secicinin genis
 | olmasinin bir sebebi yok: gorunen sey bir dugme ve dosya adi.
 |
 | `checkbox` ve `radio` DISARIDA KALIYOR ve bunun gerekcesi var:
 | ikisi de sabit olculu kutu, tavan onlara anlamsiz.
 */
.kart .alan > input:not([type="checkbox"]):not([type="radio"]),
.kart .alan > select,
.kart .alan > textarea {
  max-inline-size: 34rem;
}

/*
 | ⚠️ ACIK GENISLIK VERILMIS ALANLAR KORUNUYOR: `girdi-dar`/`girdi-orta`
 | bilincli olculer ve bu kural onlari EZMEZ — kendi `width` bildirimleri
 | daha ozgul degil, ama `max-inline-size` bir tavan; 7rem zaten altinda.
 */

/*
|--------------------------------------------------------------------------
| SAYFALAR ARASI GECIS — @view-transition (26 Agustos 2026)
|--------------------------------------------------------------------------
|
| ⛔ BUGUNE KADAR HER TIKLAMA BEYAZ FLASTI. Depoda 31 gecis ve 8 animasyon
| var; hepsi sayfanin ICINDE. Sayfadan sayfaya gecis ise hicbir sey
| degildi — vitrinin en cok tekrarlanan ani, en kaba ani oluyordu.
|
| ⚠️ BETIK YOK, CSP'YE DOKUNULMUYOR. Ayni kokendeki gezinmede tarayici
| eski ve yeni belgeyi kendisi capraz soluyor.
|
| ⚠️ DESTEKLEMEYEN TARAYICIDA (bugun Firefox) HICBIR SEY DEGISMEZ —
| kural sessizce yok sayilir, bugunku davranis aynen surer. Asamali
| iyilestirme; kayip yok.
|
| ⚠️ `prefers-reduced-motion` KAPISI KOYULMADI — sahibinin 11 Agustos
| karari (kendi makinesinde goremezdi). `tokens.css`teki genel hareket
| bloguna da takilmiyor: o blok `*, ::before, ::after` sayiyor,
| `::view-transition-*` sozde ogeleri o listede yok.
|
| ⚠️ SURE `--duration-fast` (150ms), plandaki 200ms DEGIL — ve sebebi
| olcum: yeni sayfada `panel-giris` (200ms) da oynuyor ve ikisi ARDISIK.
| 200+200 = 400ms bir gezinme icin agir; 150+200 = 350ms sinirda kaliyor.
| WCAG 2.2.2 esigi (5sn) ikisinde de asilmiyor, mesele his.
|
| ⛔ `panel-giris` KAPATILMADI: ilk aciliste (gelinen sayfa yok) gecis
| HIC olmaz ve o zaman giris hareketi de kapali olsaydi sayfa hicbir
| hareketle acilmazdi. Iki hareket ayni ani doldurmuyor — biri
| sayfalar ARASINI, digeri sayfanin KENDI acilisini anlatiyor.
*/
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-fast);
  animation-timing-function: var(--ease-in-out);
}

/*
| SEPET KALEMI — urun yuzu, ad ile yan yana. 26 Agustos 2026.
|
| ⛔ TABLO BIR MUHASEBE FISI GIBI OKUNUYORDU: kalem hucresi duz metindi
| ve musteri odeyecegi lastigi goremiyordu.
|
| ⚠️ 3rem = 48px, sub-8px kumesine GIRMEZ (o kume yalniz 8px altini
| baglar); yeni bir olcu acmiyor.
|
| ⚠️ `border` + `--radius-control`, GOLGE YOK: kenarlik + golge ikilisi
| hayalet karti dogurur ve bekci hakli olarak duser.
|
| ⚠️ `object-fit: contain`: lastik fotograflari kare degil ve `cover`
| disini kirpardi — urunun profili tam gorunmeli.
*/
.sepet-kalem {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sepet-kalem img {
  flex: 0 0 auto;
  inline-size: 3rem;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-default);
}

/*
| GENIS OLCUM — kendi satirini kaplayan kutu. 26 Agustos 2026.
|
| ⛔ OLCULEN KUSUR: bayi panosunda dort finansal kart esit yukseklikteydi
| ama yalniz cari kartinda uc satirlik bir dokum vardi; ilk uc kartin
| altinda ~119px olu bosluk kaliyordu.
|
| ⚠️ BU BIR DEGISTIRICI, YENI BIR YUZEY DEGIL: `-karti` uclusu (yuzey +
| govde + baslik) acmiyor, `.kart.olcum`un uzerine tek bir yerlesim
| bildirimi koyuyor. VitrinKartDiliTest'in kovaladigi sey o uclu.
|
| ⚠️ DAR EKRANDA ZARARSIZ: izgara tek sutuna dustugunde `1 / -1` zaten
| tek sutunun kendisidir.
*/
.olcum-genis { grid-column: 1 / -1; }

/*
| ⛔ TAM GENISLIK KUTU AUTO-FIT'I BOZAR ve bu tarayicida OLCULDU.
|
| `.hesap-ozet` izgarasi `repeat(auto-fit, minmax(11rem, 1fr))`.
| Auto-fit BOS parcalari toplar — ama `1 / -1` diyen bir oge butun
| parcalari VAR EDER ve toplama artik calismaz. Sonuc: uc kutu ilk uc
| parcada, sagda IKI BOS PARCA (~380px). Olculdu: 176+176+176 ve satirin
| geri kalani bos.
|
| Serit tam genislik bir kutu TASIYORSA parca sayisi artik akiskan
| olamaz; ucu esit boluserek satiri doldurur.
|
| ⚠️ KAPSAM `:has()` ILE, YENI SINIF YOK: /hesabim'daki dort kutuluk
| serit `.olcum-genis` tasimadigi icin bu kurala hic girmiyor.
|
| ⚠️ UC SAYISI BU YUZEYIN ICERIGINE BAGLI (bayi panosunda uc para kutusu
| + bir imkan kutusu). Serit baska bir sayiyla kurulursa bu kural da
| yeniden dusunulmeli — o yuzden sayi burada ACIKCA yaziyor, gizli bir
| formulden turemiyor.
*/
@media (min-width: 721px) {
  .hesap-ozet:has(.olcum-genis) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
| Genis kutunun ici iki parca: solda ANA rakam, sagda dokum. Dokum
| kisik zeminde durur — ayni agirlikta okunursa "hangisi benim param"
| sorusu yeniden dogar.
*/
@media (min-width: 721px) {
  .olcum-genis {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: var(--space-3);
  }

  /* Etiket ve tutar sol sutunda ust uste kalir. */
  .olcum-genis > .olcum-etiket,
  .olcum-genis > .tutar,
  .olcum-genis > .rozet { grid-column: 1; }

  .olcum-genis-dokum {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    min-inline-size: 18rem;
  }
}

.olcum-genis-dokum {
  margin-block-start: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
}

/*
| KOYU SERITTE DOKUM PANELI — acik gri bir blok lacivertin uzerinde
| YAMA gibi durur. Zemin, `--kenar-isik`in kullandigi ayni yontemle
| (beyazin cok az bir orani) bir TON FARKINA iniyor: ayni yuzeyin bir
| basamak acigi, ayri bir malzeme degil.
|
| ⚠️ GRADYAN DEGIL: `color-mix` tek bir duz renk uretir. Depoda 26 yerde
| kurulu (bkz. tokens.css:908).
*/
.koyu .olcum-genis-dokum {
  background: color-mix(in srgb, var(--text-inverse) 8%, transparent);
}

/*
| Koyu zeminde veri listesi: etiket kisik, deger beyaz. Yazilmazsa
| ikisi de `--text-default` (koyu gri) kalir ve lacivertte OKUNMAZ.
*/
.koyu .veri-listesi dt { color: var(--text-on-inverse-muted); }
.koyu .veri-listesi dd { color: var(--text-inverse); }

/*
| ⛔ RISK SATIRI KIRMIZI KALIR — ve bu satir bir DUZELTMEDIR.
|
| Ustteki iki kural once `.veri-satir-risk`i de eziyordu: "Geciken"
| satiri butun oteki etiketlerle AYNI renge dusuyordu. Tarayicida
| olculdu (10.46:1, yani kisik etiket rengi) ve fark edildi.
|
| Bilgi kaybolmuyordu — satir KALIN ve yaninda "Gecikmiş" cipi var
| (renk tek basina anlam tasimaz kurali) — ama sinyal yok olmustu.
| `--danger-on-inverse` bu is icin olculdu: lacivert uzerine 8.53:1.
*/
.koyu .veri-listesi .veri-satir-risk { color: var(--danger-on-inverse); }

/*
| URUN SATIN ALMA BLOGU — 26 Agustos 2026.
|
| Fiyat + adet + "Sepete ekle" + uyumluluk baglantisi tek bir yuzeyde
| toplanir. Emsal: `.kampanya-teklif` (sahibinin begendigi desen).
|
| ⛔ KENARLIK YOK, GOLGE YOK: ikisi birlikte hayalet kart eder ve bekci
| hakli olarak duser. Ayrisma yalniz ZEMIN kademesiyle.
|
| ⛔ `.kart` DEGIL: bu kap bir kart olsaydi ic ice kart bekcisine
| girerdi ve zaten bir kart DEGIL — basligi ve govdesi yok, bir
| gruplama.
*/
.urun-teklif {
  padding: var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
}

/*
| ⛔ FIYAT DISPLAY BASAMAGINA — VE BU KURAL KAPSAMLI OLMAK ZORUNDA.
|
| Markup'a `tutar-display` sinifi eklemek CALISMAZ: `.tutar` (2215)
| dosyada `.tutar-display`den (287) SONRA geliyor ve ikisi ayni
| ozgullukte (0,1,0) — sonra gelen kazanir. `.urun-teklif .tutar`
| (0,2,0) ile kazanan degisiyor.
|
| ⚠️ MICRODATA AYNI `<p>` UZERINDE KALIYOR (`itemprop="offers"`):
| gorunum degisti, yapisal veri degismedi.
*/
.urun-teklif .tutar {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
}