/* ==========================================================================
   PANEL KABUGU - ortak, kompakt sayfa ust seridi
   --------------------------------------------------------------------------
   Sayfanin ICERIGININ cevresindeki kabuk: arac cubugu satiri, sekme seridi,
   kucuk bilgi rozetleri ve kart yogunlugu. Konumlandirma mekanigi AYRI
   dosyada (sticky-chrome.css); burasi yalnizca GORUNUM.

   NEDEN ORTAK: ilk hali sayfa basina bir stil dosyasiydi (vehicle-signals.css,
   `vsig-*`). Ikinci sayfaya gelindiginde sekme seridi kurallari BIREBIR
   kopyalanmak zorunda kaldi. Ayni gorunumun iki tanimi olmasi, birinde
   yapilan duzeltmenin digerine gecmemesi demek - iki sayfa zamanla birbirinden
   ayrisir. Sozluk tek yerde: sayfalar sinif ADI kullanir, kural YAZMAZ.

   Bu yuzden sinif adlari sayfa adi tasimaz (`vsig-`/`vdash-` degil, `bz-`):
   kullanan her sayfa ayni gorunume sahip olsun.

   KULLANIM - sayfada ayrica <link> YOK, dosya global yukleniyor:

       @section PageToolbar {
           <div class="bz-toolbar">
               <span class="bz-chip">...</span>
               <button class="btn btn-sm btn-outline-primary bz-toolbar-end">...</button>
           </div>
           <ul class="nav nav-tabs bz-tabs">...</ul>
       }

   Kart yogunlugu icin sayfa govdesini `.bz-compact` ile sar.
   ========================================================================== */

/* --- Arac cubugu satiri -------------------------------------------------- */

/* Sabit seridin icinde durur (bkz. sticky-chrome.css), dolayisiyla dikeyde
   ne harcarsa kaydirma boyunca harcar: mumkun oldugunca ince. */
.bz-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    padding: .4rem .6rem;
    /* Kose plakayla ayni (2026-10-06; eskiden denetim kosesi 6,12 px: Bilgilendirme seridi sayfa basligindan koseliydi). */
    border-radius: var(--bz-radius);
    /* Yuzey TEK TANIMDAN (asagida YUZEYLER): tek basina serit bir plaka, plakanin icindeki
       serit (kart basligi) plakanin parcasi - yuzeysiz. Eskiden kendi yari saydam zemini ve
       sola kaymis golgesi vardi. */
    margin-bottom: .5rem;
}

/* Plakanin icindeki ozet seridi (kart basligi) plakanin PARCASI: yuzeysiz (YUZEYLER), alt boslugu
   plakanin gap'i, yazisi plakanin icerigiyle hizali. */
:is(.mapbox, .dashboard-card) .bz-toolbar {
    margin-bottom: 0;
    padding-inline: var(--bz-stack-gap);
}

/* Ilgili alanlari bir arada tutan ic grup (ornegin tarih araligi formu). */
.bz-toolbar-group {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* Alan etiketi: kutunun ne oldugunu soyler ama kendine satir HARCAMAZ. */
.bz-toolbar-label {
    font-size: var(--bz-font-xs);
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.bz-toolbar-sep {
    color: var(--bs-secondary-color);
    font-size: var(--bz-font-xs);
}

/* Satirin SAGINA iter. Dar ekranda birakilirsa sarma sonrasi alt satiri da
   itekledigi icin kapatiliyor. */
.bz-toolbar-end {
    margin-left: auto;
}

@media (max-width: 991px) {
    .bz-toolbar-end {
        margin-left: 0;
    }
}

/* IKON DUGMELERI SATIR OLCUSUNE UYAR: artik sitenin TEK kurali (DUGME BOYU, 2026-10-05: dugmedeki ikon 16 px, satirin
   ustune hizali). Eskiden yalniz arac cubugu / kompakt kart basligi kendi kuraliyla 1.05rem'e cekiyordu; oteki
   dugmelerde 24 px ikon dugmeyi 36,5 px'e uzatiyordu. */

/* Arac cubugundaki kontroller kucuk boy. datetime-local varsayilan
   genisligiyle butun satiri yutuyordu - genislik ICERIGE gore. */
.bz-toolbar .form-control,
.bz-toolbar .form-select {
    font-size: var(--bz-font-sm);
    padding: .2rem .45rem;
}

/* Secicide ok simgesinin payi kalir (Bootstrap'in kucuk secicisindeki gibi 2.25rem): ustteki kisa dolgu onu da
   siliyordu, icerige gore genisleyen (`w-auto`) secicide ok metnin ustune biniyordu (Istatistik > Arac Turu).
   Yama istatistik CSS'indeydi; 2026-10-06'da tek tanima alindi. */
.bz-toolbar .form-select {
    padding-right: 2.25rem;
}

.bz-toolbar input[type="datetime-local"],
.bz-toolbar input[type="date"] {
    width: auto;
    min-width: 11.5rem;
}

/* select2 (bootstrap-5 temasi) seritteki secicilerle ayni boyda: tabani sabit 28 px yukseklik ve 1rem yazi
   veriyordu (Zaman Cizelgesi / Gunluk Plan rota ve sezon secicileri; olculdu 28 -> 20,6 px, .form-select ile
   esit). Genislik kurulumdan (betik) gelir, dokunulmaz. */
.bz-toolbar .select2-container--bootstrap-5 .select2-selection {
    min-height: 0;
    padding-top: .2rem;
    padding-bottom: .2rem;
    padding-left: .45rem;
    font-size: var(--bz-font-sm);
    line-height: var(--bz-line-normal);
}

    .bz-toolbar .select2-container .select2-selection--single {
        height: auto;
    }

/* Olcu TEK TANIMDAN (DUGME BOYU, 2026-10-05; eskiden .75rem / 600 kendi olcusuydu). */
.bz-toolbar .btn-sm {
    white-space: nowrap;
}

/* --- Ipucu balonu (tooltip) ---------------------------------------------- */

/* Uzun aciklamali balon: `customClass: 'bz-wide'` / `data-bs-custom-class="bz-wide"`. Bootstrap'in 200 px'i paragrafta
   cok dar; sola yasli. Once Bakim Istatistikleri gorunumundeydi, 2026-10-06'da tek tanima alindi (Surus Skoru aciklamasi
   da kullanir). Sayfa CSS'inde balon gorunumu yazilmaz: ozel `customClass`la beyaz / kirpilmis balonlar kaldirildi. */
.tooltip.bz-wide .tooltip-inner {
    max-width: 320px;
    text-align: left;
}

/* --- Rozet (bilgi / ipucu) ---------------------------------------------- */

/* Tek satirlik bilgi tasiyicisi: "son guncelleme", klavye ipucu, durum.
   Onceki hallerinde her biri kendi golgeli KARTIydi - tek bir zaman damgasi
   icin ~100 px dikey yer harcaniyordu. */
.bz-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .15rem .55rem;
    border-radius: 999px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-size: var(--bz-font-xs);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.bz-chip > i {
    color: var(--bs-primary);
    font-size: .85rem;
}

.bz-chip kbd {
    padding: 0 .25rem;
    font-size: var(--bz-font-xs);
    border-radius: 3px;
}

/* Rozetin asil degeri: etiketten ayrissin diye koyu. Uzun deger butun seridi
   itmesin diye kirpilir. Rakamlar esit genislikte: saniyede bir degisen saat rozeti
   genisleyip daralmasin (olculdu: 235,5 / 233,8 px arasinda gidip geliyordu). */
.bz-chip-value {
    font-weight: 600;
    color: var(--bs-emphasis-color);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* --- Durum rozeti: baslik seridinde ------------------------------------ */

/* Baslik satiri Bilgilendirme seridiyle AYNI (2026-10-06; kullanici: "bu bos gozuken alanlar admin paneldeki
   bilgilendirme alanlari gibi olsun", "burada tasarim ortaklansin"): rozet seridin hap cipi (asagida OZET SERIDI).
   Eskiden baslik satirina ozel, form kutusu gibi koseli 29 px rozetti. Genisligi icerigi kadar, esnemez. */
.page-header-aside .bz-chip {
    flex: 0 0 auto;
}

/* --- Arama kutusu: baslik seridinde ------------------------------------ */

/* Sayfanin listesini arayan kutu seridin sag yuvasinda, cipler + Filtrele'nin solunda (tablolardaki arama + Filtrele
   sirasi; ilk kullanan Bakim > Arac Ariza Durumu, 2026-10-16). Genislik SABIT: .form-control'un %100'u yuvanin
   genisligini aliyor, Filtrele ve sayfa eylemi alt satira iniyordu (olculdu: yuva iki satir, 53 px; yalniz flex
   tabani da yetmedi, yuva kutunun dogal genisligiyle olculuyor). Dar seritte 9rem'e kadar kisalir. */
.page-header-aside > input[type="search"] {
    flex: 0 1 auto;
    width: 14rem;
    min-width: 9rem;
}

/* NABIZ: her guncellemede bir kez, rozetin IKONUNDA. Rozet sabit durdugu surece "veri akiyor mu" sorusunu
   cevaplamiyor - saati okuyup kendiniz hesaplamaniz gerekiyordu. Ikon kisaca soluklasir, bakisi cekmeden akisin
   surdugunu soyler. 2026-10-06'ya kadar rozetin cevresinde bordo bir halka genisliyordu: saniyede bir guncellenen
   aracta rozetin kenari durmadan bordo yanip sonuyor, kenar rengi bozuk gibi okunuyordu (kullanici: "bir sey css'i
   bozuyor"). */
@keyframes bz-chip-beat {
    0% {
        opacity: 1;
    }

    35% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

.bz-chip.is-updated > i {
    animation: bz-chip-beat .9s ease-out;
}

/* Hareket hassasiyeti olan kullanicida animasyon yok; rozet yine calisir. */
@media (prefers-reduced-motion: reduce) {
    .bz-chip.is-updated > i {
        animation: none;
    }
}

/* --- Sayfa govdesi ------------------------------------------------------ */

/* Sabit seridin hemen altindaki icerik seride YAPISIK duruyordu; serit opak oldugu icin ilk
   kart kesilmis gibi gorunuyordu. Aralik artik seridin kendi alt dolgusunda (sticky-chrome.css
   .bz-sticky-bar-tail, --bz-panel-gap); `.bz-page-body` yalniz kanca, bosluk vermez (eskiden
   .75rem - seritle toplam 10.4px). */

.bz-chip-danger {
    border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.bz-chip-danger > i {
    color: var(--bs-danger);
}

/* --- Panel ozet seridi (kontrol panellerinin "Bilgilendirme" satiri) ----- */

/* NEDEN AYRI OLCU: `.bz-toolbar`in taban olculeri SABIT serit icin secildi -
   orada serit ekranda kalici oldugu icin dikeyde ne harcarsa kaydirma boyunca
   harcar, bu yuzden mumkun oldugunca ince. Ozet seridi ise sayfayla birlikte
   kayip gider; ayni sikilikta olmak zorunda DEGIL. Taban olculeri buyutmek
   VehicleSignals / VehicleDashboard sabit seritlerini de kalinlastiracagi icin
   fark bir DEGISTIRICI sinifta duruyor - iki gorunum, tek sozluk.

   Somut sikayet: taban olcusunde eylem dugmeleri ("Yeni Kullanici Ekle")
   yanindaki bilgi rozetinden KUCUK okunuyordu; satirin birincil ogesi en silik
   ogesiydi.

   ⚠️ DEGERLERI OKURKEN: kok yazi boyu bu projede 16px DEGIL, 12.24px
   (bkz. customstyle.css basi - bilincli ~%76.5 global olcek). Yani buradaki
   1rem = 12.24px. Nominal olarak "buyuk" gorunen sayilar ekranda oyle degil;
   bir olcu secmeden once hedefi PIKSEL cinsinden dusunun. Asagidaki degerler
   eski `info-box` blogundaki dugmeye (font 10.7px, yatay dolgu 12.2px, yuksek-
   lik 20px) gore bir tik BUYUK olacak sekilde secildi. */
/* Olculen (once): serit 42px = dolgu 2x6.7 + cip 28; dugme 26. Yuksekligi CIP
   belirliyordu (ikonu 1.05rem, degeri .98rem satir kutusunu buyutuyor), dugme
   degil. Dolgu + cip + dugme birlikte inince serit ~32px: kart basligi daha az
   yer tutar (sabit-yukseklik sayfalarda tabloya kalir). */
/* TEK BOY (2026-10-06, bz-tokens.css --bz-strip-height): yalniz baslikli serit de dugmeli serit kadar. */
.bz-panel-summary,
.page-header-container {
    gap: .5rem .85rem;
    padding: .3rem .75rem;
    min-height: var(--bz-strip-height);
}

.bz-panel-summary .bz-toolbar-label {
    font-size: var(--bz-font-sm);
}

.bz-panel-summary .bz-chip,
.page-header-container .bz-chip {
    padding: .15rem .65rem;
    font-size: var(--bz-font-sm);
    /* Uzun ipucu rozeti dar ekranda SARAR. Genel `.bz-chip` kurali nowrap: rozet sigmayinca alt
       satira iner, ama rozet tek basina bir satirdan UZUNSA (ör. 375 px'te bir cumlelik ipucu)
       metin rozetten tasip kaydirma kabini yatayda buyutuyordu. Kisa rozet etkilenmez; sarma
       yalniz rozet tek basina satiri astiginda devreye girer. */
    white-space: normal;
}

/* Ikon ve deger cip yazisiyla ayni satir kutusunda kalsin (.95rem); daha buyuk
   olduklarinda cip dugmeyi asiyordu (26px > 24px). */
.bz-panel-summary .bz-chip > i,
.page-header-container .bz-chip > i {
    font-size: .95rem;
}

.bz-panel-summary .bz-chip-value,
.page-header-container .bz-chip-value {
    font-size: var(--bz-font-sm);
}

/* Eylem dugmesinin olcusu TEK TANIMDAN (DUGME BOYU, 2026-10-05): 24 px, cipten (22 px) yine buyuk. Eskiden kendi
   olcusuydu (.9rem, .85rem yan dolgu). */

/* SAYFA YOLU (breadcrumb; Views/Shared/Partials/_CrumbsPartial.cshtml, 2026-10-06): baglam basliginin ikinci satiri,
   kucuk ve soluk; atalar baglanti, son halka (sayfanin turu) baglantisiz. Ayirici CSS'te, isaretlemede yok. Kullanici:
   "kucuk isletme yaziyor, bunlari yazmayalim; alt satirda minik breadcrumbs olsun": adin basindaki buyuk harfli TUR
   etiketi (ISLETME, DETAYLAR, BAKIM) kalkti. Yerlesim customstyle.css BAGLAM BASLIGI. */
.bz-crumbs > ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bz-font-xs);
    line-height: var(--bz-line-tight);
    color: var(--bs-secondary-color);
}

    .bz-crumbs li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        min-width: 0;
    }

        .bz-crumbs li + li::before {
            content: "\203A";
        }

    .bz-crumbs a {
        color: inherit;
        text-decoration: none;
    }

        .bz-crumbs a:hover,
        .bz-crumbs a:focus-visible {
            color: var(--bs-primary);
            text-decoration: underline;
        }

    .bz-crumbs [aria-current="page"] {
        color: var(--bs-body-color);
    }

/* PANEL BASLIGI (PanelSummaryModel.TitleKey): serit bir kartin BASLIK satiriysa (Bussiness/Index
   kartlari) basinda etiket degil baslik durur; yazisi sitenin panel basligiyla AYNI
   (customstyle.css `.mapbox .mapbox-header`: 1.3rem / 500 / baslik rengi). Buyuk harfli, aralikli
   kucuk etiket (.bz-toolbar-label) orada baska bir yazi tipi gibi okunuyordu (kullanici: "yazi
   tipleri siteden farkli"); ayni kartlar kardes sayfalarda (Personel, Cihaz Envanteri, Isletme
   Detaylari) mapbox-header ile basliklaniyor. Dugmeler de o baslik satirlarindaki gibi normal
   kalinlikta (taban arac cubugunun 600'u yerine). Kontrol panellerinin "Bilgilendirme" seridi
   (LabelKey) degismez. */
.bz-panel-summary-title {
    font-size: var(--bz-font-xl);
    font-weight: 600;
    line-height: var(--bz-line-tight);
    color: var(--bs-heading-color);
    white-space: nowrap;
}

.bz-panel-summary-titled .btn-sm {
    font-weight: 400;
}

/* --- Anahtar-deger listesi (detay kartlari) ------------------------------ */

/* "Etiket: deger" satirlari (ilk kullanan: Bussiness/BussinessDetail). Oranlar rota bilgi
   sekmesindeki listeyle ayni (_RouteDetailPartial `.rv-info-grid`: etiket .82rem / 500 soluk,
   deger .9rem); orada renkler sabit hex, burada tema degiskeni. Tablo DEGIL: satirlar
   karsilastirilmaz, etiket degerini tanimlar (<dl>). Dar ekranda etiket degerin ustune iner. */
.bz-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: .55rem 1.25rem;
    margin: 0;
}

/* SATIR SARMALAYICISI (istege bagli): <div><dt/><dd/></div> - cift birlikte gizlenip gosterilir (HTML <dl> grubu);
   izgaraya katilmaz, dt ve dd sanki dogrudan listenin cocuguymus gibi dizilir. Ilk kullanan: destek talebi
   ayrintisi (yanitlayan / yanit tarihi yalniz yanit varken). */
.bz-kv > div {
    display: contents;
}

:is(.bz-kv, .bz-kv > div) > dt {
    font-size: var(--bz-font-sm);
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* Satir boyu en az bir .btn-sm kadar: dugmeli (kopyala) ve dugmesiz satirlar yan yana kartlarda
   ayni hizada durur; yoksa dugmesiz liste sikisik, digeri seyrek goruluyordu. */
:is(.bz-kv, .bz-kv > div) > dd {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    min-height: 2rem;
    margin: 0;
    font-size: var(--bz-font-md);
    color: var(--bs-body-color);
}

@media (max-width: 575.98px) {
    .bz-kv {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .15rem;
    }

    :is(.bz-kv, .bz-kv > div) > dd {
        margin-bottom: .45rem;
    }
}

/* Uzun metin degeri (paragraf; ilk kullanan Medya Ozeti: aciklama, altyazi): etiket degerin ILK satiriyla hizali
   (ortada degil), deger satir sonlarini korur, bolunmeyen uzun sozcukte tasmaz. */
.bz-kv-text {
    align-items: baseline;
}

    :is(.bz-kv-text, .bz-kv-text > div) > dd {
        display: block;
        min-height: 0;
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

/* Dar yan sutun (ilk kullanan: destek talebi ayrintisi): etiket degerin USTUNDE - dar ekrandaki gibi; uzun deger
   (e-posta) etiketin yaninda sikisip kelime ortasindan kirilmaz. */
.bz-kv-stacked {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .1rem;
}

    :is(.bz-kv-stacked, .bz-kv-stacked > div) > dd {
        min-height: 0;
        margin-bottom: .55rem;
    }

/* Tek aralikli, kopyalanabilir deger (API anahtari): rota bilgi sekmesindeki kod kutusuyla ayni dil.
   Uzun anahtar satiri tasirmaz, kirilir. */
.bz-kv-code {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .1rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--bs-tertiary-bg);
    font-family: var(--bz-font-mono);
    font-size: var(--bz-font-sm);
}

/* --- SAYFA DUZENI: yigin / cerceve / panel sirasi ---------------------------
 * docs/ui-standardi.md bolum 3. HER SAYFA ayni kurallari kullanir; sayfa yukseklik,
 * dolgu ya da panel araligi YAZMAZ (mb-* / mt-* / p-* / pe-*, calc(100vh - Npx)).
 * Deger bz-tokens.css'ten; yeni sayfa da bu siniflarla kurulur.
 *
 *   .bz-stack       alt alta paneller, arasi --bz-panel-gap (kayan sayfalar).
 *   .bz-frame       TEK EKRAN cercevesi: .bz-stack gibi dizer ve ekranin KALANINI
 *                   doldurur, icerik kendi icinde kayar. Yukseklik TEK formul:
 *                   100vh - cercevenin ust konumu - sayfanin alt kenari. Ust konumu
 *                   js/bz-frame.js OLCER (--bz-frame-top: ustte bant, secici ne varsa);
 *                   olcum yokken cerceve sayfanin en ustunde varsayilir.
 *   .bz-frame-xl    (ek sinif) tek ekran YALNIZ genis ekranda (>=1200px); altinda
 *                   .bz-stack gibi dogal akis. Birden cok panel sirasi tasiyan sayfalar
 *                   (Isletmem, Isletme Detaylari) dar ekranda tek ekrana sigmaz.
 *   .bz-frame-fill  cercevenin kalan yuksekligini alan cocugu (tablo plakasi, panel
 *                   sirasi); oteki cocuklar (KPI seridi, secici) dogal boyunda. Birden
 *                   cok dolduran cocuk kalani ESIT boler (Isletmem'in iki panel sirasi).
 *   .bz-panels      yan yana paneller (Bootstrap .row uzerinde): oluk iki eksende
 *                   --bz-panel-gap. Plaka SUTUNUN ICINDE durur
 *                   (<div class="col-..."><div class="mapbox">); sutunun kendisi plaka
 *                   olursa kenari olugun yarisi kadar disari tasar.
 *
 * Eskiden: Konum `.home-main-row` (JS, alt pay 12), Durum/Tuketim `.home-fixed-frame`
 * (JS, alt pay 10), Seyahat `calc(100vh - 150px)`, Isletmem `calc(100vh - 57px)` - her
 * sayfada baska sabit.
 */
.bz-stack,
.bz-frame {
    display: flex;
    flex-direction: column;
    gap: var(--bz-panel-gap);
}

    .bz-stack > *,
    .bz-frame > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Kabin icinde aralik YALNIZ gap'ten: bilesenlerin kendi dis boslugu (.bz-toolbar .5rem,
       .notice-card 1rem, basliklarin varsayilani) ikinci bir aralik olurdu. Bootstrap satiri
       (.row) haric: onun negatif ust boslugu olugun dikey telafisi. Yardimci siniflar
       (mb-3 vb.) !important oldugu icin bunu ezer; sayfalar onlari yazmaz. */
    .bz-stack > :not(.row),
    .bz-frame > :not(.row) {
        margin-block: 0;
    }

.bz-frame {
    --bz-frame-top: calc(var(--bz-header-height) + var(--bz-page-gutter));
    height: calc(100vh - var(--bz-frame-top) - var(--bz-page-gutter));
    min-height: var(--bz-frame-min-height);
    overflow: hidden;
}

    .bz-frame > .bz-frame-fill {
        flex: 1 1 0;
        min-height: 0;
    }

/* Cercevedeki panel sirasi genis ekranda TEK SATIR. Saran (wrap) .row'da satirin yuksekligi
   icerikten gelir, kabin kalanina uzamaz: kartlar sirayi asip alttakine biniyordu (Isletmem'de
   olculdu: sira 413, kart 478). Dar ekranda sutunlar yine alt alta sarar. */
@media (min-width: 1200px) {
    .bz-frame > .row.bz-frame-fill {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1199.98px) {
    .bz-frame.bz-frame-xl {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

        /* Yuksekligi belirsiz kapta `flex-basis: 0` cocugu sifira ezer: dogal boy. */
        .bz-frame.bz-frame-xl > .bz-frame-fill {
            flex: 0 0 auto;
        }
}

.row.bz-panels {
    --bs-gutter-x: var(--bz-panel-gap);
    --bs-gutter-y: var(--bz-panel-gap);
}

/* Panel sutunundaki yigin (serit + pencere; Isletmem kartlari, 2026-10-07) sutundan genis olamaz. Esnek oge varsayilani
   (min-width: auto) seridin tek satirlik boyunda kaliyor, serit sutunu asip yanindaki karta biniyordu (olculdu: 900 px'te
   sutun 447, serit 478 px). Yigin kartin genislik kabi (asagida ROZETLER SIGMAZSA GIZLENIR). */
.row.bz-panels > [class*="col-"] > .bz-stack {
    min-width: 0;
    container: bz-kart / inline-size;
}

/* ROZETLER SIGMAZSA GIZLENIR (2026-10-07; kullanici: "ekran kuculdukce badges hide olabilir"; serit dugmeleri alt satira
   itiyordu): kartin seridi tek satir, baslik ve eylemler yerinde; rozetler tek satirlik kapta (denetim boyu), sigmayan
   rozet alt satira kayar ve kirpilir. Kart 30rem'den darsa (baslik + eylemler bile sigmaz) serit sarar, rozetler gizli.
   Baska yerde rozet kabi gorunmez (display: contents), rozetler seridin ogesidir. */
.bz-panel-summary-chips {
    display: contents;
}

.row.bz-panels > [class*="col-"] > .bz-stack > .bz-panel-summary {
    flex-wrap: nowrap;
}

    .row.bz-panels > [class*="col-"] > .bz-stack > .bz-panel-summary > :is(.bz-panel-summary-title, .bz-toolbar-group) {
        flex: none;
    }

    .row.bz-panels > [class*="col-"] > .bz-stack > .bz-panel-summary > .bz-panel-summary-chips {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem .5rem;
        min-width: 0;
        height: var(--bz-control-height);
        overflow: hidden;
    }

        .row.bz-panels > [class*="col-"] > .bz-stack > .bz-panel-summary > .bz-panel-summary-chips > .bz-chip {
            white-space: nowrap;
        }

@container bz-kart (max-width: 30rem) {
    .bz-stack > .bz-panel-summary {
        flex-wrap: wrap;
    }

        .bz-stack > .bz-panel-summary > .bz-panel-summary-chips {
            display: none;
        }
}

/* YIGININ BUYUYEN OGESI: kalan yuksekligi alir (yigin boyu belli bir kaptaysa). */
.bz-stack > .bz-stack-grow {
    flex: 1 1 auto;
    min-height: 0;
}

/* KABIN BOYUNU DOLDURAN YIGIN: boyu zaten belli bir kabin (cekmece icerigi) icinde; buyuyen oge kalan
   yuksekligi doldurur, icerik sigmazsa (sutunlar alt alta dustugunde) kuculmez, yigin kendi icinde kayar.
   Ilk kullanan: Filo istatistigi (solda dolduran harita, sagda kutucuklar). */
.bz-stack.bz-stack-fill {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

    .bz-stack-fill > .bz-stack-grow {
        flex-shrink: 0;
        min-height: 20rem;
    }

/* GOVDESI KALANI DOLDURAN PLAKA: baslik dogal boyda, govde (harita) plakanin kalanini doldurur; govdenin
   taban `height:100%`u baslikla birlikte plakayi tasirirdi. Arac panosunun harita plakasi (.bz-split-fill) ayni
   govde kuralini kullanir; onun boyunu bolunmus gorunum verir.
   TABAN YUKSEKLIK GOVDEDE (haritada), plakada degil: sutunlar alt alta dustugunde plakanin boyunu icerik
   vermez (harita %100). Taban plakadayken (25rem) govdenin altinda baska parca olan plakada (Filo arac
   ayrintisi: ariza seridi) harita 189 px'e iniyordu; ekran boyuyla olcekli (en az 20rem, ekranin yarisi). Yan
   yana duzende govde zaten kalani doldurur, taban etkisiz. */
.bz-plate-fill > .dashboard-card-body,
.bz-split-fill > .dashboard-card-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.bz-plate-fill > .dashboard-card-body {
    min-height: max(20rem, 50vh);
}

/* KUTUCUK IZGARASI: mini kartlar kabin genisligine gore satir satir; sabit sutun sayisi (col-6) yok.
   auto-FIT: bos sutun birakmaz, kutucuklar satiri SAG KENARA KADAR doldurur (auto-fill'de satirin sagi
   bos kaliyordu). Taban 8rem. Sabit sutun sayisi isteyen yerlesim asagidaki degistiricileri kullanir. */
.bz-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--bz-stack-gap);
}

    /* Sabit sutun sayisi: kutucuklarin dizilisi genislikle degismez, yan yana plakalarda satirlar ayni hizada
       (Filo, 2026-10-14: haritanin altinda Araclar 3 + Hatalar 1 = dort sutun iki satir, Isletme Rotalar'in bilgi
       kartlari gibi; kutucuklar plaka paylari kadar farkli genislikte, 1600 px'te 262 / 254 px). auto-fit dizilisi
       genislige birakir: ayni yerde 1366 px'te Araclar 6 tek satir, Hatalar 1 + 1, plakalarin satirlari kayiyordu.
       2026-10-14'e kadar `.bz-tile-cols-2` (Filo'nun sag sutunu) vardi. */
    .bz-tile-grid.bz-tile-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bz-tile-grid.bz-tile-cols-1 {
        grid-template-columns: minmax(0, 1fr);
    }

/* --- Sabit-yukseklik cerceve: kart + DataTables dolgu zinciri ------------- */
/*
 * Opt-in: cerceve ogesine `.bz-fill-frame` (cogu zaman `.bz-frame` ile birlikte).
 * Cercevenin yuksekligini .bz-frame verir; bu blok yalniz yuksekligi kartin icine,
 * oradan DataTables govdesine INDIRIR: kart > .mapbox-body > .content-box >
 * .dt-container > tablo satiri > .dt-scroll > .dt-scroll-body.
 * Ust/alt kontrol satirlari (mb-2 / mt-2) dogal yuksekliktedir; govde kalani
 * doldurur ve TEK BASINA kaydirir - az satirda alti bos kalir, cok satirda
 * govde icinde scroll; info + sayfalama kartin dibinde sabit kalir.
 * bmServerPaging'in `dom` yapisina (bm-server-paging.js defaultDom) baglidir.
 * Home vitrinlerindeki eski `.home-fixed-frame` zinciri (css/home/
 * home-vehicle-table.css) bununla BIREBIR ayniydi; kaldirildi, sayfalar bunu kullanir.
 */
.bz-fill-frame .mapbox {
    min-height: 0;
}

.bz-fill-frame .mapbox-header {
    flex: 0 0 auto;
}

.bz-fill-frame .mapbox-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* YAN YANA TEK EKRAN (2026-10-05; ilk kullanan Isletmem > Yol Isaretleri, kullanici: "arac versiyonlari ayri tabda
   olmasin"): plaka govdesi YATAY - solda ana pencere (zincir aynen: pencere > sekme icerigi > tablo kabi, kalani doldurur),
   sagda dar YAN SUTUN (.bz-fill-aside): basligi sabit, listesi kendi icinde kayar; ince ayirici cizgiyle ayrilir (plaka
   kartin icindeki ikinci pencere cizmez, V7.1). Dar ekranda (<992 px) alt alta, yan sutun ekranin %40'ina kadar. */
.bz-fill-frame .mapbox-body.bz-fill-split {
    flex-direction: row;
    gap: var(--bz-stack-gap);
}

    .bz-fill-frame .mapbox-body.bz-fill-split > .mapbox {
        min-width: 0;
    }

.bz-fill-aside {
    flex: 0 0 clamp(220px, 24%, 320px);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bz-stack-gap);
    padding-left: var(--bz-stack-gap);
    border-left: var(--bz-border-width) solid var(--bs-border-color-translucent);
}

    .bz-fill-aside-head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--bz-space-2);
        padding: var(--bz-window-pad) 0 0;
        font-weight: 600;
    }

    .bz-fill-aside-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

