/* ============================================================================
   İzmirim — Toplu Ulaşım sayfaları bileşen stilleri (BIZYEN-646)
   Yalnızca ulaşım sayfalarında yüklenir. Mevcut ic-sayfa.css bileşenlerini
   (chip, tabs, modal, card, badge, select, bos-durum, snackbar) tamamlar.
   ========================================================================== */

/* Yuvarlak hat no rozeti (mobildeki mavi daire) */
.ulasim-hat-no {
  flex-shrink: 0;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--color-primary-surface, #E8F1FC);
  color: var(--color-primary, #1565C0);
  font-family: "Izmir-Bold", sans-serif;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mod seçim kartı ikonu (hub) */
.ulasim-mod-ikon svg { width: 26px; height: 26px; }

/* Material Icons sprite (Views/Ulasim/_UlasimIkonlar.cshtml) — mobil uygulamayla aynı glyph
   seti (test bulgusu J7). Dolu glyph, renk currentColor; boyut bağlamdaki `… svg` kurallarından
   (ic-duyuru-ikon, ulasim-fav-btn, ulasim-yenile-btn, ulasim-sefer-ikon, ic-bos-durum-icon…),
   varsayılan 1em. Eski inline SVG'lerdeki width/height öznitelikleri burada sınıfla karşılanır. */
.uik { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.ulasim-durak-ok .uik { width: 18px; height: 18px; }
.ulasim-durak-sira .uik { width: 16px; height: 16px; }
.bizizmir-blue-bg-button .uik { width: 18px; height: 18px; }

/* Gidiş / Dönüş pill grubu — .ic-liste-chip üzerine ince ekleme */
.ulasim-yon-toggle { display: inline-flex; gap: 8px; margin: 4px 0 18px; }
.ulasim-yon-toggle .ic-liste-chip { min-width: 108px; justify-content: center; }

/* Sefer saatleri — 3 kolon (Hafta İçi / Cumartesi / Pazar) */
.ulasim-saatler-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Yükleniyor/hata durumları tek öğe olarak basılır — kolona sıkışmasın */
.ulasim-saatler-grid > .ulasim-hata,
.ulasim-saatler-grid > .ic-liste-count { grid-column: 1 / -1; }
.ulasim-saatler-kol {
  border: 1px solid var(--color-border-subtle, #E4EAF2);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ulasim-saatler-baslik {
  padding: 10px 12px;
  font-family: "Izmir-Semibold", sans-serif;
  color: var(--color-primary, #1565C0);
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle, #E4EAF2);
  background: var(--color-primary-surface, #E8F1FC);
}
/* position: relative — satırlardaki ekran okuyucu metinleri (.visually-hidden, position: absolute) listeye göre
   konumlansın ve listenin kaydırma alanında kalsın; yoksa görünmeyen alt satırların metinleri sayfayı footer'ın altına
   uzatıyordu (21.10.2026: hat 6'da masaüstünde footer altında 339 px boşluk). */
.ulasim-saatler-liste { position: relative; list-style: none; margin: 0; padding: 6px 0; max-height: 460px; overflow-y: auto; }
.ulasim-saatler-liste li {
  padding: 7px 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #1B2438);
  border-bottom: 1px solid #f2f5f9;
}
.ulasim-saatler-liste li:last-child { border-bottom: 0; }
/* Sütun klavyeyle odaklanıp kaydırılabilir (tabindex); kolonun overflow'u dış çerçeveyi kestiği için içe çizilir. */
.ulasim-saatler-liste:focus-visible { outline: 2px solid var(--color-primary, #1565C0); outline-offset: -2px; }
/* Sıradaki sefer (otobüs hattı saatleri; bugünün sütunu, 21.10.2026): kalın */
.ulasim-saatler-liste li.ulasim-saatler-siradaki { font-family: "Izmir-Bold", sans-serif; }
/* Saatin yanında araç özellikleri (engelli erişimli, bisiklet aparatlı; 21.10.2026). Hizalı yuva: saat ve ikon yuvası
   birlikte ortalanır, yuva ikonsuz satırda da yer tutar; böylece tüm satırlarda saatler aynı hizada kalır. Saat sütunu
   em'dir (A-/A/A+ yazı boyutuyla büyür). */
.ulasim-saatler-liste li {
  display: grid; grid-template-columns: 3.2em 34px; justify-content: center; align-items: center;
  column-gap: 8px; text-align: left;
}
.ulasim-saat-ozellikler { display: inline-flex; gap: 3px; color: var(--color-text-muted, #8C95A6); }
.ulasim-saat-ozellikler .uik { width: 14px; height: 14px; }

/* Sefer satırı (vapur/izban): 07:40 → 07:55 */
.ulasim-sefer-satiri {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border-subtle, #E4EAF2);
}
.ulasim-sefer-satiri:last-child { border-bottom: 0; }
.ulasim-sefer-ikon { color: var(--color-primary, #1565C0); flex-shrink: 0; display: inline-flex; }
.ulasim-sefer-ikon svg { width: 26px; height: 26px; }
.ulasim-sefer-saat {
  font-family: "Izmir-Semibold", sans-serif;
  font-size: 18px;
  color: var(--color-text, #1B2438);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ulasim-sefer-saat .ok { color: var(--color-text-muted, #8C95A6); }
/* Sıradaki sefer (vapur; seçilen gün bugünse, 21.10.2026): kalın */
.ulasim-sefer-satiri--siradaki .ulasim-sefer-saat { font-family: "Izmir-Bold", sans-serif; }
.ulasim-sefer-alt { font-size: 13px; color: var(--color-text-secondary, #546178); margin-top: 2px; }

/* Sıklık satırı (tramvay/metro): 06:00 - 06:30 ... Her 7.5 dk */
.ulasim-siklik-satiri {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border-subtle, #E4EAF2);
}
.ulasim-siklik-satiri:last-child { border-bottom: 0; }
.ulasim-siklik-saat {
  font-family: "Izmir-Semibold", sans-serif;
  color: var(--color-text, #1B2438);
  font-variant-numeric: tabular-nums;
}
.ulasim-siklik-aralik { margin-left: auto; color: var(--color-text-secondary, #546178); font-size: 14px; }

/* Durak satırı (hat detay Duraklar) */
.ulasim-durak-satiri {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle, #E4EAF2);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--color-text, #1B2438);
}
.ulasim-durak-satiri:last-child { border-bottom: 0; }
.ulasim-durak-satiri:hover { background: var(--color-primary-surface, #E8F1FC); }
.ulasim-durak-sira {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-primary-surface, #E8F1FC);
  color: var(--color-primary, #1565C0);
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ulasim-durak-ad { flex: 1; }
/* Durak no adla aynı satırda, boşlukla ayrılır (durak arama, favoriler; 21.10.2026): "KonakDurak No: 10036" diye
   boşluksuz birleşiyordu. Numara bölünmez; ad uzunsa numara alt satıra bütün olarak iner. */
.ulasim-durak-ad .ulasim-sefer-alt { margin-left: 4px; white-space: nowrap; } /* + işaretlemedeki boşluk karakteri */
.ulasim-durak-ok { color: var(--color-text-muted, #8C95A6); flex-shrink: 0; }

/* Yaklaşan otobüsler modalı satırı — mobil pariteli düzen (test bulgusu J2):
   rozet hat no · 1. satır hat adı · 2. satır "X durak uzakta" (yalnız sayısal değerde)
   · sağda erişilebilirlik / bisiklet aparatı ikonları. span'lar inline kaldığında ad ile
   uzaklık metni boşluksuz birleşiyordu (2. tur düzeltmesi). */
.ulasim-yaklasan-satiri {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border-subtle, #E4EAF2);
}
.ulasim-yaklasan-satiri:last-child { border-bottom: 0; }
.ulasim-yaklasan-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ulasim-yaklasan-hatadi { display: block; font-size: 14px; color: var(--color-text, #1B2438); }
.ulasim-yaklasan-uzaklik { display: block; font-size: 13px; color: var(--color-text-secondary, #546178); margin-top: 2px; }
.ulasim-yaklasan-ozellikler { display: inline-flex; gap: 8px; margin-left: auto; flex-shrink: 0; color: var(--color-text-secondary, #546178); }
.ulasim-ozellik { display: inline-flex; }
.ulasim-ozellik .uik { width: 18px; height: 18px; }
/* Modal içi küçük hat rozeti (eski inline style yerine) */
.ulasim-hat-no--kucuk { min-width: 40px; height: 40px; font-size: 15px; }

/* From/To seçim formu (vapur/izban) */
.ulasim-secim-form { display: grid; gap: 14px; margin-bottom: 22px; }
.ulasim-secim-form .bizizmir-blue-bg-button { width: 100%; }

/* Sayfa üstü bağlantı çipleri (Durak Ara / Favorilerim) — chip sınıfı buton
   varsayımlı, <a> kullanımında alt çizgi/renk sıfırlanır */
a.ic-liste-chip { text-decoration: none; display: inline-flex; align-items: center; }

/* Favori yıldız butonu (hat listesi, durak satırları, modallar) */
.ulasim-fav-btn {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted, #8C95A6);
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.ulasim-fav-btn:hover { background: var(--color-primary-surface, #E8F1FC); }
.ulasim-fav-btn.aktif { color: #F59E0B; }
.ulasim-fav-btn:disabled { opacity: .5; cursor: default; }
.ulasim-fav-btn svg { width: 22px; height: 22px; }

/* Modal başlık araçları (yenile + favori — mobildeki durak alt sayfası paritesi) */
.ulasim-modal-araclar { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.ulasim-yenile-btn {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-primary, #1565C0);
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.ulasim-yenile-btn:hover { background: var(--color-primary-surface, #E8F1FC); }
.ulasim-yenile-btn:disabled { opacity: .5; cursor: default; }
.ulasim-yenile-btn svg { width: 20px; height: 20px; }
.ulasim-yenile-btn.donuyor svg { animation: ulasim-donme .8s linear infinite; }
@keyframes ulasim-donme { to { transform: rotate(360deg); } }

/* Servis hatası + tekrar dene (test bulgusu: kalıcı "Yükleniyor…" kalmasın) */
.ulasim-hata { padding: 18px 12px; text-align: center; color: var(--color-text-secondary, #546178); }
.ulasim-hata p { margin: 0 0 12px; }
.ulasim-tekrar-btn {
  border: 1px solid var(--color-primary, #1565C0);
  background: none;
  color: var(--color-primary, #1565C0);
  border-radius: 10px;
  padding: 7px 18px;
  cursor: pointer;
  font-family: "Izmir-Semibold", sans-serif;
}
.ulasim-tekrar-btn:hover { background: var(--color-primary-surface, #E8F1FC); }

/* Duraktan geçen hatlar — modal içi çip listesi */
.ulasim-gecen-hatlar { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.ulasim-gecen-hat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border-subtle, #E4EAF2);
  border-radius: 10px;
  color: var(--color-text, #1B2438);
  text-decoration: none;
  font-size: 13px;
}
.ulasim-gecen-hat:hover { background: var(--color-primary-surface, #E8F1FC); }
.ulasim-gecen-hat .no {
  font-family: "Izmir-Bold", sans-serif;
  color: var(--color-primary, #1565C0);
}
.ulasim-modal-bolum-baslik {
  font-family: "Izmir-Semibold", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-secondary, #546178);
  margin: 14px 0 4px;
}

/* Hat detay — Harita sekmesi (OL 10; test bulgusu J5). Yükseklik AÇIKÇA verilir: pane gizliyken
   OL tuvali 0x0 olur, bu yüzden harita ilk shown.bs.tab'da kurulur (OtobusHat.cshtml). */
.ulasim-harita {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 280px;
  border: 1px solid var(--color-border-subtle, #E4EAF2);
  border-radius: 14px;
  overflow: hidden;
  background: #EEF2F9;
  /* OL kontrolleri marka rengi (ol.css --ol-* değişkenleri) */
  --ol-brand-color: var(--color-primary, #1565C0);
  --ol-background-color: #fff;
}
.ulasim-harita:focus-visible { outline: 3px solid var(--color-primary, #1565C0); outline-offset: 2px; }
.ulasim-harita[aria-busy="true"]::after {
  content: "Yükleniyor…";
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .6);
  color: var(--color-text-secondary, #546178);
  pointer-events: none;
}
.ulasim-harita-aciklama { margin: 10px 0 0; }
/* Sözde tam ekran (position:fixed). z-index 1040: Bootstrap modal (1055) ve backdrop (1050) ÜSTTE
   kalır → pin tıklamasıyla açılan yaklaşan otobüsler modalı görünür; site başlığı/menüsü ALTTA kalır.
   İki sınıflı seçici: alttaki @media height kuralını yener. */
.ulasim-harita.ulasim-harita--tam-ekran {
  position: fixed; inset: 0; z-index: 1040;
  width: auto; height: auto; min-height: 0;
  border: 0; border-radius: 0;
}
body.ulasim-harita-tam-ekran-acik { overflow: hidden; }

/* Harita üstü düğmeler: "Konumum" (zoom düğmelerinin altında) ve "Tam ekran" (sağ üst) */
.ulasim-harita .ulasim-harita-konum-kap { top: 4.8em; left: .5em; }
.ulasim-harita .ulasim-harita-tamekran-kap { top: .5em; right: .5em; }
.ulasim-harita .ulasim-harita-konum,
.ulasim-harita .ulasim-harita-tamekran {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; margin: 1px; padding: 0;
  border: 0; border-radius: 4px;
  background: #fff; color: var(--color-primary, #1565C0);
  cursor: pointer;
}
.ulasim-harita .ulasim-harita-konum:hover,
.ulasim-harita .ulasim-harita-tamekran:hover { background: var(--color-primary-surface, #E8F1FC); }
.ulasim-harita .ulasim-harita-konum[aria-pressed="true"] { background: var(--color-primary, #1565C0); color: #fff; }
.ulasim-harita .ulasim-harita-konum .uik,
.ulasim-harita .ulasim-harita-tamekran .uik { width: 18px; height: 18px; }

@media (max-width: 576px) {
  .ulasim-harita { height: 340px; }
  .ulasim-saatler-grid { gap: 6px; }
  .ulasim-saatler-baslik { padding: 8px 4px; font-size: 13.5px; }
  .ulasim-saatler-liste li { padding: 6px 4px; }
  /* Dar sütunda yuva ve ikonlar küçülür (390 px'te üç sütun ~110 px). */
  .ulasim-saatler-liste li { grid-template-columns: 3.1em 26px; column-gap: 4px; }
  .ulasim-saat-ozellikler { gap: 1px; }
  .ulasim-saat-ozellikler .uik { width: 12px; height: 12px; }
  .ulasim-sefer-saat { font-size: 16px; }
}