/*
  Supplementary CSS: classes missing from Metronic's compiled styles.css.
  These are Tailwind v4-style utility classes used in our pages that were
  not included in Metronic's bundle because they weren't in the scanned demos.
*/

/* --------------------------------------------------------------------------
   Responsive layout — large-screen overrides for the sidebar + content layout
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .lg\:pt-0 {
    padding-top: 0;
  }
  .lg\:overflow-hidden {
    overflow: hidden;
  }
  /* Offset the main content area to the right of the fixed sidebar */
  .lg\:ps-\(--sidebar-width\) {
    padding-inline-start: var(--sidebar-width);
  }
}

/* --------------------------------------------------------------------------
   Status color utilities for dashboard stat card icons
   -------------------------------------------------------------------------- */
.bg-success\/10 {
  background-color: rgba(34, 197, 94, 0.1);
}
.text-success {
  color: rgb(34, 197, 94);
}
.bg-warning\/10 {
  background-color: rgba(245, 158, 11, 0.1);
}
.text-warning {
  color: rgb(245, 158, 11);
}
.bg-info\/10 {
  background-color: rgba(14, 165, 233, 0.1);
}
.text-info {
  color: rgb(14, 165, 233);
}

/* --------------------------------------------------------------------------
   KTUI modal — enter/exit animation.
   KTModal JS toggles the `open` class, then schedules its open/close
   bookkeeping with a setTimeout equal to the computed transition-duration of
   the .kt-modal element itself — so .kt-modal needs a matching duration even
   though no property on it visually transitions; without it the element is
   re-hidden instantly and the exit animation never shows.
   `transform` is used instead of `translate` to avoid clashing with
   .kt-modal-center, which positions via the `translate` property.
   -------------------------------------------------------------------------- */
.kt-modal {
  transition-duration: 350ms;
}
.kt-modal .kt-modal-content {
  opacity: 0;
  transform: translateY(-1.25rem) scale(0.97);
  transition: opacity 300ms ease, transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kt-modal.open .kt-modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .kt-modal .kt-modal-content {
    transition-duration: 1ms;
    transform: none;
  }
}

.my-10 {
  margin-block: 2.5rem;
}

/* --------------------------------------------------------------------------
   Uygulama diyalogları (utils/dialog.js) — SweetAlert2'nin yerini alan, runtime'da
   oluşturulan kt-modal'lar. Genişlik inline style ile verilir: Metronic bundle'ı
   arbitrary utility (max-w-[520px]) üretmiyor. Backdrop'ın kendi geçişi burada.
   -------------------------------------------------------------------------- */
.app-dialog-content {
  width: calc(100% - 2rem);
  margin-block: 2.5rem;
}
/* Geçiş SADECE kendi backdrop'umuza: KTModal kendi backdrop'una `open` sınıfı EKLEMEZ, kural
   .kt-modal-backdrop'a yazılırsa tüm KTUI modallarının perdesi kalıcı şeffaf kalır (blur kaybolur). */
.app-dialog-backdrop {
  opacity: 0;
  transition: opacity 250ms ease;
}
.app-dialog-backdrop.open {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .app-dialog-backdrop {
    transition-duration: 1ms;
  }
}

/* --------------------------------------------------------------------------
   Kaydırma utilities — modal/kart içi uzun listeler (araç atama, izinler,
   bildirimler) kendi içinde kaysın; Metronic bundle'ında bu sınıflar yok.
   -------------------------------------------------------------------------- */
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.overflow-y-auto {
  overflow-y: auto;
}
.pr-1 {
  padding-right: 0.25rem;
}

/* Madde imli liste — diyalog gövdesinde "silinecek veriler" dökümü işaretsiz kalmasın
   (Metronic bundle'ı list-disc üretmiyor). */
.list-disc {
  list-style-type: disc;
}

/* --------------------------------------------------------------------------
   Aranabilir seçici (utils/searchable-select.js) — liste uçları 50 kayıtla sınırlı
   olduğu için arama sunucuda yapılır; bileşen kendi açılır listesini çizer.
   -------------------------------------------------------------------------- */
.ss-root {
  position: relative;
}
.ss-control {
  position: relative;
  display: flex;
  align-items: center;
}
.ss-input {
  width: 100%;
  padding-right: 2rem;
}
.ss-clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.75rem;
}
.ss-clear:hover {
  color: var(--mono);
}
.ss-menu {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.ss-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.ss-item:hover,
.ss-item:focus-visible {
  background: var(--accent);
}
.ss-item-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mono);
}
.ss-item-hint {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.ss-empty {
  padding: 0.75rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   KTUI select — uzun listelerde dropdown iç kaydırma.
   KTUI'nin kt-select-options şablonunda yükseklik sınırı yok; kalabalık
   listeler (araç, sürücü, grup...) dropdown'ı sayfa boyunca açıyordu.
   Sınır ul'de: varsa arama kutusu/tümünü-seç üstte sabit kalır, liste kayar.
   -------------------------------------------------------------------------- */
.kt-select-options {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   Şirket profili kaydet çubuğu — değişiklik yokken animasyonlu iner (is-hidden),
   değişiklik varken katlanabilir (is-collapsed → sağ altta küçük rozet).
   Sarmalayıcı tıklamayı hiç yutmaz (pointer-events none); etkileşim kart ve
   rozette açılır — katlı/gizliyken altındaki sayfa butonları çalışır.
   -------------------------------------------------------------------------- */
.company-savebar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 40px));
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.company-savebar.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
}
.company-savebar-card {
  pointer-events: auto;
  border: 1px solid color-mix(in oklab, var(--color-yellow-500) 45%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.company-savebar.is-hidden .company-savebar-card {
  pointer-events: none;
}
.company-savebar-row {
  padding: 12px 16px;
}
.company-savebar-icon {
  font-size: 1.25rem;
  color: var(--color-yellow-600, #ca8a04);
}
/* Katlı: kart söner, yerini sağ-alttaki rozet alır (tekrar tıklayınca açılır). */
.company-savebar-pill {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-yellow-500, #eab308);
  color: #422006;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.company-savebar.is-collapsed .company-savebar-card {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.company-savebar.is-collapsed:not(.is-hidden) .company-savebar-pill {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .company-savebar,
  .company-savebar-card,
  .company-savebar-pill {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   intl-tel-input — telefon alanı (bayrak + arama kodu dropdown'ı).
   Sarmalayıcı, form satırında diğer kt-input alanları gibi tam genişlik kaplar;
   kt-input border/padding'i input'ta kalır, ülke seçici onun içine yerleşir.
   -------------------------------------------------------------------------- */
.iti {
  display: block;
  width: 100%;
}
.iti__tel-input {
  width: 100%;
}
/* Açılır ülke listesi diğer içerik/modalların üstünde kalsın */
.iti__dropdown-content {
  z-index: 1100;
}

/* --------------------------------------------------------------------------
   Responsive yardimci siniflari — Tailwind JIT yalnizca .html ve .js
   dosyalarini tarar, .ejs sablonlarini taramaz; bu yuzden sablonlarda
   kullanilan ve Metronic bundle icinde bulunmayan siniflar burada elle
   tanimlanir. Kirilma noktalari: sm=40rem, lg=64rem, xl=80rem.
   -------------------------------------------------------------------------- */
.break-all {
  word-break: break-all;
}
.break-words {
  overflow-wrap: break-word;
}
.w-\[calc\(100\%-2rem\)\] {
  width: calc(100% - 2rem);
}
@media (min-width: 40rem) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:w-\[140px\] {
    width: 140px;
  }
}
@media (min-width: 64rem) {
  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }
}
@media (min-width: 80rem) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Sidebar bildirim rozeti (badge) + bildirim drawer paneli.
   Bu siniflar sidebar.ejs sablonunda kullaniliyor ama Metronic'in derlenmis
   styles.css'inde yok (JIT yalnizca demo .html'lerini taradi, .ejs'leri degil).
   Olmadiginda: rozet kirmizi zeminini alamaz -> beyaz "2" gorunmez; drawer
   genislik alamaz -> panel kapanik/ekran disinda kalir, yalnizca backdrop gorunur.
   (max-w-[90%] zaten .kt-drawer-end kuralinda tanimli, tekrarlamaya gerek yok.)
   -------------------------------------------------------------------------- */
.bg-red-500 {
  background-color: rgb(239 68 68);
}
.min-w-\[16px\] {
  min-width: 16px;
}
.text-\[10px\] {
  font-size: 10px;
}
.w-\[450px\] {
  width: 450px;
}

/* --------------------------------------------------------------------------
   Sidebar marka logosu (sidebar-brand.js + şirket profili önizlemesi).
   Boyut object-fit:contain ile sınırlanır (kırpma yok → görselin kendi
   boşluğu da görünür); logo+ad modunda kompakt kalır, sadece-logo modunda
   (--solo) barın tamamını aldığından büyür. VARSAYILAN siyah ikon (--default)
   karanlık temada görünmez olduğundan ters çevrilir (dark sınıfı: theme-script.ejs).
   -------------------------------------------------------------------------- */
.sidebar-brand-logo {
  height: 42px;
  width: auto;
  /* logo+ad modu: kırpılmış geniş logo ismi kapatmasın diye dar tavan (ad'a yer kalır). */
  max-width: 100px;
  object-fit: contain;
  /* Daralma/genişleme ile boyut senkron animasyonlu değişsin (aksi halde class anında büyük boyuta sıçrar). */
  transition: height 0.3s ease-in-out, max-width 0.3s ease-in-out;
}
.sidebar-brand-logo--solo {
  /* sadece-logo modu: bar tamamen logonundur → belirgin biçimde büyür. */
  height: 52px;
  max-width: 200px;
}
.dark .sidebar-brand-logo--default {
  filter: invert(1);
}

/* --------------------------------------------------------------------------
   Bilgi/rehber akordiyonu (details/summary kt-card): varsayılan marker gizlenir,
   sağdaki ok açıkken 180° döner, kapalıyken başlığın alt çizgisi kaldırılır.
   -------------------------------------------------------------------------- */
details.guide-accordion > summary {
  list-style: none;
  user-select: none;
  /* Hover arkaplanı kartın yuvarlak köşelerinden taşmasın */
  border-radius: inherit;
}
details.guide-accordion > summary::-webkit-details-marker {
  display: none;
}
details.guide-accordion:not([open]) > summary {
  border-bottom-width: 0;
}
details.guide-accordion[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
details.guide-accordion > summary:hover {
  background-color: var(--muted);
}
.guide-accordion-chevron {
  transition: transform 0.2s ease;
}
details.guide-accordion[open] > summary .guide-accordion-chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Harita (MapLibre GL) — içerik alanını tamamen dolduran tam-sayfa harita.
   `#page-content > main` flex sütun olduğundan harita flex ile büyür.
   -------------------------------------------------------------------------- */
.map-fullpage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 28rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Harita sayfası istisnası: kaydırma kabının dikey boşluklarını (#scrollable_content pt-5 pb-5)
   kaldır ki harita içerik kartını tam doldursun. `map-page` sınıfı sayfa modülünce <body>'ye
   eklenir, çıkışta kalkar. */
body.map-page #scrollable_content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Google Maps tarzı katman değiştirici: sağ üstte özel buton + açılır kart paneli.
   `maplibregl-ctrl-group` KULLANILMAZ — grup kutusu paneli kırpıp isimlerin taşmasına yol açıyordu.
   Kartlar içerik genişliğinde (isim tek satır), thumbnail ismin üstünde ortalanır. */
.map-layers-ctrl {
  position: relative;
}
.map-layers-btn {
  display: block;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2712 2 2 7 12 12 22 7 12 2%27/%3E%3Cpolyline points=%272 17 12 22 22 17%27/%3E%3Cpolyline points=%272 12 12 17 22 12%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
/* MapLibre'nin `.maplibregl-ctrl button:not(:disabled):hover` kuralı (rgba(0,0,0,.05), özgüllük
   0,3,1) sade `.map-layers-btn:hover` kuralımızı eziyor; grup arkaplanı OLMAYAN tek başına
   butonlarda bu yarı-saydam dolgu butonu saydam gösteriyordu. Aynı kalıpta daha özgül (0,4,1) bir
   seçiciyle, opak #f2f2f2 ile eziyoruz — zoom butonlarının hover görünümüyle birebir aynı. */
.maplibregl-ctrl button.map-layers-btn:not(:disabled):hover {
  background-color: #f2f2f2;
}
.map-layers-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  /* Dikey: üstte taban kartları sırası, altında animasyonlu açılan aç/kapa bölümü (trafik, 3B arazi). */
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 80vw;
}
.map-layers-cards {
  /* Yatay sıra. Kart genişlikleri JS ile en geniş karta EŞİTLENİR (bkz. _equalizeCards): grid 1fr,
     içerik-boyutlu panelde kolonları her zaman eşitlemediğinden ("Uydu (Google)" daha geniş kalıyordu)
     tek tip boyutu kesinleştiren çözüm budur. */
  display: flex;
  gap: 6px;
}
.map-layer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  /* JS ile yazılan sabit genişlik taban ve aç/kapa kartlarında birebir eşleşsin (padding+border dahil). */
  box-sizing: border-box;
}
.map-layer-card.active {
  border-color: #1a73e8;
}
/* Mini harita karosu (bkz. map-controls.js THUMB_SVGS): kare, `cover` ile kırpılır; saç teli
   çerçeve karoyu hem beyaz panelde hem koyu camda zeminden ayırır. */
.map-layer-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  background: #e5e7eb;
  box-shadow:
    0 0 0 1px rgba(60, 64, 67, 0.16),
    0 1px 2px rgba(60, 64, 67, 0.14);
}
/* Kapalı aç/kapa kartı (trafik, 3B arazi): karo grileşir — açık/kapalı durum karodan da okunur. */
.map-toggle-card:not(.active) .map-layer-thumb {
  filter: grayscale(1);
  opacity: 0.6;
}
.map-layer-label {
  font-size: 11px;
  font-weight: 500;
  color: #3c4043;
  text-align: center;
  /* Tek satır — sarmasın */
  white-space: nowrap;
}

/* Görünüm açısı (pusula) sıfırlama butonu — katman butonuyla aynı görsel dil (29px kare, beyaz).
   İçteki iğne haritanın anlık dönüşünü yansıtır; tıklanınca easeTo ile kuzeye/düz açıya döner. */
.map-reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
/* Katman butonuyla aynı gerekçe: MapLibre'nin hover kuralını ezerek zoom davranışına eşitle. */
.maplibregl-ctrl button.map-reset-btn:not(:disabled):hover {
  background-color: #f2f2f2;
}
.map-reset-icon {
  width: 18px;
  height: 18px;
  /* Pusula iğnesi: kuzey yarısı kırmızı, güney yarısı gri (dönüş görsel olarak okunsun). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 4 L9 12 L15 12 Z%27 fill=%27%23e8543b%27/%3E%3Cpath d=%27M12 20 L9 12 L15 12 Z%27 fill=%27%239aa0a6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* MapLibre tam ekran ikonu — varsayılan dolgu ikonu çok kalın; ince stroke ikonla değiştir
   (katman/zoom ile aynı çizgi kalınlığı). Tam ekrandayken "küçült" (shrink) varyantı. */
.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3H5a2 2 0 0 0-2 2v3%27/%3E%3Cpath d=%27M21 8V5a2 2 0 0 0-2-2h-3%27/%3E%3Cpath d=%27M3 16v3a2 2 0 0 0 2 2h3%27/%3E%3Cpath d=%27M16 21h3a2 2 0 0 0 2-2v-3%27/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23333%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3v3a2 2 0 0 1-2 2H3%27/%3E%3Cpath d=%27M21 8h-3a2 2 0 0 1-2-2V3%27/%3E%3Cpath d=%27M3 16h3a2 2 0 0 1 2 2v3%27/%3E%3Cpath d=%27M16 21v-3a2 2 0 0 1 2-2h3%27/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

/* --------------------------------------------------------------------------
   Harita kontrolleri — hızlı erişim çubuğuyla (.map-geotools) aynı buzlu cam dili.
   Kapsam bilinçli olarak `.map-fullpage`: mini haritalar (DMS modalı, araç detayı, montaj)
   beyaz kalır. Koyu cam üstünde okunsun diye tüm kontrol ikonları açık renge çevrilir.
   -------------------------------------------------------------------------- */
.map-fullpage .maplibregl-ctrl-group,
.map-fullpage .map-layers-btn,
.map-fullpage .map-reset-btn {
  border-radius: 10px;
  background-color: rgba(17, 24, 39, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.map-fullpage .maplibregl-ctrl-group:not(:empty),
.map-fullpage .map-layers-btn,
.map-fullpage .map-reset-btn {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 30px rgba(15, 23, 42, 0.3);
}
.map-fullpage .maplibregl-ctrl-group button + button {
  border-top-color: rgba(255, 255, 255, 0.14);
}
/* Üzerine gelince cam aydınlanır (çubuk butonlarıyla aynı geçiş).
   MapLibre'nin kendi hover kuralı (rgba(0,0,0,.05)) camı karartıyordu. */
.map-fullpage .maplibregl-ctrl button:not(:disabled):hover,
.map-fullpage .maplibregl-ctrl button.map-layers-btn:not(:disabled):hover,
.map-fullpage .maplibregl-ctrl button.map-reset-btn:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.16);
}
.map-fullpage .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2729%27 height=%2729%27 fill=%27%23f8fafc%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5%27/%3E%3C/svg%3E");
}
.map-fullpage .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2729%27 height=%2729%27 fill=%27%23f8fafc%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z%27/%3E%3C/svg%3E");
}
.map-fullpage .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23f8fafc%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3H5a2 2 0 0 0-2 2v3%27/%3E%3Cpath d=%27M21 8V5a2 2 0 0 0-2-2h-3%27/%3E%3Cpath d=%27M3 16v3a2 2 0 0 0 2 2h3%27/%3E%3Cpath d=%27M16 21h3a2 2 0 0 0 2-2v-3%27/%3E%3C/svg%3E") !important;
}
.map-fullpage .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23f8fafc%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3v3a2 2 0 0 1-2 2H3%27/%3E%3Cpath d=%27M21 8h-3a2 2 0 0 1-2-2V3%27/%3E%3Cpath d=%27M3 16h3a2 2 0 0 1 2 2v3%27/%3E%3Cpath d=%27M16 21v-3a2 2 0 0 1 2-2h3%27/%3E%3C/svg%3E") !important;
}
.map-fullpage .map-layers-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23f8fafc%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolygon points=%2712 2 2 7 12 12 22 7 12 2%27/%3E%3Cpolyline points=%272 17 12 22 22 17%27/%3E%3Cpolyline points=%272 12 12 17 22 12%27/%3E%3C/svg%3E");
}
/* Pusulanın güney yarısı koyu camda kayboluyordu → açık griye alındı (kuzey kırmızısı korunur). */
.map-fullpage .map-reset-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 4 L9 12 L15 12 Z%27 fill=%27%23f87171%27/%3E%3Cpath d=%27M12 20 L9 12 L15 12 Z%27 fill=%27%23cbd5e1%27/%3E%3C/svg%3E");
}

/* Katman paneli ve kartları da aynı cam. */
.map-fullpage .map-layers-panel {
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 36px rgba(15, 23, 42, 0.4);
}
.map-fullpage .map-layer-card {
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.map-fullpage .map-layer-card:hover {
  background: rgba(255, 255, 255, 0.12);
}
.map-fullpage .map-layer-card.active {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.18);
}
/* Koyu camda karonun çerçevesi açık renge döner (koyu saç teli camda kayboluyordu).
   `filter` DEĞİL box-shadow: kapalı toggle karosunun grayscale filtresiyle çakışmasın. */
.map-fullpage .map-layer-thumb {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.45);
}
.map-fullpage .map-layer-label {
  color: rgba(255, 255, 255, 0.86);
}
.map-fullpage .map-toggle-inner {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Kaynak/telif alanı (sağ alt "i") — aynı cam, açık metin. */
.map-fullpage .maplibregl-ctrl.maplibregl-ctrl-attrib,
.map-fullpage .maplibregl-ctrl-attrib.maplibregl-compact {
  background-color: rgba(17, 24, 39, 0.52);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}
.map-fullpage .maplibregl-ctrl-attrib a {
  color: rgba(255, 255, 255, 0.86);
}
.map-fullpage .maplibregl-ctrl-attrib-button {
  background-color: rgba(255, 255, 255, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill=%27%23f8fafc%27 fill-rule=%27evenodd%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E");
  transition: background-color 0.22s ease;
}
.map-fullpage .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  background-color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   Canlı izleme — araç marker'ları, cluster rozetleri, yan panel ve tenant rozeti.
   Marker'lar HTML tabanlıdır (raster-only style'da glyph kaynağı yok, sembol
   katmanı kullanılamaz); cluster sayıları bu yüzden DOM elemanı olarak çizilir.
   -------------------------------------------------------------------------- */
.map-cluster-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #1a73e8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.25);
  cursor: pointer;
  user-select: none;
}
.map-cluster-marker.lg {
  width: 52px;
  height: 52px;
  font-size: 15px;
}

.map-vehicle-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.map-vehicle-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #16a34a; /* kontak açık: yeşil */
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  border: 2px solid #fff;
}
.map-vehicle-dot svg {
  width: 18px;
  height: 18px;
}
/* Tipe göre araç görseli: durum-renkli dairenin içinde beyaz yuvarlak disk (görsel okunur, durum rengi halka olarak kalır). */
.map-vehicle-dot img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border-radius: 9999px;
  padding: 2px;
}
.map-vehicle-marker.off .map-vehicle-dot {
  background: #6b7280; /* kontak kapalı: gri */
}
.map-vehicle-marker.stale .map-vehicle-dot {
  background: #374151; /* çevrimdışı (uzun süredir veri yok): koyu füme — pasif griden ayrışır */
}
.map-vehicle-marker.idle .map-vehicle-dot {
  background: #f59e0b; /* rölanti (durgun ama motor açık): sarı — sol paneldeki .map-live-dot.idle ile aynı */
}
.map-vehicle-marker.sos .map-vehicle-dot {
  background: #dc2626; /* aktif SOS: kırmızı + nabız halkası */
  animation: map-sos-pulse 1.6s ease-out infinite;
}
@keyframes map-sos-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(220, 38, 38, 0);
  }
}
/* Anlık hız ihlali: durum rengi (yeşil/gri) korunur; turuncu halka + nabızla vurgulanır (öncelik SOS'un altında). */
.map-vehicle-marker.speeding .map-vehicle-dot {
  border-color: #f97316;
  animation: map-speed-pulse 1.6s ease-out infinite;
}
/* Motor limiti ihlali: hız ile aynı dil, camgöbeği halka (öncelik SOS ve hızın altında — üçü aynı anda yanmaz). */
.map-vehicle-marker.engine-warn .map-vehicle-dot {
  border-color: #0891b2;
  animation: map-engine-pulse 1.6s ease-out infinite;
}
@keyframes map-engine-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.55);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(8, 145, 178, 0);
  }
}
@keyframes map-speed-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
  }
}
.map-vehicle-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Giriş sonrası "son giriş / hatalı deneme" bildirimi: sağ-üstte sabit kart. Sayfa akışına girmez ki SPA
   gezintisinde içerik değişse de kaybolmasın; genişlik sınırı uzun IP+tarih satırlarının taşmasını önler. */
#last-login-notice {
  position: fixed;
  top: 5rem;
  right: 1.5rem;
  z-index: 60;
  width: min(24rem, calc(100vw - 3rem));
  animation: last-login-notice-in 0.22s ease-out;
}

@keyframes last-login-notice-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}

/* Adına-işlem (operate-as) global göstergesi: sağ-altta dinlenmede küçük saydam rozet; mouse gelince (veya klavye
   focus'unda) büyük opak karta animasyonla açılır, ayrılınca kapanır. Kart, rozetin sağ-alt köşesini kapsayan
   absolute bir katman (mouse hep kartın üstünde kalır → flicker yok). Blur → hem açık hem koyu temada okunur. */
#operate-as-indicator {
  position: fixed;
  right: 2rem;
  bottom: 2.75rem;
  z-index: 60;
  pointer-events: none; /* çocuklar kendi pointer-events'ini açar; boş alan tıklamayı yutmaz */
}
#operate-as-indicator > * {
  pointer-events: auto;
}

/* Dinlenme durumu: küçük, saydam rozet — container'ın hover/box hedefini bu belirler. */
.operate-as-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 30, 34, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
  color: #f6b100;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.operate-as-pill-text {
  color: #f4f4f5;
}
/* Açılınca rozet solar, yerini kart alır (kart altında kalsa da sızmasın). */
#operate-as-indicator:hover .operate-as-pill,
#operate-as-indicator:focus-within .operate-as-pill {
  opacity: 0;
}

