/*
  durakta — canlı toplu taşıma takibi
  ───────────────────────────────────
  TASARIM DİLİ: durak tabelası.
  Kamu hizmeti arayüzü; süs değil okunabilirlik. Yüksek kontrast, büyük
  dokunma alanı (min 44px), kalın sayılar, net renk kodu:
      yeşil = canlı   kehribar = güncel değil   kırmızı = bağlantı yok
      mavi  = dokunulabilir

  Efektler uiverse/21st sözlüğünden ama ölçülü: nabız halkası (canlı sinyal),
  shimmer (yükleniyor iskeleti), cam panel (harita üstünde okunurluk).
  Hepsi prefers-reduced-motion ile susuyor.

  Yön bağımsız yazıldı: margin-inline / inset-inline kullanılıyor, dir="rtl"
  verildiğinde yerleşim kendiliğinden aynalanıyor (Arapça, Farsça).
*/

:root {
  --zemin: #0b1220;
  --panel: #111a2b;
  --panel-2: #172338;
  --cizgi: rgba(255, 255, 255, 0.1);
  --metin: #e8edf5;
  --soluk: #aab7cc;   /* güneş altında okunurluk: eski #93a1b8 fazla sönüktü */

  --canli: #22c55e;
  --bayat: #f59e0b;
  --kopuk: #ef4444;
  --vurgu: #3b82f6;
  --vurgu-koyu: #2563eb;

  --yaricap: 16px;
  --yaricap-kucuk: 11px;
  --yaricap-orta: 14px;
  --yaricap-sayfa: 20px;
  --kapsul: 980px;           /* kapsul dugme: Apple'in dokunma hedefi bicimi */
  --panel-golge: 0 -8px 40px rgba(0, 0, 0, 0.45);

  /* MATERYAL: cam yuzeyler tek yerden. Altindaki harita renkleri gorunsun diye
     doygunluk artiyor (saturate), metin token'lari opak kaliyor — cam yalniz
     yuzeyde, yazida degil. Gunes altinda okunurluk bundan taviz vermiyor. */
  --vurgu-rgb: 59, 130, 246;
  --cam: rgba(23, 35, 56, 0.72);
  --cam-kalin: rgba(17, 26, 43, 0.86);
  --cam-kenar: rgba(255, 255, 255, 0.14);
  --cam-parlak: rgba(255, 255, 255, 0.18);
  --cam-ust: rgba(255, 255, 255, 0.1);
  --cam-alt: rgba(255, 255, 255, 0.02);
  --cam-dip: rgba(0, 0, 0, 0.35);
  --parilti: rgba(255, 255, 255, 0.42);
  --dugme-zemin: rgba(30, 48, 84, 0.78);
  --dugme-kenar: rgba(var(--vurgu-rgb), 0.42);
  /* Koyu zeminde koyu mavi yazı okunmuyordu (Enes ekran görüntüsüyle
     yakaladı): metin açık tarafta kalıyor, zemin mavi tarafta. */
  --dugme-metin: #dbe7ff;
  --bulanik: saturate(180%) blur(20px);
  --grup-zemin: rgba(9, 14, 24, 0.88);   /* bloklarin uzerinde durdugu katman */
  --golge-yuzey: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.26);
  --golge-kalkik: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.34);
  /* Dokunma geri bildirimi: bastirinca kuculen, birakinca yerine oturan egri. */
  --yay: cubic-bezier(0.32, 0.72, 0, 1);

  --kenar: #0b1220;          /* işaretçi çerçevesi */
  --perde: 11, 18, 32;       /* örtü katmanları için rgb */

  --guvenli-alt: env(safe-area-inset-bottom, 0px);
  --guvenli-ust: env(safe-area-inset-top, 0px);
}


/* ───────── açık tema ─────────
   Aynı semantik token'lar, farklı değerler. Bileşenlere tek bir renk
   yazılmıyor; tema değişince harita stili de değişiyor (app.js). */
:root.acik {
  --zemin: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --cizgi: rgba(16, 24, 40, 0.14);
  --metin: #101828;
  --soluk: #44536b;   /* güneş altında okunurluk: eski #56657c fazla sönüktü */

  --canli: #15803d;
  --bayat: #b45309;
  --kopuk: #b91c1c;
  --vurgu: #1d4ed8;
  --vurgu-koyu: #1e40af;

  --kenar: #ffffff;
  --perde: 244, 246, 251;
  --panel-golge: 0 -8px 40px rgba(16, 24, 40, 0.14);

  --vurgu-rgb: 29, 78, 216;
  --cam: rgba(255, 255, 255, 0.92);
  --cam-kalin: rgba(255, 255, 255, 0.9);
  --cam-kenar: rgba(16, 24, 40, 0.16);
  --cam-parlak: rgba(255, 255, 255, 0.95);
  --cam-ust: rgba(255, 255, 255, 0.9);
  --cam-alt: rgba(16, 24, 40, 0.07);
  --cam-dip: rgba(16, 24, 40, 0.14);
  --parilti: rgba(var(--vurgu-rgb), 0.16);
  --dugme-zemin: rgba(224, 232, 254, 0.95);
  --dugme-kenar: rgba(var(--vurgu-rgb), 0.28);
  --dugme-metin: var(--vurgu-koyu);
  --grup-zemin: rgba(242, 242, 247, 0.9);
  --golge-yuzey: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.1);
  --golge-kalkik: 0 2px 8px rgba(16, 24, 40, 0.1), 0 16px 40px rgba(16, 24, 40, 0.16);
}

* {
  box-sizing: border-box;
}

