/* ==========================================================================
   ÇEREZ (KVKK / GDPR) BARI + TERCİH MODALI — Simya Koleji
   --------------------------------------------------------------------------
   İşaretleme: private/page/tema/core/cerez.php  ·  Davranış: js/cerez.js
   Bu dosya head.php'de TÜM tema sayfalarına yüklenir (banner her sayfada var).

   ⚠ SABİT HEX YOK — renkler main.css var(--c-*) token'larından gelir; kampüs
     mikrositelerinde paleti kendiliğinden takip eder (rgba() gölgeler hariç).
   ⚠ Z-INDEX SIRASI: bar 1040 · fab 1050 · bottom-menu (main.css) 1100 · modal 1150 —
     bar mobilde alt menünün ÜSTÜNE oturur (konum olarak, çakışmasın diye). Modal
     açıkken karartması alt menüyü de örter (bkz. 2. KATMAN notu).
   ========================================================================== */

/* ==========================================================================
   1. KATMAN — ONAY BARI
   ========================================================================== */
.cerez-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--c-primary-dark);
  color: var(--c-white);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}

.cerez-bar--gizli { transform: translateY(110%); opacity: 0; pointer-events: none; }

.cerez-bar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.25rem;
}

.cerez-bar__metin {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: .6875rem;
  flex: 1 1 auto;
  min-width: 0;
}

.cerez-bar__metin > i { color: var(--c-white); font-size: 1.35rem; flex: none; }
.cerez-bar__metin > span { min-width: 0; }