@media (max-width: 991.98px) {
    .bz-fill-frame .mapbox-body.bz-fill-split {
        flex-direction: column;
    }

    .bz-fill-aside {
        flex: 0 1 auto;
        max-height: 40vh;
        padding-left: 0;
        padding-top: var(--bz-stack-gap);
        border-left: 0;
        border-top: var(--bz-border-width) solid var(--bs-border-color-translucent);
    }
}

/* flex-wrap: pencere Bootstrap `.row` da tasiyabiliyor (Seyahat); sarma kapali. */
.bz-fill-frame .content-box {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* SEKMELI PENCERE: pencerenin icindeki not ve sekme seridi dogal boyda, sekme icerigi kalani
   doldurur, yalniz AKTIF sekme. Eskiden journey.css'te Seyahat'e ozeldi; sekmeli her pencerede
   ayni kural (Seyahat'in sekmeleri 2026-10-07'den beri sayfa seridinde, bolme zinciri ayni). */
.bz-fill-frame .content-box > .notice-card,
.bz-fill-frame .content-box > .nav-tabs {
    flex: 0 0 auto;
}

.bz-fill-frame .content-box > .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bz-fill-frame .tab-content > .tab-pane.active {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bz-fill-frame .dt-container {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ust/alt kontrol satirlari + gizli autosize yardimcisi: dogal yukseklik. */
.bz-fill-frame .dt-container > .row.mb-2,
.bz-fill-frame .dt-container > .row.mt-2,
.bz-fill-frame .dt-container > .dt-autosize {
    flex: 0 0 auto;
}

/* Tablo satiri (mb-2/mt-2 OLMAYAN .row) kalani doldurur. flex-direction:column
   SART - yoksa tek .col-12 cocugu ana eksende sinirlanmaz, icerik boyuna siser. */
.bz-fill-frame .dt-container > .row:not(.mb-2):not(.mt-2) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bz-fill-frame .dt-container > .row:not(.mb-2):not(.mt-2) > .col-12 {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bz-fill-frame .dt-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bz-fill-frame .dt-scroll-head {
    flex: 0 0 auto;
}

/* Govde kalani doldurur; DataTables'in inline height/max-height'ini ez. */
.bz-fill-frame .dt-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
}

/* YONETIM PANELI iskeleti (kullanici, 2026-10-02: "admin sayfalarinda tablolarin icerikleri hep yarim; icerik varsa
   alta kadar uzasin, max yukseklik sayfa yuksekligi, tablo ici scroll"; ornek Home/VehicleStatus): plaka > govde >
   ic pencere (.mapbox.bm-surface) > sekme icerigi > etkin sekme > .table-responsive > DataTables. Ic pencere ve sekme
   icerigi kalani doldurur; tablolu sekmede .table-responsive kalani alir, kayan DataTables'in govdesidir. Tablosuz
   sekme (ekleme formu vb.) kendi icinde kayar. Isaretleme: Views/Admin/*ControlPanel, ErrorLogs, AdminTicketRequest. */
.bz-fill-frame .mapbox-body > .mapbox {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.bz-fill-frame .mapbox > .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .bz-fill-frame .mapbox > .tab-content > .tab-pane.active {
        overflow-y: auto;
    }

/* TABLO KABI (.table-responsive) nerede durursa dursun (sekme, pencere, plaka govdesi) kalani alir. Icindeki DataTables
   kabi onu doldurur (asagida .dt-container); duz (DataTables'siz) tablo bu kabin icinde kayar (Isletme Rotalari,
   Isletme Kullanicilari). DataTables'in kendi kayan govdesi kabi tam doldurdugu icin ikinci bir cubuk cikmaz. */
.bz-fill-frame :is(.tab-pane.active, .content-box, .mapbox-body) > .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Kendi icinde kayan TABLONUN basligi yapiskan, zemini opak (table-transparent hucreleri saydam; satirlar arkasindan
   gecerdi): duz tablo ve yatay kaydirmasiz DataTables (varsayilan duzen, ornek: Isletme Kurallari). customstyle.css
   `.mapbox .table { overflow: hidden }` tabloyu kaydirma kabi yapiyor, baslik ona yapisip kayboluyordu (onizlemede
   olculdu); clip ayni kirpmayi kaydirma kabi kurmadan yapar. */
.bz-fill-frame .table-responsive > .table,
.bz-fill-frame .dt-layout-table > * > .table {
    overflow: clip;
}

    .bz-fill-frame .table-responsive > .table > thead > tr > th,
    .bz-fill-frame .dt-layout-table > * > .table > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--bs-body-bg);
    }

/* DataTables'in VARSAYILAN duzeni (dom verilmemis tablo; ornek: Harici Uygulamalar > Yonetilen servisler). Bootstrap 5
   eklentisi (DataTables 2.2) satirlari `.row.mt-2` yazar - yukaridaki kontrol satiri kurali onlari dogal boyda tutar;
   tablo satiri `.dt-layout-table` kalani doldurur. Hucre `d-md-flex align-items-center` tasir: kaydirma kabi kendi
   hizasini (stretch) alir, yoksa ortalanip icerigi kadar kalir ve kap tasani kirpar (onizlemede olculdu). */
.bz-fill-frame .dt-container > .row.dt-layout-table {
    flex: 1 1 auto;
    min-height: 0;
    flex-wrap: nowrap;
}

    /* Hucrenin sinifi surume gore degisiyor (2.2: dt-layout-full, dt-layout-cell yok): dogrudan cocuk. !important
       ZORUNLU: DataTables'in kendi CSS'i `div.dt-container div.dt-layout-table > div { display: block !important }`
       yaziyor (Bootstrap'in d-md-flex'ini de eziyor); blok hucrede kaydirma kabi kalani alamiyordu. */
    .bz-fill-frame .dt-container > .row.dt-layout-table > * {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        overflow: auto;   /* yatay kaydirmasiz tablo (.dt-scroll yok) hucrenin icinde kayar */
    }

    .bz-fill-frame .dt-layout-table .dt-scroll {
        align-self: stretch;
    }

/* --- Hizli kisayol dugmeleri -------------------------------------------- */

.bz-quick {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

/* Kisayol dugmelerinin olcusu TEK TANIMDAN (DUGME BOYU, 2026-10-05; eskiden .72rem / 600). */

/* Yururlukteki secimle ORTUSEN kisayol isaretlenir: kullanici hangi araliga
   baktigini kutulari okumadan gorur. */
/* Secili kisayol sitenin SECIM dilinde: zemin ve yazi rengi YUZEYLER TUS (gorunumu bz-tokens.css TUŞ notu). Buradaki `color`
   ayni seciciyle sonra gelen TUS kuralina yeniliyor. */
.bz-quick .btn.active {
    border-color: transparent;
    color: var(--bs-primary);
    font-weight: 600;
}

/* --- Sekme seridi: KANAL (tek tanim) ------------------------------------ */

/* SITEDEKI BUTUN SEKME SERITLERI TEK KURALDAN (kullanici, 2026-10-01: "bu tasarimi yenileyelim, kanalli
   tab tasarimina benzetebiliriz"; "pek cok sayfada var, umarim hepsi tek yerden geliyordur"). Bootstrap
   `.nav-tabs` - panel sekmeleri (`_PanelTabsPartial`: Yonetim panelleri, Durak), Medya / Rota, arac panosu
   ve Tum Sinyaller seridi, Yonetim formlari, Istatistik, Bakim, Home - navbar'daki sayfa sekmeleriyle
   (`.bz-segment`) AYNI dilde: KANAL icinde secili sekme TUS (gorunumu bz-tokens.css TUŞ notu). Yuzeyler ve uzerine gelme
   YUZEYLER bolumunde (KANAL / TUS); burada yalniz kutu.
   Eskiden bes ayri sekme gorunumu vardi: `.bz-tabs` (sabit seritte kendi zemini, ust kenari bordo cizgili),
   `.bz-tabs-panel` (seffaf serit, klasik sekme), duz Bootstrap sekmesi ve sayfa ezmeleri (Istatistik:
   #333 yazi + kendi dolgu/boy; Nasil Calisir: dolu bordo secili; Rota ice aktarma: gri bant).
   `.bz-tabs` / `.bz-tabs-panel` siniflari isaretlemede kalabilir, gorunum tasimaz.
   Serit icerigi kadar genis (`fit-content`); tam genislik isteyen serit `w-100` / `.stat-tab-strip` tasir.
   Olcu navbar seridiyle ayni yazi (1rem / 600).
   HAP + YERINE GORE IZ (2026-10-06; kullanici ornekleri, "tab alanlarini floating yapsak"): serit ve ogeleri hap; iz
   zeminde yuzen beyaz, plakada gomulu gri, ust cubugun bandinda kapsiz (YUZEYLER KANAL baglami). SECIM KALINLASMAZ
   (kullanici: "secili olanin fontu kalinlasiyor, ayni olsun"): secili sekme yalniz TUS zemini ve yazi rengiyle ayrilir,
   secim degisince serit genislemez.
   YARICAP (2026-10-07; kullanici, Arac Sinyalleri ve Arac Panosu: "alanin kenarlari cok yuvarlaniyor"): serit ve oge
   999px degil, TEK SATIRLIK ogenin yari boyu: tek satirda yine tam hap (yari boydan buyuk yaricap tarayicida yari boya
   iner), saran seritte koseleri bu yaricapla yuvarlanan dikdortgen; iki satira inen oge de oyle. 999px saran seridi
   uclari yarim daire bir stadyuma ceviriyordu (Arac Sinyalleri'nin 5 paketi 1054 px'te 4 satir, 104 px: 52 px'lik
   uclar), iki satirlik ogeyi elipse. +2 px pay: secili oge her yonde 1 px buyur, baslik seridinde ve bantta oge daha
   uzun (denetim boyu, 25,3 px); tek satirda hap kalir. Seridin yaricapi ogeninki + ic bosluk + kenarlik (es merkezli). */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-link-padding-y: .2rem;
    --bs-nav-link-padding-x: .75rem;
    --bs-nav-link-font-size: var(--bz-font-md);
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-primary);
    --bs-nav-tabs-link-active-color: var(--bs-primary);
    --bz-tab-radius: calc(var(--bs-nav-link-font-size) * var(--bs-body-line-height) / 2 + var(--bs-nav-link-padding-y) + 2px);
    --bs-nav-tabs-border-radius: var(--bz-tab-radius);
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 2px;
    border-radius: calc(var(--bz-tab-radius) + 2px + var(--bz-border-width));
    /* Kanal yuzeyi TEK TANIMDAN (asagida YUZEYLER, KANAL). */
}

    /* Sarmalayici <li> esnek kap: secili sekme seridin boslugunda dikeyde de 1 px buyuyebilsin. */
    .nav-tabs > .nav-item {
        display: flex;
    }

/* PANEL SEKME SERIDI plakanin DISINDA, ustunde durur (_PanelTabsPartial; Medya / Rota): sayfa zemininde kendi
   kanaliyla, plakanin icinde gri ustune gri olmaz. Altindaki plakayla arasi yigin araligi (yiginin icinde
   gap verir, burada pay sifirlanir). */
.bz-tabs-panel {
    margin-bottom: var(--bz-stack-gap);
}

/* VARLIK SEKMELERI BASLIK SERIDINDE (2026-10-06; kullanici: "bu tarz alanlar da birlessin, arac header'i icine girsin
   tablar"; "sayfanin komplesini degistiriyorsa navda, bir kismini degistiriyorsa header'da"): secili kaydin basligi ve
   sekmeleri TEK serit (Filo'da arac, Rotalar'da rota, Medya'da dosya: ad solda, sekmeler ortada). KURAL (2026-10-07;
   kullanici: "sayfa degismiyor icerik degisiyor, o yuzden seritte olmaliydi"): baska sayfaya giden sekme ust cubugun
   bandinda; sayfada kalip icerigi degistiren sekme o icerigin baslik seridinde - sayfanin sekmeleri sayfa seridinde
   (js/page-tabs-slot.js), secili kaydin sekmeleri kaydin seridinde. Seridi olmayan sayfanin sekmeleri bandin ortasinda
   (UST CUBUK YUVASI). Sekme seridi kendi satirini harcamaz. Iz bantta oldugu gibi kapsiz (YUZEYLER KANAL, serit baglami); oge kompakt denetim boyunda, serit
   tek boyda kalir (--bz-strip-height). */
/* Kenar kalinligi 0: kapsiz izin saydam kenari bile seridi 1,3 px uzatiyordu (olculdu: 34,18 / 33,53 px). */
.page-header-middle > .nav-tabs {
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border-width: 0;
}

    .page-header-middle > .nav-tabs .nav-link {
        display: flex;
        align-items: center;
        min-height: var(--bz-control-height);
        padding-top: 0;
        padding-bottom: 0;
        white-space: nowrap;
    }

/* SIGMAYAN SEKME SERIDI ACILIR MENUYE DONER (2026-10-07; kullanici: "sikistiginda dropdownlu olsun"): secenekler tek
   satira sigmazsa serit tek dugmedir, secili sekmenin adi + ok, menude butun sekmeler (js/bz-tabs-fit.js; ust cubugun
   bolum sekmeleri gibi, navbar-fit.js). Baslik seridinin ortasindaki ve bandin yuvasindaki serit kendiliginden, yerinde
   duran serit `data-bz-tabs-fit` ile; isaretli serit sarmaz (sigar ya da menuye doner, satir boyu degismez). Orta kolon
   sekmelerin tam genisligine kadar buyur, yer yetmezse daralir (min-width 0): betik tasmayi olcer. Ayni gun once
   yatayda kayan serit denendi: 12 kategorili Nasil Calisir'da sondaki sekmeler kenarda kesik kaliyordu. Eskiden kolon
   sekmelerden dar olamiyor, serit sayfadan tasiyordu; yerindeki serit sarip satirlar aciyordu (Arac Sinyalleri, Arac
   Panosu). Menunun gorunumu bolum sekmelerinin menusuyle ayni (customstyle.css, YUZEYLER). */
.page-header-container .page-header-middle:has(> .nav-tabs) {
    justify-self: stretch;
    min-width: 0;
}

.nav-tabs[data-bz-tabs-fit] {
    min-width: 0;
}

/* Satir siniri yazilmamis serit tek satir; `data-bz-tabs-fit="2"` o kadar satira sarar (js/bz-tabs-fit.js). */
.nav-tabs[data-bz-tabs-fit=""] {
    flex-wrap: nowrap;
}

    /* Oge daralip yazisini sarmasin: olcum ogenin tam adiyla. */
    .nav-tabs[data-bz-tabs-fit] .nav-link {
        white-space: nowrap;
    }

/* Menuye donmus serit yalniz dugme; serit acikken dugme yok. Uzun ad uc noktayla kisalir, ok gorunur kalir (tam ad
   ipucunda). Dugmenin sarmalayicisi `.nav-item` degil (sekme sayan betikler onu saymasin), esnek kabi burada. */
.nav-tabs.is-collapsed > .nav-item,
.nav-tabs:not(.is-collapsed) > .bz-tab-menu {
    display: none;
}

.nav-tabs > .bz-tab-menu {
    display: flex;
    min-width: 0;
}

    /* Daralmayi min-width:0 saglar. max-width:100% KONMAZ: secili oge -1 px kenar payiyla ogesinden 2 px genis,
       %100 dugmeyi 2 px kisip yer varken adi kesiyordu ("Anons..."; bolum menusundeki ayni tuzak, customstyle.css). */
    .bz-tab-menu > .nav-link {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Baslik seridinde tek kalan dugme secili sekmenin boyunda: secili sekme komsularinin boyuna (denetim boyu) gerilip
       her yonde 1 px buyur, dugmenin komsusu yok (olculdu: 25,25 / 26,18 px). */
    .page-header-middle > .nav-tabs > .bz-tab-menu > .nav-link {
        min-height: calc(var(--bz-control-height) + 2px);
    }

/* DAR SERIT (sekmeli + sag yuvali sayfa seridi; 2026-10-07, yonetim panellerinin rozet ve eylemleri seride cikinca): serit
   64rem'den darsa sag yuva ikinci satira iner, sola yaslanir ve sarar; ustte ad + sekmeler. Genis seritte yuva tek satir,
   sekmeler sigmazsa once menuye doner (js/bz-tabs-fit.js). */
[data-bz-page-strip]:has(> .page-header-middle):has(> .page-header-aside) {
    container: bz-strip / inline-size;
}

@container bz-strip (max-width: 64rem) {
    .page-header-container > .page-header-middle ~ .page-header-aside {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: auto;
    }
}

/* Sayfa adi sekmelerle ayni seritte tek satir: yer daralinca sekmeler menuye doner, ad sarmaz ya da kisalmaz (sayfanin
   adi sabit). Secili kaydin adi (.page-header-text-inline) kendi kuralinda: sigmazsa kayan yazi (js/bz-strip-fit.js). */
.page-header-container:has(> .page-header-middle > .nav-tabs) > .page-header-text {
    white-space: nowrap;
}

/* SAYFANIN DURUMU VE EYLEMLERI sayfa basligi seridinin saginda (2026-10-06: _Layout `PageHeaderAside`, Bilgilendirme
   seridinde PanelSummaryModel.Aside). Eskiden sekme satirinin sagindaydi (.bz-tabs-bar + .bz-tabs-bar-end); sekmeler ust
   cubuga cikinca zeminde kutusuz kaliyordu (kullanici: "yine alan icine girsin"). */

/* UST CUBUK YUVASI (2026-10-06): baslik seridi olmayan sayfanin (adi ve eylemi yok; bolum sekmesi de yok) sekme seridi
   bandin ortasinda (js/page-tabs-slot.js, [data-bz-page-tabs]). Olcu bolum sekmeleriyle ayni: nav-link boyunda
   (2.5rem), oge ic boslugu .8rem; bantta kendi kabini cizmez (YUZEYLER KANAL, .custom-navbar baglami). Sigmazsa
   acilir menuye doner (js/bz-tabs-fit.js); "safe center" olcum anindaki tasan seridin basini kesmez. Kap kirpmaz:
   menu bandin altina iner. */
.bz-navbar-slot {
    justify-content: safe center;
}

    .bz-navbar-slot > .nav-tabs {
        flex-wrap: nowrap;
        align-self: center;
        height: 2.5rem;
        margin-bottom: 0;
        --bs-nav-link-padding-x: .8rem;
    }

        /* height: auto - AdminLTE `.app-header .nav-link { height: 2.5rem }` ust cubuktaki her baglantiya serit boyunu
           veriyordu: tasinan sekmeler 30,6 px'e uzayip seritten tasiyordu, bolum sekmeleri 25,3 px (olculdu). Oge
           seridin icini doldurur (nav-item esnek kap), secili oge her yonde 1 px buyur: 25,3 / 27,3 px, ikisi ayni. */
        .bz-navbar-slot > .nav-tabs .nav-link {
            display: flex;
            align-items: center;
            height: auto;
            white-space: nowrap;
        }

    /* Dikey dolgu YUZEYLER'de (TUS cizgisinin yazi payi). */
    .nav-tabs .nav-link {
        border: 0;
        border-radius: var(--bs-nav-tabs-border-radius);
    }

        /* Uzerine gelme zemini izin tersi (gri izde beyaz, beyaz izde gri): izin yerine bagli oldugu icin YUZEYLER
           KANAL'da. Golgesi (kalkan yuzey) 2026-10-05'te kalkti. */

        /* Secili sekme: TUS (YUZEYLER); yazi kalinligi otekilerle ayni (2026-10-06'ya kadar 700). Seridin 2 px
           boslugunun 1 px'ine tasarak her yonde 1 px buyur; yatayda +1 px dolgu dis olcuyu korur, komsular kaymaz
           (`.bz-segment` ile ayni). */
        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            margin: -1px;
            padding-left: calc(var(--bs-nav-link-padding-x) + 1px);
            padding-right: calc(var(--bs-nav-link-padding-x) + 1px);
        }

/* --- Segment grubu ------------------------------------------------------ */

/* SEKME / GEZINME GRUBU TEK TANIM: sayfa basligi sekmeleri (_VehicleLayout,
   _ReportLayout, _StatisticLayout), navbar'daki sayfa sekmeleri
   (_PageTabsPartial; Home) ve Destek / Nasil Calisir grubu ayni bilesen.

   Gorunum: GRI serit (--bs-gray-300; gray-400 "cok koyu kaldi") gomme kanal olarak.
   Secili oge: PARLAK BEYAZ zemin + ALTTA 3px primary cizgi + kalin primary yazi,
   GOLGESIZ. Kullanici "bordo dolguluyken cok belirgindi, dolgu olmasin ama daha
   belirgin olsun" dedi (2026-09-29); once 1px primary cerceve (btn-outline-primary
   dili) secilmisti. 2026-09-30: secili oge her yonde 1px buyudu (kullanici: "kendisi
   bir iki px buyusun, sagi solu kuculsun"); dis golge kaldirildi, denenen ice golge
   (6px bordo) de fazla bulunup geri alindi. Ayni gun gercek navbar'a gecici CSS basilip
   varyantlar AYNI OLCUDE yan yana gosterildi: cerceve -> 2px alt cizgi ("daha sik") ->
   3px cizgi -> 3px + acik bordo zemin (kullanici: "gri ile yeterli kontrasti saglamadi";
   %8 bordo beyazi griye yaklastiriyordu, parlakliklari ~0.86 / 0.83) -> parlak beyaz
   secili + serit bir / iki ton koyu gri; once gray-400, gomme kanal eklenince koyu bulundu,
   gray-300'e inildi (derinlik korundu). Kontrast secili
   ogenin parlakligindan gelir: seridi acmak ya da secili ogeyi renklendirmek onu geri
   alir. Cizgi ogenin kose yaricapini izler.
   DERINLIK (kullanici: "solid gri degil, aluminyuma kalipla gomme sekil cakilmis gibi"):
   serit GOMME KANAL - ustte ic golge, ustten alta hafif metal gecisi, oyma kenar (ust koyu,
   alt acik); secili oge kanalda yukselen TUS (1-2px alt golge). Uc derinlik varyantindan
   (hafif / firca dokulu derin / hafif + tus) kullanici tusluyu secti. Secili ogeye ic golge
   ya da parlama EKLEME: denendi, fazla bulundu.
   Hover: seritten hafifce kalkan beyaz yuzey + primary yazi (asagidaki not).

   IKI SECIM MEKANIZMASI, TEK DEGISKEN SETI: radyo (`.btn-check:checked + .btn`,
   Arac/Rapor) ve sinif (`.btn.active`, Istatistik, navbar sayfa sekmeleri).
   Bootstrap ikisini de --bs-btn-active-* degiskenleriyle boyuyor (golge dahil);
   secim icin ayri kural yazilmaz.

   OLCU: seridin 1px kenarligi + 2px ic boslugu ogenin dikey dolgusundan
   dusulur (oge kenarligi 0). .btn-sm (navbar) seridi tek bir .btn-sm ile ayni
   yukseklikte: 24.14px, dil secici ve arama kutusuyla ayni. Sayfa basligi
   sekmeleri (.btn) asagidaki --bz-segment-* olcusunde: 35.33px. Secili yazi
   kalinlasmadigi icin (2026-10-06) serit genisligi secimle degismez. Secili oge
   seridin 2px boslugunun 1px'ine tasarak her yonde 1px buyur (asagidaki kural);
   serit olcusu ve komsu ogelerin yeri DEGISMEZ (olculdu).

   ACILIR SEKME (navbar'daki Isletme sekmelerinde Medyalar / Rotalar): dugme menusunun konum
   kabi olan bir `.dropdown` sarmalayicisinda durur; asagidaki oge kurallari `> .dropdown > .btn`
   icin de yazili, gorunum dogrudan ogeyle AYNI. */
.bz-segment > .dropdown {
    display: flex;
}

/* SAYFA BASLIGI SEKME OLCUSU TEK YERDE (--bz-segment-height; 2026-10-07'ye kadar Istatistik yardim
   dugmesi de bu olcuyu okuyordu, dugme kalkti).
   Neden 1.15rem: yanindaki h3 baslik (1.40rem, kalin) 1.05rem sekmeleri kucuk
   gosteriyordu (kullanici: "baslik kocaman, az daha buyusun"). 1.2rem'de
   7 sekmeli Istatistik seridi 1024px ekranda iki satira dusuyordu (olculdu);
   1.15rem'de 1024px'te de tek satir. */
:root {
    --bz-segment-font-size: var(--bz-font-lg);
    --bz-segment-padding-y: .5rem;
    --bz-segment-padding-x: 1.05rem;
    /* satir (1.5) + 2 x dolgu + seridin 2 x 1px kenarligi. Seridin 2px ic
       boslugu ogenin dolgusundan dusuldugu icin toplama girmez. */
    --bz-segment-height: calc(var(--bz-segment-font-size) * 1.5 + 2 * var(--bz-segment-padding-y) + 2px);
}

/* HAP (2026-10-06): serit ve ogeleri hap (`.nav-tabs` ile ayni); izin yuzeyi bulundugu yere gore (YUZEYLER KANAL). */
.bz-segment {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    /* Kanal yuzeyi TEK TANIMDAN (asagida YUZEYLER, KANAL). */
}

.bz-segment > .btn,
.bz-segment > .dropdown > .btn {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 0;
    --bs-btn-hover-color: var(--bs-primary);
    /* Uzerine gelme zemini (izin tersi) ve secili / basili ogenin yuzeyi VE yazi rengi (TUS) asagida YUZEYLER'de. */
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: transparent;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    /* Dikey dolgu YUZEYLER'de (TUS cizgisinin yazi payi). */
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

/* Sayfa basligi sekmeleri --bz-segment-* olcusunde; navbar'daki .btn-sm grubu
   haric (sagdaki kontrollerle ayni boyda kalmali). */
.bz-segment > .btn:not(.btn-sm),
.bz-segment > .dropdown > .btn:not(.btn-sm) {
    --bs-btn-padding-y: var(--bz-segment-padding-y);
    --bs-btn-padding-x: var(--bz-segment-padding-x);
    --bs-btn-font-size: var(--bz-segment-font-size);
}

/* HOVER: izin tersi duz yuzey - gri izde beyaz, zemindeki beyaz izde gri (--bs-btn-hover-bg, YUZEYLER KANAL). Onceki
   %6 marka tonu gri seritte neredeyse gorunmuyordu (kullanici "hic hover yok" dedi, 2026-09-29). Kalkan yuzey golgesi
   2026-10-05'te kalkti: duz kanal denemesi (bz-tokens.css KANAL; "daha az isiltili, daha flat"). */

/* Bootstrap `.btn-check + .btn:hover` radyo etiketlerinde hover'i BILEREK kapatiyor
   (renkleri dinlenme degerlerine geri yaziyor). Home/Arac/Rapor sekmeleri radyo
   oldugu icin hic hover'lari yoktu (olculdu); sekme seridinde isteniyor. */
.bz-segment > .btn-check + .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
}

/* Secili oge hover'da da secili gorunur: cercevesi (inset golge) hover golgesine
   donmesin. Hover kurallariyla en az ayni ozgullukte ve ONLARDAN SONRA.
   -1px kenar boslugu: seridin gerdigi yukseklik 2px artar (ust/alt 1px); yatayda
   kutuyu buyuten +1px dolgu, dis olcuyu koruyan -1px bosluk. Sonuc: oge her yonde
   1px buyur, etrafindaki gri bosluk 2px'ten 1px'e iner, komsular kaymaz.
   Yazi kalinligi otekilerle AYNI (2026-10-06'ya kadar 700; kullanici: "secili olanin fontu kalinlasiyor, ayni olsun"). */
.bz-segment > .btn-check:checked + .btn,
.bz-segment > .btn.active,
.bz-segment > .dropdown > .btn.active {
    margin: -1px;
    padding-left: calc(var(--bs-btn-padding-x) + 1px);
    padding-right: calc(var(--bs-btn-padding-x) + 1px);
    /* Yuzey (TUS) asagida YUZEYLER'de. */
}

.bz-segment > .btn > .bzi,
.bz-segment > .dropdown > .btn > .bzi {
    color: var(--bs-primary);
}

/* ==========================================================================
   YAN MENU - detay sayfalarinin bolum menusu (`.bz-side-nav`)
   --------------------------------------------------------------------------
   Isaretleme TEK: Views/Shared/_SideNavPartial.cshtml (Yonetim detay duzenleri + Hesap);
   daraltma site.js (`is-collapsed`, aria-expanded).

   ADMINLTE'DEN BAGIMSIZ (kullanici, 2026-10-01: "AdminLTE'den olabildigince kopmak
   istiyorum"). Eskiden her oge bir AdminLTE info-box'tu: 40-55 px ikon kutusu, kendi golgesi
   ve cam zemini, aralarinda 8 px; kucuk hal 80 px'lik raydi, ikon solda dururken saginda bos
   kutu kaliyordu (kullanici: "tam minimize olmuyor"). info-box / sidebar-wrapper / nav-pills /
   text-bg-* kullanilmaz; secili oge sunucudan `is-active` gelir.

   DIL SEKME SERIDIYLE AYNI (bz-tokens.css KANAL / TUS): menu bir plaka, ogeler duz satir;
   uzerine gelme ve secili TUS YUZEYLER'de (gorunumu bz-tokens.css TUŞ notu); dikey liste oldugu icin secili yazi kalin
   (UI-T11).

   KUCUK HAL: yalniz ikon. Ray genisligi HESAPLANIR: ikon + ogenin iki yan dolgusu + plakanin iki
   yan dolgusu + plakanin iki kenarligi (16 + 2 x 6.12 + 2 x 4.04 + 2 = 38.3 px).
   992 px ALTI: menu icerigin USTUNDE yatay serit (ikon + etiket, yatay kayar); daraltma dugmesi
   gizli - serit zaten tek satir.
   ========================================================================== */
.bz-side-nav-host {
    /* Ikon paketinin en kucuk cizim olcusu (bz-icons.css): cizgi 16 px'te tam 1 px. Ray olculeri ortak
       (bz-tokens.css IKON RAYI): kapali yan cekmece ayni genislikte. */
    --bz-side-nav-icon: var(--bz-rail-icon);
    /* Oge dolgusu, dort yonde ayni: kucuk halde ikon kare bir tusun ortasinda durur. */
    --bz-side-nav-pad: var(--bz-space-2);
    --bz-side-nav-w: 14rem;
    --bz-side-nav-w-collapsed: var(--bz-rail-w);
    min-width: 0;
}

.bz-side-nav {
    display: flex;
    flex-direction: column;
    gap: var(--bz-stack-gap);
    padding: var(--bz-plate-pad);
    border-radius: var(--bz-radius);
    /* Plaka yuzeyi TEK TANIMDAN (asagida YUZEYLER). */
    -webkit-user-select: none;
    user-select: none;
}

/* ICERIK ALANI: bolumler gri plakanin ustunde BEYAZ bir pencerede (kullanici, 2026-10-01: "gri ustunde content
   alani beyaz, secimler de kanalli gri olur"); daraltma dugmesi plakada kalir. Yuzey YUZEYLER'de (PENCERE),
   secili oge pencereye gomulu gri KANAL + solda cizgi (YUZEYLER SECILI). */
.bz-side-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--bz-window-pad);
    border-radius: calc(var(--bz-radius) - 1px);
}

