/* ============ TİPOGRAFİ: INTER ============
   Kendi sunucumuzda barındırılıyor, Google Fonts'a bağlanılmıyor: sitenin KVKK
   duruşu üçüncü taraflara IP sızdırmamak üzerine kurulu ve ek bir DNS+TLS
   el sıkışması ilk boyamayı geciktirir. Değişken font — 400-800 arası bütün
   ağırlıklar tek dosyada.

   İki alt küme yeterli:
     latin      -> ı (U+0131), ç ö ü (U+00E7, U+00F6, U+00FC)
     latin-ext  -> Ğ ğ (U+011E/F), İ (U+0130), Ş ş (U+015E/F)
   Tarayıcı sayfada hangi karakter varsa yalnız o dosyayı indirir.

   font-display:swap — font inene kadar metin sistem yazı tipiyle görünür,
   kullanıcı boş ekrana bakmaz. */
@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* EnUcuzŞarj — uygulama stil sayfası
   Copyright (c) 2026 İsmail Güleser. Tüm Hakları Saklıdır.
   index.html'den ayrıldı: /fiyatlar/, /hesapla/ ve /sss/ aynı dosyayı kullanıyor,
   böylece dört sayfa tek tasarım dili paylaşıyor ve tarayıcı bir kez indiriyor. */
:root{
  /* Koyu tema: saf siyahtan kaçınıp katmanları yumuşak gri-mavilerle ayırıyoruz;
     kenarlıklar düşük kontrast, metin yüksek kontrast (WCAG AA hedefi). */
  /* Yüzey merdiveni: koyu temada öne gelen yüzey AÇILIR.
       bg (sayfa) < panel (yan panel) < bg2 (kart) < panel2 (kart içi kutu)
     Önceki palet mavi-baskındı; nötre çekildi, taban derinleşti ki içerik öne çıksın. */
  --bg:#0b0f14; --panel:#12181f; --bg2:#171e26; --panel2:#1e2731;
  --line:#2b3540; --line2:#3b4653;
  --txt:#e8eef5; --dim:#9aa7b5; --dim2:#8290a0;   /* ölçülerek açıldı: 3.83 -> 5.16 */
  --acc:#34e0a6; --acc-d:#0b3a2c; --acc2:#5aa8ff; --warn:#f5b13d; --bad:#f4636a;
  --acc-ink:#34e0a6;   /* vurgunun METİN tonu — koyu zeminde vurgu rengiyle aynı */
  /* ---- TİPOGRAFİ ÖLÇEĞİ ----
     Önce 20'den fazla ayrı boyut vardı (13.5, 12.5, 11.5, 10.5 …) — organik
     büyümenin izi. Sekiz basamaklı kararlı bir ölçek, arayüze ritim veriyor:
     her boyutun bir işi var ve aradaki fark gözle ayırt edilebiliyor. */
  --fs-2xs:11px;   /* mikro etiket: rozet üstü, kart etiketi */
  --fs-xs:12px;    /* rozet, alt bilgi */
  --fs-sm:13px;    /* ikincil metin */
  --fs-base:14px;  /* arayüz varsayılanı */
  --fs-md:15px;    /* kart başlığı, vurgulu gövde */
  --fs-lg:17px;    /* bölüm değeri */
  --fs-xl:21px;    /* başlık */
  --fs-2xl:26px;   /* sayfa başlığı */

  /* ---- ARALIK ÖLÇEĞİ ---- */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px;
  --sp-5:16px; --sp-6:20px; --sp-7:24px; --sp-8:32px;

  /* Sayılar her yerde aynı genişlikte olsun: fiyat sütunu zıplamasın. */
  --num:"tnum" 1, "lnum" 1;

  --r:18px; --r2:14px; --r3:10px;
  --sh:0 8px 30px rgba(0,0,0,.45); --sh-s:0 2px 8px rgba(0,0,0,.3);
  --tap:44px;                       /* parmakla basılabilir en küçük yükseklik */
}
[data-theme="light"]{
  /* Aydınlıkta yükselti AÇIKLIKTAN değil GÖLGEDEN gelir: kartlar beyaz kalır,
     sayfa zemini bir tık koyulaşır ki kart gerçekten üstte dursun. Eskiden
     bg2 ve panel'in ikisi de saf beyazdı, kart yan panelden ayrışmıyordu. */
  --bg:#eef1f5; --panel:#fff; --bg2:#fff; --panel2:#f1f4f8;
  --line:#dfe5ec; --line2:#c8d2de;
  --txt:#0e1620; --dim:#586675; --dim2:#646f7d;   /* 3.17 -> 5.11 */
  --acc:#00a173; --acc-d:#dcf5ea;
  /* Aydınlıkta vurgu rengi metin olarak beyaz üstünde 3.31'de kalıyordu (AA 4.5 ister);
     metin için koyulaştırılmış ton: beyaz üstünde 5.16. */
  --acc-ink:#007d55;
  --acc2:#2563eb;
  /* Aydınlık gölgeler biraz güçlendi — kartın yüzdüğü hissi buradan geliyor. */
  --sh:0 8px 28px rgba(16,40,70,.10); --sh-s:0 1px 4px rgba(16,40,70,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);line-height:1.55;
  font-family:"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    "Helvetica Neue",sans-serif;
  /* Inter'in dar rakamları ve açık harf boşlukları arayüzde daha net okunuyor;
     "cv05" I harfini kancalı yapar (Türkçe I/İ ayrımı için değerli). */
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.02em}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);
  border-radius:10px;padding:9px 14px;transition:.15s}
