/* ==================================================================
   CEREZ BANDI
   ------------------------------------------------------------------
   Tailwind build'inden bagimsiz, elle yazilmis. Sitenin her
   sayfasinda yuklendigi icin kucuk tutuldu.

   Bant icerigi ENGELLEMEZ: sayfanin altina oturur, uzerine perde
   cekmez. Cerez duvari (icerigi gormek icin kabul zorunlulugu)
   bilerek kullanilmadi.

   position:fixed oldugu icin sayfa akisindan cikar - CLS uretmez.
================================================================== */

.cerez-bant{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;                     /* mobil aksiyon cubugu z-40, ustunde kalmali */
  background:#0f172a;
  color:#e2e8f0;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -10px 30px rgba(15,23,42,.35);
  font-size:.875rem;
  animation:cerez-gir .35s cubic-bezier(.16,1,.3,1);
}
.cerez-bant[hidden]{ display:none; }

@keyframes cerez-gir{
  from{ transform:translateY(100%); }
  to  { transform:translateY(0); }
}

.cerez-ic{
  max-width:80rem;
  margin:0 auto;
  padding:1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}
@media (min-width:640px){ .cerez-ic{ padding:1.1rem 1.5rem; } }
@media (min-width:1024px){ .cerez-ic{ padding:1.1rem 2rem; flex-wrap:nowrap; } }

.cerez-govde{ flex:1 1 20rem; min-width:0; }

