/* ============================================================================
   SFETE — PAYLASILAN UST SERIT STILI
   ----------------------------------------------------------------------------
   Ahsen: "Ayni hizmete eden ikonlarin bir birinden bagimsiz olmasi hic hosuma
   gitmiyor." Dogru teshis: ust serit (logo · arama · giris · dil) her sayfanin
   KENDI <style> blogunda ayri ayri tanimliydi ve zamanla birbirinden ayristi.

   Bu dosya o ortak parcalarin TEK tanimidir. Her sayfa bunu link'ler; sayfaya
   ozel <style> blogundan SONRA gelir, boylece esitlikte bu kazanir.

   ONEMLI: Bu kurallar daha once sfete-kat.js icinden CALISMA ANINDA
   enjekte ediliyordu. JS calisana kadar sayfa ESKI bozuk serit ile
   goruntuleniyordu — arama dugmesi "Anmelden"in ustune biniyor, dil menusu
   acilir olmuyordu. CSS artik ilk boyamada hazir; bekleme yok.
   ========================================================================== */

/* --- ust serit yerlesimi -------------------------------------------------- */
.nav{gap:12px;flex-wrap:nowrap}
.nav>*{min-width:0}
.logo,.logo-img{flex:none}

/* Arama kutusu AKISIN ICINDE durur.
   Onceki `.nav .hsearch{position:absolute;left:50%}` kutuyu seridin ortasina
   civiliyordu: dar ekranda giris dugmelerinin UZERINE biniyordu (Ahsen'in
   ekran goruntusu). Akista duran bir kutu hicbir genislikte binmez. */
.nav .hsearch{
  position:static;left:auto;top:auto;transform:none;
  flex:1 1 220px;min-width:0;max-width:430px;margin:0 8px;width:auto;
}
.hsearch input{min-width:0;width:100%}
.nav .spacer{flex:0 0 0px;min-width:0}
.nav .toplink,.nav .btn-dark,.nav .shopbtn,.nav .menu-toggle{flex:none}
/* Dar alanda once IKINCIL baglantilar cekilir — cakismadan once yer acilir. */
@media(max-width:1120px){ .nav .toplink.ikincil{display:none} }

/* --- kategori seridi: sikismak yerine yatay kayar ------------------------- */
.catbar-inner{gap:8px}
.quicklinks{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;
  -webkit-overflow-scrolling:touch}
.quicklinks::-webkit-scrollbar{display:none}
.quicklinks>*{flex:none;white-space:nowrap}
.shopbtn,.shopbtn-cat,.allcats{flex:none}

/* --- DIL SECICI (acilir menu) --------------------------------------------- */
/* `.lang` kutusunda `overflow:hidden` vardi ve acilir panel KIRPILIYORDU:
   panel olculuyor ama gorunmuyordu. Serbest birakiliyor. */
.lang{overflow:visible}
.sf-dil{position:relative;display:inline-block;font-family:inherit}
.sf-dil-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid rgba(0,0,0,.14);background:#fff;color:#111;border-radius:999px;
  padding:6px 10px;font-size:12.5px;font-weight:800;line-height:1;font-family:inherit}
.sf-dil-btn .fl{font-size:14px;line-height:1}
.sf-dil-btn svg{width:12px;height:12px;opacity:.55;transition:transform .18s}
.sf-dil.acik .sf-dil-btn svg{transform:rotate(180deg)}
.sf-dil-liste{position:absolute;top:calc(100% + 6px);right:0;z-index:2200;min-width:186px;
  background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);display:none;max-height:60vh;overflow:auto}
.sf-dil.acik .sf-dil-liste{display:block}
.sf-dil-liste button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;padding:9px 10px;border-radius:10px;
  font-family:inherit;font-size:13.5px;font-weight:650;color:#111}
.sf-dil-liste button:hover{background:rgba(0,0,0,.05)}
.sf-dil-liste button.on{background:rgba(0,0,0,.06);font-weight:850}
.sf-dil-liste .kod{margin-left:auto;font-size:11px;font-weight:800;opacity:.5}
/* Web arayuzu ACIK temali; tarayicinin koyu tercihine uyarsak menu sayfanin
   geri kalanindan kopuk duruyordu. */