button:hover{border-color:var(--acc)}
.btn-p{background:var(--acc);color:#04241a;border:none;font-weight:650}
[data-theme="light"] .btn-p{color:#fff}
.btn-p:hover{filter:brightness(1.08)}
select,input,textarea{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--acc)}
label{display:block;font-size:var(--fs-2xs);letter-spacing:.7px;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px;font-weight:600}

/* ---- NAV ---- */
nav{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--bg2) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1400px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:18px}
.logo{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.6px;display:flex;align-items:center;gap:7px;
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.logo em{font-style:normal;color:var(--acc-ink)}
/* Menü HİÇBİR genişlikte sayfayı yana itmemeli. Kaydırma sınırlaması eskiden
   yalnız max-width:860px içindeydi; 861-960 px arasında ne linkler gizleniyor ne
   de menü kendi içinde kayıyordu ve sayfa 15 px taşıyordu (900 px'te ölçüldü). */
.nav-l{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:nowrap;
  min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-l::-webkit-scrollbar{display:none}
.nav-in{min-width:0}
.nav-l a{color:var(--dim);font-size:var(--fs-base);font-weight:550;padding:7px 12px;border-radius:8px;white-space:nowrap}
.nav-l a:hover{color:var(--txt);background:var(--panel2);text-decoration:none}
.icon-b{padding:8px 10px;line-height:1;flex:0 0 auto}
@media(max-width:860px){
  .nav-l a.hide-m{display:none}
  .nav-in{gap:8px;padding:10px 12px;min-width:0}
  .logo{font-size:var(--fs-lg)}
  /* Üretilen sayfalarda menü 6 bağlantı + tema düğmesi taşıyor ve 375 px'te
     sayfayı 4 px yana itiyordu. Taşmak yerine kendi içinde kaysın. */
  .nav-l{gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
  .nav-l::-webkit-scrollbar{display:none}
  /* Dar ekranda başlıkta logo + Paylaş + Kur + tema + ayar aynı anda duruyordu
     ve tıka basa doluydu. "Paylaş" ikona iniyor — metni footer'da ve modalda var. */
  #shareBtn{font-size:0;gap:0;padding:0 4px}
  #shareBtn .ico{font-size:var(--fs-md);width:1.25em;height:1.25em}
  .nav-l a{padding:7px 8px;font-size:var(--fs-sm)}
}
@media(max-width:430px){
  .nav-l a.hide-s{display:none}   /* Harita bölümü zaten menünün hemen altında */
  .logo{font-size:var(--fs-lg);gap:5px}
}

/* ---- HERO ----
   Bu bir araç, açılış sayfası değil. Başlık 46px'lik gradyanlı bir pankarttı ve
   ekranın en baskın öğesiydi; oysa kullanıcının aradığı şey arama kutusu ve harita.
   Metin aynen duruyor (marka sözü + SEO), yalnızca görsel ağırlığı düşürüldü:
   başlık sayfa başlığı ölçüsüne indi, gradyan yerine tek renk vurgu geldi.
   Gradyanlı metin ayrıca alt satırlarda kırpılma ve kontrast ölçülemezliği getiriyordu. */
.hero{max-width:1400px;margin:0 auto;padding:var(--sp-7) 18px var(--sp-5);text-align:center}
.hero h1{font-size:clamp(21px,3vw,30px);font-weight:700;letter-spacing:-.4px;
  line-height:1.25;margin-bottom:var(--sp-2)}
.hero h1 em{font-style:normal;color:var(--acc-ink)}
.hero p{color:var(--dim);font-size:var(--fs-md);max-width:560px;margin:0 auto var(--sp-5)}

/* İstatistik şeridi: dört büyük kart yerine tek satırlık kompakt bir özet.
   Bunlar ürünün kendisi değil, ölçeğini anlatan üst bilgi. */
.stats{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;
  margin-top:var(--sp-5)}
.stat{background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:var(--sp-2) var(--sp-4);min-width:0;display:inline-flex;align-items:baseline;
  gap:var(--sp-2)}
.stat b{font-size:var(--fs-md);font-weight:750;color:var(--txt);letter-spacing:-.2px}
.stat span{font-size:var(--fs-2xs);color:var(--dim2);text-transform:uppercase;
  letter-spacing:.6px;font-weight:600}

/* ---- SEARCHBAR ---- */
.sbar{max-width:760px;margin:0 auto;display:flex;gap:9px;flex-wrap:wrap}
.sbar .f{flex:1 1 260px;position:relative}
.sug{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);z-index:800;
  max-height:250px;overflow:auto;display:none}
.sug.on{display:block}
.sug div{padding:10px 13px;cursor:pointer;font-size:var(--fs-base);border-bottom:1px solid var(--line)}
.sug div:last-child{border:0}
.sug div:hover{background:var(--panel2)}

/* ---- CITY QUICK BAR ---- */
.city-bar{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px;align-items:center}
.city-btn{padding:5px 12px;font-size:var(--fs-xs);border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--dim)}
.city-btn:hover,.city-btn.active{color:var(--acc-ink);border-color:var(--acc);background:var(--panel2)}
#ilSel{width:auto;min-width:186px;padding:6px 12px;font-size:var(--fs-sm);border-radius:999px;
  background:var(--panel);font-weight:600}
/* Arama önerilerindeki "mevcut konum" satırı */
.sug .sug-loc{display:flex;align-items:center;gap:9px;font-weight:650;color:var(--acc-ink);
  border-bottom:1px solid var(--line)}
.sug .sug-hd{padding:7px 13px;font-size:var(--fs-2xs);letter-spacing:.8px;text-transform:uppercase;
  color:var(--dim2);font-weight:700;cursor:default;background:var(--panel2);border-bottom:1px solid var(--line)}
.sug .sug-hd:hover{background:var(--panel2)}

/* ---- LAYOUT ---- */
section{max-width:1400px;margin:0 auto;padding:34px 18px}
.sec-h{margin-bottom:18px}
.sec-h h2{font-size:clamp(21px,3.2vw,29px);font-weight:750}
.sec-h p{color:var(--dim);margin:6px 0 0;font-size:var(--fs-base)}
/* Yan panel sabit 640 px'ti. Araç barı, filtre barı ve öne çıkanlar ızgarası
   eklenince liste için ~100 px kalıyordu — panelin neredeyse tamamı kontroldü.
   Yükseklik artık ekranla ölçekleniyor; asıl içerik (istasyon listesi) yer buluyor. */
.app{display:grid;grid-template-columns:410px 1fr;gap:16px;
  height:clamp(620px, 84vh, 940px)}