/* Açık durum: rozetin sağ-alt köşesinden büyüyen opak kart; yalnız hover/focus'ta görünür ve etkileşimli. */
.operate-as-card {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: min(88vw, 21rem);
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border-left: 3px solid #f6b100;
  background: rgba(28, 30, 34, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  color: #f4f4f5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
#operate-as-indicator:hover .operate-as-card,
#operate-as-indicator:focus-within .operate-as-card {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.operate-as-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(246, 177, 0, 0.18);
  color: #f6b100;
  font-size: 0.95rem;
}
.operate-as-body {
  flex: 1 1 auto;
  min-width: 0;
}
.operate-as-text {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.operate-as-change {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #f6b100;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.operate-as-change:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Üç panelli düzen: sol (araç listesi) + sağ (canlı DMS) haritaya bindirilmiş
   tam yükseklik paneller, alt (araç detayı) ikisinin arasına yayılan yatay panel.
   Daraltma kenar tutamacıyla; panel transform ile kayar, tutamaç kenarda kalır.
   -------------------------------------------------------------------------- */
.map-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 30; /* harita kontrollerinin üstünde, olay modalının (60) altında */
  width: 320px;
  max-width: 86%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.map-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}
.map-panel-left {
  left: 0;
}
.map-panel-left .map-panel-body {
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
}
.map-panel-left.collapsed {
  transform: translateX(-100%);
}
.map-panel-right {
  right: 0;
  width: 340px;
}
.map-panel-right .map-panel-body {
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
}
.map-panel-right.collapsed {
  transform: translateX(100%);
}
/* Kenar tutamacı panelin DIŞINA taşar; panel kapalıyken ekran kenarında görünür kalır. */
.map-panel-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 56px;
  border: 0;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.map-panel-handle:hover {
  background: #f3f4f6;
}
.map-panel-left .map-panel-handle {
  left: 100%;
  border-radius: 0 8px 8px 0;
}
.map-panel-right .map-panel-handle {
  right: 100%;
  border-radius: 8px 0 0 8px;
}

/* Paneller açıkken MapLibre kontrolleri ve tenant rozeti panellerin önünden kayar.
   NOT: yalnız ANA haritanın kendi kontrol konteynerini hedefle (> child); modal içindeki mini harita da
   #map.map-fullpage'in torunu olduğundan descendant seçici onun kontrollerini de sola itiyordu. */
.map-fullpage > .maplibregl-control-container > .maplibregl-ctrl-top-left {
  left: 332px;
  transition: left 0.3s ease;
}
.map-fullpage.map-lp-closed > .maplibregl-control-container > .maplibregl-ctrl-top-left {
  left: 24px;
}
.map-fullpage > .maplibregl-control-container > .maplibregl-ctrl-top-right {
  right: 352px;
  transition: right 0.3s ease;
}
.map-fullpage.map-rp-closed > .maplibregl-control-container > .maplibregl-ctrl-top-right {
  right: 24px;
}

/* Durum noktası: aktif yeşil, rölanti sarı, pasif gri, çevrimdışı koyu. */
.map-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.map-live-dot.active {
  background: #16a34a;
}
.map-live-dot.idle {
  background: #f59e0b;
}
.map-live-dot.passive {
  background: #9ca3af;
}
.map-live-dot.offline {
  background: #374151;
}
.map-live-empty {
  padding: 32px 8px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

/* --- Sol panel: sekmeler + araç arama/filtre + liste --- */
.map-left-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}
.map-left-tabs button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}
.map-left-tabs button.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
}
.map-left-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 6px;
}
.map-left-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #9ca3af;
}
.map-left-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: #111827;
}
.map-left-tool {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
}
.map-left-tool:hover {
  background: #f3f4f6;
}
.map-left-tool.active {
  border-color: #dc2626;
  background: #fef2f2;
  color: #dc2626;
}
/* Dişli çark: veri kesinti uyarısında araç varken kırmızıya döner (rozet sayıyı gösterir) */
.map-left-tool.warned {
  border-color: #fecaca;
  color: #dc2626;
}
.map-left-tool.spinning i {
  display: inline-block;
  animation: map-spin 0.8s linear infinite;
}
@keyframes map-spin {
  to {
    transform: rotate(360deg);
  }
}
.map-left-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
/* Durum sekmeleri: üstteki Araçlar/Bölgeler sekmelerinin dar ikizi (tekli seçim, alt çizgi vurgusu).
   Aktif sekmenin vurgu rengi durumun kendi rengidir (.map-live-dot ile aynı palet). */
.map-left-stabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}
.map-left-stabs[hidden] {
  display: none;
}
/* İki katlı sekme (sayı etiketin ALTINDA): 5 sekme 320px panele tek satır sığmıyordu —
   yan yana etiket+sayı yerine dikey istif her sekmeyi yalnız etiketi kadar genişletir. */