.sf-dil-btn,.sf-dil-liste{color-scheme:light}

/* --- genel: hicbir sey yatay tasmasin ------------------------------------- */
html,body{max-width:100%;overflow-x:hidden}
.wrap{box-sizing:border-box}
/* Yuzen yapay zeka dugmesi sayfanin SON icerigini kapatmasin. */
body{padding-bottom:84px}
@media(max-width:560px){ .ai-fab{transform:scale(.86);transform-origin:100% 100%} }

/* --- KARANLIK MOD ANAHTARI ------------------------------------------------
   Dil secicinin yaninda durur ve onunla AYNI kaliba uyar (yuvarlak, 1px
   kenarlik, ayni yukseklik) — ayni iste calisan iki dugmenin birbirinden
   bagimsiz gorunmesi istenmiyordu.                                          */
.sf-tema{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(0,0,0,.14);background:#fff;color:#111;border-radius:999px;
  width:30px;height:30px;padding:0;margin-right:8px;flex:none;
  font-family:inherit;line-height:1;transition:border-color .15s,background .15s}
.sf-tema:hover{border-color:rgba(0,0,0,.34)}
.sf-tema svg{width:15px;height:15px;display:block}
.sf-tema .ay{display:none}
.util-inner .lang{display:inline-flex;align-items:center}

/* ===== KOYU TEMA =====
   Sayfalar renklerini :root degiskenlerinden okuyor; tek yerden ceviriyoruz.
   `color-scheme` de degisir ki form ogeleri ve kaydirma cubugu uyumlu olsun. */