.cerez-baslik{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .3rem;
  font-size:.82rem;
  font-weight:700;
  color:#fff;
}
.cerez-baslik i{ color:#60a5fa; font-size:.8rem; }

.cerez-metin{
  margin:0;
  font-size:.82rem;
  line-height:1.6;
  color:rgba(226,232,240,.75);
}
.cerez-link{
  color:#93c5fd;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}
.cerez-link:hover{ color:#fff; }

/* ---- Butonlar ----
   Kabul ve Red AYNI olcu ve agirlikta. Reddi kucultmek ya da
   soluklastirmak gecerli riza sayilmiyor. */
.cerez-butonlar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  flex:0 0 auto;
}
.cerez-btn{
  flex:1 1 auto;
  min-width:8.5rem;
  padding:.6rem 1.1rem;
  border-radius:.6rem;
  border:1px solid transparent;
  font-size:.82rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.cerez-btn:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px; }

.cerez-btn-kabul{ background:#2563eb; color:#fff; }
.cerez-btn-kabul:hover{ background:#1d4ed8; }

.cerez-btn-red{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.cerez-btn-red:hover{ background:rgba(255,255,255,.2); }

.cerez-btn-ikincil{
  background:transparent;
  border-color:rgba(255,255,255,.2);
  color:rgba(226,232,240,.8);
  min-width:6rem;
}
.cerez-btn-ikincil:hover{ color:#fff; border-color:rgba(255,255,255,.4); }

/* Dar ekranda uc buton yan yana sigmiyordu (96+144+146 + bosluklar
   = 402px, ekran 375px) ve tasiyordu. Burada alt alta diziliyorlar.
   Kabul ve Red yine ayni genislik ve ayni agirlikta; sadece
   "Ayarlar" en alta aliniyor. */
@media (max-width:639px){
  .cerez-butonlar{ width:100%; }
  .cerez-btn{ min-width:0; flex:1 1 100%; }
  .cerez-btn-kabul{ order:1; }
  .cerez-btn-red{ order:2; }
  .cerez-btn-ikincil{ order:3; }
}

/* ---- Tercih paneli ---- */
.cerez-ayarlar{
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  max-height:min(60vh,26rem);
  overflow-y:auto;
}
.cerez-ayarlar[hidden]{ display:none; }
.cerez-ayarlar .cerez-ic{ display:block; padding-top:1.1rem; padding-bottom:1.1rem; }

.cerez-kategori{
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cerez-kategori:last-of-type{ border-bottom:0; }

.cerez-kategori-ust{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}

.cerez-anahtar{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  cursor:pointer;
  user-select:none;
}
.cerez-anahtar-kilitli{ cursor:default; }
.cerez-anahtar input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

/* Kaydirak */
.cerez-kaydirak{
  position:relative;
  flex:0 0 auto;
  width:2.35rem;
  height:1.3rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  transition:background .2s ease;
}
.cerez-kaydirak::after{
  content:"";
  position:absolute;
  top:.18rem; left:.18rem;
  width:.94rem; height:.94rem;
  border-radius:999px;
  background:#fff;
  transition:transform .2s ease;
}
.cerez-anahtar input:checked + .cerez-kaydirak{ background:#2563eb; }
.cerez-anahtar input:checked + .cerez-kaydirak::after{ transform:translateX(1.05rem); }
.cerez-anahtar input:disabled + .cerez-kaydirak{ background:#334155; opacity:.75; }
.cerez-anahtar input:focus-visible + .cerez-kaydirak{ outline:2px solid #60a5fa; outline-offset:2px; }

.cerez-kategori-ad{ font-size:.85rem; font-weight:700; color:#fff; }

.cerez-rozet{
  padding:.18rem .5rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:.66rem;
  font-weight:700;
  color:rgba(226,232,240,.6);
  white-space:nowrap;
}

.cerez-kategori-metin{
  margin:.5rem 0 0;
  padding-left:2.95rem;
  font-size:.8rem;
  line-height:1.6;
  color:rgba(226,232,240,.66);
}
.cerez-kategori-ornek{
  margin:.35rem 0 0;
  padding-left:2.95rem;
  font-size:.73rem;
  line-height:1.55;
  color:rgba(226,232,240,.42);
}
@media (max-width:479px){
  .cerez-kategori-metin,
  .cerez-kategori-ornek{ padding-left:0; }
}

.cerez-ayar-butonlar{
  display:flex;
  justify-content:flex-end;
  padding-top:1rem;
}
.cerez-ayar-butonlar .cerez-btn{ flex:0 0 auto; }

/* ==================================================================
   BANT ACIKKEN SABIT OGELERI YUKARI IT
   ------------------------------------------------------------------
   --cerez-yukseklik degerini cerez.php'deki JS yaziyor (bandin
   gercek olculen yuksekligi; bant kapaliyken 0).

   Bu dosya tailwind.css'ten SONRA yuklendigi icin, ayni ozgullukteki
   Tailwind siniflarini (bottom-0 / bottom-6) gecersiz kilar.
   Degisken tanimsizsa 0px varsayilir; yani JS calismasa bile ogeler
   bugunku yerinde kalir, hicbir sey bozulmaz.
================================================================== */

/* Hizmet sayfalarindaki mobil "Ara / WhatsApp" cubugu (bottom-0) */
.cerez-iter-cubuk{
  bottom:var(--cerez-yukseklik,0px);
  transition:bottom .3s cubic-bezier(.16,1,.3,1);
}

/* Her sayfadaki yuzen WhatsApp butonu (bottom-6 = 1.5rem) */
.cerez-iter-yuzen{
  bottom:calc(1.5rem + var(--cerez-yukseklik,0px));
  transition:bottom .3s cubic-bezier(.16,1,.3,1);
}

/* Ayarlar paneli acikken bant ekranin yarisindan uzun olabiliyor.
   O durumda itmek yerine gizliyoruz - yoksa cubuk ekranin tepesine
   yapisiyor. Panel kapanir kapanmaz geri geliyorlar. */
.cerez-panel-buyuk .cerez-iter-cubuk,
.cerez-panel-buyuk .cerez-iter-yuzen{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .cerez-iter-cubuk,
  .cerez-iter-yuzen{ transition:none; }
}

/* Footer'daki "Çerez tercihleri" baglantisi */
.cerez-tercih-linki{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  text-align:left;
}
.cerez-tercih-linki:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .cerez-bant{ animation:none; }
  .cerez-kaydirak,
  .cerez-kaydirak::after{ transition:none; }
}