.bz-side-nav-item {
    display: flex;
    align-items: center;
    gap: var(--bz-side-nav-pad);
    min-width: 0;
    padding: var(--bz-side-nav-pad);
    /* Kenarlik SAYDAM ayrilir: secili ogenin kanal kenari kutuyu oynatmaz. */
    border: var(--bz-border-width) solid transparent;
    border-radius: calc(var(--bz-radius) - 2px);
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    font-size: var(--bz-font-md);
    font-weight: 600;
    line-height: var(--bz-line-tight);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* DashIcon `bzi-data` (24 px, :where ile sifir ozgulluk) burada ezilir. */
.bz-side-nav-icon {
    font-size: var(--bz-side-nav-icon);
    color: var(--bs-primary);
}

.bz-side-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* HOVER: plakadaki daraltma dugmesinde sekme seridindeki gibi beyaz yuzey; beyaz icerik alaninda acik gri. */
.bz-side-nav-item:hover,
.bz-side-nav-item:focus-visible {
    color: var(--bs-primary);
    background-color: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

    .bz-side-nav-list .bz-side-nav-item:not(.is-active):is(:hover, :focus-visible) {
        background-color: var(--bs-tertiary-bg);
        box-shadow: none;
    }

.bz-side-nav-item:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), .5);
    outline-offset: 1px;
}

