/* ==================== Design tokens ==================== */
:root {
    --wmb-bg:           #eef2f7;
    --wmb-surface:      #ffffff;
    --wmb-ink:          #0b1f3a;
    --wmb-ink-soft:     #475569;
    --wmb-muted:        #94a3b8;
    --wmb-border:       #dde4ee;
    --wmb-border-soft:  #eef2f7;
    --wmb-primary:      #0b2f5e;        /* Balıkesir Ulaşım koyu lacivert */
    --wmb-primary-600:  #133e75;
    --wmb-primary-700:  #0a234a;
    --wmb-primary-soft: #e7eef9;
    --wmb-accent:       #f5a623;        /* kurumsal turuncu/amber vurgu */
    --wmb-accent-600:   #d98c10;
    --wmb-accent-soft:  #fff3dc;
    --wmb-info:         #0ea5e9;
    --wmb-info-soft:    #e0f2fe;
    --wmb-danger:       #ef4444;
    --wmb-success:      #16a34a;
    --wmb-success-soft: #e7f6ed;
    /* Liste satırlarının etiket/kart zemini — beyaz panelden hafifçe ayrışan ton */
    --wmb-chip:         #f2f6fb;
    --wmb-shadow-xs:    0 1px 2px rgba(11, 31, 58, .06);
    --wmb-shadow-sm:    0 2px 6px rgba(11, 31, 58, .08);
    --wmb-shadow-md:    0 10px 28px rgba(11, 31, 58, .10);
    --wmb-radius-sm:    8px;
    --wmb-radius-md:    10px;
    --wmb-radius-lg:    14px;
}

html { height: 100%; }
/* height yerine min-height: sabit yükseklik, flex item olan footer'ı ezip
   içeriğini kırpıyordu (overflow: hidden) — body içerikle birlikte büyümeli */
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--wmb-ink);
    background: var(--wmb-bg);
}
main[role="main"] { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.cw-footer { flex-shrink: 0; }
.navbar-brand { font-weight: 600; letter-spacing: 0.5px; }

/* ==================== Shell ==================== */
.wmb-shell {
    display: flex;
    height: calc(100vh - 80px);
    min-height: 520px;
    width: 100%;
    background: var(--wmb-bg);
    overflow: hidden;
}

/* Compact sidebar head — brand/tema/dil ana header'a taşındı */
.wmb-sidebar__head--compact {
    padding: 14px 22px 12px;
}

/* ==================== SMART STOP SHELL ==================== */
.ss-shell {
    display: flex;
    height: calc(100vh - 80px);
    min-height: 520px;
    width: 100%;
    background: var(--wmb-bg);
    overflow: hidden;
}
.ss-sidebar {
    width: 340px;
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    background: var(--wmb-surface);
    border-right: 1px solid var(--wmb-border);
    box-shadow: var(--wmb-shadow-xs);
    z-index: 2;
    min-height: 0;
    color: var(--wmb-ink);
}
.ss-sidebar__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--wmb-border-soft);
    background: var(--wmb-surface);
    flex-shrink: 0;
}
.ss-sidebar__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ss-listhead {
    padding: 10px 16px;
    border-bottom: 1px solid var(--wmb-border-soft);
    background: var(--wmb-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ss-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 0 !important;
}
.ss-item { cursor: pointer; transition: background .12s; }
.ss-item:hover { background: var(--wmb-primary-soft); }
.ss-item.active { background: var(--wmb-primary-soft); color: var(--wmb-ink); border-color: var(--wmb-border); }

/* Detail panel — durak seçilince yandan açılır */
.ss-detail {
    width: 380px;
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    background: var(--wmb-surface);
    border-right: 1px solid var(--wmb-border);
    box-shadow: 4px 0 12px -8px rgba(15,23,42,.15);
    z-index: 1;
    min-height: 0;
    animation: ss-slide-in .22s ease-out;
    color: var(--wmb-ink);
}
.ss-detail[hidden] { display: none; }
@keyframes ss-slide-in {
    from { transform: translateX(-12px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.ss-detail__head {
    position: relative;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--wmb-border-soft);
    background: linear-gradient(135deg, #1e40af 0%, #2a5298 100%);
    color: #fff;
    flex-shrink: 0;
}
.ss-detail__head .text-muted { color: rgba(255,255,255,.75) !important; }
.ss-detail__close {
    position: absolute; top: 8px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.18); border: 0; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; cursor: pointer;
    transition: background .15s;
}
.ss-detail__close:hover { background: rgba(255,255,255,.32); }
.ss-detail__tabs {
    border-bottom: 1px solid var(--wmb-border-soft);
    flex-shrink: 0;
    padding: 0 8px;
    background: var(--wmb-bg);
}
.ss-detail__tabs .nav-link {
    color: var(--wmb-ink-soft); font-size: .85rem; font-weight: 500;
    padding: .55rem .5rem;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}
.ss-detail__tabs .nav-link.active {
    color: var(--wmb-primary); background: transparent;
    border-bottom-color: var(--wmb-primary);
}
.ss-detail__body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 6px 12px;
}

/* Canvas + Map */
.ss-canvas { flex: 1 1 auto; position: relative; min-width: 0; }
#ss-map { position: absolute; inset: 0; background: var(--wmb-bg); }

/* Harita ekranları standart düzen (WMB ile aynı):
   zoom +/− sol altta (MapLibre NavigationControl), yenile FAB'ı sağ üstte */

/* ---- Mobil: aşağıdan sürüklenebilir panel (bottom sheet) ----
   "Otobüsüm Nerede" ekranındaki davranışın aynısı. Harita kabuğu doldurur,
   kenar çubuğu alttan yukarı çekilen bir çekmeceye dönüşür.
   Durum panelin kendi data-sheet özniteliğindedir (bkz. js/bottomsheet.js) —
   böylece aynı kabukta iki panel (liste + durak detayı) birbirini ezmez.
   Yükseklikler kabuğa göre YÜZDE'dir; vh kullanılsa panel kabuktan uzun olur
   ve tutamak navbar altına kayıp erişilemez hâle gelirdi. */
@media (max-width: 991.98px) {
    .ss-shell {
        position: relative;
        flex-direction: row;
        height: calc(100dvh - 55px - env(safe-area-inset-top, 0px) - var(--cw-tabbar-h, 60px) - env(safe-area-inset-bottom, 0px));
        min-height: 480px;
        overflow: hidden;
    }
    .ss-canvas {
        order: 1;
        width: 100%;
        flex: 1 1 100%;
        min-height: 0;
        height: 100%;
    }

    /* Yükseklik JS tarafından PİKSEL olarak satır içi yazılır (bkz. js/bottomsheet.js);
       buradaki 56px yalnızca JS yüklenene kadarki başlangıç değeridir. */
    .ss-sidebar, .ss-detail {
        position: absolute;
        left: 0; right: 0; bottom: 0; top: auto;
        width: 100%;
        flex: 0 0 auto;
        max-height: 100%;
        height: 56px;                   /* JS yüklenene kadarki başlangıç */
        border-right: 0;
        border-bottom: 0;
        border-top: 1px solid var(--wmb-border);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 36px rgba(11, 31, 58, .22);
        transition: height .32s cubic-bezier(.2, .8, .2, 1);
        overflow: hidden;
        padding-top: 22px;              /* tutamak şeridi */
        z-index: 8;
    }
    /* Durak detayı, liste çekmecesinin üzerinde açılır */
    .ss-detail { z-index: 9; }

    /* Kapalıyken içerik gizli — yalnızca temiz tutamak şeridi görünür */
    .ss-sidebar[data-sheet="closed"] .ss-sidebar__head,
    .ss-sidebar[data-sheet="closed"] .ss-sidebar__body,
    .ss-detail[data-sheet="closed"] .ss-detail__tabs,
    .ss-detail[data-sheet="closed"] .ss-detail__body { opacity: 0; pointer-events: none; }

    .is-dragging { transition: none !important; }

    /* Panelin içi kendi içinde kaydırılabilir olmalı */
    .ss-sidebar__body, .ss-detail__body { overflow: auto; -webkit-overflow-scrolling: touch; }
}

/* ==================== Sidebar ==================== */
.wmb-sidebar {
    width: 420px;
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    background: var(--wmb-surface);
    border-right: 1px solid var(--wmb-border);
    box-shadow: var(--wmb-shadow-md);
    z-index: 2;
    min-height: 0;
}
.wmb-sidebar__head {
    padding: 22px 22px 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0) 55%),
        linear-gradient(135deg, var(--wmb-primary-700) 0%, var(--wmb-primary) 60%, var(--wmb-primary-600) 100%);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.wmb-sidebar__head::after {
    content:'';
    position:absolute; left:0; right:0; bottom:0; height:3px;
    background: linear-gradient(90deg, var(--wmb-accent) 0%, var(--wmb-accent-600) 100%);
    opacity: .9;
}
.wmb-brand { display: flex; align-items: center; gap: 14px; }
.wmb-brand__logo { height: 44px; width: auto; border-radius: 8px; background: #fff; padding: 4px; }
.wmb-brand__logo-fallback {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    font-size: 22px;
    color: var(--wmb-accent);
}
.wmb-brand__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.1;
}
.wmb-brand__subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 4px;
    letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 6px;
}
.wmb-brand__subtitle .bi { color: var(--wmb-accent); }

.wmb-headstrip {
    margin-top: 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wmb-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
}
.wmb-pill .bi { color: var(--wmb-accent); }
.wmb-pill--live { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.45); }
.wmb-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wmb-accent);
    box-shadow: 0 0 0 4px rgba(245,166,35,0.25);
    animation: wmbPulse 1.4s ease-in-out infinite;
}