/* `hidden` NİTELİĞİ HER ZAMAN KAZANIR.

   Tarayıcının kendi kuralı `[hidden] { display: none }` en zayıf katmanda; bir
   elemana `display: grid` yazınca sessizce eziliyor. `#durakBasligi` tam bunu
   yaşadı: `hidden` niteliği duruyordu ama ızgaraya çevrildiği için ana ekranda
   48 px'lik ölü bir "DURAK" rozeti olarak görünüyordu (Enes ekran görüntüsüyle
   yakaladı). Tek tek `#eleman[hidden]` kuralı yazmak yerine kuralı bir kez
   burada koyuyoruz — sonraki eleman aynı tuzağa düşmesin. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--zemin);
  color: var(--metin);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans",
    "Noto Naskh Arabic",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

#harita {
  position: fixed;
  inset: 0;
}

/* QR ekranında harita KAPALI başlıyor. Durakta ayakta duran kişi haritayı
   incelemiyor, tek bir rakam arıyor; harita hem dikkati dağıtıyor hem de
   roaming'deki turiste onlarca döşeme indiriyor. Konteyner 0x0 olduğunda
   MapLibre hiç döşeme istemiyor — ölçüldü. "Haritayı göster" denince
   resize() ile açılıyor ve tercih hatırlanıyor. */
body.haritaKapali #harita {
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Öteki düğmelerle aynı aileden: soluk gri kutu, dokunulabilir olduğunu
   söylemiyordu. */
#haritaAc {
  display: block;
  width: calc(100% - 24px);
  min-height: 44px;
  margin: 10px 12px 12px;
  padding: 10px;
  border: 1px solid var(--dugme-kenar);
  border-radius: var(--kapsul);
  background:
    linear-gradient(180deg, var(--cam-ust), var(--cam-alt)),
    var(--dugme-zemin);
  box-shadow:
    var(--golge-yuzey),
    inset 0 1px 0 var(--cam-parlak);
  color: var(--dugme-metin);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    box-shadow 260ms var(--yay),
    transform 260ms var(--yay);
}

#haritaAc:hover {
  box-shadow: var(--golge-kalkik), inset 0 1px 0 var(--cam-parlak);
  transform: translateY(-1px);
}

#haritaAc:active {
  transform: scale(0.98);
}

/* Haritanın kendi yazıları açık temada; üstteki panelleri ayırmak için
   hafif bir karartma. Harita okunurluğunu bozmayacak kadar az. */
#harita::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--perde), 0.32) 0,
    transparent 22%,
    transparent 58%,
    rgba(var(--perde), 0.28) 100%
  );
}

/* ───────── üst şerit ───────── */

#ust {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--guvenli-ust)) 14px 10px;
  background: linear-gradient(
    to bottom,
    rgba(var(--perde), 0.92),
    rgba(var(--perde), 0)
  );
}

#baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#sehirAdi {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#durumMetni {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--soluk);
  white-space: nowrap;
}

/* Bağlantı noktası — canlıyken nabız atar. Tek "hareketli" öge burası;
   canlı yayın olduğunu anlatan şey bu. */
.nokta {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--soluk);
}

.nokta.acik {
  background: var(--canli);
}

.nokta.kapali {
  background: var(--kopuk);
}

.nokta.acik::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--canli);
  animation: nabiz 2.2s ease-out infinite;
}

@keyframes nabiz {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* ───────── düğmeler ───────── */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dugme-kenar);
  border-radius: var(--kapsul);
  background:
    linear-gradient(180deg, var(--cam-ust), var(--cam-alt)),
    var(--dugme-zemin);
  -webkit-backdrop-filter: var(--bulanik);
  backdrop-filter: var(--bulanik);
  box-shadow:
    var(--golge-yuzey),
    inset 0 1px 0 var(--cam-parlak),
    inset 0 -1px 2px var(--cam-dip);
  color: var(--dugme-metin);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 260ms var(--yay),
    transform 260ms var(--yay);
}

.dugme:hover {
  background: rgba(var(--vurgu-rgb), 0.18);
  border-color: rgba(var(--vurgu-rgb), 0.55);
  box-shadow: var(--golge-kalkik), inset 0 1px 0 var(--cam-parlak);
  transform: translateY(-1px);
}

/* Basili tutarken kuculuyor, birakinca yerine oturuyor: dokunmanin kaydedildigi
   tek isaret bu — telefonda hover yok. */
.dugme:active {
  transform: scale(0.96);
  box-shadow: var(--golge-yuzey), inset 0 1px 0 var(--cam-parlak);
}

.dugme:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

.dugme.birincil {
  background: var(--vurgu-koyu);
  border-color: transparent;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu) 62%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(var(--vurgu-rgb), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}

/* Işık süzülmesi: imleç gelince yüzeyden bir parıltı geçiyor. Tek yerde,
   tek düğmede — sayfanın en önemli eylemi o. */
.dugme::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    var(--parilti) 50%,
    transparent 72%
  );
  transform: translateX(-130%);
  transition: transform 720ms var(--yay);
  pointer-events: none;
}

.dugme:hover::after,
.dugme:focus-visible::after {
  transform: translateX(130%);
}

/* Parıltı metnin altından geçiyor, üstünden değil. */
.dugme > * {
  position: relative;
  z-index: 1;
}

.dugme.birincil:hover {
  background: var(--vurgu);
  border-color: transparent;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(var(--vurgu-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ───────── alt panel (cam) ───────── */

#alt {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 10;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  padding-block-end: var(--guvenli-alt);
  background: var(--grup-zemin);
  -webkit-backdrop-filter: var(--bulanik);
  backdrop-filter: var(--bulanik);
  border-block-start: 1px solid var(--cam-kenar);
  border-start-start-radius: var(--yaricap-sayfa);
  border-start-end-radius: var(--yaricap-sayfa);
  box-shadow: var(--panel-golge);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Harita kapalıyken panel sabit değil, akışta: masaüstünde ekranın yarısı boş
   kalıyordu. Telefonda zaten tam genişlik kaplıyor. */
body.haritaKapali #alt {
  position: static;
  max-height: none;
  margin: 0 auto;
  max-width: 560px;
  border: 1px solid var(--cam-kenar);
  border-radius: var(--yaricap-sayfa);
  box-shadow:
    var(--golge-kalkik),
    inset 0 1px 0 var(--cam-parlak);
  backdrop-filter: none;
}

body.haritaKapali {
  background: var(--zemin);
  /* Üst çubuk sabit: panel onun altından başlamazsa başlık çubuğun altında
     kalıyor ve durak adı okunmuyor (telefonda görüldü). */
  padding: calc(72px + var(--guvenli-ust) + 12px) 12px 12px;
  min-height: 100vh;
}

/* QR ekranında "5 durak uzakta" EKRANIN EN BÜYÜK SATIRI: durakta ayakta
   duran kişi haritayı incelemiyor, tek bir rakam arıyor. */
body.durakEkrani #liste .hatBoyunca {
  margin-block-start: 4px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--metin);
}