/* SECILI: beyaz icerik alaninda gri KANAL + solda cizgi (yuzeyi asagida YUZEYLER SECILI). */
.bz-side-nav-item.is-active {
    color: var(--bs-primary);
    font-weight: 700;
}

/* Daraltma dugmesi bir bolum degil: soluk yazilir, gri plakada durur (bolumler altindaki beyaz icerik
   alaninda; aralarindaki cizgi kalkti). Eskiden kirmizi dolu bir kutuydu - menunun en baskin ogesi. */
.bz-side-nav-toggle {
    position: relative;
    color: var(--bs-secondary-color);
}

    .bz-side-nav-toggle .bz-side-nav-icon {
        color: inherit;
        transition: transform .2s ease-in-out;
    }

@media (min-width: 992px) {
    .bz-side-nav-host {
        flex: 0 0 auto;
        align-self: flex-start;
        width: var(--bz-side-nav-w);
        transition: width .2s ease-in-out;
    }

        .bz-side-nav-host.is-collapsed {
            width: var(--bz-side-nav-w-collapsed);
        }

            .bz-side-nav-host.is-collapsed .bz-side-nav-label {
                display: none;
            }

            /* 1,5x ekranda 1px kenarlik 0,67 px cizilir; oge ikon + dolgudan ~0,7 px genis kalir,
               ikon ortada dursun (olculdu). */
            .bz-side-nav-host.is-collapsed .bz-side-nav-item {
                justify-content: center;
            }

            .bz-side-nav-host.is-collapsed .bz-side-nav-toggle .bz-side-nav-icon {
                transform: rotate(180deg);
            }
}

@media (max-width: 991.98px) {
    .bz-side-nav-host {
        margin-bottom: var(--bz-panel-gap);
    }

    .bz-side-nav {
        flex-direction: row;
    }

        .bz-side-nav-list {
            flex: 1 1 auto;
            flex-direction: row;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

    .bz-side-nav-toggle {
        display: none;
    }

    .bz-side-nav-item {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   CEKMECE LISTESI - yan cekmecelerin ogeleri
   --------------------------------------------------------------------------
   `.side-drawer-item` / `.media-item` / `.drawer-item` (Isletme Rotalar, Medyalar, Istasyon
   haritasi, Depo; Medya Merkezi; Arac Rotalari; Yonetim medya/anons) ve Filo agaci.
   Kullanici (2026-10-01): "su panel Business sayfalarinda da kullanilan panel, bu panele de bir
   revize gecelim" + "kutu icinde kutu icinde kutu". Eskiden her oge BEYAZ KART'ti (kenarlik,
   uzerine gelince 1px kalkip genis golge): gri cekmece plakasinin icinde onlarca kutu. Filo
   cekmecesi ise sayfanin kendi <style>'inda BASKA bir dil tasiyordu (pembe tonlu secili satir,
   kalin bordo secici). Simdi hepsi yan menuyle (.bz-side-nav) AYNI: duz satir, plakanin ustundeki BEYAZ
   icerik alaninda (customstyle.css .side-drawer-list, Filo agaci); uzerine gelince acik gri. 2026-10-02'den beri
   her oge cok hafif cerceveli, secili = TUS + kalin yazi (yuzeyi YUZEYLER CEKMECE OGESI, gorunumu bz-tokens.css TUŞ notu;
   kullanici: "kanal yerine pop olsa"). Once secili gri KANAL'di (2026-10-01).
   ========================================================================== */
.side-drawer-item,
.media-item,
.drawer-item,
.drawer-layout .side-drawer-item {
    /* KOMPAKT (kullanici, 2026-10-01: "bu kisim kompakt kalsin, buyutme; sorun tasariminda"): govde boyu,
       dar dolgu. Okunurluk boyuttan degil satirin tasarimindan (rota satiri: customstyle.css ROTA SATIRI). */
    padding: .35rem var(--bz-space-2);
    /* Kenarlik ayrilir (rengi YUZEYLER CEKMECE OGESI: cok hafif); secilince kutu oynamaz. */
    border: var(--bz-border-width) solid transparent;
    border-radius: calc(var(--bz-radius) - 2px);
    background: transparent;
    box-shadow: none;
    color: var(--bs-body-color);
    transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}

    :is(.side-drawer-item, .media-item, .drawer-item):not(.is-active):is(:hover, :focus-visible) {
        background-color: var(--bs-tertiary-bg);
    }

    /* Secili oge: kalin yazi (dikey liste, UI-T11); zemin ve yazi rengi YUZEYLER CEKMECE OGESI'nde (TUS). Buradaki
       `color` oradaki kurala yeniliyor. */
    :is(.side-drawer-item, .media-item, .drawer-item).is-active {
        color: var(--bs-primary);
        font-weight: 700;
    }

    /* Fareyle tiklanan satirda tarayicinin kalin siyah odak cercevesi cizilmez (secili satiri kesiyordu);
       klavye odagi ince marka halkasi, satirin icinde. */
    :is(.side-drawer-item, .media-item, .drawer-item):focus {
        outline: none;
    }

    :is(.side-drawer-item, .media-item, .drawer-item):focus-visible {
        outline: 2px solid rgba(var(--bs-primary-rgb), .45);
        outline-offset: -2px;
    }

/* --- Filo agaci (Fleet/_FleetNavLayout): eskiden sayfanin <style>'indaydi ---- */

/* SECICI (.bz-picker; 2026-10-13, Filo cekmecesinin basligi; kullanici: "dropdown filo adini gosteriyor, filo
   sectiriyor ama pek hos durmuyor"): cekmecenin basligi secili baglamin adi (diger cekmeceler gibi ikon + ad); baglam
   degistirilebiliyorsa ad SECICI DUGMESIDIR: KANAL hapi (plakada gomulu gri, sekme ve segment izleriyle ayni ton; yuzeyi
   YUZEYLER KANAL), sonunda asagi ok. Uzerine gelince ve menu acikken bir ton koyu + bordo yazi (menu ogeleri gibi), ok
   menu acikken doner. Menu bolum menusunun yuzer karti (customstyle.css, YUZEYLER): ogeler hap, secili TUS. Ilk hali
   (ayni gun) duz satir + soluk cift ok: kullanici "secilecekmis gibi durmuyor". Eskiden "FILO" etiketi + kenarlikli
   select2 kutusu; ondan once "hero" - tonlu bordo zemin, 2px bordo kenar.
   Ikon basligin ikonu (dugmenin disinda, diger cekmece basliklariyla ayni yerde); dugme adin boyunda, basligin kalanina
   sigmazsa ad kisalir. Ad agacin satirlarindan buyuk (eski secicinin boyu): filonun adi kendi Istatistik / Araclar
   satirlarindan kucuk kalirsa hiyerarsi ters okunur. Dugme ac-kapa dugmesinin boyunda: baslik diger cekmecelerinki
   kadar kalir. Rayda (kapali cekmece) ad dikey ve duz, ok gizli; tiklamayi ray dugmesi alir. */
.bz-picker {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .bz-picker > .bzi {
        flex: none;
    }

.bz-picker-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--bz-font-lg);
}

.bz-picker-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    max-width: 100%;
    min-height: var(--side-drawer-btn);
    padding: 0 .5rem 0 .75rem;
    border-radius: 999px;
    color: inherit;
    font: inherit;
    text-align: start;
    transition: background-color .12s ease, color .12s ease;
}

    .bz-picker-toggle:is(:hover, :focus-visible),
    .bz-picker-toggle.show {
        background-color: var(--bs-secondary-bg);
        color: var(--bs-primary);
    }

    .bz-picker-toggle:focus {
        outline: none;
    }

    .bz-picker-toggle:focus-visible {
        outline: 2px solid rgba(var(--bs-primary-rgb), .45);
        outline-offset: -2px;
    }

    .bz-picker-toggle > .bzi-chevron-down {
        flex: none;
        font-size: 16px;
        transition: transform .15s ease;
    }

    .bz-picker-toggle.show > .bzi-chevron-down {
        transform: rotate(180deg);
    }

/* Menu sabit konumlu (cekmece tasani kirpiyor): yuzde en kucuk genislik ekranin yuzdesi olurdu; en az dugmenin
   genisligi acilirken betikten (Fleet/_FleetNavLayout). Uzun liste menunun icinde kayar. */
.bz-picker > .dropdown-menu {
    --bs-dropdown-min-width: 0;
    width: max-content;
    max-width: min(24rem, calc(100vw - 1.5rem));
    max-height: min(24rem, 60vh);
    overflow-y: auto;
}

    .bz-picker .dropdown-item {
        white-space: normal;
    }

/* Rayda (kapali cekmece) diger cekmecelerin rayi gibi: ad dikey, duz ve basligin yazi boyunda, ok yok. */
.side-drawer-layout:not(.is-open) .bz-picker-toggle {
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background: none;
}

.side-drawer-layout:not(.is-open) .bz-picker-text {
    font-size: inherit;
}

    .side-drawer-layout:not(.is-open) .bz-picker-toggle > .bzi-chevron-down {
        display: none;
    }

@media (prefers-reduced-motion: reduce) {
    .bz-picker-toggle,
    .bz-picker-toggle > .bzi-chevron-down {
        transition: none;
    }
}

/* Agac kabi: cekmecenin BEYAZ icerik alani (diger cekmece listeleri gibi; yuzeyi YUZEYLER PENCERE). Cok arac
   olursa yalniz agac kayar (sayfa kaymaz). */
.fleet-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 var(--bz-plate-pad) var(--bz-plate-pad);
    padding: var(--bz-window-pad);
    border-radius: calc(var(--bz-radius) - 1px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    /* Satir: Istatistik, Araclar basligi ve arac satirlari ayni olcude; gorunum yukaridaki ortak
       cekmece satiri (tiklanan satirlar `.side-drawer-item` da tasir - site.js mobilde secimden
       sonra cekmeceyi bu sinifa bakarak kapatir). */
    .fleet-tree .fleet-nav-row {
        display: flex;
        align-items: center;
        gap: var(--bz-space-2);
        min-height: 2.4rem;
        font-size: var(--bz-font-md);
        font-weight: 600;
        text-decoration: none;
    }

        .fleet-tree .fleet-nav-row :is(.bzi-24, .bzi-data) {
            font-size: 18px;
            flex: 0 0 auto;
            color: var(--bs-secondary-color);
        }

        .fleet-tree .fleet-nav-row.is-active :is(.bzi-24, .bzi-data) {
            color: inherit;
        }

    /* Araclar basligi: tiklanmaz satir, rozet sagda. Bolum basligi: yazisi govde renginde (2026-10-13'e kadar soluk
       gri: Istatistik'in alt etiketi gibi okunuyordu). */
    .fleet-tree .fleet-nav-head {
        padding: 0 var(--bz-space-2);
        cursor: default;
    }

        .fleet-tree .fleet-nav-head .badge {
            margin-left: auto;
            font-weight: 600;
        }

/* ARACLAR BOLUMU (2026-10-13; kullanici: "araclar istatistigin alt alani gibi duruyor"): Istatistik'ten ince cizgiyle
   ayrilir (bolumler ince cizgiyle ayrilir, UI-S3); cizginin iki yaninda agacin satir araligindan genis pay. Eskiden
   Araclar basligi Istatistik'in 2 px altinda soluk bir satirdi. */
.fleet-tree-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--bz-stack-gap);
    padding-top: var(--bz-stack-gap);
    border-top: var(--bz-border-width) solid var(--bs-border-color);
}

