/* ───────────────────────────────────────────────────────────────
   Uygulama kabuğu.

   Tek bir harita var; onun üzerine iki farklı düzen biniyor:

   • Mobil (<1024px): tam ekran harita, üstte yüzen arama, altta
     sekme çubuğu, istasyona dokununca alttan açılan panel.
   • Masaüstü (≥1024px): solda sabit yan panel (arama + liste),
     sağda harita. Sekme çubuğu ve yüzen arama gizleniyor.
   ─────────────────────────────────────────────────────────────── */

#map {
  position: fixed;
  inset: 0;
  z-index: var(--z-map);
  background: var(--bg);
}

/* ══ Açılış perdesi ═══════════════════════════════════════════════ */

.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s4);
  background:
    radial-gradient(120% 80% at 50% 28%, rgba(0, 168, 107, 0.1), transparent 62%),
    var(--bg);
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.splash.is-done { opacity: 0; visibility: hidden; }

/* Dönen tarama halkası — radar teması, veri yüklenirken */
.scanner {
  position: relative;
  width: 104px; height: 104px;
  display: grid;
  place-items: center;
}
.scanner__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 168, 107, 0.28);
}
.scanner__ring--2 { inset: 20px; border-color: rgba(0, 168, 107, 0.18); }

/* Süpüren huzme */
.scanner__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 168, 107, 0.55) 0deg,
    rgba(0, 168, 107, 0.12) 34deg,
    transparent 82deg,
    transparent 360deg);
  mask-image: radial-gradient(circle, transparent 12%, #000 14%, #000 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 14%, #000 100%);
  animation: sweep 1.9s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.scanner__core {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(0, 168, 107, 0.16), 0 0 20px rgba(0, 168, 107, 0.6);
  animation: core-pulse 1.9s var(--ease) infinite;
}
@keyframes core-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.82); opacity: 0.75; }
}

.splash__title {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.splash__text { font-size: 0.82rem; color: var(--text-dim); }
.splash__text.is-error { color: var(--warn); }

/* ══ Mobil: üst arama ═════════════════════════════════════════════ */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding:
    calc(var(--safe-t) + var(--s3))
    calc(var(--safe-r) + var(--s3))
    var(--s2)
    calc(var(--safe-l) + var(--s3));
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.topbar > * { pointer-events: auto; }

/* Başlık aramanın üstünde, harita üzerinde yüzen küçük bir şerit */
.topbar__brand {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border-radius: var(--r-full);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.topbar__mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 8px;
  background: #0b1220 url('../assets/icon-192.png') center / 80% no-repeat;
}
.topbar__title {
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--text-mid);
}
.topbar__title b { color: var(--text); font-weight: 700; }

/* Liste/bilgi sekmesinde, sürüşte ve detay paneli açıkken arama gizleniyor */
body[data-view="list"] .topbar,
body[data-view="info"] .topbar,
body[data-view="route"] .topbar,
body.is-navigating .topbar,
body.sheet-open .topbar {
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}

/* ══ Yüzen butonlar ═══════════════════════════════════════════════ */

.fabs {
  position: fixed;
  right: calc(var(--safe-r) + var(--s3));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s5));
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* Detay paneli açıkken buton panelin eylem düğmelerinin üstüne biniyordu */
body[data-view="list"] .fabs,
body[data-view="info"] .fabs,
body.is-navigating .fabs,
body.sheet-open .fabs { opacity: 0; pointer-events: none; transform: translateX(20px); }

.fab {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--text);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fab:active { transform: scale(0.92); }
.fab.is-active { color: var(--accent); border-color: rgba(0, 229, 160, 0.4); }

/* ══ Mobil: tam ekran paneller (liste, bilgi) ═════════════════════ */

.panel {
  position: fixed;
  inset: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  z-index: var(--z-screen);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  animation: panel-in var(--dur) var(--ease-out) both;
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding:
    calc(var(--safe-t) + var(--s5))
    calc(var(--safe-r) + var(--s4))
    var(--s3)
    calc(var(--safe-l) + var(--s4));
  border-bottom: 1px solid var(--line);
}
.panel__count { font-size: 0.78rem; color: var(--text-dim); }

.panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding:
    var(--s3)
    calc(var(--safe-r) + var(--s4))
    var(--s6)
    calc(var(--safe-l) + var(--s4));
}
.panel__body--prose { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }
.panel__body--prose h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: var(--s5) 0 var(--s2);
}
.panel__body--prose p { margin-bottom: var(--s3); text-wrap: pretty; }
.panel__body--prose strong { color: var(--text); }

/* ══ Alt sekme çubuğu ═════════════════════════════════════════════ */

/* Kenarlardan boşluklu, yuvarlak ve yüzen — mobil uygulama hissi için
   ekranın altına yapışık bir çubuk yerine ayrı bir ada. */
