/*
 * Ana harita (map.html) — 3D haritanin arayuzu: harita tam ekran; geri
 * dugmesi ve arama ustte yuzen kartlarda, Durak/Hat anahtari altinda,
 * konum / zum / pusula / 3D sagda yuvarlak dugmeler, "Bu alanda" hatlari
 * ve durak karti altta.
 *
 * YALNIZCA konum ve gorunum: ogeler, kimlikleri ve JS'in actigi/kapattigi
 * `hidden` siniflari aynen duruyor (mapScreen.js, nearby.js, map.js).
 */

.map-unified-page {
  --hy-ust: calc(env(safe-area-inset-top, 0px) + 12px);
  --hy-satir: 52px;
  --hy-cam: color-mix(in srgb, var(--surface) 90%, transparent);
  --hy-kenar: color-mix(in srgb, var(--border) 75%, transparent);
  --hy-golge: 0 10px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  --hy-sag-kolon: calc(var(--hy-ust) + var(--hy-satir) + 12px);
}

/* Harita tam ekran, her seyin arkasinda. */
.map-unified-page .map-unified-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  padding-bottom: 0;
}

/* --- Ust satir: geri dugmesi + (arama | hat secici | hat basligi) --- */
.map-unified-page .map-unified-toolbar {
  position: fixed;
  top: var(--hy-ust);
  left: 12px;
  right: 12px;
  z-index: 800;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.map-unified-page .map-unified-toolbar > * {
  pointer-events: auto;
}

/* Geri dugmeleri: yuvarlak koseli kare, yalnizca ok (metin ekran okuyucuda kalir). */
.map-unified-page .map-unified-toolbar .map-back {
  position: relative;
  flex-shrink: 0;
  width: var(--hy-satir);
  height: var(--hy-satir);
  margin: 0;
  padding: 0;
  border: 1px solid var(--hy-kenar);
  border-radius: 18px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--hy-golge);
  color: transparent;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
}

.map-unified-page .map-unified-toolbar .map-back::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-left: 2.6px solid var(--text);
  border-bottom: 2.6px solid var(--text);
  border-radius: 1.5px;
  transform: translate(-30%, -50%) rotate(45deg);
}

/* Yakin duraklar modunda baslik gizli; alt baslik (durak sayisi / ipucu)
   anahtarin altinda kucuk bir kart. Hat modunda baslik + alt baslik ust
   satirda kart olur. */
.map-unified-page:not(.map-route-active) .map-toolbar-main {
  position: fixed;
  top: calc(var(--hy-ust) + var(--hy-satir) + 60px);
  left: 12px;
  max-width: calc(100% - 92px);
  padding: 6px 12px;
  border: 1px solid var(--hy-kenar);
  border-radius: 999px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

.map-unified-page:not(.map-route-active) .map-toolbar-main .map-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.map-unified-page:not(.map-route-active) .map-toolbar-main .map-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}

.map-unified-page.map-route-active .map-toolbar-main {
  flex: 1;
  min-width: 0;
  min-height: var(--hy-satir);
  padding: 8px 14px;
  border: 1px solid var(--hy-kenar);
  border-radius: 18px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--hy-golge);
}

/* Konum dugmesi: sag kolonun ilki. */
.map-unified-page .map-unified-toolbar .map-locate-btn {
  position: fixed;
  top: var(--hy-sag-kolon);
  right: 12px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hy-kenar);
  border-radius: 16px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

/* --- Durak arama: ust satirda, geri dugmesinin yaninda --- */
.map-unified-page #nearbySearchBar {
  position: fixed;
  top: var(--hy-ust);
  left: calc(12px + var(--hy-satir) + 10px);
  right: 12px;
  z-index: 790;
  padding: 0;
  background: transparent;
  border: 0;
}

.map-unified-page #nearbySearchBar input {
  height: var(--hy-satir);
  padding: 0 16px 0 46px;
  border: 1px solid var(--hy-kenar);
  border-radius: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
      16px 50% / 20px 20px no-repeat,
    var(--hy-cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--hy-golge);
  font-size: 16px;
}

