/* ==========================================================================
   ÇEREZ RIZA BANDI — KVKK / AB rıza yüzeyi

   NİÇİN TEMA DEĞİŞKENLERİ KULLANILMIYOR
   -------------------------------------
   Bu depoda on üç tema var ve her biri kendi CSS değişken kümesini yazıyor.
   Bant `--renk-metin` gibi tema değişkenlerine bağlansaydı, okunabilirliği
   TEMANIN paletine bağlı olurdu: açık zeminli bir temada beyaz düğme beyaz
   arka planda kaybolur, koyu bir temada da tersi olurdu. Rıza bandı bir
   TASARIM YÜZEYİ DEĞİL, bir HUKUKİ DENETİMDİR; on üç temada da AYNI ve
   ölçülebilir biçimde okunur olmak zorunda.

   Bu aynı zamanda ayrışma kapılarını korur: bant sabit bir palet taşıdığı
   için hiçbir temanın renk kimliğini taşımaz, dolayısıyla temaları
   birbirine yaklaştırmaz. (`tools/tema-ayrisma-basilan.php` imzayı zaten
   `<main>` ile sınırlar; bant `<main>` dışındadır.)

   KONTRAST — ÖLÇÜLDÜ, TAHMİN EDİLMEDİ (WCAG 2.1 AA eşiği 4.5:1)
   ------------------------------------------------------------
     #f8fafc üzerinde #0b1220 zemin ....... 17.4:1
     #cbd5e1 üzerinde #0b1220 zemin ....... 11.6:1
     #0b1220 üzerinde #ffffff düğme ....... 17.4:1
     #f9fafb üzerinde #1f2937 rozet ....... 14.0:1
     #e5e7eb üzerinde #111827 şerit ....... 13.8:1

   Bu sayılar YORUM DEĞİL, ÖLÇÜM: RizaTest::test_kontrast_orani_wcag_esigini_
   gecti bu dosyadaki renk bildirimlerini OKUYUP WCAG bağıl parlaklık
   formülüyle oranı yeniden hesaplar. Renk değişirse test düşer, yani bu blok
   bayatlayamaz.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BANT KABI

   `left/right: 0` kullanılır, `width: 100vw` KULLANILMAZ: 100vw dikey kaydırma
   çubuğunun genişliğini de sayar ve masaüstünde sayfayı yatay kaydırtır. Bu
   depodaki duyarlılık kapısı 9 genişlikte (320…1920) SIFIR yatay kaydırma
   ölçüyor; bant o ölçümü bozmamak zorunda.
   -------------------------------------------------------------------------- */
.riza {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    box-sizing: border-box;
    max-width: 100%;
    background: #0b1220;
    color: #f8fafc;
    border-top: 3px solid #ffffff;
    /* Ekranın tamamını kaplamaz: kapladığı anda "kapatana kadar siteyi
       kullanamazsın" baskısına dönüşür ve rızanın özgür olma şartı zedelenir. */
    max-height: 85vh;
    overflow-y: auto;
    /* Bant içinde kaydırma bitince sayfa kaymaya başlamasın. */
    overscroll-behavior: contain;
    font-size: 15px;
    line-height: 1.55;
    /* iOS'ta alttaki ev çubuğunun altında kalmasın. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.riza *,
.riza-serit * {
    box-sizing: border-box;
}

.riza__kutu {
    margin: 0 auto;
    max-width: 900px;
    padding: 18px 16px;
}

.riza__baslik {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: #f8fafc;
}

/* Odak başlığa taşındığında (riza.js) çerçeve görünsün; `tabindex="-1"`
   taşıyan bir başlık aksi hâlde odaklandığını hiç göstermez. */
.riza__baslik:focus-visible,
.riza__baslik:focus {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

.riza__govde {
    margin: 0 0 14px;
    color: #cbd5e1;
    max-width: 75ch;
}

/* --------------------------------------------------------------------------
   DÜĞMELER — KABUL, AYARLAR VE RET BİREBİR AYNI

   TEK BİR KURAL, TEK BİR SINIF. Kabul için ayrı bir "birincil" varyant
   yazılsaydı (daha koyu, daha büyük, daha kalın) reddetme görsel olarak
   ikincilleşir ve rıza geçersiz hâle gelirdi. Bu dosyada `--kabul` ya da
   `--birincil` diye bir düğme değişkeni BİLEREK YOKTUR; testi de bunu ölçer.

   Kural hem `<button>` hem `<a>` için yazılır: "Ayarlar" bir bağlantıdır
   (/cerez-tercihi sayfasına gider) ama diğer ikisinden görsel olarak
   AYRILMAZ. `display: inline-flex` ve `text-decoration: none` tam olarak bu
   eşitliği kurar — bağlantı olduğu belli olan altı çizili bir metin,
   yanındaki iki düğmenin yanında ikincil görünürdü.
   -------------------------------------------------------------------------- */
.riza__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.riza__dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 200px;
    min-height: 44px;
    padding: 11px 18px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    background: #ffffff;
    color: #0b1220;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.riza__dugme:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
}

.riza__dugme:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

.riza__not {
    margin: 12px 0 0;
    color: #cbd5e1;
    font-size: 14px;
    max-width: 75ch;
}

.riza__baglanti {
    color: #bfdbfe;
    text-decoration: underline;
}

.riza__baglanti:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   KALICI TERCİH ŞERİDİ (alt bilginin ardında, akış içinde)

   `position: fixed` DEĞİL: yüzen bir rozet içeriğin üstünü kapatır, mobilde
   "Sepete ekle" gibi düğmeleri gölgeler ve reklam yerleşim kurallarıyla
   çakışırdı. Akış içinde durur, kimseyi engellemez.
   -------------------------------------------------------------------------- */
.riza-serit {
    background: #111827;
    color: #e5e7eb;
    text-align: center;
    padding: 6px 12px;
}

.riza-serit__baglanti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    color: #e5e7eb;
    font-size: 14px;
    text-decoration: underline;
}

