/* ==========================================================================
   GAZALI AVIATION — cerez.css
   Çerez rızası: şerit (1. katman) · tercih penceresi (2. katman) · yüzen simge
   İşaretleme: private/page/tema/core/cerez.php · Davranış: js/cerez.js
   Kaynak: simyakoleji.local/public/assets/tema/css/cerez.css — UYARLANDI.

   Yalnız çerez sistemi açıkken yüklenir (head.php, cerezSistemiAcik()).
   Yukarı çık düğmesi bu dosyada DEĞİL (main.css 18. bölüm): sistem
   kapatılınca o düğme kalmalı.

   ⚠ SABİT HEX YOK — renkler main.css jetonlarından (var(--navy-*) /
     var(--gold-*)); rgba() gölge/örtüler hariç (sitenin geri kalanıyla aynı).
   ⚠ FİZİKSEL left/right YOK: şerit inset-inline, simge inset-inline-start,
     anahtarın düğmesi inset-inline-start ile kayar — RTL kendiliğinden.
   ⚠ Z-INDEX: yüzen simge 80 (yukarı çık ile aynı katman) · şerit 94 —
     sepet düğmesinin (90) üstünde, sepet penceresinin (95), mobil menünün
     (99) ve başlığın (100) altında: açık bir menüyü ya da pencereyi
     örtmesin. Tercih penceresi <dialog> → üst katman (top layer), z-index
     gerekmez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   İlk durum — <html> sınıflarından (head.php satır içi okuyucu)
   --------------------------------------------------------------------------
   .cerez-karar  geçerli rıza kaydı var → şerit yok, simge var
   .no-js        betik yok → izleme de yok, sorulacak bir şey yok; çalışmayan
                 düğmeli bir şerit ekranı boşuna kaplardı. Simge de yok.
   Karar İLK BOYAMADAN önce verilir; cerez.js'e kalsaydı şerit bir an görünüp
   kaybolurdu. */
.no-js .cerez-bar,
.cerez-karar .cerez-bar,
.cerez-fab {
  display: none;
}

.js.cerez-karar .cerez-fab {
  display: grid;
}

/* Simgenin dipte kapladığı bant → --cerez-fab-alan (şeridin --cerez-bar-h
   eşi). Simge yalnız burada, yani .js.cerez-karar iken var; değişken de
   yalnız o zaman dolu, sistem kapalıyken bu dosya hiç inmez → 0.
   Okuyan: kvkk.css — yasal sayfanın yapışkan gezinme kutusu simgenin
   üstünde biter (ölçülmüş kusur, gerekçe orada). */
.js.cerez-karar {
  --cerez-fab-alan: calc(var(--kose-boyut) + var(--kose-bosluk));
}

/* Şerit görünürken sayfanın sonu onun altında kalmasın (altbilgideki yasal
   bağlantılar dahil). --cerez-bar-h'yi cerez.js ölçer; şerit yokken 0.
   ⚠ Klavye odağının şeridin arkasında kalmaması AYRI bir kural:
   html { scroll-padding-bottom } — main.css 2. bölüm (başlığın
   scroll-padding-top'unun yanında; ikisi tek kuralda durur). */
body {
  padding-block-end: var(--cerez-bar-h, 0px);
}

/* Pencere açıkken arka sayfa kaymasın. <dialog> odağı ve ekran okuyucuyu
   hapseder ama tekerlek kaydırmasını durdurmaz. */