@media(max-width:960px){.app{grid-template-columns:1fr;height:auto}
  .map-wrap{height:380px;order:-1}
  /* Telefonda liste 560 px'lik bir kutuya hapsediliyordu: 60 kartlık liste iç içe
     kaydırma gerektiriyor, parmakla gezmesi eziyet oluyordu. Mobilde panel kendi
     yüksekliğince uzasın, sayfa normal kaydırılsın. */
  .side{max-height:none;overflow-y:visible}}
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;overflow-y:auto}
.map-wrap{position:relative;min-height:380px}
#map{position:absolute;inset:0;border-radius:var(--r);border:1px solid var(--line);background:#0a0d12}
#areaBtn{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:500;
  display:none;box-shadow:var(--sh);font-size:var(--fs-sm);padding:8px 16px;white-space:nowrap}
#areaBtn.on{display:block}

/* ---- CARDS ---- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);
  padding:16px;margin-bottom:12px;cursor:pointer;box-shadow:var(--sh-s);
  transition:border-color .16s, box-shadow .16s, transform .16s}
.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--sh)}
.card.best{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc), var(--sh-s);
  background:linear-gradient(180deg,var(--acc-d),var(--bg2) 70%)}
.ct{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.nm{font-weight:650;font-size:var(--fs-md);line-height:1.35;letter-spacing:-.1px}
.op{font-size:var(--fs-xs);color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.pv{font-size:var(--fs-2xl);font-weight:820;color:var(--acc-ink);white-space:nowrap;text-align:right;
  line-height:1.1;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.pu{font-size:var(--fs-2xs);color:var(--dim);text-align:right;letter-spacing:.4px;margin-top:1px}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.b{font-size:var(--fs-2xs);padding:4px 9px;border-radius:7px;background:var(--panel2);
  color:var(--dim);font-weight:600;letter-spacing:.2px;line-height:1.4}
.b.dc{background:#173254;color:#78bdff}.b.ac{background:#2b2a4d;color:#b3a4ff}
.b.ok{background:#0f3d28;color:#4ade80}.b.no{background:#421a1c;color:#f87171}
.b.hit{background:var(--acc);color:#04241a}
.b.est{background:#3d3410;color:#facc15}
[data-theme="light"] .b.est{background:#fef3c7;color:#a16207}
.b.old{background:var(--panel2);color:var(--dim2)}
/* "mahalle düzeyinde" rozeti UYARI değil, BİLGİ. 1.683 EPDK kaydının çoğunda
   göründüğü için amber bir uyarı rengiyle basmak listeyi sürekli alarm hâlinde
   gösteriyordu. Nötr tona alındı; anlamı ikon ve metinde zaten var. */