/* Durak numarası: etiketin yanında, ondan sönük. */
#durakNo {
  opacity: 0.75;
  font-weight: 600;
}

#alt.kapali {
  transform: translateY(calc(100% - 84px - var(--guvenli-alt)));
}

#tutamak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

#tutamak:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: -3px;
}

#tutamakBaslik {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
}

#aracSayisi {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

#tutamakOk {
  width: 18px;
  height: 18px;
  color: var(--soluk);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#alt.kapali #tutamakOk {
  transform: rotate(180deg);
}

#liste {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 14px;
  -webkit-overflow-scrolling: touch;
}

/* ───────── araç satırı ───────── */

.kart {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  margin-block-start: 8px;
  border: 1px solid var(--cam-kenar);
  border-radius: var(--yaricap-orta);
  background:
    linear-gradient(180deg, var(--cam-ust), var(--cam-alt)),
    var(--panel-2);
  box-shadow:
    var(--golge-yuzey),
    inset 0 1px 0 var(--cam-parlak);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 260ms var(--yay),
    transform 260ms var(--yay);
}

.kart:hover {
  border-color: rgba(var(--vurgu-rgb), 0.5);
  box-shadow: var(--golge-kalkik), inset 0 1px 0 var(--cam-parlak);
  transform: translateY(-1px);
}

.kart:active {
  transform: scale(0.985);
}

.kart:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

.kart.bayat {
  opacity: 0.72;
}

/* Sol taraftaki durum diski */
.kartDurum {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--canli);
}

.kart.bayat .kartDurum {
  background: rgba(245, 158, 11, 0.14);
  color: var(--bayat);
}

.kartDurum svg {
  width: 20px;
  height: 20px;
}

#ustDugmeler {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kartOrta {
  min-width: 0;
}

.kartAd {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uzaklikMetin {
  display: block;
}

.kartAlt {
  margin-block-start: 3px;
  font-size: 0.8125rem;
  color: var(--soluk);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.rozet {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.16);
  color: var(--canli);
}

.kart.bayat .rozet {
  background: rgba(245, 158, 11, 0.16);
  color: var(--bayat);
}

/* Sağdaki uzaklık — kullanıcı konum izni verdiyse dolar */
.kartUzaklik {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: end;
}

.uzaklikSayi {
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.uzaklikBirim {
  font-size: 0.75rem;
  color: var(--soluk);
}

/* Yön oku: kullanıcıdan araca doğru. Dil gerektirmiyor. */
.yonOk {
  width: 22px;
  height: 22px;
  color: var(--vurgu);
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────── boş ve yükleniyor durumları ───────── */

.bos {
  padding: 26px 16px 30px;
  text-align: center;
}

/* Araç yokken tek eylem: konumu aç, en yakın durağı gör. Boş ekran çıkmaz
   sokak olmasın diye. */
.bosEylem {
  margin-block-start: 14px;
}

.bosBaslik {
  font-size: 1rem;
  font-weight: 800;
}

.bosNot {
  margin-block-start: 6px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--soluk);
}

/* Shimmer iskeleti — "yükleniyor" demek yerine yükleneni göstermek */
.iskelet {
  height: 64px;
  margin-block-start: 8px;
  border-radius: var(--yaricap-kucuk);
  background: linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.07) 50%,
      transparent 70%
    ),
    var(--panel-2);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  from {
    background-position-x: 180%;
  }
  to {
    background-position-x: -80%;
  }
}

/* ───────── harita işareti ───────── */

.isaret {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

/* Yön konisini taşıyan iç katman — MapLibre kökün transform'unu kullandığı
   için döndürme burada yapılıyor. */
.isaretDoner {
  position: absolute;
  inset: 0;
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.isaretHalka {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--canli);
  opacity: 0;
}

.isaret:not(.bayat) .isaretHalka {
  animation: nabiz 2.4s ease-out infinite;
}

.isaretGovde {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--canli);
  border: 3px solid var(--kenar);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

.isaretGovde svg {
  width: 17px;
  height: 17px;
  display: block;
}

.isaret.bayat .isaretGovde {
  background: var(--bayat);
}

/* Yön konisi — SADECE heading biliniyorsa eklenir.
   Bilinmeyen yönü kuzey gibi göstermek yanlış bilgi olur. */
.isaretKoni {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 50%;
  width: 0;
  height: 0;
  margin-inline-start: -6px;
  border-inline-start: 6px solid transparent;
  border-inline-end: 6px solid transparent;
  border-block-end: 10px solid var(--canli);
}

.isaret.bayat .isaretKoni {
  border-block-end-color: var(--bayat);
}

/* ───────── dil seçici ───────── */

#dilKatman {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: end center;
  background: rgba(2, 6, 14, 0.62);
  backdrop-filter: blur(3px);
}

#dilKatman[hidden] {
  display: none;
}

#dilPanel {
  width: min(520px, 100%);
  max-height: 78vh;
  overflow-y: auto;
  padding: 8px 12px calc(16px + var(--guvenli-alt));
  background: var(--panel);
  border-block-start: 1px solid var(--cizgi);
  border-start-start-radius: var(--yaricap);
  border-start-end-radius: var(--yaricap);
  animation: yukari 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes yukari {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

#dilPanelBaslik {
  padding: 12px 6px 10px;
  font-size: 0.9375rem;
  font-weight: 800;
}

.dilSecenek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  margin-block-start: 4px;
  border: 1px solid transparent;
  border-radius: var(--yaricap-kucuk);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.dilSecenek:hover {
  background: var(--panel-2);
}

.dilSecenek:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: -3px;
}

.dilSecenek[aria-selected="true"] {
  background: rgba(37, 99, 235, 0.18);
  border-color: var(--vurgu);
}

.dilTik {
  width: 18px;
  height: 18px;
  color: var(--vurgu);
}

/* ───────── durak (QR) ekranı ─────────
   Yolcu ayakta, tek elle, güneş altında bakıyor. Bu yüzden durak adı sayfadaki
   en büyük yazı ve uzaklık rakamları kalın. Dakika tahmini YOK. */