.map-left-stab {
  --stab-accent: #1a73e8;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 1px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
/* Durum sınıfları s- önekli: 'active' durumu seçili-sekme sınıfı .active ile çakışmasın. */
.map-left-stab.s-active { --stab-accent: #16a34a; }
.map-left-stab.s-idle { --stab-accent: #d97706; }
.map-left-stab.s-passive { --stab-accent: #6b7280; }
.map-left-stab.s-offline { --stab-accent: #374151; }
.map-left-stab.active {
  border-bottom-color: var(--stab-accent);
  color: var(--stab-accent);
}
.map-left-stab-count {
  min-width: 15px;
  padding: 0 3px;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 9.5px;
  line-height: 14px;
  text-align: center;
}
.map-left-stab.active .map-left-stab-count {
  background: color-mix(in srgb, var(--stab-accent) 14%, #fff);
  color: var(--stab-accent);
}
.map-left-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sol panel araç grupları (accordion; varsayılan açık). */
.map-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.map-group-head:hover {
  background: #e5e7eb;
}
.map-group-caret {
  font-size: 10px;
  transition: transform 0.15s ease;
}
.map-group-caret.collapsed {
  transform: rotate(-90deg);
}
.map-group-name {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-group-count {
  flex-shrink: 0;
  font-weight: 500;
  opacity: 0.65;
}
/* Grup gözü: grubun araçlarını haritadan gizler. Kapalıyken kırmızı — "bu grup haritada yok" tek bakışta okunur. */
.map-group-eye {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}
.map-group-eye:hover {
  background: rgba(148, 163, 184, 0.24);
  color: #475569;
}
.map-group-eye.off,
.map-group-eye.off:hover {
  color: #dc2626;
}
/* Haritadan gizli grubun satırları solgun kalır: liste tam kalır ama "haritada görünmüyor" belli olur. */
.map-group.hidden-on-map .map-vrow {
  opacity: 0.55;
}
.map-group-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-group-body.hidden {
  display: none;
}

/* Araç satırı: durum noktası + araç ikonu + iki bilgi satırı + sağda durum ikonları.
   Yükseklik bilinçli olarak sıkı: iki metin satırı kendi line-height'larıyla kısıtlanır, dikey padding
   yatay padding'den küçüktür — uzun filo listesinde ekranda daha çok araç görünsün. */
.map-vrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.map-vrow:hover {
  background: #f9fafb;
}
.map-vrow.alarm {
  background: #fef2f2;
  border-color: #fecaca;
}
.map-vrow.alarm:hover {
  background: #fee2e2;
}
/* Veri kesinti uyarısı: eşikten uzun süredir veri göndermeyen araç satırı (SOS 'alarm' ile aynı dil) */
.map-vrow.warned {
  background: #fef2f2;
  border-color: #fecaca;
}
.map-vrow.warned:hover {
  background: #fee2e2;
}
.map-vrow-warned-ico {
  color: #dc2626;
}
.map-vrow-thumb {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #4b5563;
}
.map-vrow-thumb svg {
  width: 18px;
  height: 18px;
}
.map-vrow-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
/* Araç liste tablosu: tipe göre statik görsel (yoksa jenerik ikon) küçük thumbnail. */
.vtype-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.vtype-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vtype-thumb i {
  font-size: 18px;
}
.map-vrow-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.map-vrow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: #111827;
}
.map-vrow-alarm-ico {
  color: #dc2626;
  font-size: 13px;
}
.map-vrow-sub {
  font-size: 10.5px;
  line-height: 1.3;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-vrow-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 14px;
}
.map-vrow-icons .ki-wifi.on {
  color: #16a34a;
}
.map-vrow-icons .ki-wifi.off {
  color: #d1d5db;
}
.map-vrow-ico {
  display: inline-flex;
  align-items: center;
}
.map-vrow-ico svg {
  width: 14px;
  height: 14px;
}
.map-vrow-ico.engine.on {
  color: #16a34a;
}
.map-vrow-ico.engine.unknown {
  color: #d1d5db;
}
/* Yakıt ikonu: tenant eşiğine göre eşik altında kırmızı, eşit/üstünde yeşil; veri yoksa nötr (SOS/motor ile aynı palet) */
.map-vrow-ico.fuel.green {
  color: #16a34a;
}
.map-vrow-ico.fuel.red {
  color: #dc2626;
}
.map-vrow-ico.fuel.neutral {
  color: #d1d5db;
}
/* Hız ihlali ikonu: yalnız araç eşik-üstündeyken çizilir → daima turuncu (uyarı bayrağı) */
.map-vrow-ico.speed.speeding {
  color: #f97316;
}
/* Anlık hız ihlali satırı: turuncu vurgu (SOS 'alarm'/veri-kesinti 'warned' ile aynı dil, farklı renk) */
.map-vrow.speeding {
  background: #fff7ed;
  border-color: #fed7aa;
}
.map-vrow.speeding:hover {
  background: #ffedd5;
}
/* Motor limiti ikonu: yalnız yakın geçmişte kapanan epizot varken çizilir → daima camgöbeği (uyarı bayrağı) */
.map-vrow-enginewarn-ico {
  color: #0891b2;
}
/* Motor limiti satırı: hız vurgusunun camgöbeği ikizi (ikisi çakışırsa hız kazanır, satır tek renk anlatır) */
.map-vrow.engine-warn {
  background: #ecfeff;
  border-color: #a5f3fc;
}
.map-vrow.engine-warn:hover {
  background: #cffafe;
}
/* --- Sağ panel: canlı DMS akışı --- */
.map-dms-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.map-dms-head i {
  color: #f59e0b;
}
.map-dms-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-dms-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: transform 320ms ease-out, opacity 320ms ease-out;
}
.map-dms-row:hover {
  background: #f9fafb;
}
.map-dms-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.map-dms-row-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.map-dms-row-time {
  font-size: 10.5px;
  color: #6b7280;
}
.map-dms-row-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.map-dms-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.map-dms-row-speed {
  font-size: 10.5px;
  color: #6b7280;
}
/* Akışta SOS satırı: turuncu DMS vurgusundan acil kırmızıya ayrışır. */
.map-dms-row-sos {
  border-left-color: #e11d2e;
}
.map-dms-chip-sos {
  background: #fee2e2;
  color: #b91c1c;
}
/* Hız ihlali geçmişi chip'i: tepe hız → turuncu (canlı toast/ikonla aynı palet). */
.map-dms-chip.speed {
  background: #ffedd5;
  color: #c2410c;
}

/* Canlı akış animasyonları: yeni kart yukarıdan girer (card-enter), mevcutlar FLIP ile kayar, yeni kart kısa süre vurgulanır (card-highlight). */
.map-dms-row.card-enter {
  opacity: 0;
  transform: translateY(-16px);
}
.map-dms-row.card-highlight {
  animation: dmsCardFlash 1200ms ease-out;
}
.map-dms-row-sos.card-highlight {
  animation: dmsCardFlashSos 1200ms ease-out;
}
@keyframes dmsCardFlash {
  0% { background-color: #fde68a; }
  60% { background-color: #fef3c7; }
  100% { background-color: #fff; }
}
@keyframes dmsCardFlashSos {
  0% { background-color: #fecaca; }
  60% { background-color: #fee2e2; }
  100% { background-color: #fff; }
}
/* Erişilebilirlik: hareket azaltma tercihinde animasyonlar kapanır. */
@media (prefers-reduced-motion: reduce) {
  .map-dms-row {
    transition: none;
  }
  .map-dms-row.card-enter {
    opacity: 1;
    transform: none;
  }
  .map-dms-row.card-highlight,
  .map-dms-row-sos.card-highlight {
    animation: none;
  }
}

/* --- Canlı SOS uyarısı toast'ı (sağ üst): tüm bildirim tiplerinin üstünde stack'lenir, onaylanmadıkça kaybolmaz --- */
.map-sos-stack {
  position: absolute;
  top: 12px;
  /* MapLibre kontrol sütununun (right:352) hemen soluna; DMS paneli/butonları engellemez. */
  right: 400px;
  z-index: 1200; /* DMS modal (60) ve diğer tüm bildirimlerin üstünde */
  width: 250px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  transition: right 0.3s ease; /* panel açılıp kapanınca kontrollerle birlikte kayar */
}
/* DMS paneli kapalıyken kontroller kenara gelir, toast da onlara yaklaşır. */
.map-fullpage.map-rp-closed .map-sos-stack {
  right: 72px;
}
/* Dar ekranlarda panelin soluna sığmaz: kontrollerin altına, sağ kenara sabitlenir. */
@media (max-width: 1100px) {
  .map-sos-stack,
  .map-fullpage.map-rp-closed .map-sos-stack {
    top: 210px;
    right: 12px;
    width: min(250px, calc(100vw - 24px));
  }
}
/* Harita dışı (global) SOS toast'ı: haritaya bağlı right:400px yerine ekrana sabit sağ-üst (üst navbar'ın altı).
   İki sınıflı seçici (0,2,0) taban ve dar-ekran medya kurallarını (0,1,0) ezer. */
.map-sos-stack.map-sos-global {
  position: fixed;
  top: 76px;
  right: 16px;
  left: auto;
}
@media (max-width: 1100px) {
  .map-sos-stack.map-sos-global {
    top: 70px;
    right: 12px;
  }
}
.map-sos-stack > * {
  pointer-events: auto;
}
.map-sos-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #e11d2e; /* hız ihlali turuncusundan net ayrışan acil kırmızı */
  color: #fff;
  box-shadow: 0 8px 20px rgba(225, 29, 46, 0.32), 0 3px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
}
.map-sos-banner-icon {
  font-size: 17px;
  animation: map-sos-blink 1s ease-in-out infinite;
}
.map-sos-banner-text {
  flex: 1 1 auto;
  font-size: 13px;
}
.map-sos-banner-mute,
.map-sos-banner-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.map-sos-banner-mute:hover,
.map-sos-banner-close:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* Sessize alınmışken hoparlör ikonunun üstüne çapraz çizgi + soluk görünüm. */
.map-sos-banner-mute {
  position: relative;
}
.map-sos-banner-mute.muted {
  opacity: 0.7;
}
.map-sos-banner-mute.muted::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 18px;
  background: #fff;
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 1px #e11d2e;
}
@keyframes map-sos-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.15); }
}
/* Autoplay engeli: ses çalamıyorsa (gesture yok) görsel uyarıyı belirginleştir — banner nabız gibi atsın, ikon hızlı yanıp sönsün. */
.map-sos-stack.sos-audio-blocked .map-sos-banner {
  animation: map-sos-alert-pulse 0.9s ease-in-out infinite;
}
.map-sos-stack.sos-audio-blocked .map-sos-banner-icon {
  animation-duration: 0.5s;
}
@keyframes map-sos-alert-pulse {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(225, 29, 46, 0.32), 0 0 0 0 rgba(225, 29, 46, 0.55);
  }
  50% {
    box-shadow: 0 8px 20px rgba(225, 29, 46, 0.32), 0 0 0 10px rgba(225, 29, 46, 0);
  }
}
.map-sos-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-sos-stack.collapsed .map-sos-cards {
  display: none;
}
.map-sos-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #fecaca;
  border-left: 4px solid #e11d2e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.map-sos-card-main {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.map-sos-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: #fee2e2;
  color: #e11d2e;
  font-size: 16px;
}
.map-sos-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-sos-card-plate {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
}
.map-sos-card-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #b91c1c;
  word-break: break-word;
}
.map-sos-card-time {
  font-size: 10.5px;
  color: #9ca3af;
}
.map-sos-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map-sos-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.map-sos-btn i {
  font-size: 13px;
}
.map-sos-btn-goto {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.map-sos-btn-goto:hover {
  background: #e5e7eb;
}
.map-sos-btn-ack {
  background: #e11d2e;
  color: #fff;
  border: 1px solid #e11d2e;
}
.map-sos-btn-ack:hover {
  background: #c81328;
}
.map-sos-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- İhlal bildirim merkezi: çubuğun kalıcı parçalarında TÜR BAŞINA bir buton (hız / motor limiti).
   Eski hâl sağ üstte tür başına ayrı beyaz sütundu (400/664px); sütunlar SOS'unkiyle çakışıyor ve çubuğun
   camıyla ilgisiz duruyordu. Artık her şey çubuğa bağlı:
     • buton: o türün okunmamış sayısını nabız atan rozetle taşır (arama butonuyla aynı cam dil),
     • liste: hover'da butonun ayak izinden SAĞA+AŞAĞI büyür (hava durumu kartının ikizi),
     • anlık şerit: yeni ihlalde çubuğun sağ kenarından açılır, ~3 sn sonra geri çubuğa kapanır.
   Butonlar SOL grupta: kutu sağa doğru büyüdüğü için çubuğun sağ ucunda sağ panelin altına girerdi.
   Tür rengi tek değişken üçlüsünden akar (--a-color/--a-soft/--a-badge) → yeni tür üç satırla eklenir. --- */
.map-geotools-alerts {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* Rozetler komşu butonun köşesine binmesin diye butonlar arası boşluk çubuğun 2px'inden geniş. */
  gap: 7px;
}
.map-alerts-chan {
  position: relative;
  display: flex;
  align-items: center;
}
.map-alert-speed {
  --a-color: #fb923c;
  --a-soft: rgba(249, 115, 22, 0.28);
  --a-badge: #f97316;
}
.map-alert-engine {
  --a-color: #22d3ee;
  --a-soft: rgba(6, 182, 212, 0.28);
  --a-badge: #0891b2;
}
/* Bölge olayları: harita katmanının moruyla aynı aile (bölge dolgusu/etiketi #7c3aed). */
.map-alert-geofence {
  --a-color: #a78bfa;
  --a-soft: rgba(139, 92, 246, 0.28);
  --a-badge: #7c3aed;
}
/* Damper kurtarma: gül tonu. Kırmızıya yakın çünkü cihazın devrilmeyi önlediği an, ama SOS acil kırmızısından
   (#e11d2e) ayrık kalır — ikisi karışırsa "acil durum butonuna basıldı" ile "kasa kalkmadı" aynı görünürdü. */
.map-alert-damper {
  --a-color: #fb7185;
  --a-soft: rgba(244, 63, 94, 0.28);
  --a-badge: #e11d48;
}

/* Rozet butonun köşesinden DIŞARI taşar: .map-geotool'un overflow:hidden'ı (aynı özgüllükte ve sonra
   geldiği için) rozeti yutuyordu → daha özgül seçiciyle açılır. */
.map-geotool.map-alerts-btn {
  overflow: visible;
}
.map-alerts-btn i {
  font-size: 15px;
  line-height: 1;
}
.map-alerts-btn.unread {
  color: #fff;
}
.map-alerts-btn.open {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* Okunmamış sayısı: türün renginde, nabız atan rozet (liste açılınca gizlenir → nabız da biter).
   z-index çubuğun kendi katmanlarının ve komşu butonun üstünde tutar. */
.map-alerts-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--a-badge, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  animation: map-alerts-badge-pulse 1.6s ease-in-out infinite;
}
.map-alerts-badge[hidden] {
  display: none;
}
/* Halka rozetten dışa yayılıp söner; koyu çember rozeti camdan ayırır (her adımda tekrarlanmalı —
   box-shadow ancak katman SAYISI sabitken yumuşak geçer). */
@keyframes map-alerts-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.55), 0 0 0 0 var(--a-badge, #f97316);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.55), 0 0 0 9px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-alerts-badge {
    animation: none;
  }
}

/* Liste kutusu: butonun ayak izinden ölçülen boya doğru büyür (hava durumu kartıyla aynı reçete —
   kırpma kutunun üstünde, içerik SABİT genişlikte, ölçü JS'ten). */
.map-alerts-card {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 40px rgba(15, 23, 42, 0.45);
  transition:
    width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: width, height;
}
.map-alerts-card[hidden] {
  display: none;
}
.map-alerts-inner {
  width: min(320px, 82vw);
}
/* Başlık ve liste sırayla belirir: kutunun "açıldığı" fark edilsin. */
.map-alerts-inner > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.map-alerts-chan.open .map-alerts-inner > * {
  opacity: 1;
  transform: none;
}
.map-alerts-chan.open .map-alerts-inner > :nth-child(1) { transition-delay: 0.06s; }
.map-alerts-chan.open .map-alerts-inner > :nth-child(2) { transition-delay: 0.1s; }
.map-alerts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 11px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
/* Temizle: o türün oturum listesini elle boşaltır (yaş sınırı budamasının kısayolu). */
.map-alerts-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.map-alerts-clear:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.map-alerts-clear i {
  font-size: 12px;
}
.map-alerts-list {
  max-height: min(320px, 46vh);
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.map-alerts-list::-webkit-scrollbar {
  width: 8px;
}
.map-alerts-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.28);
}
.map-alerts-empty {
  padding: 24px 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  text-align: center;
}

/* Anlık şerit çubuğun sağ kenarından açılır. Yuva çubuğun DIŞINDA (container'da): çubuğun z-index'i (29)
   yan panellerin (30) altında kaldığından şerit içeride kalsa açık panelin altına giriyordu — burada
   panellerin üstünde durur, ama SOS (1200) ve modalların (60) altında kalır.
   Konum JS'ten ölçülür (bkz. syncPeekHost); genişlik geçişi çubuğun kendi daralma idiyomuyla (collapseWidth). */
.map-alerts-peekhost {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 31;
}
.map-alerts-peek {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 3px 0 0 var(--a-color, #fb923c),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 26px rgba(15, 23, 42, 0.36);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  transition:
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}
.map-alerts-peek.collapsed {
  width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.map-alerts-peek-ico {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--a-color);
}
.map-alerts-peek-title {
  font-weight: 800;
}
.map-alerts-peek-sub {
  color: var(--a-color);
  font-weight: 600;
}
.map-alerts-peek-more {
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 10.5px;
  font-weight: 700;
}

/* Satır: sol tür şeridi + ikon halesi; liste açılmadan gelenler ("yeni") kapanışa kadar dolgulu kalır.
   Tür renkleri kanal sarmalayıcısından (.map-alerts-chan.map-alert-*) miras alınır. */
.map-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 9px;
  box-shadow: inset 2px 0 0 var(--a-color);
  transition: background-color 0.2s ease;
}
.map-alert-row + .map-alert-row {
  margin-top: 4px;
}
.map-alert-row.is-new {
  background: rgba(255, 255, 255, 0.07);
}
.map-alert-row:hover {
  background: rgba(255, 255, 255, 0.1);
}
.map-alert-row-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: var(--a-soft);
  box-shadow: inset 0 0 0 1px var(--a-color);
  color: var(--a-color);
  font-size: 13px;
}
.map-alert-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.map-alert-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.map-alert-row-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-alert-row-time {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10.5px;
  white-space: nowrap;
}
.map-alert-row-sub {
  margin-top: 1px;
  color: var(--a-color);
  font-size: 11.5px;
  font-weight: 600;
  word-break: break-word;
}
/* Aksiyon nötr camda durur, hover'da türün rengini alır (satır bir bildirimdir, buton bağırmamalı). */
.map-alert-row-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.map-alert-row-act:hover {
  background: var(--a-soft);
  box-shadow:
    inset 0 0 0 1px var(--a-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.map-alert-row-act i {
  font-size: 12px;
}
/* Bölgeler sekmesi: yalnız tanım satırları (çizim/kategori/aktarma harita üstündeki çubukta). */
.map-georow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.map-georow:hover {
  background: rgba(148, 163, 184, 0.1);
}
.map-georow.inactive {
  opacity: 0.55;
}
.map-georow-color {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.map-georow-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.map-georow-title {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-georow-sub {
  font-size: 11px;
  color: #94a3b8;
}
.map-georow-actions {
  display: flex;
  gap: 2px;
}
.map-georow-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
}
.map-georow-actions button:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}
/* Bölge adı etiketi (haritada geometri merkezinde; HTML marker). */
.map-geolabel {
  max-width: 170px;
  padding: 2px 7px;
  border-left: 3px solid #7c3aed;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.map-geolabel.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

/* Hızlı erişim çubuğu (harita üstü orta): [bağlama göre değişen orta bölüm] | [yardımcılar].
   Buzlu cam (frosted glass): koyu yarı saydam zemin + güçlü blur; kenar/highlight box-shadow ile verilir
   (border kutu yüksekliğini bozar, sabit height ile çakışırdı).
   z-index sol/sağ panelin (30) ALTINDA kalır: dar ekranda panel açıkken çubuk panelin altına girer. */
.map-geotools {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.52);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 30px rgba(15, 23, 42, 0.3);
  /* Sabit yükseklik: boşta kalınca alt kenar yukarı doğru animasyonla toplanır (üst kenar sabit). */
  height: 38px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-block 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-geotools[hidden] {
  display: none;
}

/* Boşta: üst kenar yerinde kalır, çubuk ince bir şeride iner ve aralıklarla pulse eder (üzerine gelince geri açılır). */
.map-geotools.idle {
  height: 6px;
  padding-block: 0;
  overflow: hidden;
  animation: map-geotools-idle-pulse 5s cubic-bezier(0.22, 0.61, 0.36, 1) 1s infinite;
}
.map-geotools.idle > * {
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* 6 px'lik şeride fare götürmek zor → altına görünmez bir yakalama bandı uzanır. */
.map-geotools.idle::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 14px;
}
/* Suya damla düşmüş gibi: camın kendi beyazında, biri diğerini kovalayan iki halka dışa doğru
   yayılıp sönümlenir. Renk yok — yalnız ışık. Cam katmanları (kenar/highlight/gölge) her adımda
   aynen tekrarlanır; box-shadow ancak katman SAYISI sabitken yumuşak geçer. */
@keyframes map-geotools-idle-pulse {
  0%, 60%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
  64% {
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.32), 0 0 0 0 rgba(255, 255, 255, 0),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
  76% {
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(255, 255, 255, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
  88% {
    box-shadow:
      0 0 0 18px rgba(255, 255, 255, 0), 0 0 0 11px rgba(255, 255, 255, 0.08),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
  96% {
    box-shadow:
      0 0 0 22px rgba(255, 255, 255, 0), 0 0 0 20px rgba(255, 255, 255, 0),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
}
/* Okunmamış ihlal + kapalı çubuk: şerit o TÜRÜN rengine boyanır ve nabız sık/belirgin atar. Beyaz "ışık"
   nabzının alfalarıyla renkli halka denendi ama kahverengi-yeşil bir uydu görüntüsünde fark edilmiyordu;
   bu yüzden ayrı animasyon. Tür, çubuğa data-alert-kind ile bildirilir (bkz. setAlertsPending). */
.map-geotools.has-alerts.idle {
  --alert-rgb: 234, 88, 12;
  background: rgba(var(--alert-rgb), 0.86);
  animation: map-geotools-idle-alert 2s ease-out infinite;
}
.map-geotools.has-alerts.idle[data-alert-kind='engine'] {
  --alert-rgb: 8, 145, 178;
}
@keyframes map-geotools-idle-alert {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(var(--alert-rgb), 0.6),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
  70% {
    box-shadow:
      0 0 0 12px rgba(var(--alert-rgb), 0),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 8px 30px rgba(15, 23, 42, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-geotools.has-alerts.idle {
    animation: none;
  }
}

/* Orta grup: geofence menüsü ya da seçili aracın aksiyonları.
   Bağlam değişiminde genişlik JS'ten (FLIP) verilir → zıplama yerine yumuşak geçiş. */
.map-geotools-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 640px;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.26s ease, opacity 0.18s ease;
}
/* Çıkan içerik akıştan çıkarılır (giren onun genişliğine takılmasın) ve yerinde soldurulur. */
.map-geotools-slot > .leaving {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  pointer-events: none;
  animation: map-geotools-fade-out 0.2s ease forwards;
}
@keyframes map-geotools-fade-out {
  to { opacity: 0; transform: scale(0.94); }
}
/* Butonlar da cam: boşta saydam, üzerine gelince buzlu cam katmanına yumuşak geçiş
   (kenar çizgisi inset box-shadow ile — border 30 px'lik kutuyu büyütürdü). */
.map-geotool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: width 0.26s ease, opacity 0.18s ease, color 0.22s ease,
    background-color 0.22s ease, box-shadow 0.22s ease, backdrop-filter 0.22s ease,
    -webkit-backdrop-filter 0.22s ease;
}
.map-geotool svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.map-geotool:hover {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
.map-geotool.active {
  background: rgba(124, 58, 237, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(196, 181, 253, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.map-geotools-sep {
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.26s ease, margin 0.26s ease, opacity 0.18s ease;
}

/* "Geofence Oluştur": metinli buton + hover ile açılan çizim menüsü. */
.map-geomenu {
  position: relative;
  display: flex;
  align-items: center;
}
.map-geomenu[hidden] {
  display: none;
}
.map-geotool.wide {
  width: auto;
  gap: 6px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.map-geotool svg.map-geomenu-caret {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.map-geomenu-btn.open svg.map-geomenu-caret {
  transform: rotate(180deg);
}
.map-geomenu-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 36px rgba(15, 23, 42, 0.4);
  animation: map-geomenu-in 0.16s ease-out;
}
.map-geomenu-pop[hidden] {
  display: none;
}
@keyframes map-geomenu-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.map-geomenu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.map-geomenu-item svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.map-geomenu-item:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.map-geomenu-item.active {
  background: rgba(124, 58, 237, 0.62);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
  color: #fff;
}

/* Araç bağlamı: plaka rozeti + sağ-tık menüsünün yatay karşılığı (boş haritaya tıklanınca geofence'e döner). */
.map-geotools-veh {
  display: flex;
  align-items: center;
  gap: 2px;
}
.map-geotools-veh[hidden] {
  display: none;
}
.map-geotools-vlabel {
  max-width: 130px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Anlık hız rozeti: plakanın devamı gibi durur (aynı kalıp), mavi tonla "canlı değer" olduğu vurgulanır. */
.map-geotools-vspeed {
  margin-inline-end: 4px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(37, 99, 235, 0.32);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.35);
  color: #dbeafe;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.map-geotool.veh i {
  font-size: 15px;
  line-height: 1;
}
.map-geotool.veh.active {
  background: rgba(37, 99, 235, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(147, 197, 253, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
/* Aksiyonlar sırayla belirir: bağlamın araca geçtiği fark edilsin. */
@keyframes map-geotools-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.86); }
  to { opacity: 1; transform: none; }
}
.map-geotools-veh > * {
  animation: map-geotools-pop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
/* Bağlam araca geçip geri dönerken aynı giriş: buton display:none'dan çıkınca animasyon baştan oynar. */
.map-geomenu > .map-geomenu-btn {
  animation: map-geotools-pop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* Bölge yardımcıları (kategoriler/adres arama/aktarma) tek sarmalayıcıda durur: sol panel "Araçlar"
   sekmesindeyken yatay olarak daralıp kalkar, "Bölgeler"e girilince geri açılır. İçerik kırpılır
   (yeniden akmaz); auto genişlik animasyonlanmadığı için "from" ölçüsü JS'ten (FLIP) verilir. */
.map-geotools-geo {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease,
    margin-inline-start 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-geotools-geo.collapsed {
  width: 0;
  opacity: 0;
  /* Çubuğun flex gap'ini de yut: daralma sonunda hiç yer kaplamasın. */
  margin-inline-start: -2px;
  pointer-events: none;
}
/* Ayırıcı, sağında gösterilecek bir şey kalmayınca (araçlar sekmesi + seçim yok) birlikte daralır. */
.map-geotools-sep.collapsed {
  width: 0;
  margin: 0;
  opacity: 0;
}

/* ---- Hava durumu bölümü (çubuğun sol çapası) ----
   Kompakt çip yalnız durum ikonu + sıcaklık verir; fare üzerine gelince ÇİPİN AYAK İZİNDEN açılan
   detay kartı büyür (açılır menü değil: kutu genişlik+yükseklik olarak çipten karta doğru genişler,
   içerik kırpılarak ortaya çıkar ve satırlar kademeli belirir). */
/* Kırpma ÇİPİN üzerinde (kartın değil): kart .map-weather'ın mutlak konumlu çocuğu olduğu için
   çip daralırken kırpılmaz. Bu yüzden .map-weather'a overflow verilmez. */
.map-weather {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.map-weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease,
    backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease,
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}
/* Veri yokken / zoom kapısı kapalıyken: çubuğun bölge şeridiyle AYNI daralma (bkz. width-collapse.js). */
.map-weather-chip.collapsed {
  width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.map-weather-chip-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.map-weather-chip-temp {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.map-weather-chip:hover,
.map-weather.open .map-weather-chip {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Kart: çubukla aynı buzlu cam; kapalıyken çip genişliğinde ve sıfır yükseklikte kırpılır. */
.map-weather-card {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 40px rgba(15, 23, 42, 0.45);
  transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: width, height;
}
.map-weather-card[hidden] {
  display: none;
}
/* İçerik SABİT genişlikte: kutu büyürken metin yeniden sarmalanmaz, yalnız kırpılan alan açılır. */
.map-weather-inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(320px, 78vw);
  padding: 10px 12px 9px;
  color: #fff;
}
/* Satırlar sırayla belirir: kartın "açıldığı" fark edilsin. */
.map-weather-inner > * {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.map-weather.open .map-weather-inner > * {
  opacity: 1;
  transform: none;
}
.map-weather.open .map-weather-inner > :nth-child(1) { transition-delay: 0.06s; }
.map-weather.open .map-weather-inner > :nth-child(2) { transition-delay: 0.1s; }
.map-weather.open .map-weather-inner > :nth-child(3) { transition-delay: 0.13s; }
.map-weather.open .map-weather-inner > :nth-child(4) { transition-delay: 0.16s; }
.map-weather.open .map-weather-inner > :nth-child(5) { transition-delay: 0.19s; }
.map-weather.open .map-weather-inner > :nth-child(6) { transition-delay: 0.21s; }

.map-weather-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.map-weather-place {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-weather-time {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10.5px;
  white-space: nowrap;
}

.map-weather-now {
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-weather-now-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.95);
}
.map-weather-now-temp {
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.map-weather-now-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.map-weather-now-cond {
  font-size: 12px;
  font-weight: 600;
}
.map-weather-now-feels {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10.5px;
}

.map-weather-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.map-weather-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.map-weather-metric-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
}
.map-weather-metric-ico svg {
  width: 15px;
  height: 15px;
}
.map-weather-metric-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.map-weather-metric-lbl {
  color: rgba(255, 255, 255, 0.55);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.map-weather-metric-val {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.map-weather-metric-extra {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.map-weather-strip {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.map-weather-cell {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.map-weather-cell-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 9.5px;
  white-space: nowrap;
}
.map-weather-cell-ico {
  width: 17px;
  height: 17px;
}
.map-weather-cell-temp {
  font-size: 11.5px;
  font-weight: 600;
}
.map-weather-cell-pop {
  color: #7dd3fc;
  font-size: 9.5px;
}
.map-weather-cell-pop.muted,
.map-weather-day-pop.muted {
  color: rgba(255, 255, 255, 0.25);
}

.map-weather-days {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.map-weather-day {
  display: grid;
  grid-template-columns: 42px 18px 34px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.map-weather-day-name {
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-weather-day-ico {
  width: 17px;
  height: 17px;
}
.map-weather-day-pop {
  color: #7dd3fc;
  font-size: 9.5px;
}
.map-weather-day-range {
  color: rgba(255, 255, 255, 0.62);
  text-align: right;
  white-space: nowrap;
}
.map-weather-day-range b {
  color: #fff;
  font-weight: 700;
}

.map-weather-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}
.map-weather-sun {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.map-weather-sun svg {
  width: 13px;
  height: 13px;
}
.map-weather-sun svg + svg {
  margin-inline-start: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .map-geotools,
  .map-geotool,
  .map-geotools-sep,
  .map-geotools-slot,
  .map-geotools-geo,
  .map-weather-card {
    transition: none;
  }
  /* Çip daralması kapalı ama genişlik/dolgu geçişi kalkarsa kutu görünür kalır: yalnız hareket kısılır. */
  .map-weather-chip {
    transition: width 0.01s linear, padding 0.01s linear;
  }
  .map-geotools.idle,
  .map-geotools-veh > *,
  .map-geomenu > .map-geomenu-btn,
  .map-geomenu-pop {
    animation: none;
  }
  /* Kademeli belirme kapalı: kart açılır açılmaz içeriği okunur olmalı. */
  .map-weather-inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Soldurma kapalı: içerik anında gizlenmeli, yoksa `forwards` olmadan görünür kalırdı. */
  .map-geotools-slot > .leaving {
    display: none;
  }
}

/* Çubuğun ALTINA hizalanan şeritler (adres arama kutusu, çizim yardım şeridi) buradan ölçü alır:
   çubuk üst kenarı (14px) + yüksekliği (38px) + boşluk. Tek yerden değişsin diye değişken. */
.map-has-geotools {
  --map-geotools-bottom: 56px;
}

/* Çizim yardım şeridi (harita üstü orta); çizim sırasında araç çubuğunun altına iner. */
.map-geodraw-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(760px, calc(100vw - 48px));
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
}
.map-has-geotools .map-geodraw-hint {
  top: var(--map-geotools-bottom);
}
.map-geodraw-hint[hidden] {
  display: none;
}
.map-geodraw-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.map-geodraw-stats {
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.map-geodraw-radius {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.map-geodraw-radius[hidden] {
  display: none;
}
.map-geodraw-radius-input {
  width: 74px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.map-geodraw-preset {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.map-geodraw-preset:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.map-geodraw-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.map-geodraw-btn {
  padding: 4px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.map-geodraw-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}
.map-geodraw-btn.primary {
  background: #7c3aed;
}
.map-geodraw-btn.primary:hover {
  background: #6d28d9;
}
.map-geodraw-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.map-geodraw-btn[hidden] {
  display: none;
}
.map-geodraw-warn {
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
  font-size: 11.5px;
  font-weight: 600;
}
.map-geodraw-warn.info {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
}
.map-geodraw-warn[hidden] {
  display: none;
}

/* Adres arama kutusu (harita üstü, araç çubuğunun altında — çizim şeridiyle aynı hizada). */
.map-placesearch {
  position: absolute;
  top: var(--map-geotools-bottom, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1202;
  width: min(420px, calc(100vw - 48px));
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}
.map-placesearch[hidden] {
  display: none;
}
.map-placesearch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #64748b;
}
.map-placesearch-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-size: 13px;
  color: #1e293b;
}
.map-placesearch-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
}
.map-placesearch-close:hover {
  background: rgba(148, 163, 184, 0.18);
}
.map-placesearch-results {
  max-height: 260px;
  border-top: 1px solid #e2e8f0;
  overflow-y: auto;
}
.map-placesearch-results[hidden] {
  display: none;
}
.map-placesearch-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  cursor: pointer;
}
.map-placesearch-item:hover {
  background: #f1f5f9;
}
.map-placesearch-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}
.map-placesearch-sub {
  font-size: 11px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-placesearch-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #94a3b8;
}

/* Aranan konumun künyesi: ÜST ÇUBUĞUN HEMEN ALTINDA, adres arama kutusu ve çizim yardım şeridiyle aynı hizada
   (haritanın ortasında marker olarak durmaz — konum zaten merkeze alınır). Aksiyonlar: (izinliyse) buradan
   bölge çiz, kapat. z-index çubuğun (29) ALTINDA: hava durumu kartı aşağı açıldığında künyenin üstünde kalır. */
.map-placebadge {
  position: absolute;
  top: var(--map-geotools-bottom, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(360px, calc(100vw - 48px));
  padding: 5px 6px 5px 9px;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 26px rgba(15, 23, 42, 0.35);
  color: #fff;
  animation: map-placebadge-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.map-placebadge[hidden] {
  display: none;
}
/* Çubuğun altından iner: merkezleme translateX'i korunmalı, yoksa şerit yana kayar. */
@keyframes map-placebadge-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.map-placebadge-ico {
  flex: 0 0 auto;
  font-size: 14px;
  color: #f0abfc;
}
.map-placebadge-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-placebadge-act,
.map-placebadge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.map-placebadge-act i,
.map-placebadge-close i {
  font-size: 13px;
  line-height: 1;
}
.map-placebadge-act:hover,
.map-placebadge-close:hover {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: #fff;
}
.map-placebadge-act:hover {
  background: rgba(124, 58, 237, 0.7);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .map-placebadge {
    animation: none;
  }
}

/* İçe/dışa aktarma modali bölümleri. */
.map-geoio-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.map-geoio-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.map-geoio-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  color: #64748b;
  font-size: 12.5px;
  cursor: pointer;
}
.map-geoio-drop:hover,
.map-geoio-drop.over {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  color: #6d28d9;
}
.map-geoio-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
}
.map-geoio-preview[hidden] {
  display: none;
}
.map-geoio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #f8fafc;
  font-size: 12px;
}
.map-geoio-row .ok {
  color: #16a34a;
}
.map-geoio-row.skipped {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
}
.map-geoio-row-name {
  font-weight: 600;
  color: #1e293b;
}
.map-geoio-row-sub {
  margin-left: auto;
  color: #64748b;
}
.map-geoio-export {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-geoio-count {
  color: #94a3b8;
  font-size: 12px;
}
/* Bölge form/kategori modali (map-dms-modal iskeletini genişletir). */
.map-geofence-modal {
  width: min(560px, calc(100vw - 32px));
}
.map-geofence-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  max-height: min(72vh, 640px);
  overflow-y: auto;
}
.map-geofence-geometry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
  font-size: 12.5px;
  font-weight: 600;
}
.map-geofence-geometry-label {
  flex: 1 1 auto;
}
.map-geofence-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.map-geofence-targets {
  display: flex;
  gap: 10px;
}
.map-geofence-targets.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.map-geofence-target-col {
  flex: 1 1 0;
  min-width: 0;
}
.map-geofence-target-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--kt-border, #e5e7eb);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12.5px;
}
.map-geofence-target-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.map-geocat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-geocat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-geocat-row .map-geocat-name {
  flex: 1 1 auto;
}
.map-geocat-color {
  flex-shrink: 0;
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--kt-border, #e5e7eb);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.map-geocat-new {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--kt-border, #e5e7eb);
}
/* Bölge Olayları sekmesi satırları (alt panel; koyu cam üzerinde saç teli ayırıcı + hover dolgusu). */
.map-georesults {
  display: flex;
  flex-direction: column;
}
.map-georesult {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12.5px;
  transition: background-color 0.2s ease;
}
.map-georesult:last-child {
  box-shadow: none;
}
.map-georesult:hover {
  background: rgba(255, 255, 255, 0.07);
}
.map-georesult i {
  flex-shrink: 0;
  font-size: 15px;
}
/* Giriş/çıkış renkleri koyu camda parlak tonlardan (#16a34a/#ea580c zeminde kayboluyordu). */
.map-georesult.enter i {
  color: #4ade80;
}
.map-georesult.exit i {
  color: #fb923c;
}
.map-georesult-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.map-georesult-title {
  font-weight: 700;
}
.map-georesult-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.map-georesult-time {
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Alt panel: araç detayı. Harita ÜSTÜNDE yüzen bir kart olduğu için hızlı erişim çubuğu/butonlarıyla
   aynı buzlu cam dilini kullanır (bkz. .map-geotools): koyu yarı saydam zemin + güçlü blur, kenar ve üst
   highlight inset box-shadow ile (border sabit yüksekliklerle çakışırdı). Yan paneller opak beyaz ve
   sabittir — bu kart onların arasında yüzer, sol/sağ daraltmaya left/right geçişleriyle uyar. --- */
.map-bottom-panel {
  position: absolute;
  bottom: 12px;
  left: 354px; /* sol panel 320 + tutamaç 22 + boşluk */
  right: 374px; /* sağ panel 340 + tutamaç 22 + boşluk */
  z-index: 29;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: hidden; /* içerik köşeleri cam kenarı taşmasın */
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 40px rgba(15, 23, 42, 0.45);
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  /* KAPANIŞ geçişi (kart .open sınıfını kaybederken bu kural okunur): hızlanarak aşağı süzülür + soluklaşır.
     Süre detail-panel.js'teki CLOSE_ANIM_MS ile bağlı — içerik yıkımı animasyon bitince yapılıyor. */
  transition:
    transform 0.26s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.2s ease-in,
    left 0.3s ease,
    right 0.3s ease;
}
/* Kapalıyken ekran dışında bekler; kapanış animasyonu boyunca haritanın tıklamasını yutmasın. */
.map-bottom-panel:not(.open) {
  pointer-events: none;
}
/* AÇILIŞ geçişi: yavaşlayarak yerine oturur. */
.map-bottom-panel.open {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.22s ease-out,
    left 0.3s ease,
    right 0.3s ease;
}
/* Grafik sekmesi: panel yüksekliği DEĞİŞMEZ; grafik mevcut alana sığar, taşma gizlenir (dış scroll oluşmaz). */
.map-bottom-panel.map-bottom-chart .map-bottom-body {
  overflow: hidden;
}
.map-fullpage.map-lp-closed .map-bottom-panel {
  left: 46px;
}
.map-fullpage.map-rp-closed .map-bottom-panel {
  right: 46px;
}
.map-bottom-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
/* Durum çipi: nokta + metin bir arada — tek başına renkli nokta koyu camda okunmuyordu (ve "Durum"
   satırını gövdeden kaldırdı: aynı bilgi başlıkta duruyor). */
.map-bottom-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.map-bottom-status .map-live-dot {
  width: 8px;
  height: 8px;
}
.map-bottom-status.active {
  background: rgba(22, 163, 74, 0.28);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.45);
  color: #86efac;
}
/* Canlı takip hissi: yalnız hareket hâlindeki araçta nokta hafifçe parlar. */
.map-bottom-status.active .map-live-dot {
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}
.map-bottom-status.idle {
  background: rgba(245, 158, 11, 0.26);
  box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.45);
  color: #fcd34d;
}
.map-bottom-status.passive {
  background: rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.35);
  color: #cbd5e1;
}
/* Çevrimdışı noktanın koyu grisi (#374151) camda kaybolur → çip içinde açık griye çekilir. */
.map-bottom-status.offline .map-live-dot {
  background: #94a3b8;
}
/* Plaka rozeti: çubuktaki araç etiketiyle aynı görünüm (bkz. .map-geotools-vlabel). */
.map-bottom-title {
  flex: 0 0 auto;
  max-width: 40%;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-bottom-model {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-bottom-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}
/* Cam buton dili: boşta saydam/hafif dolgu, hover'da beyaz dolgu + kenar (bkz. .map-geotool). */
.map-bottom-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none; /* artık bağlantı değil buton görünümünde */
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.map-bottom-detail-link i {
  font-size: 11px;
  opacity: 0.8;
}
.map-bottom-detail-link:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* display:inline-flex `[hidden]`'ı ezer → aracı olmayan satırda bağlantı gizli kalsın. */
.map-bottom-detail-link[hidden] {
  display: none;
}
.map-bottom-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.map-bottom-close:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
/* Sekmeler alt-çizgi yerine cam pill: aktif olan araç bağlamının mavisiyle dolar (bkz. .map-geotool.veh.active). */
.map-bottom-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 8px 11px 0;
  overflow-x: auto;
  scrollbar-width: none; /* çubuğu gizle (Firefox); kaydırma işlevi kalır */
}
.map-bottom-tabs::-webkit-scrollbar {
  display: none; /* çubuğu gizle (WebKit/Blink) */
}
.map-bottom-tabs button {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.map-bottom-tabs button:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
.map-bottom-tabs button.active {
  background: rgba(37, 99, 235, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(147, 197, 253, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.map-bottom-body {
  overflow-y: auto;
  padding: 10px 11px 11px;
  /* Tarayıcının açık temalı çubuğu koyu camda leke gibi duruyor → ince ve beyaz. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.map-bottom-body::-webkit-scrollbar {
  width: 8px;
}
.map-bottom-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.28);
}
/* Boş/yükleniyor durumu bu panelde koyu cam üzerinde (sol paneldeki beyaz sürümü değişmez). */
.map-bottom-body .map-live-empty {
  color: rgba(255, 255, 255, 0.55);
}

/* Araç detay "Grafik" sekmesi: zaman aralığı filtresi + sol dinamik metrik listesi + sağ ApexCharts alanı. */
/* Sabit/kompakt yükseklikler panel gövdesine (~300px) sığar; can-chart kendi genişliğini aşmaz (yatay scroll yok). */
.can-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}
/* Zaman aralığı butonları: grafik kutusunun sağ üstünde, kompakt; grafiğin üstüne biner (dikey yer kaplamaz). */
.can-chart-ranges {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.can-chart-ranges button {
  padding: 3px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.can-chart-ranges button:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
.can-chart-ranges button.active {
  background: rgba(37, 99, 235, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(147, 197, 253, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.can-chart-main {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.can-chart-metrics {
  flex: 0 0 168px;
  min-width: 0;
  max-height: 175px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.can-chart-metric {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.can-chart-metric:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* Seçili metrik kendi çizgi rengiyle çerçevelenir → grafikteki eğriyle eşleşmesi bakışta okunur. */
.can-chart-metric.active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px var(--m-color, #1a73e8);
}
.can-chart-metric-ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--m-color, #1a73e8);
}
.can-chart-metric-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}
.can-chart-metric-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.can-chart-metric-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-chart-metric-val {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-chart-metric-unit {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}
.can-chart-plot {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.can-chart-plot-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.can-chart-plot-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  min-width: 0;
  padding-right: 150px; /* sağ üstteki kompakt aralık butonlarına yer bırak (başlık altına girmesin) */
}
.can-chart-plot-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.can-chart-plot-unit {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}
.can-chart-canvas {
  flex: 1;
  min-height: 120px;
  min-width: 0;
  overflow: hidden;
}
.can-chart-state {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.can-chart-state i {
  font-size: 28px;
}
.can-chart-retry {
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.can-chart-retry:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.can-chart-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: #fff;
  border-radius: 50%;
  animation: can-chart-spin 0.8s linear infinite;
}
@keyframes can-chart-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .can-chart-main { flex-direction: column; }
  .can-chart-metrics { flex-basis: auto; max-height: 150px; }
}

/* Veri sekmesi: iki sütun, camın üstünde hafif dolgulu alt kart olarak ayrılır (16 px boşluk tek başına
   iki listeyi birbirinden ayırmıyordu). */
.map-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.map-bottom-col {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* Başlıklar i18n'de zaten büyük harf (text-transform Türkçe'de i→I bozardı). */
.map-bottom-col-title {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}
.map-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  font-size: 12px;
}
.map-bottom-row:last-child {
  box-shadow: none;
}
.map-bottom-row i {
  width: 16px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  text-align: center;
}
.map-bottom-key {
  color: rgba(255, 255, 255, 0.62);
}
.map-bottom-val {
  margin-left: auto;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

/* --- DMS olay detay modalı: karartmalı overlay + fade/scale açılış, içerik kendi içinde kayar --- */
.map-dms-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.map-dms-modal-backdrop.open {
  opacity: 1;
}
.map-dms-modal {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.map-dms-modal-backdrop.open .map-dms-modal {
  transform: scale(1);
}
.map-dms-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}
.map-dms-modal-vehicle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.map-dms-modal-vehicle i {
  color: #4b5563;
}
.map-dms-modal-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-dms-modal-close {
  border: 0;
  background: transparent;
  padding: 4px;
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
}
.map-dms-modal-close:hover {
  background: #f3f4f6;
}
.map-dms-modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
  font-size: 12px;
  color: #6b7280;
}
.map-dms-modal-speed {
  font-weight: 700;
  color: #111827;
}
.map-dms-modal-scroll {
  overflow-y: auto;
  padding: 0 14px 14px;
  scrollbar-width: none; /* çubuğu gizle (Firefox); scroll işlevi kalır */
}
.map-dms-modal-scroll::-webkit-scrollbar {
  display: none; /* çubuğu gizle (WebKit/Blink) */
}
.map-dms-modal-section-title {
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}
.map-dms-modal-map {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}
.map-dms-modal-map-canvas {
  position: absolute;
  inset: 0;
  /* MapLibre konteynere .maplibregl-map{position:relative} dayatıp inset:0 boyutlamasını iptal ettiği için kutu 0 yüksekliğe çöküyordu → açık boyut şart */
  height: 100%;
  width: 100%;
}
.map-dms-modal-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
}
.map-dms-modal-coords {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: #374151;
}
.map-dms-modal-coords i {
  color: #1a73e8;
}
.map-dms-modal-divider {
  margin: 12px 0 2px;
  border-bottom: 1px solid #e5e7eb;
}
.map-dms-modal-image {
  position: relative;
  min-height: 120px;
}
.map-dms-modal-image img {
  display: block;
  width: 100%;
  border-radius: 8px;
}
/* Olay videosu kutusu: görsel kutusuyla aynı iskelet; video her temada siyah zeminde oynar. */
.map-dms-modal-video {
  position: relative;
  min-height: 120px;
}
.map-dms-modal-video video {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #000;
}
.map-dms-modal-skeleton {
  height: 180px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: kt-skeleton-shimmer 1.2s ease infinite;
}
.map-dms-modal-noimage {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  color: #9ca3af;
  font-size: 12px;
}

/* Dar ekran: alt panel kenarlara yaslanır, Veri sekmesi tek sütuna düşer. */
@media (max-width: 900px) {
  .map-bottom-panel,
  .map-fullpage.map-lp-closed .map-bottom-panel,
  .map-fullpage.map-rp-closed .map-bottom-panel {
    left: 8px;
    right: 8px;
  }
  .map-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* Aç/kapa bölümü (trafik, 3B arazi): katman panelinde taban kartlarının ALTINDA, görünür kart
   olunca animasyonlu aşağı açılır. Varsayılan kapalı (max-height:0); `.open` ile genişler. */
.map-toggle-section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease;
}
.map-toggle-section.open {
  /* Kart (thumb 44 + etiket + boşluk + ayraç) sığacak yükseklik. */
  max-height: 105px;
  opacity: 1;
}
/* Aç/kapa kartlarını taban kartlarından ayıran ayraç + üst boşluk. margin/padding/border INNER'da:
   bölüm kapalıyken (section overflow:hidden) kırpılır — border-top'u doğrudan section'a koymak
   kapalıyken bile 1px çizgi bırakırdı. Kartlar yatayda ortalanır. */
.map-toggle-inner {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* ============ Araç detayı: Araç Takip tab'ı (mini harita + canlı video oynatıcı) ============ */

/* Mini harita: DMS modal haritasıyla aynı desen — MapLibre konteynere position:relative dayattığı
   için canvas'a açık width/height şart (aksi halde kutu 0 yüksekliğe çöker). */
.vshow-map {
  position: relative;
  height: 440px;
  overflow: hidden;
  background: #f3f4f6;
}
.vshow-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vshow-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
}

/* Harita üzeri yüzen bilgi kartı (sol üst): glassmorphism; harita etkileşimini engellemez (küçük kutu). */
.vshow-mapcard {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  width: 224px;
  max-width: calc(100% - 24px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 24, 39, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  color: #fff;
  /* overflow görünür bırakılır: dişli menü kart gövdesinin dışına taşan bir dropdown. */
}
/* Başlık: plaka (kalın) + dişli; gövdeden bir tık açık ton, kartın üst köşeleriyle hizalı yuvarlak. */
.vshow-mapcard-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
}
.vshow-mapcard-plate {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vshow-mapcard-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.15s, color 0.15s;
}
.vshow-mapcard-gear:hover,
.vshow-mapcard-gear.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.vshow-mapcard-gear svg {
  width: 15px;
  height: 15px;
}
/* Dişli menü: başlığın altında açılan CAN verisi seçici. */
.vshow-mapcard-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  z-index: 6;
  min-width: 210px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 24, 39, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}
.vshow-mapcard-menu-title {
  padding: 2px 6px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.5);
}
.vshow-mapcard-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.vshow-mapcard-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.vshow-mapcard-menu-item input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary, #1a73e8);
  cursor: inherit;
}
.vshow-mapcard-menu-ic {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.55);
}
.vshow-mapcard-menu-ic svg {
  width: 15px;
  height: 15px;
}
.vshow-mapcard-menu-txt {
  flex: 1 1 auto;
}
/* Gövde: metrik satırları + konum. */
.vshow-mapcard-body {
  padding: 8px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vshow-mapcard-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vshow-mapcard-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.vshow-mapcard-metric-ic {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.5);
}
.vshow-mapcard-metric-ic svg {
  width: 14px;
  height: 14px;
}
.vshow-mapcard-metric-value {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.vshow-mapcard-unit {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
.vshow-mapcard-metric-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.vshow-mapcard-loc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vshow-mapcard-loc-ic {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.5);
}
.vshow-mapcard-loc-ic svg {
  width: 14px;
  height: 14px;
}
.vshow-mapcard-loc-text {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Veri gelmeden: değer ve konum soluk nabız. */
.vshow-mapcard.is-loading .vshow-mapcard-metric-value,
.vshow-mapcard.is-loading .vshow-mapcard-loc-text {
  opacity: 0.55;
  animation: vshow-card-pulse 1.2s ease-in-out infinite;
}
@keyframes vshow-card-pulse {
  50% {
    opacity: 0.25;
  }
}

/* ---- Üst araç kartı sağ özet alanı: cihaz chip'i + acil durum butonu ---- */
.vshow-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.vshow-dev-wrap {
  position: relative;
}
/* Cihaz sayısı chip'i (tıklanabilir) */
.vshow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--color-muted, #f9f9f9);
  color: var(--color-foreground, #252f4a);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vshow-chip:hover,
.vshow-chip.active {
  border-color: var(--color-primary, #006ae6);
}
.vshow-chip-ic {
  font-size: 1rem;
  color: var(--color-primary, #006ae6);
}
.vshow-chip-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-mono, #071437);
}
.vshow-chip-label {
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-chip-caret {
  font-size: 0.625rem;
  color: var(--color-secondary-foreground, #4b5675);
  transition: transform 0.2s ease;
}
.vshow-chip.active .vshow-chip-caret {
  transform: rotate(180deg);
}
/* Açılır cihaz listesi */
.vshow-dev-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 260px;
  max-width: calc(100vw - 3rem);
  max-height: 320px;
  overflow-y: auto;
  padding: 0.375rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--color-muted, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.vshow-dev-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: var(--color-foreground, #252f4a);
  text-decoration: none;
  font-size: 0.8125rem;
}
.vshow-dev-item:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.vshow-dev-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.vshow-dev-dot.is-active {
  background: #16a34a;
}
.vshow-dev-dot.is-passive {
  background: #9ca3af;
}
.vshow-dev-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  color: var(--color-mono, #071437);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vshow-dev-type {
  flex: none;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.vshow-dev-status {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
}
.vshow-dev-status.is-active {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.12);
}
.vshow-dev-status.is-passive {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.14);
}
.vshow-dev-empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, #4b5675);
  text-align: center;
}
/* Acil durum butonu (uyarı tonu) */
.vshow-emg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vshow-emg-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.55);
}
.vshow-emg-btn i {
  font-size: 1rem;
}
.vshow-emg-title-ic {
  color: #dc2626;
}
/* Acil durum modalı: gövde + timeline */
.vshow-emg-modal-body {
  padding: 1rem 1.25rem 1.25rem;
}
.vshow-emg-loading {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-emg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--color-secondary-foreground, #4b5675);
  font-size: 0.875rem;
}
.vshow-emg-empty i {
  font-size: 2rem;
  color: var(--color-muted-foreground, #99a1b7);
}
/* Kayıt kartları: en yeni üstte, her kart tıklanabilir (olayın yeri alt modalda haritada açılır). */
.vshow-emg-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vshow-emg-card {
  display: flex;
  /* İkon kartın TAMAMINA göre dikey ortalanır (satır sayısı değişse de ortada kalır). */
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  text-align: start;
  cursor: pointer;
  border: 1px solid var(--color-border, #dbdfe9);
  border-radius: 0.625rem;
  background: var(--color-light, #fff);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vshow-emg-card:hover {
  border-color: var(--color-primary, #1a73e8);
  background: var(--color-muted, #f9f9f9);
}
.vshow-emg-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.vshow-emg-card-arrow {
  flex: none;
  font-size: 0.875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.vshow-emg-marker {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--color-muted, #f9f9f9);
  border: 1px solid var(--color-border, #dbdfe9);
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-emg-marker i {
  font-size: 1rem;
}
.vshow-emg-card.is-sos .vshow-emg-marker {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}
.vshow-emg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.vshow-emg-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
}
.vshow-emg-time {
  flex: none;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  font-variant-numeric: tabular-nums;
}
.vshow-emg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-emg-dev,
.vshow-emg-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
/* Konum artık adres (ters-geocode) → uzun olabilir: ikon üste hizalanır, metin taşmadan sarılır. */
.vshow-emg-loc {
  align-items: flex-start;
  min-width: 0;
}
.vshow-emg-loc i {
  margin-top: 0.125rem;
}
.vshow-emg-loc-text {
  overflow-wrap: anywhere;
}
.vshow-emg-meta i {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, #99a1b7);
}

/* Olay konumu ALT modalı (kart tıklaması): acil durum modalının üstünde durur — KTModal zindex 105. */
.vshow-emgloc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vshow-emgloc-backdrop.open {
  opacity: 1;
}
.vshow-emgloc {
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-light, #fff);
  border: 1px solid var(--color-border, #dbdfe9);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.vshow-emgloc-backdrop.open .vshow-emgloc {
  transform: scale(1);
}
.vshow-emgloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--color-border, #dbdfe9);
}
.vshow-emgloc-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-mono, #071437);
}
.vshow-emgloc-title i {
  color: #dc2626;
}
.vshow-emgloc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--color-secondary-foreground, #4b5675);
  cursor: pointer;
}
.vshow-emgloc-close:hover {
  background: var(--color-muted, #f9f9f9);
  color: var(--color-mono, #071437);
}
.vshow-emgloc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.875rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  font-variant-numeric: tabular-nums;
}
.vshow-emgloc-dev {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.vshow-emgloc-dev i {
  color: var(--color-muted-foreground, #99a1b7);
}
.vshow-emgloc-body {
  padding: 0 0.875rem 0.875rem;
  overflow-y: auto;
  min-height: 0;
}
.vshow-emgloc-section-title {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted-foreground, #99a1b7);
}
.vshow-emgloc-map {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-muted, #f9f9f9);
}
.vshow-emgloc-map-canvas {
  position: absolute;
  inset: 0;
  /* MapLibre konteynere position:relative dayatıp inset:0 boyutlamasını iptal ettiği için kutu 0 yüksekliğe
     çöküyordu (boş render) → açık boyut şart. */
  width: 100%;
  height: 100%;
}
.vshow-emgloc-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-emgloc-coords {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  overflow-wrap: anywhere;
}
.vshow-emgloc-coords i {
  margin-top: 0.125rem;
  color: var(--color-muted-foreground, #99a1b7);
}

/* ---- Limit ihlali detay modalı + güzergah alt modalı (filo paneli) ----
   Kabuk (backdrop/başlık/gövde/harita) acil durum konum modalının sınıflarını PAYLAŞIR — ikinci bir modal
   iskeleti yazmak yerine yalnız içerik parçaları eklenir. Güzergah modalı detayın ÜSTÜNDE açılır (200 → 210). */
.fa-warnroute-backdrop {
  z-index: 210;
}
.fa-warn-vehicle {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, #4b5675);
}
.fa-warn-body {
  padding-top: 0.25rem;
}
.fa-warn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.fa-warn-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border, #dbdfe9);
  border-radius: 0.5rem;
}
.fa-warn-cell-label {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-warn-cell-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
  font-variant-numeric: tabular-nums;
}
.fa-warn-when,
.fa-warn-where {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  overflow-wrap: anywhere;
}
.fa-warn-when i,
.fa-warn-where i {
  margin-top: 0.125rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-warn-map-btn {
  margin-top: 0.5rem;
}
.fa-warnroute-map {
  height: 360px;
}
/* Koridorun uçları: yeşil = başlangıç, kırmızı = bitiş (marker renkleriyle birebir). */
.fa-warnroute-legend {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.fa-warnroute-key {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.fa-warnroute-key.is-start {
  background: #00a63e;
}
.fa-warnroute-key.is-end {
  background: #dc2626;
  margin-left: 0.5rem;
}

/* ---- Araç risk özeti modalı (risk tablosunun satır tıklaması) ----
   Kabuk yine acil durum konum modalının sınıflarını PAYLAŞIR; burada yalnız içerik parçaları var.
   Modal ihlal detayından GENİŞTİR: iki sütunlu kırılım ızgarası + şoför tablosu taşıyor. */
.fa-risk-modal {
  max-width: 780px;
}
.fa-risk-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
/* Başlıktaki skor: kapatma düğmesinin solunda, sayı tabular (satırlar arası zıplama olmasın). */
.fa-risk-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-inline-start: auto;
  margin-inline-end: 0.75rem;
  line-height: 1.1;
}
.fa-risk-score-label {
  font-size: 0.625rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-risk-score-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-mono, #071437);
  font-variant-numeric: tabular-nums;
}
.fa-risk-score-box {
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--color-muted, #f9f9f9);
}
.fa-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.625rem;
}
.fa-risk-section {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border, #dbdfe9);
  border-radius: 0.625rem;
}
.fa-risk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fa-risk-section-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
}
.fa-risk-section-title i {
  color: var(--color-muted-foreground, #99a1b7);
}
/* Bölüm künyesi: bileşenin toplam adedi (kırılım kalemlerinin toplamı DEĞİL — kodsuz kalem kalem üretmez). */
.fa-risk-count {
  padding: 1px 0.5rem;
  border: 1px solid var(--color-border, #dbdfe9);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-secondary-foreground, #4b5675);
  font-variant-numeric: tabular-nums;
}
/* Kırılım satırı: etiket · bar · adet. */
.fa-risk-item {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
/* Skor dağılımı satırında bir sütun daha var: "adet × katsayı" formülü barın solunda durur. */
.fa-risk-score-box .fa-risk-item {
  grid-template-columns: minmax(120px, 1fr) auto minmax(80px, 1fr) auto;
}
.fa-risk-item-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-risk-item-label i {
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-risk-formula {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fa-risk-bar {
  display: block;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-muted, #f1f1f4);
  overflow: hidden;
}
.fa-risk-bar-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--color-primary, #1b84ff);
}
/* Bileşen tonları: modaldeki her bileşen kendi rengini taşır → skor dağılımı ile kırılım bölümü göz için eşleşir. */
.fa-risk-tone-dms { background: #f6b100; }
.fa-risk-tone-speed { background: #17c5e5; }
.fa-risk-tone-damper { background: #9333ea; }
.fa-risk-tone-engine { background: #dc2626; }
.fa-risk-tone-fuel { background: #00a63e; }
.fa-risk-item-value {
  min-width: 2.5rem;
  text-align: end;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
  font-variant-numeric: tabular-nums;
}
.fa-risk-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.75rem;
}
.fa-risk-fact-label {
  color: var(--color-secondary-foreground, #4b5675);
}
.fa-risk-fact-value {
  font-weight: 600;
  color: var(--color-mono, #071437);
  font-variant-numeric: tabular-nums;
}
/* Boş bölüm gizlenmez: "ölçüm yok" ile "ihlal olmadı" ayrımı korunur. */
.fa-risk-empty {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-risk-note {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.fa-risk-drivers .kt-table th,
.fa-risk-drivers .kt-table td {
  padding: 0.375rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
.fa-risk-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--color-border, #dbdfe9);
}

/* ==== Sürücü Analizi (DMS) tab'ı ==== */
.vda-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
}
.vda-range {
  display: inline-flex;
  padding: 3px;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--color-muted, #f9f9f9);
}
.vda-range-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, #4b5675);
  cursor: pointer;
}
.vda-range-btn.active {
  background: var(--color-primary, #006ae6);
  color: #fff;
}
/* Aralıklı tarih seçici: görünmez anchor (input alanı gösterilmez); takvim buna göre konumlanır */
.vda-daterange {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Özet kartları: slider. Kartlar SABİT genişlikte (sıkışıp okunmaz olmaz); taşan kartlar ok düğmeleriyle
   sayfa sayfa kaydırılır. Scrollbar gizli ama track yine kaydırılabilir (trackpad/dokunmatik çalışır). */
.vda-cards-slider {
  position: relative;
  /* Sarmalayıcı içerik genişliğini üst grid'e dayatmasın: min-width 0 + overflow ile daralabilir kalır,
     taşan kartlar içerideki track'te kayar (eski çıplak .vda-cards davranışının aynısı) */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.vda-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* çubuğu gizle (Firefox); kaydırma işlevi kalır */
}
.vda-cards::-webkit-scrollbar {
  display: none; /* çubuğu gizle (WebKit/Blink) */
}
.vda-cards-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--card, #fff);
  color: var(--color-secondary-foreground, #4b5675);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.vda-cards-nav:hover {
  color: var(--color-primary, #006ae6);
  border-color: var(--color-primary, #006ae6);
}
.vda-cards-nav[hidden] {
  display: none; /* display:inline-flex UA [hidden]'ını ezer — uçtayken düğme tamamen kaybolmalı */
}
/* Oklar şeridin İÇİNDE durur: dışa taşan konum (negatif offset) üst kapsayıcıda yatay scroll doğuruyordu */
.vda-cards-prev { left: 4px; }
.vda-cards-next { right: 4px; }
.vda-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* Sığarsa eskisi gibi satırı eşit doldur (grow); sığmazsa KÜÇÜLME (shrink 0) → slider devralır */
  flex: 1 0 172px;
  scroll-snap-align: start;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--card, #fff);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vda-card:hover {
  border-color: var(--color-primary, #006ae6);
}
.vda-card.active {
  border-color: var(--color-primary, #006ae6);
  box-shadow: 0 0 0 1px var(--color-primary, #006ae6) inset;
}
.vda-card-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9999px;
  font-size: 1.05rem;
}
.vda-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vda-card-name {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vda-card-count {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-mono, #071437);
}

/* Olay detayları başlığı */
.vda-count-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary, #006ae6) 14%, transparent);
  color: var(--color-primary, #006ae6);
}
.vda-viewtoggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #dbdfe9);
}
.vda-view-btn {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, #4b5675);
  cursor: pointer;
}
.vda-view-btn.active {
  background: var(--color-primary, #006ae6);
  color: #fff;
}
/* Aç/kapa animasyonu: grid-rows 1fr↔0fr içerik yüksekliğine tam animasyon yapar (sarmada kırpılmaz).
   .hidden'ı specificity ile aşarız (display:none yerine grid kalsın ki geçiş çalışsın). */
.vda-filters-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.vda-filters-wrap.hidden {
  display: grid;
  grid-template-rows: 0fr;
}
/* Grid item yalnızca kırpar (padding/kenarlık iç sarmalayıcıda) → 0fr'de tam kapanır, yarım kalmaz. */
.vda-filters {
  overflow: hidden;
  min-height: 0;
}
.vda-filters-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #dbdfe9);
}
.vda-select {
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--card, #fff);
  color: var(--color-foreground, #252f4a);
  font-size: 0.8125rem;
}

/* Liste + detay bölünmüş alan */
/* Yükseklik İÇERİKTEN gelir: sabit min-height, liste boşken ya da birkaç satırken kartı gereksiz büyütüyordu.
   Taban yalnız listede (boş durumda ince şeride düşmesin); detay paneli açılınca stretch ile kolonlar eşitlenir. */
.vda-split {
  display: flex;
  align-items: stretch;
}
.vda-list-wrap {
  flex: 2 1 0;
  min-width: 0;
  min-height: 8.25rem;
  max-height: 560px;
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1rem;
}
.vda-list-status {
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, #4b5675);
}

/* Timeline */
.vda-timeline {
  display: flex;
  flex-direction: column;
}
.vda-tl-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  cursor: pointer;
  text-align: start;
}
.vda-tl-item::before {
  content: '';
  position: absolute;
  /* nokta merkezi: zaman(52) + gap(10) + nokta yarıçapı(17, 28+2*3 border) = ~79px */
  left: 78px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border, #dbdfe9);
  z-index: 0;
}
/* Derin bağlantıyla gelinen satır: kullanıcı hangi olaya geldiğini kaçırmasın diye kısa vurgu (timeline/tablo),
   SOS modalında ise kalıcı çerçeve — uzun listede işaret kaybolmasın. */
@keyframes vshow-target-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%, 65% { box-shadow: 0 0 0 2px var(--primary); }
}
.vda-tl-item.is-target,
.vda-row.is-target {
  animation: vshow-target-flash 1.6s ease-in-out;
  border-radius: 8px;
}
.vshow-emg-card.is-target {
  box-shadow: 0 0 0 2px var(--primary);
  border-color: var(--primary);
}
@media (prefers-reduced-motion: reduce) {
  .vda-tl-item.is-target,
  .vda-row.is-target {
    animation: none;
    box-shadow: 0 0 0 2px var(--primary);
  }
}
.vda-tl-item:first-child::before {
  top: 50%;
}
.vda-tl-item:last-child::before {
  bottom: 50%;
}
.vda-tl-time {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.vda-tl-hm {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
  font-variant-numeric: tabular-nums;
}
.vda-tl-date {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.vda-tl-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--vda-c, #64748b);
  color: #fff;
  border: 3px solid var(--card, #fff);
  box-sizing: content-box;
}
.vda-tl-dot i {
  font-size: 0.85rem;
}
.vda-tl-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border, #dbdfe9);
  background: var(--card, #fff);
}
.vda-tl-item.active .vda-tl-card {
  border-color: var(--vda-c, var(--color-primary, #006ae6));
  box-shadow: 0 0 0 1px var(--vda-c, var(--color-primary, #006ae6)) inset;
}
.vda-tl-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, #071437);
}
.vda-tl-sub {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.vda-tl-arrow {
  flex: none;
  color: var(--color-muted-foreground, #99a1b7);
  font-size: 0.9rem;
}

/* Tablo görünümü */
.vda-tablewrap {
  display: block;
}
.vda-table th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-muted-foreground, #99a1b7);
}
.vda-row {
  cursor: pointer;
}
.vda-row.active {
  background: color-mix(in srgb, var(--color-primary, #006ae6) 8%, transparent);
}
.vda-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-right: 0.4375rem;
  vertical-align: middle;
}

/* Detay paneli (sağ): liste ile 2:1 oran (detay ~%33); geniş ekranda büyür, tabanı 400px */
.vda-detail {
  flex: 1 1 0;
  min-width: 400px;
  border-left: 1px solid var(--color-border, #dbdfe9);
  display: flex;
  flex-direction: column;
  max-height: 560px;
}
.vda-detail[hidden] {
  display: none; /* display:flex UA [hidden]'ını ezer — panel kapalıyken boş kolon çizilmemeli */
}
/* Açılış animasyonu: her seçimde innerHTML yenilendiği için otomatik yeniden oynar */
@keyframes vda-detail-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
.vda-detail > * {
  animation: vda-detail-in 0.25s ease;
}
.vda-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #dbdfe9);
}
.vda-detail-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.vda-detail-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 0.5rem;
  color: var(--color-secondary-foreground, #4b5675);
  cursor: pointer;
}
.vda-detail-close:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.vda-detail-scroll {
  flex: 1 1 auto;
  min-height: 0; /* flex çocuğu içerikten küçülebilsin → taşan içerik kaydırılır */
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
/* Bölümler (görsel/video/harita) sığmak için ezilmesin: doğal yüksekliklerini korur, panel scroll eder */
.vda-detail-scroll > * {
  flex-shrink: 0;
}
.vda-snap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.625rem;
  overflow: hidden;
  background: #0b0f19;
}
/* Olay video klibi kutusu: snapshot ile aynı çerçeve, oynatıcı kontrolleri video elemanından. */
.vda-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.625rem;
  overflow: hidden;
  background: #0b0f19;
}
.vda-video video {
  width: 100%;
  height: 100%;
  display: block;
}
.vda-snap-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vda-snap-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1b2233 25%, #263049 37%, #1b2233 63%);
  background-size: 400% 100%;
  animation: kt-skeleton-shimmer 1.3s ease infinite;
}
.vda-snap-osd {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  pointer-events: none; /* zaman damgası rozeti görsel tık büyütmesini engellemesin */
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}
.vda-snap-missing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: #94a3b8;
  font-size: 0.75rem;
}
.vda-snap-missing i {
  font-size: 1.75rem;
}
.vda-detail-map-wrap {
  position: relative;
  height: 190px;
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--color-muted, #f3f4f6);
}
.vda-detail-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vda-detail-map-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-foreground, #99a1b7);
  font-size: 0.75rem;
}
.vda-fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.vda-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.vda-field-k {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted-foreground, #99a1b7);
}
.vda-field-v {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-mono, #071437);
}
.vda-field-rel {
  margin-left: 0.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
}

/* Dar ekran: detay paneli alta iner, liste tam genişlik */
@media (max-width: 63.9375rem) {
  .vda-split {
    flex-direction: column;
  }
  .vda-list-wrap {
    flex: 1 1 auto;
  }
  .vda-detail {
    flex: 1 1 auto;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border, #dbdfe9);
  }
}

/* --- Hız ihlalleri kartı (Sürücü Analizi tab'ı): epizot listesi + mini haritalı detay + rota oynatma --- */
.vsw-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.vsw-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  border: 1px solid transparent;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.vsw-item:hover {
  background: color-mix(in srgb, #f97316 8%, transparent);
}
.vsw-item.active {
  border-color: #f97316;
  background: color-mix(in srgb, #f97316 10%, transparent);
}
.vsw-item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: #ffedd5;
  color: #ea580c;
  font-size: 1rem;
}
.vsw-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}
.vsw-item-title {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}
.vsw-item-peak {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #c2410c;
  font-variant-numeric: tabular-nums;
}
.vsw-item-limit {
  font-size: 0.6875rem;
  color: var(--color-secondary-foreground, #4b5675);
}
.vsw-item-sub {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsw-item-rel {
  flex: none;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, #99a1b7);
}
.vsw-item-arrow {
  flex: none;
  font-size: 0.75rem;
  color: var(--color-muted-foreground, #99a1b7);
}
/* Oynatıcı çubuğu haritanın içine oturur → mini haritaya biraz daha yükseklik. */
.vsw-detail-map-wrap {
  height: 230px;
}
/* --- Motor Limitleri kartı: hız ihlali listesinin (.vsw-*) görsel dilini paylaşır, yalnız vurgu rengi ve
   metrik parçaları ayrışır. Kapsam sınıfları (.vew-list / .vew-detail) turuncuyu camgöbeğine çevirir. --- */
.vew-list .vsw-item-peak {
  color: #0e7490;
}
.vew-detail .vsw-play-btn {
  background: #0891b2;
  border-color: #0891b2;
}
.vew-detail .vsw-play-btn:hover {
  background: #0e7490;
  border-color: #0e7490;
}
/* Satırdaki metrik çipi: üç metrik tek listede olduğu için hangi metrik olduğunu satır kendisi söyler. */
.vew-metric {
  flex: none;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: #cffafe;
  color: #0e7490;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}
/* "Sürüyor" rozeti: ihlal hâlâ devam ediyor (sıcaklık/yağ basıncı sürerken raporlanır). Nabız, bunun
   geçmiş bir kayıt değil YAŞAYAN bir durum olduğunu anlatır.
   Harita bildirim kartındaki eşi (.map-alert-tag) koyu camda durur → dolgu türün renginden gelir. */
.vew-ongoing,
.map-alert-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: #0891b2;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  animation: vew-ongoing-pulse 1.8s ease-in-out infinite;
}
.map-alert-tag {
  background: var(--a-soft);
  box-shadow: inset 0 0 0 1px var(--a-color);
  color: var(--a-color);
}
@keyframes vew-ongoing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .vew-ongoing,
  .map-alert-tag {
    animation: none;
  }
}
/* Metrik süzgeci (kart başlığında): listeyi yerelde daraltır, ek istek atmaz. */
.vew-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.vew-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: transparent;
  color: var(--color-secondary-foreground, #4b5675);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
.vew-filter:hover {
  background: var(--color-muted, #f3f4f6);
}
.vew-filter.active {
  /* Vurgu rengi kartın kendi tonundan gelir; motor limiti camgöbeği, damper kurtarma gül tonudur. */
  background: var(--vew-accent, #0891b2);
  border-color: var(--vew-accent, #0891b2);
  color: #fff;
}
.vew-filter-n {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.vsw-detail-actions {
  display: flex;
}
.vsw-play-btn {
  flex: 1 1 auto;
  justify-content: center;
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}
.vsw-play-btn:hover {
  background: #ea580c;
  border-color: #ea580c;
}
.vsw-play-btn.is-active {
  background: var(--color-secondary, #f1f1f4);
  border-color: var(--color-border, #dbdfe9);
  color: var(--color-mono, #071437);
}
.vsw-field-peak {
  color: #c2410c;
  font-weight: 700;
}

/* Damper kurtarma kartı: liste/panel görsel dilini hız ve motor limiti kartlarıyla paylaşır, yalnız vurgu
   rengi ayrışır — canlı haritadaki damper bildirim kanalıyla AYNI gül tonu (aynı olay iki ekranda aynı renk).
   Kurtarma noktasal olaydır → süre/oynatma parçalarının karşılığı burada yoktur. */
#vdr-card {
  --vew-accent: #e11d48;
}
.vdr-item-type {
  font-weight: 600;
  color: var(--color-mono, #071437);
}
/* Şoför damgası: kaydın YAZILDIĞI andaki atama. Satırda ikincil kalır — olayın kendisi tiptir, şoför bağlamdır. */
.vdr-item-driver {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  flex: none;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: #ffe4e6;
  color: #9f1239;
  font-size: 0.625rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Oynatıcı: 16:9 siyah sahne; kamera/mikrofon/durum katmanları üstte yüzer. */
.vshow-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* Canlı Görüntü kartı minimap kartıyla eşit boy (grid stretch): içerik zinciri dikey flex olur,
   oynatıcı kalan alanı doldurur — 16:9'dan uzarsa video contain'le harf-kutulanır. Tek kolonda
   (xl altı) kart içerik boyundadır; aspect-ratio 16:9 yüksekliği belirlemeye devam eder. */
.vshow-video-card {
  display: flex;
  flex-direction: column;
}
.vshow-video-card > .kt-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vshow-video-card .vshow-player-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vshow-video-card .vshow-player {
  flex: 1 1 auto;
  min-height: 0;
}
.vshow-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Kamera geçiş butonları (sol üst, transparan). */
.vshow-player-cams {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.375rem;
  z-index: 3;
}
/* Playback'te seçici gizlenir; display:flex Metronic .hidden'ı ezdiğinden özgül kural şart. */
.vshow-player-cams.hidden {
  display: none;
}
.vshow-cam-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease;
}
.vshow-cam-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.vshow-cam-btn.active {
  background: var(--color-primary, #006ae6);
  border-color: transparent;
}

/* Kanal seçici: tek buton + açılır kanal menüsü (statik 1/2 butonlarının yerini aldı). */
.vshow-cam-select {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.625rem;
}
.vshow-cam-caret {
  font-size: 0.6875rem;
}
.vshow-cam-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  min-width: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
}
/* Metronic .hidden (display:none) bizim display:flex kuralımızca ezilir; yüksek özgüllükle geri kazandır. */
.vshow-cam-menu.hidden {
  display: none;
}
.vshow-cam-item {
  padding: 0.4rem 0.625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #fff;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vshow-cam-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.vshow-cam-item.active {
  background: var(--color-primary, #006ae6);
}

/* Mikrofon (sağ üst): aktifken kırmızı nabız. */
.vshow-mic-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 3;
}
.vshow-mic-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.vshow-mic-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.vshow-mic-btn.pending {
  opacity: 0.6;
}
.vshow-mic-btn.active {
  background: #dc2626;
  border-color: transparent;
  animation: vshow-mic-pulse 1.5s ease-out infinite;
}
@keyframes vshow-mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
  }
}

/* Durum katmanı: bağlanıyor/hata/başlat butonu. */
/* Metronic bundle'ındaki .hidden (display:none) bizim aşağıdaki display:flex kurallarımızla AYNI
   özgüllükte ve ondan ÖNCE yüklendiğinden ezilir → .hidden bu elemanları gizleyemez (overlay takılır,
   playback çubuğu canlıda bile görünür). Daha yüksek özgüllükle .hidden'ı geri kazandır. */
.vshow-player-overlay.hidden,
.vshow-timeline.hidden {
  display: none;
}

/* Tam ekran butonu: player'ın sol altında; playback çubuğu görünürken de üstünde kalır. */
.vshow-fs-btn {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 4;
}
.vshow-fs-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.vshow-fs-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Yayını kapatma butonu: mikrofonun soluna, kırmızı. Yalnız yayın aktifken görünür. */
.vshow-stop-btn {
  position: absolute;
  top: 0.75rem;
  right: 3.5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease;
  z-index: 4;
}
.vshow-stop-btn svg {
  width: 1rem;
  height: 1rem;
}
.vshow-stop-btn:hover {
  background: rgba(220, 38, 38, 1);
}
/* Metronic .hidden (display:none) bizim display:flex kuralımızca ezilir; yüksek özgüllükle geri kazandır. */
.vshow-stop-btn.hidden {
  display: none;
}

.vshow-player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.vshow-player-status {
  color: #e5e7eb;
  font-size: 0.875rem;
}

/* CANLI rozet noktası. */
.vshow-live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-radius: 9999px;
  background: currentColor;
  animation: vshow-blink 1.2s ease-in-out infinite;
}
@keyframes vshow-blink {
  50% {
    opacity: 0.25;
  }
}

/* Kayıt oynatma zaman çubuğu: player'ın ALTINDA (overlay değil); oynat/duraklat + konum + sürüklenebilir
   seek + süre + canlıya dön. Yalnız playback modunda görünür. */
.vshow-timeline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-muted, #f9f9f9);
  border-top: 1px solid var(--color-border, #dbdfe9);
}
.vshow-tl-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-foreground, #252f4a);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vshow-tl-btn:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.vshow-tl-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.vshow-tl-live {
  font-size: 0.8125rem;
  font-weight: 500;
  border-color: var(--color-border, #dbdfe9);
}
.vshow-tl-time {
  flex: none;
  min-width: 3rem;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary-foreground, #4b5675);
}
.vshow-tl-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--color-border, #dbdfe9);
  cursor: pointer;
}
.vshow-tl-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  background: var(--color-primary, #006ae6);
  cursor: pointer;
}
.vshow-tl-seek::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: none;
  border-radius: 9999px;
  background: var(--color-primary, #006ae6);
  cursor: pointer;
}

/* Overlay aksiyonları: "Yayını Başlat" + "Kayıt Başlat" yan yana (dar ekranda alt alta sarar). */
.vshow-overlay-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Geçmiş kayıtlar tarih aralığı modalı: girişler + Listele tek satırda, durum/hata altında. */
.vshow-rec-range {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.vshow-rec-range-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vshow-rec-range-status {
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, #4b5675);
}
/* datetime-local'i içeriğine (tarih metni + takvim ikonu) göre boyutla: esnemeyi kapat, UA'nın
   fazla genişliğini kırp. field-sizing Chrome 123+'da içeriğe sığdırır; Firefox width:auto'ya düşer.
   width:auto, kt-input'un width:100%'ünü ezerek ikon sonrası boş alanı kaldırır. */
.vshow-rec-date {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  field-sizing: content;
}
/* Takvim ikonunu metne yaklaştır; sağda gereksiz boşluk bırakma. */
.vshow-rec-date::-webkit-calendar-picker-indicator {
  margin-inline-start: 0.25rem;
  padding-inline-end: 0;
}
.vshow-rec-sep {
  flex: none;
  color: var(--color-muted-foreground, #99a1b7);
}
/* Kayıt tablosu tek scroll kutusunda (dikey+yatay): yatay çubuk görünür alanın altında sabit
   kalır (liste sonuna inmeye gerek yok). Sütunlar compact olduğundan normal genişlikte yatay
   taşma olmaz; dar ekranda bu kutu güvenli kaydırma sağlar. */
.vshow-rec-scroll {
  max-height: 340px;
  overflow: auto;
}
/* Tarih ve saat alt alta: tam tarih-saati tek hücrede yan yana yazınca sütun taşıyordu. */
.vshow-rec-dt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
}
.vshow-rec-dt-time {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, #4b5675);
}
/* Kayıt listesi modalı: kanal tab'ları + tab başına tablo (kart altındaki eski tablonun yerini aldı). */
.vshow-rec-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border, #dbdfe9);
  /* Çok kanalda kaydırma kalsın ama çubuk çizilmesin (tab'ların -1px alt taşması sürekli bar gösteriyordu). */
  overflow-x: auto;
  scrollbar-width: none;
}
.vshow-rec-tabs::-webkit-scrollbar {
  display: none;
}
/* Sıralanabilir başlıklar (ok çizimi temanın th[aria-sort] + .kt-table-col-sort kuralından gelir). */
.vshow-rec-modal th[data-rec-sort] {
  cursor: pointer;
  user-select: none;
}
.vshow-rec-tab {
  flex: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, #4b5675);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.vshow-rec-tab:hover {
  color: var(--color-foreground, #252f4a);
}
.vshow-rec-tab.active {
  color: var(--color-primary, #006ae6);
  border-bottom-color: var(--color-primary, #006ae6);
}
/* Modalda liste kart içindekinden daha ferah kaydırılır. */
.vshow-rec-modal .vshow-rec-scroll {
  max-height: min(55vh, 480px);
}

/* İndirme butonu: aktifken ikon yerine spinner; tık iptal anlamına gelir. */
.vshow-rec-dl.is-loading i {
  display: none;
}
.vshow-rec-dl.is-loading::after {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: vshow-spin 0.7s linear infinite;
}
@keyframes vshow-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Metronic bundle'ında olmayan utility'ler (araç detay takip tab'ı). */
.min-w-44 {
  min-width: 11rem;
}
@media (min-width: 1280px) {
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Metronic bundle'ında olmayan utility'ler (tenant yönetimi yeni tasarım: özet şerit + sekmeler + stepper). */
.w-2 {
  width: 0.5rem;
}
.h-0\.5 {
  height: 0.125rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mx-2\.5 {
  margin-inline: 0.625rem;
}
.ps-0\.5 {
  padding-inline-start: 0.125rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-green-500\/10 {
  background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
}
.bg-yellow-500\/10 {
  background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
}
.bg-violet-500\/10 {
  background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
}
.ring-primary\/30 {
  --tw-ring-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
/* Seçili radio kartı vurgusu (yalnızca sunum; :has destekleyen tarayıcılarda). */
.has-\[\:checked\]\:border-primary:has(:checked) {
  border-color: var(--primary);
}
.has-\[\:checked\]\:bg-primary\/5:has(:checked) {
  background-color: color-mix(in oklab, var(--primary) 5%, transparent);
}

/* --------------------------------------------------------------------------
   Tenant listesi yeniden tasarimi — brief'in duz palet siniflari. Metronic
   bundle'i yalnizca kendi demolarinda gecen utility'leri iceriyor; asagidakiler
   orada YOK (JIT de .ejs taramaz), o yuzden Tailwind varsayilan degerleriyle
   elle tanimlanir: avatar, seviye/durum rozetleri, DB kolonu, stat kutulari,
   sekme sayaci ve pasif aksiyon gorunumu.
   -------------------------------------------------------------------------- */
.bg-blue-50 {
  background-color: #eff6ff;
}
.bg-blue-100 {
  background-color: #dbeafe;
}
.text-blue-600 {
  color: #2563eb;
}
.text-blue-700 {
  color: #1d4ed8;
}
.bg-amber-50 {
  background-color: #fffbeb;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
.text-amber-600 {
  color: #d97706;
}
.text-amber-700 {
  color: #b45309;
}
.bg-purple-50 {
  background-color: #faf5ff;
}
.text-purple-600 {
  color: #9333ea;
}
.bg-green-100 {
  background-color: #dcfce7;
}
.text-green-700 {
  color: #15803d;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.text-gray-400 {
  color: #9ca3af;
}
.opacity-40 {
  opacity: 0.4;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
/* Modüller sekmesi ek palet sınıfları (yine Metronic bundle'ında yok). */
.bg-gray-50 {
  background-color: #f9fafb;
}
.bg-red-50 {
  background-color: #fef2f2;
}
.text-red-600 {
  color: #dc2626;
}
.border-blue-200 {
  border-color: #bfdbfe;
}

/* Global skeleton: tema-duyarlı shimmer barı (element-seviyesi örtü ve tablo için ortak primitif) */
.kt-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--color-muted, #f3f4f6) 25%,
    var(--color-border, #e5e7eb) 37%,
    var(--color-muted, #f3f4f6) 63%
  );
  background-size: 400% 100%;
  animation: kt-skeleton-shimmer 1.2s ease infinite;
}
.kt-skeleton-text {
  height: 0.85rem;
}
.kt-skeleton-circle {
  border-radius: 9999px;
}
@keyframes kt-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Element-seviyesi yükleme: bir bölgeyi (kart/tablo/form) iskelet bloğuyla kaplar.
   visibility:hidden layout kutusunu korur → örtü içeriğin doğal yüksekliğini alır. */
.kt-skeleton-host {
  position: relative;
}
.kt-skeleton-host.is-loading {
  min-height: var(--kt-skeleton-minh, 0px);
}
.kt-skeleton-host.is-loading > :not(.kt-skeleton-overlay) {
  visibility: hidden !important;
}
.kt-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
.kt-skeleton-overlay .kt-skeleton {
  flex: 0 0 auto;
}

/* Veri gelince gerçek içeriğin animasyonlu belirmesi (fade + hafif scale/yükseliş) */
.kt-reveal {
  animation: kt-reveal 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes kt-reveal {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kt-skeleton {
    animation: none;
  }
  .kt-reveal {
    animation: none;
  }
}

/* ============ Harita: araç sağ-tık context menüsü ============
   Buzlu cam: hızlı erişim çubuğu/çizim menüsüyle aynı reçete (koyu yarı saydam zemin + blur,
   kenar/highlight inset box-shadow ile — bkz. .map-geomenu-pop). */
.map-ctx-menu {
  position: absolute;
  z-index: 65;
  min-width: 230px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 36px rgba(15, 23, 42, 0.4);
}
.map-ctx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.map-ctx-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.map-ctx-model {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.map-ctx-speed {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #93c5fd;
  white-space: nowrap;
}
.map-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.map-ctx-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
}
.map-ctx-item:disabled {
  opacity: 0.45;
  cursor: default;
}
.map-ctx-item i {
  width: 18px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
  text-align: center;
}
.map-ctx-item svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 1px;
  color: rgba(255, 255, 255, 0.66);
}
.map-ctx-item.active,
.map-ctx-item.active i,
.map-ctx-item.active svg {
  color: #c4b5fd;
}

/* ============ Harita: canlı kamera modalı ============ */
.map-cam-modal {
  max-width: 900px;
}
.map-cam-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
}
.map-cam-head-icon svg {
  width: 15px;
  height: 15px;
}
.map-cam-head-sub {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.map-cam-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
}
.map-cam-mic svg {
  width: 16px;
  height: 16px;
}
.map-cam-mic:hover {
  background: #e5e7eb;
}
.map-cam-mic.active {
  background: #dc2626;
  color: #fff;
}
.map-cam-mic.pending {
  opacity: 0.6;
}
.map-cam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.map-cam-panel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #111827;
  aspect-ratio: 16 / 9;
}
.map-cam-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.map-cam-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.map-cam-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(17, 24, 39, 0.8);
  color: #d1d5db;
  font-size: 12px;
  text-align: center;
}
.map-cam-overlay.hidden {
  display: none;
}
.map-cam-spinner {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: map-cam-spin 0.8s linear infinite;
}
.map-cam-spinner.hidden {
  display: none;
}
@keyframes map-cam-spin {
  to {
    transform: rotate(360deg);
  }
}
.map-cam-map {
  position: relative;
  height: 240px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: #f3f4f6;
}
.map-cam-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 760px) {
  .map-cam-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Harita: konum geçmişi tarih aralığı modalı ============ */
.map-hist-modal {
  max-width: 420px;
}
.map-hist-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.map-hist-head-text small {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}
.map-hist-body {
  padding: 14px;
}
.map-hist-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.map-hist-input {
  width: 100%;
  background: #fff;
  cursor: pointer;
}
.map-hist-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 14px;
}
.map-hist-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ============ Harita: Firma Ayarları modalı ============ */
.map-cset-modal {
  max-width: 640px;
}
/* Sekme şeridi: sekmeler sıkışmaz, taşarsa şerit yatay kayar; alt çizgi sarmalayıcıda ki kaydırmayla kaymasın. */
.map-cset-tabs-wrap {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e5e7eb;
}
.map-cset-tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.map-cset-tabs::-webkit-scrollbar {
  display: none;
}
.map-cset-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Kaydırma okları: yalnız taşma varken görünür (.visible), uçta ilgili ok pasifleşir. */
.map-cset-tabs-nav {
  display: none;
  align-items: center;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}
.map-cset-tabs-nav.visible {
  display: flex;
}
.map-cset-tabs-nav:hover {
  color: #111827;
}
.map-cset-tabs-nav:disabled {
  opacity: .35;
  cursor: default;
}
.map-cset-tabs-nav:disabled:hover {
  color: #6b7280;
}
.map-cset-tabs-nav.prev {
  border-right: 1px solid #e5e7eb;
}
.map-cset-tabs-nav.next {
  border-left: 1px solid #e5e7eb;
}
.map-cset-tabs button.active {
  color: #111827;
  border-bottom-color: #111827;
}
.map-cset-body {
  padding: 16px 14px;
}
.map-cset-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: #4b5563;
}
.map-cset-field {
  display: block;
}
.map-cset-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.map-cset-input-wrap {
  position: relative;
  display: block;
}
.map-cset-hours {
  width: 100%;
}
/* Birim eki (% / km/s / saat) sağda konumlanır → değer birimin altına girmesin + native number spinner'ı
   gizle (spinner birim işaretinin üstüne biner). Tüm firma-ayarı sayı girişleri için ortak. */
.map-cset-input-wrap input {
  width: 100%;
  padding-right: 42px;
}
.map-cset-input-wrap input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.map-cset-input-wrap input[type="number"]::-webkit-outer-spin-button,
.map-cset-input-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.map-cset-input-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #9ca3af;
  pointer-events: none;
}
.map-cset-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.map-cset-soon {
  padding: 32px 8px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}
/* Firma Ayarları: araç-tipi bazlı yakıt eşiği listesi + ekleme satırı */
.map-cset-bytype {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
/* Motor Limitleri sekmesi: üç metrik alt-sekmeyle (segment) gezilir, tek metrik bölümü görünür. */
.map-cset-subtabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  background: #f3f4f6;
  border-radius: 8px;
}
.map-cset-subtabs button {
  flex: 1;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
}
.map-cset-subtabs button.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.map-cset-engine-sec.hidden {
  display: none;
}
.map-cset-bytype-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.map-cset-bytype-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.map-cset-bytype-name {
  flex: 1 1 auto;
  font-size: 13px;
  color: #374151;
}
.map-cset-bytype-val {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.map-cset-bytype-rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}
.map-cset-bytype-rm:hover {
  background: #fee2e2;
  color: #dc2626;
}
.map-cset-bytype-empty {
  font-size: 12.5px;
  color: #9ca3af;
  padding: 4px 2px;
}
.map-cset-bytype-add {
  display: flex;
  gap: 8px;
  align-items: center;
}
.map-cset-bytype-add .map-cset-bytype-type {
  flex: 2 1 8rem;
}
.map-cset-bytype-pctwrap {
  flex: 1 1 5rem;
}
.map-cset-bytype-add-btn {
  flex: 0 0 auto;
}
/* Yakıt uyarı geçmişi satırındaki alt-etiket (haritada göster / konum yok) */
.map-dms-row-sub {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}
/* flatpickr: seçili aralık rengini tema birincil rengine hizala */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.flatpickr-day.inRange {
  background: #eff6ff;
  border-color: #eff6ff;
  box-shadow: -5px 0 0 #eff6ff, 5px 0 0 #eff6ff;
}

/* ============ Harita: cihaz olay geçmişi modalı ============ */
.map-events-modal {
  max-width: 460px;
}
.map-events-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding: 10px 14px 14px;
}

/* ============ Harita: araç takip rozeti ============
   Harita üstü yüzen şeritler (.map-geotools) ile aynı buzlu cam dili: koyu yarı saydam zemin,
   kenar/highlight inset box-shadow ile. Takip DURUMU mor aksanla taşınır (çubuğun aktif rengiyle
   aynı) — eski canlı mavi dolgu camın altındaki haritayı boyuyordu. */
.map-follow-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.52);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(196, 181, 253, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 30px rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  transform: translateX(-50%);
}
.map-follow-badge > i {
  color: #c4b5fd;
}
/* Hızlı erişim çubuğu varken üst-orta şeritler onun altına iner (çizim yardım şeridiyle aynı desen).
   "Canlı Konuma Dön" de aynı hizadadır: ikisi hiç birlikte görünmez (takip ↔ oynatma birbirini kapatır),
   çubuğun üstünü kapatmamaları yeter. */
.map-has-geotools .map-follow-badge,
.map-has-geotools .map-route-exit {
  top: var(--map-geotools-bottom);
}
.map-follow-badge[hidden] {
  display: none;
}
.map-follow-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}
.map-follow-stop:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.map-follow-stop i {
  font-size: 10px;
}

/* ============ Harita: rota geçmişi oynatma ============
   Oynatma yüzeyleri (çıkış butonu, sefer paneli, oynatıcı çubuğu) harita sayfasında buzlu cam;
   gömülü mini haritalar (araç detayı kartları) beyaz kalır → cam kuralları .map-fullpage kapsamında. */
.map-route-exit {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.52);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 30px rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  cursor: pointer;
  transform: translateX(-50%);
  transition: background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.map-route-exit:hover {
  background: rgba(31, 41, 55, 0.66);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 34px rgba(15, 23, 42, 0.36);
}
.map-route-segments {
  position: absolute;
  top: 12px;
  left: 354px; /* sol panel 320 + tutamaç 22 + boşluk (map-bottom-panel deseni) */
  z-index: 31;
  display: flex;
  flex-direction: column;
  width: 250px;
  max-height: 45%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transition: left 0.3s ease;
}
/* Sefer paneli: katman paneliyle (.map-layers-panel) aynı cam — biraz daha koyu zemin, liste okunsun. */
.map-fullpage .map-route-segments {
  border-color: transparent;
  background: rgba(17, 24, 39, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 36px rgba(15, 23, 42, 0.4);
}
.map-fullpage .map-route-seg-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}
.map-fullpage .map-route-seg-head i,
.map-fullpage .map-route-seg.active .map-route-seg-title {
  color: #c4b5fd;
}
.map-fullpage .map-route-seg-count {
  background: rgba(167, 139, 250, 0.22);
  color: #ddd6fe;
}
.map-fullpage .map-route-seg:hover {
  background: rgba(255, 255, 255, 0.1);
}
.map-fullpage .map-route-seg.active {
  background: rgba(255, 255, 255, 0.14);
}
.map-fullpage .map-route-seg.selected {
  background: rgba(167, 139, 250, 0.18);
  box-shadow: inset 3px 0 0 #a78bfa;
}
.map-fullpage .map-route-seg-title {
  color: #f8fafc;
}
/* Renk noktası koyu camda kaybolmasın: iç çerçeve açık renge döner (çizgi rengi korunur). */
.map-fullpage .map-route-seg-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.map-fullpage .map-route-seg-times {
  color: rgba(255, 255, 255, 0.78);
}
.map-fullpage .map-route-seg-stats {
  color: rgba(255, 255, 255, 0.55);
}
.map-fullpage.map-lp-closed .map-route-segments {
  left: 46px;
}
.map-route-seg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}
.map-route-seg-head i {
  color: #2563eb;
}
.map-route-seg-count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 9999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
}
.map-route-seg-list {
  overflow-y: auto;
  padding: 6px;
}
.map-route-seg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.map-route-seg:hover {
  background: #f3f4f6;
}
.map-route-seg.active {
  background: #eff6ff;
}
/* Seçili sefer (yalnız o çizili): kalıcı vurgu + sol kenar şeridi — oynatmanın gezdiği .active'den ayrışır. */
.map-route-seg.selected {
  background: #eef2ff;
  box-shadow: inset 3px 0 0 #6366f1;
}
.map-route-seg-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}
/* Sefer renk noktası: satırı haritadaki çizgi rengine bağlar. */
.map-route-seg-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.map-route-seg.active .map-route-seg-title {
  color: #2563eb;
}
.map-route-seg-times {
  font-size: 11px;
  color: #374151;
}
.map-route-seg-stats {
  font-size: 11px;
  color: #6b7280;
}
.map-route-player {
  position: absolute;
  bottom: 12px;
  left: 354px;
  right: 374px; /* sağ panel 340 + tutamaç 22 + boşluk */
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transition: left 0.3s ease, right 0.3s ease;
}
.map-fullpage.map-lp-closed .map-route-player {
  left: 46px;
}
.map-fullpage.map-rp-closed .map-route-player {
  right: 46px;
}
/* Oynatıcı çubuğu da cam (color-scheme: hız seçicisinin native açılır listesi de koyu gelsin). */
.map-fullpage .map-route-player {
  border-color: transparent;
  background: rgba(17, 24, 39, 0.56);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 30px rgba(15, 23, 42, 0.3);
  color-scheme: dark;
}
.map-fullpage .map-route-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  transition: background-color 0.22s ease, color 0.22s ease;
}
.map-fullpage .map-route-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.map-fullpage .map-route-play {
  background: rgba(124, 58, 237, 0.66);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.45);
}
.map-fullpage .map-route-play:hover {
  background: rgba(124, 58, 237, 0.82);
}
.map-fullpage .map-route-seek {
  accent-color: #a78bfa;
}
.map-fullpage .map-route-counter,
.map-fullpage .map-route-clock {
  color: rgba(255, 255, 255, 0.85);
}
.map-fullpage .map-route-kmh {
  color: #c4b5fd;
}
.map-fullpage .map-route-speed {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 24, 39, 0.6);
  color: #f8fafc;
}
/* Kompakt oynatıcı: gömülü mini haritanın (araç detayı ihlal kartı) içine oturur; sol/sağ panel ofseti yok. */
.map-route-player-compact {
  left: 8px;
  right: 8px;
  bottom: 8px;
  gap: 6px;
  padding: 6px 8px;
  z-index: 5;
}
.map-route-player-compact .map-route-btn {
  width: 26px;
  height: 26px;
}
.map-route-player-compact .map-route-seek {
  min-width: 60px;
}
.map-route-player-compact .map-route-clock,
.map-route-player-compact .map-route-kmh {
  font-size: 11px;
}
.map-route-player-compact .map-route-speed {
  padding: 2px 4px;
  font-size: 11px;
}
/* Vurgu rengi çizilen rotadan gelir (hız ihlalinde turuncu); tanımsızsa rota geçmişinin mavisi. */
.map-route-player-compact .map-route-play {
  background: var(--map-route-accent, #2563eb);
}
.map-route-player-compact .map-route-seek {
  accent-color: var(--map-route-accent, #2563eb);
}
.map-route-player-compact .map-route-kmh {
  color: var(--map-route-accent, #2563eb);
}
.map-route-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
}
.map-route-btn:hover {
  background: #e5e7eb;
}
.map-route-btn svg {
  width: 16px;
  height: 16px;
}
.map-route-play {
  background: #2563eb;
  color: #fff;
}
.map-route-play:hover {
  background: #1d4ed8;
}
.map-route-seek {
  flex: 1;
  min-width: 80px;
  accent-color: #2563eb;
}
.map-route-counter,
.map-route-clock,
.map-route-kmh {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.map-route-kmh {
  color: #2563eb;
}
.map-route-speed {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px 6px;
  background: #fff;
  color: #374151;
  font-size: 12px;
}
.map-route-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.map-route-marker svg {
  width: 26px;
  height: 26px;
  fill: #2563eb;
  stroke: #fff;
  stroke-width: 1.2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) {
  .map-route-segments {
    top: 60px;
    left: 8px;
    width: 210px;
  }
  .map-route-player,
  .map-fullpage.map-lp-closed .map-route-player,
  .map-fullpage.map-rp-closed .map-route-player {
    left: 8px;
    right: 8px;
    flex-wrap: wrap;
  }
}

/* ---- Sidebar görünürlüğü: piksel tabanlı güvenlik ağı ----
   Metronic'in derlenmiş çıktısı lg kırılımını `@media (width >= 64rem)` ile yazar — REM tabanlı. Tarayıcının
   kök yazı tipi boyutu büyütülürse (ayar ya da eklenti) eşik 1024 px'in üstüne kayar ve TÜM lg: sınıfları
   birden düşer: sidebar şablondaki statik `hidden` sınıfında takılı kalır (DOM'da var, ekranda yok),
   KTDrawer büyük ekranda devre dışı kalamaz, içerik sol boşluğunu kaybeder.
   Aşağısı aynı davranışı piksel eşiğiyle garanti eder; id specificity'si `.hidden`'ı aşar. */
@media (min-width: 1024px) {
  #sidebar.hidden {
    display: flex;
  }
  /* Daraltma tutamağı da `hidden lg:flex` ile geliyor ve kendi kuralında `display` YOK → aynı kırılganlık. */
  .sidebar-collapse-btn.hidden {
    display: flex;
  }
  /* `top-0 bottom-0` KTDrawer tarafından yönetilir (data-kt-drawer-class); drawer sökülünce kaybolmasın. */
  #sidebar {
    top: 0;
    bottom: 0;
  }
  /* İçerik alanı sidebar'ın altına girmesin (lg:ms-(--sidebar-width) düşerse). */
  .app-main {
    margin-inline-start: var(--sidebar-width);
  }
  /* Mobil başlık `flex lg:hidden` ile geliyor: aynı sebeple masaüstünde görünür kalabilir. */
  #header {
    display: none;
  }
}

/* ---- Sidebar daraltma (icon-only rail) — lg+; --sidebar-width override + kademeli metin fade; animasyonlu ----
   Mevcut sidebar mantığı (KTMenu, aktif link, akordiyon, mobil drawer) korunur; yalnız görsel genişlik/görünürlük eklenir. */
/* Genişlik + içerik kenar boşluğu senkron geçişi (her iki yönde) */
#sidebar {
  transition: width 0.3s ease-in-out;
}
.app-main {
  transition: margin-inline-start 0.3s ease-in-out;
}
/* Etiket spill'ini kırp (daralma/genişleme sırasında rail dışına taşmasın); dikey scroll KTScrollable'da kalır */
#sidebar_menu [data-kt-scrollable] {
  overflow-x: hidden;
}
/* Menü etiketleri tek satırda kalsın: genişleme animasyonunda dar alanda satıra kaydırmasın (kırpılır, açılınca ortaya çıkar) */
#sidebar_menu .kt-menu-title {
  white-space: nowrap;
}

/* Daraltma tetik butonu — sağ kenarda küçük yuvarlak tutamaç */
.sidebar-collapse-btn {
  position: absolute;
  top: 24px;
  inset-inline-end: -13px;
  z-index: 30;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--input, #e5e7eb);
  background: var(--background, #fff);
  color: var(--secondary-foreground, #4b5563);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover {
  color: var(--primary, #1a73e8);
}
.sidebar-collapse-btn i {
  font-size: 12px;
  transition: transform 0.3s ease-in-out;
}

@media (min-width: 1024px) {
  /* Sidebar (ve kenar tutamacı butonu) harita panellerinin (z-30) ÜSTÜNDE kalsın; buton sağ kenara taştığından
     araç listesi paneli aksi halde onu örtüyordu. Modal (60)/toast (1200) hâlâ üstte. lg-only → mobil drawer etkilenmez. */
  #sidebar {
    z-index: 40;
  }
  /* Daralmış genişlik: ikon + simetrik iç boşluk ≈ ortalı görünür */
  body.sidebar-collapsed {
    --sidebar-width: 74px;
  }
  /* Ok yönü döner (daralt ↔ genişlet) */
  body.sidebar-collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
  }

  /* Etiketler her iki yönde de yumuşak fade (genişlerken de aniden belirmesin) */
  #sidebar_primary_menu .kt-menu-title,
  #sidebar_header [data-brand-name] {
    transition: opacity 0.2s ease;
  }
  /* Daralınca: genişlikten daha hızlı fade (kademeli his); akış korunur, overflow kırpar → ikon sola sabit, sıçrama yok */
  body.sidebar-collapsed #sidebar_primary_menu .kt-menu-title,
  body.sidebar-collapsed #sidebar_header [data-brand-name] {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  }
  /* Submenu okları / arrow'lar gizli */
  body.sidebar-collapsed #sidebar_primary_menu .kt-menu-arrow,
  body.sidebar-collapsed #sidebar_header .kt-menu-arrow {
    display: none;
  }
  /* Bölüm başlıkları: display:none DEĞİL — yükseklikleri korunur (metin zaten .kt-menu-title fade'iyle gizli).
     Böylece alttaki ikonlar yukarı ışınlanmaz; kalan boşluk ikon gruplarını görsel olarak ayırır. */
  /* Akordiyon çocukları rail'de gösterilemez → gizli (durum korunur; genişleyince aynen döner) */
  body.sidebar-collapsed #sidebar_primary_menu .kt-menu-accordion {
    display: none !important;
  }
  /* İkincil menü (Hızlı Erişim) + ayracı gizli */
  body.sidebar-collapsed #sidebar_secondary_menu,
  body.sidebar-collapsed #sidebar_menu .border-b {
    display: none;
  }
  /* Arama kutusu gizli (menü öğesi değil) */
  body.sidebar-collapsed #sidebar_header .kt-input {
    display: none;
  }

  /* Marka: yalnız logo, ortalı */
  body.sidebar-collapsed #sidebar_header [data-brand-content] {
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-brand-logo {
    height: 38px;
    max-width: 46px;
  }

  /* Footer: dar rail'de satır kaydırarak (flex-wrap) dikey yığılır → flex-direction FLIP'i YOK (ışınlanma yok).
     Geniş halde içerik tek satıra sığar; mevcut justify-between görünümü aynen korunur.
     min-width:0 sağdaki ikon grubunun dar satırda kendi içinde sarmasına izin verir. */
  #sidebar_footer {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #sidebar_footer > div:last-child {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    row-gap: 8px;
  }
  /* Aç/kapa geçişinde footer'ı kısa süre soldur → wrap reflow adımının anlık zıplaması gizlenir (JS tetikler). */
  #sidebar_footer.sidebar-footer-settling {
    animation: sidebar-footer-settle 0.3s ease;
  }
}
@keyframes sidebar-footer-settle {
  0% { opacity: 1; }
  35% { opacity: 0.12; }
  65% { opacity: 0.12; }
  100% { opacity: 1; }
}

/* ---- Görsel büyüteci (lightbox) — DMS olay görselleri için paylaşılan; body'ye eklenir, tüm modal/toast üstünde ---- */
.img-zoomable {
  cursor: zoom-in;
}
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.28s ease;
  cursor: zoom-out;
  /* Yalnız görünürken (.open) tıklamayı yakala → yükleme sırasında ve kapanış fade'inde alttaki UI tıklanabilir kalır */
  pointer-events: none;
}
.img-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.img-lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}
/* Video büyüteci: letterbox alanları her temada siyah zeminde kalsın. */
video.img-lightbox-img {
  background: #000;
  will-change: transform;
}
/* Origin bilinmiyorsa (fallback) hafif ölçek girişi; FLIP açıkken inline transform bunu ezer. */
.img-lightbox:not(.open) .img-lightbox-img {
  transform: scale(0.92);
}
.img-lightbox.open .img-lightbox-img {
  transform: scale(1);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* --- Harita büyüteci: gömülü mini harita modal olarak genişler (kap taşınır, tuval ölçeklenmez) --- */
.map-expandable {
  cursor: zoom-in;
}
.map-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.28s ease;
  /* Yalnız görünürken tıklamayı yakala → kapanış geçişinde alttaki UI tıklanabilir kalır */
  pointer-events: none;
}
.map-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
/* Geometri geçişi (left/top/width/height) JS'ten px olarak sürülür; transform YOK — tuval bulanıklaşmasın. */
.map-expanded {
  position: fixed;
  z-index: 1301;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  transition:
    left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Kapatma düğmesi haritanın (z-index 1301) üstünde kalmalı — dar ekranda kap köşeye kadar büyüyebiliyor. */
.map-lightbox .img-lightbox-close {
  z-index: 1302;
}
/* Kap modaldayken kartın yüksekliği zıplamasın diye yerinde duran boşluk. */
.map-expand-placeholder {
  border-radius: 0.625rem;
  background: var(--color-muted, #f3f4f6);
}
@media (prefers-reduced-motion: reduce) {
  .map-expanded {
    transition: none;
  }
}

/* --- Oynatıcı büyüteci: video kabı (oynatıcı + zaman çubuğu) harita büyüteciyle aynı desenle modal açılır --- */
/* Görüntü akarken kap tıklanabilir (büyüt); modal açıkken imleç ipucu kalkar. */
.vplayer-can-expand:not(.vplayer-expanded) .vshow-player {
  cursor: zoom-in;
}
/* Geometri geçişi (left/top/width/height) JS'ten px olarak sürülür; kap dikey flex olur ki zaman
   çubuğu doğal yüksekliğini alsın, kalan alanı video doldursun (aspect-ratio modalda devre dışı). */
.vshow-player-wrap.vplayer-expanded {
  position: fixed;
  z-index: 1301;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  transition:
    left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vplayer-expanded .vshow-player {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vshow-player-wrap.vplayer-expanded {
    transition: none;
  }
}

.img-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.img-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .img-lightbox,
  .img-lightbox.open .img-lightbox-img {
    transition: opacity 0.15s ease;
  }
  .img-lightbox:not(.open) .img-lightbox-img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   Filo analitik paneli (/fleet-analytics) — Metronic'te olmayan panel/grafik sınıfları.
   Renkler Metronic token'larından (var(--border) vb.) okunur → koyu mod bedelsiz gelir;
   SERİ renkleri buraya YAZILMAZ (tek kaynak: pages/fleet-analytics/fleet-metrics.js).
   -------------------------------------------------------------------------- */

/* GİZLEME KURALINI GERİ KAZANDIR — panelin İLK kuralı olmalı.
   Metronic bundle'ının `.hidden { display: none }`'ı ve tarayıcının `[hidden]`'ı, aşağıdaki `display: flex/grid`
   kurallarıyla AYNI özgüllüktedir ve onlardan ÖNCE yüklenir → ezilirler. Üç somut sonucu vardı:
     · `.fa-grid` sekme paneli gizlenmiyordu → dört sekmenin kartları aynı ekranda alt alta çıkıyor, sekmeye
       basmak hiçbir şeyi değiştirmiyor gibi görünüyordu (JS doğru çalışıyor, sınıf ekleniyor ama etkisi yok).
     · `.fa-state` durum örtüsü veri gelince gizlenmiyordu → her kartın altında 180 px boş kutu.
     · `.fa-filter-field` → Vardiya modülü KAPALI tenant'ta vardiya filtresi görünüyordu.
   İki-sınıf/attribute özgüllüğüyle tek yerden kapsanır (kart-kart yazmak yeni kartta yine unutulur).
   Aynı tuzağın video oynatıcıdaki muadilleri: .vshow-timeline.hidden, .vshow-stop-btn.hidden. */
[data-fa-pane].hidden,
[data-fa-pane][hidden],
.fa-filter-field.hidden,
[data-fa-card] [hidden],
[data-fa-pane] [hidden] {
  display: none;
}

/* Sekme çubuğu: dar ekranda kaydırılabilir KALIR (4 sekme sığmazsa erişilemez olmasın) ama çubuğun kendisi
   gizlenir — masaüstünde hiç taşma yokken bile görünüp paneli kirletiyordu. map-dms-modal-scroll ile aynı desen. */
.fa-tabs {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.fa-tabs::-webkit-scrollbar {
  display: none;
}
/* Sekme başlığı: renk/alt çizgi geçişi sert atlamaz (aktif sekme yumuşak devralır). */
.fa-tab {
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Sekme İÇERİĞİ: pane görünür olurken TEK SEFERLİK yumuşak giriş. Grafiklerin kendi animasyonları kapalı kalır
   (canlı yenilemede titreme yasak) — bu geçiş yalnız kullanıcı sekme değiştirince koşar, veri tazelemede koşmaz.
   translateY layout kutusunu değiştirmediği için ApexCharts'ın açılış ölçümünü bozmaz. */
[data-fa-pane].fa-pane-enter {
  animation: fa-pane-in 0.18s ease-out;
}
@keyframes fa-pane-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fa-tab {
    transition: none;
  }
  [data-fa-pane].fa-pane-enter {
    animation: none;
  }
}

/* Canlı akış göstergesi (başlık sağı) */
.fa-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #00a63e;
  box-shadow: 0 0 0 3px rgba(0, 166, 62, 0.18);
  animation: fa-pulse 2s ease-in-out infinite;
}
@keyframes fa-pulse {
  50% { opacity: 0.35; }
}

/* ---- Filtre çubuğu: tek satır, kart İÇİNDE DEĞİL ---- */
.fa-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.fa-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fa-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.fa-filter-select {
  min-width: 9rem;
  max-width: 14rem;
}
/* Sürücü süzgeci ARAMALI tek kutu (select değil): genişliği select'lerle aynı hizada durur. Açılan panel
   host'a göre konumlanır — createLookupCombobox host'a position:relative basar. */
.fa-filter-combo {
  min-width: 9rem;
  max-width: 14rem;
}
.fa-filter-input {
  width: 100%;
}
/* Kesme notu: grup listesi tavana takıldıysa kaç gruptan kaçının göründüğü yazılır. */
.fa-filter-note {
  font-size: 11px;
  color: var(--muted-foreground);
}
.fa-filter-range {
  flex: 1 1 auto;
}
.fa-range-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fa-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--input);
  border-radius: 6px;
  background: var(--card);
  color: var(--secondary-foreground);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}
.fa-range-btn:hover {
  background: var(--accent);
}
.fa-range-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
/* flatpickr takviminin bağlandığı gizli girdi: yer kaplamaz, odak almaz */
.fa-range-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.fa-filter-reset {
  align-self: flex-end;
}

/* ---- KPI şeridi ---- */
.fa-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px;
}
.fa-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  min-width: 0;
}
.fa-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fa-tile-ic {
  font-size: 14px;
  color: var(--muted-foreground);
}
.fa-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--secondary-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-tile-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
/* Büyük tek sayı: oransal figürler (tabular-nums büyük punto'da gevşek okunur) */
.fa-tile-num {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--foreground);
  font-variant-numeric: normal;
}
.fa-tile-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
}
.fa-tile-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fa-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 700;
}
.fa-delta i {
  font-size: 10px;
}
.fa-delta-good { color: #00a63e; }
.fa-delta-bad { color: #dc2626; }
.fa-delta-flat { color: var(--muted-foreground); }
.fa-tile-prev {
  font-size: 10.5px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-tile-spark {
  height: 34px;
  margin: 0 -4px -4px;
}

/* ---- Grafik ızgarası (12 kolon; mobilde tek kolon) ---- */
/* Satırdaki kartlar STREÇ ile eşit yüksekliktedir (varsayılan). Bu güvenli, çünkü tablo ikizi artık kartın
   içinde açılmıyor (modalda, table-modal.js) — kart yüksekliğini oynatan tek şey buydu. */
.fa-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.fa-grid > .fa-card { grid-column: span 12; }
@media (min-width: 64rem) {
  .fa-grid > .fa-col-4 { grid-column: span 4; }
  .fa-grid > .fa-col-5 { grid-column: span 5; }
  .fa-grid > .fa-col-6 { grid-column: span 6; }
  .fa-grid > .fa-col-7 { grid-column: span 7; }
  .fa-grid > .fa-col-8 { grid-column: span 8; }
  .fa-grid > .fa-col-12 { grid-column: span 12; }
}

/* ---- Grafik kartı ---- */
.fa-card {
  min-width: 0;
}
.fa-card-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-card-badge {
  padding: 1px 7px;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--secondary-foreground);
  font-size: 10.5px;
  font-weight: 700;
}
.fa-table-toggle,
.fa-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Büzülme YOK: aynı şeritte esnek bir öğe (tablo kartının arama kutusu) varken 26 px'lik kare düğme
     eziliyor ve kenarlığı bozuk bir dikdörtgene dönüyordu. */
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--input);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
}
.fa-table-toggle:hover,
.fa-info-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}
/* Bilgi balonu: body'ye fixed eklenir (JS konumlar) — kart/kolon overflow'u kırpamasın. */
.fa-info-pop {
  position: fixed;
  z-index: 120;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-foreground);
}
/* Dinamik not (veriye bağlı sayılar) statik açıklamadan çizgiyle ayrılır. */
.fa-info-pop-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--input);
  color: var(--muted-foreground);
}
.fa-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Grafik konteynerinin ÖLÇÜLEBİLİR yüksekliği olmalı: height:'100%' 0 yükseklikli kutuda hiç çizmez.
   Yükseklikler x ekseni bandını İÇERİR (kart içinde minik dikey kaydırma çıkmaz). */
.fa-chart {
  min-width: 0;
  min-height: 220px;
}
.fa-h-300 { height: 300px; }
.fa-h-320 { height: 320px; }
.fa-h-340 { height: 340px; }
/* V3 (yakıt aykırıları) + V4 (top/bottom) aynı satırı paylaşır: iki grafik kabı AYNI SABİT px bütçesini alır →
   satırda grafikler eşit yükseklikte. SABİT px ŞART: flex:1 kap + apex '100%' kombinasyonu streç zinciriyle
   GERİ BESLEME DÖNGÜSÜ kuruyordu (SVG kabı büyütür → resize → apex yeniden ölçer → sonsuza dek uzar). Grafikler
   apex'e ölçülmüş SAYISAL yükseklik geçer; overflow emniyeti taşan SVG'nin komşuyu itmesini engeller. */
[data-fa-card="v3"] [data-fa-chart],
[data-fa-card="v4"] [data-fa-chart] {
  height: 400px;
  flex: none;
  min-height: 0;
  overflow: hidden;
}
/* V4'ün iki paneli (en iyi / en kötü) sabit kabı eşit bölüşür; canvas pane'in kalanını doldurur. */
[data-fa-card="v4"] .fa-split {
  height: 100%;
  min-height: 0;
}
.fa-split-pane {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.fa-split-pane > .fa-canvas {
  flex: 1 1 0;
  min-height: 0;
}
.fa-scroll-380 {
  height: 380px;
  overflow-y: auto;
}
.fa-canvas {
  min-height: 140px;
  min-width: 0;
}

/* Refetch: önceki render düşük opaklıkta tutulur — skeleton YOK, layout zıplaması YOK */
.fleet-refreshing .fa-chart,
.fleet-refreshing.fa-kpi {
  opacity: 0.45;
  transition: opacity 0.15s ease-out;
}

/* ---- Durum örtüleri (loading / empty / error / info / ok) ---- */
.fa-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-foreground);
}
.fa-state-sm { min-height: 80px; }
.fa-state i { font-size: 26px; }
.fa-state-error { color: var(--destructive); }
.fa-state-ok { color: #00a63e; }
.fa-retry {
  padding: 5px 12px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--card);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.fa-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--input);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: fa-spin 0.8s linear infinite;
}
@keyframes fa-spin {
  to { transform: rotate(360deg); }
}

/* ---- O1 donut + doğrudan etiketli legend ---- */
/* Grafik kutusu kartı doldurur; legend en alta sabitlenir, artan boşluk pasta ile legend arasında erir. */
.fa-donut {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fa-donut[hidden] { display: none; } /* display:flex UA [hidden]'ını ezer — tablo geçişi için şart */
.fa-donut-canvas {
  flex: 0 0 auto;
  height: 280px; /* status-donut.js'teki apex height ile senkron */
  min-width: 0;
}
.fa-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
}
.fa-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}
.fa-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.fa-legend-ic {
  font-size: 13px;
  color: var(--muted-foreground);
}
.fa-legend-label {
  flex: 1;
  color: var(--secondary-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-legend-value {
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.fa-legend-share {
  width: 3.4rem;
  text-align: right;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* ---- O1 dilim modalı: tema değişkenli sayfa-düzeyi overlay (harita modalının sabit açık renkleri kullanılmaz) ---- */
.fa-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fa-modal-backdrop.open { opacity: 1; }
.fa-modal {
  width: 100%;
  max-width: 520px;
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.fa-modal-backdrop.open .fa-modal { transform: scale(1); }
/* Tablo ikizi modalı: tablo kolonları dar kartta kırpılmasın diye geniş varyant. */
.fa-modal-wide {
  max-width: 860px;
  max-height: min(80vh, 720px);
}
.fa-table-modal-body { padding: 8px 14px 14px; }
/* Uzun listede başlıklar (ve sıralama okları) kaydırmada görünür kalır. */
.fa-table-modal-body thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
}
/* Tıklanabilir tablo satırı (onRow'lu modal tabloları): imleç + hover bunu söyler. */
.fa-row-click { cursor: pointer; }
.fa-row-click:hover td { background: var(--accent); }
/* Sıralanabilir başlık: tıklanabilirlik imleç + ok ile söylenir; aktif sütunun oku yön bildirir. */
.fa-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.fa-th-sort:hover .kt-table-col-label { color: var(--foreground); }
.fa-sort-ic {
  margin-inline-start: 4px;
  font-size: 11px;
  vertical-align: -1px;
  color: var(--primary);
}
.fa-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--input);
}
.fa-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
}
.fa-modal-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--secondary-foreground);
  /* Başlık satırını alt başlık bölmesin: metin kısa tutuluyor (dilim adı ya da kartın ölçüt notu), yine de
     dar ekranda parçanın ortasından kırılmak yerine bütün olarak kaymalı. */
  white-space: nowrap;
}
.fa-modal-count {
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary-foreground);
}

/* Ortak araç listesi modalı: sekme şeridi + araç çubuğu (arama · sayfa künyesi · gezinme) + kapsam notu.
   Panelin kart sekmelerinden AYRI sınıflar: modal başlık altında dururlar ve kaydırma kabı gövdededir. */
.fa-modal-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--input);
}
.fa-modal-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
}
.fa-modal-tab:hover {
  color: var(--foreground);
}
.fa-modal-tab.active {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}
.fa-modal-tab-count {
  padding: 1px 7px;
  border-radius: 9999px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.fa-modal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--input);
}
.fa-modal-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22rem;
}
.fa-modal-range {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.fa-modal-pager {
  display: inline-flex;
  gap: 4px;
}
.fa-modal-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--input);
  border-radius: 6px;
  background: transparent;
  color: var(--secondary-foreground);
  font-size: 12px;
  cursor: pointer;
}
.fa-modal-page:hover:not(:disabled) {
  background: var(--accent);
  color: var(--foreground);
}
.fa-modal-page:disabled {
  opacity: .4;
  cursor: default;
}
/* Kapsam/dürüstlük satırı: hücrenin kaç dilimi topladığı gibi bağlam. */
.fa-modal-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
}
.fa-modal-close {
  border: 0;
  background: transparent;
  padding: 4px;
  border-radius: 6px;
  color: var(--muted-foreground);
  cursor: pointer;
}
.fa-modal-close:hover {
  background: var(--accent);
  color: var(--foreground);
}
.fa-modal-body {
  overflow-y: auto;
  padding: 10px 14px 14px;
}
.fa-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fa-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: 8px;
}
/* İmleç ve vurgu YALNIZ gerçekten tıklanabilir satırda: araç detayı izni (vehicles.read) olmayan
   kullanıcıda satır link olarak üretilmiyor, pointer sinyali vermek yanıltıcı olurdu. */
.fa-modal-row[data-fa-vehicle] { cursor: pointer; }
.fa-modal-row[data-fa-vehicle]:hover { background: var(--accent); }
.fa-modal-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fa-modal-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
.fa-modal-row-sub {
  font-size: 11.5px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-modal-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.fa-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.fa-modal-row-seen {
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
/* Dilim ve legend satırı tıklanabilir (O1 durum donut'u + S3 DMS donut'u): imleç bunu söylemek zorunda. */
.fa-donut-canvas .apexcharts-series path { cursor: pointer; }
/* Isı haritası karosu tıklanabilir (V5 → hücre araç kırılımı modalı). */
.fa-heat-canvas .apexcharts-heatmap-rect { cursor: pointer; }
.fa-legend-row[data-fa-state],
.fa-legend-row[data-fa-dms-index] { cursor: pointer; border-radius: 6px; }
.fa-legend-row[data-fa-state]:hover,
.fa-legend-row[data-fa-dms-index]:hover { background: var(--accent); }

/* ---- V5 tuvali ---- */
/* Tuval + ölçek legend'i AYNI sabit yükseklikli kabı paylaşır → kap FLEX KOLON olmak zorunda: düz blok
   bırakıldığında Apex'in SVG'si tuvali kabın (340 px) ötesine büyütüyor, legend kutunun DIŞINA taşıp
   altındaki not satırının üstüne biniyordu (2026-08-14, kullanıcı tespiti). overflow:hidden ŞART — taşan SVG
   kabı büyütürse apex yeniden ölçer ve streç geri besleme döngüsü kurulur (bkz. V3/V4 notu). */
[data-fa-card="v5"] [data-fa-chart] {
  display: flex;
  flex-direction: column;
  flex: none;
  overflow: hidden;
}
.fa-heat-canvas {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Sürekli ölçek legend'i (V5) — sequential renk okumasının zorunlu eşlikçisi.
   SOLA hizalı: hemen altındaki not satırıyla aynı sol kenarı paylaşır, iki bilgi satırı tek blok okunur
   (sağa hizalıyken not solda kalıp zikzak yapıyordu). flex:none → kalan alanı tuval alır. */
.fa-scale-legend {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  gap: 6px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--muted-foreground);
}
.fa-scale-boxes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.fa-scale-box {
  width: 18px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
/* Bant kenarları kutuların ARASINA yazılır (sabit, eşit aralıklı OLMAYAN eşikler tahmin edilemez).
   tabular-nums: tek/çift haneli kenarlar (5 · 10 · 100) kutuları kaydırmasın. */
.fa-scale-label {
  font-weight: 500;
}
.fa-scale-tick {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---- V4 küçük katlar (top / bottom) ---- */
/* V4 barları tıklanabilir: aracın detay sayfasını yeni sekmede açar (imleç bunu haber verir). */
[data-fa-card="v4"] .apexcharts-bar-area { cursor: pointer; }
/* Tablo ikizindeki araç bağlantısı — grafik tıklamasının klavyeyle erişilebilir ikizi. */
.fa-cell-link {
  color: var(--primary);
  text-decoration: none;
}
.fa-cell-link:hover { text-decoration: underline; }

/* ---- V1 gömülü tablo (tüketim ve rölanti sıralaması) ---- */
/* Düğme şeridinin sırası: [arama] [ⓘ bilgi] [dışa aktar]. Bilgi düğmesini kart iskeleti JS ile şeridin
   SONUNA ekliyor (bu kartta "tabloyu göster" düğmesi yok, çünkü tablo zaten görünür) — dışa aktarma
   kabını order ile arkaya alıp diğer kartlardaki sırayı koruyoruz. */
.fa-card-tools > [data-fa-cons-export] {
  order: 1;
}
/* Arama kutusu esnek: şerit daraldığında düğmeler değil O büzülür (min-w-48 sabit genişlik istiyordu ve
   dar kartta düğmeleri eziyordu). */
.fa-card-tools > .kt-input {
  min-width: 0;
  flex: 1 1 12rem;
  max-width: 18rem;
}
/* Gövde grafiğe değil TABLOYA ev sahipliği yapar: .fa-chart'ın min-height'ı burada geçerli değil (kutu
   içeriğiyle büyür). Kart `kt-card-grid` olduğu için tablo kart kenarına kadar uzanır, footer kartın parçasıdır. */
.fa-card-table {
  min-width: 0;
}
/* Dokuz kolon KAYDIRMASIZ sığmalı (kullanıcı kararı 2026-08-24): başlıklar kısaltıldı, sıra (#) kolonu kalktı
   ve yatay boşluk bir adım daraltıldı — 9 × ~100 px + boşluk ≈ 1150 px, sidebar açık kart alanına sığar.
   Başlık ve değer sarmalanmaz: kolon genişliği sayının okunacağı asgari genişliktir. */
.fa-card-table .kt-table th,
.fa-card-table .kt-table td {
  white-space: nowrap;
  padding-inline: 8px;
}
.fa-card-table .kt-table th:first-child,
.fa-card-table .kt-table td:first-child {
  padding-inline-start: 16px;
}
.fa-card-table .kt-table th:last-child,
.fa-card-table .kt-table td:last-child {
  padding-inline-end: 16px;
}
/* Sayısal kolonlar tabular: sayfa değiştikçe basamaklar kaymasın (sıralama okunurken göz aynı hizada kalır). */
.fa-card-table .kt-table td {
  font-variant-numeric: tabular-nums;
}
/* Firma Ayarları'ndaki hedef rölanti oranını AŞAN değer. Renk tek başına anlam taşımaz: sayı yazılı, kolon
   başlığı ölçüyü söylüyor, hedefin kendisi bilgi balonunda. Amber'in koyu/açık adımı metin kontrastı içindir. */
.fa-over-target { color: #b45309; }
.dark .fa-over-target { color: #fbbf24; }

/* ---- Araç risk tablosu (O9) ----
   Skor hücresinin bandı: eşikler DÖNEMİN dağılımından geliyor ve bilgi balonunda yazılı — renk tek başına
   anlam taşımaz, sayının kendisi zaten hücrede. Normal bantta vurgu YOK (her satırı boyamak riski görünmez
   kılar). Renkler tema değişkeni yerine sabit adımlardır: durum paleti apex temasında yaşıyor, tablo hücresi
   ondan bağımsız okunmalı (koyu/açık ayrımı metin kontrastı içindir). */
.fa-risk-critical { color: #dc2626; }
.dark .fa-risk-critical { color: #f87171; }
.fa-risk-high { color: #ea580c; }
.dark .fa-risk-high { color: #fb923c; }

/* Satır tıklanabilir: modal açar. İmleç + hover ipucu + klavye odağı (satır role="button" taşıyor). */
.fa-row-click { cursor: pointer; }
.fa-row-click:hover { background: var(--accent); }
.fa-row-click:focus-visible {
  outline: 2px solid var(--color-primary, #1b84ff);
  outline-offset: -2px;
}

.fa-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.fa-split-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ---- O4 olay akışı / O5 dikkat listesi (tablo formu) ---- */
.fa-feed,
.fa-attn {
  display: flex;
  flex-direction: column;
}
.fa-feed-row,
.fa-attn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.fa-feed-row:last-child,
.fa-attn-row:last-child { border-bottom: 0; }
.fa-feed-row.is-link,
.fa-attn-row.is-link { cursor: pointer; }
.fa-feed-row.is-link:hover,
.fa-attn-row.is-link:hover { background: var(--accent); }
.fa-feed-ic {
  font-size: 14px;
  color: var(--muted-foreground);
}
.fa-attn-sev { font-size: 15px; }
.fa-feed-main,
.fa-attn-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fa-feed-label,
.fa-attn-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-feed-type,
.fa-attn-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
}
.fa-attn-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--secondary-foreground);
  white-space: nowrap;
}
.fa-feed-time,
.fa-attn-time {
  font-size: 10.5px;
  color: var(--muted-foreground);
  white-space: nowrap;
}
/* Limit ihlali satırında değerin altındaki eşik künyesi (değer ile eşik yan yana okunur). */
.fa-attn-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.fa-attn-limit {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* Kademeli listenin dip nöbetçisi: görünür alana girince bir dilim daha basılır. */
.fa-feed-more,
.fa-attn-more {
  padding: 10px 2px;
  text-align: center;
  font-size: 11px;
  color: var(--muted-foreground);
}

/* ---- Tablo ikizi ---- */
.fa-table-scroll {
  min-width: 0;
}
.fa-table th,
.fa-table td {
  font-size: 12px;
  padding: 5px 8px;
}
.fa-table td {
  font-variant-numeric: tabular-nums;
}
.fa-table-note {
  padding: 6px 2px 0;
  font-size: 11px;
  color: var(--muted-foreground);
}
.fa-cell-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Segment göstergesi hücresi (pil kademesi): gövde + terminal + dolu segmentler tek SVG'de, renk yalnız
   İKONU boyar — metin ink token'ında kalır ki kademe adı renk körlüğünden bağımsız okunabilsin. */
.fa-gauge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.fa-gauge-ic {
  flex: 0 0 auto;
  /* Satır yüksekliğine oturması için: ikon metnin taban çizgisiyle hizalanır, satırı büyütmez. */
  display: block;
  color: var(--muted-foreground);
}
/* Kritik kademe (0 segment) nabız gibi atar: cihaz ekibinin "0 bars (flashing)" kuralının karşılığı.
   Titreme değil yumuşak nefes — tablo satırında sert yanıp sönme okumayı zorlaştırır.
   Hareketi azaltma tercihi olan kullanıcıda animasyon kapanır, renk ve etiket bilgiyi taşımaya devam eder. */
.fa-gauge-critical .fa-gauge-ic {
  animation: fa-gauge-pulse 1.6s ease-in-out infinite;
}
@keyframes fa-gauge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-gauge-critical .fa-gauge-ic { animation: none; }
}

/* Faz 2/3 sekmelerinin yer tutucusu */
.fa-phase-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.fa-phase-note i { font-size: 18px; }

/* Kart altı okuma notu (ör. şeridin saat çözünürlüğü) — grafiğin nasıl okunacağını söyler, veri taşımaz. */
.fa-card-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-foreground);
}

/* S1 — Sürücü skor tablosu: satır-içi mini bar. Bar uzunluğu skoru, renk BANDI (durum) taşır; bant
   ayrıca metinle de yazılır → renk tek başına bilgi taşımaz. */
.fa-score-list {
  display: flex;
  flex-direction: column;
}
/* İki uçlu listenin bölüm başlığı ("En iyi 5" / "En kötü 5") — fa-split-title ile aynı ses. */
.fa-score-section {
  padding: 8px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.fa-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-width: 0;
}
.fa-score-row:last-child { border-bottom: 0; }
.fa-score-row:hover { background: var(--accent); }
.fa-score-row.is-selected { background: var(--accent); }
.fa-score-row.is-selected .fa-score-name { color: var(--primary); }
.fa-score-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.fa-score-rank {
  width: 18px;
  font-size: 11px;
  color: var(--muted-foreground);
  text-align: end;
  flex: none;
}
.fa-score-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-score-track {
  flex: none;
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
  overflow: hidden;
}
.fa-score-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
/* Yığılmış çubuk (S1 şoför DMS kartı): segmentler olay TİPİ payıdır, çubuk her satırda TAM genişliktir —
   uzunluk hacim sanılmasın diye sayı çubuğun yanında yazılı. Segment köşeleri düz: yuvarlak uçlar
   ortadaki segmentlerde boşluk gibi görünüyordu. */
.fa-score-track.is-stacked { display: flex; }
.fa-score-track.is-stacked .fa-score-fill { border-radius: 0; }
/* Satır içi ikincil metin (olay tipi dökümü / risk bileşenleri): kalan alanı alır, sığmazsa kırpılır. */
.fa-score-types {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-score-value {
  flex: none;
  width: 28px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: end;
}
.fa-score-band {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 88px;
  font-size: 11px;
  color: var(--muted-foreground);
}
.fa-score-partial { font-size: 12px; }
.fa-score-dist {
  flex: none;
  width: 68px;
  font-size: 11px;
  color: var(--muted-foreground);
  text-align: end;
}
@media (max-width: 640px) {
  .fa-score-track,
  .fa-score-dist { display: none; }
}

/* ---- Sürücü puan kırılımı modalı (S1 satır tıklaması) ---- */
.fa-dscore-list {
  display: flex;
  flex-direction: column;
}
.fa-dscore-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.fa-dscore-row:last-child { border-bottom: 0; }
.fa-dscore-row.is-missing { color: var(--muted-foreground); }
.fa-dscore-ic {
  flex: none;
  font-size: 14px;
  color: var(--muted-foreground);
}
.fa-dscore-name {
  flex: none;
  width: 120px;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-dscore-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--muted);
  overflow: hidden;
  min-width: 40px;
}
.fa-dscore-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.fa-dscore-value {
  flex: none;
  width: 28px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
/* Kırpılan puan çipi: kırpma varsa durum rengi konuşur, metin de yazar (renk tek başına anlam taşımaz). */
.fa-dscore-cut {
  flex: none;
  min-width: 92px;
  text-align: end;
  font-size: 11px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.fa-dscore-cut.is-cut { color: var(--destructive, #dc2626); font-weight: 600; }
.fa-dscore-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 2px 0;
  font-size: 12px;
  font-weight: 600;
}

/* ApexCharts özel tooltip gövdesi (rangeBar / scatter) */
.fa-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.4;
}
.fa-tip b { font-weight: 700; }

/* ---- Araç detay durum şeridi (Araç Takip tab'ı, state-timeline.js) ---- */
.vst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 8px;
}
.vst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.vst-ranges {
  display: flex;
  gap: 4px;
}
.vst-ranges button {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted-foreground);
  cursor: pointer;
}
.vst-ranges button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
/* Doğrudan etiket: renk asla tek başına anlam taşımaz (nokta + ikon + ad + süre + pay). */
.vst-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.vst-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--secondary-foreground);
}
.vst-legend-item.is-empty { opacity: 0.45; }
.vst-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex: none;
}
.vst-legend-ic {
  font-size: 13px;
  color: var(--muted-foreground);
}
.vst-legend-value { font-weight: 600; color: var(--foreground); }
.vst-legend-share { color: var(--muted-foreground); }
.vst-body { min-height: 108px; }
.vst-canvas { width: 100%; }
.vst-state {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted-foreground);
  font-size: 13px;
}
.vst-state i { font-size: 24px; }
.vst-retry {
  padding: 5px 13px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.vst-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: vst-spin 0.8s linear infinite;
}
@keyframes vst-spin {
  to { transform: rotate(360deg); }
}
/* Kaynak/kesinti uyarısı: şeridin ne İDDİA ETMEDİĞİNİ yazar (CAN yok → rölanti ayrımı yok, tarama kesildi). */
.vst-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.vst-note.hidden { display: none; }
/* ApexCharts özel tooltip gövdesi (durum dilimi). */
.vst-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  font-size: 11.5px;
  line-height: 1.4;
}
.vst-tip b { font-weight: 700; }
@media (max-width: 640px) {
  .vst-head { align-items: flex-start; flex-direction: column; }
}

/* "Özel" aralık takviminin görünmez anchor'ı; flatpickr paneli positionElement ile butonun altına iner. */
.vst-daterange {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Şeridin ApexCharts araç çubuğu (yalnız daralt/genişlet/sıfırla): ikonlar tema rengine uyar. */
.vst .apexcharts-toolbar { padding: 0; }
.vst .apexcharts-toolbar svg { fill: var(--muted-foreground); }
.vst .apexcharts-toolbar .apexcharts-selected svg { fill: var(--primary); }

/* ---------- Araç detayı "CAN Verileri" kart şeridi (vcs) ---------- */
/* Dönem filtresi görsel olarak durum şeridiyle AYNI (vst-ranges): iki bölüm aynı kartta üst üste durur. */
/* Kaydırma YALNIZ şeridin içindedir: kart kabı grid item'dır (minmax(auto, 1fr) → min-width:auto) ve zincirin
   herhangi bir halkası içeriğin min-content genişliğine büyürse taşma SAYFA GÖVDESİNE çıkıp yatay bar açar.
   Zincir 0'a indirilir + kap taşmayı keser; şerit kendi overflow-x'i ile kayar. */
#vshow-can-summary-card,
#vshow-can-summary {
  min-width: 0;
  overflow: hidden;
}
.vcs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  min-width: 0;
  overflow: hidden;
}
.vcs-head { min-width: 0; }
.vcs-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.vcs-ranges {
  display: flex;
  gap: 4px;
}
.vcs-ranges button {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted-foreground);
  cursor: pointer;
}
.vcs-ranges button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
/* Oklar şeridin ÜZERİNE biner; uçlarda gizlenirler (disabled değil) → kullanılamayan kontrol görünmez. */
.vcs-body {
  position: relative;
  min-height: 116px;
  min-width: 0;
}
/* Uçlarda yumuşak fade: yalnız o taraftaki ok görünürken (kart yarıda kesilmiş hissi vermesin). */
.vcs-body::before,
.vcs-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 1;
}
.vcs-body::before {
  left: 0;
  background: linear-gradient(to right, var(--background), transparent);
}
.vcs-body::after {
  right: 0;
  background: linear-gradient(to left, var(--background), transparent);
}
.vcs-body.has-prev::before,
.vcs-body.has-next::after { opacity: 1; }
.vcs-track {
  display: flex;
  align-items: stretch;
  column-gap: 12px;
  /* Şeridin kaydırma kutusu: genişliği kabı AŞAMAZ (taşan kartlar burada kayar, sayfada değil). */
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
  /* Native scrollbar gizli: gezinme oklar + touch/sürükleme ile yapılır. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.vcs-track::-webkit-scrollbar { display: none; }
.vcs-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.vcs-track:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.vcs-card {
  flex: none;
  /* Sabit genişlik bandı: uzun etiketler ("Durchschnittliche Fahrgeschwindigkeit") kartı şişirip
     şeridi ölçüsüz uzatmasın — metin sarar, kart ölçüsünü korur. */
  min-width: 150px;
  max-width: 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  text-align: center;
}
.vcs-ic {
  width: 26px;
  height: 26px;
  color: var(--m-color, var(--primary));
}
.vcs-ic svg {
  width: 100%;
  height: 100%;
}
.vcs-name {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted-foreground);
}
.vcs-val {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
}
.vcs-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary-foreground);
}
.vcs-sub {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted-foreground);
}
/* Yükleme örtüsü: kart iskeleti (global .kt-skeleton shimmer'ı) — yükseklik zıplaması olmasın. */
.vcs-card.is-skeleton { gap: 6px; }
.vcs-sk-ic {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
}
.vcs-sk-name {
  width: 76px;
  height: 10px;
}
.vcs-sk-val {
  width: 52px;
  height: 16px;
}
.vcs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  color: var(--secondary-foreground);
  font-size: 12px;
  cursor: pointer;
}
/* Mobilde native touch scroll yeterli → oklar yalnız md ve üstünde. */
@media (min-width: 768px) {
  .vcs-nav { display: flex; }
}
.vcs-nav.is-hidden { display: none; }
/* Oklar kabın İÇİNDE durur: kap taşmayı kestiği için (overflow:hidden) dışa taşan ok kırpılırdı. */
.vcs-nav-prev { left: 2px; }
.vcs-nav-next { right: 2px; }
.vcs-state {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  color: var(--muted-foreground);
  font-size: 13px;
}
.vcs-state i { font-size: 24px; }
.vcs-retry {
  padding: 5px 13px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

/* ---- Dışa aktarma düğmesi (liste kartları + analitik kartları) ----
   Metronic KTMenu YERİNE kendi açılımı: düğme SPA sayfa geçişinde dinamik eklenir ve KTMenu'nün
   sonradan yeniden init'i bu akışta menüyü ölü bırakıyor. */
.exp-wrap {
  position: relative;
  display: inline-flex;
}
.exp-menu,
.row-menu-list {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 30;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
/* [hidden] tek başına display:flex'i ezemez → gizleme kuralı açıkça yazılır. */
.exp-menu[hidden],
.row-menu-list[hidden] {
  display: none;
}
/* Tablo satırı aksiyon menüsü: TEK gezici düğüm, konumu JS'te viewport koordinatıyla verilir.
   Hücre içinde absolute konumlanan bir menü, tabloyu saran overflow-x:auto kabı tarafından son
   satırlarda kırpılırdı. top/left inline yazıldığı için buradaki auto'lar yalnız sıfırlama. */
.row-menu-list {
  position: fixed;
  top: auto;
  inset-inline-end: auto;
  z-index: 60;
  min-width: 200px;
}
.exp-item,
.row-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground);
  font-size: 13px;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.exp-item:hover,
.exp-item:focus-visible,
.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: var(--accent);
}
.exp-item i,
.row-menu-item i {
  font-size: 15px;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Aranabilir tek-alan seçici (lookup combobox) — form alanlarında kullanılır.
   Süzgeç şeritlerindeki "arama girdisi + <select>" ikilisi formda iki kutu
   gösteriyordu; burada tek girdi var, sonuçlar altında açılan panelde.
   Panel display ile açılır (`.hidden` sınıfı bu projede display:flex'i ezemiyor).
   -------------------------------------------------------------------------- */
.kt-combobox-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  inset-inline: 0;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.kt-combobox-panel.is-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--muted-foreground);
}
.kt-combobox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.kt-combobox-option:hover,
.kt-combobox-option.is-active {
  background: var(--accent);
}
.kt-combobox-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.kt-combobox-option-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
}
.kt-combobox-option-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
}
/* Rozetli seçenek (operasyonel durum): rozet metin genişliğinde kalmalı, sütunu germemeli. */
.kt-combobox-option-text > .kt-badge {
  align-self: flex-start;
}
.kt-combobox-option-subtitle {
  font-size: 11.5px;
  color: var(--muted-foreground);
}
.kt-combobox-note {
  padding: 6px 10px 2px;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* Metronic derlemesinde bulunmayan utility: şablonlarda kullanılıyor ama üretilmiyor (Tailwind
   içerik taraması .ejs dosyalarını kapsamaz), bu yüzden elle tanımlanır. */
.w-fit {
  width: fit-content;
}

/* --------------------------------------------------------------------------
   TEXTAREA TABANI
   Metronic'in `kt-input`i SABİT yükseklik (h-8.5) tanımlar ve `kt-input:not(input)` kuralı öğeyi flex
   kabına çevirir; bir textarea o sınıfı aldığında rows ezilir ve alan tek satırlık girdi gibi görünür.
   Doğru sınıf `kt-textarea` (yükseklik tanımlamaz), ama yanlış sınıfla gelen textarea da bozuk
   görünmesin diye kural ikisini birden kapsar. min-height taban verir; rows daha büyükse o kazanır.
   -------------------------------------------------------------------------- */
textarea.kt-input {
  display: block;
  height: auto;
  padding: 0.75rem;
}
textarea.kt-input,
textarea.kt-textarea {
  min-height: 6rem;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   CİHAZ DETAYI — ARIZA KARTI GİZLEME
   Metronic derlemesinde `.hidden` `visibility:hidden`a çözülüyor (display:none DEĞİL), yani o sınıfla
   gizlenen kart görünmez olur ama YER KAPLAR — arıza kartı MetaVision dışı cihazlarda grid'de boş bir
   sütun bırakırdı. Kart ve içindeki durum satırları bu yüzden kendi display kuralını kullanır.
   -------------------------------------------------------------------------- */
.dshow-hidden {
  display: none !important;
}

/* ==== Anasayfa arıza kartı: kod satırı → cihaz listesi → cihaz künyesi ====
   Kart satırı kırılımın ALTINA iniyor (o kodu taşıyan cihazlar); ikinci adım acil durum konum modalının
   kabuğunu paylaşır, burada yalnız genişlik ve vurgu parçaları var. */
.fault-summary-row {
  cursor: pointer;
  margin-inline: -0.375rem;
  padding-inline: 0.375rem;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.fault-summary-row:hover {
  background: var(--accent);
}
.fault-summary-row:focus-visible {
  outline: 2px solid var(--color-primary, #1b84ff);
  outline-offset: -2px;
}
.dfault-modal {
  max-width: 560px;
}
.dfault-body {
  padding-top: 0.25rem;
}
/* Kartta TIKLANAN kodun satırı: beş arızalı bir cihazda hangisi için gelindiği görünmek zorunda. */
.dfault-focus {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: inset 3px 0 0 var(--color-destructive, #dc2626);
}

/* Cihaz detayı → arıza kartında kaba arızanın KODLU AÇILIMI. Girinti + sol çizgi "bu, üstteki arızanın
   ayrıntısı" ilişkisini gözle kurar; alt alta iki düz satır iki ayrı arıza gibi okunurdu. */
.dshow-fault-children {
  margin-top: 0.375rem;
  margin-left: 0.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border, #dbdfe9);
}

.toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}
/* packages/core/src/css/flag-offsets.css */
:root {
  --iti-flag-width: 20px;
  --iti-flag-count: 244;
}
.iti__ac {
  --iti-flag-offset: 0;
}
.iti__ad {
  --iti-flag-offset: -1;
}
.iti__ae {
  --iti-flag-offset: -2;
}
.iti__af {
  --iti-flag-offset: -3;
}
.iti__ag {
  --iti-flag-offset: -4;
}
.iti__ai {
  --iti-flag-offset: -5;
}
.iti__al {
  --iti-flag-offset: -6;
}
.iti__am {
  --iti-flag-offset: -7;
}
.iti__ao {
  --iti-flag-offset: -8;
}
.iti__ar {
  --iti-flag-offset: -9;
}
.iti__as {
  --iti-flag-offset: -10;
}
.iti__at {
  --iti-flag-offset: -11;
}
.iti__au {
  --iti-flag-offset: -12;
}
.iti__aw {
  --iti-flag-offset: -13;
}
.iti__ax {
  --iti-flag-offset: -14;
}
.iti__az {
  --iti-flag-offset: -15;
}
.iti__ba {
  --iti-flag-offset: -16;
}
.iti__bb {
  --iti-flag-offset: -17;
}
.iti__bd {
  --iti-flag-offset: -18;
}
.iti__be {
  --iti-flag-offset: -19;
}
.iti__bf {
  --iti-flag-offset: -20;
}
.iti__bg {
  --iti-flag-offset: -21;
}
.iti__bh {
  --iti-flag-offset: -22;
}
.iti__bi {
  --iti-flag-offset: -23;
}
.iti__bj {
  --iti-flag-offset: -24;
}
.iti__bl {
  --iti-flag-offset: -25;
}
.iti__bm {
  --iti-flag-offset: -26;
}
.iti__bn {
  --iti-flag-offset: -27;
}
.iti__bo {
  --iti-flag-offset: -28;
}
.iti__bq {
  --iti-flag-offset: -29;
}
.iti__br {
  --iti-flag-offset: -30;
}
.iti__bs {
  --iti-flag-offset: -31;
}
.iti__bt {
  --iti-flag-offset: -32;
}
.iti__bw {
  --iti-flag-offset: -33;
}
.iti__by {
  --iti-flag-offset: -34;
}
.iti__bz {
  --iti-flag-offset: -35;
}
.iti__ca {
  --iti-flag-offset: -36;
}
.iti__cc {
  --iti-flag-offset: -37;
}
.iti__cd {
  --iti-flag-offset: -38;
}
.iti__cf {
  --iti-flag-offset: -39;
}
.iti__cg {
  --iti-flag-offset: -40;
}
.iti__ch {
  --iti-flag-offset: -41;
}
.iti__ci {
  --iti-flag-offset: -42;
}
.iti__ck {
  --iti-flag-offset: -43;
}
.iti__cl {
  --iti-flag-offset: -44;
}
.iti__cm {
  --iti-flag-offset: -45;
}
.iti__cn {
  --iti-flag-offset: -46;
}
.iti__co {
  --iti-flag-offset: -47;
}
.iti__cr {
  --iti-flag-offset: -48;
}
.iti__cu {
  --iti-flag-offset: -49;
}
.iti__cv {
  --iti-flag-offset: -50;
}
.iti__cw {
  --iti-flag-offset: -51;
}
.iti__cx {
  --iti-flag-offset: -52;
}
.iti__cy {
  --iti-flag-offset: -53;
}
.iti__cz {
  --iti-flag-offset: -54;
}
.iti__de {
  --iti-flag-offset: -55;
}
.iti__dj {
  --iti-flag-offset: -56;
}
.iti__dk {
  --iti-flag-offset: -57;
}
.iti__dm {
  --iti-flag-offset: -58;
}
.iti__do {
  --iti-flag-offset: -59;
}
.iti__dz {
  --iti-flag-offset: -60;
}
.iti__ec {
  --iti-flag-offset: -61;
}
.iti__ee {
  --iti-flag-offset: -62;
}
.iti__eg {
  --iti-flag-offset: -63;
}
.iti__eh {
  --iti-flag-offset: -64;
}
.iti__er {
  --iti-flag-offset: -65;
}
.iti__es {
  --iti-flag-offset: -66;
}
.iti__et {
  --iti-flag-offset: -67;
}
.iti__fi {
  --iti-flag-offset: -68;
}
.iti__fj {
  --iti-flag-offset: -69;
}
.iti__fk {
  --iti-flag-offset: -70;
}
.iti__fm {
  --iti-flag-offset: -71;
}
.iti__fo {
  --iti-flag-offset: -72;
}
.iti__fr {
  --iti-flag-offset: -73;
}
.iti__ga {
  --iti-flag-offset: -74;
}
.iti__gb {
  --iti-flag-offset: -75;
}
.iti__gd {
  --iti-flag-offset: -76;
}
.iti__ge {
  --iti-flag-offset: -77;
}
.iti__gf {
  --iti-flag-offset: -78;
}
.iti__gg {
  --iti-flag-offset: -79;
}
.iti__gh {
  --iti-flag-offset: -80;
}
.iti__gi {
  --iti-flag-offset: -81;
}
.iti__gl {
  --iti-flag-offset: -82;
}
.iti__gm {
  --iti-flag-offset: -83;
}
.iti__gn {
  --iti-flag-offset: -84;
}
.iti__gp {
  --iti-flag-offset: -85;
}
.iti__gq {
  --iti-flag-offset: -86;
}
.iti__gr {
  --iti-flag-offset: -87;
}
.iti__gt {
  --iti-flag-offset: -88;
}
.iti__gu {
  --iti-flag-offset: -89;
}
.iti__gw {
  --iti-flag-offset: -90;
}
.iti__gy {
  --iti-flag-offset: -91;
}
.iti__hk {
  --iti-flag-offset: -92;
}
.iti__hn {
  --iti-flag-offset: -93;
}
.iti__hr {
  --iti-flag-offset: -94;
}
.iti__ht {
  --iti-flag-offset: -95;
}
.iti__hu {
  --iti-flag-offset: -96;
}
.iti__id {
  --iti-flag-offset: -97;
}
.iti__ie {
  --iti-flag-offset: -98;
}
.iti__il {
  --iti-flag-offset: -99;
}
.iti__im {
  --iti-flag-offset: -100;
}
.iti__in {
  --iti-flag-offset: -101;
}
.iti__io {
  --iti-flag-offset: -102;
}
.iti__iq {
  --iti-flag-offset: -103;
}
.iti__ir {
  --iti-flag-offset: -104;
}
.iti__is {
  --iti-flag-offset: -105;
}
.iti__it {
  --iti-flag-offset: -106;
}
.iti__je {
  --iti-flag-offset: -107;
}
.iti__jm {
  --iti-flag-offset: -108;
}
.iti__jo {
  --iti-flag-offset: -109;
}
.iti__jp {
  --iti-flag-offset: -110;
}
.iti__ke {
  --iti-flag-offset: -111;
}
.iti__kg {
  --iti-flag-offset: -112;
}
.iti__kh {
  --iti-flag-offset: -113;
}
.iti__ki {
  --iti-flag-offset: -114;
}
.iti__km {
  --iti-flag-offset: -115;
}
.iti__kn {
  --iti-flag-offset: -116;
}
.iti__kp {
  --iti-flag-offset: -117;
}
.iti__kr {
  --iti-flag-offset: -118;
}
.iti__kw {
  --iti-flag-offset: -119;
}
.iti__ky {
  --iti-flag-offset: -120;
}
.iti__kz {
  --iti-flag-offset: -121;
}
.iti__la {
  --iti-flag-offset: -122;
}
.iti__lb {
  --iti-flag-offset: -123;
}
.iti__lc {
  --iti-flag-offset: -124;
}
.iti__li {
  --iti-flag-offset: -125;
}
.iti__lk {
  --iti-flag-offset: -126;
}
.iti__lr {
  --iti-flag-offset: -127;
}
.iti__ls {
  --iti-flag-offset: -128;
}
.iti__lt {
  --iti-flag-offset: -129;
}
.iti__lu {
  --iti-flag-offset: -130;
}
.iti__lv {
  --iti-flag-offset: -131;
}
.iti__ly {
  --iti-flag-offset: -132;
}
.iti__ma {
  --iti-flag-offset: -133;
}
.iti__mc {
  --iti-flag-offset: -134;
}
.iti__md {
  --iti-flag-offset: -135;
}
.iti__me {
  --iti-flag-offset: -136;
}
.iti__mf {
  --iti-flag-offset: -137;
}
.iti__mg {
  --iti-flag-offset: -138;
}
.iti__mh {
  --iti-flag-offset: -139;
}
.iti__mk {
  --iti-flag-offset: -140;
}
.iti__ml {
  --iti-flag-offset: -141;
}
.iti__mm {
  --iti-flag-offset: -142;
}
.iti__mn {
  --iti-flag-offset: -143;
}
.iti__mo {
  --iti-flag-offset: -144;
}
.iti__mp {
  --iti-flag-offset: -145;
}
.iti__mq {
  --iti-flag-offset: -146;
}
.iti__mr {
  --iti-flag-offset: -147;
}
.iti__ms {
  --iti-flag-offset: -148;
}
.iti__mt {
  --iti-flag-offset: -149;
}
.iti__mu {
  --iti-flag-offset: -150;
}
.iti__mv {
  --iti-flag-offset: -151;
}
.iti__mw {
  --iti-flag-offset: -152;
}
.iti__mx {
  --iti-flag-offset: -153;
}
.iti__my {
  --iti-flag-offset: -154;
}
.iti__mz {
  --iti-flag-offset: -155;
}
.iti__na {
  --iti-flag-offset: -156;
}
.iti__nc {
  --iti-flag-offset: -157;
}
.iti__ne {
  --iti-flag-offset: -158;
}
.iti__nf {
  --iti-flag-offset: -159;
}
.iti__ng {
  --iti-flag-offset: -160;
}
.iti__ni {
  --iti-flag-offset: -161;
}
.iti__nl {
  --iti-flag-offset: -162;
}
.iti__no {
  --iti-flag-offset: -163;
}
.iti__np {
  --iti-flag-offset: -164;
}
.iti__nr {
  --iti-flag-offset: -165;
}
.iti__nu {
  --iti-flag-offset: -166;
}
.iti__nz {
  --iti-flag-offset: -167;
}
.iti__om {
  --iti-flag-offset: -168;
}
.iti__pa {
  --iti-flag-offset: -169;
}
.iti__pe {
  --iti-flag-offset: -170;
}
.iti__pf {
  --iti-flag-offset: -171;
}
.iti__pg {
  --iti-flag-offset: -172;
}
.iti__ph {
  --iti-flag-offset: -173;
}
.iti__pk {
  --iti-flag-offset: -174;
}
.iti__pl {
  --iti-flag-offset: -175;
}
.iti__pm {
  --iti-flag-offset: -176;
}
.iti__pr {
  --iti-flag-offset: -177;
}
.iti__ps {
  --iti-flag-offset: -178;
}
.iti__pt {
  --iti-flag-offset: -179;
}
.iti__pw {
  --iti-flag-offset: -180;
}
.iti__py {
  --iti-flag-offset: -181;
}
.iti__qa {
  --iti-flag-offset: -182;
}
.iti__re {
  --iti-flag-offset: -183;
}
.iti__ro {
  --iti-flag-offset: -184;
}
.iti__rs {
  --iti-flag-offset: -185;
}
.iti__ru {
  --iti-flag-offset: -186;
}
.iti__rw {
  --iti-flag-offset: -187;
}
.iti__sa {
  --iti-flag-offset: -188;
}
.iti__sb {
  --iti-flag-offset: -189;
}
.iti__sc {
  --iti-flag-offset: -190;
}
.iti__sd {
  --iti-flag-offset: -191;
}
.iti__se {
  --iti-flag-offset: -192;
}
.iti__sg {
  --iti-flag-offset: -193;
}
.iti__sh {
  --iti-flag-offset: -194;
}
.iti__si {
  --iti-flag-offset: -195;
}
.iti__sj {
  --iti-flag-offset: -196;
}
.iti__sk {
  --iti-flag-offset: -197;
}
.iti__sl {
  --iti-flag-offset: -198;
}
.iti__sm {
  --iti-flag-offset: -199;
}
.iti__sn {
  --iti-flag-offset: -200;
}
.iti__so {
  --iti-flag-offset: -201;
}
.iti__sr {
  --iti-flag-offset: -202;
}
.iti__ss {
  --iti-flag-offset: -203;
}
.iti__st {
  --iti-flag-offset: -204;
}
.iti__sv {
  --iti-flag-offset: -205;
}
.iti__sx {
  --iti-flag-offset: -206;
}
.iti__sy {
  --iti-flag-offset: -207;
}
.iti__sz {
  --iti-flag-offset: -208;
}
.iti__tc {
  --iti-flag-offset: -209;
}
.iti__td {
  --iti-flag-offset: -210;
}
.iti__tg {
  --iti-flag-offset: -211;
}
.iti__th {
  --iti-flag-offset: -212;
}
.iti__tj {
  --iti-flag-offset: -213;
}
.iti__tk {
  --iti-flag-offset: -214;
}
.iti__tl {
  --iti-flag-offset: -215;
}
.iti__tm {
  --iti-flag-offset: -216;
}
.iti__tn {
  --iti-flag-offset: -217;
}
.iti__to {
  --iti-flag-offset: -218;
}
.iti__tr {
  --iti-flag-offset: -219;
}
.iti__tt {
  --iti-flag-offset: -220;
}
.iti__tv {
  --iti-flag-offset: -221;
}
.iti__tw {
  --iti-flag-offset: -222;
}
.iti__tz {
  --iti-flag-offset: -223;
}
.iti__ua {
  --iti-flag-offset: -224;
}
.iti__ug {
  --iti-flag-offset: -225;
}
.iti__us {
  --iti-flag-offset: -226;
}
.iti__uy {
  --iti-flag-offset: -227;
}
.iti__uz {
  --iti-flag-offset: -228;
}
.iti__va {
  --iti-flag-offset: -229;
}
.iti__vc {
  --iti-flag-offset: -230;
}
.iti__ve {
  --iti-flag-offset: -231;
}
.iti__vg {
  --iti-flag-offset: -232;
}
.iti__vi {
  --iti-flag-offset: -233;
}
.iti__vn {
  --iti-flag-offset: -234;
}
.iti__vu {
  --iti-flag-offset: -235;
}
.iti__wf {
  --iti-flag-offset: -236;
}
.iti__ws {
  --iti-flag-offset: -237;
}
.iti__xk {
  --iti-flag-offset: -238;
}
.iti__ye {
  --iti-flag-offset: -239;
}
.iti__yt {
  --iti-flag-offset: -240;
}
.iti__za {
  --iti-flag-offset: -241;
}
.iti__zm {
  --iti-flag-offset: -242;
}
.iti__zw {
  --iti-flag-offset: -243;
}

/* packages/core/src/css/intlTelInput.css */
:root {
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-border-color: #ccc;
  --iti-country-selector-bg: white;
  --iti-icon-color: #555;
  --iti-spacer-horizontal: 10px;
  --iti-flag-height: calc(var(--iti-flag-width) * 3 / 4);
  --iti-globe-icon-size: 17px;
  --iti-clear-icon-size: 15px;
  --iti-border-width: 1px;
  --iti-arrow-size: 5px;
  --iti-arrow-width: 1.5px;
  --iti-arrow-padding: 7px;
  --iti-mobile-popup-margin: 30px;
  --iti-strict-reject-flash-color: rgba(255, 0, 0, 0.12);
}
.iti {
  position: relative;
  display: inline-block;
  * {
    box-sizing: border-box;
  }
  input.iti__tel-input,
  input.iti__tel-input[type=text],
  input.iti__tel-input[type=tel] {
    position: relative;
    z-index: 0;
    display: block;
    min-width: 100%;
    margin: 0 !important;
  }
}
.iti__a11y-text {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}
.iti__country-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: var(--iti-border-width);
}
.iti__selected-country {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.iti__selected-country-primary {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}
.iti__selected-dial-code {
  margin-left: 4px;
}
.iti__arrow {
  margin-left: var(--iti-arrow-padding);
  margin-top: -2px;
  width: var(--iti-arrow-size);
  height: var(--iti-arrow-size);
  box-sizing: border-box;
  border-right: var(--iti-arrow-width) solid var(--iti-icon-color);
  border-bottom: var(--iti-arrow-width) solid var(--iti-icon-color);
  transform: rotate(45deg);
}
.iti__arrow--up {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.iti__country-selector {
  border-radius: 3px;
  background-color: var(--iti-country-selector-bg);
  .iti--inline-country-selector & {
    border: var(--iti-border-width) solid var(--iti-border-color);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  }
  .iti--inline-country-selector:not(.iti--detached-country-selector) & {
    position: absolute;
    z-index: 2;
    left: 0;
  }
}
.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
  [dir=rtl] & {
    padding-left: inherit;
    padding-right: 30px;
    background-position: right 8px center;
  }
  &::-webkit-search-cancel-button {
    appearance: none;
  }
}
.iti__search-input,
.iti__country {
  padding-top: 8px;
  padding-bottom: 8px;
}
.iti__search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--iti-border-color);
}
.iti__search-icon {
  position: absolute;
  left: var(--iti-spacer-horizontal);
  display: flex;
  pointer-events: none;
  [dir=rtl] & {
    left: auto;
    right: var(--iti-spacer-horizontal);
  }
}
.iti__search-icon-svg {
  width: var(--iti-globe-icon-size);
  height: var(--iti-globe-icon-size);
  display: block;
  stroke: var(--iti-icon-color);
  fill: none;
  stroke-width: 3;
}
.iti__search-clear {
  position: absolute;
  right: calc(var(--iti-spacer-horizontal) / 2);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: calc(var(--iti-spacer-horizontal) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  .iti__search-clear-x {
    stroke-width: 2;
  }
  .iti__search-clear-bg {
    fill: var(--iti-icon-color);
  }
  [dir=rtl] & {
    right: auto;
    left: var(--iti-spacer-horizontal);
  }
  &:hover,
  &:focus-visible {
    background: var(--iti-hover-color);
    outline: none;
  }
}
.iti__search-clear-svg {
  width: var(--iti-clear-icon-size);
  height: var(--iti-clear-icon-size);
  display: block;
}
.iti__no-results {
  text-align: center;
  padding: 30px 0;
}
.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  .iti--inline-country-selector & {
    max-height: 185px;
  }
}
.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
  @media (max-width: 500px) {
    white-space: normal;
  }
}
.iti__country {
  display: flex;
  align-items: center;
  padding-left: var(--iti-spacer-horizontal);
  padding-right: var(--iti-spacer-horizontal);
  outline: none;
  &.iti__highlight {
    background-color: var(--iti-hover-color);
  }
}
.iti__country-name {
  flex-grow: 1;
}
.iti__country-check {
  margin-left: var(--iti-spacer-horizontal);
  display: flex;
  align-items: center;
  color: var(--iti-icon-color);
}
.iti__country-check-svg {
  width: var(--iti-clear-icon-size);
  height: var(--iti-clear-icon-size);
  display: block;
}
.iti__country-list .iti__flag {
  margin-right: var(--iti-spacer-horizontal);
  flex-shrink: 0;
  [dir=rtl] & {
    margin-right: 0;
    margin-left: var(--iti-spacer-horizontal);
  }
}
.iti--has-country-selector {
  .iti__country-container:has(+ input[disabled]),
  .iti__country-container:has(+ input[readonly]) {
    button.iti__selected-country {
      cursor: not-allowed;
      .iti__arrow {
        visibility: hidden;
      }
    }
  }
  .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) {
    .iti__selected-country-primary:hover,
    .iti__selected-country:has(+ .iti__country-selector:hover) .iti__selected-country-primary {
      background-color: var(--iti-hover-color);
    }
  }
}
.iti--detached-country-selector {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  &:hover {
    cursor: pointer;
  }
}
.iti--detached-country-selector {
  top: calc(anchor(bottom) + 3px);
  left: anchor(left);
  position-try-fallbacks: --iti-flip-above;
}
@position-try --iti-flip-above {
  top: auto;
  bottom: calc(anchor(top) + 3px);
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti--fullscreen-popup {
  &.iti--detached-country-selector {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: var(--iti-mobile-popup-margin);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .iti__country-selector {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative;
  }
  .iti__country,
  .iti__search-input {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .iti__country {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.5em;
  }
}
.iti__flag {
  height: var(--iti-flag-height);
  width: var(--iti-flag-width);
  border-radius: 1px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: image-set(var(--iti-path-flags-1x) 1x, var(--iti-path-flags-2x) 2x);
  background-repeat: no-repeat;
  background-position: calc(var(--iti-flag-offset, 100) * var(--iti-flag-width)) 0;
  background-size: calc(var(--iti-flag-count) * var(--iti-flag-width)) var(--iti-flag-height);
}
.iti__loading {
  position: relative;
  background: none;
  box-shadow: none;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--iti-flag-height);
    height: var(--iti-flag-height);
    box-sizing: border-box;
    border: 2px solid var(--iti-icon-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: iti-spinner 1s linear infinite;
  }
}
@keyframes iti-spinner {
  to {
    transform: rotate(360deg);
  }
}
.iti__strict-reject-animation {
  .iti__tel-input,
  .iti__selected-country {
    animation: iti-strict-reject-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  @media (prefers-reduced-motion: reduce) {
    .iti__tel-input {
      animation: iti-strict-reject-flash 0.3s ease-out both;
    }
    .iti__selected-country {
      animation: none;
    }
  }
}
@keyframes iti-strict-reject-shake {
  10%, 90% {
    transform: translateX(-1px);
  }
  20%, 80% {
    transform: translateX(2px);
  }
  30%, 50%, 70% {
    transform: translateX(-3px);
  }
  40%, 60% {
    transform: translateX(3px);
  }
}
@keyframes iti-strict-reject-flash {
  40% {
    background-color: var(--iti-strict-reject-flash-color);
  }
}
.iti__globe {
  background: none;
  box-shadow: none;
  height: var(--iti-globe-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  .iti__globe-svg {
    width: 100%;
    height: 100%;
    fill: var(--iti-icon-color);
  }
}
@supports (-webkit-appearance: none) and (not (background: -webkit-canvas(foo))) {
  .iti__tel-input:focus {
    outline-offset: 1px;
  }
}

/* packages/core/src/css/intlTelInputWithAssets.css */
:root {
  --iti-path-flags-1x: url(/assets/img/vendor/flags.dc848804.webp);
  --iti-path-flags-2x: url(/assets/img/vendor/flags@2x.c7a5f533.webp);
}