.b.warn{background:var(--panel2);color:var(--dim)}
[data-theme="light"] .b.warn{background:var(--panel2);color:var(--dim)}
[data-theme="light"] .b.dc{background:#dbeafe;color:#1d4ed8}
[data-theme="light"] .b.ac{background:#ede9fe;color:#6d28d9}
[data-theme="light"] .b.ok{background:#dcfce7;color:#15803d}
[data-theme="light"] .b.no{background:#fee2e2;color:#b91c1c}
.est{margin-top:12px;padding:10px 12px;border-radius:var(--r3);background:var(--panel2);
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-sm);color:var(--dim)}
.est b{color:var(--txt);font-size:var(--fs-lg);font-weight:800;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums}
.card.best .est{background:var(--acc-d)}
.card.best .est b{color:var(--acc-ink)}
.save{color:var(--warn);font-weight:600}
.acts{display:flex;gap:8px;margin-top:12px}
.acts button{flex:1;min-height:var(--tap);padding:0 10px;font-size:var(--fs-sm);font-weight:600;
  border-radius:var(--r3);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.acts button[data-act="fav"]{flex:0 0 var(--tap);font-size:var(--fs-lg);padding:0}
.acts button:active{transform:scale(.97)}

/* ---- HIZLI FİLTRE (Kolay Mod) ---- */
/* Kaydırma yerine satır kaydırma: 390px'lik yan panelde dört hap tek satıra
   sığmıyordu ve sonuncusu gizli kalıyordu. Sarmalayınca hepsi görünür. */
.qf{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.qp{flex:0 0 auto;min-height:var(--tap);padding:0 14px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:650;white-space:nowrap;letter-spacing:-.1px;
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.qp:hover{border-color:var(--line2)}
.qp.on{background:var(--acc);border-color:var(--acc);color:#04241a;
  box-shadow:0 2px 10px rgba(52,224,166,.25)}
[data-theme="light"] .qp.on{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff;
  box-shadow:0 2px 10px rgba(0,125,85,.22)}
.qp:active{transform:scale(.97)}

/* ---- GELİŞMİŞ FİLTRELER (katlanır) ---- */
details.adv{margin:4px 0 2px;border:1px solid var(--line);border-radius:var(--r2);
  background:var(--panel);overflow:hidden}
details.adv>summary{list-style:none;cursor:pointer;padding:12px 14px;min-height:var(--tap);
  display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:650;color:var(--dim)}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::after{content:"⌄";margin-left:auto;font-size:var(--fs-lg);line-height:1;
  transition:transform .2s}
details.adv[open]>summary::after{transform:rotate(180deg)}
details.adv>summary:hover{color:var(--txt)}
.adv-body{padding:0 14px 14px;border-top:1px solid var(--line)}
.adv-body .chips{margin-top:12px}

/* ---- CHIPS ---- */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.chip{padding:6px 12px;font-size:var(--fs-sm);border-radius:999px;font-weight:600}
.chip.on{background:var(--acc);color:#04241a;border-color:var(--acc)}
[data-theme="light"] .chip.on{background:var(--acc-ink);border-color:var(--acc-ink);color:#fff}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:520px){.g3{grid-template-columns:1fr 1fr}}
.hr{height:1px;background:var(--line);margin:16px 0}
.lbl-sec{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
  font-weight:700;margin:16px 0 8px}
.status{font-size:var(--fs-sm);color:var(--dim);background:var(--panel2);padding:11px 13px;
  border-radius:10px;margin-top:10px}
.status b{color:var(--acc-ink)}

/* ---- TABLE ---- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-base);min-width:660px}
th{text-align:left;padding:12px 14px;font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:.7px;color:var(--dim);border-bottom:1px solid var(--line);
  cursor:pointer;user-select:none;white-space:nowrap;background:var(--panel2)}
th:hover{color:var(--acc-ink)}
td{padding:12px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border:0}
tr:hover td{background:var(--panel2)}
.price-c{font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cheap{color:var(--acc-ink)}.mid{color:var(--warn)}.exp{color:var(--bad)}
.vf{font-size:var(--fs-2xs);padding:2px 7px;border-radius:5px;font-weight:700}
.vf.y{background:#0f3d28;color:#4ade80}.vf.n{background:#3d3410;color:#facc15}
[data-theme="light"] .vf.y{background:#dcfce7;color:#15803d}
[data-theme="light"] .vf.n{background:#fef3c7;color:#a16207}

/* ---- CALC ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.res{display:flex;flex-direction:column;gap:11px}
.res-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 14px;background:var(--panel2);border-radius:10px}
.res-row span{color:var(--dim);font-size:var(--fs-sm)}
.res-row b{font-size:var(--fs-lg);font-weight:750}
.res-hero{background:linear-gradient(120deg,var(--acc-d),var(--panel2));
  border:1px solid var(--acc)}
.res-hero b{font-size:var(--fs-2xl);color:var(--acc-ink)}
.bar{height:9px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:5px 0 2px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc))}
input[type=range]{-webkit-appearance:none;padding:0;height:8px;background:var(--panel2);
  border:0;border-radius:99px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid var(--bg2)}

/* ============ TELEFONDA HARİTA ÖNCE ============
   Sorun: telefonda ürünün kendisi (harita) 725 px aşağıdaydı — açılışta iki ekran
   kaydırmadan görünmüyordu. Rakip uygulamalar doğrudan haritayla açılıyor.
   Çözüm: başlığı küçült, açıklama paragrafını gizle, il ve istatistik şeritlerini
   tek satırlık yatay kaydırmaya indir. Masaüstü görünüm değişmiyor. */
@media(max-width:760px){
  .hero{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  /* Telefonda başlık ARAÇ değil, aracın üstündeki etiket olmalı. 21px kalın iki
     satır ekranın en baskın öğesiydi; kullanıcının aradığı şey ise hemen altındaki
     arama kutusu. Metin aynen duruyor (SEO ve marka sözü), ağırlığı düşüyor. */
  .hero h1{font-size:var(--fs-base);font-weight:600;line-height:1.4;
    color:var(--dim);letter-spacing:0;margin-bottom:var(--sp-3);
    max-width:34ch;margin-left:auto;margin-right:auto}
  .hero h1 em{color:var(--acc-ink);font-weight:700}
  .hero p{display:none}                      /* pazarlama metni sayfanın altında zaten var */
  .sbar{gap:var(--sp-2)}
  .sbar .f{flex:1 1 100%}
  .sbar .btn-p{flex:1 1 100%;min-height:46px;font-size:var(--fs-md)}

  /* İl seçimi ve istatistikler: sarmak yerine tek satır, parmakla kaydırılır */
  .city-bar,.stats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    margin-top:10px;padding-bottom:4px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .city-bar::-webkit-scrollbar,.stats::-webkit-scrollbar{display:none}
  .city-bar>*,.stats>*{flex:0 0 auto}
  .stats{gap:var(--sp-2)}
  .stat{padding:var(--sp-2) var(--sp-4)}   /* biçim masaüstüyle ortak, yalnız aralık dar */
  #harita{scroll-margin-top:60px;padding-top:12px}
  /* Hızlı filtreler iki satıra sarıyordu; tek satır + yatay kaydırma */
  .qf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:3px}
  .qf::-webkit-scrollbar{display:none}
  .qf>*{flex:0 0 auto}
}

/* Menüdeki "Paylaş" bir bağlantı değil buton (modal açıyor) ama bağlantı gibi görünmeli. */
.lnk-b{background:none;border:0;padding:0;font:inherit;color:var(--acc);
  font-weight:650;cursor:pointer;min-height:auto}
.lnk-b:hover{border-color:transparent;text-decoration:underline}

/* ---- UYGULAMA OLARAK KUR ---- */
/* Kurulum düğmesi İKİNCİL. Önce dolu yeşildi ve başlıkta "Konumumu Bul" ile
   aynı ağırlıkta duruyordu — ekranda iki birincil eylem olamaz. Uygulama kurmak
   faydalı ama kullanıcının o an yapmak istediği şey değil; çerçeveli biçim
   görünürlüğü koruyor, baskınlığı bırakıyor. */
.btn-kur{background:transparent;color:var(--acc-ink);font-weight:650;
  border:1px solid var(--acc);padding:7px 13px;border-radius:10px;
  font-size:var(--fs-sm);white-space:nowrap;min-height:36px}
.btn-kur:hover{background:var(--acc-d);border-color:var(--acc)}
/* Dar ekranda etiketi kısalt. font-size:0 KULLANILMAZ: ikonlar em tabanlı,
   sıfır yazı boyutu onları da yok ederdi. Metni gizleyip ikonu bırakıyoruz. */
@media(max-width:520px){
  .btn-kur{padding:8px 12px;gap:6px}
  .btn-kur span{display:none}
  .btn-kur::after{content:"Kur"}
}
.btn-kur{display:inline-flex;align-items:center;gap:7px}

/* Arama önerilerinde istasyon satırı iki kademeli: ad üstte, operatör/fiyat altta */
.sug .s-ad{display:block;font-size:var(--fs-sm);color:var(--txt);line-height:1.3}
.sug .s-alt{display:block;font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums}

/* ---- ARAÇ SEÇİCİ ----
   Sürücünün asıl sorusu "kWh kaç lira" değil "benim arabam ne kadar tutar".
   Bu yüzden filtrelerin içine gömülmedi, listenin başında duruyor. */
.arac-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r3)}
.arac-et{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--dim2);flex:0 0 auto}
.arac-bar select{flex:1 1 150px;min-width:0;min-height:34px;padding:0 var(--sp-3);
  font-size:var(--fs-sm);background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;color:var(--txt)}
.arac-not{flex:1 1 100%;font-size:var(--fs-2xs);color:var(--dim2);
  font-variant-numeric:tabular-nums}

/* ---- ÇEVRİMDIŞI ROZETİ ----
   Bağlantı kesilince kullanıcı "site bozuldu" sanmasın: service worker
   önbellekten servis etmeye devam ediyor ve bunu açıkça söylüyoruz. */
.net-rozet{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  z-index:500;display:flex;align-items:center;gap:var(--sp-2);
  background:var(--panel);border:1px solid var(--warn);border-radius:999px;
  padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs);font-weight:600;
  color:var(--txt);box-shadow:var(--sh);max-width:calc(100% - 24px)}
.net-rozet[hidden]{display:none}
.net-nokta{width:8px;height:8px;border-radius:50%;background:var(--warn);
  flex:0 0 auto;animation:nabiz 2s ease-in-out infinite}

/* ---- İSKELET YÜKLEME ----
   Veri gelmeden liste boş kalıyor, sonra 60 kart birden basılınca sayfa
   zıplıyordu. İskelet yüksekliği şimdiden ayırıyor. */
.isk-kart{background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;margin-bottom:12px}
.isk{display:block;background:linear-gradient(90deg,
  var(--panel2) 25%, var(--line) 50%, var(--panel2) 75%);
  background-size:200% 100%;border-radius:6px;animation:isk-kay 1.4s ease-in-out infinite}
@keyframes isk-kay{0%{background-position:200% 0}100%{background-position:-200% 0}}
.isk-ust{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.isk-ad{height:16px;width:62%}
.isk-fy{height:24px;width:74px;border-radius:8px}
.isk-op{height:11px;width:40%;margin-bottom:12px}
.isk-rozet{display:flex;gap:6px;margin-bottom:12px}
.isk-rozet .isk{height:18px;width:64px;border-radius:999px}
.isk-alt{height:38px;border-radius:10px}
@media(prefers-reduced-motion:reduce){
  .isk{animation:none}.net-nokta{animation:none}
}

/* ---- İSTASYON DETAY ÇEKMECESİ ----
   Tek öğe, iki davranış: telefonda alttan kayan sayfa (bottom sheet),
   masaüstünde sağdan giren panel. İkisi de aynı içeriği gösteriyor. */
.cek-mask{position:fixed;inset:0;background:rgba(4,8,12,.55);z-index:1200;
  backdrop-filter:blur(2px);animation:mask-ac .16s ease-out}
.cek-mask[hidden]{display:none}
.cek{position:fixed;z-index:1201;background:var(--panel);color:var(--txt);
  box-shadow:var(--sh);overflow-y:auto;overscroll-behavior:contain;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.cek[hidden]{display:none}
.cek-tut{width:38px;height:4px;border-radius:99px;background:var(--line2);
  margin:10px auto 2px}
.cek-kapat{position:absolute;top:8px;right:10px;width:34px;height:34px;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);font-size:var(--fs-xl);line-height:1;padding:0}
.cek-kapat:hover{color:var(--txt);border-color:var(--acc)}
.cek-govde{padding:var(--sp-4) var(--sp-5) var(--sp-7)}
.cek h3{font-size:var(--fs-lg);font-weight:750;letter-spacing:-.2px;
  margin:0 var(--sp-8) var(--sp-1) 0;line-height:1.3}
.cek-op{display:flex;align-items:center;gap:var(--sp-2);color:var(--dim);
  font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.cek-fiyat{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;
  margin-bottom:var(--sp-4)}
.cek-fiyat b{font-size:32px;font-weight:820;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.cek-fiyat span{color:var(--dim);font-size:var(--fs-sm)}
.cek-ozet{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);
  margin:0 0 var(--sp-4)}
.cek-ozet div{background:var(--panel2);border-radius:var(--r3);
  padding:var(--sp-3) var(--sp-2);text-align:center}
.cek-ozet dt{font-size:var(--fs-2xs);color:var(--dim2);text-transform:uppercase;
  letter-spacing:.5px;font-weight:700;margin-bottom:2px}
.cek-ozet dd{margin:0;font-size:var(--fs-sm);font-weight:700;
  font-variant-numeric:tabular-nums}
.cek-dolum{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  flex-wrap:wrap;background:var(--acc-d);border-radius:var(--r3);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.cek-dolum b{font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.cek-dolum.cek-ipucu{background:var(--panel2);color:var(--dim)}
.cek-uyari{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-xs);
  color:var(--dim);background:var(--panel2);border-radius:var(--r3);
  padding:var(--sp-3);margin:0 0 var(--sp-3)}
.cek-adres{font-size:var(--fs-xs);color:var(--dim2);margin:0 0 var(--sp-4)}
.cek-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
  margin-bottom:var(--sp-3)}
.cek-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:var(--sp-3) var(--sp-1);border-radius:var(--r3);text-decoration:none;
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  font-size:var(--fs-2xs);font-weight:650;text-align:center}
.cek-nav a:hover{border-color:var(--acc);text-decoration:none}
.cek-nav .ico{width:18px;height:18px}
.cek-alt{display:flex;gap:var(--sp-2)}
.cek-alt button{flex:1;min-height:40px;border-radius:10px;font-size:var(--fs-sm);
  font-weight:600;background:var(--panel2);border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cek-alt button:hover{border-color:var(--acc)}

/* Telefon: alttan kayan sayfa */
@media(max-width:760px){
  .cek{left:0;right:0;bottom:0;max-height:86vh;
    border-radius:20px 20px 0 0;transform:translateY(100%)}
  .cek.on{transform:translateY(0)}
}
/* Masaüstü: sağdan giren panel. Tutamaç yalnız telefonda anlamlı. */
@media(min-width:761px){
  .cek{top:0;right:0;bottom:0;width:400px;max-width:92vw;
    border-left:1px solid var(--line);transform:translateX(100%)}
  .cek.on{transform:translateX(0)}
  .cek-tut{display:none}
  .cek-govde{padding-top:var(--sp-7)}
}

/* ---- ROTA KORİDORU ŞERİDİ ---- */
.rota-serit{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);background:var(--acc-d);
  border:1px solid var(--acc);border-radius:var(--r3);
  font-size:var(--fs-sm);font-weight:600;color:var(--txt)}
.rota-serit[hidden]{display:none}
.rota-serit .ico-sar{color:var(--acc-ink);display:inline-flex;flex:0 0 auto}
.rota-serit span:nth-of-type(2){flex:1;min-width:0}
.rota-serit button{flex:0 0 auto;width:26px;height:26px;padding:0;border-radius:50%;
  background:transparent;border:1px solid var(--acc);color:var(--acc-ink);
  font-size:var(--fs-md);line-height:1}
.rota-serit button:hover{background:var(--panel)}

/* ---- FİLTRE BARI ----
   Soket ve güç filtreleri katlanmış "Gelişmiş" panelin içindeydi; kimse açmıyordu.
   Sürücünün en sık sorduğu iki şey bunlar (CCS mi var, kaç kW) — dışarı alındı. */
.filt-bar{display:flex;gap:var(--sp-2);align-items:flex-end;flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.filt{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:3px}
.filt label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--dim2)}
.filt select{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-sm);
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--txt)}
.filt-sifirla{flex:0 0 auto;min-height:36px;padding:0 var(--sp-4);border-radius:9px;
  font-size:var(--fs-sm);font-weight:600;background:var(--panel2);
  border:1px solid var(--line);color:var(--dim)}
.filt-sifirla:hover{border-color:var(--acc);color:var(--txt)}
.filt-sifirla[hidden]{display:none}

/* ---- BOŞ DURUM ----
   "Sonuç yok" demek yetmez; kullanıcı çıkmazda kalmamalı. Sebebi söyleyip
   tek tıkla çıkış yolu veriyoruz. */
.bos-durum{text-align:center;padding:var(--sp-8) var(--sp-5);
  background:var(--panel2);border:1px dashed var(--line2);border-radius:var(--r2)}
.bos-ikon{color:var(--dim2);margin-bottom:var(--sp-3)}
.bos-ikon .ico{width:30px;height:30px;stroke-width:1.6}
.bos-durum h4{font-size:var(--fs-md);font-weight:700;margin:0 0 var(--sp-2)}
.bos-durum p{color:var(--dim);font-size:var(--fs-sm);margin:0 auto var(--sp-5);max-width:36ch}
.bos-eylem{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.bos-eylem button{min-height:38px;padding:0 var(--sp-5);border-radius:10px;
  font-size:var(--fs-sm);font-weight:600}

/* ---- YAKINDAKİ ÖNE ÇIKANLAR ---- */
/* Sürücünün gerçekte sorduğu üç soru: "en yakını nerede", "en ucuzu hangisi",
   "acelem var, en hızlısı nerede". Liste bunları da içeriyor ama 60 kartın
   içinde kayboluyorlardı; şerit onları öne çıkarıyor. */
.oneri[hidden]{display:none}
.oneri{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.oneri::-webkit-scrollbar{display:none}
.o-kart{flex:0 0 auto;width:158px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r3);padding:9px 11px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px;min-height:var(--tap)}
.o-kart:hover{border-color:var(--acc)}
.o-kart .et{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--acc-ink)}
.o-kart .ad{font-size:var(--fs-sm);font-weight:650;color:var(--txt);line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.o-kart .alt{font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums}
.o-kart .fy{font-size:var(--fs-md);font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}

/* ---- CANLI KONUM TAKİBİ ---- */
.takip[hidden]{display:none}        /* display:flex, hidden'ı ezmesin */
.takip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;
  background:var(--panel2);border:1px solid var(--acc);border-radius:var(--r3);
  padding:8px 11px;font-size:var(--fs-sm);color:var(--txt)}
.takip button{padding:5px 11px;font-size:var(--fs-sm);min-height:32px;border-radius:8px}
.takip>span:nth-of-type(2){flex:1;min-width:140px;color:var(--dim)}
.canli-nokta{width:9px;height:9px;border-radius:50%;background:var(--acc);
  flex:0 0 auto;animation:nabiz 1.6s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.canli-nokta{animation:none}}
#locBtn.izleniyor{background:var(--bad);color:#fff}

/* ---- ROTA PLANLAYICI ---- */
.route-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.route-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.route-stops{display:flex;flex-direction:column;gap:8px}
.route-stop{background:var(--panel2);padding:10px 14px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm)}

/* ---- CARDS GRID ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.feat .ic{font-size:var(--fs-2xl);margin-bottom:9px}
.feat h4{font-size:var(--fs-md);margin-bottom:6px}
.feat p{color:var(--dim);font-size:var(--fs-sm);margin:0}

/* ---- FAQ ---- */
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:9px}
details[open]{border-color:var(--acc)}
summary{cursor:pointer;font-weight:600;font-size:var(--fs-md);list-style:none;
  display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc-ink);font-size:var(--fs-xl);line-height:1;flex:none}