#durakBasligi {
  padding: 16px 16px 12px;
  border-block-end: 1px solid var(--cizgi);
}

#durakEtiket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#durakAd {
  margin: 8px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#durakHatlar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 10px;
}

.hatRozet {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 28px;
  padding-inline: 10px;
  border-radius: 7px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* YÖN ROZETİ: hat kodu + varış yeri ("202 → FAKÜLTE"). Duraktaki yolcunun
   sorusu "hangi hat" değil "hangi yön"; varış yeri `yonAdi`'ndan geliyor.
   Dokununca yalnız o yön çiziliyor (aria-pressed). */
.yonRozet {
  /* Şerit flex; büzülmeye izin verilirse varış yeri sıfır genişliğe iniyor ve
     rozet "202 →" diye kesiliyor (yaşandı). Kaydırma zaten taşmayı çözüyor. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  height: auto;
  padding-block: 4px;
  border: 1px solid transparent;
  background: var(--panel-2);
  color: var(--metin);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.yonRozet .yonKod {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding-inline: 5px;
  border-radius: 5px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-weight: 800;
}

.yonRozet .yonOku {
  color: var(--soluk);
}

/* Arapça/Farsçada yerleşim aynalanıyor; ok da dönmeli. */
[dir="rtl"] .yonRozet .yonOku {
  transform: scaleX(-1);
}

/* Ana haritadaki yön şeridi: hat adının hemen altında, kendi satırında. */
.hatSeritSargi.yonSeridi {
  margin-top: 6px;
}

/* Kalkış ve varış aynı görsel ağırlıkta: rozet "YAT LİMANI → KARGICAK" diye
   okunuyor, biri diğerinden önemli değil. Uzun ad rozeti taşırmasın. */
.yonRozet .yonUc,
.yonRozet .yonVaris {
  /* Uzun varış adı rozeti taşırmasın; tam adı aria-label taşıyor. */
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yonRozet[aria-pressed="true"] {
  background: var(--vurgu-koyu);
  border-color: var(--vurgu-koyu);
  color: #fff;
}

.yonRozet[aria-pressed="true"] .yonKod {
  background: rgba(255, 255, 255, 0.22);
}

.yonRozet[aria-pressed="true"] .yonOku {
  color: rgba(255, 255, 255, 0.75);
}

.yonRozet:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

/* Seçili hattın adı — çipler yalnız sayı, "202" tek başına bir şey anlatmıyor. */
.hatAdi {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--metin);
}

#duragaUzaklik {
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--vurgu);
}

#duragaUzaklik[hidden] {
  display: none;
}

/* Güven unsuru: konum izni zorunlu değil, verilirse de cihazdan çıkmıyor. */
#izinNotu {
  margin: 12px 0 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--canli);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--soluk);
}

.trendYakin {
  color: var(--canli);
  font-weight: 700;
}

.trendUzak {
  color: var(--soluk);
}

/* Doluluk bandı: renk tek başına anlam taşımaz, metin her zaman yazılı. */
.doluluk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.doluluk::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.doluluk-bos, .doluluk-az { color: var(--canli); }
.doluluk-kalabalik { color: var(--bayat); }
.doluluk-cok { color: var(--kopuk); }

/* Durak işareti — "buradasınız". Araç işaretinden ayrışsın diye kare/mavi. */
.durakIsaret {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.durakHalka {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--vurgu);
  animation: nabiz 2.8s ease-out infinite;
}

.durakGovde {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vurgu);
  border: 3px solid var(--kenar);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.durakGovde svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Kullanıcının kendi konumu — otobüsle karışmaması için sade nokta */
.benimNokta {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.25);
}

/* Bilinmeyen durak kodu */
#hataEkran {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(var(--perde), 0.94);
  backdrop-filter: blur(8px);
}

#hataEkran[hidden] {
  display: none;
}

.hataKutu {
  max-width: 380px;
  text-align: center;
  color: var(--metin);
}

.hataKutu svg {
  color: var(--bayat);
}

#hataBaslik {
  margin: 14px 0 0;
  font-size: 1.25rem;
  font-weight: 800;
}

#hataNot {
  margin: 8px 0 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--soluk);
}

/* ───────── erişilebilirlik ───────── */

.gizliMetin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* MapLibre denetimlerini koyu temaya uydur */
.maplibregl-ctrl-group {
  background: rgba(17, 26, 43, 0.88) !important;
  border: 1px solid var(--cizgi) !important;
  backdrop-filter: blur(12px);
}

.maplibregl-ctrl-group button + button {
  border-block-start: 1px solid var(--cizgi) !important;
}

.maplibregl-ctrl-group button span {
  filter: invert(1);
}

.maplibregl-ctrl-bottom-right {
  inset-block-end: calc(96px + var(--guvenli-alt)) !important;
}

.maplibregl-ctrl-attrib {
  background: rgba(var(--perde), 0.7) !important;
  color: var(--soluk) !important;
}

.maplibregl-ctrl-attrib a {
  color: var(--soluk) !important;
}

@media (min-width: 720px) {
  #alt {
    inset-inline-start: 16px;
    inset-inline-end: auto;
    inset-block-end: 16px;
    width: 380px;
    max-height: calc(100vh - 110px);
    border-radius: var(--yaricap-sayfa);
    border: 1px solid var(--cam-kenar);
    box-shadow: var(--golge-kalkik);
  }

  #alt.kapali {
    transform: none;
  }

  #tutamakOk {
    display: none;
  }
}

/* Telefon: harita panelin üstünde biter, panel haritayı örtmez (Enes, 23 Eki). Harita panelin
   yuvarlak köşesinin altına kadar uzar ki köşelerde boşluk görünmesin. Katlanınca panel
   kaydırılmıyor, yalnız başlık kalıyor: kaydırınca başlık ekran dışına düşüyordu. */