html[data-tema="koyu"]{color-scheme:dark}
html[data-tema="koyu"]{
  --ink:#eceef2; --ink2:#c9cdd6;
  --bg:#0f1115; --soft:#171a21; --soft2:#1e222b; --line:#2a2f3a;
  --muted:#98a0ae; --muted2:#7b8494;
  --acc-soft:#182338; --yellow-soft:#2a2410;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
html[data-tema="koyu"] body{background:var(--bg);color:var(--ink)}
/* Sayfalarda dogrudan #fff yazilmis yuzeyler var; koyu temada okunmaz olurdu. */
html[data-tema="koyu"] header.top{background:rgba(15,17,21,.92)}
html[data-tema="koyu"] .card,html[data-tema="koyu"] .sl-card,
html[data-tema="koyu"] .mega,html[data-tema="koyu"] .vtype,
html[data-tema="koyu"] .hsearch,html[data-tema="koyu"] .vfilters,
html[data-tema="koyu"] .loc-panel,html[data-tema="koyu"] .mobmenu,
html[data-tema="koyu"] .vf-toggle,html[data-tema="koyu"] .btn-ghost{
  background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-tema="koyu"] .sf-dil-btn,html[data-tema="koyu"] .sf-dil-liste,
html[data-tema="koyu"] .sf-tema{
  background:var(--soft);border-color:var(--line);color:var(--ink);color-scheme:dark}
html[data-tema="koyu"] .sf-dil-liste button{color:var(--ink)}
html[data-tema="koyu"] .sf-dil-liste button:hover{background:rgba(255,255,255,.07)}
html[data-tema="koyu"] .sf-dil-liste button.on{background:rgba(255,255,255,.1)}
html[data-tema="koyu"] .sf-tema .gunes{display:none}
html[data-tema="koyu"] .sf-tema .ay{display:block}
html[data-tema="koyu"] .util-strip{background:var(--soft)}

/* --- OTOMATIK YAKINLASTIRMAYI ONLE ---------------------------------------
   iOS Safari, yazi boyutu 16px'in ALTINDA olan bir alana dokununca sayfayi
   kendiliginden yakinlastirir ve bir daha geri cikmaz. Ahsen: "doldurulması
   gereken satırlara dokununca oto zoom oluyor, her şey düz standart kalsın".

   Cozum standart olani: dokunmatik cihazda form alanlari tam 16px olur —
   Safari o zaman yakinlastirmaz. `user-scalable=no` KULLANILMIYOR; o,
   kullanicinin kendi istegiyle yakinlastirmasini da engellerdi (erisilebilirlik).
   Masaustu tasarim aynen korunur: kural yalniz kaba isaretleyicide gecerli. */
@media (pointer: coarse){
  input, select, textarea,
  .hsearch input, .searchcard input, .searchcard select,
  .loc-panel input, .frange input, .ip-in{
    font-size:16px !important;
  }
}

/* Konum filtresi seridi — koyu modda sabit koyu kahve yazi okunmuyordu. */
html[data-tema="koyu"] .ksrt{background:rgba(244,196,0,.12);border-color:rgba(244,196,0,.34)}
html[data-tema="koyu"] .ksrt-t{color:var(--ink)}
html[data-tema="koyu"] .ksrt-x{background:rgba(255,255,255,.12);color:var(--ink)}

/* ==== KOYU TEMA GENEL DENETIM YAMASI (Ahsen 2026-08-31) ====
   Kontrast taramasinin buldugu kirilmalar. Iki kok neden:
   1) Sabit ACIK zeminler (background:#fff) koyu temada aynen kaliyor,
      yazi --ink ile BEYAZA donuyor -> beyaz ustune beyaz.
   2) ROL IHLALI: acik tasarim --ink'i (yazi rengi) ZEMIN olarak kullanmis
      (footer, camp-all). Koyu temada --ink beyaz olunca zemin de beyaza
      donuyor, ustundeki sabit beyaz yazi kayboluyor.
   3) ALTIN zeminde yazi var(--ink) idi; koyu temada beyaza donup altinda
      okunmaz oluyor — altin zeminde yazi HER ZAMAN koyu olmali.            */
/* ust serit baglantilari */
html[data-tema="koyu"] .toplink{color:var(--ink2)}
html[data-tema="koyu"] .toplink:hover{color:var(--ink)}
/* konum tetikleyici: sabit beyaz kutuydu */
html[data-tema="koyu"] .loc-trigger{background:var(--soft);border-color:var(--line);color:var(--ink)}
/* ALTIN zeminde yazi daima koyu */
html[data-tema="koyu"] .step .num,
html[data-tema="koyu"] .sfstep .lt,
html[data-tema="koyu"] .shopbtn-cat .pill,
html[data-tema="koyu"] .btn{color:#15151a}
html[data-tema="koyu"] .btn-dark{color:#fff}
/* footer + camp-all: zemin olarak --ink kullanilmisti (rol ihlali) */
html[data-tema="koyu"] footer{background:#15171c}
html[data-tema="koyu"] .camp-all{background:var(--soft2);color:var(--ink)}
/* hero: sabit acik gradyan */
html[data-tema="koyu"] .hero{background:linear-gradient(180deg,#14161c 0%,var(--bg) 62%)}
html[data-tema="koyu"] .searchbar{background:var(--soft);border-color:var(--line)}
html[data-tema="koyu"] .searchbar input,html[data-tema="koyu"] .searchbar select{color:var(--ink);background:transparent}
/* yakin sehir haplari: sabit beyaz */
html[data-tema="koyu"] .near-cities .pill{background:var(--soft);border-color:var(--line);color:var(--ink2)}
/* sfmean bolumu: baslik/metin sabit koyu renkti */
html[data-tema="koyu"] .sfmean h2{color:var(--ink)}
html[data-tema="koyu"] .sfmean p{color:var(--muted)}
/* kampanya kartlari + kural cubugu + dil kutusu: sabit beyaz zeminler */
html[data-tema="koyu"] .cmp-card{background:var(--soft);border-color:var(--line)}
html[data-tema="koyu"] .cmp-btn{background:#22252d;color:var(--ink)}
html[data-tema="koyu"] .camp-rule{background:var(--soft);border-color:var(--line);color:var(--ink2)}
html[data-tema="koyu"] .util-strip .lang{background:var(--soft)}
/* how bolumu: zemin=--ink rol ihlali (footer ile ayni) */
html[data-tema="koyu"] .how{background:#15171c}
/* step kartlari + btn-dark: zemin=--ink2/--ink rol ihlali */
html[data-tema="koyu"] .step{background:#1b1e25}
html[data-tema="koyu"] .btn-dark{background:#22252d}