details[open] summary::after{content:"−"}
details p{color:var(--dim);font-size:var(--fs-base);margin:11px 0 0}

/* ---- TOPLULUK & PAYLAŞIM BÖLÜMÜ ---- */
.community-box{background:linear-gradient(135deg,var(--acc-d),var(--panel));
  border:1px solid var(--acc);border-radius:18px;padding:clamp(20px,4vw,36px);text-align:center}
.community-box h2{font-size:clamp(21px,3.4vw,30px);margin-bottom:10px}
.community-box>p{color:var(--dim);max-width:600px;margin:0 auto 22px;font-size:var(--fs-md)}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;max-width:860px;margin:0 auto}
.ccard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:18px;display:block;color:var(--txt);cursor:pointer;transition:.14s}
.ccard:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-2px);box-shadow:var(--sh)}
.ccard .ic{font-size:var(--fs-2xl)}
.ccard b{display:block;margin:8px 0 3px;font-size:var(--fs-md)}
.ccard span{font-size:var(--fs-sm);color:var(--dim)}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line);margin-top:40px;background:var(--bg2)}
.f-in{max-width:1400px;margin:0 auto;padding:30px 18px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr;gap:26px}
@media(max-width:760px){.f-in{grid-template-columns:1fr}}
footer h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
  margin:0 0 10px;font-weight:700}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
