/* hat.css - şehir içi hat / hat durağı / hat dizini sayfaları (hat.php, hat-duragi.php, hatlar.php)
   durak.css'in üstüne yüklenir; kart, başlık, rozet, çip, SSS stilleri oradan gelir. */

.tl-hero .dk-hero__lead a { color: inherit; text-decoration: underline; }
.tl-hero__head { display: flex; align-items: center; gap: 14px; }
.tl-hero__badge { flex: none; min-width: 52px; height: 52px; padding: 0 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; }
.tl-badge { min-width: 38px; width: auto; padding: 0 6px; border-radius: 10px; font-size: .8rem; }

/* yön blokları */
.tl-dir + .tl-dir { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E3E9F0; }
.tl-dir__title { margin: 14px 0 2px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.tl-dir__title small { font-weight: 500; color: var(--ink-3); }
.tl-sub { margin: 16px 0 10px; font-size: 1rem; font-weight: 700; color: var(--ink); }

/* gün sekmesi (details) + saat tablosu */
.tl-day { margin-top: 10px; border: 1px solid #E3E9F0; border-radius: 10px; background: var(--surface); }
.tl-day > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 14px; cursor: pointer; list-style: none; }
.tl-day > summary::-webkit-details-marker { display: none; }
.tl-day > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); align-self: center; transition: transform .15s; }
.tl-day[open] > summary::after { transform: rotate(-135deg); }
.tl-day > summary span { color: var(--ink-3); font-size: .9rem; }
.tl-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tl-grid th { width: 46px; padding: 6px 10px; text-align: left; vertical-align: top; font-weight: 800; color: var(--navy); border-top: 1px solid #EEF2F6; }
.tl-grid td { padding: 6px 10px 6px 0; border-top: 1px solid #EEF2F6; }
.tl-grid td span { display: inline-block; min-width: 2.2em; margin: 0 4px 2px 0; color: var(--ink-2); }
.tl-sched { margin: 0; padding: 0 14px 12px; color: var(--ink-2); }

/* durak listesi: dikey çizgi + nokta */
.tl-stops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.tl-stops-grid .tl-dir + .tl-dir { margin-top: 0; padding-top: 0; border-top: 0; }
.tl-stops { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: s; }
.tl-stops li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 0 7px 26px; }
.tl-stops li::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 3px; background: var(--tl-color, var(--navy)); opacity: .35; }
.tl-stops li::after { content: ''; position: absolute; left: 3px; top: 50%; width: 11px; height: 11px; margin-top: -6px; box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 3px solid var(--tl-color, var(--navy)); }
.tl-stops li:first-child::before { top: 50%; }
.tl-stops li:last-child::before { bottom: 50%; }
.tl-stops li:first-child::after, .tl-stops li:last-child::after { background: var(--tl-color, var(--navy)); }
.tl-stops a { color: var(--ink); text-decoration: none; }
.tl-stops a:hover, .tl-stops a:focus-visible { text-decoration: underline; color: var(--car); }
.tl-stops small { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* hat listesi + filtre */
.dk-route-card__text small { display: block; color: var(--ink-3); font-weight: 500; }
.tl-filter { display: flex; flex-direction: column; gap: 6px; }
.tl-filter label { font-weight: 700; color: var(--ink); }
.tl-filter input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; border: 1px solid #CBD5E1; border-radius: 10px; background: var(--surface); }
.tl-filter input:focus-visible { outline: 2px solid var(--car); outline-offset: 1px; }
.tl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.dk-h2 small { font-weight: 500; color: var(--ink-3); }

@media (max-width: 760px) {
  .tl-hero__badge { min-width: 44px; height: 44px; font-size: 1rem; }
  .tl-grid th { width: 36px; padding: 6px; }
}

/* (2026-10-19) ek / okul / ara seferler */
.tl-extra { margin-top: 18px; }
.tl-extra__list { list-style: none; margin: 0; padding: 0 14px 12px; }
.tl-extra__list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 7px 0; border-top: 1px solid #EEF2F6; font-size: .92rem; }
.tl-extra__list strong { font-weight: 600; color: var(--ink); }
.tl-extra__list span { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* (2026-10-19) sefer saatleri: yönler yan yana (Gidiş | Dönüş), her yönde günler sütun, saat "08:00", iç kaydırma yok */
.tl-dir__tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: var(--navy); color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .02em; vertical-align: 2px; }
.tl-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 12px; align-items: start; }
.tl-tt { border: 1px solid #E3E9F0; border-radius: 10px; overflow: hidden; background: var(--surface); }
.tl-tt__title { margin: 0; padding: 14px 12px 12px; background: #FDD535; color: #1B1B1B; text-align: center; font-size: .98rem; font-weight: 800; letter-spacing: .01em; }
.tl-tt__title small { display: block; margin-top: 3px; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: #4A4A3A; }
.tl-tt__title .tl-dir__tag { background: rgba(0,0,0,.78); }
.tl-week { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.tl-week th { padding: 11px 6px; background: #F4F5F7; border-bottom: 1px solid #E3E9F0; font-size: .92rem; font-weight: 600; color: var(--ink-3); text-align: center; vertical-align: top; }
.tl-week th + th, .tl-week td + td { border-left: 1px solid #EEF1F5; }
.tl-week th small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 500; color: var(--ink-3); }
.tl-week th.is-today { background: #E6EBF1; color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px 0 var(--navy); }
.tl-week td { padding: 9px 6px; border-top: 1px solid #F1F3F6; text-align: center; font-weight: 600; color: var(--ink); }
.tl-week td.is-past { color: var(--ink-3); opacity: .45; font-weight: 400; }
.tl-week td.is-next { background: #E8F1FB; color: var(--navy); font-weight: 800; box-shadow: inset 3px 0 0 var(--navy); }
.tl-week td.tl-sched { vertical-align: top; font-size: .85rem; font-weight: 500; color: var(--ink-2); }

@media (max-width: 480px) {
  .tl-tables { grid-template-columns: 1fr; }
  .tl-week th { padding: 9px 3px; font-size: .84rem; }
  .tl-week th small { display: none; }
  .tl-week td { padding: 8px 3px; }
}

/* (2026-10-19) duraklar: saat tablosuyla aynı şablon + yön başına güzergâh haritası */
.tl-map { height: 260px; background: #E9EEF3; border-bottom: 1px solid #E3E9F0; }
.tl-map.is-failed { display: none; }
.tl-stoplist { list-style: none; margin: 0; padding: 0; }
.tl-stoplist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.tl-stoplist li + li { border-top: 1px solid #F1F3F6; }
.tl-stoplist__no { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--tl-color, var(--navy)); background: #fff; color: var(--ink); font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-stoplist li:first-child .tl-stoplist__no, .tl-stoplist li:last-child .tl-stoplist__no { background: var(--tl-color, var(--navy)); color: #fff; }
.tl-stoplist__name { flex: 1; min-width: 0; color: var(--ink); }
.tl-stoplist a { color: var(--ink); text-decoration: none; }
.tl-stoplist a:hover, .tl-stoplist a:focus-visible { text-decoration: underline; color: var(--car); }
.tl-stoplist small { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* (2026-10-21) kendi sayfası olmayan durak: düğme + açılır bilgi kutusu (js/hat.js 6) */
.tl-stoplist li { flex-wrap: wrap; }
.tl-sb { padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.tl-sb:hover, .tl-sb:focus-visible, .tl-sb[aria-expanded="true"] { color: var(--car); text-decoration-color: var(--car); }
.tl-sb:focus-visible { outline: 2px solid var(--car); outline-offset: 2px; border-radius: 3px; }
.tl-sinfo { flex: 1 0 100%; box-sizing: border-box; margin: 6px 0 2px 36px; padding: 10px 12px; background: #F4F7FB; border: 1px solid #E3E9F0; border-radius: 10px; font-size: .88rem; }
.tl-sinfo p { margin: 0 0 8px; }
.tl-sinfo__h { font-weight: 700; color: var(--ink-2); }
.tl-sinfo__lines { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-sinfo__code { display: inline-block; min-width: 34px; padding: 3px 8px; border-radius: 6px; background: var(--navy); color: #fff !important; font-weight: 700; font-size: .8rem; text-align: center; text-decoration: none !important; }
a.tl-sinfo__code:hover, a.tl-sinfo__code:focus-visible { filter: brightness(1.15); }
span.tl-sinfo__code { opacity: .75; }
.tl-sinfo__near a { color: var(--car); font-weight: 600; }
.tl-sinfo__near small { color: var(--ink-3); }
.tl-sinfo__map { font: inherit; font-weight: 600; font-size: .84rem; color: var(--car); background: #fff; border: 1px solid var(--car); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
@media (max-width: 480px) { .tl-sinfo { margin-left: 0; } }
@media (max-width: 480px) { .tl-map { height: 220px; } }

/* (2026-10-19) canlı konum: "Otobüsüm nerede?" */
.tl-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid #E3E9F0; border-radius: 10px; background: #F7FAFC; }
.tl-live__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.tl-live__btn small { font-weight: 500; opacity: .8; }
.tl-live__btn:focus-visible { outline: 2px solid var(--car); outline-offset: 2px; }
.tl-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #9FB3C8; }
.tl-live.is-on .tl-live__dot { background: #2ECC71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: tl-pulse 1.6s infinite; }
.tl-live.is-loading .tl-live__btn { opacity: .75; cursor: progress; }
.tl-live__status { flex: 1 1 260px; margin: 0; font-size: .86rem; color: var(--ink-2); }
@keyframes tl-pulse { 70% { box-shadow: 0 0 0 8px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
@media (prefers-reduced-motion: reduce) { .tl-live.is-on .tl-live__dot { animation: none; } }
.tl-bus span { display: inline-block; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 6px; background: #2ECC71; border: 2px solid #fff; color: #0B2545;
  font: 700 11px/1.3 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.tl-bus span::before { content: '\1F68C\00A0'; }
.tl-stoplist li.is-bus { background: #EAFBF1; }
.tl-busflag { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 5px; background: #2ECC71; color: #0B2545; font-size: .72rem; font-weight: 700; vertical-align: 1px; }

/* (2026-10-19) durak: yaklaşan seferler panosu */
.tl-board { margin-top: 10px; border: 1px solid #E3E9F0; border-radius: 10px; overflow: hidden; background: var(--surface); }
.tl-board__empty { margin: 0; padding: 16px; color: var(--ink-3); text-align: center; }
.tl-board__list { list-style: none; margin: 0; padding: 0; }
.tl-board__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.tl-board__row + .tl-board__row { border-top: 1px solid #F1F3F6; }
.tl-board__code { flex: none; min-width: 52px; padding: 6px 8px; border-radius: 8px; color: #fff; font-weight: 800; text-align: center; text-decoration: none; font-size: .95rem; }
.tl-board__code:focus-visible { outline: 2px solid var(--car); outline-offset: 2px; }
.tl-board__dir { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-board__dir strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-board__dir small { color: var(--ink-3); font-size: .8rem; }
.tl-board__eta { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.tl-board__eta strong { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.tl-board__eta small { color: var(--ink-3); font-size: .78rem; }
.tl-board__row.is-soon .tl-board__eta strong { color: #1E9E57; }
.tl-board__more { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid #E3E9F0; background: #F7FAFC; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }

/* (2026-10-19, 130A) sefer işaretleri + "Sefer yok" sütunu */
.tl-mk { font-size: .72rem; font-weight: 700; color: var(--car, #C0392B); vertical-align: 1px; white-space: nowrap; }
.tl-week td.tl-none { vertical-align: top; padding-top: 14px; color: var(--ink-3); font-weight: 500; font-size: .88rem; }
.tl-legend { list-style: none; margin: 0; padding: 8px 12px 10px; border-top: 1px solid #E3E9F0; font-size: .82rem; color: var(--ink-2); }
.tl-legend li + li { margin-top: 3px; }

/* (2026-10-19) durak sayfası: bilgi tablosu + konum haritası, hatlar tablosu (dk-ltab: durak.css) */
.tl-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; align-items: start; }
.tl-kv { width: 100%; border-collapse: collapse; border: 1px solid #E3E9F0; border-radius: 10px; overflow: hidden; font-size: .92rem; }
.tl-kv th { width: 38%; padding: 10px 12px; background: #F4F6F9; text-align: left; font-weight: 600; color: var(--ink-3); vertical-align: top; border-top: 1px solid #E3E9F0; }
.tl-kv td { padding: 10px 12px; color: var(--ink); border-top: 1px solid #E3E9F0; }
.tl-kv tr:first-child th, .tl-kv tr:first-child td { border-top: 0; }
.tl-kv__mono { font-variant-numeric: tabular-nums; }
.tl-kv__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .84rem; }
.tl-kv__links a { color: var(--car); font-weight: 600; }
.tl-map--stop { height: 100%; min-height: 240px; border: 1px solid #E3E9F0; border-radius: 10px; }
.tl-stab__dirs { min-width: 0; }
.tl-stab__dir { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.tl-stab__dir + .tl-stab__dir { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #E3E9F0; }
.tl-stab__to { color: var(--ink); font-weight: 500; }
.tl-stab__t { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: right; }
.tl-stab__t small { display: block; font-weight: 500; }
@media (max-width: 720px) { .tl-info { grid-template-columns: 1fr; } .tl-map--stop { min-height: 220px; } }
@media (max-width: 620px) {
  .tl-stab tr { grid-template-columns: 58px 1fr; grid-template-areas: "line route" "line dirs"; }
  .tl-stab .tl-stab__dirs { grid-area: dirs; margin-top: 6px; }
}
/* yama_2026-10-29b: işletmeci logoları */
.tl-h1{display:flex;align-items:center;gap:.28em;flex-wrap:wrap}
.tl-oplogo{display:inline-block;flex:none;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-sizing:border-box;width:40px;height:40px;margin-right:10px}
.tl-oplogo--h1{width:.95em;height:.95em;min-width:44px;min-height:44px;border-radius:.2em;padding:.08em;margin-right:.1em}


/* 2026-10-31s mobil taşma: hat durağı kartları + yön seçici */
.dk-main { overflow-x: clip; }
.tl-hcards, .tl-hcard, .tl-hcard__dirs, .tl-hcard__line { min-width: 0; max-width: 100%; }
.tl-hcard__dir { min-width: 0; }
.tl-hcard__to { overflow-wrap: anywhere; }
.tl-hcard__t { min-width: 0; }
.tl-hcard__t small { white-space: normal; overflow-wrap: anywhere; }
.tl-dg, .tl-dg__sec, .tl-dg__chips { min-width: 0; max-width: 100%; }
.tl-dg__chip { max-width: 100%; box-sizing: border-box; }
.tl-dg__chip span { min-width: 0; }
.tl-dg__chip b, .tl-dg__chip small { overflow-wrap: anywhere; }
.tl-dg__h span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .tl-hcard { grid-template-columns: minmax(0, 1fr); }
  .tl-hcard__dir { gap: 10px; }
  .tl-hcard__t { flex: 0 1 44%; }
  .tl-dg__chips { flex-direction: column; }
  .tl-dg__chip { width: 100%; }
}