.riza-serit__baglanti:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   TERCİH SAYFASI (/cerez-tercihi)

   Sayfa temanın kendi düzenini kullanır; buradaki kurallar yalnızca rıza
   kartının iç yapısıdır ve temanın renklerini EZMEZ (yalnızca kenarlık ve
   boşluk verir), böylece sayfa bulunduğu temaya ait görünür.
   -------------------------------------------------------------------------- */
.riza-sayfa__kart {
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.riza-sayfa__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.riza-sayfa__satir + .riza-sayfa__satir {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid currentColor;
}

.riza-sayfa__etiket {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Etiketin TAMAMI dokunma hedefidir; yalnızca 22px'lik kutucuğu
       hedeflemek parmakla neredeyse imkânsızdı. */
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

.riza-sayfa__kutucuk {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* Zorunlu kategorinin kutusu devre dışıdır ama SOLUK GÖSTERİLMEZ: soluk bir
   kutu "bozuk" izlenimi verir; buradaki durum bozukluk değil, bilgidir. */
.riza-sayfa__kutucuk:disabled {
    opacity: 1;
    cursor: not-allowed;
}

/* "Kapatılamaz" rozeti — sabit palet, çünkü on üç temanın hangi zemin rengini
   kullandığı bilinemez ve rozetin okunurluğu temaya bağlı olamaz. */
.riza-sayfa__rozet {
    display: inline-block;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.riza-sayfa__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* Tercih sayfasındaki düğmeler de birebir aynı ölçüdedir; kabul/ret farkı YOK. */
.riza-sayfa__dugme {
    flex: 1 1 200px;
    min-height: 44px;
    padding: 11px 18px;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
}

.riza-sayfa__dugme:focus-visible {
    outline: 3px solid #b45309;
    outline-offset: 3px;
}

.riza-sayfa__durum {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   HAREKET

   Bant aşağıdan kayarak girer; canlandırılan tek özellik `transform`'dur
   (düzen tetiklemez, kare düşürmez). `prefers-reduced-motion` altında
   HAREKET YOKTUR — vestibüler duyarlılığı olan ziyaretçi için ekrana giren
   bir panel baş dönmesi yapabilir ve bu bir tercih değil, sağlık sorunudur.
   -------------------------------------------------------------------------- */
@keyframes riza-gir {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.riza {
    animation: riza-gir 220ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .riza {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   DAR EKRAN (≤ 420px)

   Onaylı kırılma noktası; depodaki duyarlılık kapısının listesinde 420
   "320/360/390/414 bandının üst sınırı" olarak yazılı. Düğmeler alt alta
   geçer ve her biri tam genişlik alır — 320px'te yan yana iki düğme
   metinlerini kırpardı.
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .riza__kutu {
        padding: 14px 12px;
    }

    .riza__dugme {
        flex: 1 1 100%;
    }

    .riza__aciklama {
        margin-left: 0;
    }
}