html.cerez-modal-acik {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Ortak düğme — şerit ve pencere
   --------------------------------------------------------------------------
   ⚠ EŞİT BELİRGİNLİK: "Tümünü kabul et", "Tümünü reddet" ve üçüncü eylem
     AYNI biçimdedir — boy, dolgu, renk, çerçeve. Kaynakta kabul dolu beyaz,
     ret yalnız çerçeve, ayarlar alt çizgili metindi; reddetmek görsel olarak
     daha zor seçenekti. Avrupa veri koruma otoritelerinin çerez şeridi
     görev gücü raporu (EDPB, 2023) bunu yanıltıcı tasarım sayar.
   ⚠ min-height 44 px: dokunma hedefi (WCAG 2.5.5). */
.cerez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  border: 1px solid;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

/* --------------------------------------------------------------------------
   1. katman — şerit
   -------------------------------------------------------------------------- */
.cerez-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 94;
  color: rgba(255, 255, 255, 0.86);
  background: var(--navy-950);
  /* Altın üst çizgi: şerit altbilginin (aynı lacivert) üstüne geldiğinde
     ikisi tek bir blok gibi görünüyordu — sınır yalnız gölgeyle seçilmiyor. */
  border-top: 2px solid var(--gold-600);
  box-shadow: 0 -8px 28px rgba(0, 20, 45, 0.22);
  /* ⚠ ŞERİT EKRANDAN UZUN OLAMAZ — ÖLÇÜLMÜŞ KUSUR (2026-09-24): yüksekliğin
     üst sınırı yoktu; büyütülmüş yazıda (html %200) 1280×800'de TR şerit
     890 px, AR 977 px çıktı — üst kenar -90/-177 px, rıza metninin başı
     ekranın üstünde. Şerit fixed olduğu için sayfayı kaydırmak da onu
     getirmiyordu: ziyaretçiden okuyamadığı bir metne karar vermesi
     isteniyordu. Artık şerit başlığın altında biter (başlık z-index 100,
     şerit 94 — tavanı 100vh olsaydı başlık metnin başını yine örterdi) ve
     fazlası şeridin İÇİNDE kayar; ilk konum metnin başıdır.
     --cerez-bar-h (cerez.js, ResizeObserver) kırpılmış yüksekliği ölçer. */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ⚠ SARMA KIRILIMA DEĞİL İÇERİĞE BAĞLI — ÖLÇÜLMÜŞ KUSUR (2026-09-24):
     düğmeler yalnız @media (max-width: 900px) içinde alta iniyordu; o eşik
     px'tir ve yazı büyüdükçe tetiklenmez. 900 px'ten geniş pencerede eylem
     kutusu (flex: none) kendi tek satırlık genişliğinde kalıyor, metne kalan
     yer sıfıra iniyordu: %150 yazıda TR 920 px'te metin sütunu 52 px,
     %200'de 1280 px'te 50 px (AR 123); 901–1024 px'te düğmeler ekran dışına
     taşıyordu ('Çerez ayarları' 1088 px'e, AR 'Tümünü kabul et' -114 px'ten).
     Şimdi gövde (simge + metin) 24rem'lik bir TEMEL taşır: gövde ile düğmeler
     bir satıra sığmıyorsa düğmeler KENDİLİĞİNDEN alta iner — ölçüt rem, yani
     yazıyla birlikte büyür. em'li bir medya sorgusu yetmezdi: kök yazı
     boyutunu satır içi değiştiren yakınlaştırmada tetiklenmez.
     ⚠ flex-grow 999 / 1: aynı satırdayken artan yeri METİN alır (düğmeler
     içerik genişliğinde kalır); düğmeler kendi satırına indiğinde satırın
     tamamını onlar alır ve eşit genişler — ≤900 px'teki görünümle aynı. */
.cerez-bar__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: 1rem;
}

/* 24rem ≈ 30 px simge + 1.5rem aralık + ~20rem metin (0.875rem yazıda
   satır başına ~40 harf). Pencere bundan darsa gövde satırın tamamını alıp
   daralır (min-width 0) — simge metnin yanında kalır. */
.cerez-bar__govde {
  display: flex;
  flex: 999 1 24rem;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.cerez-bar__simge {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--gold-400);
}