/* Araclar alt agaci: girintili, ince dal cizgisi; satirlar bir tik kucuk. */
.fleet-tree-children {
    margin-left: 1rem;
    padding-left: var(--bz-stack-gap);
    border-left: 1px solid rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .fleet-tree-children .drawer-search {
        flex: 0 0 auto;
        margin: var(--bz-stack-gap) 0;
        padding: .2rem .5rem;
        grid-template-columns: 16px 1fr;
        gap: .35rem;
        background: var(--bs-body-bg);
    }

        .fleet-tree-children .drawer-search :is(.bzi-24, .bzi-data) {
            font-size: 16px;
            color: var(--bs-secondary-color);
        }

        .fleet-tree-children .drawer-search input {
            height: 1.4rem;
            font-size: var(--bz-font-sm);
        }

.fleet-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fleet-tree .fleet-nav-row-sm {
    min-height: 2.1rem;
    font-size: var(--bz-font-sm);
    font-weight: 400;
}

    .fleet-tree .fleet-nav-row-sm .text-truncate {
        min-width: 0;
    }

/* --- Kart yogunlugu ----------------------------------------------------- */

/* KAPSAM ZORUNLU: `.dashboard-card` / `.dashboard-card-header` sistemin her
   yerinde (istatistik sayfalari, on-izleme modali, raporlar) kullaniliyor.
   Global olarak kucultmek buralari sessizce bozardi. Yogunluk isteyen sayfa
   govdesini `.bz-compact` ile sarar; sarmayan sayfa etkilenmez. */

/* Dolgu ve aralik artik standardin (customstyle.css .dashboard-card, --bz-plate-pad); kompakt
   sayfaya ozel .65rem kalkti. */

/* KART BASLIGI - TEK TANIM.

   Global hali 20 px yazi + 15 px alt marj: bolum adi basli basina bir gosterge
   satiri kadar yer harciyordu.

   ONEMLI: bu kural once grafik bileseninin (Components/EChart/Default.cshtml)
   ICINDE, her grafik icin AYRI AYRI uretilen bir <style> blogunda duruyordu ve
   `#{cardId}` ile kimlige kapsamlanmisti. Sonucu: (a) 20 grafikli bir sayfa
   ayni CSS'in 20 kopyasini indiriyordu, (b) kimlik secicisi sinif kurallarini
   yendigi icin arac panosunun bolum basligi ile grafik kartinin basligi FARKLI
   boyda kaliyordu - "ikisi de dashboard-card-header" olmasina ragmen. Tanim
   buraya alindi; iki yuzey de ayni yerden besleniyor.

   `.bz-panel-card`: grafik/gosterge kartinin kendisi (bileşen basar).
   `.bz-compact`  : sayfa govdesi (icindeki tum kartlar). */

.bz-compact .dashboard-card-header,
.bz-panel-card .dashboard-card-header {
    font-size: var(--bz-font-xl);
    font-weight: 600;
    gap: .5rem;

    /* TABAN YUKSEKLIK - iki yuzey ayni yukseklikte olsun diye ZORUNLU.

       Ayni yazi boyunu vermek yetmiyordu: grafik kartinin basligini ICERIGI
       yukseltiyor (arac cubugundaki 26 px dugmeler), arac panosunun bolum
       basliginda ise yalnizca metin var - o yuzden gozle bakildiginda biri
       kalin biri ince goruluyordu.

       Deger grafik basliginin DOGAL yuksekliginden turetildi, tahminle degil:
           26 px  dugme (.vsp-chart-tools .btn)
         + alt dolgu (--bz-stack-gap) + 1 px alt cizgi
       Baslik artik plakanin parcasi (ust dolgu ve yan kenarlik yok); eskiden rozetti:
       26 + 9,6 ic bosluk + 2 kenarlik = 2.35rem. Dugme boyu degisirse bu deger de
       guncellenmeli (bkz. echart-panel.css). */
    min-height: calc(26px + var(--bz-stack-gap) + 1px);

    /* Arac cubugu tasiyan basliklarda (grafik karti) icerik alt satira sarabilsin. */
    flex-wrap: wrap;
    row-gap: .3rem;

    /* Sarma oldugunda satirlar dikeyde ortalansin; aksi halde tek satirlik
       baslik taban yuksekligin ustune yapisip yamuk duruyordu. */
    align-content: center;
}

/* Baslikta ayri bir <span> varsa - grafik kartinda baslik ile arac cubugu yan
   yana - basliga TABAN genislik. Bu taban olmadan arac cubugu, adi sifira
   eziyor (text-truncate) ve ad hic gorunmuyordu. */
.bz-compact .dashboard-card-header > span:first-child,
.bz-panel-card .dashboard-card-header > span:first-child {
    font-size: inherit;
    line-height: var(--bz-line-tight);
    flex: 1 1 8rem;
    min-width: 8rem;
}

/* --- IKINCI KART ISKELETI: duz Bootstrap `.card` ------------------------- */

/* `bz-compact` once yalnizca `.dashboard-card`i biliyordu, cunku yogunluk isi
   arac panosunda basladi. Ama evde IKI mesru kart iskeleti var: istatistik
   sayfalari bastan sona duz Bootstrap karti kullaniyor (`.card` /
   `.card-header` / `.card-body`) ve tek bir `dashboard-card` gecmiyor.

   Secenek ikiydi: o kartlari `dashboard-card`a cevirmek, ya da yogunlugu ikinci
   iskelete de ogretmek. Ikincisi secildi. Cevirme yolu her kartin yapisini
   degistirirdi ve `dashboard-card` masonry izgarasinin varsayimlarini tasiyor -
   istatistik sayfalarinda masonry yok, yani tasiyacagi sey calismayan bir
   sozlesme olurdu. Bu haliyle markup'a DOKUNMADAN ayni karar tek yerden
   veriliyor ve kalan bes istatistik sayfasi govdesine `bz-compact` yazarak
   bedavaya aliyor.

   Ic ice kartlar (bolum karti > alt kart) ayni kurallardan besleniyor; bu
   bilincli: ikisi de ayni yogunluk kararina tabi. */

/* KART: EV GORUNUMU (`dashboard-card` ile ayni dil).

   Bootstrap'in kendi karti KENARLIKLI BIR KUTU; ev stili ise TONLU, kenarliksiz,
   yumusak golgeli bir yuzey. Ikisi yan yana geldiginde istatistik sayfasi
   projenin geri kalanina ait gorunmuyordu.

   Degerler `customstyle.css`teki `.dashboard-card`tan aliniyor - ayni karar,
   iki iskelet. */
/* STANDART (docs/ui-standardi.md bolum 4-5): bolum karti bir PLAKA - .mapbox / .dashboard-card
   ile ayni tarif ve dolgu; parcalari arasi --bz-stack-gap. */
.bz-compact .card {
    margin-bottom: 0;
    border-radius: var(--bz-radius);
    /* Yuzey TEK TANIMDAN (asagida YUZEYLER). */
    padding: var(--bz-plate-pad);
    gap: var(--bz-stack-gap);
}

/* BASLIK BIR ROZET, AYIRICI CIZGI DEGIL.

   Ev stilinde (`dashboard-card-header`) baslik kartin icinde duran, KENDI
   kenarligi/koseleri/golgesi olan acik zeminli bir seritcik. Bootstrap'te ise
   `.card-header` govdeden `border-bottom` ile ayrilan bir bant - projede hicbir
   yerde olmayan bir gorunum. O alt cizgi burada kaldirilip rozet geri veriliyor.

   Olculer `.bz-compact .dashboard-card-header` ile AYNI (asagida): iki iskelet
   ayni yuksekligi ve yazi boyunu paylasmali, yoksa ayni sayfada iki farkli
   baslik boyu cikar. */
/* KADEME: bolum basligi. Ic kart basligi asagida bir tik kuculuyor. */
/* OLCULER PX - REM DEGIL.

   Bu sitenin kok yazi boyu 16 px DEGIL: `html` 12,24 px, `body` 9,18 px.
   Yani `1rem = 12,24px`. `rem` ile yazilan her olcu, 16 px varsayimiyla
   hesaplandiginda %23 kucuk cikiyor - kart basligi 15 px yerine 11,5 px,
   govde 13 yerine 9,9 px oluyordu. Sonuc: BASLIK, icindeki kutucuk
   degerinden (14 px) kucuk kaliyor ve hiyerarsi tersine donuyordu.

   Kutucuk kurallari (`bz-compact-tiles`) zaten px yazilmisti ve dogru
   goruntuleniyordu; kabuk kurallari da ayni tabana cekildi. */
.bz-compact .card-header,
.bz-compact .dashboard-card-header {
    font-size: var(--bz-font-xl);
}

/* IC KART BASLIGI BIR KADEME KUCUK.

   Hiyerarsi YAPIDAN turuyor: kartin kendi basligi bolum basligidir, o kartin
   ICINDEKI kartin basligi ondan kucuk olmali. Onceden bu karar markup'a
   serpistirilmis `fs-5` / `fs-6` siniflarindaydi (tek sayfada 20 yer) ve
   Bootstrap'in `.fs-*` yardimcilari `!important` tasidigi icin ortak kurali
   eziyordu - yani sozluk yaziyor, markup bozuyordu. */
.bz-compact .card .card-header,
.bz-compact .card .dashboard-card-header,
.bz-compact .dashboard-card .card-header,
.bz-compact .dashboard-card .dashboard-card-header {
    font-size: var(--bz-font-lg);
}

/* Baslik PLAKANIN PARCASI: .dashboard-card-header / .mapbox-header ile ayni - zemin, kenarlik
   ve golge yok, alttan ince cizgi. Eskiden rozetti. */
.bz-compact .card-header {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0 var(--bz-stack-gap) var(--bz-stack-gap);
    font-weight: 600;
    min-height: calc(26px + var(--bz-stack-gap) + 1px);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Bootstrap `.fs-5` / `.fs-6` markup'a elle serpistirilmis (yalnizca bu sayfada
   40 yerde). Yogunluk karari kapsayicidan gelmeli, hucre hucre degil - bu yuzden
   baslik icindeki boyut siniflari eziliyor. */
.bz-compact .card-header .fs-5,
.bz-compact .card-header .fs-6 {
    font-size: inherit;
}

/* GOVDE DE YOGUN - HIYERARSI DOGRU KALSIN.

    baslik olcusunu 13 px'e indiriyor. Govde metni sayfa
   varsayilaninda (16 px) kalinca hiyerarsi TERSINE donuyor: kartin icindeki
   tablo/liste basliktan IRI gorunuyor ve goz once icerige, sonra basliga
   gidiyor. Govdeye de ayni olcu veriliyor.

   Kutucuk degerleri bundan MUAF:  onlara 14 px veriyor -
   deger, cevresindeki metinden buyuk olmali. */
.bz-compact .dashboard-card-body,
.bz-compact .card-body {
    font-size: var(--bz-font-md);
}

/* Dolgu artik KARTIN kendisinde (yukarida); govde onu tekrar etmemeli, yoksa
   her kartta cift bosluk olusur. */
.bz-compact .card-body {
    padding: 0;
    background-color: transparent;
}

/* KUTUCUKLAR KENDI BOYUNDA KALIR, ARTAN YUKSEKLIGI PAYLASMAZ.

   Kart, Bootstrap grid'i satirdaki en uzun kartla (genelde bir grafik)
   esitledigi icin icerikten uzun olabiliyor. Bir ara bu bosluk kutucuk
   izgarasina paylastirilmisti (`align-content: stretch`) - ama o, bosluğu
   KUTUCUKLARIN ICINE tasidi: her kutucuk uzayip icinde bos alan biriktirdi,
   yani yogunluk kaybi kartin altindan kutucuklarin icine kaydi. Daha kotusu,
   ayni kutucuk sayfanin baska bir yerinde farkli boyda goruntulendi.

   Dogrusu: kutucuk her yerde ayni ve sikisik; artan yukseklik kartin altinda
   toplanir. Ev stilinde de kutucuk boyu icerigine gore sabittir. */
.bz-compact .card > .card-body {
    display: flex;
    flex-direction: column;
}

.bz-compact .card > .card-body > .row {
    align-content: start;
}

/* IZGARA BOSLUGU TEK OLCU.
   Sayfada `g-1`, `g-2` ve `g-3` karisik kullanilmis - ayni kartin icinde uc
   farkli bosluk demek, ve gozle bakinca kutucuklar arasi mesafe rastgele
   duruyor. Kart icindeki butun izgaralar tek olcuye cekiliyor; 13 ayri yerdeki
   sinifi duzeltmek yerine karar burada.
   Istatistik / Filo / pano kartlari (`.dashboard-card`) de ayni kurala bagli (2026-10-06, kullanici: "ev kuralini
   tum dashboard-card'lara genisletelim"): isaretlemedeki `g-2` kutucuklar arasini 6,12 px (panel araligi)
   birakiyordu. Bu kartlarda art arda iki satir arasi da ayni olcu: ikinci satirin negatif ust boslugu sifirlanir
   (satira `mt-*` yazilmaz; yazilinca iki kat oluyordu, 12,2 px). `g-0` bilincli olarak bosluksuz kalir. */
.bz-compact :is(.card, .dashboard-card) .row:not(.g-0) {
    --bs-gutter-x: var(--bz-stack-gap);
    --bs-gutter-y: var(--bz-stack-gap);
}

.bz-compact .dashboard-card .row + .row {
    margin-top: 0;
}

/* Bos/yukleniyor durumu: `py-5` (3 rem alt+ust) bos bir kart icin bir gosterge
   satirindan fazla yer harciyordu. */
.bz-compact .card-body.py-5 {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.bz-compact .card > .card-body > .row > [class*="col-"] > .card {
    height: 100%;
}

/* IC KART DAHA HAFIF BIR YUZEY.

   Ev stilinde kademe sudur: TONLU bolum yuzeyi > uzerinde ACIK yuzeyler
   (`mini-card`, baslik rozeti). Ic karta da ayni tonu vermek tonu tonun
   ustune koymak olurdu - iki kutu birbirinden ayrismaz, sayfa duz bir gri
   yigina donerdi. Golge de kalkiyor: golge "yuzen yuzey" demek, ama bu kart
   zaten baska bir kartin icinde. Markup'taki `shadow-sm` boylece notrleniyor -
   15 karttan tek tek silmek yerine. */
/* STANDART: ic kart plakaya gomulu bir PENCERE (tablo penceresiyle ayni tarif). */
.bz-compact .card .card {
    /* Yuzey TEK TANIMDAN (asagida YUZEYLER). */
    padding: var(--bz-window-pad);
}

/* KUTUCUK (mini kart) artik her yerde PENCERE (YUZEYLER): beyaz Bootstrap kartinin icindeki gri istisna
   (kenarlik + --bs-secondary-bg) kalkti - kutucuk kenari ve yukselen golgesiyle her zeminde okunur. */

/* KUTUCUK ICINDEKI ROZET.
   Rozet degerin kendisi degil, onun NITELIGI (surus modu, skor bandi) -
   degerle ayni agirlikta durmamali. Bootstrap'in `.badge` varsayilani
   (.75em) kutucuk olcusunde hala baskin kaliyor. */
/* ROZET OLCUSU BAGLAMDAN BAGIMSIZ.
   Bootstrap `.badge` olcusunu `em` ile veriyor, yani kapsayicinin yazi
   boyuna gore kuculuyor. Kompakt kart govdesi zaten 13 px oldugu icin
   tablodaki rozetler ikinci kez kuculup okunamaz hale geliyordu. `rem`
   sabit bir taban verir: rozet nerede olursa olsun ayni boyda. */
.bz-compact .badge {
    font-size: var(--bz-font-xs);
    padding: .25em .55em;
    font-weight: 600;
}

/* Kutucuk icindeki rozet BIR TIK kucuk: orada rozet degerin kendisi degil,
   onun niteligi (surus modu, skor bandi). */
.bz-compact-tiles .mini-card .badge {
    font-size: var(--bz-font-xs);
    padding: .2em .5em;
}

/* --- Kutucuk (mini-card) yogunlugu -------------------------------------- */

/* KAYNAK: bu gorunum Home/Operation'da tasarlandi (yogun, sevkiyatci-dostu
   kutucuk) fakat `home/operation.css` icinde `#operationVehicleGrid`e
   kilitliydi. Arac panosu ayni gorunumu isteyince tek dogru hamle kopyalamak
   degil, tanimi buraya TASIMAK oldu: Operation da artik bu kuraldan besleniyor,
   yani tek tanim var ve iki sayfa birbirinden ayrisamiyor.

   `.bz-compact`ten AYRI bir sinif: kart kabugu yogunlugu ile kutucuk
   yogunlugu farkli kararlar. Operation kutucuklari ister ama kendi
   `.dashboard-card` olculerini korur. */

.bz-compact-tiles .mini-card {
    padding: .3rem .5rem;
    gap: 0;
}

/* Kutucuk ICERIGINE gore boylanir, kabina gore degil. `h-100` markup'ta 18
   yerde duruyor ve kutucugu satirin en uzunu kadar uzatiyordu: iki satirlik
   bir kutucuk, yanindaki uc satirlik komsusu yuzunden icinde bos alanla
   uzuyordu. Ayni kutucuk sayfanin iki yerinde farkli boyda gorunmesin. */
.bz-compact-tiles .mini-card.h-100 {
    height: auto !important;
}

/* Deger: global 20px, bu gorunumde 14px. Kutucuk bir "kucuk gosterge",
   baslik degil. */
.bz-compact-tiles .mini-card .mini-card-item {
    font-size: var(--bz-font-lg);
}

/* Etiket: degerin altinda, okunur ama degerle YARISMAYAN boyda. */
.bz-compact-tiles .mini-card .mini-card-header {
    font-size: var(--bz-font-sm);
    margin-top: 0;
}

/* Ikon her zaman BZ ikon paketinden (`.bzi`; bkz. DashboardIconHelper.DashIcon).
   Eslemesi olmayan eski ad da `.bzi-unknown` ile gelir; paket disi ikon kaynagi
   (eski yazi tipleri, DashboardIcon.css) kaldirildi. `me-2` siniftan geldigi
   icin marj !important. */
.bz-compact-tiles .mini-card .mini-card-item-container .bzi {
    font-size: 1.15rem;
    margin-right: .35rem !important;
}

/* TELEMETRI IKONU, KART IKONUYLA AYNI BOYDA.

   `telemetry-value.js` binding'de tanimli ikonu (tv.icon) `.tv-ico` ile ciziyor
   ve varsayilan olcusu 1rem. Kartin kendi `DashIcon`'u ise 1,15rem: iki ikon yan
   yana geldiginde telemetri ikonu belirgin sekilde kucuk kaliyor ve kart yamuk
   goruluyordu. Bu, bu denemenin daha once geri alinma sebebiydi.

   Cozum ikonu KALDIRMAK degil (bilgi kaybi), ayni olcuye getirmek. Ikon zaten
   `.tv-ico` icinde kare bir kaba geometrik ortalanmis durumda, yani boy
   degistirmek hizalamayi bozmuyor. */
.bz-compact-tiles .mini-card .tv-ico {
    font-size: 1.15rem;
}

/* --- Legend (aciklama seridi) ------------------------------------------- */

/* NEDEN BURADA: bu kurallar `vehicle-status-icons.css` icinde
   `.home-status-legend` altina kapsamlanmisti - yani sayfa ADI tasiyan bir
   kapsam. Arac panosu da ayni legend'i isteyince kurallar ya kopyalanacak ya
   da o dosya "Home" adiyla panoya yuklenecekti. Kapsam SINIFA cevrildi ve
   sozluk buraya, global dosyaya alindi.

   Token'lari (`tv-dot` / `tv-ico`) istemci `TelemetryValue.render` ile cizer,
   yani legend ile hucreler BIREBIR ayni renderer'dan gelir. Burasi yalnizca
   seridin kendi duzeni. */

/*
 * Aktif filtre rozetlerinin kabi BOSKEN yer ISGAL ETMESIN.
 *
 * Home seridinde `#activeFilters` Filtrele'den once geliyor ve filtre yokken 0
 * genislikte de olsa hala bir flex OGESI: kabin `gap`i onunla komsusu arasina
 * giriyor. Olculdu (Journey, plaka basligindayken): not x=228'de baslarken legend
 * x=240'ta, yani legend 12.24px (`gap-3`) icerlek duruyordu. Tablonun filtresinde kap
 * bilesenin `.bz-dt-chips`i (bm-server-paging.js TABLONUN FILTRESI), sayfa duzeyi filtrede
 * (Operasyon seridi, bildirimler) sayfanin #activeFilters'i.
 *
 * `:empty` sadece gercekten bos oldugunda tutar; filtre secilince JS rozetleri
 * basiyor, kap geri gelir ve aralik dogal olarak olusur.
 */
:is(.mapbox-header, .page-header-aside) #activeFilters:empty,
.bz-dt-chips:empty {
    /* `!important` ZORUNLU: kap `d-flex` tasiyor ve Bootstrap display
       utility'leri KENDISI `!important` ile geliyor - ozgulluk ne olursa olsun
       important'siz kural kaybeder (olculdu: display hala `flex` kaliyordu). */
    display: none !important;
}

/* Lejant PLAKANIN PARCASI (docs/ui-standardi.md bolum 4): kendi zemini ve kenarligi YOK,
   yatay ic boslugu baslik seridiyle ayni (--bz-stack-gap; metinler ayni cizgide). Eskiden
   gri kutuydu (tertiary zemin + kenarlik): plakanin icinde kutu icinde kutu. Tum kullanimlari
   bir plakanin icinde (Home: Konum, Durum, Tuketim, Seyahat; Arac panosu kendi varyantlariyla).
   Haritanin ustundeki "Arac tipleri" lejanti bu sinif DEGIL (.bz-map-legend, bz-map.css). */
.bz-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .8rem;
    font-size: var(--bz-font-xs);
    color: var(--bs-body-color, #495057);
    padding: 0 var(--bz-stack-gap);
}

/* SPLIT ICINDEKI LEJANT: sol sutunun (panellerin) icinde durur, sayfanin
   ustunde degil.

   Sayfa duzeyindeki `PageLegend` bolumu seridi `.bz-split`in USTUNE, tam
   sayfa genisliginde koyuyordu. Iki sonucu vardi: serit haritanin da
   uzerinden geciyordu (oysa renk anahtari panellerin sozlugu, haritanin
   degil) ve butun split'i asagi itiyordu - harita yapiskan yuksekligini
   gorunen alandan turettigi icin kendi kabina sigmayip kayiyordu.

   Sol sutunun icinde: sutun genisledikce genisler, harita acilip sutun
   daraldikca daralir, haritanin yuksekliginden hicbir sey goturmez. */
.bz-legend-inline {
    margin-bottom: .6rem;
}

/* Baslik satirinin orta kolonundaki anahtar (Arac Paneli): satirin kendi zemini ve
   golgesi var, ikinci bir kutu cizilmez; ogeler sarilirsa ortalanir. Yazi seridin
   rozetleriyle ayni boyda (2026-10-06; eskiden xs, yanindaki rozetten kucuktu). */
.page-header-middle > .bz-legend {
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--bz-font-sm);
}

.bz-legend .hsl-item {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    white-space: nowrap;
}

.bz-legend .hsl-hint {
    font-weight: 700;
}

/* "Tanimsiz" ornegi: gostergedeki kesikli cerceveyi birebir tekrarlar
   (bkz. customstyle.css -> .dashboard-icon-unset). */
.bz-legend .hsl-unset {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    border: 1px dashed var(--bs-border-color, #ced4da);
    display: inline-block;
}

.bz-legend .hsl-sep {
    width: 1px;
    height: .95rem;
    background: var(--bs-border-color, #dee2e6);
    margin: 0 .15rem;
}

/* Section basligi ile gostergeler ARASINDA duran serit: kartin kendi
   yogunluguna uyar, baslikla arasinda nefes birakir. */
.bz-section-legend {
    margin-bottom: .5rem;
}

/* Icerigi olmayan legend hic yer kaplamasin - bos kart cizmeyelim. */
.bz-legend:empty {
    display: none;
}

/* TABLONUN LEJANTI (Views/Shared/_TableLegendPartial.cshtml, 2026-10-07; kullanici: "lejanti tablonun en altina alalim,
   acilir kapanir; daginik durmasin"): bilgi + sayfalama satirinin sagindaki dugme yukari acilan bir kart acar. Kartta
   gruplar SATIR SATIR: solda grubun adi (ayni sutunda hizali), sagda ogeleri, sigmazsa sarar (showcase-legend.js
   render). Lejant gelmezse (yukleme hatasi konsola yazilir) dugme de cizilmez. */
.bz-legend-card {
    /* 48rem: renk satiri tek satira sigar, en uzun simge grubu (Yuksek gerilim, 7 oge) iki satira iner (36rem'de
       uc satirdi; olculdu). */
    width: min(48rem, calc(100vw - 2rem));
    padding: .65rem .85rem;
}

.bz-legend.bz-legend-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: .55rem .9rem;
    padding: 0;
    font-size: var(--bz-font-sm);
}

    .bz-legend-grid .hsl-row {
        display: contents;
    }

    .bz-legend-grid .hsl-hint {
        font-weight: 600;
        color: var(--bs-secondary-color);
        white-space: nowrap;
    }

    .bz-legend-grid .hsl-items {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .3rem .85rem;
        min-width: 0;
    }

.bz-dt-legend:has(.bz-legend.d-none) {
    display: none !important;
}

/* --- Ikon paneli: ikon + ALTINDA etiket --------------------------------- */

/* NEDEN: ikon paneli yalniz ikon ciziyordu ve ayni bolumde ayni ikon
   tekrarlaninca paneller ayirt edilemiyordu - olculdu: bir bolumde
   `custom-icon-door_open` DOKUZ kez. Panonun diger butun panel tipleri
   basligini gosteriyor; bu tek istisnaydi.

   IKONUN OLCUSU DEGISMIYOR. `.dashboard-icon` 40x40 kaliyor (bu panoda ikon
   boyu oynatmak daha once geri alinmisti); etiket ayri bir hucrede, altta.

   Etiket iki satirla sinirli ve tasarsa kirpiliyor: uzun bir baslik ikon
   izgarasini bozmasin. Tam metin `title` attribute'unda duruyor. */
.dashboard-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    max-width: 4.5rem;
}

/* Yardimci rol (xs): 2026-10-06'ya kadar olcek disi .62rem (7,6 px) idi; tarama adinda "-icon-" gectigi icin onu ikon
   sayiyordu. */
.dashboard-icon-caption {
    font-size: var(--bz-font-xs);
    line-height: var(--bz-line-tight);
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);

    /* Iki satir, sonrasi kirpilir. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Legend accordion (section basina, KAPALI baslar) ------------------- */

/* NEDEN KATLANIYOR: serit section BASINA ve ikon/durum ureten sinyal BASINA
   bir satir tasiyor. Olculdu (Usak semasi): 21 sinyalli bir uyari bolumunun
   legend'i, anlattigi gostergelerden daha uzun. Legend'i kisaltmak bilgi
   kaybi olurdu; katlamak degil.

   `<details>` secildi: toggle icin JS yok, klavyeyle ve ekran okuyucuyla
   erisilebilir, tarayici durumu kendi tutuyor.

   CERCEVE/ZEMIN ARTIK KAPTA. Iceriye de birakilsaydi kutu icinde kutu
   goruluyordu; icerideki serit `bz-legend-flush` ile ciplak birakiliyor.

   Acilip kapanma kart yuksekligini degistirir - izgarayi yeniden yerlestiren
   AYRI bir kanca YOK: dashboard-masonry.js her `.dashboard-grid-item`i
   ResizeObserver ile izliyor ve tam bu durum icin yazilmis. */
.bz-legend-ac {
    background: var(--bs-tertiary-bg, #f6f7f9);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .4rem;
}

.bz-legend-ac > summary {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    font-size: var(--bz-font-xs);
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;

    /* Tarayicinin kendi ucgeni gizlenir; yerine bi-chevron doner. */
    list-style: none;
}

.bz-legend-ac > summary::-webkit-details-marker {
    display: none;
}

.bz-legend-ac > summary:hover {
    color: var(--bs-body-color, #495057);
}

.bz-legend-ac-caret {
    font-size: var(--bz-font-xs);
    transition: transform .15s ease;
}

.bz-legend-ac[open] .bz-legend-ac-caret {
    transform: rotate(90deg);
}

/* Satir sayisi: kapaliyken "icinde ne kadar var" sorusunu cevaplar, yani
   acmaya deger mi karari serit acilmadan verilebilir. */
.bz-legend-ac-count {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color, #495057);
}

/* Kabin ICINDEKI serit: zemin/cerceve yok, yalnizca basliktan ayiran cizgi. */
.bz-legend-flush {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 0;
}

/* --- Yan panel: icerikle YAN YANA --------------------------------------- */

/* Harita telemetriyle AYNI ANDA gorulmeli. Once cekmece (offcanvas) denendi ve
   GERI ALINDI: cekmece icerigin USTUNE biniyor, yani haritaya bakarken
   gostergeler kapaniyordu - izleme isinin tam tersi. Yan panel yer PAYLASIR:
   ana alan daralir, iki taraf da ayni anda gorunur.

   Panel yapiskan; icerik kayarken harita ekranda kalir. Ustten baslangici
   sabit serit yiginindan turuyor (--bz-sticky-offset, sticky-chrome.js
   olcup yaziyor) - elle piksel verilirse dil/sarma degisince kayar.

   GORUNUM (2026-10-01; kullanici: "harita tutamagi tam duzgun degil"): ACIK panel sayfadaki
   bolumler gibi BASLIKLI BIR PLAKA (`.dashboard-card`: "Harita" basligi + kapatma oku; Filo
   haritasiyla ayni). KAPALI panel boydan bir IKON RAYI (yan cekmeceyle ayni dil; asagida "Ray").
   Eskiden plakanin ustunde ayri bir sekme vardi: duz acik gri zemini gomulu plakaya baglanmiyordu;
   kapaliyken de dolu bordo kapsuldu (kirmizi temada alarm gibi okunuyordu). */

.bz-split {
    /* Panelin (ve kapali rayin) boyu: gorunen alan, ustte ve altta birer sayfa payi birakarak. */
    --bz-split-h: calc(100vh - var(--bz-sticky-offset, 0px) - 2 * var(--bz-page-gutter));
    display: flex;
    align-items: flex-start;
    gap: var(--bz-panel-gap);
    position: relative;
}

.bz-split-main {
    flex: 1 1 auto;

    /* Flex ogesi varsayilan olarak icerigin altina KUCULMEZ; bu olmadan
       Masonry izgarasi paneli disari itip yatay kaydirma aciyordu. */
    min-width: 0;
}

/* Panel KAPANDIGINDA gizlenmiyor, GENISLIGI sifirlaniyor (asagida); kapali halin rayi da bu kapta,
   panelin solunda: kapanirken panel rayin yaninda daralir. */
.bz-split-side {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex: 0 0 auto;
    min-width: 0;

    /* UST: serit yigini + sayfa payi; ALT: ayni pay (.bz-split-fill yuksekligi). Eskiden ust yalniz
       serit yiginiydi: kaydirilmamis sayfada plaka esikten 5,6 px asagida basliyor, alt kenari
       ekranin dibine yapisiyordu (pay 0,5 px; olculdu 2026-10-01), kaydirinca da yukari zipliyordu.
       Simdi baslangic konumu esige esit: plaka kaydirmada oynamaz, alt pay iki halde de ayni. */
    position: sticky;
    top: calc(var(--bz-sticky-offset, 0px) + var(--bz-page-gutter));
}

/* --- Panel (acik hal: baslikli plaka) ----------------------------------- */

/* Genislik animasyonu icin `width` kullaniliyor (display degil): kapanis ve
   acilis kayarak oluyor, icerik birden sicramiyor. */
.bz-split-panel {
    width: 0;
    overflow: hidden;
    transition: width .25s ease;
}

.bz-split.is-open .bz-split-panel {
    /* Sabit 360 px harita icin dardi: sokak adlari sigmiyor, arac isaretcisi
       kenara yapisyordu. Ust sinir + ekran orani birlikte. */
    width: var(--bz-split-width, min(560px, 34vw));
}

/* Plakanin KENDI genisligi sabit: kap daralirken plaka da daralsaydi her karede yeniden
   yerlesim yapar, animasyon takilirdi. Yukseklik gorunen alandan, ustte ve altta birer sayfa
   payi birakarak. Zemin, dolgu, baslik ve aralik `.dashboard-card`tan: sayfadaki bolumlerle AYNI
   plaka. */
.bz-split-fill {
    width: var(--bz-split-width, min(560px, 34vw));
    height: var(--bz-split-h);

    /* Olcum bir sebeple 0 gelirse panel gorunmez olmasin. */
    min-height: 320px;
}

    /* Harita basligin altinda kalan yuksekligi doldurur: govde kurali `.bz-plate-fill` ile ortak
       (yukarida, YIGIN bolumu). */

/* Basliktaki kapatma oku: zeminsiz ikon dugmesi, uzerine gelince marka tonu. Olcusu baslik satirinin
   dugme boyu (26 px; .bz-compact .dashboard-card-header taban yuksekligi): ikon kadar (11 px) bir
   tiklama alani azdi. */
.bz-split-close {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0;
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    font-size: var(--bz-font-xl);
    line-height: 1;
}

/* --- Ray (kapali hal) --------------------------------------------------- */

/* KAPALI panel yan cekmece gibi IKON RAYI (kullanici, 2026-10-01: "burada da boydan Harita yazsin"):
   yerlesimde kalan, haritanin acik haldeki boyunda bir PLAKA seridi (yuzeyi YUZEYLER); ustte ac oku,
   altinda harita ikonu ve dikey "Harita"; seridin tamami tiklanir. Genisligi ve dizilimi kapali cekmece
   rayiyla ayni (bz-tokens.css --bz-rail-w; customstyle.css yan cekmece). Kapanirken panel rayin yaninda
   daralir, ayri bir "kapaniyor" hali gerekmez. Eskiden ekranin sag kenarinda yuzen kucuk bir pencere
   tusuydu: yerlesimde yer kaplamiyor, icerigin ustune biniyordu; kapanis animasyonu icin panel ayrica
   `is-closing` haliyle akista tutuluyordu. */
.bz-split-handle {
    display: none;
}

.bz-split:not(.is-open) .bz-split-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: var(--bz-rail-w);
    height: var(--bz-split-h);
    min-height: 320px;
    padding: calc(var(--bz-plate-pad) + 5px) 0 var(--bz-plate-pad);
    border-radius: var(--bz-radius);
    color: var(--bs-body-color);
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease;
}

    /* Ok cekmece rayindaki gibi soluk ve 16 px; bolumun ikonu 24 px (cekmece basliginin ikonu). */
    .bz-split:not(.is-open) .bz-split-handle > .bzi:first-child {
        margin-bottom: 2px;
        color: var(--bs-secondary-color);
        font-size: var(--bz-rail-icon);
    }

    .bz-split:not(.is-open) .bz-split-handle > .bzi + .bzi {
        font-size: 24px;
    }

    .bz-split:not(.is-open) .bz-split-handle-label {
        white-space: nowrap;
        writing-mode: vertical-rl;
    }

    .bz-split:not(.is-open) .bz-split-handle:hover,
    .bz-split:not(.is-open) .bz-split-handle:focus-visible,
    .bz-split:not(.is-open) .bz-split-handle:hover > .bzi:first-child,
    .bz-split:not(.is-open) .bz-split-handle:focus-visible > .bzi:first-child {
        color: var(--bs-primary);
    }

    .bz-split:not(.is-open) .bz-split-handle:focus-visible {
        outline: 2px solid rgba(var(--bs-primary-rgb), .45);
        outline-offset: -2px;
    }

/* Dar ekranda yan yana durmak ikisini de okunmaz yapar: panel altta,
   tam genislikte ve akisla birlikte kayar. */
@media (max-width: 1200px) {
    .bz-split {
        flex-wrap: wrap;
    }

    /* Kapali ray yerinde (sagda) kalir: dar oldugu icin satiri bolmez. */
    .bz-split.is-open .bz-split-side {
        flex: 1 1 100%;
        position: static;
        align-items: stretch;
    }

    .bz-split.is-open .bz-split-panel {
        width: 100%;
    }

    .bz-split-fill {
        width: 100%;
        height: 420px;
    }
}

/* --- MASONRY IZGARASI (dashboard-grid): TEK FORMUL ---------------------------
 * docs/ui-standardi.md bolum 3. Arac panosu, istatistik sayfalari, filo paneli, pano
 * onizlemesi. Dis izgarada bolum kartlari (plaka) arasi --bz-panel-gap, ic izgarada
 * kutucuklar (plakanin parcalari) arasi --bz-stack-gap. dashboard-masonry.js bosluklari bu
 * degiskenlerden OKUR (--bz-grid-gutter / --bz-inner-gutter; birimli degeri piksele cozer).
 *
 * Sutun genisligi n sutun icin TEK formul: c = (100% - (n-1)*g) / n; --width2 iki sutun + bir
 * bosluk, --width3 tam genislik. Sayfalar genislik YAZMAZ; sutun sayisini --bz-grid-cols
 * secer (izgara sinifi + kirilma noktasi). Eskiden uc dosyada ayri sabitler vardi:
 * `33% - 10px`, `66%`, `25% - 15px`, `33.333% - 13.34px`, satir arasi 20 / 10 / 7px.
 *
 * Sutun sayisi (eskisiyle AYNI):
 *   varsayilan  3 | <=1600 2 | <=900 1
 *   bz-grid-4   4 | <=1750 3 | <=1400 2 | <=900 1   (cok sayida kucuk kart: arac panosu)
 *   bz-grid-3   3 | <=1200 2 | <=900 1              (2/3 + 1/3 duzeni: surus istatistikleri)
 *   bz-grid-1   her genislikte 1 (dar bir kolonun icindeki izgara: filo paneli; kolon
 *               secimi viewport'a degil kapsayiciya - !important, bolunmus gorunumu de yener)
 *   bolunmus gorunumde panel ACIKKEN ana alan daralir: >=1751 3, 1401-1750 2
 */
.dashboard-grid {
    --bz-grid-gutter: var(--bz-panel-gap);
    --bz-grid-cols: 3;
}

@media (max-width: 1600px) {
    .dashboard-grid {
        --bz-grid-cols: 2;
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        --bz-grid-cols: 1;
    }
}

:is(.bz-grid-4 .dashboard-grid, .dashboard-grid.bz-grid-4) {
    --bz-grid-cols: 4;
}

@media (max-width: 1750px) {
    :is(.bz-grid-4 .dashboard-grid, .dashboard-grid.bz-grid-4) {
        --bz-grid-cols: 3;
    }
}

@media (max-width: 1400px) {
    :is(.bz-grid-4 .dashboard-grid, .dashboard-grid.bz-grid-4) {
        --bz-grid-cols: 2;
    }
}

@media (max-width: 900px) {
    :is(.bz-grid-4 .dashboard-grid, .dashboard-grid.bz-grid-4) {
        --bz-grid-cols: 1;
    }
}

:is(.bz-grid-3 .dashboard-grid, .dashboard-grid.bz-grid-3) {
    --bz-grid-cols: 3;
}

@media (max-width: 1200px) {
    :is(.bz-grid-3 .dashboard-grid, .dashboard-grid.bz-grid-3) {
        --bz-grid-cols: 2;
    }
}

@media (max-width: 900px) {
    :is(.bz-grid-3 .dashboard-grid, .dashboard-grid.bz-grid-3) {
        --bz-grid-cols: 1;
    }
}

@media (min-width: 1751px) {
    .bz-split.is-open .dashboard-grid {
        --bz-grid-cols: 3;
    }
}

@media (min-width: 1401px) and (max-width: 1750px) {
    .bz-split.is-open .dashboard-grid {
        --bz-grid-cols: 2;
    }
}

:is(.bz-grid-1 .dashboard-grid, .dashboard-grid.bz-grid-1) {
    --bz-grid-cols: 1 !important;
}

.dashboard-grid-sizer,
.dashboard-grid-item {
    width: calc((100% - (var(--bz-grid-cols) - 1) * var(--bz-grid-gutter)) / var(--bz-grid-cols));
}

.dashboard-grid-item {
    margin-bottom: var(--bz-grid-gutter);
}

/* Iki sutun + aradaki bosluk; tek sutunda tam genislik. !important: sayfa kurallari tek
   sinifli genisligi ezmesin (eski global kural da !important'ti). */
.dashboard-grid-item--width2 {
    width: min(100%, calc(2 * (100% - (var(--bz-grid-cols) - 1) * var(--bz-grid-gutter)) / var(--bz-grid-cols) + var(--bz-grid-gutter))) !important;
}

.dashboard-grid-item--width3 {
    width: 100% !important;
}

/* IC IZGARA (bolum kartinin icindeki kutucuklar): iki sutun, arasi --bz-stack-gap.
   Eskiden global 10px, kompakt sayfalarda 7px. */
.dashboard-inner-grid {
    --bz-inner-gutter: var(--bz-stack-gap);
}

.dashboard-inner-grid-sizer,
.dashboard-inner-grid-item,
.dashboard-grid-item--width-half {
    width: calc((100% - var(--bz-inner-gutter, 0px)) / 2);
}

.dashboard-inner-grid-item {
    margin-bottom: var(--bz-inner-gutter);
}

.dashboard-inner-grid .dashboard-grid-item--width3 {
    width: 100% !important;
}

@media (max-width: 900px) {
    .dashboard-inner-grid-sizer,
    .dashboard-inner-grid-item,
    .dashboard-grid-item--width-half,
    .dashboard-inner-grid-item--width-half {
        width: 100%;
    }
}

/* --- Hiz/mesafe ozet satiri --------------------------------------------- */

/* Global olculer: deger 25 px, birim 10 px, aralarda 15 px iki yanli dolgu.
   Uc sayi icin neredeyse bir kart yuksekligi harcaniyordu - ozellikle filo
   detayinda, panel zaten dar bir cekmecede dururken. Degerler yine baskin
   ama karti yutmuyor. */
.bz-compact-tiles .gauge-indicators {
    margin-bottom: .4rem;
}

.bz-compact-tiles .gauge-indicators span:first-of-type {
    font-size: var(--bz-font-md);
}

.bz-compact-tiles .gauge-indicators span:nth-of-type(2) {
    font-size: var(--bz-font-xs);
}

/* Ayirici cizgilerin iki yanindaki 15 px'lik dolgu da kisiliyor; yoksa
   yazilar kuculunce aradaki bosluk oransiz buyuk kaliyor. */
.bz-compact-tiles .gauge-indicators div:not(:first-child) {
    padding-left: .6rem;
}

.bz-compact-tiles .gauge-indicators div:not(:last-child) {
    padding-right: .6rem;
}

/* --- Gosterge olcegi ---------------------------------------------------- */

/* Kutucuklar kuculdu ama gostergeler eski olcekte kalinca sayfa DENGESIZ
   goruluyordu: 14 px'lik kutucuklarin yaninda 20 px baslikli, 75 px'lik
   gostergeler. Gosterge TURLERI ve duzeni editorden geliyor - onlara
   dokunulmuyor; burada yalnizca cizim/yazi OLCEGI kisiliyor.

   Operation etkilenmez: orada HVAC'in ayri "Mini" partial'i (hvac-*-mini)
   kullaniliyor, batarya ve hiz gostergesi ise hic yok. */

/* Grafik kabi. ECharts ic olculeri JS'te kabin boyuna gore secildigi icin
   yazi boyu da beraberinde kuculuyor (bkz. dashboard-panels.js -> applySize).

   190 px DENENDI VE GERI ALINDI: gauge yaricapi kabin KISA kenarindan
   turedigi icin kap alcalinca cizim de kuculuyor ve genis kartin ortasinda
   kaybolmus goruluyordu. */
.bz-compact-tiles .dashboard-chart {
    max-height: 230px;
}

/* Basinc gostergeleri: taban 180 px, tek bir sayi icin fazlaydi - lastik
   basinci kartinda alt alta ALTI tane var. */
.bz-compact-tiles .pressure-gauge {
    min-height: 140px;
}

/* HVAC. Global olculer 20/20/17 px; kutucuk olcegi (deger 14, etiket 10,5)
   yaninda bunlar bir ust basamak duruyordu. */
.bz-compact-tiles .hvac-header {
    font-size: var(--bz-font-lg);
    margin-bottom: .35rem;
}

.bz-compact-tiles .hvac-grid {
    gap: 6px;
    padding-top: 6px;
}

.bz-compact-tiles .hvac-indicator {
    padding: .3rem;
}

.bz-compact-tiles .hvac-indicator-header {
    font-size: var(--bz-font-lg);
}

.bz-compact-tiles .hvac-indicator-text {
    font-size: var(--bz-font-md);
}

/* --- Batarya rozeti: yigin baglami ------------------------------------- */

/* HATA: "Şarjda değil" rozeti sabit seridin, ust barin, hatta acilir
   menulerin USTUNE ciziliyordu.

   Sebebi rozetin kendi `z-index: 10000` degeri DEGIL - o deger, kabinin
   icinde kalsa gayet makul (rozet sivinin uzerinde durmali). Sorun kabin
   onu KAPSAMAMASI: `.battery__pill` yalnizca `position: relative` tasiyor,
   `z-index` tasimiyor; konumlanmis ama z-index'i `auto` olan bir oge YIGIN
   BAGLAMI OLUSTURMAZ. Dolayisiyla 10000 en yakin baglama - koke - kadar
   cikiyor ve sayfadaki her seyle ayni terazide tartiliyordu.

   `z-index: 0` kaba bir yigin baglami kazandirir: rozet kabin ICINDE hala
   10000, disarida ise kabin sirasinda. Deger 10000'i dusurmek yerine bunu
   yapmak onemli, cunku sorun degerin buyuklugu degil KACABILIYOR olmasi -
   kutuphane yarin 999 yazsa hata yine cikardi.

   Kapsam yok: bu bir DOGRULUK duzeltmesi, yogunluga bagli degil. Kural
   burada duruyor cunku bu dosya kutuphane stilinden SONRA yukleniyor
   (bkz. _StyleImportsPartial) - customstyle.css'e yazilsaydi kutuphane
   ezerdi. */
.battery__pill {
    z-index: 0;
}

/* Batarya. Govde 75 px -> 56 px. Ic rozet ("Şarjda değil") ~26 px + ic bosluk
   tasidigi icin daha asagi inilmiyor. */
.bz-compact-tiles .battery__pill {
    height: 56px;
}

/* TASMA DUZELTMESI: sivinin sag ucundaki yuvarlak baslik kutuphanede SABIT
   `height: 75px` ile yaziliydi - govde yuksekligiyle ELLE eslenmisti. Govde
   kisalinca baslik govdenin ALTINA tasti. Yukseklik artik govdeden turuyor. */
.bz-compact-tiles .battery__liquid::after {
    height: 100%;
}

.bz-compact-tiles .battery__text {
    font-size: var(--bz-font-md);
}

/* --- Batarya: kutu artik PILIN KENDI DEGERINI tasiyor ------------------- */

/* Icerik degisti, bicim de onu izlemeli. Kutuphane bu kutuyu "Şarjda değil"
   ROZETI icin tasarlamisti; simdi icinde %SOC var, yani pilin anlattigi
   seyin ta kendisi. Okunakli olmasi sart: sivinin uzerinde de (yesil) bos
   yolun uzerinde de (acik gri) durabiliyor, cunku doluluk azalinca kutu
   sivinin disinda kaliyor. Yari saydam acik zemin ikisinde de calisir;
   beyaz metin calismazdi. */
.battery__text {
    background: rgba(255, 255, 255, .88);
    color: #212529;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 8px;
    border: 0;
    box-shadow: none;
    white-space: nowrap;
}

/* Sarj durumu artik TEK satir ve pilin altinda. Etiket sonmus, deger
   one cikmis olmali: satirin tasidigi bilgi durumun kendisi. */
.battery__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: .35rem;
    font-size: var(--bz-font-md);
}
.battery__status-label {
    color: var(--bs-secondary-color, #6c757d);
}
.battery__status .tv-label {
    font-weight: 600;
}

/* --- Kutucuk izgarasi --------------------------------------------------- */

/* Kutucuk izgarasinin boslugu ve genislikleri "MASONRY IZGARASI" bolumunde (ic izgara,
   --bz-stack-gap). Burada kompakt sayfalara ozel 7px + `50% - 3.5px` vardi. */

/* Gostergelerin KENDI olculerine (yazi boyu, gauge yaricapi, ikon boyu)
   DOKUNULMUYOR: bunlar editorden gelen duzenin parcasi ve daha once
   kucultuldugunde statik ikonlarla boy tutarsizligi cikmisti. Burada yalnizca
   kartlarin IC bosluklari toparlaniyor. */

/* ==========================================================================
   FILTRE SERIDI - `.filter-container` (Istatistik + Bakim)
   --------------------------------------------------------------------------
   Etkin filtre cipleri + temizle + "Filtrele" (yan cekmeceyi acar; cekmece yerinde kaldi).
   Kullanici (2026-10-01): "filter alanlarini revize edelim, kompakt ... su an butonlar pek
   iyi degil". Eski hal: uc farkli boy yan yana - 30 px'lik gri ikon kutusu (temizle), koyu
   gri `btn-info` cipler, tam bordo dolu 28 px dugme; seridin kendi yari saydam zemini ve
   golgesi; ustte 18 px bosluk.

   ISARETLEMEYE DOKUNULMADI, gorunum burada: cipleri UC yer uretiyor ve hepsi ayni sinif
   listesini basiyor (`btn btn-xs btn-info d-flex align-items-center border border-1`; ilk oge
   temizle) - sunucu bileseni (Components/*ActiveFilters), Surus sayfasinin istemci yeniden
   cizimi, Bakim `active-filters.js`. Istatistik sayfalari ayrica origin/AVL-761'de yeniden
   yaziliyor (2026-09); isaretleme degisikligi orada cakisirdi. Kural sinifa baglandigi icin o
   dal birlesince de gecerli.

   DIL: serit bir PLAKA (yuzeyi YUZEYLER'de, gomulu tepsi). Uzerindekiler TEK BOYDA: cip =
   sitenin `.bz-chip`i gibi beyaz hap (tiklaninca cekmece acilir: uzerine gelince bordo); temizle
   = ayni boyda kare; Filtrele = sitedeki butun filtre dugmeleriyle AYNI (asagida FILTRE
   DUGMELERI; once burada ozel bir beyaz dugmeydi - kullanici: "sadece o sayfalar etkilendi ...
   tasarim tutarsizligi olacak").
   ========================================================================== */
.filter-container {
    /* Cip yuksekligi = filtre dugmesinin (btn-sm olcusu, asagida). */
    --bz-filter-h: calc(.875rem * 1.5 + .5rem + 2 * var(--bz-border-width));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bz-stack-gap);
    margin: 0;
    padding: var(--bz-plate-pad);
    border-radius: var(--bz-radius);
}

/* Istatistik sayfalarinda serit govdenin ilk ogesi; `mt-4` (18 px) sayfa kenarinin ustune
   ikinci bir bosluk ekliyordu. Yardimci !important tasidigi icin ezme de oyle. */
.bz-page-body > .filter-container.mt-4 {
    margin-top: 0 !important;
}

/* PLAKANIN ICINDEKI serit (Bakim liste sayfalari, 2026-10-05): yuzeyi yok (YUZEYLER ic plaka), dolgusu da yok - plakanin
   dolgusu yeter; altindaki tablo penceresiyle arasi yigin araligi (isaretlemedeki `mb-2` !important tasidigi icin ezme de
   oyle; dolgu zincirindeki plaka govdesinin kendi araligi yok). */
.mapbox .filter-container {
    padding: 0;
    margin-bottom: var(--bz-stack-gap) !important;
}

/* Kompakt kartin govdesindeki serit de (Bakim Panosu / Arac Paneli / Istatistik, detay islem tablolari): plakanin dolgusu
   yeter. Alt araligina dokunulmaz: Istatistik'te serit kartin tek icerigi, digerlerinde isaretlemedeki `mb-2`. */
.bz-compact .card .filter-container {
    padding: 0;
}

/* CIP (ve temizle): Bootstrap dugme degiskenleriyle `.bz-chip` gorunumu. Kenar rengi `border`
   yardimcisinin okudugu --bs-border-color uzerinden: yardimci !important. */
:is(.filter-container, .bz-filterbar) .btn-info {
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: var(--bz-font-sm);
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: var(--bz-line-tight);
    --bs-btn-border-radius: 999px;
    --bs-border-color: rgba(0, 0, 0, .12);
    height: var(--bz-filter-h);
    gap: .3rem;
    white-space: nowrap;
}

    :is(.filter-container, .bz-filterbar) .btn-info:hover,
    :is(.filter-container, .bz-filterbar) .btn-info:focus-visible {
        --bs-border-color: rgba(var(--bs-primary-rgb), .45);
    }

    /* TEMIZLE: ayni boyda kare, ikon soluk; uzerine gelince bordo. */
    :is(.filter-container, .bz-filterbar) .btn-info:has(> .bzi-filter-off) {
        --bs-btn-color: var(--bs-secondary-color);
        width: var(--bz-filter-h);
        padding: 0;
        justify-content: center;
    }

/* Filtrele seridin sagina yaslanir (gorunumu asagida, sitenin butun filtre dugmeleriyle ortak). */
.filter-container > .btn {
    margin-left: auto;
}

/* Temizle ikonu en kucuk cizim boyunda (`bzi-24` 24 px dogar). */
:is(.filter-container, .bz-filterbar) .btn-info .bzi {
    font-size: 16px;
}

/* ==========================================================================
   FILTRE SERIDI - KAPSAM + OLCUT (`.bz-filterbar`, Views/Shared/_FilterBarPartial.cshtml)
   --------------------------------------------------------------------------
   Kullanici kararlari (2026-10-01): "tarih araligi her zaman ustte, detay filtreleri de
   sidedrawer" + "tarihi bir filtre gibi gormuyoruz" + "sayfa ustune koyarsak fazla filtreli
   sayfalar gereksiz yer kaplayacak". KAPSAM (baslangic -> bitis, Uygula, hazir araliklar) her
   zaman gorunur; OLCUTLER cekmecede, secilenler burada cip, sonda Filtrele. Serit `.bz-toolbar`
   da tasir: yuzeyi plaka (YUZEYLER), yapiskan seritte (`.statistic-toolbar-row`) yeri hazir.

   TEK BOY: seritteki her denetim (tarih kutusu, Uygula, hazir aralik, cip, Filtrele) btn-sm
   yuksekliginde. Eskiden ayni seritte 19 / 22 / 24 px yan yanaydi.
   ========================================================================== */
.bz-filterbar {
    --bz-filter-h: calc(.875rem * 1.5 + .5rem + 2 * var(--bz-border-width));
    gap: var(--bz-stack-gap) var(--bz-panel-gap);
}

    .bz-filterbar .form-control,
    .bz-filterbar .btn {
        height: var(--bz-filter-h);
    }

    .bz-filterbar .form-control {
        padding-block: 0;
        font-size: var(--bz-font-sm);
    }

    .bz-filterbar .bz-filterbar-scope .btn {
        --bs-btn-padding-y: 0;
        --bs-btn-padding-x: .6rem;
        --bs-btn-font-size: var(--bz-font-sm);
        display: inline-flex;
        align-items: center;
    }

.bz-filterbar-criteria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bz-stack-gap);
    min-width: 0;
}

    /* Ilk olcut cipi kapsamdan ince bir cizgiyle ayrilir: ikisi ayni seritte ama ayri seyler. */
    .bz-filterbar-criteria:not(:empty) {
        padding-left: var(--bz-panel-gap);
        border-left: 1px solid rgba(0, 0, 0, .12);
    }

    /* Secili olcut cipi evin `.bz-chip`i (raporlar, bm-report-filter.js) seridin TEK BOYUNDA: kendi boyu 19 px,
       yanindaki temizle ve Filtrele 24 px idi (olculdu). Istatistigin `btn-info` hapi ayni olcuyu yukarida aliyor. */
    .bz-filterbar-criteria .bz-chip {
        height: var(--bz-filter-h);
    }