footer a{color:var(--dim);font-size:var(--fs-sm)}
footer a:hover{color:var(--acc-ink)}
/* İl / operatör sayfalarına iç bağlantılar (generate_pages.py basar) */
.f-seo{max-width:1400px;margin:0 auto;padding:4px 18px 26px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;
  border-top:1px solid var(--line);padding-top:24px}
@media(max-width:760px){.f-seo{grid-template-columns:1fr 1fr}}
.f-note{border-top:1px solid var(--line);padding:16px 18px;text-align:center;
  color:var(--dim2);font-size:var(--fs-xs);max-width:1400px;margin:0 auto;line-height:1.7}
.byline{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  max-width:340px;display:flex;flex-direction:column;gap:1px}
.byline span{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.8px;color:var(--dim2);font-weight:700}
.byline b{font-size:var(--fs-md);font-weight:700;color:var(--txt)}
.byline a{font-size:var(--fs-sm);color:var(--dim)}
.byline a:hover{color:var(--acc-ink)}
.disc{background:var(--panel2);border-left:3px solid var(--warn);padding:12px 15px;
  border-radius:0 10px 10px 0;font-size:var(--fs-sm);color:var(--dim);margin-top:16px}

/* ---- MODAL ---- */
.mask{position:fixed;inset:0;background:rgba(4,8,12,.72);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:18px;
  backdrop-filter:blur(3px)}