@media (max-width: 719.98px) {
  body:not(.haritaKapali) #harita {
    inset-block-end: max(0px, calc(var(--alt-yukseklik, 0px) - var(--yaricap-sayfa)));
  }

  .maplibregl-ctrl-bottom-right {
    inset-block-end: calc(var(--yaricap-sayfa) + 8px) !important;
  }

  #alt.kapali {
    transform: none;
  }

  html:not(.listeGorunumu) body:not(.haritaKapali) #alt.kapali > :not(#tutamak) {
    display: none !important;
  }

  html:not(.listeGorunumu) body:not(.haritaKapali) #alt.kapali > #tutamak {
    margin-block-end: 12px;
    border-radius: var(--yaricap);
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────── genel haritada durak katmanı ───────── */

/* Duraklar artık DOM işaretçisi değil, MapLibre circle katmanı (bkz. app.js
   durakKatmaniniKur). Renkleri buradan değil JS'ten geliyor: canvas boyaması
   CSS değişkeni okuyamıyor. Durak SESSİZ kalmaya devam ediyor — nokta, nabız
   yok; otobüs DOLU RENK + nabız. Hiyerarşi kasıtlı: hareketli olan dikkat çeksin.

   Canvas'taki nokta klavyeyle odaklanamadığı için erişim karşılığı .gorunmezListe:
   ekranda yer kaplamıyor ama sekmeyle gezilebiliyor ve odaklanınca görünür oluyor. */
.gorunmezListe {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gorunmezListe button {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: inherit;
}

/* Odaklanınca görünür: klavyeyle gezen gören kullanıcı nereye geldiğini bilsin. */
.gorunmezListe button:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 4px 12px;
  padding: 8px 12px;
  overflow: visible;
  clip-path: none;
  border-radius: var(--yaricap-kucuk);
  background: var(--panel-2);
  color: var(--metin);
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

/* En yakın durak kartı — yalnız konum izni verildiğinde görünür */
#enYakinKart,
.enYakinKart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 24px);
  margin: 0 12px 4px;
  padding: 12px 14px;
  border: 1px solid var(--vurgu);
  border-radius: var(--yaricap-kucuk);
  background: rgba(37, 99, 235, 0.16);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 160ms ease;
}

#enYakinKart:hover,
.enYakinKart:hover {
  background: rgba(37, 99, 235, 0.26);
}

#enYakinKart:focus-visible,
.enYakinKart:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

.enYakinSol {
  min-width: 0;
}

.enYakinEtiket {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
}

.enYakinAd {
  display: block;
  margin-block-start: 3px;
  font-size: 0.9375rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enYakinUzaklik {
  flex-shrink: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vurgu);
}

/* Hatsız durak ekranındaki öneri kartı boş-durum kutusunun içinde: yan
   boşluğu kutu veriyor. */
.bos .enYakinKart {
  width: 100%;
  margin: 12px 0 0;
}

/* Cam yüzeyler artık --cam / --cam-kalin token'larından geliyor; açık temada
   #alt ve .dugme için ayrı kural gerekmiyor. */
:root.acik .sepet-dugme {
  background: var(--cam);
}

:root.acik #durakEtiket,
:root.acik .enYakinEtiket {
  color: var(--vurgu);
}

:root.acik #durakEtiket {
  background: rgba(29, 78, 216, 0.1);
}

:root.acik #enYakinKart,
:root.acik .enYakinKart {
  background: rgba(29, 78, 216, 0.08);
}

:root.acik .rozet {
  background: rgba(21, 128, 61, 0.12);
}

:root.acik .kart.bayat .rozet,
:root.acik .kart.bayat .kartDurum {
  background: rgba(180, 83, 9, 0.12);
}

:root.acik .kartDurum {
  background: rgba(21, 128, 61, 0.12);
}

:root.acik .maplibregl-ctrl-group button span {
  filter: none;
}

/* Atıf kutusu: kapalı başlar, ⓘ düğmesiyle açılır. Kaldırmıyoruz —
   OpenStreetMap lisansı (ODbL) atıf zorunlu kılıyor, sadece katlanıyor. */
.maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 24px;
}

/* ───────── hat rozetleri ───────── */

/* 25 hat var. Çipler sarılırsa 375 px'lik telefonda dört satır oluyor ve kartın
   yüksekliği patlıyor (harita 150 px'in altına düşüyordu). Bu yüzden çipler TEK
   SATIRDA, yatay kaydırılarak duruyor; uyarı metni altta ayrı satırda kalıyor. */
.hatFiltre {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 10px;
}

/* Şerit sarmalayıcı: şerit + iki ok düğmesi. Oklar şeridin ÜSTÜNE biniyor,
   yer kaplamıyorlar; dar ekranda kart zaten sıkışık. */
.hatSeritSargi {
  position: relative;
  min-width: 0;
}

.hatCipSeridi {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Odak halkası (outline-offset: 2px) kırpılmasın diye pay bırakıldı. */
  padding: 3px;
  margin: -3px;
  scrollbar-width: none;
  /* scroll-snap KALDIRILDI: çipler kenara tam hizalanınca şerit "bitti" gibi
     görünüyordu. Yarım kesilen çip, devamı olduğunun en ucuz işareti. */
}

.hatCipSeridi::-webkit-scrollbar {
  display: none;
}

/* Kenarda solma. Arka plan rengi boyamak yerine İÇERİĞİ maskeliyoruz: kart
   rengi temaya göre değişiyor, maske ikisinde de doğru çalışıyor.
   Yalnız kayacak yer olan tarafta uygulanıyor: data-bas / data-son (app.js).
   İsimler MANTIKSAL — "baş" ve "son", sol/sağ değil; Arapça ve Farsçada
   şerit aynalanıyor ve gizli kalan taraf da yer değiştiriyor.
   -webkit- eşi Safari 15 öncesi için; prefikssizi bilmiyor, maskesiz kalıyor. */
.hatSeritSargi[data-son="1"] .hatCipSeridi,
[dir="rtl"] .hatSeritSargi[data-bas="1"] .hatCipSeridi {
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}

.hatSeritSargi[data-bas="1"] .hatCipSeridi,
[dir="rtl"] .hatSeritSargi[data-son="1"] .hatCipSeridi {
  mask-image: linear-gradient(to right, transparent 0, #000 34px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
}

/* İki taraf da kayıyorsa maske simetrik: RTL için ayrı kural gerekmiyor. */
.hatSeritSargi[data-bas="1"][data-son="1"] .hatCipSeridi {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 34px,
    #000 calc(100% - 34px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 34px,
    #000 calc(100% - 34px),
    transparent 100%
  );
}