/* ⚠ SÖZCÜK SÜTUNA SIĞMIYORSA BÖLÜNÜR — ÖLÇÜLMÜŞ KUSUR (2026-09-24):
     min-width 0 sütunu daraltıyordu ama tek bir sözcüğü bölemiyordu;
     büyük yazıda sözcük sütundan uzun olunca DIŞARI taşıyordu. TR 320 px
     %200'de "değiştirebilirsiniz." sütunu 7 px aşıp kenar boşluğuna,
     %250'de şeridi 42 px, %300'de 110 px (390 px'te 46) aşıyordu; şerit
     yatay kayan bir kutuya dönüyor, son sözcük kesik okunuyordu.
   ⚠ anywhere, break-word DEĞİL: break-word bölmeye izin verir ama
     min-content genişliğini değiştirmez; esnek öğe yine en uzun sözcükten
     dar olamaz. anywhere ikisini de yapar ve YALNIZ satıra tek başına
     sığmayan sözcüğü böler — %100 yazıda görünüm piksel aynı (ölçüldü).
   ⚠ hyphens: auto KONMADI: taşma olmasa da HER satır sonunda heceler
     (%100 yazıda da görünüm değişir) ve ölçüldü: bu makinedeki Chromium
     (153, Windows) tr/en/de metnini hiç hecelemiyor — sözlüğü yok; kusuru
     ölçülemeyen bir davranış kapatamazdı. lang yine de doğru: <html lang>
     sayfanın dili, bağlantı aynı dilde (yasalBelgeler() aktif dil). */