.mask.on{display:flex;animation:mask-ac .16s ease-out}
@keyframes mask-ac{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:var(--sp-6);max-width:440px;width:100%;box-shadow:var(--sh);
  max-height:88vh;overflow:auto}
/* Modal aniden belirmek yerine yumuşak açılır — "hareket azalt" açıksa
   yukarıdaki genel kural süreyi zaten sıfırlıyor. */
.mask.on .modal{animation:modal-ac .2s cubic-bezier(.2,.8,.3,1)}
@keyframes modal-ac{from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}}
.modal h3{margin-bottom:var(--sp-2);font-size:var(--fs-lg);letter-spacing:-.2px}
.modal p{color:var(--dim);font-size:var(--fs-sm);margin:0 0 16px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);
  background:var(--acc);color:#04241a;padding:12px 22px;border-radius:99px;font-weight:650;
  z-index:1100;transition:.28s;font-size:var(--fs-base);box-shadow:var(--sh)}
.toast.on{transform:translateX(-50%) translateY(0)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--txt)}
.leaflet-popup-content-wrapper{border-radius:12px}
.pop{font-size:var(--fs-sm);line-height:1.6}.pop b{color:var(--acc-ink);font-size:var(--fs-md)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════════════
   EV DASHBOARD CİLALAMA
   Sınıf adları bilerek DEĞİŞTİRİLMEDİ: JS (.card, .qp, .b, .o-kart) ve
   test_site.py bunlara bağlı. Burası yalnızca görsel katman.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- 0) İKONLAR ----
   Tek sınıf, her yerde aynı ölçü ve hizalama. currentColor mirası sayesinde
   bulundukları düğmenin/rozetin rengini alırlar; tema değişince uyum kendiliğinden. */