.cerez-bar__link {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cerez-bar__link:hover { color: var(--c-primary-light); }

.cerez-bar__aksiyon { display: flex; align-items: center; gap: .5rem; flex: none; }

/* ---------- Ortak buton stilleri (bar + modal) ---------- */
.cerez-btn {
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: .8438rem;
  padding: .5rem 1.125rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform .15s;
}

/* Onay barı KOYU MAVİ zeminde durur → birincil eylem BEYAZ zemin + koyu mavi metinle
   en yüksek kontrastı verir (amber aksan yerine tema paleti — 2026-07-27). */
.cerez-btn--kabul {
  background: var(--c-white);
  color: var(--c-primary-dark);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.cerez-btn--kabul:hover { background: var(--c-primary-light); color: var(--c-primary-dark); transform: translateY(-1px); }

/* ⚠ MODAL İÇİNDE zemin BEYAZ olduğu için yukarıdaki beyaz dolgu birincil eylemi
   görünmez kılıyordu (beyaz üstüne beyaz). Modalda birincil eylem DOLU MAVİ olur;
   barda (koyu mavi zemin) beyaz kalır. Tek sınıf, iki bağlam. */
.cerez-modal .cerez-btn--kabul {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 4px 14px rgba(0, 114, 188, .32);
}
.cerez-modal .cerez-btn--kabul:hover {
  background: var(--c-primary-dark);
  color: var(--c-white);
}

.cerez-btn--reddet {
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, .35);
}
.cerez-btn--reddet:hover { border-color: var(--c-white); background: rgba(255, 255, 255, .08); }

.cerez-btn--ayar {
  background: transparent;
  color: rgba(255, 255, 255, .78);
  padding-inline: .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cerez-btn--ayar:hover { color: var(--c-white); }

/* ==========================================================================
   2. KATMAN — TERCİH MODALI
   ========================================================================== */
/* z-index 1150 (2026-10-02): 1060 iken mobil alt menü (.bottom-menu, main.css 1100)
   karartmanın ÜSTÜNDE kalıyor, açık modalın altında tıklanabiliyordu (tıklayınca
   sayfa değişip seçim kaydedilmeden modal kapanıyordu). 1150: alt menü (1100) ve
   açık mobil menülü başlık (1101) üstünde; galeri lightbox (1200) ve ön yükleyici
   (9999) altında. Masaüstünde alt menü yok — görünüm değişmez. */
.cerez-modal {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cerez-modal[hidden] { display: none; }

.cerez-modal__arka {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}

.cerez-modal__kutu {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: cerezModalAc .28s cubic-bezier(.22, 1, .36, 1);
}

@keyframes cerezModalAc {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.cerez-modal__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--c-gray-light);
}

.cerez-modal__logo-sarmal { margin: 0; font-size: 1rem; line-height: 1; }
.cerez-modal__logo { height: 34px; width: auto; display: block; }
.cerez-modal__ad { font-weight: var(--fw-extrabold); color: var(--c-primary-dark); }

.cerez-modal__x {
  background: transparent;
  border: 0;
  color: var(--c-gray);
  font-size: 1.125rem;
  cursor: pointer;
  padding: .3125rem;
  line-height: 1;
}
.cerez-modal__x:hover { color: var(--c-primary); }

.cerez-modal__govde { padding: 1.25rem 1.5rem; }

.cerez-modal__giris {
  font-size: .875rem;
  color: var(--c-text);
  line-height: 1.7;
  margin: 0 0 .875rem;
}
.cerez-modal__giris .cerez-bar__link { color: var(--c-primary); white-space: normal; }

/* ---------- Sekmeler ---------- */
.cerez-sekmeler {
  display: flex;
  gap: 1.375rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--c-gray-light);
}

.cerez-sekme {
  background: none;
  border: 0;
  cursor: pointer;
  padding: .8125rem 0;
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: .875rem;
  color: var(--c-gray);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.cerez-sekme:hover { color: var(--c-primary); }
.cerez-sekme--aktif { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.cerez-sekme-panel { display: none; }
.cerez-sekme-panel--aktif { display: block; }

/* ---------- Uyumluluk rozetleri ---------- */
.cerez-uyum { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--c-gray-light); }

.cerez-uyum__baslik {
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  color: var(--c-primary-dark);
  margin: 0 0 .5rem;
}

.cerez-uyum__kart { display: flex; align-items: flex-start; gap: .75rem; padding: .6875rem 0; }
.cerez-uyum__kart + .cerez-uyum__kart { border-top: 1px solid var(--c-gray-light); }

.cerez-uyum__ikon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 1rem;
}

.cerez-uyum__metin strong {
  display: block;
  font-size: .875rem;
  color: var(--c-primary-dark);
  font-weight: var(--fw-bold);
  margin-bottom: .125rem;
}
.cerez-uyum__metin span { font-size: .78125rem; color: var(--c-gray); line-height: 1.5; }

/* ---------- Akordeon kategoriler ---------- */
.cerez-kat { padding: 0; border-top: 1px solid var(--c-gray-light); }
.cerez-kat:first-child { border-top: 0; }

.cerez-kat__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
}

.cerez-kat__ac {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .625rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: left;
  min-width: 0;
  font-family: inherit;
}
.cerez-kat__ac strong { font-size: .9375rem; color: var(--c-primary-dark); font-weight: var(--fw-bold); }

.cerez-kat__ok {
  color: var(--c-gray);
  font-size: .6875rem;
  transition: transform .25s ease, color var(--transition);
  flex: none;
}
.cerez-kat--acik .cerez-kat__ok { transform: rotate(90deg); color: var(--c-primary); }

.cerez-kat__hep {
  flex: none;
  font-size: .75rem;
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  background: var(--c-primary-light);
  padding: .25rem .6875rem;
  border-radius: 999px;
}

.cerez-kat__aciklama {
  display: none;
  font-size: .8125rem;
  color: var(--c-gray);
  line-height: 1.6;
  padding: 0 0 .875rem 1.375rem;
}
.cerez-kat--acik .cerez-kat__aciklama { display: block; animation: cerezKatAc .25s ease; }