/* Filtrele seridin sagina yaslanir; yanindaki sayfaya ozel icerik (ipucu cipi) ondan sonra. */
.bz-filterbar > .bz-filter-open {
    margin-left: auto;
}

/* ==========================================================================
   FILTRE DUGMELERI - SITENIN TAMAMINDA TEK KURAL
   --------------------------------------------------------------------------
   Kullanici (2026-10-01): "sitede pek cok farkli yerde filtrele butonlari var. Tasarim
   tutarsizligi olacak ... tek css olsun". Envanter: yan cekmeceyi acan 23 "Filtrele" dugmesi
   (Istatistik, Bakim, Home, Bildirim) - rengi hep btn-primary, BOYU karisik: btn-sm, btn-xs,
   tam boy, `py-0`; ikon 17 px satir ici ya da 24 px. Cekmecelerdeki 12 "uygula" dugmesi yesil
   (btn-success), satir ici aralik cubugundaki Uygula kirmizi.

   ACAN DUGME: rengi isaretlemeden (btn-primary), OLCUSU burada (btn-sm, ikon 16 px). Secici
   isaretlemeye degil ISE baglanir: yan cekmeceyi acan ve filtre ikonu tasiyan dugme filtre
   dugmesidir; yeni sayfa ayni sekilde yazilinca kendiliginden uyar. Yeni bilesen (Razor/React)
   `.bz-filter-open` yazabilir.
   UYGULA: isaretlemede `btn btn-primary` + `bzi-check` + "Uygula" (aralik cubugundakiyle ayni).
   Bekci: UiStandardGuardTests.Filtre_dugmeleri_tek_gorunumde.
   ========================================================================== */