.map-unified-page #nearbySearchBar input:focus {
  border-color: var(--primary);
  box-shadow: var(--hy-golge), 0 0 0 3px var(--primary-weak);
}

/* --- Durak / Hat anahtari: ust satirin altinda --- */
.map-unified-page #mapModeTabs {
  position: fixed;
  top: calc(var(--hy-ust) + var(--hy-satir) + 10px);
  left: 12px;
  z-index: 780;
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--hy-kenar);
  border-radius: 16px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

.map-unified-page #mapModeTabs.hidden {
  display: none;
}

.map-unified-page #mapModeTabs .chip {
  min-height: 34px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 700;
}

.map-unified-page #mapModeTabs .chip.selected {
  background: var(--primary);
  color: #fff;
}

/* --- Hat secici: anahtarin altinda kayan kart --- */
.map-unified-page #mapRouteSearchBar {
  position: fixed;
  top: calc(var(--hy-ust) + var(--hy-satir) + 60px);
  left: 12px;
  right: 12px;
  z-index: 790;
  max-height: calc(100dvh - var(--hy-ust) - var(--hy-satir) - 60px - var(--map-tab-bar-offset, 80px) - 16px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--hy-kenar);
  border-radius: 20px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--hy-golge);
}

/* Hat modunda baslik kartinin altinda. */
.map-unified-page.map-route-active #mapRouteSearchBar {
  top: calc(var(--hy-ust) + var(--hy-satir) + 10px);
}

/* --- Leaflet dugmeleri (zum, pusula, 3D): sag kolonda konumun altinda --- */
.map-unified-page .map-unified-stage .leaflet-top.leaflet-left {
  top: calc(var(--hy-sag-kolon) + 58px);
  right: 12px;
  left: auto;
}

/* Hat modunda sag kolonun basi Kapat dugmesi; Leaflet dugmeleri altinda. */
.map-unified-page.map-route-active .map-unified-stage .leaflet-top.leaflet-left {
  top: calc(var(--hy-sag-kolon) + 58px);
}

.map-unified-page .map-route-close-btn {
  position: fixed;
  top: var(--hy-sag-kolon);
  right: 12px;
  z-index: 800;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 16px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

.map-unified-page .map-route-close-btn.hidden {
  display: none;
}

.map-unified-page .map-route-close-btn svg {
  width: 18px;
  height: 18px;
  color: var(--text);
}

/* Yazi ekran okuyucuda kalir, gorselde yalnizca carpi. */
.map-unified-page .map-route-close-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hat secici acikken durak sayisi karti onun altinda kalmasin. */
.map-unified-page:has(#mapRouteSearchBar:not(.hidden)) .map-toolbar-main {
  display: none;
}

.map-unified-page .map-unified-stage .leaflet-top.leaflet-left .leaflet-control {
  margin: 0 0 10px;
  float: none;
}

.map-unified-page .map-unified-stage .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid var(--hy-kenar);
  border-radius: 16px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

.map-unified-page .map-unified-stage .leaflet-control-zoom a {
  width: 46px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--text);
  line-height: 42px;
}

.map-unified-page .map-unified-stage .leaflet-control-zoom-in {
  border-bottom: 1px solid var(--hy-kenar) !important;
}

.map-unified-page .map-unified-stage .map-compass .map-compass-btn {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border-color: var(--hy-kenar);
  background: var(--hy-cam);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--hy-golge);
}

/* Atif yazisi alt cubugun arkasinda kalmasin. */
.map-unified-page .map-unified-stage .leaflet-bottom {
  bottom: var(--map-tab-bar-offset, 80px);
}

/* --- "Bu alanda" hatlari: altta, alt cubugun ustunde --- */
.map-unified-page .nearby-area-routes {
  top: auto;
  bottom: calc(var(--map-tab-bar-offset, 80px) + 12px);
  border-color: var(--hy-kenar);
  border-radius: 18px;
  background: var(--hy-cam);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--hy-golge);
}

/* --- Durak karti: 3D haritadaki alt panel gibi --- */
.map-unified-page .map-unified-stage .nearby-stop-popup-backdrop {
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.map-unified-page .map-unified-stage .nearby-stop-popup-panel {
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}