.cerez-bar__metin {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* Bağlantı bölünmeden bir sonraki satıra geçer (eski white-space: nowrap ile
   aynı görünüm) ama metin sütunundan geniş olursa İÇİNDE sarar: nowrap iken
   390 px'te %300 yazıda "Çerez Politikası" sütunu 396 px'e taşırıyordu
   (ölçüldü) ve şerit yatay kayıyordu. */
.cerez-bar__bag {
  display: inline-block;
  max-width: 100%;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cerez-bar__bag:hover {
  color: var(--gold-400);
}

/* flex-shrink 1 + iç sarma: kendi satırında da sığmazsa düğmeler alt alta
   diziliyor (eskiden flex: none → tek satır, ekran dışına taşıyordu). */
.cerez-bar__eylem {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cerez-bar__eylem .cerez-btn {
  flex: 1 1 auto;
}

.cerez-bar .cerez-btn {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
}

.cerez-bar .cerez-btn:hover {
  color: var(--navy-950);
  background: var(--gold-400);
  border-color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   2. katman — tercih penceresi (<dialog>)
   --------------------------------------------------------------------------
   ⚠ Tarayıcının dialog kuralları (orta hizalama, üst katman, :not([open])
     iken display:none) KORUNUR: burada yalnız kutu biçimlenir. display
     <dialog>'a değil iç kutuya verilir — dialog'a verilseydi kapalıyken de
     görünürdü. */
/* ⚠ <dialog> EKRANI KAPLAYAN SAYDAM BİR ÇERÇEVEDİR, görünen pencere
     .cerez-modal__kutu'dur (2026-09-24). Gerekçe: aşağıdaki "tek kaydırma"
     kuralı pencerenin ekran YÜKSEKLİĞİNE yazı birimiyle bakar ve bunu
     yalnız bir kap sorgusu (@container) yapabilir — medya sorgusundaki
     rem kök yazı boyutunu değil tarayıcının başlangıç değerini okur,
     yazı büyüyünce tetiklenmez (şeritteki aynı ders). Kap sorgusunun kabı
     boyutu İÇERİKTEN bağımsız bir öğe olmalı: ekran boyu dialog.
   ⚠ Arka plan tıklaması DEĞİŞMEDİ: kutunun dışına tıklamanın hedefi
     eskiden ::backdrop idi, şimdi dialog'un saydam alanı; ikisi de
     e.target === dialog verir (cerez.js "basış da bırakış da dışarıda").
   ⚠ margin 0 + inset (tarayıcının dialog:modal kuralı, dört yan 0):
     main.css'in sıfırlaması (* { margin: 0 }) zaten margin'i eziyordu;
     ortalama artık kutunun margin: auto'sunda — bir ara pencere sol üst
     köşeye yapışıyordu (1280×800'de x=0, y=0), ölçülmüş kusur.
   ⚠ display YALNIZ [open] İKEN: dialog'a koşulsuz display verilseydi
     tarayıcının :not([open]) { display: none } kuralını ezer, kapalı
     pencere görünürdü (yazar kuralı tarayıcı kuralını her zaman yener). */
.cerez-modal {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: hidden;
  container: cerez-pencere / size;
}

.cerez-modal[open] {
  display: grid;
}

/* ::backdrop özel özellik devralmayabilir (eski Chromium) → değer düz;
   sepet penceresinin örtüsüyle aynı. */
.cerez-modal::backdrop {
  background: rgba(0, 20, 45, 0.55);
  backdrop-filter: blur(3px);
}

/* Pencere içinde odak halkası LACİVERT: sitenin altın halkası (gold-500)
   beyaz zeminde 2,06:1 — WCAG 1.4.11'in 3:1 eşiğinin altında. */
.cerez-modal :focus-visible {
  outline-color: var(--navy-950);
}

/* ⚠ KENAR PAYI px, rem DEĞİL (32 px = %100 yazıda eski 2rem, çıktı aynı):
     rem'le yazı büyüdükçe pencere daralıyordu — 320 px'te %300 yazıda
     2rem 96 px, kutuya 224 px kalıyordu; payın yazıyla büyümesi için bir
     sebep yok, okunacak olan metin. Yüzdeler dialog'a göre (ekran boyu).
   ⚠ overflow-wrap: anywhere — YALNIZ satıra tek başına sığmayan sözcüğü
     böler (gerekçe ve hyphens'in neden konmadığı: .cerez-bar__metin). */
.cerez-modal__kutu {
  display: flex;
  flex-direction: column;
  width: min(36rem, 100% - 32px);
  max-height: calc(100% - 32px);
  margin: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Kutu programatik odak alır (açılışta, ekran okuyucu başlığı duysun diye);
   etkileşimli bir öğe değil — halka çizilmez. */
.cerez-modal__kutu:focus {
  outline: none;
}

.cerez-modal__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  padding-inline: 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
}

/* min-width 0: esnek öğe en uzun sözcüğünden dar olamazdı; %250 yazıda
   başlık "Kapat" düğmesini kutunun dışına itiyordu (ölçüldü). */
.cerez-modal__baslik {
  min-width: 0;
  font-size: var(--step-1);
  color: var(--navy-950);
}

.cerez-modal__x {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--slate-600);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.cerez-modal__x svg {
  width: 20px;
  height: 20px;
}

.cerez-modal__x:hover {
  color: var(--navy-950);
  background: var(--paper-2);
}

/* TEK KAYDIRMA ALANI gövde: başlık (Kapat) ve eylem düğmeleri kısa ekranda
   da görünür kalır — sepet penceresinin ölçülmüş kusuruyla aynı ders. */
.cerez-modal__govde {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cerez-modal__giris {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--slate-600);
}

.cerez-modal__giris a {
  color: var(--gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Kategoriler ---- */
.cerez-kat {
  margin-top: 1rem;
}

.cerez-kat__oge {
  padding-block: 0.9rem;
  border-top: 1px solid var(--line);
}

/* ⚠ SARAR — ÖLÇÜLMÜŞ KUSUR (2026-09-24): ad ile "Her zaman etkin" /
     anahtar tek satıra kilitliydi; %200 yazıda 390 px'te etiket kutunun
     sağından ~100 px taşıyor, "Her zaman e…" diye kesik görünüyordu.
     Sığmayınca anahtar ya da etiket adın ALTINA iner; normal yazıda
     sığar, görünüm aynı. */
.cerez-kat__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.cerez-kat__ad {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-950);
}

label.cerez-kat__ad {
  cursor: pointer;
}

/* nowrap YOK: kendi satırına indiğinde de sığmazsa (320 px, %300) etiket
   İÇİNDE sarar — nowrap + flex:none iken kutudan taşıyordu. */
.cerez-kat__hep {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--paper-2);
  border-radius: var(--radius-pill);
}

.cerez-kat__metin {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--slate-600);
}

/* ---- Aç/kapa anahtarı — <input type=checkbox role=switch> ----
   ⚠ GERÇEK GİRDİNİN KENDİSİ BİÇİMLENİR (appearance:none), üstüne binen
     sahte bir <span> DEĞİL: odak halkası, tıklama alanı ve ekran okuyucu
     aynı öğede kalır. Kaynaktaki desende girdi 0×0 gizliydi ve halka
     kardeş span'a taşınıyordu.
   ⚠ KAPALI iz slate-500: beyazda 4.02:1 — bileşen sınırı için 3:1 eşiği
     (WCAG 1.4.11) aşılır. slate-400 (2.50:1) yetmezdi.
   ⚠ Düğme inset-inline-start ile kayar, transform ile DEĞİL: translateX
     fiziksel yöndür, RTL'de ters kayardı (main.css 26. bölümü büyütmeden). */
.cerez-anahtar {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  background: var(--slate-500);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s var(--ease);
}

.cerez-anahtar::before {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: inset-inline-start 0.2s var(--ease);
}

.cerez-anahtar:checked {
  background: var(--navy-950);
}

.cerez-anahtar:checked::before {
  inset-inline-start: 23px;
}

.cerez-anahtar:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 3px;
}

/* ---- Uyumluluk rozetleri (panelden aç/kapa; bilgilendirici) ---- */
.cerez-uyum {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.cerez-uyum__baslik {
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* ⚠ YENİDEN AKIŞ — ÖLÇÜLMÜŞ KUSUR (2026-09-24): üç satır %200 yazıda
     390 px'te kutunun sağından ~120 px taşıyor, açıklamalar "Verilerin
     Korun…" diye kesik okunuyordu. Üç kilit üst üste biniyordu: ızgara sütunu auto
     (içerik en az genişliğinden dar olamaz), rozet nowrap + flex:none,
     açıklama span'ı en uzun sözcüğünden dar olamaz. Şimdi sütun
     minmax(0, 1fr); açıklamanın TEMELİ 10rem — rozetin yanında 10rem
     kalmıyorsa (yazıyla birlikte büyüyen ölçüt) açıklama rozetin ALTINA
     iner. %100 yazıda 390 px'te üç satır da yan yana kalır (ölçüldü). */
.cerez-uyum__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.cerez-uyum__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-600);
}

.cerez-uyum__liste li > span {
  flex: 1 1 10rem;
  min-width: 0;
}

/* nowrap YOK: kendi satırında da sığmazsa ("Consent Mode v2", 320 px,
   %300) rozet İÇİNDE sarar. */
.cerez-uyum__liste strong {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy-800);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}

/* ---- Eylem çubuğu ---- */
.cerez-modal__alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.cerez-modal .cerez-btn {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--navy-950);
}