.bz-filter-open,
.btn[data-bs-toggle="offcanvas"]:has(.bzi-filter) {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: var(--bz-font-sm);
    --bs-btn-line-height: var(--bz-line-normal);
    --bs-btn-border-radius: var(--bs-border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    /* `py-0` yazan dugme de ayni boyda: yukseklik olcuden hesaplanir. */
    height: calc(var(--bs-btn-font-size) * var(--bs-btn-line-height) + 2 * var(--bs-btn-padding-y) + 2 * var(--bs-btn-border-width));
    white-space: nowrap;
}

    /* Isaretlemedeki satir ici 17 px ve `me-1` (ikon-yazi araligi artik gap) yalniz !important
       ile ezilir. */
    .bz-filter-open .bzi,
    .btn[data-bs-toggle="offcanvas"]:has(.bzi-filter) .bzi {
        font-size: 16px !important;
        margin: 0 !important;
    }



/* ==========================================================================
   DUGME BOYU - TEK TANIM (2026-10-05)
   --------------------------------------------------------------------------
   Kullanici: "genel olarak butonlarda orantisizlik var, bazi yerler buyuk bazi yerler kucuk, bazilari farkli
   yapida; standarda oturtmaliyiz. Buyuk butonlar bizim isimize yaramiyor, kucuk kompakt bir tip olmali".
   Olculdu (onizleme, gercek CSS): boysuz .btn 29,5 px, btn-sm 24,1 px, btn-lg 37,2 px, 24 px ikonlu dugme 36,5 px;
   isaretlemede btn-sm 686, BOYSUZ .btn 405, btn-lg 9 (hesap sayfalari), ozel btn-xs 15; CSS'te yerel olculer (arac
   cubugu .75rem / 600, ozet seridi .9rem, tarih kisayollari .72rem, istasyon tablosu, sefer karti, btn-xs).
   Sitede TEK BOY: KOMPAKT = sitenin cogunlugunun zaten kullandigi btn-sm olcusu (~24 px; yazi .875rem, kose
   --bs-border-radius-sm); dugmedeki ikon 16 px (paketin en kucuk cizimi). Boy siniflari (btn-sm / btn-lg / btn-xs)
   isaretlemede kalabilir, olcu TASIMAZ. BILINCLI ISTISNALAR (kendi olculeri): navbar bolum sekmeleri (.bz-segment:
   sekme, dugme degil), Bakim islem tablosu
   (.datatable .btn-sm; AVL-692 sahibi), filtre seridi (FILTRE DUGMELERI: ayni 24 px).
   Bekci: UiStandardGuardTests.Dugme_boyu_tek_tanimda (dugme olcusu yazan kural artmaz).
   ========================================================================== */
.btn,
.btn-sm,
.btn-group-sm > .btn,
.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: var(--bz-font-sm);
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

    /* Paketin 24 px varsayilani dugmeyi satirdan yuksek yapardi (boysuz dugmede 36,5 px olculdu). Ikon satirin
       USTUNE hizali: taban hizasinda 16 px ikon satiri 26,1 px'e uzatiyordu; ust hizada butun dugmeler 24,1 px, ikon
       ortada (4 / 4,1 px; olculdu). Esnek kutu da 24,1 veriyordu ama yazisi sola dayali dugmelerin (text-start,
       d-flex) icerigini ortaya iterdi. */
    .btn :is(.bzi-24, .bzi-data) {
        font-size: 16px;
        line-height: 1;
        vertical-align: top;
    }

/* ==========================================================================
   UST KATMAN - modal + yan offcanvas (tek tanim)
   --------------------------------------------------------------------------
   Kullanici (2026-10-01): "modallar, sidedrawerlar ve butonlarin hepsine bir bakalim". Envanter: 133 modal, 27
   offcanvas (hepsi sagdan). Modal Bootstrap'in kendi gorunumundeydi (kenarlik, h5 1.25rem baslik, siyah %50 perde),
   offcanvas bm-offcanvas.css'te ayri bir dildeydi (!important 1rem kose ve golge, 1rem baslik, sabit renkler); bazi
   modallar sayfa CSS'inde kendi kosesini yaziyordu (destek, bilet: 1rem). Simdi ikisi AYNI: kose --bz-radius, yuzey
   YUZEYLER KATMAN (beyaz, kenarsiz, belirgin golge, ayni perde), baslik ayni olcu, baslik / govde ayni dolgu ve
   ayirici. Offcanvas'in YERLESIMI (ekran kenarindan bosluklu, yuzen; genislik) ve govdesindeki form olcusu
   bm-offcanvas.css'te kaldi. Basliktaki `fs-5` / `h6` gibi yardimcilar burada ezilmez (isaretlemede duzeltilir).
   ========================================================================== */
.modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--bz-radius);
    --bs-modal-inner-border-radius: var(--bz-radius);
    --bs-modal-header-padding: .75rem 1rem;
    --bs-modal-padding: 1rem;
    --bs-modal-header-border-color: var(--bs-border-color-translucent);
    --bs-modal-footer-border-color: var(--bs-border-color-translucent);
    --bs-modal-title-line-height: 1.3;
}

/* Kenarlik Bootstrap'in degiskeniyle sifir: `.offcanvas.offcanvas-end` (0,2,0) kenarligi kendisi cizer. */
.offcanvas {
    --bs-offcanvas-border-width: 0;
    border-radius: var(--bz-radius);
}

    .offcanvas .offcanvas-header {
        align-items: flex-start;
        padding: .75rem 1rem;
        border-bottom: var(--bz-border-width) solid var(--bs-border-color-translucent);
    }

    .offcanvas .offcanvas-body {
        padding: 1rem;
    }

    /* Alt dugme seridi: Bootstrap'te offcanvas icin karsiligi yok; uc cekmece (rota durak ekleme x2, bildirim
       filtresi) onu yardimci siniflarla kuruyordu, dolgusu karisik (p-2 / p-3). Ayirici ve dolgu basliktakiyle ayni;
       govde kayar, serit yerinde kalir. */
    .offcanvas .offcanvas-footer {
        display: flex;
        flex-shrink: 0;
        gap: .5rem;
        padding: .75rem 1rem;
        border-top: var(--bz-border-width) solid var(--bs-border-color-translucent);
    }

/* Baslik: modal ve offcanvas ayni (eskiden modal h5 1.25rem / 500, offcanvas 1rem / 600). */
.modal-title,
.offcanvas .offcanvas-title {
    margin: 0;
    font-size: var(--bz-font-lg);
    font-weight: 600;
    line-height: var(--bz-line-tight);
}

/* ONAY PENCERESI (SweetAlert, js/bz-swal.js; 118 cagri): ayni ust katman - kose, yuzey ve perde ortak. Basligi
   ortadaki ikonun altinda tek basina durdugu icin modal basligindan bir kademe buyuk; eskiden 1.875em (22,95 px),
   sayfanin geri kalanina gore cok iriydi. Dugmeleri zaten ortak (bz-swal.js: vazgec solda cerceveli gri, onay
   sagda). SweetAlert'in kendi kurallari :where() ile ozgulluksuz: bu tek sinifli kurallar sirasiz kazanir. */
.swal2-popup {
    border-radius: var(--bz-radius);
}

.swal2-title {
    font-size: var(--bz-font-lg);
    font-weight: 600;
}

.swal2-html-container {
    font-size: var(--bz-font-md);
}

/* ==========================================================================
   CAKISMA KARTI - arac / surucu zaman cakismasinin bildirimi (`.bz-conflict`)
   --------------------------------------------------------------------------
   Gunluk planda kayit, aracin ya da surucunun baska bir atamasiyla cakisinca bildirim penceresinin govdesi
   (ServiceMessageExtensions.ConflictCardsHtml). Kullanici (2026-10-08, bulgu B37): "modal toparlansin". Eskiden C#
   icinde satir ici stil ve sabit renklerle ciziliyordu; baslik iki kez ("Hata" + kirmizi serit), etiketler hizasiz.
   Simdi pencerenin basligi cakismanin kendisi; govde iki taraf (Mevcut / Yeni) + ayni eksende cubuklar. Satir icinde
   yalniz verinin konumu (yuzde) yazilir.
   ========================================================================== */
.bz-conflict {
    /* Taraflar iki ayri renk: Mevcut kirmizi, Yeni mavi. Kirmizi temada --bs-primary de kirmizi oldugu icin Yeni ayri
       maviyle (--bs-blue) ayrilir (kullanici: "renk daha belirgin olsun"). Yazi pencerenin govde metni olcusunde. */
    --bz-conflict-existing: var(--bz-status-bad);
    --bz-conflict-other: var(--bz-status-warn);
    --bz-conflict-new: var(--bs-blue);
    display: flex;
    flex-direction: column;
    gap: var(--bz-space-2);
    text-align: left;
    font-size: var(--bz-font-sm);
    line-height: var(--bz-line-normal);
    color: var(--bz-color-text);
}

.bz-conflict-side {
    --bz-conflict-tone: var(--bz-conflict-new);
    border-left: 4px solid var(--bz-conflict-tone);
    padding: var(--bz-space-1) var(--bz-space-2);
}

    .bz-conflict-side.is-existing { --bz-conflict-tone: var(--bz-conflict-existing); }
    .bz-conflict-side.is-other { --bz-conflict-tone: var(--bz-conflict-other); }
    .bz-conflict-side.is-new { --bz-conflict-tone: var(--bz-conflict-new); }

.bz-conflict-side-title {
    font-size: var(--bz-font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bz-conflict-tone);
}

.bz-conflict-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--bz-space-2);
    row-gap: 0;
    margin: 0;
}

    .bz-conflict-kv dt {
        font-weight: 400;
        color: var(--bz-color-text-muted);
    }

    .bz-conflict-kv dd {
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

        .bz-conflict-kv dd strong { font-weight: 600; }

.bz-conflict-timeline {
    padding-top: var(--bz-space-1);
}

.bz-conflict-track {
    position: relative;
    height: 2.5rem;
    border-bottom: 1px solid var(--bz-color-border);
}

.bz-conflict-bar {
    position: absolute;
    height: .75rem;
    border-radius: 2px;
    background: var(--bz-conflict-new);
}

    .bz-conflict-bar.is-existing,
    .bz-conflict-bar.is-other { top: .25rem; }
    .bz-conflict-bar.is-existing { background: var(--bz-conflict-existing); }
    .bz-conflict-bar.is-other { background: var(--bz-conflict-other); }
    .bz-conflict-bar.is-new { top: 1.375rem; background: var(--bz-conflict-new); }

/* Cakisan aralik: cubuklarin arkasinda belirgin sari serit, kenarlari kesik cizgi. */
.bz-conflict-overlap-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--bz-status-warn) 35%, transparent);
    border-left: 2px dashed var(--bz-status-warn-fg);
    border-right: 2px dashed var(--bz-status-warn-fg);
}

