/*
 * Hat panosu: ana sayfa ("Hatlar ve canlı durum") ve Hatlar sayfası aynı bileşeni kullanır.
 * Numara rozeti durak tabelası gibi halkadır; rakamlar ulaşım tabelası yazı tipiyle yazılır
 * (indirilmez: Windows'ta Bahnschrift, Apple cihazlarda DIN Alternate hazır gelir).
 */

/* ===== Hat panosu (Hatlar ve canlı durum) ===== */
.line-board__op--belediye { --op: #1d3d70; }
.line-board__op--minibus-koop { --op: #0b6b53; }
.line-board__op--ozel-halk { --op: #c2740f; }
.line-board__head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 1.5rem; margin-bottom: 1.75rem;
}
.line-board__summary { margin-top: 0.5rem; color: #64748b; font-size: 0.95rem; }
.line-board__cta {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem;
    border: 2px solid #0d1b42; border-radius: 999px; color: #0d1b42;
    font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s;
}
.line-board__cta:hover { background: #0d1b42; color: #fff; }
.line-board__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.line-board__chips { display: flex; gap: 0.5rem; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.line-board__chip {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.875rem;
    border: 1px solid #dcecf1; border-radius: 999px; background: #fff; color: #475569;
    font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.line-board__chip b { color: #94a3b8; font-weight: 700; }
.line-board__chip[aria-pressed="true"] { border-color: #0d1b42; background: #0d1b42; color: #fff; }
.line-board__chip[aria-pressed="true"] b { color: #74d2da; }
.line-board__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--op); }
.line-board__search { position: relative; flex: 1 1 260px; max-width: 380px; margin-left: auto; }
.line-board__search-icon {
    position: absolute; left: 14px; top: 50%; width: 18px; height: 18px;
    transform: translateY(-50%); color: #94a3b8; pointer-events: none;
}
.line-board__search input {
    width: 100%; min-height: 44px; padding: 0 14px 0 42px; border: 1px solid #dcecf1;
    border-radius: 999px; background: #fff; color: #0d1b42; font-size: 0.92rem;
}
@media (max-width: 640px) { .line-board__search { max-width: none; margin-left: 0; flex-basis: 100%; } }
.line-board__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 1rem;
    margin: 0; padding: 0; list-style: none;
}
@media (max-width: 900px) { .line-board__list { grid-template-columns: 1fr; } }
.line-board__row {
    display: flex; align-items: center; gap: 1rem; height: 100%; padding: 14px 16px 14px 14px;
    border: 1px solid #dcecf1; border-radius: 1rem; background: #fff;
    box-shadow: 0 2px 8px -2px rgba(23, 43, 99, 0.08);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.line-board__row:hover {
    border-color: #74d2da; transform: translateY(-1px);
    box-shadow: 0 4px 16px -4px rgba(23, 43, 99, 0.12), 0 2px 4px -2px rgba(23, 43, 99, 0.06);
}
.line-board__row:focus-visible,
.line-board__chip:focus-visible,
.line-board__cta:focus-visible,
.line-board__search input:focus-visible { outline: 3px solid rgba(36, 79, 134, 0.45); outline-offset: 2px; }
/* Hat numarası: durak tabelası gibi halka; rakamlar ulaşım tabelası yazı tipiyle
   (indirilmez: Windows'ta Bahnschrift, Apple cihazlarda DIN Alternate hazır gelir). */
.line-board__no {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px;
    border: 4px solid var(--op); border-radius: 50%; background: #fff; color: #0d1b42;
    font-family: Bahnschrift, "DIN Alternate", "DIN Condensed", "sans-serif-condensed", "Arial Narrow", system-ui, sans-serif;
    font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.line-board__main { flex: 1; min-width: 0; }
.line-board__name {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    color: #0d1b42; font-size: 1.02rem; font-weight: 800; line-height: 1.25;
}
.line-board__name .line-operator-pill { padding: 3px 8px; font-size: 0.66rem; }
.line-board__route {
    position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 10px; row-gap: 3px; margin-top: 8px; color: #475569; font-size: 0.84rem; line-height: 1.3;
}
.line-board__route::before {
    content: ""; position: absolute; left: 4px; top: .65em; bottom: .65em; width: 2px; background: #dcecf1;
}
.line-board__dot {
    position: relative; z-index: 1; align-self: center; width: 10px; height: 10px;
    border: 2px solid #2f96a4; border-radius: 50%; background: #fff;
}
.line-board__dot--end { background: #2f96a4; }
.line-board__stop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-board__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.line-board__stops { color: #64748b; font-size: 0.76rem; font-weight: 600; }
.line-board__live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.line-board__live--on { color: #15803d; }
.line-board__live--off { color: #94a3b8; font-weight: 600; }
.line-board__live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.line-board__live--on .line-board__live-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; background: currentColor;
    animation: line-board-pulse 1.8s ease-out infinite;
}
@keyframes line-board-pulse { from { transform: scale(.6); opacity: .45; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .line-board__live--on .line-board__live-dot::after { animation: none; } }
.line-board__chev { width: 18px; height: 18px; flex-shrink: 0; color: #94a3b8; transition: transform .15s, color .15s; }
.line-board__row:hover .line-board__chev { color: #244f86; transform: translateX(3px); }
.line-board__empty {
    padding: 2rem; border: 1px dashed #dcecf1; border-radius: 1rem; color: #64748b; text-align: center;
}
.line-board__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Sınıfların display kuralı hidden özniteliğini ezmesin. */
.line-board__list > li[hidden], .line-board__live[hidden], [data-board-live][hidden], .line-board__empty[hidden] { display: none !important; }
@media (max-width: 520px) {
    .line-board__row { flex-wrap: wrap; gap: 12px; }
    .line-board__main { flex-basis: calc(100% - 80px); }
    .line-board__side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 62px; }
    .line-board__chev { display: none; }
}

/* Belediye dışı işletmeci etiketi */
.line-operator-pill {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.line-operator-pill--ozel-halk { color: #8a4b08; background: #fff7e6; border-color: #f6d9a8; }
.line-operator-pill--minibus-koop { color: #0b6b53; background: #ebf8f3; border-color: #b5e3d2; }

/* Hatlar sayfası: kart altı kısayollar ve durak eşleşmesi */
.line-board__card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid #dcecf1; border-radius: 1rem; background: #fff; box-shadow: 0 2px 8px -2px rgba(23, 43, 99, 0.08); transition: border-color .15s, box-shadow .15s, transform .15s; }
.line-board__card:hover { border-color: #74d2da; transform: translateY(-1px); box-shadow: 0 4px 16px -4px rgba(23, 43, 99, 0.12), 0 2px 4px -2px rgba(23, 43, 99, 0.06); }
.line-board__card .line-board__row { border: 0; border-radius: 1rem; box-shadow: none; background: transparent; }
.line-board__card .line-board__row:hover { transform: none; box-shadow: none; }
.line-board__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding: 10px 16px 12px 80px; border-top: 1px dashed #dcecf1; font-size: 0.8rem; }
.line-board__foot a { color: #244f86; font-weight: 700; }
.line-board__foot a:hover { text-decoration: underline; }
.line-board__foot a:focus-visible { outline: 3px solid rgba(36, 79, 134, 0.45); outline-offset: 2px; border-radius: 4px; }
.line-board__match { color: #475569; }
.line-board__match mark { padding: 0 2px; border-radius: 3px; background: #fff3c4; color: inherit; }
.line-board__match[hidden] { display: none !important; }
@media (max-width: 520px) {
    .line-board__card .line-board__row { gap: 10px 12px; padding: 12px 14px 10px 12px; }
    .line-board__card .line-board__no { width: 44px; height: 44px; font-size: 1.3rem; }
    .line-board__card .line-board__main { flex-basis: calc(100% - 56px); }
    .line-board__card .line-board__side { justify-content: flex-start; gap: 12px; padding: 0 104px 0 56px; }
    /* Canlı sayı gelince dar ekranda durak sayısı yerine o gösterilir. */
    .line-board__card .line-board__live:not([hidden]) + .line-board__stops { display: none; }
    .line-board__foot { justify-content: flex-end; padding: 8px 14px 10px; }
    /* Durak eşleşmesi yoksa "Sefer saatleri" durak sayısıyla aynı satıra oturur; kart kısalır. */
    .line-board__foot:has(.line-board__match[hidden]) { position: absolute; right: 14px; bottom: 11px; padding: 0; border: 0; }
    .line-board__foot .line-board__match { margin-right: auto; }
    /* Kartın tamamı zaten duraklar ve haritaya gider; telefonda tekrar eden bağlantı gizlenir. */
    .line-board__foot-detail { display: none; }
}
/* iOS, 16 pikselden küçük yazılı kutuya odaklanınca sayfayı büyütür. */
@media (max-width: 640px) { .line-board__search input { font-size: 16px; } }