/* Harita — kendi sunucumuzdan servis edilen PMTiles + Leaflet.
   Yalnız harita bulunan sayfalarda yüklenir (bkz. inc/sepet-ajax.php). */

/* Harita kabı: JS açılmadan önce ve açılamazsa içindeki liste görünür kalır. */
.albim-harita__tuval {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Yedek liste — JS yoksa tek bilgi kaynağı budur. */
.albim-harita__liste {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--a-3);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-2xs);
}
.albim-harita__liste li { display: flex; gap: var(--a-2); align-items: baseline; }
.albim-harita__liste b { font-weight: var(--fw-kalin); }
/* Harita açıldığında yedek liste kaldırılır (JS siler), CSS ile gizlemiyoruz —
   gizli bırakılsa ekran okuyucuda iki kez okunurdu. */

.albim-harita--acik { background: var(--zemin-yuzey); }

/* Leaflet'i temanın diline çeviriyoruz */
.albim-harita .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--zemin-serit);
  font: inherit;
  outline: none;
}
.albim-harita .leaflet-control-attribution {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--zemin-yuzey) 88%, transparent);
  color: var(--renk-soluk);
  font-size: 10px;
  line-height: 1.5;
}
.albim-harita .leaflet-control-attribution a { color: var(--renk-soluk); }
.albim-harita .leaflet-control-zoom a {
  width: 28px; height: 28px; line-height: 28px;
  color: var(--renk-metin);
  background: var(--zemin-yuzey);
  border-color: var(--cizgi);
  font-weight: var(--fw-kalin);
}
.albim-harita .leaflet-control-zoom a:hover { background: var(--zemin-serit); }

/* Parmakla kullanilan cihazlarda buyut: 28x28 dokunma icin kucuk (asgari 44).
   Fare ile kullanilan ekranlarda gorunum degismiyor - orada 28 zaten yeterli
   ve buyutmek haritanin uzerinde gereksiz yer kaplardi. */
@media (pointer: coarse) {
  .albim-harita .leaflet-control-zoom a {
    width: 44px; height: 44px; line-height: 44px;
  }
}
.albim-harita .leaflet-bar { border-radius: var(--kose-kucuk); overflow: hidden; }

/* Duraklar */
.albim-durak-im {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--zemin-yuzey);
  border: 2px solid var(--albim-kirmizi);
  color: var(--albim-kirmizi);
  font-size: 10px;
  font-weight: var(--fw-kalin);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
/*
 * Rota rengi: JS her ime --rota-renk degiskenini veriyor (genel haritada
 * dort tur birbirinden ayrilsin diye). Degisken yoksa varsayilan kirmizi
 * gecerli kalir - tek rotali haritalarda hicbir sey degismiyor.
 *
 * Durum siniflari ASAGIDA ve bunu bilerek eziyor: gecmis/iptal/siradaki
 * durumlari rota renginden daha onemli, o yuzden onlar kazaniyor.
 */
.albim-durak-im { border-color: var(--rota-renk, var(--albim-kirmizi)); }

.albim-durak-im--gecti   { border-color: var(--renk-soluk); color: var(--renk-soluk); }
.albim-durak-im--iptal   { border-color: var(--renk-soluk); color: var(--renk-soluk); text-decoration: line-through; }
.albim-durak-im--siradaki{ background: var(--rota-renk, var(--albim-kirmizi)); border-color: var(--rota-renk, var(--albim-kirmizi)); color: var(--uzeri-kirmizi); }