.ico{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.16em;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ico.dolu{fill:currentColor;stroke:none}
.ico.kalin{stroke-width:2.2}
.logo .ico{width:1.15em;height:1.15em;color:var(--acc-ink);stroke-width:2.1}

/* ---- 1) HARİTA GİYDİRMESİ ----
   Leaflet'in varsayılan kontrolleri bembeyaz kutulardı ve koyu haritanın
   üstünde yamalı duruyordu. Tema değişkenlerine bağlanıyorlar. */
.leaflet-container{background:var(--bg2);font:inherit}
#map{border:0;box-shadow:inset 0 0 0 1px var(--line)}

.leaflet-bar,.leaflet-control-zoom{border:0!important;box-shadow:var(--sh)!important;
  border-radius:12px!important;overflow:hidden}
.leaflet-bar a,.leaflet-control-zoom a{
  background:var(--panel)!important;color:var(--txt)!important;
  border-bottom:1px solid var(--line)!important;
  width:38px!important;height:38px!important;line-height:38px!important;
  font-size:var(--fs-lg)!important;font-weight:600;
  transition:background .14s,color .14s}
.leaflet-bar a:last-child,.leaflet-control-zoom a:last-child{border-bottom:0!important}
.leaflet-bar a:hover,.leaflet-control-zoom a:hover{
  background:var(--panel2)!important;color:var(--acc-ink)!important}
.leaflet-bar a.leaflet-disabled{opacity:.4;color:var(--dim2)!important}

/* Atıf şeridi: yasal olarak durmalı ama ekranın en parlak öğesi olmamalı. */
.leaflet-control-attribution{
  background:var(--panel)!important;                       /* yedek */
  background:color-mix(in srgb, var(--panel) 82%, transparent)!important;
  color:var(--dim2)!important;font-size:var(--fs-2xs)!important;
  padding:2px 7px!important;border-radius:8px 0 0 0!important;
  backdrop-filter:blur(6px)}
.leaflet-control-attribution a{color:var(--dim)!important}
/* Leaflet 1.9 kendi CSS'inde bayrağa display:inline!important veriyor;
   sınıfla ve !important ile ezmek gerekiyor (düz "svg" seçicisi kaybediyor). */
.leaflet-attribution-flag{display:none!important}

/* Küme baloncukları: eklentinin varsayılan yeşil/sarısı yerine tema tonları.
   Renkler color-mix ile değil SABİT HEX: etiket 12px kalın, yani WCAG'ye göre
   "büyük metin" sayılmıyor ve 4.5:1 gerekiyor. Aşağıdakiler ölçüldü:
     koyu  küçük  #2ec592 / #0b1a14 -> 8.12      orta #d89c36 / #241a04 -> 7.45
     aydın küçük  #00815c / #ffffff -> 4.89      büyük #d7575d / #0b1a14 -> 4.62
   (color-mix ile %88 karıştırınca aydınlık temada 4.31'e düşüyordu.) */
.marker-cluster{background:transparent!important}
.marker-cluster div{
  background:#2ec592!important;color:#0b1a14!important;
  font-weight:800!important;font-size:12px!important;
  border:2px solid rgba(52,224,166,.38)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.marker-cluster-medium div{background:#d89c36!important;color:#241a04!important;
  border-color:rgba(245,177,61,.38)!important}
.marker-cluster-large div{background:#d7575d!important;color:#0b1a14!important;
  border-color:rgba(244,99,106,.38)!important}
[data-theme="light"] .marker-cluster div{
  background:#00815c!important;color:#fff!important;
  border-color:rgba(0,161,115,.35)!important}

/* ---- 2) ARAMA ÇUBUĞU ----
   Yazı alanına arama ikonu ve belirgin odak halkası. */
.sbar .f input{padding-left:38px}
.sbar .f::before{content:"";position:absolute;left:13px;top:50%;
  width:16px;height:16px;margin-top:-8px;pointer-events:none;opacity:.55;
  background:currentColor;color:var(--dim);
  -webkit-mask:var(--ara-ikon) center/contain no-repeat;
  mask:var(--ara-ikon) center/contain no-repeat}
:root{--ara-ikon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>")}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(52,224,166,.22);              /* yedek */
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent)}

/* ---- 2b) RENK DİSİPLİNİ ----
   Vurgu rengi her yerde kullanılınca hiçbir yeri vurgulamıyor. 60 kartın 60'ında
   fiyat yeşildi; "en ucuz" işareti bu yeşil denizinde kayboluyordu. Kural:
   VURGU = eylem (birincil düğme, aktif filtre) + O ANKİ EN İYİ SONUÇ.
   Geri kalan her sayı yüksek kontrastlı nötr metin — veri, dekor değil. */
.pv{color:var(--txt)}
.card.best .pv{color:var(--acc-ink)}
.stat b{color:var(--txt)}
.stat:first-child b{color:var(--txt)}
.o-kart .et{color:var(--dim2)}
.o-kart:first-child .et,.o-kart:nth-child(2) .et{color:var(--acc-ink)}

/* Sayılar tabular: fiyat sütunu kart kart zıplamasın. */
.pv,.stat b,.est b,.o-kart .fy,.o-kart .alt,.price-c,td.num{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:var(--num)}

/* ---- 3) İSTASYON KARTI ----
   Fiyat sütununu hizala, eylem düğmelerini sakinleştir, "en ucuz" vurgusunu
   çerçeve yerine sol şeritle ver (daha az gürültü, daha net hiyerarşi). */
.card{border-radius:16px;padding:15px 16px}
.card.best{position:relative;box-shadow:var(--sh-s);
  border-color:var(--acc);                                  /* yedek */
  border-color:color-mix(in srgb, var(--acc) 45%, var(--line))}
.card.best::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--acc)}
.pv{letter-spacing:-.8px}
.meta{gap:5px;margin-top:10px}
.b{border-radius:999px;padding:3px 9px;font-size:var(--fs-2xs);letter-spacing:.3px}
.acts{margin-top:12px;gap:7px}
/* Üç düğme eşit paylaşsın ve tek satırda kalsın: "Fiyat bildir" iki satıra
   kırılıp kartı yamultuyordu. Favori düğmesi sabit dar, diğer ikisi esner. */
.acts{display:flex}
.acts button:nth-child(1),.acts button:nth-child(2){flex:1 1 0;min-width:0}
.acts button:nth-child(3){flex:0 0 46px}
.acts button{min-height:38px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;
  white-space:nowrap;
  background:var(--panel2);border:1px solid transparent;color:var(--txt);
  transition:background .14s,border-color .14s}
.acts button:hover{background:var(--panel);border-color:var(--acc)}

/* ---- 4) ÖNE ÇIKAN KARTLAR ---- */
.o-kart{border-radius:14px;padding:10px 12px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  transition:border-color .14s, transform .14s}
.o-kart:active{transform:scale(.98)}
.o-kart .et{letter-spacing:.7px}

/* Masaüstünde şerit 390 px'lik yan panele sığmıyor ve kartlar ortadan kesiliyordu —
   kaydırma göstergesi değil, bitmemiş iş gibi duruyor. Orada ızgara daha doğru:
   2x2 + tam genişlikte beşinci. Telefonda yatay şerit kalıyor (dikey yer kıymetli). */
@media(min-width:961px){
  /* Dar panelde 2x2+1 ızgara üç sıra yer kaplıyordu; kartlar sıkılaştırıldı. */
  .oneri{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);overflow:visible}
  .o-kart{width:auto;padding:var(--sp-2) var(--sp-3);gap:1px}
  .o-kart:nth-child(5){grid-column:1 / -1;flex-direction:row;align-items:baseline;
    gap:var(--sp-2);flex-wrap:wrap}
  .o-kart:nth-child(5) .ad{flex:1 1 auto}
}
/* Telefonda şeridin devam ettiğini belli et: sağ kenarda yumuşak geçiş. */
@media(max-width:960px){
  .oneri{position:relative;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
}

/* ---- 4b) KLAVYE ODAĞI ----
   Önce yalnız form alanlarında odak halkası vardı; düğmeler, kartlar, filtre
   hapları ve harita kontrolleri klavyeyle gezilince hiçbir iz bırakmıyordu.
   :focus-visible kullanılıyor — fareyle tıklayanı rahatsız etmez, klavye ve
   ekran okuyucu kullananda net görünür. */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
button:focus-visible,a:focus-visible,summary:focus-visible,
.card:focus-visible,.o-kart:focus-visible,.qp:focus-visible,.chip:focus-visible,
.city-btn:focus-visible,.leaflet-bar a:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}
/* Fareyle tıklandığında tarayıcının bıraktığı odak halkasını gösterme. */
:focus:not(:focus-visible){outline:none}
/* Ekran okuyucu için gizli atlama bağlantısı — Tab'a ilk basışta belirir. */
.atla{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acc);color:#04241a;padding:10px 16px;border-radius:0 0 10px 0;
  font-weight:700;font-size:var(--fs-sm)}
.atla:focus{left:0}

/* ---- 5) HAREKET AZALTMA ----
   Sistemde "hareketi azalt" açıksa geçişleri kapat. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .card:hover{transform:none}
}