:root {
  --zemin: #0b0d12;
  --cam: rgba(24, 27, 34, 0.72);
  --cam-kenar: rgba(255, 255, 255, 0.08);
  --kart: rgba(255, 255, 255, 0.055);
  --yazi: #f2f4f8;
  --yazi2: #9aa3b2;
  --yazi3: #6b7384;
  /* üç seviye — arayüzde başka trafik rengi yok */
  --rahat: #30d158;
  --agir: #ffb340;
  --tikali: #ff453a;
  --ust: env(safe-area-inset-top, 0px);
  --alt: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--zemin); color: var(--yazi); overflow: hidden; overscroll-behavior: none; }
body {
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
#harita { position: fixed; inset: 0; background: var(--zemin); }

.cam {
  background: var(--cam);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 0.5px solid var(--cam-kenar);
}
/* dokunma geri bildirimi: yalnız transform/opacity */
.dokun { transition: transform .18s cubic-bezier(.3,.7,.4,1), opacity .18s; }
.dokun:active { transform: scale(.96); opacity: .75; transition-duration: .05s; }

/* TEK DÜĞME KURALI
   seçili  = beyaz dolgu, koyu yazı   (.sec-dugme.secili)
   seçilmemiş = donuk gri dolgu        (.sec-dugme)
   eylem   = çerçevesiz mavi yazı      (.metin-dugme)
   Yeşil/turuncu/kırmızı yalnız trafik durumu anlatır, düğme rengi değildir. */
.sec-dugme { background: rgba(255,255,255,.07); color: var(--yazi2); font-weight: 600; }
.sec-dugme.secili { background: var(--yazi); color: #0b0d12; }
.metin-dugme { color: #64b0ff; font-size: 14px; font-weight: 600; padding: 4px 2px; }

/* ---------- üst ---------- */
.ust { position: fixed; top: 0; left: 0; right: 0; padding: calc(var(--ust) + 8px) 12px 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; }
.ust > * { pointer-events: auto; }
.ust-kart { border-radius: 18px; padding: 9px 16px 10px; }
.baslik { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.durum { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--yazi); margin-top: 2px; }
.nabiz { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rahat); box-shadow: 0 0 0 0 rgba(48,209,88,.6); animation: nabiz 2s infinite; }
.durum.tahmin .nabiz { background: var(--yazi3); animation: none; }
.durum small { color: var(--yazi3); font-size: 12.5px; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.55); } 70% { box-shadow: 0 0 0 7px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }

/* renk cetveli: tek ince satır */
.lejant { display: inline-flex; gap: 12px; margin-top: 7px; padding: 5px 11px; border-radius: 12px; font-size: 11.5px; color: var(--yazi2); }
.lejant span { display: inline-flex; align-items: center; gap: 5px; }
.lejant i { width: 13px; height: 3.5px; border-radius: 2px; }
.l-rahat { background: var(--rahat); } .l-agir { background: var(--agir); } .l-tikali { background: var(--tikali); }

.nokta-etiket { display: flex; align-items: center; gap: 9px; max-width: calc(100% - 24px); margin-top: 8px; padding: 8px 12px; border-radius: 14px; font-size: 13px; color: var(--yazi); }
.nokta-etiket span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nokta-etiket svg { flex: none; color: var(--yazi3); }

.yuvarlak { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.konum { position: fixed; right: 12px; top: calc(var(--ust) + 118px); z-index: 4; color: var(--yazi); }

/* sayfa tam açıkken harita görünmüyor: cetvel ve ortala düğmesi sönsün (yalnız opacity/transform) */
.lejant, .konum { transition: opacity .2s ease, transform .2s ease; }
body.sayfa-tam .lejant, body.sayfa-tam .konum { opacity: 0; transform: translate3d(0, -8px, 0); pointer-events: none; }

/* ---------- alt sayfa ---------- */
.sayfa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  height: calc(100dvh - var(--ust) - 104px);
  border-radius: 24px 24px 0 0;
  background: rgba(18, 20, 26, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border-top: 0.5px solid rgba(255,255,255,.1);
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  transform: translate3d(0, 100%, 0);
  touch-action: none; contain: layout paint;
}
.sayfa.suruklenir { will-change: transform; }
.sayfa-tutamak { height: 22px; display: grid; place-items: center; flex: none; }
.sayfa-tutamak span { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); }
/* küçük hal: tek satır kalır, gerisi söner (düzen değişmez — ölçüler bozulmasın diye mutlak konum) */
.sayfa-mini {
  position: absolute; left: 0; right: 0; top: 20px; height: 46px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 0 18px; text-align: left;
  background: none; color: var(--yazi); opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.sayfa-mini svg { flex: none; color: var(--yazi3); }
#mini-yazi { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sayfa.mini .sayfa-mini { opacity: 1; pointer-events: auto; }
.sayfa.mini .sayfa-bas, .sayfa.mini .sayfa-govde { opacity: 0; pointer-events: none; }
.sayfa-bas, .sayfa-govde { transition: opacity .16s ease; }

/* Rota listesi başlıkta; kayıtlı rota çoğalınca (iPhone SE, 6+ rota) panelden uzun olup alttakiler
   kesiliyor, seçilemiyordu (26.09.2026, e2e). Başlık panelden uzunsa kendi içinde kayar. */
.sayfa-bas { flex: 0 1 auto; min-height: 0; padding: 0 0 8px; overflow: hidden; overscroll-behavior: contain; }
.sayfa-bas.tasar { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sayfa-govde { flex: 1; overflow: hidden; padding: 4px 16px calc(var(--alt) + 24px); overscroll-behavior: contain; }
.sayfa.tam .sayfa-govde { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* ---------- 1. adım: soru ---------- */
.soru-bas { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin: 2px 16px 0; }
.soru-alt { font-size: 13.5px; color: var(--yazi2); margin: 4px 16px 12px; }
.rota-liste { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.rota-sat { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--kart); border-radius: 16px; padding: 12px 14px; }
.rs-ic { flex: 1; min-width: 0; }
.rs-ad { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; }
/* Alt satır kesilmez, gerekirse iki satıra iner: SE'de "… · TEM üze…" diye yolun adı kayboluyordu (24.09.2026, e2e). */
.rs-alt { display: block; font-size: 12.5px; color: var(--yazi3); margin-top: 2px; overflow-wrap: anywhere; }
.rs-dk { flex: none; text-align: right; line-height: 1.1; }
.rs-dk b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-dk em { display: block; font-style: normal; font-size: 11px; color: var(--yazi3); margin-top: 1px; }
.rs-ok { flex: none; color: var(--yazi3); }

/* kendi rotaların: listedeki ekleme satırı, silme düğmesi */
.rota-sat.yeni { justify-content: center; gap: 8px; color: var(--yazi2); background: rgba(255,255,255,.035); border: 1px dashed var(--cam-kenar); font-weight: 600; font-size: 14.5px; }
.rs-sil { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--yazi3); background: rgba(255,255,255,.06); }

/* ---------- boş durum: hiç rota yok ---------- */
.bos-durum { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 16px; padding: 16px; border-radius: 18px; background: var(--kart); }
.bos-durum p { margin: 0; font-size: 13.5px; color: var(--yazi2); line-height: 1.4; }
.ana-dugme { display: inline-flex; align-items: center; gap: 8px; border-radius: 14px; padding: 11px 18px; background: var(--yazi); color: #0b0d12; font-weight: 700; font-size: 15px; }

/* ---------- 1b. adım: yeni rota (Nereden / Nereye) ---------- */
.uc-im { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--yazi); box-shadow: 0 0 0 2px var(--zemin) inset; }
.uc-im.bas { background: var(--zemin); box-shadow: 0 0 0 2.5px var(--yazi); }
.ara-kutu { display: flex; flex-direction: column; gap: 6px; padding: 6px 16px 0; }
.ara-alan { display: flex; align-items: center; gap: 10px; background: var(--kart); border-radius: 14px; padding: 0 0 0 12px; border: 1.5px solid transparent; }
.ara-alan:focus-within { border-color: #64b0ff; }
.ara-alan .giris { background: none; padding: 11px 12px 11px 0; outline: none; }
.giris { flex: 1; min-width: 0; background: rgba(255,255,255,.07); border: 0; border-radius: 12px; padding: 10px 12px; color: var(--yazi); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text; }
.giris::placeholder { color: var(--yazi3); }
.giris::-webkit-search-cancel-button { filter: invert(.7); }
.ara-sonuc { list-style: none; margin: 6px 16px 0; padding: 0; max-height: 236px; overflow-y: auto; background: var(--kart); border-radius: 14px; touch-action: pan-y; }
.ara-sonuc li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 0.5px solid var(--cam-kenar); cursor: pointer; }
.ara-sonuc li:last-child { border-bottom: 0; }
.ara-sonuc li svg { flex: none; color: var(--yazi3); }
.ara-sonuc li.konumum svg { color: #64b0ff; }
.as-ic { min-width: 0; flex: 1; }
.as-ad { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-alt { display: block; font-size: 12px; color: var(--yazi3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-not { margin: 8px 16px 0; font-size: 12.5px; color: var(--yazi3); min-height: 16px; }

/* Ara durum bildirimi: "Aranıyor…", "Sonuç yok", "Bağlantı hatası, tekrar dene", "Rota hesaplanıyor…".
   Sessiz bekleme yok (25.09.2026). */
.bildirim { display: flex; align-items: center; gap: 8px; margin: 8px 16px 0; font-size: 13px; color: var(--yazi2); min-height: 20px; }
.bildirim.hata { color: var(--agir); }
.bildirim .tekrar { color: #64b0ff; font-weight: 700; padding: 2px 4px; }
.donen { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--yazi); animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
#cevap-durum { margin-top: 2px; }

/* haritaya dokununca çıkan menü: Buradan / Buraya */
.harita-menu { position: fixed; z-index: 8; width: 216px; padding: 10px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.harita-menu::after { content: ""; position: absolute; left: var(--ok, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: inherit; }
.harita-menu.altta::after { bottom: auto; top: -6px; }
.hm-ad { font-size: 13px; color: var(--yazi2); margin: 0 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-dugmeler { display: flex; gap: 6px; }
.hm-dugmeler button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 11px; color: var(--yazi); font-size: 14px; }

/* ---------- 2. adım: cevap ---------- */
.rota-adi-sar { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#rota-adi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ters-dugme { flex: none; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--yazi); }
.ters-dugme[aria-pressed="true"] { background: var(--yazi); color: #0b0d12; }
.ters-dugme:disabled { opacity: .5; }
.cevap-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; font-size: 14px; color: var(--yazi2); font-weight: 600; }
/* "1 saat 45 dakika" iki satıra taşıyor; balance olmadan ikinci satırda tek başına "dakika."
   kalıyordu. Süre parçası da satır ortasından bölünmesin diye bölünmez boşlukla yazılıyor. */
/* Kısa panel (24.09.2026): başlık 26 → 20 px, tek satır; açıklamalar iki kısa satır (aralık + öneri). */
.cevap-buyuk { font-size: 20px; font-weight: 700; letter-spacing: -.4px; line-height: 1.2; padding: 3px 16px 0; text-wrap: balance; }
.cevap-buyuk b { font-weight: 700; }
.v-rahat { color: var(--rahat); } .v-agir { color: var(--agir); } .v-tikali { color: var(--tikali); }
.cevap-aralik { font-size: 13.5px; color: var(--yazi2); padding: 2px 16px 0; line-height: 1.3; }
.cevap-aralik b { color: var(--yazi); font-weight: 600; white-space: nowrap; }
.cevap-aralik .az-olcum { color: var(--agir); white-space: nowrap; }
.cevap-alt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--yazi2); padding: 1px 16px 0; min-height: 18px; }
.cevap-alt .artis { color: var(--agir); font-weight: 600; white-space: nowrap; }
.cevap-alt b { color: var(--yazi); font-weight: 600; } .cevap-alt b.v-rahat { color: var(--rahat); } .cevap-alt b.v-agir { color: var(--agir); } .cevap-alt b.v-tikali { color: var(--tikali); }
.etiket-hata { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--tikali, #ff453a); padding: 3px 8px; border-radius: 6px; }
.v-yok { color: var(--yazi3, #8a93a5); }
.tazele-dugme { font: inherit; font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 8px; padding: 3px 10px; margin-left: 4px; }

.saat-bas { font-size: 12px; color: var(--yazi3); padding: 4px 16px 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
/* Gün düğmesi: yerel tarih seçici üstte saydam durur (iOS çarkı açılır), panel boyu değişmez */
.gun-dugme { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(255,255,255,.09); color: var(--yazi); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.gun-dugme svg { opacity: .7; }
.gun-dugme.gecmis { background: rgba(100,160,255,.2); color: #b9d3ff; }
.gun-dugme input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.saat-ayrac.gecmis { color: #b9d3ff; }
.saatler { display: flex; gap: 7px; overflow-x: auto; padding: 1px 16px 3px; scrollbar-width: none; touch-action: pan-x; }
.saatler::-webkit-scrollbar { display: none; }
.saat { flex: none; height: 36px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
.saat-ayrac { flex: none; align-self: center; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--yazi3); padding: 0 4px; white-space: nowrap; }

/* ---------- gövde ---------- */
.kart { background: var(--kart); border-radius: 18px; padding: 14px; margin-top: 10px; }
.kart-bas { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 6px; }
#grafik { width: 100%; height: 150px; display: block; }
.grafik-not { font-size: 12px; color: var(--yazi3); margin-top: 8px; }

.hatirlatma { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hat-sol { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.hat-sol span { font-size: 12.5px; color: var(--yazi2); }
.anahtar { width: 51px; height: 31px; border-radius: 16px; background: rgba(255,255,255,.16); position: relative; flex: none; transition: background .25s; }
.anahtar span { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .28s cubic-bezier(.3,1.3,.5,1); }
.anahtar[aria-checked="true"] { background: var(--rahat); }
.anahtar[aria-checked="true"] span { transform: translateX(20px); }

.bolum-bas { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 8px; font-size: 17px; }
.bolum-bas span { font-size: 12.5px; color: var(--yazi3); }
.suzgec { display: flex; gap: 6px; margin-bottom: 8px; }
.suzgec button { height: 32px; padding: 0 13px; border-radius: 16px; font-size: 13px; }
.duyurular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.duyuru { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--kart); }
.duyuru.odak { background: rgba(255,179,64,.13); }
.d-ikon { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--r, #ffb340) 18%, transparent); color: var(--r, #ffb340); }
.d-ic { min-width: 0; }
.d-bas { font-size: 14px; font-weight: 600; line-height: 1.3; }
.d-alt { font-size: 12px; color: var(--yazi3); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.d-alt .rotada { color: var(--agir); font-weight: 600; }
.bos { color: var(--yazi3); font-size: 13.5px; padding: 12px 2px; }
.dipnot { font-size: 11.5px; color: var(--yazi3); margin: 18px 2px 0; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .nabiz { animation: none; } }

/* ---- alternatif güzergahlar ---- */
/* Cevap panelinin diğer satırları gibi 16px kenardan: şerit eklendiğinde unutulmuştu, başlık
   ekranın soluna yapışıp kartlar kenardan taşıyordu (20.09.2026). */
.secenekler { margin-top: 4px; padding: 0 16px; }
/* Şerit başlığı görünmez: seçili saat zaten büyük satırda (24.09.2026, panel kısaltma). */
.sec-bas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Yatay kutular (Yandex gibi): dar ekranda sağa kaydırılır, kutu kenara oturur. Kaydırma şeridi
   kenar boşluğuna taşar ki son kutu da 16px'ten başlasın, kesik kutu "daha var" dediğini göstersin. */
#secenek-liste { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  margin: 0 -16px; padding: 7px 16px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#secenek-liste::-webkit-scrollbar { display: none; }
.sec-sat { flex: 0 0 auto; min-width: 92px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 6px 9px 7px; background: var(--kart); border: 1.5px solid transparent; border-radius: 11px;
  color: inherit; text-align: left; }
#secenek-liste.tek .sec-sat { min-width: 120px; }
.sec-sure { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.sec-km { font-size: 11px; line-height: 1.2; color: var(--yazi3); white-space: nowrap; }
/* "en hızlı" kutunun üst kenarına oturan küçük sekme (Yandex gibi): kendi satırı yok, kutunun boyu
   hangisinin en hızlı olduğuna göre değişmez. Önce ayrı satırdı, kutu 112 px'e çıkıp iPhone 15'te
   haritaya 130 px bırakıyordu (24.09.2026, e2e). Şerit üstten 8 px boşluk bırakır ki sekme kesilmesin. */
.sec-sat { position: relative; }
.sec-hizli { position: absolute; top: -8px; left: 8px; font-size: 10px; line-height: 13px; padding: 0 5px; font-weight: 700;
  white-space: nowrap; border-radius: 7px; border: 1px solid currentColor; background: #15171d; }
.sec-hizli:empty { display: none; }
/* Etiket ve ücret tek satırlık tek rozet: "FSM · Ücretli" (24.09.2026). Kutu içeriği kadar geniş,
   rozet kırılmaz; kutular sığmazsa şerit yana kayar. */
.sec-not { margin-top: 6px; font-size: 12px; color: var(--yazi3); }
.sec-rozet { margin-top: 3px; font-size: 11px; line-height: 1.2; padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  background: rgba(255, 255, 255, .08); color: var(--yazi2); }
.sec-rozet.ucretli { background: rgba(255, 255, 255, .13); color: var(--yazi); }
.sec-sat.sec-bekle { color: var(--yazi3); border-style: dashed; border-color: rgba(255, 255, 255, .14); background: transparent; justify-content: center; }
.sec-bekle .sec-sure { font-size: 13px; font-weight: 600; }
.sec-ad { font-weight: 700; color: var(--yazi); }
/* Ücret rozeti trafik renklerini kullanmaz: "ücretsiz" "rahat" gibi okunmasın. */
/* Kutunun rengi (v-rahat/v-agir/v-tikali) haritada o rotanın boyandığı trafik rengi: süre bu renkte,
   seçili kutunun kenarı da. km ve rozet kendi renginde kalır. */
.sec-sat.aktif { background: rgba(255, 255, 255, .1); border-color: currentColor; }
/* .sec-sat'ın color: inherit'i genel .v-* kuralını eziyor; kutuda ayrıca yazılmalı. */
.sec-sat.v-rahat { color: var(--rahat); } .sec-sat.v-agir { color: var(--agir); } .sec-sat.v-tikali { color: var(--tikali); }
/* Süresi olmayan kutu (geçmişte ölçüm yok): "–" yeşil görünüp "rahat" gibi okunmasın (26.09.2026). */
.sec-sat.v-yok { color: var(--yazi2); }

/* ---------- grafik ipucu (fare) ---------- */
#grafik-kart { position: relative; }
.grafik-ipucu { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, 0); padding: 4px 8px; border-radius: 8px;
  background: rgba(10, 12, 16, .92); border: 0.5px solid var(--cam-kenar); font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--yazi); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.grafik-ipucu span { color: var(--yazi3); font-weight: 500; }
.dock { display: none; }

/* ---------- fare ve klavye (yalnız gerçek imleçli cihaz; dokunmatikte :hover yapışıp kalıyor) ---------- */
@media (hover: hover) and (pointer: fine) {
  .rota-sat:hover { background: rgba(255,255,255,.09); }
  .rota-sat.yeni:hover { color: var(--yazi); border-color: rgba(255,255,255,.22); }
  .sec-dugme:not(.secili):hover { background: rgba(255,255,255,.13); color: var(--yazi); }
  .metin-dugme:hover { color: #8cc4ff; text-decoration: underline; text-underline-offset: 3px; }
  .sec-sat:not(.aktif):not(.sec-bekle):hover { background: rgba(255,255,255,.09); }
  .ara-sonuc li:hover, .ara-sonuc li[aria-selected="true"] { background: rgba(255,255,255,.07); }
  .rs-sil:hover { color: var(--tikali); background: rgba(255,69,58,.14); }
  .ters-dugme:not([aria-pressed="true"]):hover, .gun-dugme:hover, .yuvarlak:hover { background: rgba(255,255,255,.16); }
  .ana-dugme:hover { background: #fff; }
  #grafik { cursor: pointer; }
  .dokun:active { transform: scale(.98); }
  /* sürüklenen alt sayfada seçilmesin diye kapalı; imleçli cihazda metin seçilebilir kalsın */
  .cevap-buyuk, .cevap-aralik, .cevap-alt, .d-bas, .dipnot, .rs-alt, .hm-ad { -webkit-user-select: text; user-select: text; }
}
:focus { outline: none; }
:focus-visible { outline: 2px solid #64b0ff; outline-offset: 2px; }
.ara-alan .giris:focus-visible { outline: none; }

/* ---------- tablet (768-1023 px): alt sayfa kalır ama ekranı boydan boya kaplamaz ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sayfa { left: 12px; right: auto; width: min(540px, calc(100% - 24px)); border-radius: 24px 24px 0 0;
    border-left: 0.5px solid rgba(255,255,255,.1); border-right: 0.5px solid rgba(255,255,255,.1); }
}

/* ---------- masaüstü (>= 1024 px): tam ekran harita + solda sabit panel (Google Haritalar gibi) ----------
   Panel sürüklenmez; alt sayfanın transform'u ezilir. Saat grafiği panelden çıkıp haritanın altında
   geniş şeride (#dock) taşınır: 96 dilim 400 px'lik panelde 3 px'e düşüyordu. */
@media (min-width: 1024px) {
  html, body { font-size: 15px; }
  .sayfa {
    top: 12px; left: 12px; bottom: 12px; right: auto; width: var(--panel-g); height: auto;
    border-radius: 20px; border: 0.5px solid rgba(255,255,255,.1); box-shadow: 0 10px 40px rgba(0,0,0,.45);
    transform: none !important; touch-action: auto; contain: none;
    display: block; overflow-y: auto; overscroll-behavior: contain; padding-top: 16px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .sayfa-tutamak, .sayfa-mini { display: none; }
  .sayfa-bas, .sayfa-bas.tasar { overflow: visible; padding-bottom: 12px; }
  .sayfa-govde, .sayfa.tam .sayfa-govde { overflow: visible; padding: 0 16px 20px; }
  .sayfa.mini .sayfa-bas, .sayfa.mini .sayfa-govde { opacity: 1; pointer-events: auto; }
  .soru-bas { font-size: 24px; }
  .rota-sat { padding: 13px 14px; }
  /* seçenekler kaymaz, sığmayan alt satıra iner */
  #secenek-liste { flex-wrap: wrap; overflow: visible; margin: 0; padding: 8px 0 2px; row-gap: 14px; }
  .sec-sat { min-width: 110px; }
  /* saat şeridi: tekerlek yana kaydırır (app.js), ince kaydırma çubuğu görünür */
  .saatler { flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; touch-action: auto; }
  .saatler::-webkit-scrollbar { display: block; height: 6px; }
  .saatler::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
  .saat { height: 34px; padding: 0 12px; font-size: 14px; }
  .ara-sonuc { max-height: 360px; }
  .bolum-bas { margin-top: 26px; }

  /* harita üstü: başlık kartı panelin sağında */
  .ust { left: calc(var(--panel-g) + 24px); right: auto; padding: 12px 0 0; }
  .konum { top: 64px; }
  body.sayfa-tam .lejant, body.sayfa-tam .konum { opacity: 1; transform: none; pointer-events: auto; }

  /* saat grafiği şeridi */
  .dock { display: block; position: fixed; z-index: 6; left: calc(var(--panel-g) + 24px); right: 12px; bottom: 12px;
    max-width: 1180px; border-radius: 18px; background: rgba(18, 20, 26, 0.88); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
  .dock[hidden] { display: none !important; }
  .dock .kart { margin: 0; background: none; padding: 12px 16px 10px; }
  .dock .kart-bas { font-size: 14.5px; }
  .dock #grafik { height: 150px; }
  .dock .grafik-not { margin-top: 4px; }
}
@media (min-width: 1024px) { :root { --panel-g: 400px; } }
@media (min-width: 1440px) { :root { --panel-g: 424px; } }

/* ---------- hesap (isteğe bağlı Google ile giriş) ---------- */
.hesap-dugme { position: fixed; right: 12px; top: calc(var(--ust) + 8px); z-index: 6; color: var(--yazi); }
.hesap-harf { font-weight: 700; font-size: 17px; }
.hesap-dugme.girili { background: rgba(100,176,255,.22); }
.hesap-menu { position: fixed; right: 12px; top: calc(var(--ust) + 60px); z-index: 9; width: min(288px, calc(100vw - 24px)); padding: 14px; border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.hmn-ad { font-weight: 700; font-size: 16px; }
.hmn-eposta { color: var(--yazi2); font-size: 13.5px; word-break: break-all; }
.hmn-not { color: var(--yazi2); font-size: 13px; line-height: 1.4; margin: 6px 0 8px; }
.hmn-sat { display: block; width: 100%; text-align: left; padding: 10px 10px; border-radius: 10px; font-size: 14.5px; color: var(--yazi); text-decoration: none; }
.hmn-sat.tehlike { color: #ff6b61; }
.hmn-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #fff; color: #1f1f1f;
  font-weight: 600; font-size: 14.5px; text-decoration: none; margin-bottom: 4px; }
.tost { position: fixed; left: 50%; top: calc(var(--ust) + 64px); transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: 14px;
  font-size: 14px; max-width: calc(100vw - 24px); box-shadow: 0 8px 26px rgba(0,0,0,.45); }
@media (hover: hover) and (pointer: fine) {
  .hmn-sat:hover { background: rgba(255,255,255,.08); }
  .hmn-google:hover { background: #eef1f5; }
}
@media (min-width: 1024px) {
  .tost { left: calc(50% + var(--panel-g) / 2); top: 16px; }
}