/* Ok düğmeleri FARE İÇİN. Dokunmatikte parmakla kaydırmak zaten doğal ve
   ekranda yer kaplamasınlar diye yalnız hover'lı cihazlarda çıkıyorlar. */
.seritOk {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .hatSeritSargi[data-bas="1"] .seritOk.bas,
  .hatSeritSargi[data-son="1"] .seritOk.son {
    display: grid;
  }

  .seritOk {
    position: absolute;
    inset-block: 0;
    z-index: 2;
    place-items: center;
    width: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--metin);
    cursor: pointer;
  }

  .seritOk.bas {
    inset-inline-start: -8px;
  }

  .seritOk.son {
    inset-inline-end: -8px;
  }

  .seritOk svg {
    width: 18px;
    height: 18px;
  }

  /* Ok ucu de aynalanıyor: RTL'de "baş" sağda kalıyor. */
  [dir="rtl"] .seritOk svg {
    transform: scaleX(-1);
  }

  .seritOk:hover {
    color: var(--vurgu);
  }
}

.hatCip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--metin);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    transform 260ms var(--yay);
}

.hatCip:active {
  transform: scale(0.94);
}

.hatCip[aria-pressed="true"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu) 62%);
  border-color: transparent;
  box-shadow:
    0 4px 10px rgba(var(--vurgu-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

.hatCip:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

.kartHat {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding-inline: 8px;
  border-radius: 6px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.hatNot {
  margin-block-start: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--soluk);
}

/* "Aktarmasız" rozeti: yürüme satırının altında, kendi satırında. Hat rengi
   ALMIYOR — hat rozetleri (.yonKod) bir otobüsü gösteriyor, bu bir otobüs
   değil, yolculuğun özelliği. Bu yüzden nötr çerçeve, dolgu yok. */
.aktarmasizRozet {
  display: inline-block;
  margin-block-start: 4px;
  padding: 2px 8px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--soluk);
}

/* Seçilen durağın paneldeki kartı */
#durakKarti {
  margin: 0 12px 8px;
  padding: 12px 14px;
  border: 1px solid var(--vurgu);
  border-radius: var(--yaricap-kucuk);
  background: rgba(37, 99, 235, 0.14);
}

.durakKartiAd {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.durakKartiUzaklik {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vurgu);
}

/* Duraktan geçen yönler: hat rozeti (çizgi rengi) + yön + saha numarası. */
.durakKartiYonler {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.durakKartiYonler li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.hatRozeti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  color: #fff;
  font-weight: 800;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.durakKartiKod {
  margin-inline-start: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--vurgu);
}

.durakKartiDugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 10px;
}

.durakKartiDugmeler .dugme {
  min-height: 40px;
  font-size: 0.8125rem;
}

/* Durak ekranındaki "tüm haritayı aç" bağlantısı */
#haritayaDon {
  display: inline-block;
  margin-block-start: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--vurgu);
}

/* ───────── liste görünümü ─────────
   Harita tamamen gizleniyor: yavaş bağlantıda karo indirilmiyor, eski telefon
   yorulmuyor, güneş altında okunurluk artıyor. Panel tam ekran oluyor. */

.listeGorunumu #harita {
  display: none;
}

.listeGorunumu #alt {
  position: static;
  max-height: none;
  height: auto;
  min-height: calc(100vh - 0px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--zemin);
  backdrop-filter: none;
  padding-block-start: calc(64px + var(--guvenli-ust));
}

.listeGorunumu #alt.kapali {
  transform: none;
}

.listeGorunumu #tutamakOk,
.listeGorunumu .maplibregl-ctrl-bottom-right,
.listeGorunumu .maplibregl-ctrl-attrib {
  display: none;
}

.listeGorunumu #liste {
  overflow: visible;
}

.listeGorunumu #ust {
  background: var(--zemin);
  border-block-end: 1px solid var(--cizgi);
}

/* Liste görünümünde kartlar biraz daha ferah ve okunaklı */
.listeGorunumu .kart {
  min-height: 72px;
}

.listeGorunumu .kartAd {
  font-size: 1rem;
}

/* Dar ekranda üst şeritteki düğmeler taşıyordu ve şehir adı dışarı itiliyordu.
   Etiketler gizleniyor, ikonlar kalıyor; hepsi 44px dokunma alanını koruyor. */
@media (max-width: 620px) {
  .dugme span:not(#dilEtiketi) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .dugme {
    padding: 0 11px;
  }

  #ustDugmeler {
    gap: 6px;
  }

  #durumMetni {
    display: none;
  }
}

/* Liste görünümünde harita yok; güzergâh uyarısı oraya ait, gizleniyor. */
.listeGorunumu .hatNot {
  display: none;
}

/* QR ile gelindiğinde "şu an bu duraktasınız" damgası — yeşil, çünkü bu
   doğrulanmış bir bilgi (fiziksel levhadaki kod okutuldu), tahmin değil. */
#durakEtiket.qrDamgasi {
  background: rgba(34, 197, 94, 0.16);
  color: var(--canli);
}

#yakinDugmesi {
  margin-block-start: 12px;
  width: 100%;
}

#haritayaDon {
  display: inline-block;
  margin-block-start: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--soluk);
  text-decoration: underline;
}

/* iPhone'da "ana ekrana ekle" tarifi */
#iosKatman {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  background: rgba(2, 6, 14, 0.62);
  backdrop-filter: blur(3px);
}

#iosPanel {
  width: min(520px, 100%);
  padding: 20px 18px calc(20px + var(--guvenli-alt));
  background: var(--panel);
  border-block-start: 1px solid var(--cizgi);
  border-start-start-radius: var(--yaricap);
  border-start-end-radius: var(--yaricap);
  animation: yukari 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

#iosBaslik {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

#iosMetin {
  margin: 10px 0 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--soluk);
}

#iosKapat {
  width: 100%;
}