.cerez-modal .cerez-btn:hover {
  color: var(--white);
  background: var(--navy-950);
}

/* ---- TEK KAYDIRMA — ekran yazıya göre kısaysa ----
   ⚠ ÖLÇÜLMÜŞ KUSUR (2026-09-24, WCAG 1.4.10): başlık ve eylem çubuğu
     sabit, yalnız gövde kayıyordu. %200 yazıda telefonda üç düğme alt
     alta iki satırlık kutulara dönüşüp çubuğu 425 px'e çıkarıyordu;
     390×844'te okunacak metne 214 px, 320×568'de 80 px — yani yalnız
     gövdenin dolgusu — kalıyordu. %250'de 320×568'de başlık + çubuk
     (176 + 573 px) kutunun tavanını (488 px) aşıyor, düğmeler kutunun
     dışında KIRPILIYORDU.
   Ekran yazıya göre kısaysa sabit bölgeler bırakılır: kutunun TAMAMI
   tek alan olarak kayar, gövde kendi kaydırmasını kaybeder (iç içe iki
   kaydırma alanı olmasın — sepet penceresinin ölçülmüş dersi), düğmeler
   metnin sonunda akar.
   ⚠ BAŞLIK BURADA YAPIŞKAN DEĞİL — bilinçli: %200–300 yazıda başlık
     141–211 px; yapışsaydı okuma alanının üçte birini yine yerdi ve
     Shift+Tab ile yukarı dönen odak onun ALTINDA kalırdı (WCAG 2.4.11 —
     başlığın boyu yazıya göre değiştiği için scroll-padding ile
     karşılanamaz). Kapatma yolu yine var: Esc ve metnin sonundaki üç
     düğmenin üçü de pencereyi kapatır.
   ⚠ EŞİK yazı birimiyle (rem, kap sorgusunda kök yazıyı okur); iki durum:
     · yükseklik ≤ 20rem — her genişlikte (1280×800 %300: 16,7rem)
     · genişlik ≤ 38rem VE yükseklik ≤ 34rem — dar pencerede düğmeler alt
       alta dizildiği için çubuk kat kat uzar (390×844 %200: 12,2 × 26,4)
     %100 yazıda dikey telefonlar girmez (320×568 = 20 × 35,5rem), yatay
     640×360 ve 844×390 da girmez (geniş) — görünüm aynı. Giren tek
     %100 durumu 320 px ve daha kısa pencere (568×320 yatay): orada sabit
     bölgeler okuma alanını 134 px'e indiriyordu, şimdi 288 (ölçüldü).
     1280×800 %200 (40 × 25rem) girmez: düğmeler tek satır, sabit çubuk
     137 px, okuma alanı 522 px (ölçüldü). 11 boyut × 5 yazı × 3 dil =
     165 ölçümde yatay taşma 0, kırpılan düğme 0 (2026-09-24). */
