/*
 * assets/css/cerez-onay.css
 * Çerez onay şeridi + ayrıntılı tercih paneli. assets/style.css'in
 * ÜZERİNE eklenir (o dosya değiştirilmiyor), aynı CSS değişkenlerini
 * (--text, --muted, --bg, --accent, --border, --card-bg) kullanarak
 * açık/koyu temayla otomatik uyumlu çalışır. Bu dosya (auth.css'in
 * aksine) SİTE GENELİNDE her sayfada yüklenir, çünkü şerit her sayfada
 * görünebilmeli — bu yüzden auth.css'teki .btn-primary/.btn-secondary
 * sınıflarına bağımlı olmadan kendi buton stillerini içerir.
 */

.cerez-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
/* Aynı specificity çakışması .cerez-panel-overlay için de geçerli
   (bkz. aşağıdaki açıklama) — şerit de "hidden" iken KESİN olarak
   gizlenmeli, kaynak sırası şansına bırakılmamalı. */
.cerez-banner[hidden] {
  display: none !important;
}

.cerez-banner-metin {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text);
}

.cerez-banner-metin strong {
  display: block;
  margin-bottom: 4px;
}

.cerez-banner-metin p {
  margin: 0;
  color: var(--muted);
}

.cerez-banner-metin a {
  color: var(--accent);
}

.cerez-banner-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.cerez-btn-primary,
.cerez-btn-secondary {
  padding: 9px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cerez-btn-primary {
  border: none;
  background: var(--accent);
  color: #fff;
}
.cerez-btn-primary:hover { filter: brightness(1.08); }

.cerez-btn-secondary {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
}
.cerez-btn-secondary:hover { border-color: var(--accent); }

/* Alt bilgideki "Çerez Ayarları" bağlantısı — <button> ama link gibi görünür */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ---- Ayrıntılı tercih paneli (modal) ---- */
.cerez-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  /* Açılış/kapanış geçişi: overlay'in kendisi fade olur, .cerez-panel
     (aşağıda) ayrıca yukarıdan aşağı küçülerek kapanır. "hidden"
     attribute'u display:none yaptığı için animasyonu JS tarafında
     bir "kapanıyor" sınıfıyla tetikleyip, geçiş bitince hidden
     ekliyoruz (bkz. assets/js/core/site-islemleri.js -> panelKapat). */
  opacity: 1;
  transition: opacity 0.18s ease;
}
/*
 * KRİTİK DÜZELTME: "[hidden]" (tarayıcının dahili user-agent kuralı,
 * display:none verir) ile yukarıdaki ".cerez-panel-overlay" kuralı AYNI
 * ÖZGÜLLÜKTE (0,1,0) olduğu için, bu CSS dosyasındaki kural KAYNAK
 * SIRASINDA SONRA geldiğinden UA kuralını EZİYORDU — yani panel,
 * <div ... hidden> ile işaretlense bile HER ZAMAN görünür kalıyor,
 * sayfa yüklenir yüklenmez (kullanıcı hiçbir butona basmadan) ekranda
 * beliriyordu. "display:none !important" ile bunu KESİN olarak
 * kapatıyoruz; JS zaten panelAc()'ta "hidden" attribute'unu kaldırıp
 * panelKapat()'ta geri ekliyor (bkz. assets/js/core/site-islemleri.js), burada
 * sadece CSS'in bu attribute'a gerçekten uymasını garanti ediyoruz.
 */
.cerez-panel-overlay[hidden] {
  display: none !important;
}
.cerez-panel-overlay.cerez-panel-kapaniyor {
  opacity: 0;
}
/* JS geçiş desteklemiyorsa (prefers-reduced-motion) anında kapanır. */
@media (prefers-reduced-motion: reduce) {
  .cerez-panel-overlay,
  .cerez-panel {
    transition: none !important;
  }
}

.cerez-panel {
  width: 100%;
  /* Daha kompakt: "tüm ekranı kaplayan" büyük pencere hissi yerine
     dar/orta genişlikte, içeriğe göre boyutlanan bir kart. */
  max-width: 420px;
  max-height: min(600px, 82vh);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  transform-origin: top center;
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
/* X'e (veya Escape/overlay tıklamasına) basılınca: yukarıdan aşağı,
   ölçeği küçülerek ve saydamlaşarak kapanır. */
.cerez-panel-overlay.cerez-panel-kapaniyor .cerez-panel {
  transform: scale(0.85) translateY(-24px);
  opacity: 0;
}

.cerez-panel h2 {
  margin-top: 0;
  font-size: 1.08rem;
}

.cerez-panel .muted {
  color: var(--muted);
  font-size: 0.84rem;
}

.cerez-kategori {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.cerez-kategori:first-of-type { border-top: none; }

.cerez-kategori-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
}

.cerez-kategori-baslik label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.cerez-kategori-baslik input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.cerez-rozet {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.cerez-kategori p {
  margin: 6px 0 0;
}

.cerez-panel-aksiyonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cerez-panel-aksiyonlar .cerez-btn-primary,
.cerez-panel-aksiyonlar .cerez-btn-secondary {
  flex: 1 1 auto;
}

.cerez-panel-kapat {
  display: block;
  margin: -4px 0 8px auto;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}

/* Panel açıkken arka planın kaydırılmasını engelle (mobilde de) */
body.cerez-panel-acik { overflow: hidden; }

/* ---- Mobil / dar ekran: her cihazda uyumlu görünüm ----
   ÖNCEKİ SORUN: şerit mobilde metni tam boyutta (0.88rem, geniş
   satır aralığıyla) gösterip 3 butonu alt alta tam genişlikte
   diziyordu; uzun KVKK metniyle birleşince şerit ekranın yarısına
   yakın bir yer kaplıyor, ayrıca sabit (position:fixed) olduğu için
   altındaki sayfa içeriğinin bir kısmını da örtüyordu. Burada metni
   biraz küçültüp sıkılaştırıyoruz, iki ikincil butonu yan yana tek
   satıra alıyoruz (birincil buton altta tam genişlik kalıyor) ve
   şeridin kendisine bir tavan yükseklik + iç kaydırma koyuyoruz ki
   çok kısa ekranlarda (yatay mod telefon vb.) bile asla ekranın
   yarısından fazlasını kaplamasın; hiçbir buton/metin kaldırılmadı,
   sadece daha az dikey yer kaplayacak şekilde diziliyor. Sayfa
   içeriğinin şeridin ARKASINDA kalmaması için ise site-islemleri.js
   şerit görünürken <body>'e şeridin gerçek yüksekliği kadar
   padding-bottom ekliyor (bkz. o dosyadaki "bannerBoslukAyarla"). */
@media (max-width: 640px) {
  .cerez-banner {
    padding: 14px 16px;
    max-height: 45vh;
    overflow-y: auto;
    gap: 10px;
  }
  .cerez-banner-metin { font-size: 0.82rem; }
  .cerez-banner-metin p { line-height: 1.35; }
  .cerez-banner-aksiyonlar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cerez-banner-aksiyonlar .cerez-btn-secondary { flex: initial; }
  .cerez-banner-aksiyonlar .cerez-btn-primary {
    grid-column: 1 / -1;
    flex: initial;
  }
  .cerez-panel {
    padding: 18px 16px;
    max-height: 90vh;
  }
}

/* Çok dar ekranlarda (küçük telefonlar) iki ikincil butonu da tek
   sütuna indir; grid zaten taşmayı engelliyordu, bu sadece okunurluk
   içindir. */
@media (max-width: 360px) {
  .cerez-banner-aksiyonlar { grid-template-columns: 1fr; }
}