.wmb-sidebar__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px;
    min-height: 0;
}
.wmb-sidebar__body::-webkit-scrollbar { width: 8px; }
.wmb-sidebar__body::-webkit-scrollbar-thumb { background: #d6dde6; border-radius: 10px; }
.wmb-sidebar__body::-webkit-scrollbar-thumb:hover { background: #b8c2cf; }

/* ==================== Canvas / Map ==================== */
.wmb-canvas { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.wmb-map { position: absolute; inset: 0; background: #e8edf3; }
/* MapLibre konteyneri kendi .maplibregl-map{position:relative} kuralını uygular;
   ID özgüllüğüyle mutlak konumu koru ki harita tam yüksekliği doldursun. */
#wmb-map.wmb-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* 3B/2B (pitch) düğmesi — gerçek eğim MapLibre tarafından yapılır */
/* right tekrar edilmez — yatay konum .wmb-fab'ta tek yerde tanımlı */
.wmb-fab.wmb-fab--tilt { top: calc(var(--wmb-fab-top) + var(--wmb-fab-step) * 1); }
.wmb-fab--tilt .wmb-fab__tilt { font-weight: 800; font-size: 12.5px; letter-spacing: .4px; }
.wmb-fab--tilt.is-on { color: var(--wmb-accent); }

/* ==================== Canlı otobüs HTML marker'ı (üstten görünüm) ==================== */
.wmb-vmarker { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; cursor: pointer; will-change: transform; }
/* İkon hareket yönüne (gpsDir) göre JS ile döndürülür — transition rAF animasyonuyla çakışmasın.
   İki temsil (WmbMapCore.createBusIcon): 2B üstten SVG + 3B hacimli gövde.
   DİKKAT: bu zincirin hiçbir elemanına `filter` YAZILMAZ — filter preserve-3d
   bağlamını düzleştirir ve 3B gövde kağıt gibi ezilir (yalnızca yaprak
   elemanlar — üstten ikon img'i gibi — filter taşıyabilir). */
.wmb-vmarker__bus {
    position: relative;
    width: 18px;
    transform-style: preserve-3d;
    will-change: transform;
}
/* 2B üstten görünüm */
.wmb-busicon__top {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
    transform-origin: 50% 50%;
    will-change: transform;
}
.wmb-vmarker__bus.is-3d .wmb-busicon__top { display: none; }

/* 3B gövde: 18×36 taban (W×L), 11px yükseklik. rotateX(pitch)+rotateZ(yön)
   JS'ten gelir (WmbMapCore.poseBusIcon); yüzler bu kutunun içinde sabittir. */
.wmb-busicon__3d {
    display: none;
    position: relative;
    width: 18px; height: 36px;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform;
}
.wmb-vmarker__bus.is-3d .wmb-busicon__3d { display: block; }

.wmb-busicon__face {
    position: absolute; left: 50%; top: 50%;
    transform-origin: 50% 50%;
    background-repeat: no-repeat; background-size: 100% 100%;
}
/* Zemin gölgesi — gövdeden geniş, yumuşak elips */
.wmb-busicon__shadow {
    width: 26px; height: 44px; margin: -22px 0 0 -13px;
    background-image: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.4), rgba(0,0,0,0) 72%);
    transform: translateZ(0.2px);
}
/* Takip vurgusu: amber zemin halkası (filter kullanılamaz — bkz. yukarı) */
.wmb-busicon__ring {
    display: none;
    width: 26px; height: 44px; margin: -22px 0 0 -13px;
    border: 2px solid rgba(245,166,35,.95);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(245,166,35,.75), inset 0 0 6px rgba(245,166,35,.45);
    transform: translateZ(0.4px);
}
.wmb-vmarker.is-followed .wmb-busicon__ring { display: block; }

/* 3B gövde ölçüleri: gövde duvarları 10px, tekerlek boşluğu 2.5px →
   duvarlar z 2.5..12.5 arasında durur, tavan z 12.5'te. Tekerlekler
   (çap 5px) gövdenin ALTINDAN taşar — yerle temas hissi. */

/* Tavan: 2B üstten ikonla AYNI çizim (bus-top.svg) — kullanıcı tepeden
   baktığında 2B ve 3B otobüs birebir aynı görünür. */
.wmb-busicon__roof {
    width: 18px; height: 36px; margin: -18px 0 0 -9px;
    transform: translateZ(12.5px);
    background-image: url(/images/bus-top.svg);
}
/* Şasi plakası: gövdenin altını kapatır — alçak açıdan bakışta içi boş
   görünmesin, tekerlekler koyu bir taban üstünde otursun. */
.wmb-busicon__chassis {
    width: 16px; height: 34px; margin: -17px 0 0 -8px;
    border-radius: 5px;
    background-image: linear-gradient(#0a1728, #06162c);
    transform: translateZ(2.4px);
}
/* Ön / arka duvarlar: merkezde ayağa kaldır, yarım boy ileri/geri it.
   rotate(180) doku yönünü düzeltir (rotateX yüzü baş aşağı diker). */
.wmb-busicon__front, .wmb-busicon__back {
    width: 18px; height: 10px; margin: -5px 0 0 -9px;
}
.wmb-busicon__front { transform: translateZ(7.5px) rotateX(90deg) translateZ(18px)  rotate(180deg); background-image: url(/images/bus3d-front.svg); }
.wmb-busicon__back  { transform: translateZ(7.5px) rotateX(90deg) translateZ(-18px) rotate(180deg); background-image: url(/images/bus3d-back.svg); }
/* Yan duvarlar */
.wmb-busicon__side {
    width: 36px; height: 10px; margin: -5px 0 0 -18px;
    background-image: url(/images/bus3d-side.svg);
}
.wmb-busicon__side--l { transform: translateZ(7.5px) rotateZ(90deg) rotateX(90deg) translateZ(9px); }
.wmb-busicon__side--r { transform: translateZ(7.5px) rotateZ(90deg) rotateX(90deg) translateZ(-9px); }
/* Tekerlekler: yanlara paralel duran diskler (lastik + jant). Üst yarısı
   gövde duvarının arkasında kalır — çamurluk içindeymiş gibi görünür. */
.wmb-busicon__wheel {
    width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 50%,
        #9fb2c8 0 24%, #1f2937 27% 58%, #0b1220 60% 100%);
}
.wmb-busicon__wheel--fl { transform: translate3d(-8px, -9px, 2.5px) rotateZ(90deg) rotateX(90deg); }
.wmb-busicon__wheel--fr { transform: translate3d( 8px, -9px, 2.5px) rotateZ(90deg) rotateX(90deg); }
.wmb-busicon__wheel--rl { transform: translate3d(-8px,  9px, 2.5px) rotateZ(90deg) rotateX(90deg); }
.wmb-busicon__wheel--rr { transform: translate3d( 8px,  9px, 2.5px) rotateZ(90deg) rotateX(90deg); }
/* Yalın araç işaretçisi (Akıllı Durak): sadece otobüs ikonu — plaka/dot yok,
   tıklanabilir de değil. 3B duruşu Otobüsüm Nerede ile ortak
   (WmbMapCore.vehicleTransform). */
.wmb-vmarker--plain { cursor: default; }

/* Etiket kapsülü: [renkli hat rozeti][plaka] — rozet hat çizgisiyle aynı renk */
.wmb-vmarker__label {
    display: flex; align-items: stretch;
    margin-top: -3px;
    border: 1px solid #fff; border-radius: 6px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.wmb-vmarker__route {
    display: flex; align-items: center;
    background: #64748b; color: #fff;
    padding: 1px 5px;
    font: 800 10px "Quicksand", "Segoe UI", Arial, sans-serif; white-space: nowrap;
    letter-spacing: .2px;
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.wmb-vmarker__plate {
    background: #15335e; color: #fff;
    padding: 1px 7px;
    font: 700 11px "Quicksand", "Segoe UI", Arial, sans-serif; white-space: nowrap;
}
:root[data-theme="dark"] .wmb-vmarker__plate { background: #0e2a4f; }
/* Genel bakış modunda uzak zoom'da plakalar gizlenir (kalabalık + DOM maliyeti);
   renkli hat rozeti görünür kalır */
.wmb-vmarker.is-plate-hidden .wmb-vmarker__plate { display: none; }

/* Uzak-bakış göstergesi (daire + yön oku). Yakın bakışta gizli — otobüs ikonu görünür. */
.wmb-vmarker__dot {
    display: none;
    width: 28px; height: 28px;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
    will-change: transform;
}
.wmb-vmarker__dot svg { display: block; }
/* Uzak bakış (zoom < LOD): sade dot görünür, detaylı otobüs + etiket gizli */
.wmb-vmarker.is-far .wmb-vmarker__dot { display: block; }
.wmb-vmarker.is-far .wmb-vmarker__bus,
.wmb-vmarker.is-far .wmb-vmarker__label { display: none; }
/* Takip edilen otobüs uzak bakışta bile amber halkayla vurgulansın */
.wmb-vmarker.is-far.is-followed .wmb-vmarker__dot {
    filter: drop-shadow(0 0 7px rgba(245,166,35,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

/* Otobüs kümesi: uzak bakışta yan yana düşen dotlar (3+) tek büyük dairede toplanır,
   içindeki sayı gruptaki araç adedidir. Tıklayınca o bölgeye yakınlaşır.
   DİKKAT: kök elemanın transform'unu MapLibre konumlandırma için kullanır —
   animasyonlar bu yüzden iç elemanda (.wmb-vcluster__c) çalışır. */
.wmb-vcluster {
    cursor: pointer;
    /* Yoğunluk paleti — basamak sınıfı (--l1…l4) bu üç değişkeni ezer.
       Sınıf hiç verilmemişse eski kurumsal lacivert kullanılır. */
    --wmb-cluster-bg: #15335e;
    --wmb-cluster-ink: #fff;
    --wmb-cluster-rgb: 21, 51, 94;   /* nabız halkası rgba() için */
}
/* Yoğunluk basamakları — eşikler WmbMapCore.clusterLevel ile aynı:
   10 altı yeşil · 10–19 sarı · 20–49 kırmızı · 50+ koyu kırmızı.
   Sarıda beyaz yazı okunmadığı için mürekkep koyulaşır. */
.wmb-vcluster--l1 { --wmb-cluster-bg: #16a34a; --wmb-cluster-rgb: 22, 163, 74; }
.wmb-vcluster--l2 { --wmb-cluster-bg: #f5a623; --wmb-cluster-ink: #3d2a04; --wmb-cluster-rgb: 245, 166, 35; }
.wmb-vcluster--l3 { --wmb-cluster-bg: #dc2626; --wmb-cluster-rgb: 220, 38, 38; }
.wmb-vcluster--l4 { --wmb-cluster-bg: #7f1d1d; --wmb-cluster-rgb: 127, 29, 29; }

.wmb-vcluster__c {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--wmb-cluster-bg); color: var(--wmb-cluster-ink);
    border: 3px solid #fff;
    font: 800 13px "Quicksand", "Segoe UI", Arial, sans-serif;
    animation: wmbClusterIn .28s cubic-bezier(.34,1.4,.64,1) both,
               wmbClusterPulse 2.6s ease-out .3s infinite;
}
@keyframes wmbClusterIn {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@keyframes wmbClusterPulse {
    0%   { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(var(--wmb-cluster-rgb), .45); }
    70%  { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 12px rgba(var(--wmb-cluster-rgb), 0); }
    100% { box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(var(--wmb-cluster-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .wmb-vcluster__c { animation: none; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
}
.maplibregl-marker.wmb-vcluster { z-index: 7; }
/* Kümedeki araçların kendi işaretçileri gizlenir — küme dairesi onları temsil eder */
.wmb-vmarker.is-clustered { display: none !important; }

/* Işınlanan araç: konum güncellemesi çok uzağa sıçradıysa (GPS düzeltmesi,
   uzun süre veri gelmemesi) haritanın bir ucundan öbürüne süzülmek yerine
   yeni konumunda yanıp sönerek belirir. Opacity animasyonu köke güvenle
   uygulanır — MapLibre kök elemanda yalnızca transform kullanır. */
.wmb-vmarker.is-teleported { animation: wmbVehBlink .55s ease-in-out 3; }
@keyframes wmbVehBlink {
    0%   { opacity: 1; }
    50%  { opacity: .12; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .wmb-vmarker.is-teleported { animation: none; }
}

/* MapLibre popup (durak adı) — temaya uyumlu */
.wmb-mlpopup .maplibregl-popup-content {
    background: var(--wmb-surface); color: var(--wmb-ink);
    border: 1px solid var(--wmb-border); border-radius: 10px;
    padding: 7px 11px; font-size: 12.5px; box-shadow: var(--wmb-shadow-md);
}
.wmb-mlpopup .maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-group { box-shadow: var(--wmb-shadow-md) !important; }

.wmb-status {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: var(--wmb-shadow-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--wmb-ink);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmb-status::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wmb-accent);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
    animation: wmbPulse 1.4s ease-in-out infinite;
}
@keyframes wmbPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.bus-popup {
    position: absolute;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 8px;
    box-shadow: var(--wmb-shadow-md);
    padding: 8px 12px;
    font-size: 12.5px;
    min-width: 140px;
    pointer-events: auto;
    color: var(--wmb-ink);
}

/* ==================== Search ==================== */
.bussearch-area { position: relative; }
.bussearch { position: relative; }
.bseach-input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    padding: 10px 44px 10px 42px;
    font-size: 14px;
    color: var(--wmb-ink);
    background: var(--wmb-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.bseach-input::placeholder { color: var(--wmb-muted); }
.bseach-input:focus {
    border-color: var(--wmb-accent);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}
.bseach-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wmb-muted);
    font-size: 16px;
    pointer-events: none;
}
.unselect-loading,
.unselect-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wmb-muted);
    cursor: pointer;
    font-size: 16px;
}
.unselect-close:hover { color: var(--wmb-danger); }

/* ==================== Hat listesi ====================
   Açılışta TÜM hatlar listelenir (SmartStop/FillingCenter listeleriyle aynı düzen) */
.wmb-listhead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 4px 8px;
    margin-top: 10px;
    border-bottom: 1px solid var(--wmb-border-soft);
    font-size: .8rem; font-weight: 800; letter-spacing: .3px;
    color: var(--wmb-ink-soft); text-transform: uppercase;
}
.wmb-listhead__title { display: inline-flex; align-items: center; gap: 7px; }
.wmb-listhead__title .bi { color: var(--wmb-accent); }
.wmb-listhead__count {
    background: var(--wmb-primary-soft); color: var(--wmb-primary);
    border-radius: 999px; padding: 2px 10px;
    font-size: .72rem; font-weight: 800;
}
.buslist {
    background: transparent;
    max-height: none;
    overflow: visible;
    margin-top: 6px;
    padding: 4px;
}
/* Hat satırları etiket/kart görünümünde: hafif yuvarlak köşe, tonlu zemin,
   ince çerçeve — kurumsal görünüm (tema değişkenleri dark modu da kapsar) */
.buslist .mat-option {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: var(--wmb-radius-md);
    background: var(--wmb-chip);
    border: 1px solid var(--wmb-border);
    box-shadow: var(--wmb-shadow-xs);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.buslist .mat-option + .mat-option { margin-top: 7px; }
.buslist .mat-option:hover {
    background: var(--wmb-primary-soft);
    border-color: var(--wmb-primary-600);
    box-shadow: var(--wmb-shadow-sm);
}
.buslist .item { gap: 12px; }
.buslist .icon-bus {
    width: 28px; height: 28px; flex: 0 0 28px;
    background: linear-gradient(135deg, var(--wmb-primary) 0%, var(--wmb-primary-600) 100%);
    border-radius: 8px;
    position: relative;
    box-shadow: var(--wmb-shadow-xs);
}
.buslist .icon-bus::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v2a1 1 0 1 0 2 0v-2h4v2a1 1 0 1 0 2 0v-2h1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3Zm1 2h8v4H4V3Zm0 5h8v1H4V8Zm1.5 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1v2a1 1 0 1 0 2 0v-2h4v2a1 1 0 1 0 2 0v-2h1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3Zm1 2h8v4H4V3Zm0 5h8v1H4V8Zm1.5 1.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.buslist .route-title { font-size: 13.5px; color: var(--wmb-ink); font-weight: 600; }
.buslist .route-description { font-size: 12px; color: var(--wmb-ink-soft); margin-top: 2px; }

/* ==================== Variant / day select ==================== */
.variant-wrap { margin-top: 16px; }
.variant-label {
    display: block;
    font-size: 11px;
    color: var(--wmb-muted);
    margin-bottom: 8px;
    padding-left: 2px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.custom-select { position: relative; }
.custom-select__trigger {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    background: var(--wmb-surface);
    padding: 10px 38px 10px 14px;
    text-align: left;
    font-size: 14px;
    color: var(--wmb-ink);
    cursor: pointer;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.custom-select__trigger:hover { border-color: #cbd5e1; }
.custom-select__trigger:focus,
.custom-select__trigger:focus-visible {
    border-color: var(--wmb-accent);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
    outline: none;
}
.custom-select__trigger .bi-chevron-down {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wmb-muted);
    font-size: 11px;
}
.custom-select__value { display: inline-block; color: var(--wmb-ink); }
.custom-select__panel {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 40;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    box-shadow: var(--wmb-shadow-md);
    max-height: 300px;
    overflow-y: auto;
}
.custom-select__option {
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--wmb-ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s;
}
.custom-select__option:hover { background: var(--wmb-primary-soft); }
.custom-select__option--disabled { color: var(--wmb-muted); cursor: default; }
.custom-select__option--disabled:hover { background: transparent; }

/* ==================== Bus detail ==================== */
.bus-detail { margin-top: 22px; }
.tab-view { }

/* Pill-style tabs (segmented control) */
.tabs {
    display: flex;
    background: var(--wmb-border-soft);
    padding: 4px;
    border-radius: 12px;
    gap: 3px;
}
.tabs .tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    padding: 10px 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--wmb-ink-soft);
    background: transparent;
    border: none;
    border-radius: 9px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.tabs .tab .bi { font-size: 14px; line-height: 1; }
.tabs .tab:hover { color: var(--wmb-primary); }
.tabs .tab.active {
    background: var(--wmb-surface);
    color: var(--wmb-primary);
    box-shadow: var(--wmb-shadow-xs);
}
.tabs .tab.active .bi { color: var(--wmb-accent); }

.contents { margin-top: 18px; }
.content { display: none; }
.content.active { display: block; }

/* ==================== Stops (timeline) ==================== */
.busstopname-tag {
    gap: 8px;
    padding: 0 2px 10px;
    border-bottom: 1px solid var(--wmb-border-soft);
}
.busstopname-tag .circle {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wmb-accent);
}
.busstopname-tag span {
    font-weight: 600;
    color: var(--wmb-ink-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.busstop-list {
    margin-top: 12px;
    padding: 0 4px;
    max-height: calc(100vh - 420px);
    overflow-y: auto;
}
/* Durak satırları etiket/kart görünümünde — hat listesiyle aynı dil */
.busstop-list .list-item {
    position: relative;
    padding: 10px 10px 10px 28px;
    cursor: pointer;
    margin: 7px 0;
    background: var(--wmb-chip);
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    box-shadow: var(--wmb-shadow-xs);
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.busstop-list .list-item:first-child { margin-top: 0; }
.busstop-list .list-item:hover {
    background: var(--wmb-primary-soft);
    border-color: var(--wmb-primary-600);
}

/* vertical timeline line — kartlar arası boşlukta da kesintisiz sürer */
.busstop-list .list-item::before {
    content: '';
    position: absolute;
    left: 13px;
    top: -10px; bottom: -10px;
    width: 2px;
    background: var(--wmb-border);
}
.busstop-list .list-item:first-child::before { top: 50%; }
.busstop-list .list-item:last-child::before  { bottom: 50%; }

.busstop-list .busstop-name { gap: 14px; position: relative; }
.busstop-list .name { font-size: 13px; color: var(--wmb-ink); line-height: 1.3; }

/* dots override */
.stop-icon {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--wmb-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--wmb-border);
    flex: none;
    -webkit-mask: none; mask: none;
}
.stop-icon--start { background: var(--wmb-success); width: 14px; height: 14px; }
.stop-icon--end   { background: var(--wmb-danger);  width: 14px; height: 14px; }
.stop-icon--mid   { background: var(--wmb-accent);  width: 10px; height: 10px; }

/* ==================== Hours ==================== */
.hoursList .hours-title {
    font-weight: 700;
    color: var(--wmb-ink);
    display: block;
    margin: 4px 0 8px;
    font-size: 14px;
}
.schedule-description {
    font-size: 12px;
    color: var(--wmb-ink-soft);
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--wmb-accent-soft);
    border-left: 3px solid var(--wmb-accent);
    border-radius: 6px;
}
.card.lesson-border {
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    padding: 14px;
    background: var(--wmb-surface);
    box-shadow: var(--wmb-shadow-xs);
}
.daySelectWrapper { margin-bottom: 14px; }

#wmb-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 340px;
    overflow-y: auto;
}
.hoursLine {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--wmb-border-soft);
}
.hoursLine:last-child { border-bottom: none; }
.hoursLine .lineNumber {
    flex: 0 0 40px;
    font-weight: 700;
    color: var(--wmb-primary);
    font-size: 14px;
}
.hoursLine .lineHoursData {
    background: var(--wmb-primary-soft);
    color: var(--wmb-primary);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Notlu (duyurulu) saat rozeti */
.hoursLine .lineHoursData--hasNote {
    cursor: help;
    padding-right: 6px;
    background: linear-gradient(135deg, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0.08) 100%);
    color: var(--wmb-accent-600, #d98c10);
    box-shadow: inset 0 0 0 1px rgba(245,166,35,0.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hoursLine .lineHoursData--hasNote:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(245,166,35,0.55), 0 6px 14px rgba(245,166,35,0.18);
}
.lineHoursData__mark {
    font-size: 10px;
    color: var(--wmb-accent);
    animation: wmbNoteWiggle 3.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes wmbNoteWiggle {
    0%, 86%, 100% { transform: rotate(0); }
    88%  { transform: rotate(-14deg); }
    92%  { transform: rotate(12deg); }
    96%  { transform: rotate(-8deg); }
}
:root[data-theme="dark"] .hoursLine .lineHoursData--hasNote {
    background: linear-gradient(135deg, rgba(255,182,72,0.22) 0%, rgba(255,182,72,0.08) 100%);
    color: #ffca6a;
    box-shadow: inset 0 0 0 1px rgba(255,182,72,0.35);
}

/* İptal edilen sefer saati rozeti (--hasNote'tan sonra gelmeli, onu ezer) */
.hoursLine .lineHoursData--cancelled {
    cursor: pointer;
    background: rgba(108,117,125,0.14);
    color: #8a919b;
    box-shadow: inset 0 0 0 1px rgba(108,117,125,0.28);
}
.hoursLine .lineHoursData--cancelled:hover {
    box-shadow: inset 0 0 0 1px rgba(224,49,49,0.45), 0 6px 14px rgba(224,49,49,0.14);
}
.lineHoursData--cancelled .lineHoursData__t {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.lineHoursData--cancelled .lineHoursData__mark {
    color: #e03131;
}

/* Kalkış saati geçmiş sefer — koyu/soluk (yalnızca bugünün çizelgesinde).
   --hasNote'tan SONRA gelir ki notlu ama geçmiş sefer de soluk görünsün;
   iptal vurgusu JS tarafında bu sınıfı hiç almaz. */
.hoursLine .lineHoursData--past {
    background: rgba(108,117,125,0.14);
    color: #97a0ab;
    box-shadow: none;
}
:root[data-theme="dark"] .hoursLine .lineHoursData--past {
    background: rgba(148,163,184,0.10);
    color: #64748b;
}

/* Sıradaki (bir sonraki kalkacak) sefer — sarı halka + yanıp sönen nokta */
.hoursLine .lineHoursData--next {
    box-shadow: inset 0 0 0 1.5px var(--wmb-accent, #f5a623);
}
.lineHoursData--next::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--wmb-accent, #f5a623);
    animation: wmbNextPulse 1.1s ease-in-out infinite;
}
@keyframes wmbNextPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
    .lineHoursData--next::after { animation: none; }
}

/* Tooltip (timeDescription) */
.wmb-hourtip {
    position: absolute;
    z-index: 100;
    display: none;
    align-items: flex-start;
    gap: 10px;
    max-width: 280px;
    padding: 10px 14px 10px 12px;
    background: linear-gradient(135deg, #1a2742 0%, #0b2f5e 100%);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(11,31,58,.32), 0 0 0 1px rgba(255,255,255,.06);
    font-size: 12.5px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(.96);
    transition: opacity .16s ease, transform .16s ease;
}
.wmb-hourtip.is-visible {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.wmb-hourtip__ico {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--wmb-accent, #f5a623), #ff8a3d);
    color: #2a1a00;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(245,166,35,0.35);
    margin-top: 1px;
}
.wmb-hourtip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wmb-hourtip__title {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
    color: var(--wmb-accent, #ffb648);
    font-variant-numeric: tabular-nums;
}
.wmb-hourtip__text {
    color: #e6edf7;
    font-weight: 500;
}
.wmb-hourtip__arrow {
    position: absolute;
    width: 10px; height: 10px;
    background: inherit;
    transform: rotate(45deg);
    box-shadow: none;
}
.wmb-hourtip[data-placement="top"] .wmb-hourtip__arrow    { left: 50%; margin-left: -5px; bottom: -5px;
    background: #0b2f5e; }
.wmb-hourtip[data-placement="bottom"] .wmb-hourtip__arrow { left: 50%; margin-left: -5px; top: -5px;
    background: #1a2742; }
.wmb-hourtip[data-placement="right"]  .wmb-hourtip__arrow { top: 50%; margin-top: -5px; left: -5px;
    background: #1a2742; }
.wmb-hourtip[data-placement="left"]   .wmb-hourtip__arrow { top: 50%; margin-top: -5px; right: -5px;
    background: #0b2f5e; }

/* İptal balonu varyantı — kırmızı vurgu */
.wmb-hourtip--cancelled .wmb-hourtip__ico {
    background: linear-gradient(135deg, #e03131, #c92a2a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(224,49,49,0.35);
}
.wmb-hourtip--cancelled .wmb-hourtip__title { color: #ff8787; }

/* ==================== Price ==================== */
.fee-tariffs .line {
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    box-shadow: var(--wmb-shadow-xs);
}
.fee-tariffs .line .tag {
    width: 60%;
    background: var(--wmb-primary-soft);
    color: var(--wmb-primary);
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
}
.fee-tariffs .line .price {
    width: 40%;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wmb-ink);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ==================== Day date label ==================== */
.day-date { color: var(--wmb-muted); font-size: 12px; margin-left: 6px; }

/* ==================== Helpers ==================== */
.flex { display: flex; }
.middle { align-items: center; }
.between { justify-content: space-between; }

/* ==================== Route info chips ==================== */
.wmb-route-info {
    display: flex;
    margin: 16px 0 10px;
}
.wmb-route-info__row {
    display: flex; flex-wrap: wrap; gap: 6px; width: 100%;
}
.wmb-route-info__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: var(--wmb-primary-soft);
    color: var(--wmb-primary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d6e0f1;
}
.wmb-route-info__chip .bi { color: var(--wmb-accent); font-size: 13px; }
.wmb-route-info__chip .cw-ico-bus { color: var(--wmb-accent); font-size: 13px; }
.wmb-route-info__chip strong { font-weight: 800; }
.wmb-route-info__chip--time { background: var(--wmb-info-soft); color: #075985; border-color: #bae6fd; }
.wmb-route-info__chip--time .bi { color: var(--wmb-info); }

/* ==================== Map legend ==================== */
.wmb-legend {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 20;   /* harita marker'larının (1-7) üstünde */
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    box-shadow: var(--wmb-shadow-md);
    padding: 12px 14px;
    font-size: 12px;
    color: var(--wmb-ink);
    min-width: 180px;
    backdrop-filter: blur(6px);
}
.wmb-legend__title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--wmb-primary);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--wmb-border-soft);
    padding-bottom: 6px;
}
.wmb-legend__title .bi { color: var(--wmb-accent); }
.wmb-legend__item {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
    color: var(--wmb-ink-soft);
}
.leg-ico {
    width: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    flex: none;
}
.leg-ico--start { color: var(--wmb-success); }
.leg-ico--mid   { color: var(--wmb-info); }
.leg-ico--end   { color: var(--wmb-danger); }
.leg-ico--bus   { color: var(--wmb-primary); }

/* ==================== Harita üstü yüzen düğmeler (FAB yığını) ====================
   Yığındaki her düğme bir SLOT numarası alır; konumlar tek yerden hesaplanır.
   Yeni bir düğme eklerken sadece bir sonraki slot numarası verilir — daha önce
   konumlar dosyanın dört ayrı yerinde sabit piksel olarak duruyordu ve
   "en yakın durak" düğmesi hiç konumlandırılmadığı için yenile düğmesinin
   üstüne biniyordu. Slot yaklaşımıyla bu tür çakışma yapısal olarak imkânsız.

   Slot 0: yenile · 1: 2B/3B · 2: harita görünümü · 3: en yakın durak */
:root {
    --wmb-fab-top: 16px;    /* ilk düğmenin üstten uzaklığı */
    --wmb-fab-step: 48px;   /* 40px düğme + 8px boşluk */
}
.wmb-fab {
    position: absolute;
    right: 16px;
    top: var(--wmb-fab-top);
    z-index: 20;   /* harita marker'larının (1-7) üstünde */
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--wmb-border);
    background: var(--wmb-surface);
    color: var(--wmb-primary);
    box-shadow: var(--wmb-shadow-md);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .2s, background .15s, color .15s;
}
.wmb-fab:hover { background: var(--wmb-primary); color: #fff; }
.wmb-fab.is-loading .bi { animation: wmbSpin 1s linear infinite; }
@keyframes wmbSpin { to { transform: rotate(360deg); } }

/* ==================== Language switcher ==================== */
.wmb-langswitch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    list-style: none;
    margin: 0 8px 0 0;
}
.navbar-dark .wmb-langswitch { background: rgba(255,255,255,0.06); }

.wmb-langswitch__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}
.wmb-langswitch__btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    transform: translateY(-1px);
}
.wmb-langswitch__btn.is-active {
    background: var(--wmb-accent, #f5a623);
    color: #1a2742;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}
/* Bayrak: emoji değil inline SVG (Windows'ta emoji bayrak glyph'i yok — bkz.
   Views/Shared/_LangFlag.cshtml). Sabit kutu + slice ile tüm bayraklar aynı oranda. */
.wmb-langswitch__flag {
    display: inline-flex;
    width: 18px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 2px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .18);
}
.wmb-langswitch__flag .wmb-flag {
    display: block;
    width: 100%;
    height: 100%;
}
.wmb-langswitch__code { letter-spacing: .4px; }

/* Sidebar (light bg) varyantı */
.wmb-sidebar__head .wmb-langswitch {
    margin-left: auto;
    background: rgba(11, 31, 58, 0.06);
    border-color: rgba(11, 31, 58, 0.1);
}
.wmb-sidebar__head .wmb-langswitch__btn { color: var(--wmb-ink, #1a2742); }
.wmb-sidebar__head .wmb-langswitch__btn:hover { background: rgba(11, 31, 58, 0.12); }
.wmb-sidebar__head .wmb-langswitch__btn.is-active { color: #fff; background: var(--wmb-primary, #1f3a5f); box-shadow: 0 4px 12px rgba(31,58,95,0.25); }

.wmb-langswitch--corner { position: absolute; top: 12px; right: 12px; padding: 2px; }

/* Sidebar header relative ki köşe lang switcher konumlanabilsin */
.wmb-sidebar__head { position: relative; }

/* ==================== Road animation (otobüs hareketi) ==================== */
.wmb-roadline {
    position: relative;
    height: 18px;
    margin-top: 12px;
    overflow: hidden;
}
.wmb-roadline::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background:
        repeating-linear-gradient(90deg,
            var(--wmb-primary, #1f3a5f) 0 14px,
            transparent 14px 28px);
    opacity: .35;
    animation: wmbRoadDash 1.2s linear infinite;
}
.wmb-roadline__bus {
    position: absolute;
    top: 50%;
    left: -28px;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--wmb-primary, #1f3a5f);
    animation: wmbBusDrive 9s cubic-bezier(.45,.05,.55,.95) infinite, wmbBusBounce 0.6s ease-in-out infinite;
    filter: drop-shadow(0 2px 2px rgba(31,58,95,0.25));
}
@keyframes wmbRoadDash {
    from { background-position: 0 0; }
    to   { background-position: -28px 0; }
}
@keyframes wmbBusDrive {
    0%   { left: -28px; }
    55%  { left: calc(100% + 12px); }
    56%  { left: calc(100% + 12px); transform: translateY(-50%) scaleX(-1); }
    99%  { left: -28px;             transform: translateY(-50%) scaleX(-1); }
    100% { left: -28px;             transform: translateY(-50%) scaleX(1); }
}
@keyframes wmbBusBounce {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -1px; }
}
@media (prefers-reduced-motion: reduce) {
    .wmb-roadline__bus, .wmb-roadline::before,
    .wmb-live-dot, .wmb-fab.is-loading .bi {
        animation: none !important;
    }
}

/* ==================== Legend ikonları (harita ile birebir) ==================== */
/* Bootstrap icon görsellerini gizleyip yerine koyacak şekilde değil,
   icon rengini pad ederek harita marker'ları ile uyumlu hale getiriyoruz. */
.wmb-legend__item .leg-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    box-shadow: 0 3px 7px rgba(0,0,0,0.34),
                inset 0 1.5px 0 rgba(255,255,255,0.55),
                inset 0 -2.5px 4px rgba(0,0,0,0.30);
}
.wmb-legend__item .leg-ico .bi { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.wmb-legend__item .leg-ico--start { background: radial-gradient(circle at 36% 30%, #3ad77f 0%, #15923f 75%); }
.wmb-legend__item .leg-ico--mid   { background: radial-gradient(circle at 36% 30%, #5cc8fb 0%, #0288d1 75%); width: 14px; height: 14px; font-size: 0; }
.wmb-legend__item .leg-ico--end   { background: radial-gradient(circle at 36% 30%, #ff7a88 0%, #e02438 75%); }
.wmb-legend__item .leg-ico--bus   { background: transparent; box-shadow: none; width: 26px; height: 21px; }
.wmb-legend__item .leg-ico--bus img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)); }

/* ==================== Kurumsal mikro-animasyonlar ==================== */
.wmb-fab,
.wmb-pill,
.wmb-route-info__chip,
.bseach-input,
.custom-select__trigger,
.tab,
.list-item,
.fee-tariffs .line {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.list-item:hover { transform: translateX(2px); }
.fee-tariffs .line:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11,31,58,0.08); }
.tab:hover:not(.active) { background: rgba(11,31,58,0.04); }

/* Sayfa açılış animasyonu (lojik öğeler kayarak gelir) */
.wmb-sidebar { animation: wmbSlideInLeft .45s ease both; }
.wmb-canvas  { animation: wmbFadeIn .55s ease both; }
@keyframes wmbSlideInLeft {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wmbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Variant seçim açıklığı */
.custom-select__panel:not(.d-none) {
    animation: wmbDropIn .18s ease both;
}
@keyframes wmbDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Otobüs ipucu sallanma (canlı pill) */
.wmb-pill--live .wmb-live-dot {
    animation: wmbPulse 1.6s ease-in-out infinite;
}
@keyframes wmbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(245,166,35,0); }
}

/* Mobil — lang switcher navbar'ı ezmesin */
@media (max-width: 991.98px) {
    .wmb-langswitch { margin: 6px 0; }
    .wmb-langswitch--corner { position: static; margin-top: 8px; }
}

/* ==================== Dark mode ==================== */
:root[data-theme="dark"] {
    --wmb-bg:           #0b1220;
    --wmb-surface:      #111a2c;
    --wmb-ink:          #e6edf7;
    --wmb-ink-soft:     #aab4c5;
    --wmb-muted:        #6d7a93;
    --wmb-border:       #1f2a44;
    --wmb-border-soft:  #182238;
    --wmb-primary:      #4f8cff;
    --wmb-primary-600:  #6aa0ff;
    --wmb-primary-700:  #1f3a5f;
    --wmb-primary-soft: #142039;
    --wmb-accent:       #ffb648;
    --wmb-accent-600:   #ffa627;
    --wmb-accent-soft:  #2a2113;
    --wmb-info:         #38bdf8;
    --wmb-info-soft:    #0f2233;
    --wmb-danger:       #f87171;
    --wmb-success:      #4ade80;
    --wmb-success-soft: #10261a;
    --wmb-chip:         #17223a;
    --wmb-shadow-xs:    0 1px 2px rgba(0,0,0,.35);
    --wmb-shadow-sm:    0 2px 8px rgba(0,0,0,.35);
    --wmb-shadow-md:    0 14px 32px rgba(0,0,0,.45);
}

:root[data-theme="dark"] body { background: var(--wmb-bg); color: var(--wmb-ink); }

/* Bootstrap navbar/footer light overrides for dark mode */
:root[data-theme="dark"] .navbar.bg-dark { background-color: #0a1322 !important; border-bottom: 1px solid var(--wmb-border); }
:root[data-theme="dark"] .main-footer.bg-dark { background-color: #0a1322 !important; }
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--wmb-surface);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .dropdown-item { color: var(--wmb-ink); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background-color: var(--wmb-primary-soft); color: var(--wmb-ink); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--wmb-border); }

/* Map tiles içerik dışı arka plan */
:root[data-theme="dark"] .wmb-map { background: #0a0f1c; }

/* Sidebar header karanlık modda zaten koyu — accent stripe korunur */
:root[data-theme="dark"] .wmb-sidebar { background: var(--wmb-surface); border-color: var(--wmb-border); }
:root[data-theme="dark"] .bseach-input,
:root[data-theme="dark"] .custom-select__trigger,
:root[data-theme="dark"] .custom-select__panel,
:root[data-theme="dark"] .buslist,
:root[data-theme="dark"] .card.lesson-border,
:root[data-theme="dark"] .fee-tariffs .line {
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .wmb-legend {
    background: rgba(13,20,38,0.62); color: var(--wmb-ink);
    border-color: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .wmb-status {
    background: rgba(13,20,38,0.72); color: var(--wmb-ink);
    border-color: rgba(255,255,255,0.10);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .wmb-fab {
    background: rgba(13,20,38,0.62); color: var(--wmb-accent);
    border-color: rgba(255,255,255,0.10);
    backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 10px 26px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .wmb-route-info__chip { background: var(--wmb-primary-soft); color: var(--wmb-primary); border-color: var(--wmb-border); }
:root[data-theme="dark"] .hoursLine .lineHoursData { background: var(--wmb-primary-soft); color: var(--wmb-primary); }
:root[data-theme="dark"] .fee-tariffs .line .tag { background: var(--wmb-primary-soft); color: var(--wmb-primary); }
:root[data-theme="dark"] .schedule-description { background: var(--wmb-accent-soft); color: var(--wmb-ink); border-left-color: var(--wmb-accent); }
/* İptal rozeti koyu tema — genel .lineHoursData koyu kuralından sonra gelmeli */
:root[data-theme="dark"] .hoursLine .lineHoursData--cancelled {
    background: rgba(255,255,255,0.07);
    color: #8f96a3;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
:root[data-theme="dark"] .lineHoursData--cancelled .lineHoursData__mark { color: #ff6b6b; }

/* ==================== Dark mode — global Bootstrap yüzeyleri ==================== */
/* Kart, liste, form gibi Bootstrap bileşenleri tüm sayfalarda temaya uysun */
:root[data-theme="dark"] .card {
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .card .text-muted,
:root[data-theme="dark"] .cw-page .text-muted { color: var(--wmb-ink-soft) !important; }
:root[data-theme="dark"] .list-group-item {
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    border-color: var(--wmb-border-soft);
}
:root[data-theme="dark"] .list-group-item-action:hover,
:root[data-theme="dark"] .list-group-item-action:focus {
    background: var(--wmb-primary-soft);
    color: var(--wmb-ink);
}
:root[data-theme="dark"] .list-group-item.active {
    background: var(--wmb-primary-soft);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background: var(--wmb-bg);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background: var(--wmb-bg);
    color: var(--wmb-ink);
    border-color: var(--wmb-primary);
    box-shadow: 0 0 0 .2rem var(--wmb-primary-soft);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--wmb-muted); }
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] .input-group-text.bg-white {
    background: var(--wmb-bg) !important;
    color: var(--wmb-ink-soft);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .modal-content {
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: var(--wmb-border-soft); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="dark"] .badge.text-bg-light {
    background: var(--wmb-primary-soft) !important;
    color: var(--wmb-ink) !important;
}
:root[data-theme="dark"] .alert-light {
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .btn-outline-secondary {
    color: var(--wmb-ink-soft);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--wmb-primary-soft);
    color: var(--wmb-ink);
    border-color: var(--wmb-border);
}
:root[data-theme="dark"] .fc-popup {
    background: var(--wmb-surface) !important;
    color: var(--wmb-ink);
    border-color: var(--wmb-border) !important;
}

/* ==================== Theme toggle button ==================== */
.wmb-themetoggle {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: background .2s ease, transform .2s ease, color .2s ease;
}
.wmb-themetoggle:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.wmb-themetoggle .bi {
    position: absolute;
    font-size: 16px;
    transition: transform .35s ease, opacity .25s ease;
}
.wmb-themetoggle__sun  { transform: translateY(0)    rotate(0);   opacity: 1; }
.wmb-themetoggle__moon { transform: translateY(120%) rotate(45deg); opacity: 0; }
:root[data-theme="dark"] .wmb-themetoggle__sun  { transform: translateY(-120%) rotate(-45deg); opacity: 0; }
:root[data-theme="dark"] .wmb-themetoggle__moon { transform: translateY(0)     rotate(0);     opacity: 1; }

/* Sidebar header köşe varyantı (light bg) */
.wmb-themetoggle--corner {
    position: absolute;
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
}
.wmb-headtools {
    position: absolute;
    top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    z-index: 3;
}
.wmb-headtools .wmb-langswitch--corner,
.wmb-headtools .wmb-themetoggle--corner { position: static; }

/* ==================== Sidebar drawer (mobile) ==================== */
.wmb-scrim {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 26, 0.45);
    z-index: 7;
    opacity: 0;
    transition: opacity .25s ease;
    backdrop-filter: blur(2px);
}

/* Sürüklenebilir tutamak (drag handle) */
.wmb-drag-handle {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 26px;
    z-index: 6;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.wmb-drag-handle::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 5px;
    border-radius: 999px;
    background: rgba(127,140,162,0.55);
    transition: background .15s ease, width .15s ease;
}
.wmb-drag-handle:hover::before,
.wmb-drag-handle:active::before { background: var(--wmb-primary); width: 60px; }
.wmb-shell.is-dragging .wmb-sidebar { transition: none !important; }
.wmb-shell.is-dragging .wmb-drag-handle { cursor: grabbing; }

@media (max-width: 991.98px) {
    /* Harita mobilde tam ekran hisli: navbar ile alt tab bar arasını doldurur.
       78vh sabiti drawer ile tab bar arasında ölü boşluk bırakıyordu. */
    .wmb-shell {
        position: relative;
        flex-direction: row;
        height: calc(100dvh - 55px - env(safe-area-inset-top, 0px) - var(--cw-tabbar-h, 60px) - env(safe-area-inset-bottom, 0px));
        min-height: 480px;
    }
    .wmb-canvas {
        order: 1;
        width: 100%;
        flex: 1 1 100%;
        min-height: 0;
        height: 100%;
    }

    /* Drawer: 3 snap state — closed / peek / half / full
       Yükseklik CSS değişkeni ile kontrol edilir; JS sürükleme sırasında bunu günceller. */
    .wmb-sidebar {
        position: absolute;
        order: 2;
        left: 0; right: 0; bottom: 0; top: auto;
        width: 100%;
        height: var(--wmb-drawer-h, 60px);
        /* DİKKAT: yükseklikler shell'e göre % olmalı — vh kullanılırsa drawer
           shell'den uzun olur, tutamak navbar altına taşar ve erişilemez olur */
        max-height: 100%;
        flex: 0 0 auto;
        border-top: 1px solid var(--wmb-border);
        border-right: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -16px 36px rgba(11,31,58,0.22);
        transform: none;
        transition: height .32s cubic-bezier(.2,.8,.2,1);
        z-index: 8;
        overflow: hidden;
        padding-top: 22px; /* drag handle alanı */
    }
    .wmb-drag-handle { display: block; }

    /* Snap durumları (shell yüksekliğine göre %) */
    .wmb-shell[data-wmb-sidebar="closed"] { --wmb-drawer-h: 56px; }   /* sadece tutamak + canlı pill ipucu */
    .wmb-shell[data-wmb-sidebar="peek"]   { --wmb-drawer-h: 28%; }
    .wmb-shell[data-wmb-sidebar="half"]   { --wmb-drawer-h: 55%; }
    .wmb-shell[data-wmb-sidebar="full"]   { --wmb-drawer-h: 100%; }
    /* Geri uyumluluk: open => half */
    .wmb-shell[data-wmb-sidebar="open"]   { --wmb-drawer-h: 55%; }

    /* Header'ı sıkıştır ki peek modda biraz görünür kalsın */
    .wmb-sidebar__head { padding: 14px 16px 12px; }
    /* Kapalıyken içerik tamamen gizli — sadece temiz tutamak şeridi görünür */
    .wmb-shell[data-wmb-sidebar="closed"] .wmb-sidebar__head,
    .wmb-shell[data-wmb-sidebar="closed"] .wmb-sidebar__body { opacity: 0; pointer-events: none; }

    /* Scrim sadece full state'te göster (yarım modda harita ile etkileşim açık kalsın) */
    .wmb-scrim { display: none; }
    .wmb-shell[data-wmb-sidebar="full"] .wmb-scrim { display: block; opacity: 1; }

    /* Sidebar açıkken eski animasyonu iptal */
    .wmb-sidebar { animation: none !important; }

    /* FAB yığını mobilde biraz yukarıda başlar; tüm slotlar bu değişkeni izler
       (tek tek konum override etmeye gerek yok — bkz. --wmb-fab-top tanımı). */
    :root { --wmb-fab-top: 12px; }
    .wmb-fab { right: 12px; }
    /* Lejant mobilde kompakt; varsayılan katlanmış — küçük yuvarlak "i" düğmesi */
    .wmb-legend { right: 12px; bottom: calc(56px + 12px); padding: 10px 12px; min-width: 0; font-size: 11.5px; }
    .wmb-legend.is-collapsed {
        width: 42px; height: 42px; padding: 0;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .wmb-legend.is-collapsed .wmb-legend__item,
    .wmb-legend.is-collapsed .wmb-legend__label { display: none; }
    .wmb-legend.is-collapsed .wmb-legend__title {
        margin: 0; padding: 0; border: 0; gap: 0;
    }
    .wmb-legend.is-collapsed .wmb-legend__title .bi { font-size: 18px; }
    /* Drawer yüksekliği büyüdükçe legend yukarı kaysın (shell % — drawer ile aynı referans) */
    .wmb-shell[data-wmb-sidebar="peek"] .wmb-legend { bottom: calc(28% + 12px); }
    .wmb-shell[data-wmb-sidebar="half"] .wmb-legend,
    .wmb-shell[data-wmb-sidebar="open"] .wmb-legend { bottom: calc(55% + 12px); }
    .wmb-shell[data-wmb-sidebar="full"] .wmb-legend { display: none; }

    /* Sol alttaki harita kontrolleri (zoom +/−) çekmecenin ARKASINDA
       kalmasın — legend ile aynı ofset mantığı */
    .wmb-shell .maplibregl-ctrl-bottom-left { bottom: 56px; }
    .wmb-shell[data-wmb-sidebar="peek"] .maplibregl-ctrl-bottom-left { bottom: 28%; }
    .wmb-shell[data-wmb-sidebar="half"] .maplibregl-ctrl-bottom-left,
    .wmb-shell[data-wmb-sidebar="open"] .maplibregl-ctrl-bottom-left { bottom: 55%; }
    .wmb-shell[data-wmb-sidebar="full"] .maplibregl-ctrl-bottom-left { display: none; }
}

/* Daha geniş cihazlarda scrim hiç görünmesin */
@media (min-width: 992px) {
    .wmb-scrim { display: none !important; }
}

/* ==================== Footer dark uyum ==================== */
:root[data-theme="dark"] .main-footer .text-muted { color: var(--wmb-muted) !important; }
:root[data-theme="dark"] .main-footer hr.border-secondary { border-color: var(--wmb-border) !important; }


/* ============================================================
   ==================== KURUMSAL (cw-*) ========================
   Corporate layout: header, hero, sections, footer
   ============================================================ */

:root {
    --cw-primary:    #0b2f5e;
    --cw-primary-2:  #133e75;
    --cw-accent:     #f5a623;
    --cw-accent-2:   #ff8a3d;
    --cw-cyan:       #22d3ee;
    --cw-ink:        #0b1f3a;
    --cw-ink-soft:   #475569;
    --cw-muted:      #94a3b8;
    --cw-surface:    #ffffff;
    --cw-bg:         #f6f8fc;
    --cw-border:     #e5ebf4;
    --cw-radius:     18px;
    --cw-radius-sm:  12px;
    --cw-shadow-1:   0 4px 14px rgba(11,31,58,.06);
    --cw-shadow-2:   0 18px 48px rgba(11,31,58,.14);
    --cw-shadow-3:   0 28px 80px rgba(11,31,58,.22);
}
:root[data-theme="dark"] {
    --cw-primary:    #4f8cff;
    --cw-primary-2:  #6aa0ff;
    --cw-accent:     #ffb648;
    --cw-accent-2:   #ff8a3d;
    --cw-cyan:       #38bdf8;
    --cw-ink:        #e6edf7;
    --cw-ink-soft:   #aab4c5;
    --cw-muted:      #6d7a93;
    --cw-surface:    #111a2c;
    --cw-bg:         #0b1220;
    --cw-border:     #1f2a44;
    --cw-shadow-1:   0 4px 14px rgba(0,0,0,.25);
    --cw-shadow-2:   0 18px 48px rgba(0,0,0,.45);
    --cw-shadow-3:   0 28px 80px rgba(0,0,0,.55);
}

/* ---------- Header / Navbar ---------- */
.cw-header {
    position: sticky; top: 0; z-index: 40;
    /* iOS standalone (ana ekrana eklenmiş) açılışta status bar içeriğin
       ÜZERİNE biner (black-translucent + viewport-fit=cover) — üst güvenli
       alan payı olmadan logo/menü çentiğin altında kalır ve tıklanamaz.
       Normal tarayıcıda env() 0'dır, görünüm değişmez. */
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
:root[data-theme="dark"] .cw-header { background: rgba(11,18,32,.66); }
.cw-header.is-scrolled {
    background: rgba(255,255,255,.92);
    border-bottom-color: var(--cw-border);
    box-shadow: 0 8px 24px rgba(11,31,58,.06);
}
:root[data-theme="dark"] .cw-header.is-scrolled {
    background: rgba(11,18,32,.9);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cw-nav { padding-top: 12px; padding-bottom: 12px; }
.cw-brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--cw-ink);
    padding: 4px 4px 4px 0;
}
.cw-brand__mark {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-2) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px;
    box-shadow: 0 8px 22px rgba(11,31,58,.30),
                inset 0 1.5px 0 rgba(255,255,255,.4),
                inset 0 -3px 7px rgba(0,0,0,.25);
    position: relative; overflow: hidden;
}
.cw-brand__mark .bi { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); position: relative; z-index: 1; }
.cw-brand__mark::after {
    content:''; position:absolute; inset:auto -30% -40% auto;
    width:120%; height:120%; border-radius:50%;
    background: radial-gradient(closest-side, rgba(245,166,35,.55), transparent 70%);
}
.cw-brand__logo { height: 44px; width: auto; max-width: 160px; border-radius: 8px; background: transparent; object-fit: contain; }

/* Light/Dark tema mantığı — light logo default görünür, dark logo dark tema aktifken */
.cw-brand__logo--light { display: inline-block; }
.cw-brand__logo--dark  { display: none; }
:root[data-theme="dark"] .cw-brand__logo--light,
[data-theme="dark"] .cw-brand__logo--light { display: none; }
:root[data-theme="dark"] .cw-brand__logo--dark,
[data-theme="dark"] .cw-brand__logo--dark  { display: inline-block; }

/* Footer için: default görünen logo dark versiyon (footer arka planı koyu) */
.cw-brand--footer .cw-brand__logo { height: 52px; max-width: 200px; }

/* Belediye logosu (footer) — rozetlerle bitişik durmasın, altında nefes payı olsun */
.cw-footer__muni { margin: 18px 0 16px; }
.cw-footer__muni-logo {
    height: 68px;
    width: auto;
    max-width: 220px;
    filter: brightness(1.05);
    transition: opacity .2s;
}
.cw-footer__muni a:hover .cw-footer__muni-logo { opacity: .85; }

/* Kurumsal yandan-görünüm otobüs ikonu (currentColor ile renge uyar) */
:root {
    --cw-bus-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill-rule='evenodd'%20d='M4%204h16a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2z%20m1%202h14a1%201%200%200%201%201%201v2a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V7a1%201%200%200%201%201-1z'/%3E%3Ccircle%20cx='7.5'%20cy='17.4'%20r='1.9'/%3E%3Ccircle%20cx='16.5'%20cy='17.4'%20r='1.9'/%3E%3C/svg%3E");
}
.cw-ico-bus {
    display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: var(--cw-bus-svg) center / contain no-repeat;
            mask: var(--cw-bus-svg) center / contain no-repeat;
}
.cw-brand__text { display: flex; flex-direction: column; line-height: 1; }
.cw-brand__title {
    font-weight: 800; letter-spacing: .3px; font-size: 15px; color: var(--cw-ink);
    text-transform: uppercase;
}
.cw-brand__sub { font-size: 11px; color: var(--cw-muted); margin-top: 4px; letter-spacing: .4px; }

.cw-nav__toggler {
    border: 1px solid var(--cw-border);
    background: var(--cw-surface);
    width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 0;
}
.cw-nav__toggler span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--cw-ink);
    transition: transform .2s ease, opacity .2s ease;
}
@media (min-width: 1200px) { .cw-nav__toggler { display: none; } }

.cw-nav__list { gap: 4px; }
.cw-nav__link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--cw-ink-soft);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    white-space: nowrap; /* menü etiketleri tek satırda kalsın, alt satıra kırılmasın */
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cw-nav__link .bi { color: var(--cw-accent); font-size: 15px; }

/* Menü satırı asla sarmasın — sarma "Üye Ol" gibi düğmeleri alt satıra düşürüyordu.
   NOT: kırılım artık xl (1200px) — 992–1200 bandında menü hamburger'a katlanır,
   çünkü o bantta tüm öğeler tek satıra sığmıyordu ve sağdaki butonlar taşıyordu. */
@media (min-width: 1200px) {
    .cw-nav__collapse, .cw-nav__list, .cw-nav__tools { flex-wrap: nowrap; }

    /* Header kabı 1320px sınırından çıkarılır. `container-xl` bu sınırı koyduğu
       için menü (marka + 7 bağlantı + dil/tema/oturum düğmeleri) ne kadar geniş
       ekranda olursak olalım 1320px'e sıkışıyor ve sağdaki "Üye Ol" ekran dışına
       taşıyordu — ölçüm: 1685px ekranda gereken 1774px, kap 1320px.
       Header tam genişlikte bir şerit olduğu için kabın da ekranı kullanması
       doğru; sayfa içeriğinin kapları etkilenmez (seçici yalnızca .cw-nav). */
    .cw-nav > .container-xl { max-width: none; padding-left: 22px; padding-right: 22px; }
}

/* Orta genişlikte (1200–1800px) menü tek satıra sığsın — kompakt ölçüler.
   nowrap ile etiketler genişlediği için padding/font küçültülür,
   hava durumu açıklaması gizlenir. (1512px MacBook dahil)
   Üst sınır 1600→1800: tam ölçü menü + hava açıklaması 1774px istiyor,
   1600'lük ekranda bu sığmıyordu. */
@media (min-width: 1200px) and (max-width: 1899.98px) {
    .cw-nav__list { gap: 0; }
    .cw-nav__link { padding: 7px 6px; font-size: 12.5px; gap: 5px; }
    .cw-nav__link .bi { font-size: 13px; }
    .cw-nav__tools { gap: 4px; }
    .cw-nav__login { padding: 7px 9px; font-size: 12.5px; }
    .cw-nav__cta { padding: 8px 11px; font-size: 12.5px; }
}

/* 1200–1700 bandı: anonim menü 9 öğe taşıyor (Bakiye Sorgulama'ya Duyurular
   da eklendi) ve üstteki kompakt ölçülerle bile tek satıra sığmıyordu —
   sağdaki Giriş Yap / Üye Ol düğmeleri kayıp taşıyordu (1512px MacBook ve
   %125 zoom'lu geniş ekranlar dahil). İkonlar GÖRÜNÜR kalır (gizlenmesi
   istenmedi); bağlantı/düğme ölçüleri bir kademe sıkılır, kap dolgusu
   daraltılır. (Üst sınır 1600→1700: Duyurular sonrası 1600–1700 bandı da
   taşıyordu — ölçüm 2026-08-19: anonim TR menü tam ölçüyle 1669px istiyor.) */
@media (min-width: 1200px) and (max-width: 1699.98px) {
    .cw-nav > .container-fluid { padding-left: 14px; padding-right: 14px; }
    .cw-nav__link { padding: 7px 4px; font-size: 12px; gap: 4px; }
    .cw-nav__link .bi { font-size: 12.5px; }
    .cw-nav__tools { gap: 2px; }
    .cw-nav__login { padding: 7px 8px; font-size: 12px; }
    .cw-nav__cta { padding: 8px 10px; font-size: 12px; }
}

/* Dar masaüstünde dil düğmesi: bayrak kalır, "TR/EN" yazısı gizlenir.
   Ölçüm: bayrak 18px, yazı ~20px — yani bayrak gösterip yazıyı gizlemek
   tersinden daha DAR bir düğme veriyor. Dil zaten bayraktan okunuyor,
   erişilebilirlik için bağlantıda title/aria-label duruyor.
   1700 üstünde ikisi birden görünür (üst sınır menü bandıyla birlikte
   1600→1700 çekildi). */
@media (min-width: 1200px) and (max-width: 1699.98px) {
    .wmb-langswitch--nav .wmb-langswitch__code { display: none; }
    .wmb-langswitch--nav .wmb-langswitch__btn { padding: 4px 6px; }
}

/* 1200–1600: marka yazıları gizlenir, yalnızca logo kalır — logo zaten şehir
   adını taşıyor. Ölçüm 2026-08-19: 1420–1600 bandında marka yazısı (121px)
   görünürken anonim menü 1463px istiyordu (1420 ekranda 43px taşma);
   üst sınır bu yüzden 1420→1600 çekildi. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .cw-brand__title, .cw-brand__sub { display: none; }
}

/* En dar masaüstü bandı (1200–1420): ikonlar görünür tutulduğu için satır
   hâlâ taşıyordu (ölçüm 2026-08-19: Duyurular sonrası anonim TR menü
   1266px istiyor, 1200 ekranda 66px taşma) — dolgu/boşluk/punto son kademe
   sıkılır ve logo bir tık küçültülür (44→34px; oran korunur).
   (Yukarıdaki 1200–1700 kurallarından SONRA durmalı ki kazansın;
   eski alt sınır 1300 idi, Duyurular sonrası 1420'ye çekildi.) */
@media (min-width: 1200px) and (max-width: 1419.98px) {
    .cw-nav > .container-fluid { padding-left: 8px; padding-right: 8px; }
    .cw-nav__link { padding: 7px 2px; gap: 3px; font-size: 11px; }
    .cw-nav__link .bi { font-size: 11.5px; }
    .cw-nav__tools { gap: 0; }
    .cw-nav__login { padding: 7px 5px; font-size: 11.5px; }
    .cw-nav__cta { padding: 7px 7px; font-size: 11.5px; }
    .wmb-langswitch--nav .wmb-langswitch__btn { padding: 4px 3px; }
    .cw-brand { gap: 6px; }
    .cw-brand__logo { height: 34px; }
}
.cw-nav__link:hover { background: rgba(11,47,94,.06); color: var(--cw-primary); transform: translateY(-1px); }
:root[data-theme="dark"] .cw-nav__link:hover { background: rgba(79,140,255,.14); color: var(--cw-primary); }

.cw-nav__tools { gap: 8px; }
.cw-nav__login {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 999px;
    color: var(--cw-ink); font-weight: 600; font-size: 14px;
    text-decoration: none; border: 1px solid var(--cw-border);
    background: var(--cw-surface); transition: .2s ease;
    white-space: nowrap;
}
.cw-nav__login:hover { border-color: var(--cw-primary); color: var(--cw-primary); }

/* ==================== Kullanıcı menüsü (Profil / Ayarlar / Çıkış) ==================== */
.cw-usermenu {
    min-width: 230px;
    padding: 8px;
    margin-top: 10px !important;
    border: 1px solid var(--cw-border);
    border-radius: 14px;
    background: var(--cw-surface);
    box-shadow: 0 18px 44px rgba(11, 31, 58, .18);
}
.cw-usermenu .dropdown-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--cw-ink);
    transition: background .15s ease, color .15s ease;
}
.cw-usermenu__ico {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(11, 47, 94, .07);
    color: var(--cw-primary);
    font-size: 14px;
}
.cw-usermenu .dropdown-item:hover,
.cw-usermenu .dropdown-item:focus { background: rgba(11, 47, 94, .06); color: var(--cw-primary); }
.cw-usermenu .dropdown-divider { margin: 6px 4px; border-color: var(--cw-border); opacity: 1; }
.cw-usermenu__logout { color: #d64545 !important; }
.cw-usermenu__logout .cw-usermenu__ico { background: rgba(214, 69, 69, .1); color: #d64545; }
.cw-usermenu__logout:hover, .cw-usermenu__logout:focus { background: rgba(214, 69, 69, .08) !important; }
:root[data-theme="dark"] .cw-usermenu { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .cw-usermenu .dropdown-item:hover,
:root[data-theme="dark"] .cw-usermenu .dropdown-item:focus { background: rgba(79, 140, 255, .14); }
:root[data-theme="dark"] .cw-usermenu__ico { background: rgba(79, 140, 255, .16); }

/* DİKKAT: menü, header'ın hava ambiyansı değişkenlerini MİRAS ALMAZ.
   .cw-header[data-wx-mood] blokları --cw-surface / --wmb-surface'ı header'ın
   CAM yüzeyleri için yarı saydam beyaza (ör. rgba(255,255,255,.10)) çeker ve
   mürekkebi açık renge alır. Bu değerler header şeridinin üstünde doğru,
   ama açılır menü header'ın DIŞINA — haritanın üstüne — taşıyor: panel
   neredeyse görünmez oluyor, açık renk yazı aydınlık haritada okunmuyordu.
   Bu yüzden menü kendi üstünde tema değerlerini yeniden sabitler; menünün
   kendi tanımı, header'dan gelen mirası yener. */
.cw-header .cw-usermenu {
    --cw-ink:      #0b1f3a;
    --cw-primary:  #0b2f5e;
    --cw-surface:  #ffffff;
    --cw-border:   #e5ebf4;
    --wmb-ink:     #0b1f3a;
    --wmb-surface: #ffffff;
    --wmb-border:  #e5ebf4;
}
:root[data-theme="dark"] .cw-header .cw-usermenu {
    --cw-ink:      #e6edf7;
    --cw-primary:  #4f8cff;
    --cw-surface:  #111a2c;
    --cw-border:   #1f2a44;
    --wmb-ink:     #e6edf7;
    --wmb-surface: #111a2c;
    --wmb-border:  #1f2a44;
}

/* WMB — kullanıcı konumu noktası (Konumumu Bul) */
.wmb-userdot {
    width: 16px; height: 16px; border-radius: 50%;
    background: #0ea5e9;
    border: 3px solid #fff;
    box-shadow: 0 0 0 6px rgba(14, 165, 233, .25), 0 2px 6px rgba(0, 0, 0, .35);
}

/* ==================== Binme durağı önerisi ==================== */
/* Önerilen durak — yeşil, nabız gibi atan işaret */
.wmb-boarddot {
    width: 18px; height: 18px; border-radius: 50%;
    background: #16a34a;
    border: 3px solid #fff;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .45), 0 2px 6px rgba(0, 0, 0, .35);
    animation: wmbBoardPulse 1.6s ease-out infinite;
}
@keyframes wmbBoardPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45), 0 2px 6px rgba(0,0,0,.35); }
    70%  { box-shadow: 0 0 0 14px rgba(22, 163, 74, 0), 0 2px 6px rgba(0,0,0,.35); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0), 0 2px 6px rgba(0,0,0,.35); }
}

/* Yeniden-aç FAB'ı — hat seçilince görünür (JS d-none kaldırır).
   Slot 3: harita görünümü düğmesinin altında. */
.wmb-fab.wmb-fab--board { top: calc(var(--wmb-fab-top) + var(--wmb-fab-step) * 3); }
.wmb-fab--board { color: #16a34a; }
:root[data-theme="dark"] .wmb-fab--board { color: #4ade80; }

/* Modal katmanı */
.wmb-board {
    position: absolute; inset: 0;
    z-index: 30;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
}
.wmb-board.d-none { display: none; }
.wmb-board__backdrop {
    position: absolute; inset: 0;
    background: rgba(11, 31, 58, .38);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.wmb-board__card {
    position: relative;
    width: 100%; max-width: 380px;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 16px;
    box-shadow: var(--wmb-shadow-md);
    padding: 20px;
    color: var(--wmb-ink);
    animation: wmbBoardIn .22s ease;
}
@keyframes wmbBoardIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.wmb-board__x {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    border: none; background: transparent;
    color: var(--wmb-muted); font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.wmb-board__x:hover { background: var(--wmb-primary-soft); color: var(--wmb-ink); }
.wmb-board__head { display: flex; gap: 12px; align-items: flex-start; padding-right: 26px; }
.wmb-board__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(22, 163, 74, .12); color: #16a34a; font-size: 20px;
}
.wmb-board__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.wmb-board__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--wmb-muted); line-height: 1.4; }
.wmb-board__body { margin-top: 16px; }
.wmb-board__loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wmb-muted); padding: 6px 0; }

/* Sonuç */
.wmb-board__stopname {
    display: flex; align-items: center; gap: 8px;
    font-size: 17px; font-weight: 700; margin-bottom: 12px;
}
.wmb-board__stopname i { color: #16a34a; }
.wmb-board__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.wmb-board__metric {
    background: var(--wmb-primary-soft);
    border: 1px solid var(--wmb-border);
    border-radius: 10px; padding: 8px 10px;
}
.wmb-board__metric--full { grid-column: 1 / -1; }
.wmb-board__metric-lbl { display: block; font-size: 11px; color: var(--wmb-muted); }
.wmb-board__metric-val { display: block; font-size: 15px; font-weight: 700; color: var(--wmb-ink); }
.wmb-board__note {
    font-size: 12.5px; line-height: 1.4; border-radius: 10px;
    padding: 9px 11px; margin-bottom: 14px;
    display: flex; gap: 8px; align-items: flex-start;
}
.wmb-board__note i { margin-top: 1px; }
.wmb-board__note--ok   { background: rgba(22, 163, 74, .10); color: #15803d; }
.wmb-board__note--warn { background: rgba(245, 166, 35, .12); color: #b45309; }
.wmb-board__note--info { background: var(--wmb-accent-soft); color: var(--wmb-ink); }
:root[data-theme="dark"] .wmb-board__note--ok   { color: #4ade80; }
:root[data-theme="dark"] .wmb-board__note--warn { color: #fbbf24; }
.wmb-board__actions { display: flex; flex-direction: column; gap: 8px; }
.wmb-board__error { font-size: 13px; color: var(--wmb-muted); text-align: center; }
.wmb-board__error .btn { margin-top: 12px; }
.cw-nav__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 999px;
    color: #fff !important; font-weight: 700; font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-2) 100%);
    box-shadow: 0 10px 26px rgba(11,31,58,.28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cw-nav__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11,31,58,.32); }

.wmb-langswitch--nav {
    background: rgba(11,31,58,.06); border-color: rgba(11,31,58,.1); margin: 0;
}
.wmb-langswitch--nav .wmb-langswitch__btn { color: var(--cw-ink); }
.wmb-langswitch--nav .wmb-langswitch__btn:hover { background: rgba(11,31,58,.1); }
.wmb-langswitch--nav .wmb-langswitch__btn.is-active { background: var(--cw-primary); color: #fff; box-shadow: 0 4px 12px rgba(11,47,94,.3); }
:root[data-theme="dark"] .wmb-langswitch--nav { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .wmb-langswitch--nav .wmb-langswitch__btn { color: var(--cw-ink); }
:root[data-theme="dark"] .wmb-langswitch--nav .wmb-langswitch__btn.is-active { background: var(--cw-accent); color: #1a2742; }

.wmb-themetoggle--nav {
    border-color: var(--cw-border);
    background: var(--cw-surface);
    color: var(--cw-ink);
    width: 42px; height: 42px;
}
.wmb-themetoggle--nav:hover { background: rgba(11,47,94,.06); }

/* ---------- Shared section ---------- */
.cw-section { padding: 90px 0; position: relative; }
.cw-section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.cw-section__title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800; letter-spacing: -.5px;
    color: var(--cw-ink); margin: 14px 0 12px;
    line-height: 1.15;
}
.cw-section__lead { font-size: 17px; color: var(--cw-ink-soft); line-height: 1.6; }
.cw-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--cw-primary);
    background: rgba(11,47,94,.08);
    border: 1px solid rgba(11,47,94,.12);
}
.cw-eyebrow__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cw-accent);
    box-shadow: 0 0 0 4px rgba(245,166,35,.25);
    animation: wmbPulse 1.4s ease-in-out infinite;
}
.cw-eyebrow--solid {
    background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(11,47,94,.1));
    color: var(--cw-primary);
    border-color: transparent;
}
.cw-eyebrow--solid .bi { color: var(--cw-accent); }
.cw-grad-text {
    background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent-2) 50%, var(--cw-primary) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    white-space: nowrap;
}

/* Reveal */
.cw-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.cw-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .cw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Buttons */
.cw-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 14px;
    font-weight: 700; font-size: 15px; letter-spacing: .2px;
    text-decoration: none; border: 1px solid transparent;
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cw-btn--primary {
    background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-2) 100%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(11,31,58,.3);
}
.cw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,31,58,.38); color: #fff; }
.cw-btn--ghost {
    background: transparent; color: var(--cw-ink);
    border-color: var(--cw-border);
}
.cw-btn--ghost:hover { border-color: var(--cw-primary); color: var(--cw-primary); transform: translateY(-2px); }
.cw-btn--accent {
    background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent-2) 100%);
    color: #2a1a00;
    box-shadow: 0 14px 34px rgba(245,166,35,.35);
}
.cw-btn--accent:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(245,166,35,.45); color: #2a1a00; }
.cw-btn--lg { padding: 16px 26px; font-size: 16px; }
.cw-btn__arrow { transition: transform .2s ease; }
.cw-btn:hover .cw-btn__arrow { transform: translateX(4px); }

/* ---------- HERO ---------- */
.cw-hero {
    position: relative; overflow: hidden;
    padding: clamp(60px, 10vw, 120px) 0 140px;
    background: linear-gradient(180deg, #fff 0%, var(--cw-bg) 100%);
    --px: 0px; --py: 0px;
}
:root[data-theme="dark"] .cw-hero { background: linear-gradient(180deg, #0e1830 0%, #0b1220 100%); }
.cw-hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cw-hero__blob {
    position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(80px);
    opacity: .55; transition: transform .6s ease;
}
.cw-hero__blob--a { top: -160px; left: -140px; background: radial-gradient(circle, rgba(11,47,94,.55), transparent 70%); transform: translate(var(--px), var(--py)); }
.cw-hero__blob--b { top: -80px; right: -180px; background: radial-gradient(circle, rgba(245,166,35,.45), transparent 70%); transform: translate(calc(var(--px) * -.6), calc(var(--py) * -.6)); }
.cw-hero__blob--c { bottom: -220px; left: 30%; background: radial-gradient(circle, rgba(34,211,238,.3), transparent 70%); transform: translate(calc(var(--px) * .3), calc(var(--py) * .3)); }
.cw-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(11,31,58,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,31,58,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    opacity: .55;
}
:root[data-theme="dark"] .cw-hero__grid {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
/* Şehir simge fotoğrafı (City:HeroImage — Van Gölü, Pamukkale…): kurumsal ve
   BELİRGİN bir zemin bandı. Üst kenarı yumuşakça hero'ya karışır; metin sol
   kolonda kaldığından sola doğru da hafifçe soldurulur. Hafif doygunluk kısma
   fotoğrafları kurumsal palete yaklaştırır. */
.cw-hero__city {
    position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 52%; object-fit: cover; object-position: center 70%;
    opacity: .26; pointer-events: none;
    filter: saturate(.8);
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 92%);
    mask-image: linear-gradient(to top, #000 40%, transparent 92%);
}
:root[data-theme="dark"] .cw-hero__city { opacity: .24; filter: saturate(.65) brightness(.8); }
.cw-hero__title {
    font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04;
    font-weight: 900; letter-spacing: -1.2px;
    color: var(--cw-ink); margin: 20px 0 18px;
}
.cw-hero__lead { font-size: clamp(15px, 1.4vw, 18px); color: var(--cw-ink-soft); max-width: 560px; line-height: 1.6; }
.cw-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cw-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.cw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    color: var(--cw-ink-soft); font-size: 12.5px; font-weight: 600;
    box-shadow: var(--cw-shadow-1);
}
.cw-chip .bi { color: var(--cw-accent); }

.cw-hero__stage { position: relative; min-height: 460px; }
.cw-mapmock {
    position: relative;
    width: 100%; max-width: 520px; margin-left: auto;
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid var(--cw-border);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--cw-shadow-3);
    transform: perspective(1000px) rotateY(-6deg) rotateX(4deg);
    animation: cwFloat 6s ease-in-out infinite;
}
:root[data-theme="dark"] .cw-mapmock { background: linear-gradient(180deg, #12213b 0%, #0b1426 100%); }
.cw-mapmock__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(11,31,58,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,31,58,.08) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 45%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 45%, transparent 85%);
}
:root[data-theme="dark"] .cw-mapmock__grid {
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}
.cw-mapmock__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-mapmock__pin {
    position: absolute; width: 34px; height: 34px;
    border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    border: 3px solid #fff;
    animation: cwBob 3s ease-in-out infinite;
}
.cw-mapmock__pin--a { top: 72%; left: 6%; background: #16a34a; }
.cw-mapmock__pin--b { top: 16%; right: 4%; background: #ef4444; animation-delay: .8s; }
.cw-mapmock__bus {
    position: absolute; width: 54px; height: 46px;
    display: grid; place-items: center;
    animation: cwBusDrive 5.5s cubic-bezier(.5,.05,.5,.95) infinite;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.32));
}
.cw-mapmock__bus img { width: 100%; height: 100%; display: block; }
/* JS sürümü (WmbMapCore 3B gövde + path takibi) devredeyken keyframe yedeği
   kapanır; filter da kaldırılır — filter 3B transform bağlamını düzleştirip
   gövdeyi ezer (gölge zaten gövdenin kendi zemin yüzünde). */
.cw-mapmock__bus.is-live {
    animation: none;
    filter: none;
    width: auto; height: auto;
}
/* Yandan görünüm otobüs (bus-side.svg, 48×36 — kısa/tombul) — metin içi küçük rozet */
.cw-bus3d-inline { height: 1.35em; width: auto; vertical-align: -0.32em; margin-right: 2px; }
.cw-mapmock__legend {
    position: absolute; left: 14px; bottom: 14px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border: 1px solid var(--cw-border); border-radius: 10px;
    padding: 6px 10px;
    display: flex; gap: 10px;
    font-size: 11.5px; font-weight: 600; color: var(--cw-ink-soft);
}
.cw-mapmock__legend .bi { margin-right: 4px; color: var(--cw-accent); }
.cw-mapmock__legend .cw-ico-bus { margin-right: 4px; color: var(--cw-accent); }
:root[data-theme="dark"] .cw-mapmock__legend { background: rgba(17,26,44,.92); }

.cw-float-card {
    position: absolute; z-index: 3;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: var(--cw-shadow-2);
    padding: 14px 16px;
    min-width: 240px;
    color: var(--cw-ink);
}
.cw-float-card--live {
    top: 10%; left: -20px;
    animation: cwFloat 6s ease-in-out infinite;
}
.cw-float-card--chip {
    bottom: 6%; right: -16px;
    display: flex; align-items: center; gap: 12px;
    min-width: auto;
    animation: cwFloat 7s ease-in-out infinite reverse;
}
.cw-float-card--chip .bi { font-size: 22px; color: #16a34a; }
.cw-float-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cw-float-card__title { font-weight: 700; font-size: 13px; }
.cw-float-card__tag {
    margin-left: auto;
    background: rgba(245,166,35,.14);
    color: var(--cw-accent);
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
}
.cw-livedot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,.25);
    animation: wmbPulse 1.4s ease-in-out infinite;
}
.cw-float-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cw-line-badge {
    background: linear-gradient(135deg, var(--cw-primary), var(--cw-primary-2));
    color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .5px;
    padding: 5px 9px; border-radius: 8px; min-width: 44px; text-align: center;
}
.cw-line-name { font-size: 13px; color: var(--cw-ink-soft); font-weight: 600; }
.cw-progress {
    height: 6px; background: rgba(11,31,58,.08); border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.cw-progress span {
    display: block; height: 100%; width: var(--p, 50%);
    background: linear-gradient(90deg, var(--cw-accent), var(--cw-primary));
    border-radius: inherit;
    animation: cwGrow 2s ease-in-out infinite alternate;
}
.cw-progress--sm { height: 4px; }
.cw-float-sub { font-size: 11.5px; color: var(--cw-muted); display: inline-flex; align-items: center; gap: 4px; }
.cw-float-sub .bi { color: var(--cw-accent); margin-right: 4px; }
.cw-float-sub .cw-ico-bus { color: var(--cw-accent); margin-right: 4px; }
.cw-float-sep { margin: 0 8px; color: var(--cw-border); }

.cw-hero__wave {
    position: absolute; left: 0; right: 0; bottom: -1px;
    line-height: 0;
}
.cw-hero__wave svg { width: 100%; height: 80px; display: block; }
.cw-hero__wave path { fill: var(--cw-bg); }
:root[data-theme="dark"] .cw-hero__wave path { fill: var(--cw-bg); }

@keyframes cwFloat {
    0%, 100% { transform: perspective(1000px) rotateY(-6deg) rotateX(4deg) translateY(0); }
    50%      { transform: perspective(1000px) rotateY(-6deg) rotateX(4deg) translateY(-10px); }
}
.cw-float-card--live { animation: cwFloatCard 6s ease-in-out infinite; }
.cw-float-card--chip { animation: cwFloatCard 7s ease-in-out infinite reverse; }
@keyframes cwFloatCard {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes cwBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes cwBusDrive {
    0%   { top: 72%; left: 4%;  transform: rotate(0deg); }
    50%  { top: 28%; left: 45%; transform: rotate(-8deg); }
    100% { top: 16%; left: 86%; transform: rotate(0deg); }
}
@keyframes cwGrow {
    from { width: calc(var(--p, 50%) * .8); }
    to   { width: var(--p, 50%); }
}

/* ---------- STATS ---------- */
.cw-stats {
    background: var(--cw-bg);
    padding: 10px 0 60px;
}
.cw-stats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    margin-top: -90px; position: relative; z-index: 5;
}
.cw-stat {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--cw-shadow-1);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cw-stat:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow-2); }
.cw-stat__ico {
    font-size: 24px; color: var(--cw-accent);
    background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(11,47,94,.1));
    width: 52px; height: 52px; display: inline-grid; place-items: center;
    border-radius: 14px; margin-bottom: 14px;
}
.cw-stat__num {
    font-size: clamp(26px, 3vw, 38px); font-weight: 900;
    color: var(--cw-ink); letter-spacing: -.5px; line-height: 1;
}
.cw-stat__num small { font-size: .6em; font-weight: 700; color: var(--cw-accent); }
.cw-stat__label { font-size: 13px; color: var(--cw-ink-soft); margin-top: 8px; font-weight: 600; }
@media (max-width: 768px) {
    .cw-stats__grid { grid-template-columns: repeat(2, 1fr); margin-top: -60px; }
    .cw-hero { padding-bottom: 120px; }
}

/* ---------- FEATURES ---------- */
.cw-features { background: var(--cw-bg); }
.cw-feature {
    display: block; position: relative;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    padding: 32px 28px 24px;
    color: var(--cw-ink);
    text-decoration: none;
    box-shadow: var(--cw-shadow-1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    overflow: hidden;
}
.cw-feature::before {
    content: ''; position: absolute; inset: 0 auto auto 0;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,166,35,.15), transparent 70%);
    transform: translate(-40%, -40%);
    transition: transform .4s ease, opacity .4s ease;
    opacity: 0;
}
.cw-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--cw-shadow-2);
    border-color: rgba(245,166,35,.35);
}
.cw-feature:hover::before { opacity: 1; transform: translate(-30%, -30%); }
.cw-feature__ico {
    display: inline-grid; place-items: center;
    width: 56px; height: 56px; border-radius: 16px;
    color: #fff; font-size: 22px; margin-bottom: 18px;
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: 0 12px 26px rgba(11,31,58,.30),
                inset 0 1.5px 0 rgba(255,255,255,.5),
                inset 0 -4px 8px rgba(0,0,0,.22);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cw-feature__ico::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 58%);
}
.cw-feature__ico .bi { filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)); }
.cw-feature:hover .cw-feature__ico {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 18px 34px rgba(11,31,58,.36),
                inset 0 1.5px 0 rgba(255,255,255,.55),
                inset 0 -4px 8px rgba(0,0,0,.24);
}
.cw-feature__ico--a { background: linear-gradient(135deg, #0b2f5e, #133e75); }
.cw-feature__ico--b { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.cw-feature__ico--c { background: linear-gradient(135deg, #16a34a, #84cc16); }
.cw-feature__ico--d { background: linear-gradient(135deg, #f5a623, #ff8a3d); }
.cw-feature__ico--e { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.cw-feature__ico--f { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.cw-feature__title { font-size: 19px; font-weight: 800; color: var(--cw-ink); margin-bottom: 10px; }
.cw-feature__desc { font-size: 14.5px; color: var(--cw-ink-soft); line-height: 1.55; margin-bottom: 18px; min-height: 48px; }
.cw-feature__link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cw-primary); font-size: 13px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase;
    transition: gap .2s ease;
}
.cw-feature__link .bi { transition: transform .2s ease; }
.cw-feature:hover .cw-feature__link { gap: 10px; }
.cw-feature:hover .cw-feature__link .bi { transform: translateX(3px); }

/* ---------- HOW ---------- */
.cw-how { background: var(--cw-surface); }
.cw-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    position: relative;
}
.cw-step {
    position: relative; z-index: 2;
    padding: 36px 28px;
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-shadow-1);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.cw-step:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow-2); }
.cw-step__num {
    position: absolute; top: 14px; right: 20px;
    font-size: 48px; font-weight: 900;
    color: rgba(11,31,58,.05);
    line-height: 1;
    letter-spacing: -2px;
}
:root[data-theme="dark"] .cw-step__num { color: rgba(255,255,255,.06); }
.cw-step__ico {
    font-size: 28px; color: #fff;
    width: 64px; height: 64px; border-radius: 18px;
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--cw-accent) 0%, var(--cw-accent-2) 100%);
    box-shadow: 0 12px 30px rgba(245,166,35,.35);
    margin-bottom: 18px;
}
.cw-step__title { font-size: 18px; font-weight: 800; margin-bottom: 10px; color: var(--cw-ink); }
.cw-step__desc  { font-size: 14px; color: var(--cw-ink-soft); line-height: 1.55; }
.cw-steps__line {
    display: none;
    position: absolute; left: 10%; right: 10%; top: 110px;
    height: 2px; background: linear-gradient(90deg, transparent, var(--cw-border), transparent);
    z-index: 1;
}
@media (min-width: 992px) { .cw-steps__line { display: block; } }
@media (max-width: 768px) { .cw-steps { grid-template-columns: 1fr; } }

/* ---------- APP ---------- */
.cw-app { background: var(--cw-bg); position: relative; overflow: hidden; }
.cw-applist { list-style: none; padding: 0; margin: 22px 0 28px; }
.cw-applist li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; color: var(--cw-ink); font-weight: 600; font-size: 15px;
}
.cw-applist .bi { color: #16a34a; font-size: 18px; }
.cw-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.cw-store {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 18px; border-radius: 14px;
    background: #0b1220; color: #fff; text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cw-store:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.25); color: #fff; }
.cw-store .bi { font-size: 26px; }
.cw-store span { display: flex; flex-direction: column; line-height: 1.1; }
.cw-store small { font-size: 10px; opacity: .7; letter-spacing: .5px; text-transform: uppercase; }
.cw-store strong { font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.cw-store--disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.cw-store--sm { padding: 8px 14px; }
.cw-store--sm .bi { font-size: 22px; }
.cw-store--sm strong { font-size: 13px; }

.cw-phone-wrap { position: relative; display: grid; place-items: center; }
.cw-phone-glow {
    position: absolute; z-index: 0;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,166,35,.35), transparent 70%);
    filter: blur(40px);
    animation: cwFloatCard 8s ease-in-out infinite;
}
.cw-phone {
    position: relative; z-index: 1;
    width: 280px; height: 560px;
    background: linear-gradient(180deg, #0b1220 0%, #131c30 100%);
    border-radius: 42px;
    padding: 12px;
    box-shadow: 0 40px 80px rgba(11,31,58,.35), inset 0 0 0 1px rgba(255,255,255,.08);
    transform: perspective(1200px) rotateY(-12deg) rotateX(6deg);
    animation: cwFloatCard 7s ease-in-out infinite;
}
.cw-phone__notch {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 22px; border-radius: 20px; background: #000; z-index: 2;
}
.cw-phone__screen {
    background: linear-gradient(180deg, #eef2f7 0%, #ffffff 100%);
    border-radius: 32px; height: 100%;
    padding: 38px 18px 18px;
    overflow: hidden; position: relative;
    color: var(--cw-ink);
}
:root[data-theme="dark"] .cw-phone__screen { background: linear-gradient(180deg, #1a243e 0%, #0f192f 100%); color: #fff; }
.cw-phone__topbar { display: flex; justify-content: space-between; font-size: 11px; color: var(--cw-ink-soft); margin-bottom: 14px; font-weight: 600; }
.cw-phone__topbar .bi + .bi { margin-left: 4px; }
.cw-phone__hello { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.cw-phone__sub { font-size: 12px; color: var(--cw-muted); margin-bottom: 16px; }
.cw-phone__card {
    background: #fff; border: 1px solid var(--cw-border);
    border-radius: 16px; padding: 12px 14px;
    box-shadow: var(--cw-shadow-1);
}
:root[data-theme="dark"] .cw-phone__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.cw-phone__card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; }
.cw-phone__card-head span:nth-child(2) { flex: 1; color: var(--cw-ink-soft); }
.cw-phone__eta {
    background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
    color: #2a1a00; padding: 3px 8px; border-radius: 8px;
    font-weight: 800; font-size: 11px; letter-spacing: .5px;
}
.cw-phone__stops { display: flex; gap: 6px; margin-top: 10px; }
.cw-dot { flex: 1; height: 4px; background: rgba(11,31,58,.1); border-radius: 999px; }
.cw-dot--on { background: linear-gradient(90deg, var(--cw-accent), var(--cw-primary)); }
.cw-phone__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cw-phone__tile {
    background: var(--cw-surface); border: 1px solid var(--cw-border);
    border-radius: 14px; padding: 12px 8px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--cw-ink-soft);
}
.cw-phone__tile .bi { font-size: 18px; color: var(--cw-primary); }
:root[data-theme="dark"] .cw-phone__tile { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: #cbd5e1; }
.cw-phone__ticker {
    position: absolute; bottom: 22px; left: 18px; right: 18px;
    background: linear-gradient(135deg, var(--cw-primary), var(--cw-primary-2));
    color: #fff; border-radius: 14px;
    padding: 10px 14px; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 14px 28px rgba(11,31,58,.3);
}
.cw-phone__ticker .bi { color: var(--cw-accent); }

/* ---------- TRUST ---------- */
.cw-trust { background: var(--cw-surface); }
.cw-trust__head { text-align: center; margin-bottom: 36px; }
.cw-trust__head h3 {
    font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--cw-ink);
    margin-bottom: 10px;
}
.cw-trust__head p { color: var(--cw-ink-soft); max-width: 620px; margin: 0 auto; font-size: 15px; }
.cw-trust__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.cw-badge {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 22px; border-radius: var(--cw-radius-sm);
    background: linear-gradient(135deg, rgba(11,47,94,.04), rgba(245,166,35,.06));
    border: 1px solid var(--cw-border);
    color: var(--cw-ink); font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cw-badge:hover { transform: translateY(-3px); box-shadow: var(--cw-shadow-1); }
.cw-badge .bi {
    font-size: 22px; color: var(--cw-primary);
    background: rgba(11,47,94,.08);
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
}
.cw-badge--sm {
    padding: 6px 10px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px;
}
.cw-badge--sm .bi {
    font-size: 13px; width: auto; height: auto;
    background: transparent; color: var(--cw-accent);
}
@media (max-width: 768px) {
    /* minmax(0,1fr) + min-width:0: uzun rozet metni kolonundan taşıp sayfayı
       yatayda genişletmesin (taşma fixed tab bar'ı ve story overlay'ini kaydırıyordu) */
    .cw-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cw-badge { min-width: 0; padding: 14px 14px; }
    .cw-badge span { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- CTA ---------- */
.cw-cta { padding: 60px 0 100px; background: var(--cw-bg); }
.cw-cta__box {
    position: relative; overflow: hidden;
    padding: clamp(36px, 5vw, 60px);
    border-radius: 28px;
    background: linear-gradient(135deg, #0b2f5e 0%, #133e75 50%, #1a4d96 100%);
    color: #fff;
    box-shadow: var(--cw-shadow-3);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cw-cta__box::before {
    content: ''; position: absolute; inset: auto -10% -60% auto;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,166,35,.35), transparent 70%);
}
.cw-cta__box::after {
    content: ''; position: absolute; inset: -40% auto auto -10%;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34,211,238,.2), transparent 70%);
}
.cw-cta__text { position: relative; z-index: 1; max-width: 640px; }
.cw-cta__text h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 10px; }
.cw-cta__text p  { opacity: .9; margin: 0; font-size: 15.5px; }
.cw-cta .cw-btn { position: relative; z-index: 1; }

/* ---------- FOOTER (kurumsal) ---------- */
.cw-footer {
    position: relative; overflow: hidden;
    background: #0a1428;
    color: #c5d0e3;
    padding: 70px 0 32px;
    margin-top: 0;
}
:root[data-theme="dark"] .cw-footer { background: #060d1d; }
.cw-footer__bg { position: absolute; inset: 0; pointer-events: none; }
.cw-footer__blob {
    position: absolute; top: -160px; right: -160px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245,166,35,.16), transparent 70%);
    filter: blur(30px);
}
.cw-footer__inner { position: relative; z-index: 1; }
.cw-brand--footer { color: #fff; margin-bottom: 18px; }
.cw-brand--footer .cw-brand__title { color: #fff; }
.cw-brand--footer .cw-brand__sub { color: rgba(255,255,255,.6); }
.cw-footer__about {
    max-width: 340px; font-size: 14px; line-height: 1.6;
    color: rgba(255,255,255,.7);
    margin-bottom: 18px;
}
.cw-footer__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-footer__badges .cw-badge--sm {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
    color: #cdd6e4;
}

.cw-footer__title {
    color: #fff; font-size: 14px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
    margin-bottom: 16px;
}
.cw-footer__title--mt { margin-top: 24px; }

.cw-footer__menu { list-style: none; padding: 0; margin: 0; }
.cw-footer__menu li { margin-bottom: 10px; }
.cw-footer__menu a {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.7); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: color .2s ease, transform .2s ease;
}
.cw-footer__menu a .bi { font-size: 10px; color: var(--cw-accent); transition: transform .2s ease; }
.cw-footer__menu a:hover { color: #fff; transform: translateX(3px); }
.cw-footer__menu a:hover .bi { transform: translateX(2px); color: var(--cw-accent); }

.cw-footer__stores { display: flex; flex-direction: column; gap: 10px; }
.cw-footer__news-desc {
    font-size: 13.5px; color: rgba(255,255,255,.7); margin-bottom: 14px; line-height: 1.55;
}
.cw-newsletter {
    display: flex; align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 4px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cw-newsletter:focus-within {
    border-color: var(--cw-accent);
    box-shadow: 0 0 0 4px rgba(245,166,35,.14);
}
.cw-newsletter input {
    flex: 1;
    background: transparent; border: 0; outline: 0;
    color: #fff; padding: 10px 14px; font-size: 14px;
}
.cw-newsletter input::placeholder { color: rgba(255,255,255,.5); }
.cw-newsletter button {
    border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
    color: #2a1a00; font-weight: 800;
    padding: 10px 16px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform .2s ease;
}
.cw-newsletter button:hover { transform: translateY(-1px); }
.cw-newsletter.is-sent button::after { content: ' ✓'; }
.cw-newsletter.is-sent input { opacity: .6; }

.cw-social { display: flex; gap: 10px; }
.cw-social__btn {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #cdd6e4;
    text-decoration: none; font-size: 16px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.cw-social__btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
    color: #2a1a00;
}
.cw-social__btn--muted { opacity: .45; pointer-events: none; }

.cw-footer__divider {
    height: 1px; margin: 40px 0 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.cw-footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: rgba(255,255,255,.55);
}
.cw-footer__copy strong { color: #fff; font-weight: 700; }
.cw-footer__mini { display: flex; gap: 18px; flex-wrap: wrap; }
.cw-footer__mini span { display: inline-flex; align-items: center; gap: 6px; }
.cw-footer__mini .bi { color: var(--cw-accent); }
/* Sürüm rozeti — tooltip'te commit + build tarihi (bkz. AppVersionService.FullDisplay) */
.cw-footer__version {
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    opacity: .75;
    cursor: help;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1199.98px) {
    .cw-nav__collapse {
        background: var(--cw-surface);
        border: 1px solid var(--cw-border);
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: var(--cw-shadow-2);
    }
    .cw-nav__list { gap: 0; }
    .cw-nav__link { width: 100%; border-radius: 10px; padding: 12px 14px; }
    .cw-nav__tools { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cw-border); }
}
@media (max-width: 768px) {
    .cw-hero__stage { margin-top: 40px; min-height: 420px; }
    .cw-float-card--live { left: 6px; top: 0; }
    .cw-float-card--chip { right: 6px; bottom: 4%; }
    .cw-cta__box { text-align: center; justify-content: center; }
    .cw-section { padding: 70px 0; }
}


/* ============================================================
   ==================== KURUMSAL BUTONLAR ======================
   Bootstrap birincil butonları kurumsal lacivert palete taşınır
   ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary-2);
    --bs-btn-hover-border-color: var(--cw-primary-2);
    --bs-btn-active-bg: #0a234a;
    --bs-btn-active-border-color: #0a234a;
    --bs-btn-disabled-bg: var(--cw-primary);
    --bs-btn-disabled-border-color: var(--cw-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary);
    --bs-btn-hover-border-color: var(--cw-primary);
    --bs-btn-active-bg: var(--cw-primary-2);
    --bs-btn-active-border-color: var(--cw-primary-2);
}
:root[data-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--wmb-primary-700);
    --bs-btn-border-color: var(--wmb-primary-700);
    --bs-btn-hover-bg: #2a4d7d;
    --bs-btn-hover-border-color: #2a4d7d;
    --bs-btn-active-bg: #16325a;
    --bs-btn-active-border-color: #16325a;
}
:root[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--wmb-primary);
    --bs-btn-border-color: var(--wmb-primary);
    --bs-btn-hover-bg: var(--wmb-primary-700);
    --bs-btn-hover-border-color: var(--wmb-primary-700);
    --bs-btn-hover-color: #fff;
}

/* ============================================================
   ==================== KURUMSAL KART / FORM ===================
   Profil, Ayarlar ve içerik sayfaları için ortak bileşenler
   ============================================================ */
.cw-card {
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 16px;
    box-shadow: var(--wmb-shadow-sm);
    overflow: hidden;
}
.cw-card__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wmb-border-soft);
    background: linear-gradient(180deg, rgba(11,47,94,.035), transparent);
}
:root[data-theme="dark"] .cw-card__head { background: linear-gradient(180deg, rgba(79,140,255,.06), transparent); }
.cw-card__head-icon {
    width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wmb-primary-soft); color: var(--wmb-primary);
    font-size: 1.1rem;
}
.cw-card__head-title { font-weight: 700; color: var(--wmb-ink); line-height: 1.2; }
.cw-card__head-sub { font-size: .8rem; color: var(--wmb-muted); }
.cw-card__body { padding: 20px; }

/* Sayfa üst başlığı (app-bar hissi) */
.cw-pagehead { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.cw-pagehead__icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cw-primary), var(--cw-primary-2));
    color: #fff; font-size: 1.25rem; flex: 0 0 auto;
    box-shadow: 0 8px 18px rgba(11,47,94,.25);
}
.cw-pagehead__title { font-weight: 800; color: var(--wmb-ink); font-size: 1.3rem; line-height: 1.15; margin: 0; }
.cw-pagehead__sub { font-size: .82rem; color: var(--wmb-muted); }

/* ==================== Profil kartı ==================== */
.cw-profilecard { border-radius: 18px; overflow: hidden; box-shadow: var(--wmb-shadow-md); background: var(--wmb-surface); border: 1px solid var(--wmb-border); }
.cw-profilecard__head {
    display: flex; align-items: center; gap: 16px;
    padding: 26px 24px;
    background: linear-gradient(135deg, #0b2f5e 0%, #133e75 60%, #1b4c8f 100%);
    color: #fff;
    position: relative;
}
.cw-profilecard__head::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 140px at 85% -20%, rgba(245,166,35,.28), transparent 70%);
    pointer-events: none;
}
.cw-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.55);
    color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: .5px;
    position: relative; z-index: 1;
}
.cw-profilecard__name { font-weight: 800; font-size: 1.15rem; line-height: 1.2; position: relative; z-index: 1; }
.cw-profilecard__sub { font-size: .82rem; opacity: .8; position: relative; z-index: 1; }
.cw-profilecard__body { padding: 8px 0; }

.cw-inforow {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 22px;
    border-bottom: 1px solid var(--wmb-border-soft);
}
.cw-inforow:last-child { border-bottom: 0; }
.cw-inforow__icon {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wmb-primary-soft); color: var(--wmb-primary); font-size: 1rem;
}
.cw-inforow__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--wmb-muted); }
.cw-inforow__value { font-weight: 600; color: var(--wmb-ink); word-break: break-word; }

/* ==================== Auth (Login / Register) ==================== */
.cw-auth {
    background:
        radial-gradient(900px 400px at 110% -10%, rgba(245,166,35,.10), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, rgba(11,47,94,.10), transparent 60%),
        var(--wmb-bg);
}
:root[data-theme="dark"] .cw-auth {
    background:
        radial-gradient(900px 400px at 110% -10%, rgba(255,182,72,.07), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, rgba(79,140,255,.08), transparent 60%),
        var(--wmb-bg);
}
.cw-auth__shell {
    display: flex; border-radius: 20px; overflow: hidden;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    box-shadow: var(--wmb-shadow-md);
}
.cw-auth__brand {
    flex: 0 0 42%;
    padding: 40px 34px;
    background: linear-gradient(160deg, #0b2f5e 0%, #133e75 55%, #1b4c8f 100%);
    color: #fff;
    display: flex; flex-direction: column; justify-content: center; gap: 18px;
    position: relative;
}
.cw-auth__brand::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(420px 180px at 90% 0%, rgba(245,166,35,.25), transparent 70%),
        radial-gradient(380px 200px at 0% 100%, rgba(34,211,238,.14), transparent 70%);
    pointer-events: none;
}
.cw-auth__brand > * { position: relative; z-index: 1; }
.cw-auth__brand-logo { max-height: 46px; max-width: 190px; object-fit: contain; align-self: flex-start; }
.cw-auth__brand-mark {
    width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    font-size: 1.4rem;
}
.cw-auth__brand-title { font-weight: 800; font-size: 1.35rem; line-height: 1.25; }
.cw-auth__brand-desc { font-size: .88rem; opacity: .82; line-height: 1.55; }
.cw-auth__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cw-auth__bullets li { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.cw-auth__bullets .bi { color: var(--cw-accent); font-size: 1rem; }
.cw-auth__form { flex: 1 1 auto; padding: 40px 38px; min-width: 0; }
.cw-auth__title { font-weight: 800; color: var(--wmb-ink); margin-bottom: 4px; }
.cw-auth__sub { color: var(--wmb-muted); font-size: .88rem; margin-bottom: 22px; }
.cw-auth .form-label { font-size: .82rem; font-weight: 600; color: var(--wmb-ink-soft); }
.cw-auth .input-group-text {
    background: var(--wmb-bg); border-color: var(--wmb-border);
    color: var(--wmb-muted); min-width: 42px; justify-content: center;
}
.cw-auth .form-text { color: var(--wmb-muted); font-size: .78rem; margin-top: 6px; }

/* Parola kuralları — canlı kontrol listesi (password-policy.js) */
.cw-pw-rules { margin-top: 8px; }
.cw-pw-rules__title { font-size: .76rem; font-weight: 600; color: var(--wmb-ink-soft); margin-bottom: 4px; }
.cw-pw-rules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-pw-rules li { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--wmb-muted); }
.cw-pw-rules li .bi { font-size: .82rem; flex: 0 0 auto; }
.cw-pw-rules li.is-ok { color: var(--bs-success, #198754); }
.cw-pw-rules li.is-fail { color: var(--bs-danger, #dc3545); }
.cw-auth .form-control { border-color: var(--wmb-border); padding-top: .55rem; padding-bottom: .55rem; }
.cw-auth .form-control:focus { border-color: var(--cw-primary); box-shadow: 0 0 0 .2rem rgba(11,47,94,.12); }
:root[data-theme="dark"] .cw-auth .form-control:focus { border-color: var(--wmb-primary); box-shadow: 0 0 0 .2rem var(--wmb-primary-soft); }
.cw-auth__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: .86rem; }
.cw-auth__links a { color: var(--cw-primary); text-decoration: none; font-weight: 600; }
.cw-auth__links a:hover { text-decoration: underline; }
:root[data-theme="dark"] .cw-auth__links a { color: var(--wmb-primary); }

@media (max-width: 991.98px) {
    .cw-auth__shell { flex-direction: column; border-radius: 18px; }
    .cw-auth__brand { flex: 0 0 auto; padding: 22px 22px; gap: 10px; }
    .cw-auth__brand-desc, .cw-auth__bullets { display: none; }  /* mobilde kompakt marka bandı */
    .cw-auth__brand-title { font-size: 1.05rem; }
    .cw-auth__form { padding: 24px 20px 26px; }
}

/* ============================================================
   ==================== MOBİL UYGULAMA DENEYİMİ =================
   Alt gezinme çubuğu + app-benzeri düzen (yalnız dar ekran)
   ============================================================ */
:root { --cw-tabbar-h: 0px; }
.cw-tabbar { display: none; }

@media (max-width: 767.98px) {
    :root { --cw-tabbar-h: 60px; }

    .cw-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: flex; align-items: stretch; justify-content: space-around;
        height: calc(var(--cw-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 6px 6px calc(4px + env(safe-area-inset-bottom, 0px));
        background: var(--wmb-surface);
        border-top: 1px solid var(--wmb-border);
        box-shadow: 0 -10px 30px rgba(11,31,58,.14);
    }
    :root[data-theme="dark"] .cw-tabbar { box-shadow: 0 -10px 30px rgba(0,0,0,.5); }

    .cw-tabbar__item {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        text-decoration: none;
        color: var(--wmb-ink-soft);
        font-size: .64rem; font-weight: 700; letter-spacing: .2px;
        border-radius: 12px;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease;
    }
    .cw-tabbar__item i { font-size: 1.28rem; line-height: 1; }
    .cw-tabbar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cw-tabbar__item.is-active { color: var(--cw-primary); }
    :root[data-theme="dark"] .cw-tabbar__item.is-active { color: var(--wmb-primary); }

    /* Ortadaki vurgulu eylem (Kart Yükleme / Rota) */
    .cw-tabbar__fab {
        width: 46px; height: 46px; border-radius: 50%;
        margin-top: -26px;
        display: inline-flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
        color: #fff; font-size: 1.25rem;
        border: 4px solid var(--wmb-surface);
        box-shadow: 0 10px 22px rgba(245,166,35,.45);
    }
    .cw-tabbar__item--cta { overflow: visible; }
    .cw-tabbar__item--cta.is-active .cw-tabbar__fab { box-shadow: 0 10px 24px rgba(245,166,35,.65); }

    /* İçerik alt çubuğun arkasında kalmasın */
    body { padding-bottom: calc(var(--cw-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* App görünümü: footer kompakt — yalnızca telif satırı */
    .cw-footer__inner > .row,
    .cw-footer__divider { display: none; }
    /* Alt boşluk: sabit tab bar'ın yüksekliği + güvenli alan — footer'ın
       son satırı (sürüm/telif) çubuğun arkasında kalmasın. */
    .cw-footer { padding: 14px 0 calc(var(--cw-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px); }
    .cw-footer__bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ============================================================
   ============ MOBİL APP — kompakt app-bar & vitrin ===========
   ============================================================ */

/* Hızlı erişim ızgarası (yalnız mobil; d-md-none view'da) */
.cw-appgrid { padding: 16px 0 4px; }
.cw-appgrid__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.cw-appgrid__item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 4px 10px;
    border-radius: 16px;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    box-shadow: var(--wmb-shadow-xs);
    text-decoration: none; text-align: center;
    color: var(--wmb-ink);
    font-size: .66rem; font-weight: 700; letter-spacing: .1px;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cw-appgrid__item:active { transform: scale(.96); }
.cw-appgrid__icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wmb-primary-soft);
    color: var(--wmb-primary);
    font-size: 1.3rem;
}
.cw-appgrid__icon--accent {
    background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2));
    color: #fff;
    box-shadow: 0 6px 14px rgba(245,166,35,.4);
}
.cw-appgrid__item span:last-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

@media (max-width: 767.98px) {
    /* -------- Kompakt app-bar -------- */
    .cw-nav { padding-top: 6px; padding-bottom: 6px; }
    .cw-brand { gap: 8px; }
    .cw-brand__logo { height: 32px; max-width: 120px; }
    .cw-brand__title { font-size: .92rem; letter-spacing: .2px; }
    .cw-brand__sub { display: none; }              /* tagline mobilde gizli — app-bar sade */
    .cw-nav__toggler { transform: scale(.88); }

    /* -------- Hero: app açılış ekranı gibi kompakt -------- */
    .cw-hero { padding-top: 22px; padding-bottom: 84px; }
    .cw-hero__stage { margin-top: 6px; }           /* canlı veri kartı + harita mock mobilde de görünür */
    .cw-hero__city { display: none; }              /* arka plan şehir/kart görseli mobilde gizli */
    .cw-hero__title { font-size: 1.85rem; }
    .cw-hero__lead { font-size: .93rem; }
    .cw-hero__actions { flex-direction: column; align-items: stretch; }
    .cw-hero__actions .cw-btn { justify-content: center; width: 100%; }
    .cw-hero__actions .cw-btn--ghost { display: none; }  /* tek net CTA */
    .cw-hero__chips { display: none; }

    /* -------- Bölüm aralıkları app ritmine insin -------- */
    .cw-section { padding: 44px 0; }
    .cw-stats { margin-top: 0; padding-top: 18px; }
    /* Hızlı erişim ızgarası araya girdiği için istatistik kartları hero üzerine binmesin */
    .cw-stats__grid { margin-top: 0; }

    /* -------- Tab bar: yarı saydam + aktif gösterge -------- */
    .cw-tabbar {
        background: rgba(255,255,255,.9);
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    :root[data-theme="dark"] .cw-tabbar { background: rgba(15,23,40,.88); }
    .cw-tabbar__item { position: relative; }
    .cw-tabbar__item.is-active::before {
        content: "";
        position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
        width: 22px; height: 3px; border-radius: 2px;
        background: var(--cw-accent);
    }
    .cw-tabbar__item--cta.is-active::before { display: none; }
    .cw-tabbar__fab { border-color: transparent; }
}

/* Canlı veri kartı: gerçek API verisi gelene kadar gizli; is-ready ile yumuşak görünür */
.cw-float-card--pending {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.cw-float-card--pending.is-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease;
}

/* ==================== SmartStop — kurumsal durak listesi ==================== */
/* Durak satırları etiket/kart görünümünde: Bootstrap flush ayraçları yerine
   tonlu zemin + ince çerçeve + hafif yuvarlak köşe. Dark modda 1450. satırdaki
   genel .list-group-item kuralı ezilir (aşağıdaki dark override). */
/* Not: .list-group flex-column olduğundan yan margin taşma yaratır —
   yan boşluk konteyner padding'i ile verilir (yalnız durak listesi ss-scroll). */
.list-group-flush.ss-scroll { padding: 10px 10px 4px; }
.list-group-flush > .ss-item {
    border: 1px solid var(--wmb-border);
    border-radius: var(--wmb-radius-md);
    background: var(--wmb-chip);
    margin: 0 0 7px;
    box-shadow: var(--wmb-shadow-xs);
}
:root[data-theme="dark"] .list-group-flush > .ss-item {
    background: var(--wmb-chip);
    border-color: var(--wmb-border);
}
.ss-item { padding: 10px 14px; }
.ss-item:hover { border-color: var(--wmb-primary-600); }
.ss-item__row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ss-item__ico {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wmb-primary-soft); color: var(--wmb-primary);
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}
.ss-item__title {
    flex: 1 1 auto; min-width: 0;
    font-weight: 600; font-size: .85rem; line-height: 1.3;
    color: var(--wmb-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-item__sep { color: var(--wmb-muted); font-weight: 400; }
.ss-item__no {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--wmb-primary-soft);
    color: var(--wmb-primary);
    font-size: .7rem; font-weight: 700; letter-spacing: .2px;
    vertical-align: 1px;
}
.ss-item__chev { flex: 0 0 auto; font-size: .75rem; color: var(--wmb-muted); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.ss-item:hover .ss-item__chev { opacity: 1; transform: translateX(2px); }
.ss-item.active { box-shadow: inset 3px 0 0 var(--wmb-accent); border-color: var(--wmb-accent); }
.ss-item.active .ss-item__ico { background: var(--wmb-primary); color: #fff; }
.ss-item.active .ss-item__no { background: var(--wmb-accent-soft); color: var(--wmb-accent-600); }
/* Seçili durak paneli: "AD - No" gösterimi */
.ss-detail__no { font-weight: 600; opacity: .85; }

/* ==================== NFC ile kart okutma ==================== */
/* Düğme yalnızca Web NFC destekleyen tarayıcılarda JS ile eklenir
   (js/nfc-card.js); tarama sırasında ikon nabız gibi atar. */
.wmb-nfc-btn { white-space: nowrap; }
.wmb-nfc-btn.is-scanning .bi-broadcast-pin {
    display: inline-block;
    animation: wmbNfcPulse 1.2s ease-in-out infinite;
}
@keyframes wmbNfcPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .wmb-nfc-btn.is-scanning .bi-broadcast-pin { animation: none; }
}
/* Mobil: NFC'li grupta (has-nfc, js/nfc-card.js ekler) ikon+input ilk satırı
   kaplar; NFC ve Sorgula/Doğrula düğmeleri alta TAM GENİŞLİK iner — dörtlü
   yan yana dizilim dar ekranda input'u eziyordu. Grup köşe kırpmaları ve
   -1px kenarlık bindirmesi tek satırlık dizilime göre olduğundan geri alınır. */
@media (max-width: 767.98px) {
    .input-group.has-nfc > .form-control {
        min-width: 0;
        border-top-right-radius: var(--bs-border-radius-lg, .5rem) !important;
        border-bottom-right-radius: var(--bs-border-radius-lg, .5rem) !important;
    }
    .input-group.has-nfc > .btn {
        flex: 0 0 100%;
        width: 100%;
        margin-top: .5rem;
        margin-left: 0;
        border-radius: var(--bs-border-radius-lg, .5rem) !important;
    }
}

/* ==================== Ana ekrana ekleme (PWA) daveti ==================== */
/* Kurumsal ödeme paleti (lacivert degrade) — bkz. CLAUDE.md tasarım kuralı.
   Mobilde alt tab bar'ın üstüne oturur (--cw-tabbar-h), masaüstünde alt-orta
   dar kart olarak görünür. Duyuru hikâyeleri tam ekranının ALTINDA kalır. */
.cw-pwa {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(var(--cw-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 1040;
    max-width: 560px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0b2f5e, #123f7d);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 14px 36px rgba(11,47,94,.38);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease;
}
.cw-pwa.is-visible { opacity: 1; transform: none; }
.cw-pwa__close {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.1); color: #fff;
    font-size: 12px; line-height: 1;
}
.cw-pwa__close:hover { background: rgba(255,255,255,.2); }
.cw-pwa__row { display: flex; align-items: flex-start; gap: 12px; padding-right: 26px; }
.cw-pwa__icon {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 11px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cw-pwa__title { font-weight: 700; font-size: .95rem; }
.cw-pwa__text { font-size: .8rem; opacity: .88; margin-top: 2px; }
.cw-pwa__steps {
    list-style: none;
    display: flex; flex-direction: column; gap: 8px;
    margin: 10px 0 0; padding: 10px 12px;
    border-radius: 9px;
    background: rgba(255,255,255,.1);
    font-size: .78rem;
}
.cw-pwa__steps li { display: flex; align-items: center; gap: 8px; }
.cw-pwa__steps .bi { font-size: 1rem; color: #ffd166; flex: 0 0 auto; }
.cw-pwa__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cw-pwa__btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 9px;
    padding: 8px 14px;
    font-size: .82rem; font-weight: 600;
    transition: background .15s ease;
}
.cw-pwa__btn--ghost { background: rgba(255,255,255,.12); color: #fff; }
.cw-pwa__btn--ghost:hover { background: rgba(255,255,255,.22); }
.cw-pwa__btn--primary { background: #ffd166; color: #0b2f5e; }
.cw-pwa__btn--primary:hover { background: #ffdd8a; }
:root[data-theme="dark"] .cw-pwa {
    background: linear-gradient(135deg, #16345f, #1b4d8f);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
    .cw-pwa { transition: none; }
}

/* ==================== SmartStop — araç takip modu ==================== */
.ss-veh { cursor: pointer; transition: background .12s ease; }
/* Yaklaşan araç satırı başlığı: uzun hat rozeti DARALIR (üç nokta), plaka
   TEK PARÇA aynı hizada kalır — plaka alta kaymasın / bölünmesin. */
.ss-veh__main { flex: 1 1 auto; min-width: 0; }
.ss-veh__hdr { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ss-veh__hdr .badge {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-veh__plate { flex: 0 0 auto; white-space: nowrap; }
.ss-veh:hover { background: var(--wmb-primary-soft); }
.ss-veh__cta {
    margin-top: 3px;
    font-size: .68rem; font-weight: 700;
    color: var(--wmb-primary);
    opacity: 0; transition: opacity .15s ease;
    white-space: nowrap;
}
.ss-veh:hover .ss-veh__cta { opacity: 1; }
.ss-veh.is-tracked { background: var(--wmb-primary-soft); box-shadow: inset 3px 0 0 var(--wmb-accent); }
.ss-veh.is-tracked .ss-veh__cta { opacity: 1; color: var(--wmb-accent-600); }

/* Takip banner'ı — harita üstünde yüzer */
.ss-track {
    position: absolute;
    top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 10;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 14px;
    box-shadow: var(--wmb-shadow-md);
    max-width: min(92%, 420px);
}
.ss-track__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 30px; padding: 0 10px;
    border-radius: 8px;
    background: var(--cw-primary); color: #fff;
    font-weight: 800; font-size: .85rem; letter-spacing: .3px;
    flex: 0 0 auto;
}
:root[data-theme="dark"] .ss-track__badge { background: var(--wmb-primary-700); }
.ss-track__info { min-width: 0; }
.ss-track__plate { font-weight: 700; font-size: .85rem; color: var(--wmb-ink); white-space: nowrap; }
.ss-track__eta { font-size: .78rem; color: var(--wmb-ink-soft); white-space: nowrap; }
.ss-track__pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e; flex: 0 0 auto;
    animation: ssTrackPulse 1.6s ease-out infinite;
}
@keyframes ssTrackPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ss-track__close {
    width: 28px; height: 28px; border-radius: 50%;
    border: 0; background: var(--wmb-primary-soft); color: var(--wmb-ink-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; cursor: pointer; flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}
.ss-track__close:hover { background: var(--wmb-danger); color: #fff; }

/* Takip banner'ı — uzun hat adları taşmasın */
.ss-track__plate, .ss-track__eta { overflow: hidden; text-overflow: ellipsis; max-width: 250px; }

/* Planlı sefer satırı — izlenemez, soluk gösterim */
.ss-veh--plan { cursor: default; }
.ss-veh--plan:hover { background: transparent; }
.ss-veh__cta--plan { color: var(--wmb-muted); opacity: 1; }

/* ==================== Kart Bayileri (FillingCenter) — kurumsal ==================== */
.fc-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fc-panel .cw-card__body { flex-shrink: 0; }
.fc-listhead {
    padding: 8px 16px;
    border-top: 1px solid var(--wmb-border-soft);
    border-bottom: 1px solid var(--wmb-border-soft);
    background: var(--wmb-bg);
    flex-shrink: 0;
}
.fc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }

/* Tip filtresi çipleri */
.fc-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--wmb-border);
    background: var(--wmb-surface);
    color: var(--wmb-ink-soft);
    font-size: .78rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fc-chip:hover { border-color: var(--wmb-primary); color: var(--wmb-primary); }
.fc-chip.is-active {
    background: var(--cw-primary); border-color: var(--cw-primary); color: #fff;
}
:root[data-theme="dark"] .fc-chip.is-active { background: var(--wmb-primary-700); border-color: var(--wmb-primary-700); }
.fc-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: var(--wmb-primary-soft); color: var(--wmb-primary);
    font-size: .68rem; font-weight: 800;
}
.fc-chip.is-active .fc-chip__count { background: rgba(255,255,255,.2); color: #fff; }

/* Bayi satırları */
.fc-row {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.fc-row:hover { background: var(--wmb-primary-soft); }
.fc-row.is-active { background: var(--wmb-primary-soft); border-color: var(--wmb-border); box-shadow: inset 3px 0 0 var(--wmb-accent); }
.fc-row__ico {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.fc-row__ico--kiosk { background: var(--wmb-primary-soft); color: var(--wmb-primary); }
.fc-row__ico--dealer { background: var(--wmb-accent-soft); color: var(--wmb-accent-600); }
.fc-row__body { flex: 1 1 auto; min-width: 0; }
.fc-row__name { font-weight: 700; font-size: .84rem; color: var(--wmb-ink); line-height: 1.3; }
.fc-row__addr { font-size: .76rem; color: var(--wmb-muted); margin-top: 2px; }
.fc-row__tel { font-size: .76rem; color: var(--wmb-ink-soft); margin-top: 2px; }
.fc-badge {
    flex: 0 0 auto;
    padding: 2px 10px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .2px;
}
.fc-badge--kiosk { background: var(--wmb-primary-soft); color: var(--wmb-primary); }
.fc-badge--dealer { background: var(--wmb-accent-soft); color: var(--wmb-accent-600); }

/* Satır sağ sütunu: tip rozeti + navigasyon (Google Maps yol tarifi) */
.fc-row__side {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.fc-row__nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--wmb-primary-soft); color: var(--wmb-primary);
    border: 1px solid var(--wmb-border-soft);
    font-size: .85rem; text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.fc-row__nav:hover { background: var(--wmb-primary); color: #fff; transform: translateY(-1px); }

/* Harita kartı + popup */
.fc-mapcard { height: 64vh; min-height: 480px; overflow: hidden; }
.fc-mapcard #fc-map { width: 100%; height: 100%; }
.fc-popup {
    display: none; position: relative;
    background: var(--wmb-surface); color: var(--wmb-ink);
    border: 1px solid var(--wmb-border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--wmb-shadow-md);
    font-size: .8rem; max-width: 250px;
}
.fc-popup__addr { color: var(--wmb-muted); margin-top: 2px; }
.fc-popup__tel { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; margin-right: 10px; color: var(--wmb-primary); font-weight: 700; text-decoration: none; }
.fc-popup__nav { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--wmb-accent-600); font-weight: 700; text-decoration: none; }
.fc-popup__nav:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    .fc-mapcard { height: 52vh; min-height: 380px; margin-top: 4px; }
}

/* ==================== Tam ekran harita kabuğu — FillingCenter & HowToGo ==================== */
/* SmartStop'un ss-shell/ss-canvas kabuğunu paylaşırlar; haritalar canvas'ı doldurur */
#fc-map, #htg-map { position: absolute; inset: 0; background: var(--wmb-bg); }

/* ==================== Header hava durumu rozeti (tüm sayfalar) ==================== */
.cw-wx {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--wmb-border);
    background: var(--wmb-surface);
    color: var(--wmb-ink);
    font-size: .8rem; font-weight: 700;
    white-space: nowrap;
    /* Satırdaki TEK esneyebilir öğe bu rozet: uzun hava açıklaması
       ("Parçalı Bulutlu" vb.) menüyü ve sağdaki butonları itmesin.
       DİKKAT: burada `min-width: 0` + `overflow: hidden` KULLANILMAZ — ikisi
       birlikte rozetin SICAKLIĞI da kırpıyordu. Varsayılan otomatik asgari
       boyut sayesinde rozet ikon+sıcaklığın altına inemez; kısalan tek şey
       aşağıda min-width:0 verilen açıklama metnidir. */
    flex: 0 1 auto;
}
.cw-wx .bi { color: var(--wmb-accent); font-size: .95rem; flex: 0 0 auto; }
.cw-wx__temp { flex: 0 0 auto; }
.cw-wx__desc {
    color: var(--wmb-ink-soft); font-weight: 600; font-size: .74rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Geniş ekranda menü ve marka sabit kalır; yer daraldığında önce rozet küçülür. */
@media (min-width: 1200px) {
    .cw-brand, .cw-nav__toggler, .cw-nav__collapse { flex-shrink: 0; }
}
@media (max-width: 1199.98px) {
    .cw-wx { margin-left: auto; margin-right: 10px; padding: 5px 11px; }
}
/* Hava açıklaması ("Yağmurlu", "Parçalı Bulutlu") yalnızca 1700px üstünde
   görünür — altında menü satırı zaten dar, açıklama eklenince taşıyordu
   (8 bağlantılı anonim menüyle sınır 1600'den 1700'e çekildi).
   Dar ekranda rozet yine ikon + sıcaklık gösterir. */
@media (max-width: 1699.98px) {
    .cw-wx__desc { display: none; }
}
/* 1200–1750 bandı: anonim menü 9 öğe taşıyor (Bakiye Sorgulama + Duyurular)
   ve ikonlar görünür tutulduğu için satır sığmıyor — hava rozeti bu bantta
   gizlenir (ölçüm 2026-08-19: 1700–1800 tam ölçülü bantta rozetle birlikte ~1760px
   gerekiyordu; sınır 1500→1800 çekildi). 1200 altında (hamburger düzeni)
   rozet collapse dışında kaldığı için yine görünür. NOT: Bu kural .cw-wx
   taban tanımından SONRA durmalı; öne alınırsa aynı özgüllükteki taban
   kuralı onu ezer. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
    .cw-wx { display: none; }
}

/* Harita kabuğu sidebar'ında form etiketleri temada okunur kalsın */
.ss-sidebar__head .form-label,
.ss-sidebar__head .form-label.text-muted { color: var(--wmb-ink-soft) !important; }

/* ==================== WMB lejantı — harita işaretleriyle birebir ==================== */
/* Lejant durak simgesi — haritadaki pin'in küçüğü (renk currentColor ile) */
.leg-pin {
    width: 15px; height: 20px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.leg-pin--start { color: #f5a623; }   /* başlangıç: amber (haritayla aynı) */
.leg-pin--mid   { color: #0b2f5e; }   /* ara durak: kurumsal lacivert */
.leg-pin--end   { color: #ef4444; }   /* bitiş: kırmızı */
:root[data-theme="dark"] .leg-pin--mid { color: #4f8cff; }   /* koyu temada pin de bu renk */
.leg-bus { display: inline-flex; width: 16px; flex: 0 0 auto; justify-content: center; }
.leg-bus img { width: 12px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* Takip edilen otobüs — amber vurgu + plaka vurgusu.
   2B'de üstten ikona ışıma; 3B'de zemin halkası (.wmb-busicon__ring, filter
   preserve-3d'yi bozduğu için glow yerine halka kullanılır). */
.wmb-vmarker.is-followed .wmb-busicon__top {
    filter: drop-shadow(0 0 7px rgba(245,166,35,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.wmb-vmarker.is-followed .wmb-vmarker__plate {
    background: var(--wmb-accent);
    color: #0b1f3a;
}
.wmb-vmarker.is-followed .wmb-vmarker__label { border-color: #fff; }

/* ==================== WMB — haritada durak adı etiketleri ==================== */
.wmb-stoplabel {
    background: rgba(255,255,255,.88);
    color: #334155;
    border: 1px solid rgba(11,47,94,.14);
    /* Zoom'a bağlı ölçek: --wmb-label-scale harita konteynerine
       WmbMapCore.attachLabelScale tarafından yazılır (uzakta ~0.55, yakında ~1.15).
       Padding/köşe/genişlik em cinsinden — font ile birlikte ölçeklenir.
       transform: scale() KULLANILAMAZ: marker kökünün transform'u MapLibre'nindir. */
    border-radius: .6em;
    padding: .12em .6em;
    font-size: calc(8.5px * var(--wmb-label-scale, 1));
    font-weight: 700; line-height: 1.35;
    letter-spacing: .1px;
    box-shadow: 0 1px 2px rgba(0,0,0,.16);
    pointer-events: none;
    /* Uzun adlar KISALTILMAZ ("…" yok): kısa ad tek satır kalır, ~13em'e
       sığmayan ad alta sarar. `width: max-content` şart — MapLibre marker'ı
       absolute konumlu olduğundan salt max-width ile tarayıcı shrink-to-fit
       genişliği min-content'e düşürüp adı kelime kelime alt alta dizebiliyor.
       Durak no'sunun tek başına satıra düşmemesi JS'te NBSP ile sağlanır
       (wheremybus.js stopDisplayName / SmartStop stopLabelText). */
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: 13.2em;
    transition: opacity .25s ease;
}
/* SmartStop araç takibi: aracın GEÇTİĞİ durakların etiketi soluklaşır;
   öndekiler olduğu gibi kalır (ikon solukluğu ss-route-stops katmanının
   icon-opacity paint'indedir, passed bayrağını updateTrack üretir). */
.wmb-stoplabel.wmb-stoplabel--dim { opacity: .55; }
.wmb-stoplabel.is-hidden { opacity: 0; }
/* Katmanlama: durak etiketleri en altta kalsın, canlı otobüsler HER ZAMAN üstte görünsün */
.maplibregl-marker.wmb-stoplabel { z-index: 1; }
.maplibregl-marker.wmb-vmarker { z-index: 6; }
:root[data-theme="dark"] .wmb-stoplabel {
    background: rgba(13,20,38,.9);
    color: #cbd5e1;
    border-color: rgba(255,255,255,.14);
}

/* ==================== WMB — durak listesinde canlı otobüsler ==================== */
.wmb-buschip {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wmb-accent-soft);
    color: var(--wmb-accent-600);
    border: 1px solid rgba(245,166,35,.45);
    font-size: .68rem; font-weight: 800; letter-spacing: .2px;
    white-space: nowrap; flex: 0 0 auto;
}
.wmb-buschip img { width: 9px; height: auto; }
/* Araç DURAKTA: satır yeşil vurgulanır (plaka çipi de yeşile döner) */
.list-item.is-bus-here {
    background: var(--wmb-success-soft);
    border-radius: var(--wmb-radius-md);
    border-color: var(--wmb-success);
}
.list-item.is-bus-here .wmb-buschip {
    background: var(--wmb-surface);
    color: var(--wmb-success);
    border-color: var(--wmb-success);
}
/* Aracın YAKLAŞTIĞI (bir sonraki) durak: kesikli amber çerçeve */
.list-item.is-bus-next { border-color: var(--wmb-accent); border-style: dashed; }
/* İki durak arasındaki otobüs satırı */
.wmb-busrow {
    display: flex; align-items: center;
    min-height: 26px;
    padding: 2px 0 4px 26px;   /* durak ikon kolonuna hizalı girinti */
    position: relative;
}
/* Kesikli çizgi hedef durağa doğru AKAR; uçtaki ok yönü gösterir.
   (Liste güzergâh sırasında olduğundan araç her zaman alttaki durağa gider.) */
.wmb-busrow__line {
    position: absolute; left: 13px; top: -8px; bottom: 3px;
    width: 2px;
    background: linear-gradient(to bottom, var(--wmb-accent) 0 5px, transparent 5px 9px);
    background-size: 2px 9px;
    border-radius: 2px;
    animation: wmbBusFlow .8s linear infinite;
}
.wmb-busrow__line::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -4px;
    width: 7px; height: 7px;
    border-right: 2px solid var(--wmb-accent);
    border-bottom: 2px solid var(--wmb-accent);
    transform: translateX(-50%) rotate(45deg);
}
@keyframes wmbBusFlow {
    from { background-position: 0 0; }
    to   { background-position: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .wmb-busrow__line { animation: none; }
}

/* ==================== Nasıl Giderim (HowToGo) ==================== */
/* Yolculuk kartı: A/B alanları tek gövdede, solda hat rayı, sağda yön değiştir */
.htg-journey {
    display: flex; align-items: stretch;
    position: relative;
    background: var(--wmb-bg);
    border: 1px solid var(--wmb-border);
    border-radius: 12px;
    padding: 4px 44px 4px 10px;   /* sağ boşluk: swap düğmesi */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.htg-journey:focus-within { border-color: var(--wmb-primary); box-shadow: 0 0 0 3px var(--wmb-primary-soft); }
:root[data-theme="dark"] .htg-journey:focus-within { border-color: #4f8cff; }
.htg-journey__rail {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 10px 12px 2px;
    flex: 0 0 auto;
}
.htg-journey__dot {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .6rem; font-weight: 800;
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.htg-journey__dot--a { background: var(--wmb-primary); }
.htg-journey__dot--b { background: #ef4444; }
:root[data-theme="dark"] .htg-journey__dot--a { background: #4f8cff; }
.htg-journey__line {
    flex: 1 1 auto; width: 2px; margin: 4px 0;
    background: repeating-linear-gradient(to bottom, var(--wmb-muted) 0 3px, transparent 3px 7px);
    opacity: .5;
}
.htg-journey__fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.htg-journey__divider { height: 1px; background: var(--wmb-border-soft); }
.htg-field { position: relative; display: flex; align-items: center; min-width: 0; }
.htg-inputwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.htg-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    color: var(--wmb-ink);
    font-size: .85rem; font-weight: 600;
    padding: 10px 4px;
}
.htg-input::placeholder { color: var(--wmb-muted); font-weight: 500; }
/* Nokta seçiliyken input metni gizlenir, yerine sığan kompakt etiket görünür */
.htg-input--ghost { color: transparent; caret-color: var(--wmb-ink); }
.htg-picked {
    position: absolute; inset: 0 0 0 4px;
    display: flex; flex-direction: column; justify-content: center;
    pointer-events: none;
    overflow: hidden;
}
.htg-picked__name {
    font-size: .82rem; font-weight: 700; line-height: 1.15;
    color: var(--wmb-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htg-picked__coords {
    font-size: .6rem; font-weight: 600; line-height: 1.2;
    letter-spacing: .25px;
    color: var(--wmb-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htg-iconbtn {
    flex: 0 0 auto;
    width: 27px; height: 27px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--wmb-muted);
    font-size: .8rem;
    padding: 0;
    transition: background .12s ease, color .12s ease;
}
.htg-iconbtn:hover { background: var(--wmb-primary-soft); color: var(--wmb-ink); }
#htg-locate { color: var(--wmb-primary); }
:root[data-theme="dark"] #htg-locate { color: #4f8cff; }
.htg-swap {
    position: absolute; right: 7px; top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--wmb-border);
    background: var(--wmb-surface);
    color: var(--wmb-primary);
    font-size: .82rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.htg-swap:hover { background: var(--wmb-primary); color: #fff; transform: translateY(-50%) rotate(180deg); }
:root[data-theme="dark"] .htg-swap { color: #4f8cff; }
:root[data-theme="dark"] .htg-swap:hover { background: #4f8cff; color: #0b1f3a; }

/* Otomatik tamamlama açılır listesi */
.htg-ac {
    position: absolute; top: calc(100% + 6px); left: -32px; right: -44px;
    z-index: 40;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    max-height: 236px; overflow: auto;
    padding: 4px;
}
.htg-ac__item {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--wmb-ink);
    font-size: .83rem; text-align: left;
    cursor: pointer;
}
.htg-ac__item:hover { background: var(--wmb-primary-soft); }
.htg-ac__item .bi { color: var(--wmb-muted); font-size: .9rem; flex: 0 0 auto; }

/* Seçenekler: küçük büyük-harf etiketli kompakt ızgara */
.htg-label {
    display: block;
    margin: 0 2px 4px;
    font-size: .64rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--wmb-muted);
}
.htg-opts {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.htg-opt--walk, .htg-opt--arrive { grid-column: 1 / -1; }
.htg-opt--walk .htg-label { margin-top: 2px; }

/* Yürüme mesafesi slider'ı — mobil uygulamayla aynı desen */
.htg-walkhead { display: flex; align-items: baseline; justify-content: space-between; }
.htg-walkval { font-size: .74rem; font-weight: 800; color: var(--wmb-primary); }
:root[data-theme="dark"] .htg-walkval { color: #4f8cff; }
.htg-range {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%;
    height: 5px; border-radius: 999px;
    background: var(--wmb-border);   /* dolu kısım JS ile gradient olarak boyanır */
    outline: none; cursor: pointer;
    margin: 10px 0 6px;
}
.htg-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--wmb-primary);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
    cursor: grab;
}
.htg-range::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--wmb-primary);
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
    cursor: grab;
}
:root[data-theme="dark"] .htg-range::-webkit-slider-thumb { background: #4f8cff; border-color: var(--wmb-surface); }
:root[data-theme="dark"] .htg-range::-moz-range-thumb { background: #4f8cff; border-color: var(--wmb-surface); }

/* Varışa göre planla — anahtar (toggle) satırı */
.htg-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--wmb-border);
    border-radius: 10px;
    background: var(--wmb-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.htg-toggle__txt { font-size: .78rem; font-weight: 600; color: var(--wmb-ink); }
.htg-toggle__txt .bi { color: var(--wmb-muted); }
.htg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.htg-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--wmb-border);
    transition: background .18s ease;
}
.htg-toggle__thumb {
    position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: left .18s ease;
}
.htg-toggle input:checked ~ .htg-toggle__track { background: var(--wmb-primary); }
:root[data-theme="dark"] .htg-toggle input:checked ~ .htg-toggle__track { background: #4f8cff; }
.htg-toggle input:checked ~ .htg-toggle__track .htg-toggle__thumb { left: 19px; }

/* Kurumsal form kontrolü: ikonlu tek gövde, özel chevron */
.htg-ctl {
    position: relative;
    display: flex; align-items: center;
    border: 1px solid var(--wmb-border);
    border-radius: 10px;
    background: var(--wmb-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.htg-ctl:focus-within { border-color: var(--wmb-primary); box-shadow: 0 0 0 3px var(--wmb-primary-soft); }
:root[data-theme="dark"] .htg-ctl:focus-within { border-color: #4f8cff; }
.htg-ctl > .bi:first-child { flex: 0 0 auto; padding-left: 10px; color: var(--wmb-muted); font-size: .8rem; }
.htg-ctl input,
.htg-ctl select {
    flex: 1 1 auto; min-width: 0; width: 100%;
    border: 0; outline: 0; background: transparent;
    color: var(--wmb-ink);
    font-size: .78rem; font-weight: 600;
    padding: 8px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.htg-ctl select { padding-right: 26px; cursor: pointer; }
.htg-ctl__chev {
    position: absolute; right: 9px; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: .64rem; color: var(--wmb-muted);
}
/* Buton tabanlı kontrol (özel seçiciler için) */
.htg-selbtn {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    color: var(--wmb-ink);
    font-size: .78rem; font-weight: 600;
    padding: 8px; padding-right: 22px;
    text-align: left; cursor: pointer;
}
.htg-selbtn span {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Açılır panel & menü: uygulama tasarım diliyle ---- */
.htg-opt { position: relative; }
.htg-menu, .htg-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 45;
    background: var(--wmb-surface);
    border: 1px solid var(--wmb-border);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
    padding: 5px;
}
.htg-menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    padding: 8px 11px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--wmb-ink);
    font-size: .8rem; font-weight: 600;
    text-align: left; cursor: pointer;
}
.htg-menu__item:hover { background: var(--wmb-primary-soft); }
.htg-menu__item.is-active { background: var(--wmb-primary); color: #fff; }
:root[data-theme="dark"] .htg-menu__item.is-active { background: #4f8cff; color: #0b1f3a; }
.htg-menu__item .bi { font-size: .72rem; }

/* Özel tarih/saat paneli */
.htg-pop { padding: 11px; }
.htg-pop--time { right: auto; width: 276px; max-width: calc(100vw - 40px); }
.htg-pop__section {
    margin: 2px 2px 6px;
    font-size: .6rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--wmb-muted);
}
.htg-pop__days { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.htg-chipbtn {
    border: 1px solid var(--wmb-border);
    background: var(--wmb-bg);
    color: var(--wmb-ink);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .72rem; font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.htg-chipbtn:hover { border-color: var(--wmb-primary); }
.htg-chipbtn.is-active { background: var(--wmb-primary); border-color: var(--wmb-primary); color: #fff; }
:root[data-theme="dark"] .htg-chipbtn.is-active { background: #4f8cff; border-color: #4f8cff; color: #0b1f3a; }
.htg-pop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.htg-pop__col {
    position: relative;   /* offsetTop kolona göre ölçülsün — seçiliyi ortalama hesabı için */
    max-height: 148px; overflow-y: auto;
    border: 1px solid var(--wmb-border-soft);
    border-radius: 8px;
    padding: 3px;
    display: flex; flex-direction: column; gap: 2px;
}
.htg-colitem {
    flex: 0 0 auto;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--wmb-ink);
    padding: 5px;
    font-size: .76rem; font-weight: 600;
    cursor: pointer;
}
.htg-colitem:hover { background: var(--wmb-primary-soft); }
.htg-colitem.is-active { background: var(--wmb-primary); color: #fff; }
:root[data-theme="dark"] .htg-colitem.is-active { background: #4f8cff; color: #0b1f3a; }
.htg-cta { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; font-weight: 700; letter-spacing: .2px; border-radius: 9px; }
.htg-hint { margin-top: 7px; font-size: .7rem; color: var(--wmb-muted); }

/* Mobil kompakt özet — arama sonrası formun yerini alır */
.htg-summary {
    display: none;
    width: 100%;
    align-items: center; gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--wmb-border);
    border-radius: 10px;
    background: var(--wmb-bg);
    color: var(--wmb-ink);
    font-size: .8rem; font-weight: 600;
    text-align: left;
}
.htg-summary__pins { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.htg-summary__pins .bi { font-size: .68rem; color: var(--wmb-muted); }
.htg-summary__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htg-summary__edit { flex: 0 0 auto; color: var(--wmb-primary); }
:root[data-theme="dark"] .htg-summary__edit { color: #4f8cff; }

/* Sonuç kartları */
.htg-results { padding: 10px 12px; }
.htg-msg { padding: 14px 6px; font-size: .85rem; }
.htg-route {
    border: 1px solid var(--wmb-border);
    border-radius: 12px;
    background: var(--wmb-surface);
    padding: 10px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.htg-route:hover { border-color: var(--wmb-primary); background: var(--wmb-primary-soft); }
.htg-route.is-active {
    border-color: var(--wmb-primary);
    box-shadow: inset 3px 0 0 var(--wmb-accent), 0 4px 14px rgba(0,0,0,.08);
}
.htg-route__head { display: flex; align-items: center; gap: 8px; }
.htg-route__no {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--wmb-primary); color: #fff;
    font-size: .72rem; font-weight: 800;
}
.htg-route.is-active .htg-route__no { background: var(--wmb-accent); color: #0b1f3a; }
.htg-route__dur { font-weight: 800; font-size: .95rem; color: var(--wmb-ink); }
.htg-route__times { margin-left: auto; font-size: .78rem; color: var(--wmb-muted); font-weight: 600; white-space: nowrap; }
.htg-route__times .bi { font-size: .7rem; }

/* Mod şeridi: yürüme + hat rozetleri */
.htg-route__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.htg-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    white-space: nowrap;
}
.htg-chip--walk { background: var(--wmb-primary-soft); color: var(--wmb-ink-soft); }
.htg-chip--bus  { background: var(--wmb-primary); color: #fff; }
:root[data-theme="dark"] .htg-chip--bus { background: #4f8cff; color: #0b1f3a; }
.htg-chip__sep { font-size: .62rem; color: var(--wmb-muted); }

.htg-route__meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-top: 8px;
    font-size: .74rem; color: var(--wmb-muted); font-weight: 600;
}

/* Bacak zaman çizelgesi (seçili kartta açılır) */
.htg-route__legs { margin-top: 10px; border-top: 1px dashed var(--wmb-border); padding-top: 8px; }
.htg-leg { display: flex; gap: 10px; position: relative; padding: 6px 0 6px 2px; }
.htg-leg + .htg-leg::before {
    content: "";
    position: absolute; left: 14px; top: -8px;
    height: 14px; width: 2px;
    background: repeating-linear-gradient(to bottom, var(--wmb-border) 0 3px, transparent 3px 6px);
}
.htg-leg__ico {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--wmb-primary-soft);
    color: var(--wmb-ink-soft);
    font-size: .82rem;
}
.htg-leg__ico--bus { background: var(--wmb-primary); color: #fff; }
:root[data-theme="dark"] .htg-leg__ico--bus { background: #4f8cff; color: #0b1f3a; }
.htg-leg__body { font-size: .8rem; color: var(--wmb-ink); min-width: 0; }
.htg-leg__sub { font-size: .72rem; color: var(--wmb-muted); font-weight: 600; margin-top: 1px; }

/* Akordeon oku — yalnızca mobilde görünür */
.htg-acc-chev {
    display: none;
    font-size: .72rem; color: var(--wmb-muted);
    transition: transform .2s ease;
}

/* Mobil: kabuğun 42vh sidebar sınırı formu sığdıramadığından sonuç listesi
   eziliyordu — HowToGo kendi yüksekliğini yönetir, sonuçlar ayrı kaydırılır.
   Form ve Rota Önerileri başlıkları akordeon gibi büyür/küçülür. */
@media (max-width: 991.98px) {
    .ss-sidebar.htg-sidebar { max-height: none; }
    .htg-results { max-height: 38vh; }
    .htg-sidebar #htg-head.is-collapsed #htg-form { display: none; }
    .htg-sidebar #htg-head.is-collapsed .htg-summary { display: flex; }
    .htg-acc-chev { display: inline-block; }
    #htg-head-toggle, #htg-reshead { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    #htg-head.is-collapsed .htg-acc-chev--form { transform: rotate(-90deg); }
    #htg-reshead.is-collapsed .htg-acc-chev--res { transform: rotate(-90deg); }
    .htg-results.is-collapsed { display: none; }
}

/* ==================== KVKK çerez onay bandı ==================== */
.cw-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    max-width: 780px;
    margin: 0 auto;
    border-radius: 16px;
    padding: 16px 18px;
    background: var(--wmb-surface, #fff);
    color: var(--wmb-ink, #1a2742);
    border: 1px solid rgba(11, 31, 58, .12);
    box-shadow: 0 18px 48px rgba(11, 31, 58, .22);
    animation: cwConsentIn .28s ease both;
}
[data-theme="dark"] .cw-consent {
    background: #131c2b;
    color: #e8edf6;
    border-color: rgba(255, 255, 255, .12);
}
.cw-consent.is-hidden { opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
@keyframes cwConsentIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cw-consent__body { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cw-consent__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(31, 58, 95, .1);
    color: var(--wmb-primary, #1f3a5f);
    font-size: 18px;
}
[data-theme="dark"] .cw-consent__icon { background: rgba(255, 255, 255, .08); color: var(--wmb-accent, #f5a623); }
.cw-consent__text { flex: 1 1 320px; min-width: 240px; }
.cw-consent__title { display: block; font-size: 15px; margin-bottom: 2px; }
.cw-consent__desc { margin: 0; font-size: 13px; line-height: 1.5; opacity: .85; }
.cw-consent__desc a { color: inherit; text-decoration: underline; }
.cw-consent__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.cw-consent__btn {
    border: 0;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    white-space: nowrap;
}
.cw-consent__btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cw-consent__btn--primary { background: var(--wmb-primary, #1f3a5f); color: #fff; }
.cw-consent__btn--ghost {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(11, 31, 58, .2);
}
[data-theme="dark"] .cw-consent__btn--ghost { border-color: rgba(255, 255, 255, .22); }

@media (max-width: 991.98px) {
    /* Mobil alt sekme çubuğunun (--cw-tabbar-h) üstünde kalsın. */
    .cw-consent { bottom: calc(12px + var(--cw-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 575.98px) {
    .cw-consent { left: 8px; right: 8px; padding: 14px; }
    .cw-consent__actions { width: 100%; margin-left: 0; }
    .cw-consent__btn { flex: 1 1 0; }
}

/* ==================== Header hava durumu ambiyansı ====================
   Header'ın tamamında o anki havayı sezdiren ince bir katman. Kural:
   ASLA okunabilirliği bozmaz — tüm efektler düşük opaklıkta, içerik
   katmanının (z-index 1) altında, pointer-events:none.
   Veri kaynağı: wwwroot/js/weather.js → header[data-wx][data-wx-day].
   Performans: yalnızca transform/opacity animasyonu (compositor'da çalışır),
   canvas/JS döngüsü yok. */
/* DİKKAT: header'a overflow:hidden VERİLMEZ — kullanıcı menüsü dropdown'ı ve
   mobil collapse menüsü header'ın dışına taşar, kırpılırdı. Taşan partikülleri
   ambiyans katmanının kendisi kırpar (.cw-wxfx { overflow:hidden }).
   .cw-header zaten position:sticky olduğu için konumlandırma bağlamı hazır. */
.cw-header > .navbar { position: relative; z-index: 1; }

.cw-wxfx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* layout+paint yeterli; contain:strict boyut kısıtlaması da getirdiği için kullanılmaz */
    contain: layout paint;
}

/* --- Açık hava: sıcak bir ışık huzmesi, sağ üstten + yumuşak parıltı ---
   DİKKAT: Gökcismi sağ üstte, tam da nav araçlarının (tema düğmesi, Giriş
   Yap/Üye Ol) üzerinde durur. Yüksek opaklık + scale animasyonu butonları
   yıkayıp "render bozulması" gibi görünüyordu — bu yüzden huzme header'ın
   ÜSTÜNE taşınır (yalnızca alt kenarı görünür) ve opaklık düşük tutulur. */
.cw-wxfx__sun {
    position: absolute;
    top: -150px; right: 4%;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 186, 60, .38) 0%, rgba(255, 196, 87, .16) 42%, rgba(255, 205, 120, .06) 62%, transparent 74%);
    animation: cwSunPulse 6s ease-in-out infinite;
}
@keyframes cwSunPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: .8; transform: scale(1.04); }
}
/* Açık havada header boyunca ince bir gün ışığı yıkaması — güneş tek noktada
   kalmasın, "aydınlık gün" hissi şeridin tamamına yayılsın. */
.cw-header[data-wx="clear"]  .cw-wxfx { background: linear-gradient(100deg, transparent 30%, rgba(255,196,87,.10) 70%, rgba(255,176,60,.14) 100%); }
.cw-header[data-wx="partly"] .cw-wxfx { background: linear-gradient(100deg, transparent 40%, rgba(255,196,87,.07) 78%, rgba(255,176,60,.10) 100%); }

/* Havaya göre header'a atmosfer rengi — efekt tek tek damlalardan ibaret
   kalmasın, "hava kapalı/açık" bir bakışta okunsun. */
.cw-header[data-wx="rain"]   .cw-wxfx { background: linear-gradient(180deg, rgba(84,132,190,.28), rgba(84,132,190,.06) 75%); }
.cw-header[data-wx="storm"]  .cw-wxfx { background: linear-gradient(180deg, rgba(56,72,104,.38), rgba(56,72,104,.10) 75%); }
.cw-header[data-wx="snow"]   .cw-wxfx { background: linear-gradient(180deg, rgba(186,216,246,.38), rgba(186,216,246,.10) 75%); }
.cw-header[data-wx="fog"]    .cw-wxfx { background: linear-gradient(180deg, rgba(178,190,204,.42), rgba(178,190,204,.14) 80%); }
.cw-header[data-wx="cloudy"] .cw-wxfx { background: linear-gradient(180deg, rgba(140,158,182,.26), rgba(140,158,182,.06) 75%); }

/* --- Yağmur: ince, hızlı düşen çizgiler --- */
.cw-wxfx__drop {
    position: absolute;
    top: -22%;
    width: 2.5px; height: 26px;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgba(74, 140, 220, 0), rgba(58, 128, 214, .95));
    box-shadow: 0 0 3px rgba(74, 140, 220, .45);
    animation-name: cwRainFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes cwRainFall {
    from { transform: translate3d(0, -26px, 0); opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    to   { transform: translate3d(-16px, 150px, 0); opacity: 0; }
}
/* Fırtınada yağmur daha sert: daha koyu ve daha dik */
.cw-wxfx[data-kind="storm"] .cw-wxfx__drop {
    background: linear-gradient(to bottom, rgba(40, 60, 96, 0), rgba(40, 60, 96, .95));
    height: 30px;
}

/* --- Kar: yavaş, salınarak düşen taneler --- */
.cw-wxfx__flake {
    position: absolute;
    top: -12%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 12px rgba(190, 220, 255, .7);
    animation-name: cwSnowFall;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes cwSnowFall {
    from { transform: translate3d(0, -12px, 0);   opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    to   { transform: translate3d(22px, 140px, 0); opacity: 0; }
}
/* Kar tanesi düşüş süresi yağmurdan uzun olmalı — JS'in verdiği süreyi çarpanla uzat */
.cw-wxfx[data-kind="snow"] .cw-wxfx__flake { animation-duration: 6s !important; }
.cw-wxfx[data-kind="snow"] .cw-wxfx__flake:nth-child(3n)   { animation-duration: 8.5s !important; }
.cw-wxfx[data-kind="snow"] .cw-wxfx__flake:nth-child(3n+1) { animation-duration: 7.2s !important; }

/* --- Bulut: yatay süzülen yumuşak kütleler --- */
.cw-wxfx__cloud {
    position: absolute;
    left: -25%;
    width: 260px; height: 68px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(132, 158, 190, .42) 0%, rgba(132, 158, 190, .12) 55%, transparent 74%);
    animation-name: cwCloudDrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes cwCloudDrift {
    from { transform: translate3d(-300px, 0, 0); }
    to   { transform: translate3d(115vw, 0, 0); }
}
/* Sis daha yoğun ve geniş */
.cw-wxfx[data-kind="fog"] .cw-wxfx__cloud {
    background: radial-gradient(ellipse at center, rgba(176, 190, 206, .6) 0%, rgba(176, 190, 206, .2) 58%, transparent 80%);
    width: 380px; height: 96px;
}

/* --- Fırtına: yağmura ek olarak seyrek şimşek çakması --- */
.cw-wxfx__flash {
    position: absolute;
    inset: 0;
    background: rgba(232, 242, 255, .9);
    opacity: 0;
    animation: cwLightning 7s linear infinite;
}
@keyframes cwLightning {
    0%, 90%, 100% { opacity: 0; }
    91%           { opacity: .85; }
    92.5%         { opacity: 0; }
    94%           { opacity: .6; }
    95.5%         { opacity: 0; }
}

/* --- Gece: sıcak güneş yerine soğuk ay ışığı; damlalar açık renge döner ki
       koyu zeminde görünürlüğünü kaybetmesin. --- */
.cw-header[data-wx-day="night"] .cw-wxfx__sun {
    background: radial-gradient(circle, rgba(168, 196, 240, .28) 0%, rgba(150, 178, 226, .10) 45%, transparent 72%);
}
.cw-header[data-wx-day="night"] .cw-wxfx__drop {
    background: linear-gradient(to bottom, rgba(186, 212, 245, 0), rgba(186, 212, 245, .9));
    box-shadow: 0 0 4px rgba(186, 212, 245, .5);
}
.cw-header[data-wx-day="night"] .cw-wxfx__cloud {
    background: radial-gradient(ellipse at center, rgba(150, 172, 205, .4) 0%, rgba(150, 172, 205, .12) 55%, transparent 74%);
}

/* Koyu temada partiküller zaten açık renkli; katman opaklığı kısılmaz,
   yalnızca güneş huzmesi biraz yumuşatılır (beyaz patlama olmasın). */
:root[data-theme="dark"] .cw-wxfx__sun { opacity: .8; }

/* Mobilde header dar; partikül sayısı azaltılır ama görünürlük korunur */
@media (max-width: 767.98px) {
    .cw-wxfx__cloud { display: none; }
    .cw-wxfx__drop:nth-child(n+26), .cw-wxfx__flake:nth-child(n+20) { display: none; }
    .cw-wxfx__sun { width: 170px; height: 170px; top: -62px; }
}

/* Erişilebilirlik: hareket azaltma tercihinde animasyon yok, yalnızca statik ton */
@media (prefers-reduced-motion: reduce) {
    .cw-wxfx__drop, .cw-wxfx__flake, .cw-wxfx__cloud, .cw-wxfx__flash { display: none; }
    .cw-wxfx__sun { animation: none; }
}

/* ==================== Harita görünüm modu (altlık değiştirici) ====================
   FAB, mevcut yenile (top:16) ve 2D/3D (top:64) düğmelerinin altına yerleşir. */
.wmb-fab.wmb-fab--basemap { top: calc(var(--wmb-fab-top) + var(--wmb-fab-step) * 2); }
.wmb-fab--basemap.is-on { background: var(--wmb-primary, #1f3a5f); color: #fff; }

.wmb-basemenu {
    position: absolute;
    /* Menü, kendi düğmesiyle (slot 2) aynı hizada açılır */
    top: calc(var(--wmb-fab-top) + var(--wmb-fab-step) * 2);
    right: 62px;
    z-index: 21;   /* FAB'ların ve marker'ların üstünde — küme balonları menüyü örtmesin */
    min-width: 208px;
    padding: 6px;
    border-radius: 14px;
    background: var(--cw-surface, #fff);
    color: var(--cw-ink, #1a2742);
    border: 1px solid var(--cw-border, rgba(11, 31, 58, .12));
    box-shadow: 0 16px 40px rgba(11, 31, 58, .22);
    animation: wmbBaseIn .16s ease both;
}
@keyframes wmbBaseIn {
    from { opacity: 0; transform: translateX(6px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
:root[data-theme="dark"] .wmb-basemenu {
    background: #131c2b;
    color: #e8edf6;
    border-color: rgba(255, 255, 255, .12);
}

.wmb-basemenu__head {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .6;
}
.wmb-basemenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}
.wmb-basemenu__item:hover { background: rgba(11, 31, 58, .07); }
:root[data-theme="dark"] .wmb-basemenu__item:hover { background: rgba(255, 255, 255, .08); }
.wmb-basemenu__item .bi:first-child { font-size: 15px; opacity: .8; width: 18px; text-align: center; }
.wmb-basemenu__label { flex: 1 1 auto; }
/* Doğa modunun yanındaki canlı durum etiketi (ör. "yağmurlu", "gece") */
.wmb-basemenu__tag {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(31, 58, 95, .1);
    opacity: .85;
    white-space: nowrap;
}
.wmb-basemenu__tag:empty { display: none; }
:root[data-theme="dark"] .wmb-basemenu__tag { background: rgba(255, 255, 255, .1); }
.wmb-basemenu__check { opacity: 0; font-size: 14px; color: var(--cw-accent, #f5a623); }
.wmb-basemenu__item.is-active { background: rgba(245, 166, 35, .12); font-weight: 600; }
.wmb-basemenu__item.is-active .wmb-basemenu__check { opacity: 1; }

@media (max-width: 575.98px) {
    /* Düğme konumu --wmb-fab-top üzerinden zaten kayıyor; burada yalnızca
       menü dar ekrana sığacak şekilde daraltılır. */
    .wmb-basemenu { right: 56px; min-width: 180px; }
}

/* ---- Doğa modu tonlaması ----
   Kritik kural: tonlama SADECE altlık döşemesine uygulanır, üzerindeki veri
   katmanlarına (duraklar, hatlar, araçlar) DEĞİL — aksi hâlde gece modunda
   otobüs/durak ikonları da kararıp okunmaz hâle gelir.

   MapLibre'de tüm katmanlar tek canvas'a çizildiği için burada CSS kullanılmaz;
   tonlamanın tamamı `raster-*` paint özellikleriyle yapılır (bkz. basemaps.js).
   Bu yüzden eski .wmb-baselayer / [data-wmb-sky] kuralları kaldırıldı —
   OpenLayers ile birlikte artık tüketicisi yok. */

/* ==================== Header gökyüzü zemini ====================
   Hava durumunun "baya belli" olması için partikül yetmez — header'ın ZEMİNİ
   değişir. Gece koyu lacivert, açık havada gündoğumu tonları, yağmurda kurşuni.

   Metin/ikon renkleri tek tek ezilmez: header üzerinde --cw-* / --wmb-*
   DEĞİŞKENLERİ yeniden tanımlanır, tüm alt bileşenler (marka, menü, giriş
   düğmesi, hava rozeti, hamburger) bunları zaten kullandığı için topluca uyar.
   Koyu gökyüzü (gece / fırtına) → data-wx-mood="dark". */

.cw-header[data-wx] { transition: background .6s ease, border-color .6s ease, box-shadow .25s ease; }

/* ---- Gündüz ---- */
.cw-header[data-wx="clear"][data-wx-day="day"],
.cw-header[data-wx="clear"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(100deg, #dcefff 0%, #eaf4ff 38%, #ffe6b8 78%, #ffd68f 100%);
}
.cw-header[data-wx="partly"][data-wx-day="day"],
.cw-header[data-wx="partly"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(100deg, #dde9f6 0%, #e9f1fa 45%, #f6e3c4 85%, #f2dcb4 100%);
}
.cw-header[data-wx="cloudy"][data-wx-day="day"],
.cw-header[data-wx="cloudy"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(180deg, #c7d2e0 0%, #dde4ee 100%);
}
.cw-header[data-wx="fog"][data-wx-day="day"],
.cw-header[data-wx="fog"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(180deg, #cfd6dd 0%, #e4e8ec 100%);
}
.cw-header[data-wx="rain"][data-wx-day="day"],
.cw-header[data-wx="rain"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(180deg, #9fb4cd 0%, #c6d4e4 100%);
}
.cw-header[data-wx="snow"][data-wx-day="day"],
.cw-header[data-wx="snow"][data-wx-day="day"].is-scrolled {
    background: linear-gradient(180deg, #dcebfa 0%, #f2f8ff 100%);
}

/* ---- Gece: her hava koşulunda koyu gökyüzü ---- */
.cw-header[data-wx-day="night"],
.cw-header[data-wx-day="night"].is-scrolled {
    background: linear-gradient(180deg, #0a1226 0%, #16213f 55%, #1d2b4d 100%);
    border-bottom-color: rgba(255, 255, 255, .12);
}
.cw-header[data-wx="rain"][data-wx-day="night"],
.cw-header[data-wx="rain"][data-wx-day="night"].is-scrolled {
    background: linear-gradient(180deg, #0d1526 0%, #1a2436 55%, #223047 100%);
}
.cw-header[data-wx="snow"][data-wx-day="night"],
.cw-header[data-wx="snow"][data-wx-day="night"].is-scrolled {
    background: linear-gradient(180deg, #121d33 0%, #22314f 55%, #2c3e60 100%);
}

/* ---- Fırtına: gündüz bile koyu ---- */
.cw-header[data-wx="storm"],
.cw-header[data-wx="storm"].is-scrolled {
    background: linear-gradient(180deg, #26303f 0%, #38455a 60%, #45536b 100%);
    border-bottom-color: rgba(255, 255, 255, .12);
}

/* ---- Koyu gökyüzünde renk çevrimi (tek yerden, değişkenlerle) ---- */
.cw-header[data-wx-mood="dark"] {
    --cw-ink: #eef3fb;
    --cw-ink-soft: #d3ddec;
    --cw-muted: rgba(238, 243, 251, .62);
    --cw-border: rgba(255, 255, 255, .22);
    --cw-surface: rgba(255, 255, 255, .10);
    --wmb-ink: #eef3fb;
    --wmb-ink-soft: #d3ddec;
    --wmb-border: rgba(255, 255, 255, .24);
    --wmb-surface: rgba(255, 255, 255, .10);
}
.cw-header[data-wx-mood="dark"] .cw-nav__link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.cw-header[data-wx-mood="dark"] .cw-nav__login:hover { border-color: #fff; color: #fff; }
/* Aktif dil çipi koyu gökyüzünde koyu lacivert kalıyordu (zeminle karışıyor) —
   vurgu rengine sabitlenir. */
.cw-header[data-wx-mood="dark"] .wmb-langswitch__btn.is-active {
    background: var(--cw-accent, #f5a623);
    color: #14203a;
}
/* Koyu zeminde logonun açık renkli varyantı kullanılır (varsa) */
.cw-header[data-wx-mood="dark"] .cw-brand__logo--light { display: none; }
.cw-header[data-wx-mood="dark"] .cw-brand__logo--dark  { display: inline-block; }

/* Kapalı havalarda zemin koyulaşıyor: varsayılan yumuşak mürekkep rengiyle
   kontrast 3.6'ya düşüyordu (WCAG AA eşiği 4.5). Zemini açıp havayı
   yumuşatmak yerine metin koyulaştırılır — kontrast ~6.0'a çıkar. */
.cw-header[data-wx="rain"][data-wx-mood="light"],
.cw-header[data-wx="cloudy"][data-wx-mood="light"],
.cw-header[data-wx="fog"][data-wx-mood="light"] {
    --cw-ink: #131f36;
    --cw-ink-soft: #23324a;
    --cw-muted: rgba(19, 31, 54, .72);
    --wmb-ink: #131f36;
    --wmb-ink-soft: #23324a;
}

/* Açık gökyüzünde (gündüz) zemin aydınlık olduğundan koyu temada bile
   metinler koyu olmalı — aksi hâlde beyaz üstüne beyaz yazı çıkardı. */
:root[data-theme="dark"] .cw-header[data-wx-mood="light"] {
    --cw-ink: #14203a;
    --cw-ink-soft: #2c3c5c;
    --cw-muted: rgba(20, 32, 58, .62);
    --cw-border: rgba(11, 31, 58, .18);
    --cw-surface: rgba(255, 255, 255, .72);
    --wmb-ink: #14203a;
    --wmb-ink-soft: #2c3c5c;
    --wmb-border: rgba(11, 31, 58, .18);
    --wmb-surface: rgba(255, 255, 255, .78);
}
:root[data-theme="dark"] .cw-header[data-wx-mood="light"] .cw-brand__logo--dark  { display: none; }
:root[data-theme="dark"] .cw-header[data-wx-mood="light"] .cw-brand__logo--light { display: inline-block; }

/* ---- Yıldızlar: gecenin en okunur işareti ---- */
.cw-wxfx__star {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px rgba(255, 255, 255, .95), 0 0 10px rgba(190, 215, 255, .6);
    animation: cwStarTwinkle 3.4s ease-in-out infinite;
}
@keyframes cwStarTwinkle {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* Gece: "güneş" artık ay — küçük ve keskin bir disk.
   Güneşin 240px'lik huzmesi gecede kullanılırsa sağ üstteki düğmeleri yıkayıp
   okunmaz hâle getiriyor; ay bilinçli olarak çok daha küçük ve yukarıda durur. */
.cw-header[data-wx-day="night"] .cw-wxfx__sun {
    width: 92px; height: 92px;
    top: -26px; right: 9%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, .92) 0%,
            rgba(232, 242, 255, .80) 26%,
            rgba(190, 214, 250, .22) 40%,
            rgba(150, 178, 226, .08) 58%,
            transparent 72%);
    animation-duration: 9s;
}

@media (prefers-reduced-motion: reduce) {
    .cw-wxfx__star { animation: none; opacity: .8; }
}

/* ==================== Alt panel tutamağı (ss-shell ekranları) ====================
   WhereMyBus'taki .wmb-drag-handle ile aynı görünüm; ss-shell panellerinde
   kullanılır. Masaüstünde gizlidir (panel normal kenar çubuğudur). */
.ss-sheet-handle {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 26px;
    z-index: 6;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.ss-sheet-handle::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 5px;
    border-radius: 999px;
    background: rgba(127, 140, 162, .55);
    transition: background .15s ease, width .15s ease;
}
.ss-sheet-handle:hover::before,
.ss-sheet-handle:active::before { background: var(--wmb-primary); width: 60px; }
.is-dragging .ss-sheet-handle { cursor: grabbing; }
/* Görünürlük kuralı burada — dosyanın ilerisindeki "display:none" tabanını
   ezebilmesi için yukarıdaki medya sorgusunda DEĞİL, tanımın hemen ardında. */
@media (max-width: 991.98px) {
    .ss-sheet-handle { display: block; }
}
/* Koyu başlıklı detay panelinde tutamak açık renkte olmalı */
.ss-detail .ss-sheet-handle::before { background: rgba(255, 255, 255, .6); }
.ss-detail .ss-sheet-handle:hover::before { background: #fff; }

/* Altlık menüsündeki ilgi noktaları anahtarı */
.wmb-basemenu__sep {
    height: 1px;
    margin: 6px 8px;
    background: var(--cw-border, rgba(11, 31, 58, .12));
}
:root[data-theme="dark"] .wmb-basemenu__sep { background: rgba(255, 255, 255, .12); }
.wmb-basemenu__switch {
    flex: 0 0 auto;
    width: 32px; height: 18px;
    border-radius: 999px;
    background: rgba(11, 31, 58, .18);
    position: relative;
    transition: background .18s ease;
}
:root[data-theme="dark"] .wmb-basemenu__switch { background: rgba(255, 255, 255, .18); }
.wmb-basemenu__switch::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .18s ease;
}
.wmb-basemenu__item--switch.is-on .wmb-basemenu__switch { background: var(--cw-accent, #f5a623); }
.wmb-basemenu__item--switch.is-on .wmb-basemenu__switch::after { transform: translateX(14px); }
.wmb-basemenu__item--switch.is-on { background: transparent; font-weight: 600; }

/* Kart Bayileri — MapLibre popup'ı (OpenLayers overlay'inin yerini aldı) */
.fc-mlpopup .maplibregl-popup-content {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wmb-surface, #fff);
    color: var(--wmb-ink, #1a2742);
    box-shadow: 0 14px 34px rgba(11, 31, 58, .22);
    border: 1px solid var(--wmb-border, rgba(11, 31, 58, .12));
    font-size: 13px;
}
:root[data-theme="dark"] .fc-mlpopup .maplibregl-popup-content {
    background: #131c2b;
    color: #e8edf6;
    border-color: rgba(255, 255, 255, .12);
}
.fc-mlpopup .maplibregl-popup-tip { display: none; }
.fc-mlpopup .maplibregl-popup-close-button {
    font-size: 18px; padding: 2px 8px; color: inherit; opacity: .6;
}
.fc-mlpopup .maplibregl-popup-close-button:hover { opacity: 1; background: transparent; }

/* Kent Rehberi — POI detay balonu (js/mapcore.js).
   Gövde kabuğu Kart Bayileri balonuyla aynı; kategori şeridi kendi rengini
   --poi-color ile satır içinde alır (13 kategori için ayrı sınıf yazmamak için). */
.wmb-poipopup .maplibregl-popup-content {
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--wmb-surface, #fff);
    color: var(--wmb-ink, #1a2742);
    box-shadow: 0 14px 34px rgba(11, 31, 58, .22);
    border: 1px solid var(--wmb-border, rgba(11, 31, 58, .12));
    font-size: 13px;
}
:root[data-theme="dark"] .wmb-poipopup .maplibregl-popup-content {
    background: #131c2b;
    color: #e8edf6;
    border-color: rgba(255, 255, 255, .12);
}
.wmb-poipopup .maplibregl-popup-tip { display: none; }
.wmb-poipopup .maplibregl-popup-close-button {
    font-size: 18px; padding: 2px 8px; color: inherit; opacity: .6;
}
.wmb-poipopup .maplibregl-popup-close-button:hover { opacity: 1; background: transparent; }
.wmb-poipopup__cat {
    display: inline-block;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--poi-color, #64748b);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 1px 8px;
    margin-bottom: 6px;
}
.wmb-poipopup__name { display: block; font-size: 13.5px; line-height: 1.3; padding-right: 14px; }
.wmb-poipopup__addr { color: var(--wmb-muted); margin-top: 3px; }
.wmb-poipopup__tel { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; margin-right: 10px; color: var(--wmb-primary); font-weight: 700; text-decoration: none; }
.wmb-poipopup__nav { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--wmb-accent-600); font-weight: 700; text-decoration: none; }
.wmb-poipopup__nav:hover { text-decoration: underline; }

/* =========================================================
   Kurumsal bildirim bileşeni (cw-notice) + global alert tonu
   Düz bootstrap alert'lerinin kurumsal karşılığı. JS'le sürülen
   ana hata kutuları .cw-notice kullanır (GuestTopUp, BalanceInquiry);
   validation-summary gibi tag-helper alert'leri ise aşağıdaki
   .alert-danger/.alert-warning restyle'ı ile aynı dile çekilir.
   ========================================================= */
.cw-notice {
    display: flex; align-items: flex-start; gap: .8rem;
    border-radius: 12px; padding: .85rem 1rem;
    border: 1px solid transparent;
    font-size: .9rem;
}
.cw-notice__icon {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff;
}
.cw-notice__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cw-notice__title { font-weight: 700; font-size: .92rem; color: var(--wmb-ink); }
.cw-notice__text { color: var(--wmb-ink-soft); }
.cw-notice__actions { margin-top: .55rem; }
.cw-notice__btn {
    border: 1px solid var(--wmb-primary); background: transparent; color: var(--wmb-primary);
    font-weight: 600; font-size: .85rem;
    padding: .4rem 1rem; border-radius: 999px;
    transition: all .15s;
}
.cw-notice__btn:hover { background: var(--wmb-primary); color: #fff; }

.cw-notice--danger { background: rgba(185,28,28,.06); border-color: rgba(185,28,28,.18); }
.cw-notice--danger .cw-notice__icon { background: linear-gradient(135deg,#b91c1c,#dc2626); }
.cw-notice--danger .cw-notice__title { color: #991b1b; }

.cw-notice--warning { background: rgba(180,120,10,.07); border-color: rgba(180,120,10,.2); }
.cw-notice--warning .cw-notice__icon { background: linear-gradient(135deg,#b45309,#d97706); }
.cw-notice--warning .cw-notice__title { color: #92400e; }

.cw-notice--info { background: rgba(11,47,94,.06); border-color: rgba(11,47,94,.16); }
.cw-notice--info .cw-notice__icon { background: linear-gradient(135deg, var(--wmb-primary), var(--wmb-primary-600)); }

:root[data-theme="dark"] .cw-notice--danger { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.22); }
:root[data-theme="dark"] .cw-notice--danger .cw-notice__title { color: #fca5a5; }
:root[data-theme="dark"] .cw-notice--warning { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2); }
:root[data-theme="dark"] .cw-notice--warning .cw-notice__title { color: #fcd34d; }
:root[data-theme="dark"] .cw-notice--info { background: rgba(79,140,255,.1); border-color: rgba(79,140,255,.25); }
:root[data-theme="dark"] .cw-notice__btn { border-color: #4f8cff; color: #4f8cff; }
:root[data-theme="dark"] .cw-notice__btn:hover { background: #4f8cff; color: #0b1220; }

/* Bootstrap alert'lerinin kurumsal tonu — validation-summary dahil her
   yerde sert kırmızı/sarı yerine yumuşak zemin + sol kenar vurgusu. */
.alert.alert-danger {
    background: rgba(185,28,28,.06);
    border: 1px solid rgba(185,28,28,.18);
    border-left: 4px solid #b91c1c;
    color: #7f1d1d;
    border-radius: 10px;
}
.alert.alert-warning {
    background: rgba(180,120,10,.07);
    border: 1px solid rgba(180,120,10,.2);
    border-left: 4px solid #b45309;
    color: #78350f;
    border-radius: 10px;
}
.alert.alert-success {
    background: rgba(21,128,61,.07);
    border: 1px solid rgba(21,128,61,.2);
    border-left: 4px solid #15803d;
    color: #14532d;
    border-radius: 10px;
}
:root[data-theme="dark"] .alert.alert-danger {
    background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.22);
    border-left-color: #f87171; color: #fecaca;
}
:root[data-theme="dark"] .alert.alert-warning {
    background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2);
    border-left-color: #fbbf24; color: #fde68a;
}
:root[data-theme="dark"] .alert.alert-success {
    background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.22);
    border-left-color: #4ade80; color: #bbf7d0;
}

/* =========================================================
   Kurumsal form kontrolleri — tüm ekranlarda ortak dil
   (input, textarea, select, input-group, onay kutusu, tarih/saat).
   Bootstrap varsayılanlarının üzerine giydirilir; ekran bazlı özel
   bileşenler (htg-ctl, gt-chip...) kendi stillerini korur.
   ========================================================= */
.form-control,
.form-select {
    border: 1.5px solid var(--wmb-border);
    border-radius: 10px;
    background-color: var(--wmb-surface);
    color: var(--wmb-ink);
    padding: .55rem .85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
textarea.form-control { border-radius: 12px; }
.form-control::placeholder { color: var(--wmb-muted); opacity: 1; }
.form-control:focus,
.form-select:focus {
    border-color: var(--wmb-primary);
    box-shadow: 0 0 0 4px var(--wmb-primary-soft);
    background-color: var(--wmb-surface);
    color: var(--wmb-ink);
    outline: 0;
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--wmb-bg);
    color: var(--wmb-muted);
    opacity: 1;
}
/* Chrome otomatik doldurma sarısını kurumsal zeminle değiştir */
.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--wmb-surface) inset;
    -webkit-text-fill-color: var(--wmb-ink);
    transition: background-color 99999s ease-in-out 0s;
}

/* İkon kutusu (input-group-text): lacivert ikon, temaya uyan zemin.
   Görünümlerdeki `bg-white` utility'si koyu temayı bozmasın diye ezilir. */
.input-group-text {
    border: 1.5px solid var(--wmb-border);
    border-radius: 10px;
    background-color: var(--wmb-bg);
    color: var(--wmb-primary);
}
.input-group-text.bg-white { background-color: var(--wmb-surface) !important; }
.input-group-text .bi { color: var(--wmb-primary); }
/* Odak halkası grubun tamamında hissedilsin */
.input-group:focus-within .input-group-text {
    border-color: var(--wmb-primary);
    color: var(--wmb-primary);
}
/* Büyük gruplarda köşeler biraz daha yumuşak */
.input-group-lg > .form-control,
.input-group-lg > .input-group-text,
.input-group-lg > .btn { border-radius: 12px; }

/* Onay kutusu / radyo / anahtar — kurumsal lacivert */
.form-check-input {
    width: 1.15em; height: 1.15em;
    border: 1.5px solid var(--wmb-border);
    background-color: var(--wmb-surface);
}
.form-check-input:focus {
    border-color: var(--wmb-primary);
    box-shadow: 0 0 0 4px var(--wmb-primary-soft);
}
.form-check-input:checked {
    background-color: var(--wmb-primary);
    border-color: var(--wmb-primary);
}
input[type="range"] { accent-color: var(--wmb-primary); }

/* Select oku — lacivert (koyu temada açık mavi) */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230b2f5e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234f8cff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Tarih / saat alanları: takvim göstergesi kurumsal renkte, tıklanabilir */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control {
    min-height: calc(1.5em + 1.1rem + 3px);  /* metin kutularıyla aynı boy */
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .85;
    /* Önce tam siyaha indir, sonra laciverte (#0b2f5e) boya — taban ikon
       rengi tarayıcıya göre değiştiği için brightness(0) şart. */
    filter: brightness(0) saturate(100%) invert(15%) sepia(60%) saturate(1688%) hue-rotate(192deg) brightness(94%) contrast(101%);
    transition: opacity .15s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    /* Açık maviye (#4f8cff) boyar */
    filter: brightness(0) saturate(100%) invert(51%) sepia(93%) saturate(1750%) hue-rotate(200deg) brightness(102%) contrast(101%);
}
/* Tarayıcının koyu temada tarih metnini doğru renklendirmesi için */
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* Doğrulama durumu — kurumsal kırmızı, yumuşak halka */
.form-control.is-invalid,
.form-select.is-invalid { border-color: #dc2626; }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220,38,38,.10);
}
.invalid-feedback { color: #b91c1c; }
:root[data-theme="dark"] .form-control.is-invalid,
:root[data-theme="dark"] .form-select.is-invalid { border-color: #f87171; }
:root[data-theme="dark"] .form-control.is-invalid:focus,
:root[data-theme="dark"] .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(248,113,113,.12); }
:root[data-theme="dark"] .invalid-feedback { color: #fca5a5; }

/* ==== AVL hat/durak duyuru popup'ı (avlann) ==== */
/* Durak/hat/varyant seçilince açılan duyuru diyaloğu — markup:
   Views/Shared/_AvlAnnouncements.cshtml, JS: wwwroot/js/avl-announcements.js.
   z-index 2400: sayfa katmanlarının üstünde, duyuru detay modalının (2500) altında. */
body.avlann-open { overflow: hidden; }
.avlann { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.avlann__backdrop {
    position: absolute; inset: 0;
    background: rgba(4, 10, 22, .6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.avlann__card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    width: min(520px, 100%); max-height: min(82vh, 640px);
    border-radius: var(--cw-radius, 18px);
    background: var(--wmb-surface, #fff);
    color: var(--wmb-ink, #0b1f3a);
    box-shadow: var(--cw-shadow-2, 0 18px 48px rgba(11,31,58,.14));
    animation: avlannIn .22s ease;
}
.avlann__close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(10, 20, 40, .45); color: #fff; font-size: .95rem;
}
.avlann__close:hover { background: rgba(10, 20, 40, .65); }
.avlann__head {
    display: flex; align-items: center; gap: .9rem;
    padding: 1.1rem 3.4rem 1rem 1.25rem;
    border-bottom: 1px solid var(--wmb-border, #dde4ee);
    flex: 0 0 auto;
}
.avlann__icon { width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; box-shadow: 0 8px 18px rgba(11,47,94,.25); }
.avlann__headtext { min-width: 0; }
.avlann__kicker {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--wmb-primary, #0b2f5e);
    background: var(--wmb-primary-soft, #e7eef9);
    border-radius: 999px; padding: .22rem .6rem;
}
.avlann__kicker .bi { font-size: .78rem; color: var(--wmb-accent, #f5a623); }
.avlann__title {
    font-size: 1.02rem; font-weight: 800; margin: .3rem 0 0;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.avlann__list {
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: .85rem;
}
.avlann__item {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .9rem 1rem; border-radius: 14px;
    background: var(--wmb-chip, #f2f6fb);
    border: 1px solid var(--wmb-border-soft, #eef2f7);
}
.avlann__item-icon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; margin-top: .1rem; }
.avlann__item-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.avlann__item-title { font-size: .95rem; font-weight: 700; margin: 0; color: var(--wmb-ink, #0b1f3a); }
.avlann__item-text { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--wmb-ink-soft, #475569); white-space: pre-line; }
.avlann__item-ctx {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem;
    font-size: .78rem; font-weight: 600; color: var(--wmb-primary, #0b2f5e);
}
.avlann__item-ctx .bi { color: var(--wmb-accent, #f5a623); }
@keyframes avlannIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Mobil: alt sayfa (bottom sheet) hissi — karta alttan gir, üst köşeleri yuvarla */
@media (max-width: 575.98px) {
    .avlann { padding: 0; align-items: flex-end; }
    .avlann__card {
        width: 100%; max-height: 78vh;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation-name: avlannUp;
    }
}
@keyframes avlannUp { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .avlann__card { animation: none; } }

:root[data-theme="dark"] .avlann__card { border: 1px solid var(--wmb-border, rgba(255,255,255,.12)); }
:root[data-theme="dark"] .avlann__item { border-color: rgba(255, 255, 255, .08); }