/* Konum geri bildirimi — harita üstünde, üst bara bitişik. */
#konumUyari {
  position: fixed;
  inset-inline: 12px;
  top: calc(var(--guvenli-ust, 0px) + 64px);
  z-index: 60;
  margin-inline: auto;
  width: fit-content;
  max-width: min(420px, calc(100% - 24px));
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--cizgi);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
  animation: yukari 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#konumUyari[hidden] {
  display: none;
}

/* Hata hâli: kırmızı kenar. Metin rengi okunurluk için değişmiyor. */
#konumUyari.hata {
  border-color: #e0483c;
  box-shadow: 0 8px 24px rgb(224 72 60 / 0.24);
}

@media (prefers-reduced-motion: reduce) {
  #konumUyari {
    animation: none;
  }

  /* Dokunma geri bildirimi olculeniyor: renk ve golge kaliyor, hareket gidiyor. */
  .dugme,
  .kart {
    transition:
      background-color 200ms ease,
      border-color 200ms ease,
      box-shadow 200ms ease;
  }

  .dugme:active,
  .kart:active,
  .dugme:hover,
  .kart:hover {
    transform: none;
  }

  .dugme::after {
    display: none;
  }
}

/* ═════ küçük ekran sıkıştırması ═════
   Ölçüm (375x560, iPhone SE): kart 347px, harita 149px, #durakBasligi tek
   başına 262px, otobüs listesi 18px. Durakta duran adam listeyi ve haritayı
   görmek istiyor; başlık ikisini de yutuyordu. Izgara ile "T12" ve hat
   rozetleri aynı satıra, iki eylem aynı satıra alınıyor. */
#durakBasligi {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 10px;
}

#durakEtiket {
  grid-column: 1 / -1;
  justify-self: start;
}

#durakAd {
  grid-column: 1;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Hat rozetleri durak adının yanına; tek başına satır harcamıyor. */
#durakHatlar {
  grid-column: 2;
  justify-self: start;
  margin: 0;
  min-width: 0;
}

/* Yön rozetleri ("202 → FAKÜLTE") ada yan yana sığmıyor: kendi satırını alıp
   tam genişliğe yayılıyor ve kaydırılır şeride dönüşüyor. */
#durakHatlar.seritli {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: block;
  margin-block-start: 8px;
}

#duragaUzaklik,
#izinNotu {
  grid-column: 1 / -1;
  margin-block-start: 0;
}

/* İki eylem yan yana: birincil düğme yeri doldurur, çıkış bağlantısı sağda. */
#yakinDugmesi {
  grid-column: 1;
  justify-self: stretch;
  width: auto;
  margin-block-start: 4px;
}

#haritayaDon {
  grid-column: 2;
  justify-self: start;
  margin-block-start: 4px;
  white-space: nowrap;
}

/* Alçak ekranlar: harita şeride dönmesin diye kart tavanı düşürülüyor ve
   eyleme dönük olmayan gizlilik notu gizleniyor — aynı bilgiyi yeşil
   "Şu an bu duraktasınız" damgası zaten veriyor. */
@media (max-height: 760px) {
  #alt {
    max-height: 54vh;
  }

  #durakBasligi {
    padding: 10px 14px 10px;
  }

  #durakAd {
    font-size: 1.25rem;
  }

  #izinNotu {
    display: none;
  }

  #tutamak {
    min-height: 48px;
  }
}

/* Dar ekranlarda üst bardaki beş düğme şehir adını "Ala..." hâline
   getiriyordu. Ölçüldü (375px): 0.9375rem'de "Alanya" 53px, düğmelere
   16px boşluk kalıyor — gizlemek yerine küçültmek yetiyor. */
@media (max-width: 400px) {
  #sehirAdi {
    font-size: 0.9375rem;
  }

  #ust {
    gap: 8px;
  }
}

/* Araç öbekleri: "geliyor" öne, "geçti" arkaya. Başlık küçük ama okunur —
   durak tabelası dili, süs yok. Tek öbek varsa başlık hiç basılmıyor. */
.obekBaslik {
  margin: 10px 0 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--soluk);
}

/* Hat boyunca uzaklık: kuş uçuşu rakamının altında, ondan daha anlamlı. */
.hatBoyunca {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--metin);
}

/* Geçmiş otobüs listede duruyor ama beklenecek gibi durmuyor. */
.kart.solgun {
  opacity: 0.55;
}

/* "Nereye gideceksiniz?" bloğu. Durak tabelası dili: büyük dokunma alanı,
   yüksek kontrast, süs yok. */
/* Ada içindeki ikincil düğme kendi zemininden ayrılsın: beyaz kart üstünde
   beyaz düğme yalnız gölgeyle duruyordu, güneşte gölge görünmez. */
#hedefBloku .dugme:not(.birincil) {
  background:
    linear-gradient(180deg, var(--cam-ust), var(--cam-alt)),
    var(--dugme-zemin);
}

#hedefBloku .dugme:not(.birincil):hover {
  background: rgba(var(--vurgu-rgb), 0.12);
}

/* Araç listesi de kendi adasında: başlık, hat şeridi ve satırlar tek bir
   yüzeyde birleşiyor — üçü ayrı ayrı zemine dağılmış görünüyordu. */
#tutamak,
#alt > #hatFiltre:not([hidden]),
#alt > #liste {
  margin-inline: 12px;
  width: auto;
  background: var(--panel);
}

#tutamak {
  border-start-start-radius: var(--yaricap);
  border-start-end-radius: var(--yaricap);
  box-shadow:
    var(--golge-yuzey),
    inset 0 1px 0 var(--cam-parlak);
  clip-path: inset(0 -20px -1px -20px);
}

#alt > #liste {
  padding-inline: 10px;
  padding-block-end: 10px;
  border-end-start-radius: var(--yaricap);
  border-end-end-radius: var(--yaricap);
  box-shadow: var(--golge-yuzey);
  clip-path: inset(-1px -20px -20px -20px);
}

/* Gruplanmış blok: soru ve alanları tek bir ada içinde. Panel zemini gri
   kalıyor, bloklar beyaz — hangi alanların birlikte cevaplandığı kenardan
   okunuyor, ayırıcı çizgi eklemeye gerek kalmıyor. */