@keyframes cerezKatAc {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Toggle switch ---------- */
.cerez-switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.cerez-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.cerez-switch__yuva {
  position: absolute;
  inset: 0;
  background: var(--c-gray-light);
  border-radius: 999px;
  transition: background var(--transition);
}
.cerez-switch__yuva::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.cerez-switch input:checked + .cerez-switch__yuva { background: var(--c-primary); }
.cerez-switch input:checked + .cerez-switch__yuva::after { transform: translateX(20px); }
.cerez-switch input:focus-visible + .cerez-switch__yuva { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- Modal alt aksiyon çubuğu ---------- */
.cerez-modal__alt {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--c-gray-light);
  background: var(--c-light);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.cerez-modal__alt .cerez-btn--reddet { color: var(--c-text); border-color: var(--c-gray-light); }
.cerez-modal__alt .cerez-btn--reddet:hover { border-color: var(--c-gray); background: rgba(0, 0, 0, .04); }
.cerez-modal__alt .cerez-btn--ayar { color: var(--c-primary); }
.cerez-modal__alt .cerez-btn--ayar:hover { color: var(--c-primary-dark); }

/* ==========================================================================
   SOL-ALT YÜZEN ÇEREZ İKONU (rıza sonrası görünür)
   ⚠ Mobil alt menünün (bottom-menu) üstüne konumlanır.
   ========================================================================== */
.cerez-fab {
  position: fixed;
  left: 1.25rem;
  bottom: calc(var(--bottom-menu-h) + 1rem);
  z-index: 1050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* BEYAZ daire + MARKA MAVİSİ ikon (2026-07-27, kullanıcı isteği: "ikon mavi çevresi beyaz").
     Önce amber ikondu → marka dışıydı; sonra dolu mavi denendi → kullanıcı tersini istedi.
     Kampüs modunda --c-primary kampüs paletiyle ezildiği için ikon kampüs rengini
     kendiliğinden alır. Hover'da renkler yer değiştirir (dolu mavi + beyaz ikon). */
  background: var(--c-white);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  box-shadow: var(--shadow-lg);
  font-size: 1.25rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease, background var(--transition), color var(--transition);
}
.cerez-fab--gorunur { display: flex; }
.cerez-fab:hover {
  transform: translateY(-3px) rotate(-8deg);
  background: var(--c-primary-dark);
  color: var(--c-white);
}

@media (min-width: 992px) {
  /* Masaüstünde bottom-menu yok → FAB dibe yaklaşır */
  .cerez-fab { bottom: 1.75rem; left: 1.75rem; }
}

/* ==========================================================================
   FOOTER YASAL ŞERİDİ — "Çerez Ayarları" butonu (OPSİYONEL KANCA)
   --------------------------------------------------------------------------
   ⚠ Buton footer.php'den KALDIRILDI (2026-07-27, kullanıcı isteği): rızayı geri
     çekme kapıları artık sol-alt yüzen ikon (.cerez-fab) ve yasal sayfaların sol
     navigasyonundaki .belge-nav__cerez butonudur.
   Kural BİLEREK korunuyor: cerez.js #cerezAyarAcFooter'ı hâlâ opsiyonel olarak
   bağlar; butonu geri eklemek isteyen tek satır işaretleme yazar, stil hazırdır.
   ========================================================================== */
.site-footer__cerez {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
.site-footer__cerez:hover { color: var(--c-primary-light); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  /* Mobilde bar, alt menünün ÜSTÜNE oturur (alt menüyü kapatmasın) */
  .cerez-bar { bottom: var(--bottom-menu-h); }
  .cerez-bar__inner { flex-wrap: wrap; padding: .875rem 1.125rem; gap: .75rem; }
  .cerez-bar__metin { flex: 1 1 100%; }
  .cerez-bar__aksiyon { flex: 1 1 100%; justify-content: flex-end; }
}

@media (max-width: 991.98px) {
  .cerez-bar { bottom: var(--bottom-menu-h); }
}

@media (max-width: 520px) {
  .cerez-bar__aksiyon { flex-wrap: wrap; }
  .cerez-bar__aksiyon .cerez-btn--reddet,
  .cerez-bar__aksiyon .cerez-btn--kabul { flex: 1 1 auto; text-align: center; }
  .cerez-modal__alt { justify-content: stretch; }
  .cerez-modal__alt .cerez-btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cerez-bar,
  .cerez-modal__kutu,
  .cerez-kat--acik .cerez-kat__aciklama { transition: none; animation: none; }
}