.tabbar {
  position: fixed;
  left: calc(var(--safe-l) + var(--s3));
  right: calc(var(--safe-r) + var(--s3));
  bottom: calc(var(--safe-b) + var(--s3));
  z-index: var(--z-sheet);
  height: var(--tabbar-h);
  padding: 0 var(--s2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: var(--s1);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
body.is-navigating .tabbar {
  transform: translateY(calc(100% + var(--s6)));
  opacity: 0;
  pointer-events: none;
}

.tab {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-md);
  color: var(--text-dim);
  position: relative;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tab__ico {
  display: grid; place-items: center;
  height: 24px;
  transition: transform var(--dur) var(--ease-out);
}
.tab__label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Etkin sekme hap biçiminde bir zemin alıyor */
.tab.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
.tab.is-active .tab__ico { transform: translateY(-1px) scale(1.06); }
.tab:active .tab__ico { transform: scale(0.9); }

/* Rota sekmesinde hazır rota varsa nokta */
.tab[data-view="route"].has-route .tab__ico::after {
  content: '';
  position: absolute;
  top: 6px;
  margin-left: 24px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--surface-solid);
}

/* ══ Masaüstü yan panel ═══════════════════════════════════════════ */

.sidebar { display: none; }

@media (min-width: 1024px) {
  /* Mobil düzeni kapat */
  .topbar, .tabbar { display: none; }
  .panel { display: none !important; }

  .fabs {
    right: var(--s5);
    bottom: var(--s5);
  }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: var(--z-sheet);
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--surface-solid);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s5) var(--s5) var(--s3);
  }

  .brand { display: flex; align-items: center; gap: var(--s3); }
  .brand__mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #0b1220 url('../assets/icon-192.png') center / 78% no-repeat;
    border: 1px solid var(--line);
    flex: none;
  }
  .brand__text { font-weight: 650; letter-spacing: -0.02em; font-size: 1rem; }
  .brand__text span { color: var(--accent); margin: 0 1px; }

  .sidebar .field { margin: 0 var(--s5); }
  .sidebar .chips { padding: var(--s3) var(--s5); }

  .sidebar__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: 0 var(--s5) var(--s3);
    font-size: 0.76rem;
    color: var(--text-mid);
    border-bottom: 1px solid var(--line);
  }
  .sidebar__hint { color: var(--text-dim); font-size: 0.7rem; }

  .sidebar__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s3) var(--s4) var(--s5);
  }

  .sidebar__foot {
    padding: var(--s3) var(--s5) var(--s4);
    border-top: 1px solid var(--line);
    font-size: 0.68rem;
    color: var(--text-dim);
  }

  /* Detay paneli masaüstünde yan panelin sağına yerleşiyor */
  .sheet {
    left: calc(var(--sidebar-w) + var(--s5)) !important;
    right: auto !important;
    bottom: var(--s5) !important;
    top: auto !important;
    width: 400px;
    max-height: calc(100vh - var(--s10));
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--line-strong);
  }
  .sheet__grip { display: none; }
  .sheet__backdrop { display: none !important; }
}

/* Geniş masaüstünde yan panel biraz daha ferah */
@media (min-width: 1440px) {
  :root { --sidebar-w: 400px; }
}

/* ══ Ortadaki büyük eylem sekmesi ═════════════════════════════════
   "Yakındaki istasyonlar" uygulamanın ana işi; sekme çubuğunda
   diğerlerinden ayrışan, yukarı taşan bir düğme olarak duruyor. */

.tab--main {
  position: relative;
  background: none !important;
}
.tab--main .tab__ico {
  position: absolute;
  top: -22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), #10c6a8);
  color: #fff;
  border: 4px solid var(--surface-solid);
  box-shadow: 0 6px 20px rgba(0, 168, 107, 0.42);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.tab--main .tab__ico svg { width: 26px; height: 26px; }
.tab--main.is-active .tab__ico {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 26px rgba(0, 168, 107, 0.55);
}
.tab--main:active .tab__ico { transform: scale(0.94); }
.tab--main.is-active { color: var(--accent); }

/* Panel başlığında arama ve filtreler */
.panel__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.panel__head { flex-direction: column; align-items: stretch; }
.panel__head .field { margin-bottom: var(--s3); }

/* ══ Konum izni kapısı ════════════════════════════════════════════
   Konum alınamadığında gösteriliyor. Uygulamayı kilitlemiyor —
   konumsuz devam edilebiliyor, arama ve harita gezinmesi çalışıyor. */

.gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-loader) - 1);
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(11, 18, 32, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in var(--dur) var(--ease) both;
}

.gate__card {
  width: 100%;
  max-width: 360px;
  padding: var(--s6) var(--s5) var(--s5);
  border-radius: var(--r-xl);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: gate-in var(--dur-slow) var(--ease-out) both;
}
@keyframes gate-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.gate__ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.gate__ico svg { width: 26px; height: 26px; }

.gate__card h2 { font-size: 1.1rem; margin-bottom: var(--s2); }
.gate__card p {
  font-size: 0.86rem;
  color: var(--text-mid);
  line-height: 1.55;
  margin-bottom: var(--s5);
  text-wrap: pretty;
}
.gate__card .btn + .btn { margin-top: var(--s2); }

/* ══ Alttan açılan panel ══════════════════════════════════════════
   Rota panelini istasyon detayıyla aynı dilde tutuyor: tam ekranı
   kaplamak yerine alttan açılıyor, üstte harita görünür kalıyor. */

.panel--sheet {
  top: auto;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  max-height: min(74vh, 640px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-solid);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  animation: sheet-in var(--dur-slow) var(--ease-out) both;
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.panel__grip {
  padding: var(--s3) 0 var(--s1);
  display: grid;
  place-items: center;
  flex: none;
}
.panel__grip span {
  width: 40px; height: 4px;
  border-radius: var(--r-full);
  background: var(--line-strong);
}

/* Alttan açılan panelde başlık bloğu daha sıkı */
.panel--sheet .panel__head {
  padding-top: 0;
  border-bottom: 0;
}
.panel--sheet .panel__title { margin-bottom: var(--s2); }

@media (min-width: 1024px) {
  /* Masaüstünde yan panelin sağına oturuyor — detay paneliyle aynı yer */
  .panel--sheet {
    display: flex !important;
    left: calc(var(--sidebar-w) + var(--s5));
    right: auto;
    bottom: var(--s5);
    width: 400px;
    max-height: calc(100vh - var(--s10));
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
  }
  .panel--sheet[hidden] { display: none !important; }
  .panel--sheet .panel__grip { display: none; }
}