#hedefBloku:not([hidden]) {
  margin: 10px 12px 2px;
  padding: 4px 14px 14px;
  border: 1px solid var(--cam-kenar);
  border-radius: var(--yaricap);
  background: var(--panel);
  box-shadow:
    var(--golge-yuzey),
    inset 0 1px 0 var(--cam-parlak);
}

.blokBaslik {
  margin: 14px 0 7px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hedefKutu {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--yaricap-orta);
  background: var(--panel-2);
  color: var(--metin);
  font: inherit;
  transition:
    border-color 200ms ease,
    box-shadow 260ms var(--yay);
}

/* Yazarken kutunun kendisi odagi gosteriyor: halka, tasiyici degil kutunun
   kenari. outline ayrica duruyor (klavye kullanicisi icin sart). */
.hedefKutu:focus {
  border-color: rgba(var(--vurgu-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--vurgu-rgb), 0.18);
  outline: none;
}

.hedefKutu:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

.hedefSonuc {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.hedefSatir {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--yaricap-orta);
  background: transparent;
  color: var(--vurgu);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.hedefSatir:hover,
.hedefSatir:focus-visible {
  background: var(--panel-2);
}

.yolInis {
  margin: 8px 0 0;
  font-weight: 700;
}

/* Cevap bloğu panelin kendi kenar boşluğunu taşımıyordu: harita açıkken
   "TOSMUR → ..." ve "Yeni arama" ekranın iki kenarına yapışıyordu. Panelin
   öteki bölümleriyle aynı 14px. */
#yolSonuc:not(:empty) {
  padding: 0 14px 12px;
}

/* Cevap özeti: nereden → nereye ve çıkış. Cevabın başlığı gibi duruyor. */
.yolOzet {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cizgi);
}

.yolOzetYer {
  flex: 1 1 12ch;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* "Yeni arama" iki kelime, tek satır: sarınca özetin sağ kenarı iki satırlık
   bir merdivene dönüyordu. Sığmazsa alt satıra tümüyle iniyor. */
.yolOzet .baglantiDugme {
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
}

/* İki seçenek: "az yürü, çok otur" ile "çok yürü, az otur". Yolcu kendi
   seçiyor; sistem onun yerine karar verip sebebini saklamıyor. */
.secenekler {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.secenekSatiri {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.secenekSatiri.secili {
  border-color: var(--vurgu);
  background: var(--panel-2);
}

.secenekYurume {
  flex: 0 0 auto;
  min-width: 78px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.secenekYol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8125rem;
}

.secenekDurak {
  color: var(--soluk);
}

.secenekSatiri .yonKod {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding-inline: 5px;
  border-radius: 5px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Seçilebilir adım: haritada o bacağı gösteriyor. Seçili olan mavi şeritle
   ayrılıyor — hangi adımın haritada durduğu ekrandan okunuyor. */
.yolAdimDokunulur {
  cursor: pointer;
  border-radius: var(--yaricap-orta);
  padding-inline: 8px;
  margin-inline: -8px;
  transition:
    background-color 200ms ease,
    box-shadow 260ms var(--yay);
}

.yolAdimDokunulur:hover {
  background: rgba(var(--vurgu-rgb), 0.08);
}

.yolAdimSecili {
  background: rgba(var(--vurgu-rgb), 0.1);
  box-shadow: inset 3px 0 0 var(--vurgu);
}

.yolAdimDokunulur:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}

/* Adım: solda numara, sağda ne yapılacağı. Numaralar dikey bir çizgi gibi
   hizalanıyor; yolcu sırayı okumadan görüyor. */
.yolAdim {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}

.yolAdim + .yolAdim {
  border-top: 1px solid var(--cizgi);
}

/* Adım numarası NÖTR: hat rozeti (.yonKod) dolu mavi kare ve yolcunun aradığı
   asıl bilgi o. İkisi de dolu mavi olunca "2. adım" ile "2 numaralı otobüs"
   birbirine karışıyordu (ekranda görüldü). */
.adimNo {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  color: var(--soluk);
  font-size: 0.75rem;
  font-weight: 700;
}

.adimGovde {
  flex: 1 1 auto;
  min-width: 0;
}

.adimBaslik {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Yön adı: hat rozetinin yanında, ondan sönük. Hangi otobüs (rozet) asıl
   bilgi; yön onu doğrulayan ikinci bilgi. */
.adimYon {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--soluk);
}

.adimAyrinti {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--soluk);
}

/* Yol bacağı: hat rozeti + tek cümle. Kart değil satır hissi versin diye
   gölge yok; okunurluk çerçeveden geliyor. */
.yolBacak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: var(--panel-2);
}

.yolBacak .yonKod,
.adimBaslik .yonKod {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  padding-inline: 5px;
  border-radius: 5px;
  background: var(--vurgu-koyu);
  color: #fff;
  font-weight: 800;
}

.yolMetin {
  flex: 1 1 60%;
  margin: 0;
  font-size: 0.9375rem;
}

/* Nereden / nereye alanları. Etiket kutunun üstünde: telefonda yan yana
   koyunca iki alan da okunmaz hale geliyordu. */
.yolAlan {
  margin-top: 8px;
}

.yolAlanEtiket {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--soluk);
}

.yolAlanDugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* TEK SORU DÜZENİ. Kutu tek başına; kalkış bilgisi soru değil, kutunun
   altında küçük bir satır. Harita ikonu kaldırıldı: yolcu durak seçiyor,
   haritadan nokta işaretlemiyor. */
.aramaKutuSatiri {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.aramaKutuSatiri .hedefKutu {
  flex: 1 1 auto;
  min-width: 0;
}



.ikonDugme:hover,
.ikonDugme:focus-visible {
  border-color: var(--vurgu);
}

.kalkisOzet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 0.875rem;
  color: var(--soluk);
}

/* "Değiştir" düğme gibi değil bağlantı gibi duruyor: asıl eylem arama kutusu,
   bu yanında ikincil kalmalı. Dokunma alanı yine de 44 px. */
.baglantiDugme {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--vurgu);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Arama satırında ad solda, uzaklık sağda: aynı adlı iki durağı ayıran tek
   bilgi bu, ama ada göre ikincil kalmalı. */
.hedefSatir {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.hedefUzaklik {
  flex: 0 0 auto;
  color: var(--soluk);
  font-size: 0.8125rem;
}