/* Kamyonun anlık yeri */
.albim-kamyon-im {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--albim-kirmizi);
  color: var(--uzeri-kirmizi);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--albim-kirmizi) 20%, transparent);
}
.albim-kamyon-im::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--albim-kirmizi);
  animation: albim-nabiz 2.4s ease-out infinite;
}
@keyframes albim-nabiz {
  from { transform: scale(0.8); opacity: 0.8; }
  to   { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .albim-kamyon-im::after { animation: none; opacity: 0.35; }
}

/* Baloncuk */
.albim-harita .leaflet-popup-content-wrapper {
  border-radius: var(--kose-kucuk);
  background: var(--zemin-yuzey);
  color: var(--renk-metin);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
}
.albim-harita .leaflet-popup-content { margin: 8px 12px; font-size: var(--fs-2xs); line-height: 1.5; }
.albim-harita .leaflet-popup-tip { background: var(--zemin-yuzey); }
.albim-harita__balon-ad { font-weight: var(--fw-kalin); }

/* Tekerlekle yakınlaştırma kapalıyken gösterilen ipucu */
.albim-harita__ipucu {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: var(--a-3);
  text-align: center;
  background: color-mix(in srgb, var(--zemin-serit) 55%, transparent);
  color: var(--renk-metin);
  font-size: var(--fs-2xs);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.albim-harita__ipucu[data-gorunur="1"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .albim-harita__ipucu { transition: none; } }

/* Harita açılamazsa */
.albim-harita__uyari {
  position: absolute;
  left: var(--a-2); right: var(--a-2); bottom: var(--a-2);
  z-index: 4;
  padding: 6px 9px;
  border-radius: var(--kose-kucuk);
  background: var(--zemin-yuzey);
  border: 1px solid var(--cizgi);
  font-size: var(--fs-2xs);
  color: var(--renk-soluk);
}

/* Sarmalayıcı: harita + altındaki açıklama.
   Açıklamayı haritanın İÇİNE koymuyoruz — Leaflet'in atıf yazısı sağ altta
   duruyor, dar ekranda üst üste biniyorlardı. */
.albim-harita-sarmal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-width: 0;
}
.albim-harita-sarmal > .albim-harita { flex: 1 1 auto; }

.albim-harita__alt {
  margin: 0;
  line-height: 1.5;
}

/* Hero'da açıklama panelin ALTINDA duruyor: panelin içindeki arama ve sonuç
   kartları üstünü örtüyordu, atfın görünür kalması ise zorunlu. */
.albim-khero__sag > .albim-harita__alt { margin-top: 8px; }
.albim-harita__alt a { color: inherit; text-decoration: underline; }

/* ------------------------------------------- rota takvimi: harita görünümü */

.albim-harita-genis .albim-harita { min-height: 460px; }
@media (max-width: 700px) {
  /*
   * Mobilde 60vh = 506 piksel; ölçüldü, ilk ekranda haritanın GÖRÜNEN kısmı
   * 0 piksel oluyordu (harita y=720'de başlıyor) — yani ekranın yarısını
   * ayırdığımız şey hiç görünmüyordu. 300 piksel sabit: harita hâlâ
   * okunaklı, ilk ekranda da bir kısmı görünüyor.
   *
   * vh yerine sabit piksel: 60vh küçük telefonda 400, büyük telefonda 600
   * piksel demek; harita bir içerik parçası, ekran boyuna göre şişmesinin
   * bir gerekçesi yok.
   */
  .albim-harita-genis .albim-harita { min-height: 300px; }
}

.albim-rota-harita-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--a-4);
}
/*
 * Rotalar SATIRDA BİRER. Önce "satırda ikişer" idi (KRAL'ın o günkü
 * isteği); şimdiki istek her rota için bir satır: solda kutu, sağında
 * kendi haritası. Eski gerekçe silinmedi ki biri aynı yolu tekrar
 * denemesin — istek değişti, kural yanlış değildi.
 */

.albim-rota-harita {
  display: flex;
  flex-direction: column;
  gap: var(--a-2);
  padding: var(--a-3);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-buyuk);
  background: var(--zemin-yuzey);
  min-width: 0;
}
.albim-rota-harita__basi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--a-2);
}
/*
 * Mobilde harita KUTUNUN ALTINDA kalıyor, yanına konmuyor.
 * T ölçtü: 390 pikselde yana konsa haritaya 112 piksel kalıyor ve o
 * boyutta harita ~0,76 km gösteriyor — okunacak bir şey kalmıyor.
 * Yükseklik 240'tan 180'e indi: rota başına 60 piksel, 15 rotada 900
 * piksel kazanç, harita hâlâ okunaklı.
 */
.albim-rota-harita .albim-harita { min-height: 180px; }

/* ---------------------------------- geniş ekran: solda kutu, sağda harita

   T'nin ölçüsü: sol kutu 280 piksel sabit, kalan genişlik haritaya.
   Satır 1040 pikselde duruyor — sınırsız bırakılınca harita 986x206
   oluyor, yani 4,79:1; T'nin ifadesiyle "harita değil bant". */
@media (min-width: 800px) {
  .albim-rota-harita {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--a-3);
    row-gap: var(--a-2);
    max-width: 1040px;
    min-height: 260px;
  }

  .albim-rota-harita__basi     { grid-column: 1; grid-row: 1; }
  .albim-rota-harita__duraklar { grid-column: 1; grid-row: 2; }

  .albim-rota-harita .albim-harita {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 226px;
    height: 100%;
  }
}

.albim-rota-harita__duraklar {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-2xs);
}
.albim-rota-harita__duraklar li { display: flex; gap: var(--a-2); align-items: baseline; }
.albim-rota-harita__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--albim-kirmizi);
  color: var(--albim-kirmizi);
  font-size: 10px;
  font-weight: var(--fw-kalin);
}

/* ---------------------------------------------------- mobil taşma düzeltmesi

   .albim-harita temelde `aspect-ratio: 5/3` taşıyor. Yüksekliği ayrıca
   `min-height` ile verilen yerlerde bu ikisi çakışıyor: en-boy oranı,
   yükseklikten bir GENİŞLİK TABANI türetiyor ve kutu daralamıyor. Sonuç,
   390 piksellik telefonda kamyon ana sayfasının 123 piksel yana taşmasıydı.

   Ölçtüm: `min-width: 0` bunu çözmüyor (taban oranın kendisinden geliyor),
   `aspect-ratio: auto` çözüyor — taşma 0'a iniyor, yükseklik değişmiyor.

   Aşağıdaki seçicilerin hepsinde zaten açık bir min-height var, yani
   en-boy oranına ihtiyaç yok. */
.albim-hpanel .albim-harita,
.albim-nerede__sag .albim-harita,
.albim-harita-genis .albim-harita,
.albim-rota-harita .albim-harita,
.albim-profil-izgara .albim-harita {
  aspect-ratio: auto;
  min-width: 0;
}

/* Genel haritanin renk aciklamasi: hangi renk hangi tur. */
.albim-harita-lejant {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-2) var(--a-3);
  margin: 0 0 var(--a-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--renk-govde);
}
.albim-harita-lejant li { display: flex; align-items: center; gap: 6px; }
.albim-harita-lejant__renk {
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}