.bz-conflict-axis {
    position: relative;
    height: 1.25rem;
    font-size: var(--bz-font-xs);
    color: var(--bz-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bz-conflict-tick {
    position: absolute;
    top: .125rem;
    white-space: nowrap;
    transform: translateX(-50%);
}

    .bz-conflict-tick.is-first { left: 0; transform: none; }
    .bz-conflict-tick.is-last { right: 0; transform: none; }
    .bz-conflict-tick.is-overlap {
        color: var(--bz-status-warn-fg);
        font-weight: 600;
    }

.bz-conflict-overlap {
    text-align: center;
    font-weight: 600;
    color: var(--bz-status-warn-fg);
}

/* ==========================================================================
   YUZEYLER - TEK TANIM   [bz-yuzeyler:basla]
   --------------------------------------------------------------------------
   Sitedeki BUTUN plaka, pencere, kanal ve tus yuzeyleri (zemin, kenar rengi, golge) yalniz
   BURADAN boyanir. Bilesen kurallari yuzey YAZMAZ; kutuyu (dolgu, aralik, kose, yerlesim)
   yazar. Kullanici (2026-10-01): "ayni css'i kullanalim, orada farkli burada farkli css
   olmasin". Eskiden ayni tarif dokuz kuralda tekrar yaziliydi (customstyle.css,
   bm-datatables.css, bu dosya); birinde yapilan degisiklik digerine gecmiyordu.

   Degerler bz-tokens.css (secenek B): PLAKA gomulu tepsi (sekme seridinin KANALI gibi),
   PENCERE tepsiden hafifce yukselen beyaz yuzey (sekmedeki TUS gibi).

   YENI YUZEY: yeni sinif ACMA, rolu tasiyan secici listesine ekle; yeni bilesen (Razor ya da
   React) `.bz-plate` / `.bz-window` sinifini kullanir. Dosyanin SONUNDA durur: esit
   ozgullukteki bilesen kurallarindan (hover vb.) sonra gelsin.
   Bekci testi: UiStandardGuardTests.Yuzey_tarifi_tek_yerde - bu bolum disinda yuzey
   degiskeni (--bz-plate-* / --bz-window-* / --bz-channel-* / --bz-key-*) kullanimi
   testi dusurur.
   ========================================================================== */

/* PLAKA (kapali harita panelinin rayi dahil: cekmece rayi gibi) */
.bz-plate,
.mapbox,
.dashboard-card,
.page-header-container,
.side-drawer,
.media-drawer,
.bz-split-handle,
.bz-side-nav,
.bz-toolbar,
.filter-container,
.bz-compact .card {
    background: var(--bz-plate-bg);
    border-style: solid;
    border-width: var(--bz-border-width);
    border-color: var(--bz-plate-border);
    box-shadow: var(--bz-plate-shadow);
}

/* Ic plaka: kartin icindeki plaka ikinci bir kart cizmez (V7.1). Plakanin icindeki filtre seridi de (Bakim liste
   sayfalari: serit tablo plakasinin govdesinde; Pano / Arac Paneli / Istatistik / detay islem tablolari: kompakt kartin
   govdesinde, 2026-10-05) - eskiden plaka icinde ikinci beyaz kutuydu. */
.mapbox .mapbox,
.mapbox .filter-container,
.bz-compact .card .filter-container {
    background: var(--bz-plate-inner-bg);
    border-color: transparent;
    box-shadow: none;
}

/* SAYFA BASLIGI PLAKADIR (2026-10-06): Bilgilendirme seridiyle ayni serit (kullanici: "bu bos gozuken alanlar admin
   paneldeki bilgilendirme alanlari gibi olsun"; Filo, Arac Paneli, Hesap Ayarlari "tasarim ortaklansin"). V7'de
   (2026-10-05) kutusuzdu: zeminde tek basina buyuk baslik bos bir satir gibi duruyordu. */

/* KARTIN ICINDEKI ICERIK PENCERESI DUZLESIR (V7.1, 2026-10-05): plaka kartin kendisi; icindeki tablo / liste / bolge
   ikinci bir kenar ve golge cizmez (tek katman). OGE KARTLARI (pano kutucugu .mini-card, KPI, bilgi kutusu, Nasil
   Calisir adimi, rota karti, Medya arac satiri, kompakt .card .card) listede YOK: kenarini korur, grubu okutur. */
:is(.mapbox, .dashboard-card, .side-drawer, .media-drawer, .bz-side-nav, .bz-plate, .bz-compact .card)
    :is(.bz-window, .content-box, .bm-surface, .side-drawer-list, .media-list, .fleet-tree, .bz-side-nav-list,
        .bm-settings-list > .bm-scroll-region, .season-timeline-container) {
    border-color: transparent;
    box-shadow: none;
}

/* Plakanin PARCASI yuzey cizmez: plakanin icindeki serit (kart basligindaki ozet seridi) ikinci
   bir oyuk gibi agir duruyordu (2026-10-01 karsilastirmasi). Kenarlik saydam: kutu olcusu ayni. */
.mapbox .bz-toolbar,
.dashboard-card .bz-toolbar,
.bz-compact .card .bz-toolbar {
    background: none;
    border-color: transparent;
    box-shadow: none;
}

/* Tiklanabilir plaka (kart baglantisi) uzerine gelince. */
a.dashboard-card:hover {
    box-shadow: var(--bz-plate-shadow-raised);
}

/* PENCERE (mini kart: panonun kutucugu; bilgi kutusu).
   Kutucuk `:where()` ile - OZGULLUGU SIFIR: panonun DURUM RENKLERI (dashboard-panels.js'in satir ici
   renkleri, lib/battery-indicator `.indicator-color-red/green`, `.contactor-on/off`) yukleme sirasindan
   bagimsiz her zaman onde. Pano dinamik olusur, renkler duzenleyiciden gelir ve anlamlidir (kullanici,
   2026-10-01: "o renklerde manipulasyon kesinlikle yapmiyoruz"); pencere zemini yalniz renk verilmemis
   kutucugun tabanidir. Duz `.mini-card` iken bu dosya kitapliktan SONRA yuklendigi icin kirmizi / yesil
   durum kutucuklarini beyaza eziyordu. */
.bz-window,
.content-box,
.bm-surface,
.mapbox.bm-surface,
.home-footer .home-kpi,
:where(.mini-card),
.bz-info-box,
.bm-clone-wrap,
.bm-route-map-card,
.bm-route-stations-box,
.side-drawer-list,
.media-list,
.fleet-tree,
.bz-side-nav-list,
.bm-settings-list > .bm-scroll-region,
.bm-vehicle-row,
.bm-vehicle-legend,
.hiw-card,
.rc-card,
.season-timeline-container,
.bz-compact .card .card {
    background: var(--bz-window-bg);
    border-style: solid;
    border-width: var(--bz-border-width);
    border-color: var(--bz-window-border);
    box-shadow: var(--bz-window-shadow);
}

/* ZORUNLU EZMELER (yeri burasi, nedeni yaninda):
   - .bm-surface zemini: tablo kutusu ic plaka / mapbox-body secicileriyle daha ozgul bir griye
     boyaniyordu (eskiden bm-datatables.css'te ayni !important).
   - .bz-compact .card .card golgesi: markup'taki Bootstrap `shadow-sm` yardimcisi !important
     tasiyor; 15 karttan tek tek silmek yerine burada notrlenir. */
.bm-surface {
    background: var(--bz-window-bg) !important;
}

.bz-compact .card .card {
    box-shadow: var(--bz-window-shadow) !important;
}

/* ZEMIN (2026-10-06): sayfanin zemini ve zeminin rengini tasiyan parcalar - ust cubugun SERIDI (icerik altindan
   kayar, serit opak) ve yapiskan baslik seridi. Eskiden ust cubuk yari saydam beyaz cam (+ bulaniklik + 20 px golge),
   yapiskan serit --bs-tertiary-bg (#f8f9fa; zemin #f4f4f4, bir ton acik bant). Kullanici: "body arkaplaninin solid
   white olmamasi goz yorma konusunda daha iyi". */
.wrapper,
.custom-navbar,
.bz-sticky-bar {
    background-color: var(--bz-color-page);
}

/* YUZER (2026-10-06): zeminden ayrilan cubuk parcalari - ust cubugun BANDI (cubugun butun icerigi; "yuzer serit"),
   cubugun ACILIR MENU KARTI (bir kademe yuksekte) ve kenar menusunun PANELI (karanlik zemini isaretlemede,
   bg-body-secondary). Kose plakayla ayni (kutu kurallarinda --bz-radius). */
.custom-navbar > .container-fluid {
    background-color: var(--bz-float-bg);
    border-style: solid;
    border-width: var(--bz-border-width);
    border-color: var(--bz-float-border);
    box-shadow: var(--bz-float-shadow);
}

/* Ust cubugun bildirim menusu (customstyle.css BILDIRIM MENUSU), sigmayan sekme seridinin menusu (js/bz-tabs-fit.js),
   seritteki ipucu karti (customstyle.css SERITTEKI IPUCU), kenar menusunun profil karti (customstyle.css PROFIL
   KARTI), cekmece basligindaki secicinin menusu (SECICI) ve isi haritasinin arac karti (customstyle.css ARAC KARTI) de
   ayni yuzer kart. */
.bz-navbar-tabs .dropdown-menu,
.bz-tab-menu > .dropdown-menu,
.bz-picker > .dropdown-menu,
.bz-hint-menu > .dropdown-menu,
.bz-notif-menu,
.bz-profile-menu,
.bz-vehicle-card {
    --bs-dropdown-bg: var(--bz-float-bg);
    --bs-dropdown-border-color: var(--bz-float-border);
    --bs-dropdown-link-hover-bg: var(--bz-color-hover);
    --bs-dropdown-link-active-bg: var(--bz-key-bg);
    --bs-dropdown-link-active-color: var(--bz-key-fg);
    box-shadow: var(--bz-float-shadow-raised);
}

.app-sidebar.bz-sidebar {
    box-shadow: var(--bz-float-shadow);
}

/* KANAL: sekme seridinin izi (sayfa ici sekmeler, segment gecisleri, ust cubugun bolum sekmeleri) ve cekmece basligindaki
   secicinin dugmesi (SECICI: tek secenekli iz, adi seciminin kendisi). */
.bz-segment,
.nav-tabs,
.bz-picker-toggle {
    border-style: solid;
    border-width: var(--bz-border-width);
    border-color: var(--bz-channel-border);
    background-color: var(--bz-channel-bg);
    background-image: var(--bz-channel-sheen);
    box-shadow: var(--bz-channel-shadow);
}

/* KANAL YERINE GORE (2026-10-06): iz SAYFA ZEMININDE yuzen beyaz hap (zeminde #eef0f3 iz ile #f4f4f4 zemin arasi
   1,04:1'di - iz gorunmuyor, "Liste | Harita"da secili tus yalniz kaliyordu), PLAKANIN ve ust katmanin icinde gomulu
   gri (bz-tokens.css'teki degerler: beyaz kartta gri iz okunur, yuzer iz kutu icinde kutu olurdu), UST CUBUGUN
   BANDINDA ve BASLIK SERIDINDE kapsiz (bant / serit kabin kendisi; varlik sekmeleri seridin icinde). Ozel ozellik
   miras alinir: baglam en yakin atadan gelir. Uzerine gelme izin
   tersi. (V7, 2026-10-05: plakanin icindeki serit de kanalini tasir; "gri ustu gri" kurali o zaman kalkti.) */
.bz-page {
    --bz-channel-bg: var(--bz-float-bg);
    --bz-channel-border: var(--bz-float-border);
    --bz-channel-shadow: var(--bz-float-shadow);
    --bz-channel-hover-bg: var(--bz-color-hover);
}

.bz-plate,
.mapbox,
.dashboard-card,
.side-drawer,
.media-drawer,
.bz-side-nav,
.bz-split-handle,
.bz-toolbar,
.filter-container,
.bz-compact .card,
.modal-content,
.offcanvas,
.swal2-popup {
    --bz-channel-bg: var(--bz-color-hover);
    --bz-channel-border: transparent;
    --bz-channel-shadow: none;
    --bz-channel-hover-bg: var(--bs-body-bg);
}

.custom-navbar,
.page-header-container {
    --bz-channel-bg: transparent;
    --bz-channel-border: transparent;
    --bz-channel-shadow: none;
    --bz-channel-hover-bg: var(--bz-color-hover);
}

.nav-tabs .nav-link:hover:not(.active):not(.disabled) {
    background-color: var(--bz-channel-hover-bg);
}

/* TUS: gri KANALDAKI secili oge (navbar segmenti, sayfa ici sekmeler, navbar acilir menusu); gorunumu bz-tokens.css TUŞ notu
   (2026-10-05'ten beri dolu birincil zemin + beyaz yazi, cizgi kalinligi 0). Cizgi arka plan katmani. Basili (:active) sekme de tus zemini
   VE yazi rengini alir. Dikey listelerin secimi asagida SECILI (beyaz icerik alaninda gri kanal - tersi).
   Basili yazi rengi 2026-10-05'e kadar bilesende `--bs-primary`'di (V5 acik tonundan kalma): dolu bordo TUS'ta
   basili ve menusu acik sekmenin yazisi zeminle ayni renkte kayboluyordu (kullanici: "secili olmayan sekmenin
   dropdownu acilinca yazi okunmuyor"; olculdu: yazi = zemin = rgb(138,13,30)). */
.bz-segment > .btn,
.bz-segment > .dropdown > .btn {
    --bs-btn-hover-bg: var(--bz-channel-hover-bg);
    --bs-btn-active-bg: var(--bz-key-bg);
    --bs-btn-active-color: var(--bz-key-fg);
    --bs-btn-active-shadow: var(--bz-key-shadow);
}

/* MENUSU ACIK, SECILI OLMAYAN SEKME (navbar'daki acilir sekmeler: Isletme Medyalar / Rotalar; secili sekmesi
   olmayan toplu menu dugmesi). Bootstrap `.btn.show`'u basili degiskenleriyle (TUS) boyar; secili sekmeyle ayni
   dolu gorunmesin - iki dolu sekme hangisinin secili oldugunu kaybettirir. Uzerine gelinmis gibi: duz beyaz,
   marka rengi yazi. */
.bz-segment > .btn.show:not(.active),
.bz-segment > .dropdown > .btn.show:not(.active) {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    background-image: none;
    box-shadow: none;
}

.bz-segment > .btn-check:checked + .btn,
.bz-segment > .btn.active,
.bz-segment > .dropdown > .btn.active,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.bz-navbar-tabs .dropdown-item.active,
.bz-tab-menu .dropdown-item.active,
.bz-picker .dropdown-item.active,
.bz-quick .btn.active,
.pagination .page-item.active .page-link,
.dataTables_wrapper .paginate_button.current,
div.dt-container div.dt-paging button.dt-paging-button.current {
    color: var(--bz-key-fg);
    background-color: var(--bz-key-bg);
    background-image: var(--bz-key-line);
    background-size: 100% var(--bz-key-line-width);
    background-position: bottom;
    background-repeat: no-repeat;
    box-shadow: var(--bz-key-shadow);
}

/* TUS CIZGISININ YAZI PAYI: cizgi dolgunun icine (altta) cizilir; esit dolguda yazi cizgiye yapisik duruyordu
   (kullanici, 2026-10-01: "bu tablarda yazi alta daha yakin gibi"; olculdu: ustte 4,1 px, cizgiyle arasi 1,5 px).
   Yazi cizginin USTUNDEKI alanda ortalanir: dolgunun cizgi yarisi kadari alta gecer, toplam boy ayni. Butun
   ogelerde (secili olmayan da ayni hizada). Dolgu dar oldugunda (navbar'daki .btn-sm) kayma dolgunun kendisiyle
   sinirli. Burada cunku cizginin olcusu (--bz-key-line-width) TUS tarifinin parcasi. */
.nav-tabs .nav-link {
    padding-top: calc(var(--bs-nav-link-padding-y) - var(--bz-key-line-width) / 2);
    padding-bottom: calc(var(--bs-nav-link-padding-y) + var(--bz-key-line-width) / 2);
}

/* Secili sekme dikeyde de 1 px buyur (yatayi KANAL bolumunde): KENDI dolgusuyla. Eskiden yalniz yanindaki pasif
   sekmenin boyuna gerilerek buyuyordu; TEK sekmeli seritte (Yonetim panelleri, Destek "Yeni Talep") gerilecek komsu
   olmadigi icin serit 2 px kisa kaliyordu - Destek sayfasinda yan yana duran iki seritte gorundu (olculdu: 27,2 /
   29,2 px). Cok sekmeli seritte olcu degismez (secili sekme zaten bu boydaydi). */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    padding-top: calc(var(--bs-nav-link-padding-y) - var(--bz-key-line-width) / 2 + 1px);
    padding-bottom: calc(var(--bs-nav-link-padding-y) + var(--bz-key-line-width) / 2 + 1px);
}

.bz-segment > .btn,
.bz-segment > .dropdown > .btn {
    padding-top: calc(var(--bs-btn-padding-y) - 2px - min(var(--bs-btn-padding-y) - 2px, var(--bz-key-line-width) / 2));
    padding-bottom: calc(var(--bs-btn-padding-y) - 2px + min(var(--bs-btn-padding-y) - 2px, var(--bz-key-line-width) / 2));
}

/* SECILI (KARANLIK BOLGE): kenar menusunun secili sayfasi (acik grubun basligi degil, sayfanin kendisi): kanal
   zemini (karanlikta acik duz ortu, bz-tokens.css karanlik blogu) + solda marka cizgisi; kenarlik saydam ayrilir,
   yaziyi bilesen yazar. Acik zemindeki dikey listeler (yan menu, cekmece) 2026-10-02'den beri asagida CEKMECE
   OGESI'nin TUSUNU kullanir (gorunumu bz-tokens.css TUŞ notu); once gomulu gri KANAL'di (2026-10-01: "secimler de kanalli
   gri olur"). Bordo ton koyu zeminde lekelenirdi, kenar menusu kanalda kaldi. */
.bz-menu-link.active:not(.bz-menu-toggle) {
    border-color: var(--bz-channel-border);
    background-color: var(--bz-channel-bg);
    background-image: var(--bz-key-line), var(--bz-channel-sheen);
    background-size: var(--bz-key-line-width) 100%, auto;
    background-position: left, 0 0;
    background-repeat: no-repeat;
    box-shadow: var(--bz-channel-shadow);
}

/* CEKMECE OGESI (yan cekmeceler: Isletme Rotalar / Medyalar, Medya Merkezi, Arac Rotalari, Yonetim medya / anons,
   Depo, Filo agaci): her oge COK HAFIF cerceveli (pencere kenari), secili oge kanala gomulmez: sekme seridinin secili
   tusuyla ayni TUS (gorunumu bz-tokens.css TUŞ notu; cizgi kalinligi solda). Kullanici, 2026-10-02: "cekmecede
   elementlerin cercevesi olsa cok hafif ve kanal yerine pop olsa? kanal konusunda hala emin degilim, eski duruyor".
   Onizlemede A / B (Isletme Rotalar): eskiden duz satir + secili gri KANAL (yukarida SECILI; yan menu ve kenar
   menusu hala onda). Kenar ozelligi sablonda saydam ayrilmis (CEKMECE LISTESI), burada yalniz rengi; yazi bileseni. */
.side-drawer-item,
.media-item,
.drawer-item,
.drawer-layout .side-drawer-item {
    border-color: var(--bz-window-border);
}

/* Secili: cekmece ogesi + yan menu (.bz-side-nav) ogesi AYNI tus (V5, 2026-10-02: "v5 guzel"; 2026-10-05 dolu
   birincil renk denemesi: yazi rengi --bz-key-fg buradan, bilesen kurali marka rengini yaziyordu). */
.side-drawer-item.is-active,
.media-item.is-active,
.drawer-item.is-active,
.drawer-layout .side-drawer-item.is-active,
.bz-side-nav-item.is-active {
    border-color: transparent;
    color: var(--bz-key-fg);
    background-color: var(--bz-key-bg);
    background-image: var(--bz-key-line);
    background-size: var(--bz-key-line-width) 100%;
    background-position: left;
    background-repeat: no-repeat;
    box-shadow: var(--bz-key-shadow);
}

/* Secili ogenin SOLUK satirlari (Durak / Version gibi `.text-muted`) tusun zemininde okunsun: Bootstrap yardimcisi
   !important tasidigi icin burada da !important. Acik tonda (V5) --bz-key-muted-fg = --bs-secondary-color, degisiklik
   yok; dolu tonda yari saydam beyaz. */
:is(.side-drawer-item, .media-item, .drawer-item, .bz-side-nav-item).is-active :is(.text-muted, .text-body-secondary, .text-secondary) {
    color: var(--bz-key-muted-fg) !important;
}

/* Secili ogenin IKONU tusun yazisiyla ayni renkte. Yan menu ikonu kendi marka rengini tasiyor (.bz-side-nav-icon),
   cekmecedeki rota tipi ikonu tipin rengini: dolu tonda bordo ustunde kayboluyordu - daraltilmis yan menude yalniz
   ikon kaldigi icin secili oge BOS bordo kare gibi duruyordu (kullanici, 2026-10-05: "sidebar daraltilinca bordo
   ustu bordo kayboldu"). */
.bz-side-nav-item.is-active .bz-side-nav-icon,
:is(.side-drawer-item, .media-item, .drawer-item).is-active .bzi {
    color: var(--bz-key-fg);
}

/* ARAC KARTI beyaz icerik alaninin USTUNDE (kullanici, 2026-10-02: "content beyaz, ustu beyaz arac karti olsun"; once
   kartlar gri plakadaydi, "cok soluk"): zemin pencereyle ayni, KENARI belirgin cizgi (pencere kenari beyaz zeminde
   kayboluyordu). SECILI KART (Medya Ayarlar): tam marka cercevesi, 2 px (kenar + ic golge); kullanici: "secim daha
   belirgin olsun, yaziyi bordo yapmissin ama cok az anlasiliyor, tam cerceve verebiliriz". Eskiden yalniz solda
   kosesiz marka cizgisi + bordo ad. */
.bm-vehicle-row {
    border-color: var(--bs-border-color);
}

    .bm-vehicle-row.selected {
        border-color: var(--bs-primary);
        box-shadow: inset 0 0 0 1px var(--bs-primary), var(--bz-window-shadow);
    }

/* KATMAN: sayfanin USTUNDE acilan pencere (modal, yan offcanvas; bolum UST KATMAN). Pencereyle ayni beyaz zemin,
   kenarsiz, belirgin golge; arkasindaki perde ikisinde ayni (eskiden modalda siyah %50, offcanvas'ta lacivert %32). */
.modal-content,
.offcanvas,
.swal2-popup {
    background-color: var(--bz-window-bg);
    box-shadow: var(--bz-overlay-shadow);
}

.modal-backdrop,
.offcanvas-backdrop,
.swal2-container.swal2-backdrop-show {
    background-color: var(--bz-overlay-backdrop);
}

    .modal-backdrop.show,
    .offcanvas-backdrop.show {
        opacity: 1;
    }

/* [bz-yuzeyler:bitir] */