@container cerez-pencere (max-height: 20rem) or ((max-width: 38rem) and (max-height: 34rem)) {
  .cerez-modal__kutu {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cerez-modal__govde {
    flex: none;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Yüzen simge — karar verildikten sonra (.cerez-karar)
   --------------------------------------------------------------------------
   Yukarı çık düğmesinin (main.css 18. bölüm) KARŞI köşesi: aynı boy, aynı
   boşluk (--kose-*), aynı renkler. Daire; yukarı çık köşeli kare — ikisi
   yan yana göründüğünde işlevleri biçimden de ayrılsın. */
.cerez-fab {
  position: fixed;
  inset-inline-start: var(--kose-bosluk);
  bottom: var(--kose-bosluk);
  z-index: 80;
  place-items: center;
  width: var(--kose-boyut);
  height: var(--kose-boyut);
  padding: 0;
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.cerez-fab svg {
  width: 22px;
  height: 22px;
}

.cerez-fab:hover {
  color: var(--gold-400);
  background: var(--navy-950);
  transform: translateY(-2px);
}

/* ⚠ İKİ TONLU ODAK HALKASI — yukarı çık ile AYNI kural (main.css 18. bölüm,
     gerekçe orada): altın halka beyaz içerikte 2.1:1 ölçüldü; yalnız
     lacivert olsa altbilginin lacivertinde kaybolurdu. Beyaz · lacivert ·
     beyaz bant; iki zeminde de 15.47:1. */
.cerez-fab:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--white), var(--shadow);
}

/* --------------------------------------------------------------------------
   Dar ekranlar
   -------------------------------------------------------------------------- */
/* Sarmanın KENDİSİ burada değil (yukarıda, içeriğe bağlı); bu blok dar
   ekranın ölçülerini verir ve düğmeleri her zaman ayrı satıra alır. */
@media (max-width: 900px) {
  .cerez-bar__ic {
    gap: 0.85rem 0.75rem;
    padding-block: 0.9rem;
  }

  /* Aralık px (%100 yazıda 0.75rem ile aynı 12 px): simge 24 px sabit,
     aralığın yazıyla büyümesi yalnız metin sütunundan çalıyordu
     (%300'de 36 px). */
  .cerez-bar__govde {
    align-items: flex-start;
    gap: 12px;
  }

  .cerez-bar__simge {
    width: 24px;
    height: 24px;
  }

  .cerez-bar__metin {
    font-size: 0.8125rem;
  }

  .cerez-bar__eylem {
    flex-basis: 100%;
  }
}

/* ⚠ YATAY DOLGULAR YAZIYLA BÜYÜMEZ — %100 yazıda eski değerlerle AYNI
     (1.125rem = 18 px, 0.625rem = 10 px; düğmede min() %100'de 1.15rem'i
     seçer), çıktı değişmez. rem iken dar ekranda metne kalan yeri
     kemiriyordu: düğmenin iki yan dolgusu %250'de 92 px idi ve kısa
     etiketler de iki satıra kırılıyordu. Ölçüldü (pencere düğme
     yükseklikleri, kutunun px kenar payıyla birlikte): 390 px %250 TR
     134/134/134 → 134/90/90; 320 px %200 EN 107/107/142 → 72/72/107.
     Şerit düğmeleri de aynı kuralı alır.
     Düşey dolgu ve min-height 44 px aynen. */
@media (max-width: 480px) {
  .cerez-modal__ust,
  .cerez-modal__govde,
  .cerez-modal__alt {
    padding-inline: 18px;
  }

  .cerez-modal__ust {
    padding-inline-end: 10px;
  }

  .cerez-btn {
    padding-inline: min(1.15rem, 18.4px);
  }

  .cerez-modal__alt .cerez-btn {
    flex: 1 1 auto;
  }
}

/* --------------------------------------------------------------------------
   Zorlanmış renk kipi (Windows Yüksek Karşıtlık)
   --------------------------------------------------------------------------
   ⚠ ÖLÇÜLMÜŞ KUSUR: anahtar (appearance:none) yalnız background ile
     görünüyordu; bu kipte tarayıcı background'u Canvas'a eziyor ve çerçeve
     yoktu. Üç anahtarın izi, düğmesi ve zemini rgb(255,255,255) ölçüldü:
     anahtar tamamen görünmezdi, açık ile kapalı ayırt edilemiyordu —
     ziyaretçi kısmi rıza veremiyor, yalnız "Tümünü …" düğmeleri kalıyordu.
   ⚠ forced-color-adjust:none YALNIZ anahtarda, renkler YALNIZ SİSTEM
     RENKLERİ: kullanıcının seçtiği palet (açık/koyu) yine uygulanır; biz
     yalnız hangi sistem rengini nereye koyacağımızı söylüyoruz. Değer ::before'a
     kalıtımla geçer. Kapalı: Canvas iz + CanvasText çerçeve/düğme (eş renk
     çifti); açık: Highlight iz + HighlightText düğme (eş renk çifti) —
     tarayıcının yerli onay kutusu da işaretliyi Highlight ile basar.
   ⚠ Durum yalnız renkle taşınmaz: düğme başta/sonda (WCAG 1.4.1).
   ⚠ Düğme 16 px: 2 px çerçeve dolgu kutusunu 42×22'ye indirir; 20 px düğme
     açıkken çerçeveye binerdi. 16 px ile top 3px ve inset-inline-start
     3px/23px normal kiple AYNI kalır (boşluk her yanda 3 px) — kaydırma
     kuralı ikinci kez yazılmaz, RTL kendiliğinden.
   ⚠ Odak halkası: öğe forced-color-adjust:none olduğu için outline-color
     ZORLANMAZ; lacivert halka koyu temada kaybolurdu → CanvasText.
   ⚠ Pencere kenarı: kutuda border yok; bu kipte gölge de düşer ve pencere
     arkadaki (Canvas'a boyanmış) örtüden yalnız bulanıklıkla ayrılıyordu.
     Kenar KUTUYA çizilir, dialog'a değil — dialog artık ekranı kaplayan
     saydam çerçeve; ona çizilse ekranın kenarını çizerdi. */
@media (forced-colors: active) {
  .cerez-modal__kutu {
    border: 1px solid CanvasText;
  }

  .cerez-anahtar {
    forced-color-adjust: none;
    background: Canvas;
    border: 2px solid CanvasText;
  }

  .cerez-anahtar::before {
    width: 16px;
    height: 16px;
    background: CanvasText;
    box-shadow: none;
  }

  .cerez-anahtar:checked {
    background: Highlight;
    border-color: Highlight;
  }

  .cerez-anahtar:checked::before {
    background: HighlightText;
  }

  .cerez-anahtar:focus-visible {
    outline-color: CanvasText;
  }
}