/*
  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.
*/

/* --------------------------------------------------------------------------
   Uygulama tema token'ları — açık/koyu tek kaynak.

   Metronic'in kendi bileşenleri (kt-card, kt-badge, kt-input...) zaten
   token'lıdır ve `.dark` altında doğru çalışır. Bu dosyadaki tamamlayıcı
   bileşenler (harita panelleri, araç detayı, filo analitiği kartları...)
   ise sabit hex renklerle yazılmıştı; koyu temada metin okunmuyor, yüzeyler
   beyaz leke bırakıyordu. Renkler artık buradaki token'lardan akar.

   `:root` değerleri MEVCUT açık temanın birebir renkleridir — açık tema
   piksel düzeyinde değişmez. `.dark` yalnız koyu eşleniklerini verir.
   Metronic karşılığı olan yerlerde token'a devredilir (var(--card) gibi):
   o değişkenler Metronic tarafından iki modda da tanımlıdır.

   Kullanım kuralı: yeni bir bileşene renk yazarken sabit hex DEĞİL, buradaki
   token'lardan biri kullanılır. Karşılığı yoksa önce buraya eklenir.
   Harita tuvali üstüne çizilen öğeler (araç marker'ı, cluster rozeti) ve
   `.map-fullpage` koyu cam dili bunun DIŞINDADIR: zeminleri sayfa teması
   değil harita karosu belirler, sabit renkleri bilinçlidir.
   -------------------------------------------------------------------------- */
:root {
  /* — Yüzeyler — */
  --app-surface: var(--card);        /* panel/kart zemini */
  --app-surface-sunken: #f9fafb;     /* iç şerit, arama kutusu, pasif alan */
  --app-surface-hover: #f3f4f6;      /* satır/buton hover */
  --app-surface-track: #f1f1f4;      /* ilerleme çubuğu yolu, iskelet */

  /* — Mürekkep — */
  --app-ink: #071437;                /* birincil metin */
  --app-ink-soft: #4b5675;           /* ikincil metin */
  --app-ink-muted: #99a1b7;          /* etiket, üçüncül metin */
  --app-ink-faint: #d1d5db;          /* pasif/kapalı ikon */

  /* — Çizgiler — */
  --app-line: #dbdfe9;               /* kart/panel kenarlığı */
  --app-line-soft: #e5e7eb;          /* iç ayraç */

  /* — Nötr durum noktası (koyu zeminde kaybolmaması için ayrı) — */
  --app-dot-off: #374151;

  /* — Durum aileleri: ana ton / yumuşak zemin / kenarlık / zemin üstü metin / en açık yıkama — */
  --app-crit: #dc2626;
  --app-crit-soft: #fee2e2;
  --app-crit-line: #fecaca;
  --app-crit-ink: #b91c1c;
  --app-crit-wash: #fef2f2;
  --app-crit-flash: #fecaca;    /* SOS kart flaşının tepe adımı */

  --app-warn: #f97316;
  --app-warn-soft: #ffedd5;
  --app-warn-line: #fed7aa;
  --app-warn-ink: #c2410c;
  --app-warn-wash: #fff7ed;

  --app-amber: #f59e0b;
  --app-amber-soft: #fef3c7;
  --app-amber-ink: #92400e;
  --app-amber-wash: #fffbeb;

  --app-good: #16a34a;
  --app-good-soft: #dcfce7;
  --app-good-ink: #15803d;

  --app-info: #006ae6;
  --app-accent: #1a73e8;
  --app-info-soft: #eff6ff;
  --app-info-line: #bfdbfe;
  --app-info-ink: #1d4ed8;

  /* Metin içi bağlantı: açık mavi, ziyaret edilince değişmez. */
  --app-link: #3b82f6;
  --app-link-hover: #2563eb;

  --app-cyan: #0891b2;
  --app-cyan-soft: #cffafe;
  --app-cyan-line: #a5f3fc;
  --app-cyan-ink: #0e7490;
  --app-cyan-wash: #ecfeff;

  --app-violet: #7c3aed;
  --app-violet-ink: #6d28d9;
  --app-violet-wash: #faf5ff;

  --app-rose: #e11d48;
  --app-rose-soft: #ffe4e6;
  --app-rose-ink: #9f1239;

  /* SOS kendi kırmızısını taşır (kritikten bir ton daha doygun). */
  --app-sos: #e11d2e;
  --app-sos-hover: #c81328;

  --app-scrim: rgba(7, 20, 55, 0.55);
}

.dark {
  /* — Metronic koyu tema paleti EZİLİR: MetaEcu panelinin mavi-gri (slate) tonları —
     Metronic'in koyu şeması zinc-950 (#09090b) üzerine kuruludur; neredeyse saf siyah zeminde
     kartlar sayfadan ayrışmıyor, kontrast sertleşiyordu. MetaEcu'nun koyu grisi hem yumuşak hem
     katmanlı: sayfa en koyu, kart bir adım açık, açılır katmanlar bir adım daha açık — ve nötr
     gri yerine hafif mavi kayma (aynı ailenin diğer panelleriyle ortak dil).
     Bu blok Metronic'inkinden SONRA yüklenir (head.ejs: vendor styles.css → webpack bundle),
     aynı özgüllükte (0,1,0) olduğu için kaynak sırası bunu kazandırır.
     Açık tema DEĞİŞMEZ — burada yalnız koyu şema yeniden tanımlanır.
     Katman sırası app-shell.ejs'ten gelir ve kademe ONA göre kurulmuştur — her kat bir adım açılır:
     gövde+sidebar `bg-muted` → içerik paneli `.app-main` `bg-background` → kartlar `.kt-card` `--card`. */
  --muted: #141922;             /* en dış kat: gövde + sidebar */
  --muted-foreground: #8b93a1;
  --background: #181d27;        /* içerik paneli (.app-main) */
  --foreground: #e5e9f0;
  --card: #1c222d;              /* kart yüzeyi — grafik paleti bu tona göre doğrulandı, bkz. core/chart-theme.js */
  --card-foreground: #e5e9f0;
  --popover: #222836;           /* açılır menü/dropdown — kartın üstündeki katman */
  --popover-foreground: #e5e9f0;
  --secondary: #2c3441;
  --secondary-foreground: #e5e9f0;
  --accent: #262d3a;            /* satır/öğe hover'ı */
  --accent-foreground: #e5e9f0;
  --mono: #f0f3f8;
  --border: #2a3240;
  --input: #2a3240;             /* içerik panelinin kenarlığı + form alanı sınırı */
  --ring: #3b82f6;              /* odak halkası */

  /* Yüzeyler: kart Metronic token'ından (yukarıda #1c222d); üstündeki katmanlar kademeli açılır. */
  --app-surface-sunken: #181d27;
  --app-surface-hover: #262d3a;
  --app-surface-track: #2c3441;

  /* Mürekkep: açık temanın hiyerarşisi korunarak ters çevrilir. */
  --app-ink: #e5e9f0;
  --app-ink-soft: #a7b0c0;
  --app-ink-muted: #8b93a1;
  --app-ink-faint: #667085;

  --app-line: #2a3240;
  --app-line-soft: #232a36;

  --app-dot-off: #8b93a1;

  /* Durum aileleri: ana ton bir adım açılır (koyu zeminde doygun renk titrer),
     yumuşak zeminler saydam dolguya iner (koyu yüzeyle karışır), zemin üstü
     metin açık tona geçer. */
  --app-crit: #f87171;
  --app-crit-soft: rgba(220, 38, 38, 0.18);
  --app-crit-line: rgba(248, 113, 113, 0.35);
  --app-crit-ink: #fca5a5;
  --app-crit-wash: rgba(220, 38, 38, 0.1);
  --app-crit-flash: rgba(220, 38, 38, 0.34);

  --app-warn: #fb923c;
  --app-warn-soft: rgba(249, 115, 22, 0.18);
  --app-warn-line: rgba(251, 146, 60, 0.35);
  --app-warn-ink: #fdba74;
  --app-warn-wash: rgba(249, 115, 22, 0.1);

  --app-amber: #fbbf24;
  --app-amber-soft: rgba(245, 158, 11, 0.18);
  --app-amber-ink: #fcd34d;
  --app-amber-wash: rgba(245, 158, 11, 0.1);

  --app-good: #4ade80;
  --app-good-soft: rgba(22, 163, 74, 0.18);
  --app-good-ink: #86efac;

  --app-info: #60a5fa;
  --app-accent: #60a5fa;
  --app-info-soft: rgba(0, 106, 230, 0.18);
  --app-info-line: rgba(96, 165, 250, 0.35);
  --app-info-ink: #93c5fd;

  --app-link: #60a5fa;
  --app-link-hover: #93c5fd;

  --app-cyan: #22d3ee;
  --app-cyan-soft: rgba(8, 145, 178, 0.18);
  --app-cyan-line: rgba(34, 211, 238, 0.35);
  --app-cyan-ink: #67e8f9;
  --app-cyan-wash: rgba(8, 145, 178, 0.1);

  --app-violet: #a78bfa;
  --app-violet-ink: #c4b5fd;
  --app-violet-wash: rgba(124, 58, 237, 0.1);

  --app-rose: #fb7185;
  --app-rose-soft: rgba(225, 29, 72, 0.18);
  --app-rose-ink: #fda4af;

  --app-sos: #fb7185;
  --app-sos-hover: #e11d48;

  --app-scrim: rgba(3, 6, 12, 0.66);
}

/* --------------------------------------------------------------------------
   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);
  }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.875rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--app-line-soft);
}

.page-header-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--app-ink-muted);
}

.page-header-crumbs a {
  color: var(--app-ink-muted);
  transition: color 0.15s ease;
}

.page-header-crumbs a:hover {
  color: var(--primary);
}

.page-header-home {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}

.page-header-sep {
  font-size: 0.5rem;
  color: var(--app-ink-faint);
}

.page-header-crumb-current {
  color: var(--app-ink);
  font-weight: 500;
}

.page-header-crumb-section {
  display: none;
}

@media (min-width: 40rem) {
  .page-header-crumb-section {
    display: inline-flex;
  }
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

/* --------------------------------------------------------------------------
   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);
}
/* Metronic'te .text-destructive var ama /10 alfalı zemini YOK; Genel Bakış'ın son aktivite ve yaklaşan
   bakım satırlarındaki reddedilen/geciken rozeti bunu kullanıyor. Renk TOKEN'dan okunur (kardeşlerinin
   sabit rgb'sinden farklı olarak): destructive tema değişkeni koyu temada ayrı bir değer alıyor ve
   color-mix aynı satırda hem rengi hem alfayı token'a bağlı tutar. */
.bg-destructive\/10 {
  background-color: color-mix(in srgb, var(--destructive) 10%, transparent);
}

/* --------------------------------------------------------------------------
   last:border-b-0 — Metronic'in derlenmiş bundle'ında YOK (demolarında hiç
   taranmamış) ve Tailwind burada JIT çalışmıyor, yani sınıf sessizce ölü
   kalıyordu: liste kartlarının SON satırında da alt çizgi çiziliyor ve kart
   kenarıyla çift çizgi oluşuyordu. Genel Bakış'taki üç satır üreticisi
   (cihaz arıza özeti, son aktiviteler, yaklaşan bakımlar) bu sınıfa güveniyor.
   -------------------------------------------------------------------------- */
.last\:border-b-0:last-child {
  border-bottom-width: 0;
}

/* --------------------------------------------------------------------------
   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;
  overflow: hidden;
}
.kt-modal > .kt-modal-content {
  max-height: calc(100% - 5rem);
}
.kt-modal > .kt-modal-content > .kt-modal-body {
  min-height: 0;
}
.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;
}
/* Aranabilir kutu barındıran diyalog (_shared/lookup-dialog). Combobox paneli position:absolute ile
   girdinin ALTINA açılıyor; iki kural birlikte gerekiyor:
   - overflow — .kt-modal-body Metronic'ten overflow-y:auto ile geliyor, panel gövdenin alt kenarında
     kırpılır ve seçenekler görünmezdi.
   - min-height — gövdede panele yer ayrılmazsa panel footer'ı örter ve "İptal"e giden tık panele, yani
     yanlışlıkla bir seçeneğe düşerdi. Yükseklik panelin tavanına göre: etiket + girdi + panel. */
.app-dialog-content.app-dialog-lookup .kt-modal-body {
  overflow: visible;
  min-height: 17rem;
}
.app-dialog-content.app-dialog-lookup .kt-combobox-panel {
  max-height: 12rem;
}
/* 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;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.app-dialog-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
@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);
}

/* --------------------------------------------------------------------------
   Aranabilir native select katmanı (utils/select-search.js). Native select gizli
   kalır (değer/olay kaynağı), tetikleyici kt-select görünümünü taklit eder.
   Panel position:fixed ile tetikleyiciye hizalanır: modalın boyunu değiştirmez ve
   gövdenin overflow-y:auto'su onu kırpmaz; altta yer yoksa yukarı açılır.
   -------------------------------------------------------------------------- */
.sx-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.sx-root {
  position: relative;
  display: grid;
  gap: 0.375rem;
}
.sx-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
}
.sx-trigger:focus-visible,
.sx-root.open .sx-trigger {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.sx-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--muted);
}
.sx-trigger.sx-placeholder .sx-value {
  color: var(--muted-foreground);
}
.sx-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-caret {
  flex: none;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  transition: transform 150ms ease;
}
.sx-root.open .sx-caret {
  transform: rotate(180deg);
}
.sx-panel {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
.sx-panel.hidden {
  display: none;
}
.sx-search {
  flex: none;
}
.sx-list {
  display: grid;
  gap: 2px;
  min-height: 0;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sx-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mono);
  font-size: 0.8125rem;
  text-align: start;
  cursor: pointer;
}
.sx-option:hover,
.sx-option.active {
  background: var(--accent);
}
.sx-option.selected {
  font-weight: 600;
  color: var(--primary);
}
.sx-option-empty {
  color: var(--muted-foreground);
}
.sx-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sx-empty {
  padding: 0.75rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Montaj sonrası cihaz doğrulaması (pages/montage-verify.js).
   -------------------------------------------------------------------------- */
.mv-root {
  display: grid;
  gap: 0.875rem;
  min-width: 0;
}
.mv-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mv-summary[data-tone='ok'] {
  border-color: color-mix(in srgb, var(--color-green-500) 45%, transparent);
  background: color-mix(in srgb, var(--color-green-500) 9%, transparent);
}
.mv-summary[data-tone='wait'] {
  border-color: color-mix(in srgb, var(--color-yellow-500) 45%, transparent);
  background: color-mix(in srgb, var(--color-yellow-500) 9%, transparent);
}
.mv-summary-icon {
  font-size: 1.5rem;
  flex: none;
}
.mv-summary[data-tone='ok'] .mv-summary-icon {
  color: var(--color-green-500);
}
.mv-summary[data-tone='wait'] .mv-summary-icon {
  color: var(--color-yellow-500);
}
.mv-summary-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mv-summary-title {
  font-size: 0.9375rem;
  color: var(--mono);
}
.mv-summary-hint {
  font-size: 0.8125rem;
  color: var(--secondary-foreground);
  line-height: 1.45;
}
.mv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mv-updated {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  min-width: 0;
}
.mv-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.mv-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
.mv-check-icon {
  flex: none;
  font-size: 1.25rem;
  color: var(--muted-foreground);
}
.mv-check[data-status='ok'] .mv-check-icon {
  color: var(--color-green-500);
}
.mv-check[data-status='wait'] .mv-check-icon {
  color: var(--color-yellow-500);
}
.mv-check[data-status='fail'] .mv-check-icon {
  color: var(--destructive);
}
.mv-check[data-status='na'] {
  opacity: 0.65;
}
.mv-check-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mv-check-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mono);
}
.mv-check-detail {
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  overflow-wrap: anywhere;
}
.mv-section {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.mv-section.hidden {
  display: none;
}
.mv-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mono);
}
.mv-map {
  height: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mv-map.hidden {
  display: none;
}
.mv-coords,
.mv-note {
  font-size: 0.75rem;
  color: var(--secondary-foreground);
  overflow-wrap: anywhere;
}
.mv-can-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.mv-can-item {
  display: grid;
  gap: 2px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  min-width: 0;
}
.mv-can-label {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.mv-can-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mono);
}
.mv-can-value small {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.mv-can-at {
  font-size: 0.625rem;
  color: var(--muted-foreground);
}
.mv-cam-grid {
  margin-top: 0;
}
.mv-cam-grid .map-cam-overlay {
  cursor: pointer;
}
@media (max-width: 640px) {
  .mv-checks {
    grid-template-columns: 1fr;
  }
  .mv-map {
    height: 200px;
  }
  .mv-check-title,
  .mv-summary-title {
    font-size: 0.9375rem;
  }
  .mv-check-detail,
  .mv-summary-hint {
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   Montaj geçmişi (pages/montage-history.js) ve şirketler (pages/montage-companies.js).
   -------------------------------------------------------------------------- */
.mh-filters {
  display: grid;
  gap: 0.625rem;
  margin-bottom: 1rem;
  min-width: 0;
}
.mh-chips {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.mh-chips::-webkit-scrollbar {
  display: none;
}
.mh-chip {
  flex: none;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--secondary-foreground);
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}
.mh-chip.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.mh-list,
.mc-list {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
}
.mh-day {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.mh-card {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
.mh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mh-time {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.mh-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mono);
  overflow-wrap: anywhere;
}
.mh-card-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--secondary-foreground);
  overflow-wrap: anywhere;
}
.mh-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  word-break: break-all;
}
.mh-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.mh-verify {
  justify-self: start;
}
.mh-state {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.mh-state.hidden {
  display: none;
}
.mh-state i {
  font-size: 2rem;
}
.mh-more {
  width: 100%;
  margin-top: 0.75rem;
  justify-content: center;
}
.mh-skeleton {
  height: 5.5rem;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: mh-shimmer 1.2s ease-in-out infinite;
}
@keyframes mh-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-skeleton {
    animation: none;
  }
}

.mc-search {
  margin-bottom: 0.5rem;
}
.mc-count {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.mc-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  text-align: start;
  cursor: pointer;
}
.mc-card:hover {
  border-color: var(--primary);
}
.mc-logo,
.mc-head-logo {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
}
.mc-card-body {
  display: grid;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.mc-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-card-line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--secondary-foreground);
}
.mc-card-body .kt-badge {
  justify-self: start;
}
.mc-chevron {
  flex: none;
  color: var(--muted-foreground);
}
.mc-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}
.mc-head-logo {
  width: 56px;
  height: 56px;
}
.mc-head-text {
  display: grid;
  min-width: 0;
}
.mc-head-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mono);
  overflow-wrap: anywhere;
}
.mc-head-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  word-break: break-all;
}
.mc-contact {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mc-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--secondary-foreground);
  overflow-wrap: anywhere;
}
.mc-phone {
  color: var(--primary);
  font-weight: 600;
}
.mc-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.mc-actions .kt-btn {
  justify-content: center;
}
.mc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
}
.mc-tile {
  display: grid;
  gap: 2px;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
.mc-tile.warn {
  border-color: color-mix(in srgb, var(--color-yellow-500) 50%, transparent);
  background: color-mix(in srgb, var(--color-yellow-500) 8%, transparent);
}
.mc-tile-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mono);
}
.mc-tile-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
@media (max-width: 640px) {
  .mc-actions {
    grid-template-columns: 1fr;
  }
  .mc-actions .kt-btn,
  .mh-more {
    min-height: 48px;
    font-size: 15px;
  }
  .mh-chip {
    min-height: 40px;
    padding-inline: 0.875rem;
  }
  .mh-filters .kt-input,
  .mc-search,
  .mh-filters .sx-trigger {
    min-height: 48px;
    font-size: 16px;
  }
  .mh-filters .kt-input input,
  .mc-search input {
    font-size: 16px;
  }
  .mh-verify {
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   QR/barkod okutma diyaloğu (utils/code-scanner.js).
   -------------------------------------------------------------------------- */
.scan-view {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}
.scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Nişangâh: yatay barkod ve QR'a uygun geniş çerçeve; dışı karartılır. */
.scan-frame {
  position: absolute;
  inset: 22% 8%;
  border: 2px solid rgb(255 255 255 / 90%);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 35%);
  pointer-events: none;
}
.scan-camera-off {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 85%);
}
.scan-camera-off i {
  font-size: 2rem;
}
/* display:flex yukarıda .hidden utility'sini eziyordu; kamera açıkken katman görünmemeli. */
.scan-camera-off.hidden,
.scan-frame.hidden,
.scan-video.hidden {
  display: none;
}
.scan-status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
  color: var(--secondary-foreground);
  word-break: break-all;
}
.scan-status[data-tone='warn'] {
  color: var(--destructive);
}
.scan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.scan-actions .kt-btn.active {
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 640px) {
  .scan-dialog {
    width: calc(100% - 1rem);
    margin-block: 0.5rem;
  }
  .scan-view {
    aspect-ratio: 3 / 4;
  }
  .scan-frame {
    inset: 30% 6%;
  }
  .scan-actions .kt-btn,
  .scan-dialog .kt-modal-footer .kt-btn {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
    font-size: 15px;
  }
}

/* Alan + okut düğmesi (IMEI/GUID): düğme alanın yüksekliğini alır. */
.scan-field {
  display: flex;
  gap: 0.5rem;
}
.scan-field > .kt-input {
  flex: 1;
  min-width: 0;
}
.scan-field > .kt-btn {
  flex: none;
  align-self: stretch;
  height: auto;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   Düzenleme sayfalarının 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.
   -------------------------------------------------------------------------- */
.app-savebar-host {
  padding-bottom: 96px;
}
.app-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);
}
.app-savebar.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
}
.app-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;
}
.app-savebar.is-hidden .app-savebar-card {
  pointer-events: none;
}
.app-savebar-row {
  padding: 12px 16px;
}
.app-savebar-icon {
  font-size: 1.25rem;
  color: var(--app-amber);
}
/* Katlı: kart söner, yerini sağ-alttaki rozet alır (tekrar tıklayınca açılır). */
.app-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;  /* theme-ok: sarı pill zemini sabit, metni onunla birlikte okunur */
  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;
}
.app-savebar.is-collapsed .app-savebar-card {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.app-savebar.is-collapsed:not(.is-hidden) .app-savebar-pill {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .app-savebar,
  .app-savebar-card,
  .app-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;
}

/* --------------------------------------------------------------------------
   KTDatePicker (vanilla-calendar-pro) açılır takvimi — modal içinde görünürlük.
   Panel `inputMode`'da document.body'ye eklenir ve kütüphanenin CSS'i ona yalnız
   `position: absolute` verir, z-index VERMEZ. KTModal ise açılışta modal
   katmanına z-index 90 yazar (.kt-modal position:fixed; inset:0), dolayısıyla
   panel modalın ALTINDA kalıp görünmez ve tıklanamaz oluyordu: modal içindeki
   aralık seçicilerinde tarih hiç seçilemiyordu. Çözüm iti dropdown'ıyla aynı:
   panel modal katmanının üstüne çıkarılır. KTModal'ın kendi z-index'ini
   yükseltmez — getHighestZindex yalnız ATA zincirindeki inline z-index'lere
   bakar, panel ise body'nin doğrudan çocuğudur.
   -------------------------------------------------------------------------- */
[data-vc='calendar'][data-vc-input] {
  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);
}
/* Yüklenen logonun beyaz zemini koyu temada sidebar-brand.js tarafından saydamlaştırılır; geriye kalan
   mürekkep de koyuysa logo bu kez koyu zeminde kaybolacağından ters çevrilir (tek renk marka logoları). */
.dark .sidebar-brand-logo--knockout-dark {
  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: var(--app-surface);
  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: var(--app-surface-hover);
}
.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: var(--app-surface);
  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: var(--app-accent);
}
/* 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: var(--app-surface-track);
  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: var(--app-ink);
  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: var(--app-surface);
  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: var(--app-surface-hover);
}
.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 {
  cursor: pointer;
  user-select: none;
}
.map-cluster-badge {
  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);
}
.map-cluster-marker.lg .map-cluster-badge {
  width: 52px;
  height: 52px;
  font-size: 15px;
}
/* Seçili araç bu kümenin içinde: araç marker'ının seçim nabzıyla aynı renk ve ritimde halkalar rozetin
   arkasından büyür — birbirine yakın kümelerde aracın hangisinde olduğu görülsün. Halkalar marker kökünde
   (inset: 0) olduğu için .lg boyutunu kendiliğinden izler; kök MapLibre'de zaten position: absolute. */
.map-cluster-marker.has-selected {
  z-index: 5;
}
.map-cluster-marker.has-selected::before,
.map-cluster-marker.has-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid #1a73e8;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: scale(1.3);
  opacity: 0.9;
  animation: map-cluster-select-pulse 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.map-cluster-marker.has-selected::after {
  animation-delay: 0.9s;
}
.map-cluster-marker.is-leaving::before,
.map-cluster-marker.is-leaving::after {
  display: none;
}
/* Araç halkasından (0.9 → 2.3) dar: rozet daha büyük olduğundan başlangıç hale kenarında, bitiş araç halkasına
   yakın piksel çapında kalır (komşu kümelerin üstüne gereğinden fazla taşmaz). */
@keyframes map-cluster-select-pulse {
  0% {
    transform: scale(1.15);
    opacity: 0.95;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-cluster-marker.has-selected::before {
    animation: none;
  }
  .map-cluster-marker.has-selected::after {
    display: none;
  }
}

.map-vehicle-marker {
  cursor: pointer;
}
.map-vehicle-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.map-cluster-badge,
.map-vehicle-body {
  transform-origin: center;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
  animation: map-marker-in 180ms ease-out;
}
.map-cluster-marker.is-leaving .map-cluster-badge,
.map-vehicle-marker.is-leaving .map-vehicle-body {
  transform: scale(0.45);
  opacity: 0;
}
@keyframes map-marker-in {
  from {
    transform: scale(0.45);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-cluster-badge,
  .map-vehicle-body {
    transition: opacity 120ms linear;
    animation: none;
  }
  .map-cluster-marker.is-leaving .map-cluster-badge,
  .map-vehicle-marker.is-leaving .map-vehicle-body {
    transform: none;
  }
}
/* Daire + yön ucu tek kutuda: uç dairenin ARKASINA konumlanır, yalnız sivri kısmı dışarı taşar. Kutu
   dairenin boyutundadır → rozet hizası ve giriş/çıkış animasyonu (map-marker-in) değişmez. */
.map-vehicle-puck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
/* Durum rengi marker KÖKÜNDE bir değişkende: gövde (.map-vehicle-shape) onu okur. Renk artık gövdenin
   kendisine ait, ikonu taşıyan .map-vehicle-dot'a değil — durum sınıfları da bu yüzden köke yazılır. */
.map-vehicle-marker {
  --marker-color: #16a34a; /* kontak açık: yeşil */
}
/* Nokta artık yalnız İKONU taşır: gövde (renk + beyaz kenarlık + gölge) alttaki .map-vehicle-shape'e
   taşındı, çünkü yön ucu gövdenin kendisinden çıkıyor ve ikon dönmemeli. */
.map-vehicle-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #fff;
  position: relative; /* gövdenin üstünde kalsın */
  z-index: 1;
}
/* GÖVDE: durum renkli, beyaz konturlu tek parça. Yön ucu AYRI BİR PARÇA DEĞİLDİR — gövdenin bir köşe
   yarıçapı 50%'den 0'a inince kare köşe ortaya çıkar ve silüet daireden DAMLAYA (armut) döner. Tek
   eleman, tek kontur → gövdeyle uç arasında dikiş/çizgi olmaz; "burnu çıkmış daire" görüntüsü buradan
   kurtulur. border-radius CSS'te animasyonlanabildiği için geçiş de gerçek bir biçim değişimidir.
   Sivri köşe sağ-üsttedir (+45°); kapsayıcı seyir yönüne döndüğü (JS, en kısa yay) ve gövde -45°
   telafi ettiği için uç net olarak seyir yönünü gösterir. Dururken şekil daire olduğundan dönüş görünmez. */
.map-vehicle-arrow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  rotate: calc(-1 * var(--map-bearing, 0deg));
  transition: transform 420ms ease-out;
}
.map-vehicle-shape {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: var(--marker-color);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transform: rotate(-45deg);
  transition: border-radius 260ms ease-out;
}
.map-vehicle-marker.moving .map-vehicle-shape {
  border-radius: 50% 0 50% 50%;
}
.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-trailer {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.map-vehicle-marker.has-trailer .map-vehicle-trailer {
  display: block;
}
.map-trailer-orbit {
  --trailer-angle: calc(var(--trailer-heading, 90deg) + 180deg - var(--map-bearing, 0deg));
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%) rotate(var(--trailer-angle)) translateY(calc(-1 * var(--orbit-radius)))
    rotate(calc(-1 * var(--trailer-angle)));
  transition: transform 420ms ease-out;
}
.map-trailer-chain {
  --orbit-radius: 22px;
  width: 16px;
  height: 16px;
  color: #475569;
}
.map-trailer-chain svg {
  width: 11px;
  height: 11px;
}
.map-trailer-unit {
  --orbit-radius: 42px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--marker-color);
}
.map-trailer-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.map-trailer-label {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}
.map-vehicle-marker:hover .map-trailer-label,
.map-vehicle-marker.selected .map-trailer-label {
  display: block;
}
.map-coupling-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.map-coupling-chain svg {
  width: 13px;
  height: 13px;
}
.map-coupling-chain.is-far {
  color: #d97706;
}
.map-vehicle-marker.off {
  --marker-color: #6b7280; /* kontak kapalı: gri */
}
.map-vehicle-marker.stale {
  --marker-color: #374151; /* çevrimdışı (uzun süredir veri yok): koyu füme — pasif griden ayrışır */
}
.map-vehicle-marker.idle {
  --marker-color: #f59e0b; /* rölanti (durgun ama motor açık): sarı — sol paneldeki .map-live-dot.idle ile aynı */
}
.map-vehicle-marker.pos-stale .map-vehicle-dot,
.map-vehicle-marker.pos-stale .map-vehicle-arrow {
  opacity: 0.55;
}
.map-vehicle-marker.pos-stale .map-vehicle-shape {
  border-style: dashed;
}
.map-vehicle-marker.sos {
  --marker-color: #dc2626; /* aktif SOS: kırmızı + nabız halkası */
}
.map-vehicle-marker.sos .map-vehicle-shape {
  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);
  }
}
/* Tamamlanan hız ihlali: durum rengi (yeşil/gri) korunur; turuncu halka + nabızla vurgulanır (öncelik SOS'un
   altında). Nabız bildirim kartıyla AYNI anda doğar — yani marker olayın anına vardığında; anlık hızla ilgisi
   yoktur (bkz. vehicle-status.js hasSpeedWarnFlag ve warn-gate.mjs). */
.map-vehicle-marker.speeding .map-vehicle-shape {
  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-shape {
  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);
  }
}
.map-vehicle-marker.selected .map-vehicle-puck::before,
.map-vehicle-marker.selected .map-vehicle-puck::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  box-sizing: border-box;
  border: 3px solid #1a73e8;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  transform: scale(1.55);
  opacity: 0.9;
  animation: map-select-pulse 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.map-vehicle-marker.selected .map-vehicle-puck::after {
  animation-delay: 0.9s;
}
@keyframes map-select-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.95;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}
.map-vehicle-marker.selected {
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  .map-vehicle-marker.selected .map-vehicle-puck::before {
    animation: none;
  }
  .map-vehicle-marker.selected .map-vehicle-puck::after {
    display: none;
  }
}
@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);
  }
}
/* Hareket azaltma tercihinde ok ANINDA çıkar/iner ve dönüş atlamalı olur: yön bilgisi kaybolmaz,
   yalnız animasyonu kalkar (seçim halkası zaten durağan). */
@media (prefers-reduced-motion: reduce) {
  .map-vehicle-arrow,
  .map-vehicle-shape {
    transition: none;
  }
}
/* Plaka ve hız TEK KARTTA, tek metin satırı olarak. Kart FLEX DEĞİL: `overflow: hidden` taşıyan bir flex
   öğesinin baseline'ı metninden değil alt kenarından sentezlenir ve hız alanı daralma için overflow
   aldığında plakanın hizasından kaçıyordu. Düz satır + `vertical-align: top` ile hizalama tarayıcının
   metrik sentezine hiç bağlı kalmaz. Kart genişliği içeriğe göredir → hız açılıp kapandıkça KARTIN
   KENDİSİ animasyonlu genişleyip daralır. */
.map-vehicle-badge {
  display: block;
  max-width: 170px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.map-vehicle-label,
.map-vehicle-speed,
.map-vehicle-idle {
  display: inline-block;
  vertical-align: top;
  height: 14px;
  line-height: 14px;
}
.map-vehicle-label {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hız araç HAREKET HÂLİNDEYKEN açılır, durunca kapanır — marker daireden damlaya dönerken kart da hızı
   açar, araç durunca ikisi birlikte sadeleşir. Kapanış `display: none` DEĞİL: geçiş için eleman akışta
   kalmalı. Genişlik, ayırıcı nokta ve opaklık BİRLİKTE kapanır → kart sağdan içeri doğru toplanır,
   ortada askıda bir ayırıcı kalmaz. tabular-nums sayı değişiminde kartın titremesini önler. */
.map-vehicle-speed,
.map-vehicle-idle {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: max-width 220ms ease-out, opacity 160ms ease-out;
}
.map-vehicle-speed::before,
.map-vehicle-idle::before {
  content: "·";
  padding: 0 4px;
  opacity: 0.5;
}
.map-vehicle-speed.is-on {
  max-width: 64px; /* "· 120 km/h" 10px tabular ile ~53px — tavan yalnız geçişin hedefini sabitler */
  opacity: 1;
}
.map-vehicle-idle {
  color: #b45309;
}
.map-vehicle-idle.is-on {
  max-width: 96px;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .map-vehicle-speed,
  .map-vehicle-idle {
    transition: none;
  }
}

/* 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 var(--app-amber);
  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;
}

/* Sidebar footer'ında yalnız gerektiğinde genişleyerek beliren düğmeler (indirmeler, uygulama kurulumu).
   Gizliyken eksi kenar boşluğu satırın gap'ini (gap-0.5) yutar; komşular kaymaz. */
.kt-btn.recording-downloads-toggle,
.kt-btn.pwa-install-toggle {
  position: relative;
  width: 0;
  min-width: 0;
  height: 2rem;
  margin-inline-start: -0.125rem;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.4);
  transition: width 0.28s ease, margin 0.28s ease, opacity 0.18s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.kt-btn.recording-downloads-toggle.is-visible,
.kt-btn.pwa-install-toggle.is-visible {
  width: 2rem;
  margin-inline-start: 0;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: width 0.28s ease, margin 0.28s ease, opacity 0.2s ease 0.08s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}
.rd-ring {
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
}
.rd-ring-track {
  fill: none;
  stroke: var(--app-surface-track);
  stroke-width: 3;
}
.rd-ring-value {
  fill: none;
  stroke: var(--app-info);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease, stroke 0.2s ease;
}
.rd-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.rd-ring-label i {
  font-size: 11px;
}
.rd-ring-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--app-info);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.recording-downloads-toggle[data-state="waitingForDevice"] .rd-ring-value {
  stroke: var(--app-warn);
}
.recording-downloads-toggle[data-state="waitingForDevice"] .rd-ring {
  animation: rd-pulse 1.6s ease-in-out infinite;
}
.recording-downloads-toggle[data-state="paused"] .rd-ring-value,
.recording-downloads-toggle[data-state="queued"] .rd-ring-value {
  stroke: var(--app-ink-muted);
}
.recording-downloads-toggle[data-state="finalizing"] .rd-ring {
  animation: rd-spin 1.2s linear infinite;
}
.recording-downloads-toggle[data-state="finalizing"] .rd-ring-value {
  stroke-dashoffset: 40;
}
.recording-downloads-toggle[data-state="completed"] .rd-ring-value {
  stroke: var(--app-good);
}
.recording-downloads-toggle[data-state="completed"] .rd-ring-label {
  color: var(--app-good);
}
.recording-downloads-toggle[data-state="failed"] .rd-ring-value {
  stroke: var(--app-crit);
}
.recording-downloads-toggle[data-state="failed"] .rd-ring-label {
  color: var(--app-crit);
}
@keyframes rd-spin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}
@keyframes rd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.rd-card {
  position: fixed;
  z-index: 110; /* mobil sidebar drawer'ının (KTDrawer, z-index 100) üstünde; diyalog (1100+) ve toast hâlâ üstte */
  display: flex;
  flex-direction: column;
  width: min(92vw, 22rem);
  max-height: min(70vh, 28rem);
  border: 1px solid var(--app-line);
  border-radius: 0.75rem;
  background: var(--app-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  color: var(--app-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.rd-card.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.rd-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem 0.5rem;
  border-bottom: 1px solid var(--app-line-soft);
}
.rd-card-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.rd-card-summary {
  font-size: 0.75rem;
  color: var(--app-ink-muted);
}
.rd-card-list {
  overflow-y: auto;
  padding: 0.375rem;
}
.rd-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.rd-item + .rd-item {
  margin-top: 0.125rem;
}
.rd-item.is-current {
  background: var(--app-surface-sunken);
}
.rd-item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.rd-item-title,
.rd-item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-item-title {
  font-size: 0.8125rem;
  font-weight: 600;
}
.rd-item-tag {
  display: inline-block;
  margin-right: 0.375rem;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  background: var(--app-crit-soft);
  color: var(--app-crit-ink);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  vertical-align: 1px;
}
.rd-item-meta {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--app-ink-soft);
}
.rd-item[data-state="waitingForDevice"] .rd-item-meta {
  color: var(--app-warn-ink);
}
.rd-item[data-state="completed"] .rd-item-meta {
  color: var(--app-good-ink);
}
.rd-item[data-state="failed"] .rd-item-meta {
  color: var(--app-crit-ink);
}
.rd-item-bar {
  height: 4px;
  margin-top: 0.375rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--app-surface-track);
}
.rd-item-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-info);
  transition: width 0.6s ease;
}
.rd-item[data-state="waitingForDevice"] .rd-item-bar > span {
  background: var(--app-warn);
}
.rd-item[data-state="paused"] .rd-item-bar > span,
.rd-item[data-state="queued"] .rd-item-bar > span {
  background: var(--app-ink-muted);
}
.rd-item-percent {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-ink-soft);
  font-variant-numeric: tabular-nums;
}
.rd-item-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.125rem;
}
.rd-item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--app-ink-muted);
  cursor: pointer;
}
.rd-item-action:hover {
  background: var(--app-surface-hover);
  color: var(--app-ink);
}
@media (prefers-reduced-motion: reduce) {
  .rd-card,
  .rd-ring-value,
  .rd-item-bar > span,
  .kt-btn.recording-downloads-toggle,
  .kt-btn.pwa-install-toggle {
    transition: none;
  }
  .rd-ring {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Üç 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: var(--app-surface);
  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: var(--app-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: var(--app-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.map-panel-handle:hover {
  background: var(--app-surface-hover);
}
.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: var(--app-dot-off);
}
.map-live-empty {
  padding: 32px 8px;
  text-align: center;
  color: var(--app-ink-muted);
  font-size: 13px;
}

/* --- Sol panel: sekmeler + araç arama/filtre + liste --- */
.map-left-tabs {
  display: flex;
  border-bottom: 1px solid var(--app-line-soft);
}
.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: var(--app-ink-soft);
  cursor: pointer;
}
.map-left-tabs button.active {
  color: var(--app-accent);
  border-bottom-color: var(--app-accent);
}
.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 var(--app-line-soft);
  border-radius: 8px;
  background: var(--app-surface-sunken);
  color: var(--app-ink-muted);
}
.map-left-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--app-ink);
}
.map-left-tool {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-line-soft);
  border-radius: 8px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  cursor: pointer;
}
.map-left-tool:hover {
  background: var(--app-surface-hover);
}
.map-left-tool.active {
  border-color: var(--app-crit);
  background: var(--app-crit-wash);
  color: var(--app-crit);
}
/* 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: var(--app-crit-line);
  color: var(--app-crit);
}
.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 var(--app-line-soft);
}
.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: var(--app-accent);
  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: var(--app-ink-soft);
  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: var(--app-good); }
.map-left-stab.s-idle { --stab-accent: var(--app-amber); }
.map-left-stab.s-passive { --stab-accent: var(--app-ink-soft); }
.map-left-stab.s-offline { --stab-accent: var(--app-ink-soft); }
.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: var(--app-surface-hover);
  color: var(--app-ink-soft);
  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%, var(--app-surface));
  color: var(--stab-accent);
}
.map-left-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 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 var(--app-line-soft);
  border-radius: 8px;
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.map-group-head:hover {
  background: var(--app-surface-track);
}
.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: var(--app-ink-muted);
  font-size: 12px;
  cursor: pointer;
}
.map-group-eye:hover {
  background: rgba(148, 163, 184, 0.24);
  color: var(--app-ink-soft);
}
.map-group-eye.off,
.map-group-eye.off:hover {
  color: var(--app-crit);
}
/* 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: 5px;
}
.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: 7px;
  padding: 4px 7px;
  border: 1px solid var(--app-line-soft);
  border-radius: 8px;
  background: var(--app-surface);
  cursor: pointer;
}
.map-vrow:hover {
  background: var(--app-surface-sunken);
}
.map-vrow.alarm {
  background: var(--app-crit-wash);
  border-color: var(--app-crit-line);
}
.map-vrow.alarm:hover {
  background: var(--app-crit-soft);
}
/* Veri kesinti uyarısı: eşikten uzun süredir veri göndermeyen araç satırı (SOS 'alarm' ile aynı dil) */
.map-vrow.warned {
  background: var(--app-crit-wash);
  border-color: var(--app-crit-line);
}
.map-vrow.warned:hover {
  background: var(--app-crit-soft);
}
.map-vrow-warned-ico {
  color: var(--app-crit);
}
.map-vrow-thumb {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
}
.map-vrow-thumb svg {
  width: 15px;
  height: 15px;
}
.map-vrow-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
/* Araç tipi PNG'leri (assets/media/vehicle-types) saydam zeminli, tek renk SİYAH çizgi-sanattır.
   Koyu temada altlarındaki yüzey de koyu olduğundan ikon zemine gömülür → tamamı beyaza çevrilir
   (brightness(0) tek renge indirger, invert(1) beyaz yapar). Görselin çizildiği HER yüzey burada
   toplu tutulur; harita üzerindeki marker listede YOK, orada görsel beyaz disk üstünde duruyor. */
.dark .map-vrow-thumb img, /* harita sol paneli: Araçlar listesi */
.dark .vtype-thumb img, /* araç listesi tablosu */
.dark #show-vehicle-image:not(.is-photo), /* araç detay sayfası başlığı */
.dark .tire-row-type-icon /* lastik yönetimi listesi */ {
  filter: brightness(0) invert(1);
}
/* 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;
}
.entity-cell-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.entity-cell-link:hover {
  text-decoration: underline;
}
.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: 5px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--app-ink);
}
.map-vrow-alarm-ico {
  color: var(--app-crit);
  font-size: 12px;
}
.map-vrow-coupling {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--app-ink-soft);
}
.map-vrow-coupling svg {
  width: 10px;
  height: 10px;
}
.map-vrow-sub {
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-vrow-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--app-ink-muted);
  font-size: 12.5px;
}
.map-vrow-icons .ki-wifi.on {
  color: var(--app-good);
}
.map-vrow-icons .ki-wifi.off {
  color: var(--app-ink-faint);
}
.map-vrow-ico {
  display: inline-flex;
  align-items: center;
}
.map-vrow-ico svg {
  width: 12.5px;
  height: 12.5px;
}
.map-vrow-ico.engine.on {
  color: var(--app-good);
}
.map-vrow-ico.engine.unknown {
  color: var(--app-ink-faint);
}
/* 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: var(--app-good);
}
.map-vrow-ico.fuel.red {
  color: var(--app-crit);
}
.map-vrow-ico.fuel.neutral {
  color: var(--app-ink-faint);
}
/* Hız ihlali ikonu: yalnız araç eşik-üstündeyken çizilir → daima turuncu (uyarı bayrağı) */
.map-vrow-ico.speed.speeding {
  color: var(--app-warn);
}
/* Anlık hız ihlali satırı: turuncu vurgu (SOS 'alarm'/veri-kesinti 'warned' ile aynı dil, farklı renk) */
.map-vrow.speeding {
  background: var(--app-warn-wash);
  border-color: var(--app-warn-line);
}
.map-vrow.speeding:hover {
  background: var(--app-warn-soft);
}
/* 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: var(--app-cyan);
}
/* 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: var(--app-cyan-wash);
  border-color: var(--app-cyan-line);
}
.map-vrow.engine-warn:hover {
  background: var(--app-cyan-soft);
}
/* --- Sağ panel: canlı DMS akışı --- */
.map-dms-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--app-line-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-ink);
}
.map-dms-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.map-dms-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--app-line-soft);
  border-left: 3px solid var(--app-amber);
  border-radius: 8px;
  background: var(--app-surface);
  cursor: pointer;
  transition: transform 320ms ease-out, opacity 320ms ease-out;
}
.map-dms-row:hover {
  background: var(--app-surface-sunken);
}
.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: var(--app-ink);
}
.map-dms-row-time {
  font-size: 10.5px;
  color: var(--app-ink-soft);
}
.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: var(--app-amber-soft);
  color: var(--app-amber-ink);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.map-dms-row-speed {
  font-size: 10.5px;
  color: var(--app-ink-soft);
}
/* Akışta SOS satırı: turuncu DMS vurgusundan acil kırmızıya ayrışır. */
.map-dms-row-sos {
  border-left-color: var(--app-sos);
}
.map-dms-chip-sos {
  background: var(--app-crit-soft);
  color: var(--app-crit-ink);
}
/* Hız ihlali geçmişi chip'i: tepe hız → turuncu (canlı toast/ikonla aynı palet). */
.map-dms-chip.speed {
  background: var(--app-warn-soft);
  color: var(--app-warn-ink);
}
.map-dms-chip.neutral {
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
}

/* Sağ panel CANLI AKIŞ kartı: sol paneldeki araç satırıyla (map-vrow) aynı dil — yuvarlak tip ikonu,
   plaka, iki bilgi satırı. Tip/aciliyet rengini ikon taşır (eski sağ çip + 3px sol şerit kartı
   kalınlaştırıyordu). Kurallar map-feed-row'a kapalıdır: aynı .map-dms-row iskeleti yakıt/hız/soğuk
   zincir ve cihaz olayları MODALLARINDA da kullanılıyor, onların düzeni değişmemeli. */
.map-dms-row.map-feed-row {
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 4px 7px;
  border-left-width: 1px;
  border-left-color: var(--app-line-soft);
}
/* DMS ikonu TEK RENK (nötr gri, kullanıcı kararı 2026-09-18): olay tipini ikon ŞEKLİ ve altındaki
   etiket söyler — her tipe renk vermek şeridi kalabalıklaştırıyordu. Sol paneldeki araç thumb'ıyla
   aynı yüzey. SOS bunun DIŞINDA: acil durum kırmızısı sessizleştirilmez. */
.map-feed-thumb {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
  font-size: 13px;
}
.map-dms-row-sos .map-feed-thumb {
  background: var(--app-crit-soft);
  color: var(--app-crit-ink);
}
.map-feed-thumb .vio-ic {
  font-size: 17px;
}
.map-feed-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Ölçü sütunu: zaman ve hız SAĞDA alt alta, sağa yaslı — kart genişliğinin sağ yarısı boş kalmasın. */
.map-feed-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.map-feed-row .map-dms-row-title {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-feed-sub {
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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: var(--app-surface-track); }
  60% { background-color: var(--app-surface-hover); }
  100% { background-color: var(--app-surface); }
}
@keyframes dmsCardFlashSos {
  0% { background-color: var(--app-crit-flash); }
  60% { background-color: var(--app-crit-soft); }
  100% { background-color: var(--app-surface); }
}
/* 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: var(--app-surface);
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 0 1px var(--app-sos);
}
@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;
  transition: height 260ms ease, opacity 200ms ease, margin-top 260ms ease;
}
.map-sos-stack.collapsed .map-sos-cards {
  opacity: 0;
  margin-top: -8px;
}
.map-sos-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 9px;
  background: var(--app-surface);
  border: 1px solid var(--app-crit-line);
  border-left: 4px solid var(--app-sos);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: height 240ms ease, margin-bottom 240ms ease, opacity 180ms ease, transform 240ms ease;
}
.map-sos-card:last-child {
  margin-bottom: 0;
}
.map-sos-card.map-sos-card-entering {
  animation: map-sos-slide-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-sos-card.map-sos-card-leaving {
  overflow: hidden;
  opacity: 0;
  transform: translateX(18px);
}
.map-sos-stack.map-sos-entering {
  animation: map-sos-slide-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-sos-stack.map-sos-leaving {
  animation: map-sos-slide-out 240ms ease-in forwards;
}
.map-sos-stack.map-sos-leaving,
.map-sos-stack.map-sos-leaving > * {
  pointer-events: none;
}
@keyframes map-sos-slide-in {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes map-sos-slide-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(18px) scale(0.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-sos-cards,
  .map-sos-card {
    transition: none;
  }
  .map-sos-stack.map-sos-entering,
  .map-sos-stack.map-sos-leaving,
  .map-sos-card.map-sos-card-entering {
    animation: none;
  }
}
.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: var(--app-crit-soft);
  color: var(--app-sos);
  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: var(--app-ink);
  line-height: 1.15;
}
.map-sos-card-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--app-crit-ink);
  word-break: break-word;
}
.map-sos-card-time {
  font-size: 10.5px;
  color: var(--app-ink-muted);
}
.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: var(--app-surface-hover);
  color: var(--app-ink-soft);
  border: 1px solid var(--app-line-soft);
}
.map-sos-btn-goto:hover {
  background: var(--app-surface-track);
}
.map-sos-btn-ack {
  background: #e11d2e;
  color: #fff;
  border: 1px solid var(--app-sos);
}
.map-sos-btn-ack:hover {
  background: var(--app-sos-hover);
}
.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: var(--app-warn);
}
.map-alert-engine {
  --a-color: #22d3ee;
  --a-soft: rgba(6, 182, 212, 0.28);
  --a-badge: var(--app-cyan);
}
/* 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: var(--app-violet);
}
/* 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: var(--app-rose);
}
/* Soğuk zincir: buz mavisi. Motor limitinin camgöbeğinden (#22d3ee) ayrık tutulur — ikisi de "sıcaklık"
   konuşuyor (motor suyu vs kasa içi) ve aynı tonu paylaşsalar bildirim çubuğunda hangisinin çaldığı
   okunamazdı. Kırmızı/gül ailesine de girmez: bozulma riski acil değil, geri döndürülemez bir süreçtir. */
.map-alert-coldChain {
  --a-color: #38bdf8;
  --a-soft: rgba(14, 165, 233, 0.28);
  --a-badge: #0284c7;
}

/* 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, var(--app-warn));
  }
  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: var(--app-ink-muted);
}
.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: var(--app-ink-muted);
  cursor: pointer;
}
.map-georow-actions button:hover {
  background: rgba(148, 163, 184, 0.18);
  color: var(--app-ink-soft);
}
/* Bölge adı etiketi (haritada geometri merkezinde; HTML marker). */
.map-geolabel {
  max-width: 170px;
  padding: 2px 7px;
  border-left: 3px solid var(--app-violet);
  border-radius: 5px;
  background: color-mix(in srgb, var(--app-surface) 90%, transparent);
  color: var(--app-ink);
  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: var(--app-surface);
  color: var(--app-ink);
  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).
   Taban renk hızın turuncusudur; her yeni TÜR buraya kendi data-alert-kind satırını eklemek zorundadır,
   yoksa sessizce hızın turuncusuyla atar (kanal rengi --a-color'un koyu ucu alınır, bkz. .map-alert-*). */
.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;
}
.map-geotools.has-alerts.idle[data-alert-kind='geofence'] {
  --alert-rgb: 124, 58, 237;
}
.map-geotools.has-alerts.idle[data-alert-kind='damper'] {
  --alert-rgb: 225, 29, 72;
}
.map-geotools.has-alerts.idle[data-alert-kind='coldChain'] {
  --alert-rgb: 2, 132, 199;
}
@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:not(:disabled) {
  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;
}
/* Konum bekleyen aksiyon (ör. "Araca Git"): sağ-tık menüsündeki disabled diliyle aynı. */
.map-geotool:disabled {
  opacity: 0.45;
  cursor: default;
}
.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: var(--app-surface);
  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: var(--app-ink-soft);
}
.map-placesearch-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--app-ink);
}
.map-placesearch-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--app-ink-muted);
  cursor: pointer;
}
.map-placesearch-close:hover {
  background: rgba(148, 163, 184, 0.18);
}
.map-placesearch-results {
  max-height: 260px;
  border-top: 1px solid var(--app-line);
  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: var(--app-surface-hover);
}
.map-placesearch-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-ink);
}
.map-placesearch-sub {
  font-size: 11px;
  color: var(--app-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-placesearch-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--app-ink-muted);
}

/* 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 var(--app-line);
}
.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 var(--app-line);
  border-radius: 10px;
  color: var(--app-ink-soft);
  font-size: 12.5px;
  cursor: pointer;
}
.map-geoio-drop:hover,
.map-geoio-drop.over {
  border-color: var(--app-violet);
  background: rgba(124, 58, 237, 0.06);
  color: var(--app-violet-ink);
}
.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: var(--app-surface-sunken);
  font-size: 12px;
}
.map-geoio-row .ok {
  color: var(--app-good);
}
.map-geoio-row.skipped {
  color: var(--app-amber-ink);
  background: rgba(245, 158, 11, 0.1);
}
.map-geoio-row-name {
  font-weight: 600;
  color: var(--app-ink);
}
.map-geoio-row-sub {
  margin-left: auto;
  color: var(--app-ink-soft);
}
.map-geoio-export {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-geoio-count {
  color: var(--app-ink-muted);
  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: var(--app-violet-ink);
  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;
}
/* Bölgeye özel tavanlar (hız/devir): yan yana iki dar sayı alanı; boş bırakılan kural kapalıdır. */
.map-geofence-limits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .map-geofence-limits {
    grid-template-columns: 1fr;
  }
}
[data-target-picker].disabled {
  opacity: 0.45;
}
.map-geofence-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-geofence-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.map-geofence-picker-head .map-cset-field-label {
  margin-bottom: 0;
}
.map-geofence-picker-summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-violet-ink);
}
.map-geofence-picker-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.map-geofence-picker-chip {
  border: 1px solid var(--kt-border, var(--app-line-soft));
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  color: var(--app-ink-soft);
  background: transparent;
  cursor: pointer;
}
.map-geofence-picker-chip b {
  font-weight: 600;
}
.map-geofence-picker-chip.active {
  border-color: var(--app-violet-ink);
  background: rgba(124, 58, 237, 0.08);
  color: var(--app-violet-ink);
}
.map-geofence-picker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.map-geofence-picker-only {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: auto;
  font-size: 12.5px;
  cursor: pointer;
}
.map-geofence-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--kt-border, var(--app-line-soft));
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12.5px;
}
.map-geofence-picker-section {
  position: sticky;
  top: -4px;
  padding: 6px 0 3px;
  background: var(--app-surface);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--app-ink-soft);
}
.map-geofence-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.map-geofence-picker-row.is-blocked {
  cursor: not-allowed;
  opacity: 0.6;
}
.map-geofence-picker-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.map-geofence-picker-title {
  font-weight: 600;
}
.map-geofence-picker-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--app-ink-soft);
}
.map-geofence-picker-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  background: rgba(124, 58, 237, 0.08);
  color: var(--app-violet-ink);
}
.map-geofence-picker-badge.warn {
  background: var(--app-warn-soft);
  color: var(--app-warn-ink);
}
.map-geofence-picker-empty {
  padding: 10px 0;
  color: var(--app-ink-soft);
}
.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, var(--app-line-soft));
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.map-geocat-new {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--kt-border, var(--app-line-soft));
}
/* 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;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.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;
  /* SEKME DEĞİŞİMİNDE BOY OYNAMAZ: min ve max aynı değere bağlı. Sekmelerin doğal boyu çok farklı
     (Veri iki sütun satır, Bölge Olayları 50 kayıt, Grafik tuval, Bakım üç sütun) — eskiden yalnız üst
     sınır vardı ve kart her geçişte zıplıyordu. Kısa ekranda sabit 300 px haritanın yarısını yiyeceği
     için 42vh ile sınırlanır; gövde (bkz. .map-bottom-body) kalan alanı doldurur ve kendi içinde kayar. */
  --map-bottom-h: min(300px, 42vh);
  min-height: var(--map-bottom-h);
  max-height: var(--map-bottom-h);
  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).
   Gövde burada flex KUTU olur ki grafik kalan alanı tam kaplasın — panel sabit boya geçtikten sonra
   akış düzeninde bırakılsaydı tuval doğal boyunda kalıp altında boşluk bırakırdı (ApexCharts height:'100%'
   olduğu için ölçüyü kapsayıcıdan alır). */
.map-bottom-panel.map-bottom-chart .map-bottom-body {
  display: flex;
  overflow: hidden;
}
.map-bottom-panel.map-bottom-chart .can-chart {
  flex: 1 1 auto;
  min-height: 0;
}
.map-fullpage.map-lp-closed .map-bottom-panel {
  left: 46px;
}
.map-fullpage.map-rp-closed .map-bottom-panel {
  right: 46px;
}

/* --- Kartı taşıma / boyutlandırma (bkz. panel-drag-resize.js) --- */
/* SERBEST kip: geometri artık satır içi left/top/width/height'tan gelir → karşı çıpalar ve yukarıdaki
   yükseklik kilidi açılır. Satır içi stil CSS'i yendiği için yan panel daraltma kuralları (yukarısı)
   serbest kartı bir daha oynatmaz: kullanıcının koyduğu yerde kalır. */
.map-bottom-panel.map-bottom-free {
  right: auto;
  bottom: auto;
  min-height: 0;
  max-height: none;
}
/* Sürükleme boyunca geçiş KAPALI: left/right geçişi işaretçiyi geriden takip eden lastik bir kart yapardı.
   .open kuralı geçişi yeniden tanımladığı için o birleşim de ayrıca susturulur. */
.map-bottom-panel.map-bottom-dragging,
.map-bottom-panel.map-bottom-dragging.open {
  transition: none;
}
/* Sürükleme sırasında kart yerine metin/sayfa sürüklenmesin. */
.map-bottom-drag-active {
  user-select: none;
}
.map-bottom-head {
  cursor: grab;
  touch-action: none; /* dokunmatikte kaydırma değil taşıma */
}
.map-bottom-panel.map-bottom-dragging .map-bottom-head {
  cursor: grabbing;
}
/* Başlıktaki tıklanabilirler kendi imlecini korur — sürükleme onlardan başlamaz (bkz. INTERACTIVE). */
.map-bottom-head button,
.map-bottom-head a {
  cursor: pointer;
}
/* Kenar/köşe tutamaçları: GÖRÜNMEZ ama yakalanabilir şeritler. Kart overflow:hidden olduğu için içeriye
   yerleşirler. Köşeler kenar şeritlerinin ÜSTÜNDE kalmak zorunda, yoksa çapraz boyutlandırma tek eksene düşer. */
.map-bottom-grip {
  position: absolute;
  z-index: 2;
  touch-action: none;
}
.map-bottom-grip-n { top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.map-bottom-grip-s { bottom: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.map-bottom-grip-w { top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize; }
.map-bottom-grip-e { top: 0; bottom: 0; right: 0; width: 6px; cursor: ew-resize; }
.map-bottom-grip-nw,
.map-bottom-grip-ne,
.map-bottom-grip-sw,
.map-bottom-grip-se {
  z-index: 3;
  width: 14px;
  height: 14px;
}
.map-bottom-grip-nw { top: 0; left: 0; cursor: nwse-resize; }
.map-bottom-grip-ne { top: 0; right: 0; cursor: nesw-resize; }
.map-bottom-grip-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.map-bottom-grip-se { bottom: 0; right: 0; cursor: nwse-resize; }
/* Sağ alt köşede TEK görünür ipucu: kartın boyutlanabildiği başka türlü anlaşılmaz (tutamaçlar görünmez). */
.map-bottom-grip-se::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.32);
  border-bottom: 2px solid rgba(255, 255, 255, 0.32);
  border-bottom-right-radius: 3px;
}
.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;  /* theme-ok: koyu cam üstü */
}
/* Ç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 {
  /* Panel sabit boyda olduğu için gövde kalan alanı DOLDURUR (flex:1) ve taşarsa kendi içinde kayar;
     min-height:0 olmadan flex öğesi içeriğinin altına inemez ve kaydırma yerine panel taşardı. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Sağdaki 6 px ŞEFFAF KENAR kaydırma çubuğunu kartın kenarından içeri alır: çubuk kenar (border) ile
     dolgu (padding) arasına yerleşir, yani kenarlık onu içeri iter. Gerekçe boyutlandırma tutamacı —
     .map-bottom-grip-e kartın sağ kenarındaki 6 px'i kapıyor ve çubuk tam orada olsaydı sürüklenemezdi.
     Dolgu 11 → 5 px'e indirildi ki toplam sağ boşluk (5 + 6) eskisiyle aynı kalsın. */
  border-right: 6px solid transparent;
  padding: 10px 5px 11px 11px;
  /* Kart kullanıcı tarafından boyutlandırılabildiği için içerik kırılımları PENCEREYE değil KARTA
     bağlanmak zorunda: 1400 px'lik ekranda 420 px'e küçültülmüş bir kartta @media hâlâ "geniş ekran"
     der ve iki sütunlu ızgara okunmaz hâle gelirdi. Kırılımlar aşağıdaki @container mapcard bloklarında. */
  container-type: inline-size;
  container-name: mapcard;
  /* 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;
  /* GRAFİĞİN KART İLE BÜYÜMESİ BUNA BAĞLI: bu iki satır yoksa şeridin boyu İÇERİĞİNE göre kalır
     (metrik listesi ya da tuvalin 120 px alt sınırı), kart yükseltilince yükseklik tuvale hiç ulaşmaz ve
     altında boşluk açılırdı — kart boyutlandırılabilir olunca doğrudan görünür hâle geldi. */
  flex: 1 1 auto;
  min-height: 0;
}
.can-chart-metrics {
  flex: 0 0 168px;
  min-width: 0;
  /* Tavan YOK: liste kartla birlikte uzar, taşarsa kendi içinde kayar. Sabit 175 px tavan, yükseltilmiş
     kartta listeyi tuvalin yanında yarı boy bırakıyordu. */
  max-height: none;
  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, var(--app-accent));
}
.can-chart-metric-ic {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--m-color, var(--app-accent));
}
.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-metric-at {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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;
  /* Sağ üstteki kompakt aralık butonlarına yer bırak (başlık altına girmesin). Genişlik butonların GERÇEK
     ölçüsünden gelir (can-chart.js reserveRangesWidth; etiket uzunluğu dile göre değişir), ölçülemediyse eski
     sabit pay. */
  padding-right: calc(var(--can-chart-ranges-w, 142px) + 8px);
}
.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;
}
/* Grafik üstü uyarı satırı (ham modda nokta tavanı aşıldı): seri ÇİZİLİR ama eksik olduğu söylenir —
   sessizce kırpmak "bu aralıkta başka veri yok" gibi okunurdu. */
.can-chart-note {
  flex: 0 0 auto;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--app-amber-ink);
}
/* Soğuk zincir legend'i — apex'in TUVAL İÇİ legend'inin yerine (gerekçe cold-chain-chart.js'te).
   flex: 0 0 auto → yüksekliğini kutudan alır, eğrinin alanından kesmez. */
.can-chart-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin-top: 4px;
  padding-left: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}
.can-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* İşaret seriyi ÇİZİLDİĞİ şekilde gösterir: bant solgun dolgu + kenar (rangeArea, opacity .22, stroke 0)… */
.can-chart-legend-band {
  flex: 0 0 auto;
  width: 16px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--band-color) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-color) 55%, transparent);
}
/* …ortalama ise 2 px çizgi (line serisi). İkisi aynı renkte olduğu için ayrımı ŞEKİL taşır. */
.can-chart-legend-line {
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--band-color);
}
/* Kartın ORTAK durum bloğu (yükleniyor · boş · hata) — bkz. card-state.js. Ad map-card-* çünkü blok
   artık yalnız CAN grafiğinin değil kartın TÜM sekmelerinin. Hem esnek (Grafik/Soğuk Zincir sekmesinin
   flex gövdesi) hem akış (Veri/Bölge/Bakım sekmesinin blok gövdesi) bağlamında ortalanmak zorunda:
   height:100% akış bağlamını, flex:1 esnek bağlamı çözer. */
.map-card-state {
  flex: 1 1 auto;
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.map-card-state i {
  font-size: 28px;
}
.map-card-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;
}
.map-card-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);
}
.map-card-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: #fff;  /* theme-ok: koyu cam üstü spinner halkası */
  border-radius: 50%;
  animation: map-card-spin 0.8s linear infinite;
}
@keyframes map-card-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .can-chart-main { flex-direction: column; }
  .can-chart-metrics { flex-basis: auto; max-height: 150px; }
}

/* --- Sayfa görünümü (araç detayı Grafikler tab'ı; can-chart.js / cold-chain-chart.js variant 'page') ---
   Yapı cam kartla AYNI, yalnız mürekkep değişir: camın beyaz tonları açık temada görünmezdi. Renkler --app-*
   token'larından → koyu temada kendiliğinden döner. Seçili satırın çerçevesi yine seri rengi (--m-color). */
.can-chart--page .can-chart-metrics {
  flex-basis: 210px;
}
/* Dar ekranda liste üste geçer (sütun yönü): 210 px genişlik orada YÜKSEKLİK olurdu → kırılımın auto'su kalır. */
@media (max-width: 640px) {
  .can-chart--page .can-chart-metrics { flex-basis: auto; }
}
.can-chart--page .can-chart-metric {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--app-line);
}
.can-chart--page .can-chart-metric:hover {
  background: var(--app-surface-hover);
  box-shadow: inset 0 0 0 1px var(--app-line);
}
.can-chart--page .can-chart-metric.active {
  background: var(--app-surface-sunken);
  box-shadow: inset 0 0 0 1.5px var(--m-color, var(--app-accent));
}
.can-chart--page .can-chart-metric-name {
  color: var(--app-ink-soft);
}
.can-chart--page .can-chart-metric-val,
.can-chart--page .can-chart-plot-title {
  color: var(--app-ink);
}
.can-chart--page .can-chart-metric-unit,
.can-chart--page .can-chart-metric-at,
.can-chart--page .can-chart-plot-unit,
.can-chart--page .can-chart-legend {
  color: var(--app-ink-muted);
}
/* Aralık düğmeleri grafiğin üstünde değil sekmenin araç çubuğunda → başlık sağda yer ayırmaz. */
.can-chart--page .can-chart-plot-head {
  padding-right: 0;
}
.can-chart--page .map-card-state {
  color: var(--app-ink-muted);
}
.can-chart--page .map-card-spinner {
  border-color: var(--app-line);
  border-top-color: var(--app-accent);
}
.can-chart--page .map-card-retry {
  background: var(--app-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--app-line);
  color: var(--app-ink);
}
.can-chart--page .map-card-retry:hover {
  background: var(--app-surface-hover);
  box-shadow: inset 0 0 0 1px var(--app-line);
}

/* --- Kart genişliğine göre iç düzen (kart boyutlandırılabilir; gerekçe .map-bottom-body'de) --- */
/* Dar kart: çok sütunlu ızgaralar tek sütuna düşer — 420 px'de iki sütun, satırların anahtar/değer
   çiftini birbirinin üstüne katlıyordu. */
@container mapcard (max-width: 560px) {
  .map-bottom-grid,
  .map-bottom-grid.map-maint-grid {
    grid-template-columns: 1fr;
  }
}
/* Orta genişlik: Bakım sekmesi üç sütun taşıyamaz ama ikiyi taşır (muayene "kahraman" satırı geniştir). */
@container mapcard (min-width: 560.01px) and (max-width: 840px) {
  .map-bottom-grid.map-maint-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Dar kart + Grafik/Soğuk Zincir sekmesi: metrik/sensör listesi SOLDAN ÜSTE geçer ve yatay şeride döner.
   168 px'lik sabit sütun, 420 px'lik bir kartta tuvale 200 px'den az yer bırakıyordu — grafik ezilirdi. */
@container mapcard (max-width: 520px) {
  .can-chart-main {
    flex-direction: column;
  }
  .can-chart-metrics {
    flex: 0 0 auto;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .can-chart-metric {
    flex: 0 0 auto;
    width: auto;
  }
}

/* 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;
}
/* Son bilinen CAN okumasının anı: değerin yanında, grafik kartlarındaki okuma anıyla aynı tonda. */
.map-bottom-at {
  margin-left: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

/* --- Soğuk zincir kolonu: sensör başına satır. Diğer kolonlar anahtar/değer çiftidir, burada bir satır
   TEK sensörün tüm hâlini taşır (ad + durum çipleri + sıcaklık + aralık + pil) → kendi düzeni var. --- */
/* Sensör ŞERİDİ: bölmeler yan yana, sığmazsa yatay kaydırma (gerekçe cold-chain.js'te).
   Kaydırma çubuğu kartın kendi ince beyaz çubuğuyla aynı dilde — koyu camda tarayıcı varsayılanı leke gibi durur. */
.cold-chain-strip {
  display: flex;
  /* stretch (flex-start değil): ayırıcı çizgiler eşit boyda olsun — rozeti sarmalanan bir bölme
     komşusundan uzun olduğunda çizgiler basamak basamak görünüyordu. */
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.cold-chain-strip::-webkit-scrollbar {
  height: 8px;
}
.cold-chain-strip::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, 0.28);
}
/* Bölmeler DARALMAZ (flex 0 0 auto): sıkıştırılınca "-18,0 °C" iki satıra bölünüyor ve kolonun asıl
   bilgisi okunmaz hâle geliyordu — daralmak yerine şerit kaydırılır. */
.cold-chain-strip .cold-chain-row {
  flex: 0 0 auto;
  min-width: 128px;
  max-width: 210px;
  padding: 2px 10px;
  box-shadow: none; /* dikey listenin ALT çizgisi sıfırlanır; ayırıcıyı aşağıdaki komşu kuralı koyar */
}
/* Ayırıcı artık DİKEY: yan yana dizilmiş bölmeleri alt çizgi değil ara çizgi ayırır. */
.cold-chain-strip .cold-chain-row + .cold-chain-row {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07);
}
.cold-chain-strip .cold-chain-row:first-child {
  padding-left: 0;
}
.cold-chain-row {
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.cold-chain-row:last-child {
  box-shadow: none;
}
.cold-chain-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cold-chain-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
/* Sıcaklık satırın ASIL bilgisi: kolonun geri kalanından belirgin şekilde büyük. */
.cold-chain-row-value {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.cold-chain-row-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.cold-chain-chip {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* İhlal: buz mavisi ailesinin koyu ucu (bildirim kanalıyla aynı aile, bkz. .map-alert-coldChain). */
.cold-chain-chip-danger {
  background: rgba(2, 132, 199, 0.9);
  color: #fff;
}
/* Sessizlik AMBER: ihlalden farklı bir şey söylüyor — "ölçüm kötü" değil, "ölçüm YOK". Aynı renkte
   olsalar panelde biten pil ile bozulan yük aynı görünürdü. */
.cold-chain-chip-warn {
  background: var(--app-amber);
  /* Amber üstünde koyu metin: --app-ink her iki temada da okunur kalır (sabit hex tema rolünü kırar). */
  color: var(--app-ink);
}
/* Beklenmeyen (sökülmüş) sensör: nötr gri — bir uyarı değil, bir durum bildirimi. */
.cold-chain-chip-muted {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
}

/* Bakım & Muayene sekmesi: Veri sekmesinin sütun kartlarını (.map-bottom-col) üç sütunda kullanır —
   son muayene / son servisler / lastik iş emirleri. Muayene sütunu "kahraman" satırı taşıdığı için
   biraz daha geniş. Rozetler kt-badge DEĞİL: o aile açık tema içindir, koyu camda okunmuyor. */
.map-maint-grid {
  grid-template-columns: 1.15fr 1fr 1fr;
}
.map-maint-hero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.map-maint-hero-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.map-maint-hero-title {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.map-maint-hero-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}
.map-maint-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-maint-row:last-child {
  box-shadow: none;
}
.map-maint-row-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-maint-row-side {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}
.map-maint-row-tag {
  color: rgba(255, 255, 255, 0.45);
  font-size: 10.5px;
}
.map-maint-note {
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
}
.map-maint-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* Sütun başlığındaki açık emir rozeti başlığın harf aralığını miras almasın. */
.map-bottom-col-title .map-maint-badge {
  margin-left: 6px;
  letter-spacing: 0;
}
.map-maint-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.map-maint-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.map-maint-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.map-maint-link i {
  font-size: 12px;
}
/* Orta genişlik: üç sütun (yan panellerden arta kalan alanda) tarih + rozeti aynı satıra sığdıramıyor.
   900 px altında Veri sekmesiyle birlikte tek sütuna düşer (bkz. aşağıdaki dar ekran bloğu). */
@media (max-width: 1200px) {
  .map-maint-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Alt panel "Araç Uyarı / Gösterge Paneli" sekmesi (bkz. tell-tale-tab.js): lamba başına 36 px kare, ikon
   ortada. Araç detayındaki kutunun (.vtt-*) tonları açık sayfa içindir, koyu camda okunmaz → hâl tonları
   burada camın diliyle (dolgu + inset halka) yeniden yazılır; ikonlar siyah çizgi PNG, camda her iki temada
   da beyaza çevrilir. Fareyle üzerine gelince büyüyen kutu sayfa katmanındadır (.vtt-zoom). */
.map-tt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-tt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}
.map-tt-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-left: auto;
}
.map-tt-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.map-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
/* Grup kutuları yan yana, sığmayan alt satıra; tek başına satıra sığmayan kutu (ör. Diğer) daralır ve
   kareleri kendi içinde alt satıra geçer (min-width:0 — fieldset'in min-content genişliği bunu engellerdi).
   Başlık kenarın üstünde (legend) → kenar gölge değil gerçek border olmak zorunda. */
.map-tt-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.map-tt-group {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 2px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}
.map-tt-group-title {
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.map-tt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map-tt-tile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.map-tt-tile[aria-disabled="true"] {
  cursor: default;
}
.map-tt-tile:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 2px;
}
.map-tt-tile img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.8;
  pointer-events: none;
}
.map-tt-tile.map-tt-unknown img {
  opacity: 0.35;
}
.map-tt-tile.map-tt-red,
.map-tt-dot.map-tt-red {
  background: rgba(239, 68, 68, 0.42);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.95);
}
.map-tt-tile.map-tt-yellow,
.map-tt-dot.map-tt-yellow {
  background: rgba(245, 158, 11, 0.4);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.95);
}
.map-tt-tile.map-tt-info,
.map-tt-dot.map-tt-info {
  background: rgba(37, 99, 235, 0.55);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.85);
}
.map-tt-tile.map-tt-red img,
.map-tt-tile.map-tt-yellow img,
.map-tt-tile.map-tt-info img {
  opacity: 1;
}

/* --- 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;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.map-dms-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.map-dms-modal {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  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 var(--app-line-soft);
}
.map-dms-modal-vehicle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--app-ink);
}
.map-dms-modal-vehicle i {
  color: var(--app-ink-soft);
}
.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: var(--app-ink-soft);
  cursor: pointer;
}
.map-dms-modal-close:hover {
  background: var(--app-surface-hover);
}
.map-dms-modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
  font-size: 12px;
  color: var(--app-ink-soft);
}
.map-dms-modal-speed {
  font-weight: 700;
  color: var(--app-ink);
}
.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: var(--app-ink-soft);
}
.map-dms-modal-map {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-surface-hover);
}
.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: var(--app-ink-muted);
  font-size: 12px;
}
.map-dms-modal-coords {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--app-ink-soft);
}
.map-dms-modal-coords i {
  color: var(--app-accent);
}
.map-dms-modal-divider {
  margin: 12px 0 2px;
  border-bottom: 1px solid var(--app-line-soft);
}
.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, var(--app-surface-hover) 25%, var(--app-surface-track) 37%, var(--app-surface-hover) 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 var(--app-line-soft);
  border-radius: 8px;
  color: var(--app-ink-muted);
  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 var(--app-line-soft);
  display: flex;
  justify-content: center;
  gap: 6px;
}

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

.vshow-map {
  position: relative;
  height: 440px;
  overflow: hidden;
  background: var(--app-surface-hover);
}
.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: var(--app-ink-muted);
  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);
}
/* Son bilinen CAN okumasının anı (harita paneli ve grafik kartlarıyla aynı biçim). */
.vshow-mapcard-at {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
.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, var(--app-line));
  background: var(--app-surface-sunken);
  color: var(--app-ink);
  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, var(--app-info));
}
.vshow-chip-ic {
  font-size: 1rem;
  color: var(--color-primary, var(--app-info));
}
.vshow-chip-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-mono, var(--app-ink));
}
.vshow-chip-label {
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.vshow-chip-caret {
  font-size: 0.625rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  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, var(--app-line));
  background: var(--app-surface-sunken);
  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(--app-ink);
  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, var(--app-ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vshow-dev-type {
  flex: none;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.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: var(--app-good);
  background: rgba(22, 163, 74, 0.12);
}
.vshow-dev-status.is-passive {
  color: var(--app-ink-soft);
  background: rgba(107, 114, 128, 0.14);
}
.vshow-dev-empty {
  padding: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  text-align: center;
}
.vshow-coupling-ic svg {
  width: 16px;
  height: 16px;
}
.vshow-chip.is-coupled .vshow-coupling-ic {
  color: var(--color-primary, #1b84ff);
}
.vshow-coupling-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
}
.vshow-coupling-panel[hidden] {
  display: none;
}
.vshow-coupling-current,
.vshow-coupling-row {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.vshow-coupling-plate {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-ink);
  text-decoration: none;
}
a.vshow-coupling-plate:hover {
  text-decoration: underline;
}
.vshow-coupling-plate.is-missing {
  font-weight: 400;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.vshow-coupling-range {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.vshow-coupling-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.vshow-coupling-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, var(--app-line));
}
.vshow-coupling-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
/* 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 var(--color-border, var(--app-line));
  background: var(--app-surface-sunken);
  color: var(--app-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vshow-emg-btn:hover {
  border-color: var(--color-primary, var(--app-info));
}
.vshow-emg-btn i,
.vshow-emg-btn .vio-ic {
  font-size: 1rem;
}
/* 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, var(--app-ink-soft));
}
.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, var(--app-ink-soft));
  font-size: 0.875rem;
}
.vshow-emg-empty i,
.vshow-emg-empty .vio-ic {
  font-size: 2rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
/* 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, var(--app-line));
  border-radius: 0.625rem;
  background: var(--app-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vshow-emg-card:hover {
  border-color: var(--color-primary, var(--app-accent));
  background: var(--app-surface-sunken);
}
.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, var(--app-ink-muted));
}
.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(--app-surface-track);
  border: 1px solid var(--color-border, var(--app-line));
  color: var(--app-ink-muted);
}
.vshow-emg-marker i,
.vshow-emg-marker .vio-ic {
  font-size: 1rem;
}
.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, var(--app-ink));
}
.vshow-emg-time {
  flex: none;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  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, var(--app-ink-soft));
}
.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, var(--app-ink-muted));
}

/* 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;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.vshow-emgloc-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.vshow-emgloc {
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--app-surface);
  border: 1px solid var(--color-border, var(--app-line));
  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, var(--app-line));
}
.vshow-emgloc-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-mono, var(--app-ink));
}
.vshow-emgloc-title i {
  color: var(--app-ink-muted);
}
.vshow-emgloc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  cursor: pointer;
}
.vshow-emgloc-close:hover {
  background: var(--app-surface-sunken);
  color: var(--color-mono, var(--app-ink));
}
.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, var(--app-ink-soft));
  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, var(--app-ink-muted));
}
.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, var(--app-ink-muted));
}
.vshow-emgloc-map {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-surface-sunken);
}
.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, var(--app-ink-soft));
}
.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, var(--app-ink-soft));
  overflow-wrap: anywhere;
}
.vshow-emgloc-coords i {
  margin-top: 0.125rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.vshow-emgloc-rec {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-line-soft);
}
.vshow-emgloc-rec-hint {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--app-ink-soft);
}
.vshow-emgloc-rec-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.vshow-emgloc-rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.vshow-emgloc-rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface-sunken);
  color: var(--app-ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.vshow-emgloc-rec-chip[data-state="active"] {
  color: var(--app-info-ink);
}
.vshow-emgloc-rec-chip[data-state="completed"] {
  color: var(--app-good-ink);
}
.vshow-emgloc-rec-chip[data-state="failed"] {
  color: var(--app-crit-ink);
}
.vshow-emgloc-rec-message {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--app-ink-soft);
}
.vshow-emgloc-rec-message[data-state="error"] {
  color: var(--app-warn-ink);
}
.vshow-emgloc-rec-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--app-line);
  border-top-color: var(--app-info);
  border-radius: 50%;
  animation: vshow-emgloc-spin 0.8s linear infinite;
}
@keyframes vshow-emgloc-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vshow-emgloc-rec-spinner {
    animation: none;
  }
}

/* ---- 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, var(--app-ink-soft));
}
.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, var(--app-line));
  border-radius: 0.5rem;
}
.fa-warn-cell-label {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.fa-warn-cell-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-mono, var(--app-ink));
  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, var(--app-ink-soft));
  overflow-wrap: anywhere;
}
.fa-warn-when i,
.fa-warn-where i {
  margin-top: 0.125rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.fa-warn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.fa-warn-actions .kt-btn {
  flex: 1 1 auto;
  justify-content: center;
}
.fa-warnroute-map {
  height: 360px;
}
.fa-warnroute-actions {
  margin-top: 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, var(--app-ink-muted));
}
.fa-risk-score-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-mono, var(--app-ink));
  font-variant-numeric: tabular-nums;
}
.fa-risk-score-box {
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--app-surface-sunken);
}
.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, var(--app-line));
  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, var(--app-ink));
}
.fa-risk-section-title i {
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
/* 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, var(--app-line));
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  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, var(--app-ink-soft));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-risk-item-label i {
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
/* Risk tablosu başlığındaki katsayı ("×0,25"): firma ayarından gelir, etiketten sönük durur. */
.fa-risk-weight {
  margin-inline-start: 0.25rem;
  font-weight: 400;
  color: var(--color-muted-foreground, var(--app-ink-muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fa-risk-weight:empty {
  display: none;
}
.fa-risk-formula {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fa-risk-bar {
  display: block;
  height: 6px;
  border-radius: 9999px;
  background: var(--app-surface-sunken);
  overflow: hidden;
}
.fa-risk-bar-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--color-primary, #1b84ff);
}
/* TEK RENK (kullanıcı kararı 2026-09-19): bileşen başına ton (sarı/turkuaz/mor/kırmızı) vardı; dört
   bölümün yan yana dört farklı renkte bar göstermesi gözü yoruyordu ve renkler hiçbir eşik/önem anlamı
   taşımıyordu — yalnız "hangi bölümdeyim"i tekrar ediyorlardı, bunu zaten bölüm başlığı ve ikonu söylüyor.
   Barlar artık .fa-risk-bar-fill'in tema rengini kullanır; kıyas barın UZUNLUĞUNDAN okunur. */
.fa-risk-item-value {
  min-width: 2.5rem;
  text-align: end;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, var(--app-ink));
  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, var(--app-ink-soft));
}
.fa-risk-fact-value {
  font-weight: 600;
  color: var(--color-mono, var(--app-ink));
  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, var(--app-ink-muted));
}
.fa-risk-note {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.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, var(--app-line));
}

/* ==== Sürücü Analizi (DMS) tab'ı ==== */
/* Aralık araç çubuğu Grafikler tab'ıyla (vch-*) PAYLAŞILIR: aynı sayfadaki iki tab'ın filtresi aynı görünür. */
.vda-toolbar,
.vch-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
}
.vda-range,
.vch-range {
  display: inline-flex;
  padding: 3px;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border, var(--app-line));
  background: var(--app-surface-sunken);
}
.vda-range-btn,
.vch-range-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  cursor: pointer;
}
.vda-range-btn.active,
.vch-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,
.vch-daterange {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ==== Grafikler tab'ı (charts-tab.js) ==== */
/* Grafik kutusu SABİT boy: ApexCharts yüksekliği tuvalin ölçülen boyundan alır (bkz. can-chart.js renderPlot),
   akışta bırakılan kutu içeriğine göre büzülüp grafiği 120 px'lik alt sınıra düşürürdü. Kart gövdesinin
   genişliği kaydırmayı sayfaya taşımasın diye zincir min-width 0. */
.vch-chart {
  display: flex;
  flex-direction: column;
  height: 440px;
  min-width: 0;
}
.vch-chart .can-chart {
  flex: 1 1 auto;
  min-height: 0;
}
/* Dar ekran: metrik listesi üste geçer (bkz. .can-chart-main kırılımı) → kutu içeriğine uzar, tuval sabit boy. */
@media (max-width: 640px) {
  .vch-chart {
    height: auto;
  }
  .vch-chart .can-chart-canvas {
    flex: 0 0 auto;
    height: 280px;
  }
}

/* Özet kartı grupları (DMS / ADAS): her grup başlık + kendi slider'ı. Grid öğesi min-width 0 olmalı —
   aksi halde içerideki kart şeridi üst grid'i genişletir (slider'ın min-width notuyla aynı gerekçe). */
.vda-card-groups {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.vda-card-group {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.vda-card-group.hidden {
  display: none;
}
.vda-card-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}

/* Ö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, var(--app-line));
  background: var(--card, var(--app-surface));
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.vda-cards-nav:hover {
  color: var(--color-primary, var(--app-info));
  border-color: var(--color-primary, var(--app-info));
}
.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, var(--app-line));
  background: var(--card, var(--app-surface));
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vda-card:hover {
  border-color: var(--color-primary, var(--app-info));
}
.vda-card.active {
  border-color: var(--color-primary, var(--app-info));
  box-shadow: 0 0 0 1px var(--color-primary, var(--app-info)) inset;
}
.vda-card-static {
  cursor: default;
}
.vda-card-static:hover {
  border-color: var(--color-border, var(--app-line));
}
.vda-card-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9999px;
  background: var(--app-surface-track);
  color: var(--app-ink-muted);
  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, var(--app-ink-soft));
  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, var(--app-ink));
}

/* 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, var(--app-info));
}
.vda-viewtoggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, var(--app-line));
}
.vda-view-btn {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  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, var(--app-line));
}
.vda-select {
  height: 2rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border, var(--app-line));
  background: var(--card, var(--app-surface));
  color: var(--app-ink);
  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, var(--app-ink-soft));
}

/* 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, var(--app-surface-hover));
  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, var(--app-ink));
  font-variant-numeric: tabular-nums;
}
.vda-tl-date {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.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(--app-surface-track);
  color: var(--app-ink-muted);
  border: 3px solid var(--card, #fff);
  box-sizing: content-box;
}
.vda-tl-dot i,
.vda-tl-dot .vio-ic {
  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, var(--app-line));
  background: var(--card, var(--app-surface));
}
.vda-tl-item.active .vda-tl-card {
  border-color: var(--vda-c, var(--color-primary, var(--app-info)));
  box-shadow: 0 0 0 1px var(--vda-c, var(--color-primary, var(--app-info))) inset;
}
.vda-tl-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mono, var(--app-ink));
}
.vda-tl-sub {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.vda-tl-arrow {
  flex: none;
  color: var(--color-muted-foreground, var(--app-ink-muted));
  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, var(--app-ink-muted));
}
.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, var(--app-line));
  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, var(--app-line));
}
.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, var(--app-ink-soft));
  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: var(--app-ink-muted);
  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(--app-surface-sunken);
}
.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, var(--app-ink-muted));
  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, var(--app-ink-muted));
}
.vda-field-v {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-mono, var(--app-ink));
}
.vda-field-rel {
  margin-left: 0.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}

/* 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, var(--app-line));
  }
}

/* --- 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: var(--app-surface-hover);
}
.vsw-item.active {
  border-color: var(--color-primary, var(--app-info));
  background: var(--app-surface-hover);
}
.vsw-item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: var(--app-surface-track);
  color: var(--app-ink-muted);
  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: var(--color-mono, var(--app-ink));
  font-variant-numeric: tabular-nums;
}
.vsw-item-limit {
  font-size: 0.6875rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.vsw-item-sub {
  font-size: 0.75rem;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsw-item-rel {
  flex: none;
  font-size: 0.6875rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.vsw-item-arrow {
  flex: none;
  font-size: 0.75rem;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
/* 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; metrik parçaları ayrışır. --- */
/* 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: var(--app-surface-track);
  color: var(--app-ink-muted);
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}
/* 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, var(--app-line-soft));
  background: transparent;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
}
.vew-filter:hover {
  background: var(--app-surface-sunken);
}
.vew-filter.active {
  background: var(--color-primary, var(--app-info));
  border-color: var(--color-primary, var(--app-info));
  color: #fff; /* theme-ok: doygun dolgu üstündeki metin, iki temada da beyaz */
}
.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: var(--color-primary, var(--app-info));
  border-color: var(--color-primary, var(--app-info));
  color: #fff; /* theme-ok: doygun dolgu üstündeki metin, iki temada da beyaz */
}
.vsw-play-btn:hover {
  filter: brightness(0.92);
}
.vsw-play-btn.is-active {
  background: var(--app-surface-hover);
  border-color: var(--color-border, var(--app-line));
  color: var(--color-mono, var(--app-ink));
}
.vsw-field-peak {
  color: var(--color-mono, var(--app-ink));
  font-weight: 700;
}

/* Damper kurtarma kartı: liste/panel görsel dilini hız ve motor limiti kartlarıyla paylaşır.
   Kurtarma noktasal olaydır → süre/oynatma parçalarının karşılığı burada yoktur. */
.vdr-item-type {
  font-weight: 600;
  color: var(--color-mono, var(--app-ink));
}
/* Ş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: var(--app-surface-track);
  color: var(--app-ink-muted);
  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.hidden {
  display: none;
}
.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;  /* theme-ok: video zemini üstü */
  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 {
  --vshow-tl-buffered: color-mix(in srgb, var(--color-primary, #006ae6) 35%, var(--color-border, var(--app-surface-hover)));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--app-surface-sunken);
  border-top: 1px solid var(--color-border, var(--app-line));
}
.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(--app-ink);
  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, var(--app-line));
}
.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, var(--app-ink-soft));
}
.vshow-tl-seek {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--color-border, var(--app-surface-hover));
  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;
}

/* 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, var(--app-ink-soft));
}
/* 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, var(--app-line));
  /* Ç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, var(--app-ink-soft));
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.vshow-rec-tab:hover {
  color: var(--app-ink);
}
.vshow-rec-tab.active {
  color: var(--color-primary, var(--app-info));
  border-bottom-color: var(--color-primary, var(--app-info));
}
/* 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);
  }
}
.vshow-rec-archived {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.25rem;
  vertical-align: middle;
  font-size: 1rem;
  color: var(--app-good);
}

/* 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);
}
/* Metronic bundle'ında ÜRETİLMEMİŞ Tailwind utility'si: GUID/anahtar gibi değerler tek aralıklı okunmalı. */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Metronic .kt-radio:indeterminate seçimsiz gruptaki TÜM radyoları dolu boyar (grupta seçili yoksa hepsi indeterminate); boş görünsün. */
.kt-radio:indeterminate:not(:checked) {
  border-color: var(--input);
  background-color: var(--background);
}
/* 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: var(--app-info-soft);
}
.bg-blue-100 {
  background-color: var(--app-info-soft);
}
.text-blue-600 {
  color: var(--app-info-ink);
}
.text-blue-700 {
  color: var(--app-info-ink);
}
.bg-amber-50 {
  background-color: var(--app-amber-wash);
}
.bg-amber-100 {
  background-color: var(--app-amber-soft);
}
.text-amber-600 {
  color: var(--app-amber);
}
.text-amber-700 {
  color: var(--app-amber-ink);
}
.bg-purple-50 {
  background-color: var(--app-violet-wash);
}
.text-purple-600 {
  color: var(--app-violet);
}
.bg-green-100 {
  background-color: var(--app-good-soft);
}
.text-green-700 {
  color: var(--app-good-ink);
}
.bg-gray-100 {
  background-color: var(--app-surface-hover);
}
.text-gray-400 {
  color: var(--app-ink-muted);
}
.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: var(--app-surface-sunken);
}
.bg-red-50 {
  background-color: var(--app-crit-wash);
}
.text-red-600 {
  color: var(--app-crit);
}
.border-blue-200 {
  border-color: var(--app-info-line);
}

/* 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(--app-surface-sunken) 25%,
    var(--color-border, #e5e7eb) 37%,
    var(--app-surface-sunken) 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: var(--app-crit-soft);
  color: var(--app-crit);
}
.map-cam-head-icon svg {
  width: 15px;
  height: 15px;
}
.map-cam-head-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-ink-soft);
}
.map-cam-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
  cursor: pointer;
}
.map-cam-mic svg {
  width: 16px;
  height: 16px;
}
.map-cam-mic:hover {
  background: var(--app-surface-track);
}
.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: var(--app-ink);
  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;  /* theme-ok: kamera görüntüsü üstü */
  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;  /* theme-ok: kamera görüntüsü üstü spinner halkası */
  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: var(--app-surface-hover);
}
.map-cam-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 760px) {
  .map-cam-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ 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 var(--app-line-soft);
}
.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: var(--app-ink-soft);
  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: var(--app-ink-soft);
  font-size: 12px;
  cursor: pointer;
}
.map-cset-tabs-nav.visible {
  display: flex;
}
.map-cset-tabs-nav:hover {
  color: var(--app-ink);
}
.map-cset-tabs-nav:disabled {
  opacity: .35;
  cursor: default;
}
.map-cset-tabs-nav:disabled:hover {
  color: var(--app-ink-soft);
}
.map-cset-tabs-nav.prev {
  border-right: 1px solid var(--app-line-soft);
}
.map-cset-tabs-nav.next {
  border-left: 1px solid var(--app-line-soft);
}
.map-cset-tabs button.active {
  color: var(--app-ink);
  border-bottom-color: var(--app-ink);
}
.map-cset-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px;
}
.map-cset-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--app-ink-soft);
}
.map-cset-field {
  display: block;
}
.map-cset-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-ink-soft);
}
.map-cset-info {
  margin-left: 5px;
  font-size: 13px;
  vertical-align: -1px;
  color: var(--app-ink-muted);
  cursor: help;
}
.map-cset-info:hover {
  color: var(--app-ink);
}
.map-cset-hint {
  white-space: pre-line;
}
.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: var(--app-ink-muted);
  pointer-events: none;
}
.map-cset-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
/* Risk Skoru sekmesi: alan etiketinin yanında sistem varsayılanı ("Varsayılan: 0,25") sönük durur. */
.map-cset-default {
  margin-inline-start: 6px;
  font-weight: 400;
  color: var(--color-muted-foreground, var(--app-ink-muted));
}
.map-cset-soon {
  padding: 32px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--app-ink-muted);
}
/* 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 var(--app-line-soft);
}
/* 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: var(--app-surface-hover);
  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: var(--app-ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.map-cset-subtabs button.active {
  background: var(--app-surface);
  color: var(--app-ink);
  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: var(--app-surface-sunken);
  border: 1px solid var(--app-line-soft);
  border-radius: 8px;
}
.map-cset-bytype-name {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--app-ink-soft);
}
.map-cset-bytype-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-ink);
}
.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: var(--app-ink-muted);
  cursor: pointer;
}
.map-cset-bytype-rm:hover {
  background: var(--app-crit-soft);
  color: var(--app-crit);
}
.map-cset-bytype-empty {
  font-size: 12.5px;
  color: var(--app-ink-muted);
  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: var(--app-ink-muted);
  margin-top: 2px;
}
/* ============ Tarih aralığı girdileri (utils/date-range) ============
   Geçmiş Kayıtlar aralık modalıyla aynı düzen: iki yerel tarih girdisi + ayraç tek satırda,
   durum/hata satırı altında. Takvimi tarayıcı çizdiği için kapsayıcı taşma kuralı gerekmez. */
.app-range {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
/* Başlangıç solda, bitiş sağda; satır sonu butonu (varsa) girdilerin hizasında kalsın diye flex-end.
   İki alanı ayıran boşluk başlangıç alanının auto kenarından gelir: buton varsa bitiş alanı onunla
   birlikte sağda kalır. Etiketler her iki alanda da kendi girdisinin SOL üstündedir. */
.app-range-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.app-range-field {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.app-range-field-from {
  margin-inline-end: auto;
}
.app-range-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-secondary-foreground, var(--app-ink-soft));
}
.app-range-status {
  font-size: 0.8125rem;
  text-align: center;
  color: var(--color-destructive, var(--app-danger-ink));
}
/* Genişlik SABİT: içeriğe göre boyutlama (field-sizing/width:auto) tarayıcıya ve girdinin min/max
   özniteliklerine göre farklı sonuç veriyor, aynı diyalog iki yerde farklı genişlikte çıkıyordu.
   Ölçü "gg.aa.yyyy ss:dd" metnine + takvim ikonuna göre sıkıdır (kt-input yatay dolgusu 0,75rem×2,
   yazı 0,8125rem, ikon ~1rem); kt-input'un width:100%'ünü de ezer. */
.app-range-input {
  flex: 0 0 auto;
  width: 9.75rem;
  min-width: 0;
}
/* Takvim ikonu DAİMA sağ kenarda. Chrome'da girdinin gölge DOM'u flex'tir: metin alanı esnemezse
   ikon metnin hemen peşine yapışır, esnerse sağ kenara itilir — aynı diyalog iki yerde farklı
   görünüyordu. Metin alanı açıkça esnetilir, ikon da auto kenar boşluğuyla sağa yaslanır. */
.app-range-input::-webkit-datetime-edit {
  flex: 1 1 auto;
}
.app-range-input::-webkit-calendar-picker-indicator {
  margin-inline-start: auto;
  padding-inline-end: 0;
}
.app-range-action {
  flex: none;
}

/* ============ 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;
}

/* Bölme (sensör) süzgeç çipleri: soğuk zincir ihlal modalının başlığı ile listesi arasında. Sayılar
   sensör süzgecinden BAĞIMSIZ gelir → seçili bölme değişse de diğer çiplerin sayısı sabit kalır.
   Şerit tek bölmeli araçta hiç çizilmez (JS kararı): tek seçenek + "Tümü" bilgi taşımaz. */
.map-events-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px;
}
.map-events-chips:empty {
  display: none;
}
.map-events-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
}
.map-events-chip span {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.map-events-chip.active {
  background: var(--app-info-soft);
  color: var(--app-info-ink);
  box-shadow: inset 0 0 0 1px var(--app-info);
}
/* Soğuk zincir uç değeri: buz mavisi (bildirim kanalı ve kart çipiyle aynı aile). Hız çipinin
   turuncusu KULLANILAMAZ — aynı satırda iki farklı ihlal türü aynı renkte görünürdü. */
.map-dms-chip.cold {
  background: var(--app-info-soft);
  color: var(--app-info-ink);
}

/* ============ 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;
}

.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-side {
  position: absolute;
  top: 12px;
  left: 354px;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
  max-height: calc(100% - 84px);
  transition: left 0.3s ease;
}
.map-route-segments {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  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);
}
.map-fullpage .map-route-segments,
.vshow-map .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,
.vshow-map .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,
.vshow-map .map-route-seg-head i,
.vshow-map .map-route-seg.active .map-route-seg-title {
  color: #c4b5fd;
}
.map-fullpage .map-route-seg-count,
.vshow-map .map-route-seg-count {
  background: rgba(167, 139, 250, 0.22);
  color: #ddd6fe;
}
.map-fullpage .map-route-seg:hover,
.vshow-map .map-route-seg:hover {
  background: rgba(255, 255, 255, 0.1);
}
.map-fullpage .map-route-seg.active,
.vshow-map .map-route-seg.active {
  background: rgba(255, 255, 255, 0.14);
}
.map-fullpage .map-route-seg.selected,
.vshow-map .map-route-seg.selected {
  background: rgba(167, 139, 250, 0.18);
  box-shadow: inset 3px 0 0 #a78bfa;
}
.map-fullpage .map-route-seg-title,
.vshow-map .map-route-seg-title {
  color: #f8fafc;
}
.map-fullpage .map-route-seg-dot,
.vshow-map .map-route-seg-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.map-fullpage .map-route-seg-times,
.vshow-map .map-route-seg-times {
  color: rgba(255, 255, 255, 0.78);
}
.map-fullpage .map-route-seg-stats,
.vshow-map .map-route-seg-stats {
  color: rgba(255, 255, 255, 0.55);
}
.map-fullpage.map-lp-closed .map-route-side {
  left: 46px;
}
.map-route-seg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--app-line-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--app-ink);
}
.map-route-seg-head i {
  color: var(--app-info-ink);
}
.map-route-seg-count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--app-info-soft);
  color: var(--app-info-ink);
  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: var(--app-surface-hover);
}
.map-route-seg.active {
  background: var(--app-info-soft);
}
.map-route-seg.selected {
  background: var(--app-violet-wash);
  box-shadow: inset 3px 0 0 var(--app-violet);
}
.map-route-seg-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--app-ink);
}
.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: var(--app-info-ink);
}
.map-route-seg-times {
  font-size: 11px;
  color: var(--app-ink-soft);
}
.map-route-seg-stats {
  font-size: 11px;
  color: var(--app-ink-soft);
}
.map-route-info {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  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);
}
.map-route-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--app-line-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--app-ink);
}
.map-route-info-head i {
  color: var(--app-info-ink);
}
.map-route-info-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-route-info-body {
  overflow-y: auto;
  padding: 8px 12px 10px;
}
.map-route-info-headline {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--app-danger-ink);
}
.map-route-info-sec {
  margin: 8px 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.map-route-info-body > .map-route-info-sec:first-child {
  margin-top: 0;
}
.map-route-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
}
.map-route-info-key {
  flex: none;
  color: var(--app-ink-soft);
}
.map-route-info-val {
  font-weight: 600;
  text-align: right;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}
.map-route-info-val.is-bad {
  color: var(--app-danger-ink);
}
.map-route-info-now {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 0 4px;
}
.map-route-info-speed {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}
.map-route-info-speed-unit {
  font-size: 11px;
  color: var(--app-ink-soft);
}
.map-fullpage .map-route-info,
.vshow-map .map-route-info {
  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-info-head,
.vshow-map .map-route-info-head {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}
.map-fullpage .map-route-info-head i,
.vshow-map .map-route-info-head i {
  color: #c4b5fd;
}
.map-fullpage .map-route-info-headline,
.map-fullpage .map-route-info-val.is-bad,
.vshow-map .map-route-info-headline,
.vshow-map .map-route-info-val.is-bad {
  color: #fca5a5;
}
.map-fullpage .map-route-info-sec,
.vshow-map .map-route-info-sec {
  color: rgba(255, 255, 255, 0.55);
}
.map-fullpage .map-route-info-key,
.vshow-map .map-route-info-key {
  color: rgba(255, 255, 255, 0.6);
}
.map-fullpage .map-route-info-val,
.map-fullpage .map-route-info-speed,
.vshow-map .map-route-info-val,
.vshow-map .map-route-info-speed {
  color: #f8fafc;
}
.map-fullpage .map-route-info-speed-unit,
.vshow-map .map-route-info-speed-unit {
  color: rgba(255, 255, 255, 0.6);
}
.map-route-player {
  position: absolute;
  bottom: 12px;
  left: 354px;
  right: 374px;
  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;
}
.map-fullpage .map-route-player,
.vshow-map .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,
.vshow-map .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,
.vshow-map .map-route-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.map-fullpage .map-route-play,
.vshow-map .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,
.vshow-map .map-route-play:hover {
  background: rgba(124, 58, 237, 0.82);
}
.map-fullpage .map-route-seek,
.vshow-map .map-route-seek {
  accent-color: #a78bfa;
}
.map-fullpage .map-route-counter,
.map-fullpage .map-route-clock,
.vshow-map .map-route-counter,
.vshow-map .map-route-clock {
  color: rgba(255, 255, 255, 0.85);
}
.map-fullpage .map-route-kmh,
.vshow-map .map-route-kmh {
  color: #c4b5fd;
}
.map-fullpage .map-route-speed,
.vshow-map .map-route-speed {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 24, 39, 0.6);
  color: #f8fafc;
}
.vshow-map .map-route-side {
  left: 12px;
}
.vshow-map .map-route-player {
  left: 12px;
  right: 12px;
}
.vshow-map.map-route-active .vshow-mapcard {
  display: none;
}
.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;
}
.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, var(--app-info-ink));
}
.map-route-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--app-surface-hover);
  color: var(--app-ink-soft);
  cursor: pointer;
}
.map-route-btn:hover {
  background: var(--app-surface-track);
}
.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: var(--app-ink-soft);
  white-space: nowrap;
}
.map-route-kmh {
  color: var(--app-info-ink);
}
.map-route-speed {
  border: 1px solid var(--app-line-soft);
  border-radius: 8px;
  padding: 4px 6px;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 12px;
}
.map-route-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}
.map-route-marker-pulse {
  position: absolute;
  inset: 7px;
  border-radius: 9999px;
  background: var(--map-route-marker-color, #2563eb);
  opacity: 0.4;
  animation: map-route-pulse 2.2s ease-out infinite;
}
.map-route-marker-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--map-route-marker-color, #2563eb);
  box-shadow:
    0 0 0 2.5px #fff,
    0 4px 12px rgba(15, 23, 42, 0.42);
}
.map-route-marker svg {
  width: 15px;
  height: 15px;
  fill: #fff;
  stroke: none;
  transform: translateY(-0.5px);
}
@keyframes map-route-pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-route-marker-pulse {
    animation: none;
    opacity: 0.22;
  }
}
@media (max-width: 900px) {
  .map-route-side {
    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 menü yüksekliği: flex belirler, KTScrollable'ın JS ölçümü değil ----
   KTScrollable (data-kt-scrollable-height="auto") yüksekliği sayfa açılışında bir kez, sonra yalnız resize'da ölçer.
   Mobilde sidebar açılışta gizli bir drawer olduğundan ölçüm boşa düşer (gizli öğenin yüksekliği "auto" → NaN) ve
   yükseklik yazılmaz: menü drawer'dan taşar, kaydırılamaz, footer ekranın altında kalır. Drawer açıkken ekran
   döndürülünce yeniden ölçülüp düzeliyordu. Menü alanı başlık + footer dışında kalan yeri flex ile alır; kaydırma
   çubuğu yine KTScrollable öğesinde. `!important` JS'in satır içi yüksekliğini ezer (her genişlikte aynı düzen). */
#sidebar_menu {
  flex-shrink: 1;
  min-height: 0;
}
#sidebar_menu > [data-kt-scrollable] {
  height: auto !important;
}

/* ---- 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, var(--app-line-soft));
  background: var(--background, var(--app-surface));
  color: var(--secondary-foreground, var(--app-ink-soft));
  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, var(--app-accent));
}
.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;
  }
  /* 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);
}
.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;
  pointer-events: none;
}
.map-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.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);
}
.map-lightbox .img-lightbox-close {
  z-index: 1302;
}
.map-expand-placeholder {
  border-radius: 0.625rem;
  background: var(--app-surface-sunken);
}
@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,
.vshow-player-wrap:fullscreen .vshow-player {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}
.vshow-player-wrap:fullscreen {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: #000;
  transition: none;
}
@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);
}
.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: var(--app-good); }
.fa-delta-bad { color: var(--app-crit); }
.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);
}
/* Küçük kartların bilgi düğmesi (KPI tile, Genel Bakış sayaçları): 26 px'lik kare tile başlığını büyütüyordu. */
.fa-info-btn-sm {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.fa-info-btn-sm i {
  font-size: 12px;
}
.fa-tile-head .fa-info-btn {
  margin-inline-start: auto;
}
/* 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);
}
/* Birden fazla sabit paragraf (ör. KPI tanımı + karşılaştırma kuralı) arasında nefes payı. */
.fa-info-pop-text + .fa-info-pop-text {
  margin-top: 6px;
}
/* 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: var(--app-good); }
.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;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fa-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.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.
   DURAĞAN HÂLDE DÜZ METİN (kullanıcı kararı 2026-09-19): mavi vurgu plaka sütununu bir bağlantı
   duvarına çeviriyor, tablonun okunurluğunu bozuyordu. Bağlantı KALDIRILMADI — yalnız rengi
   metinden miras alıyor; tıklanabilirliği hover'daki alt çizgi haber veriyor. Böylece tablo
   bağlantılar eklenmeden önceki görünümüne döner, davranış korunur. */
.fa-cell-link {
  color: inherit;
  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ını token taşır. */
.fa-over-target { color: var(--app-amber-ink); }

/* ---- 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). Tablo hücresi apex durum paletinden bağımsızdır; koyu/açık adımı durum token'ı verir. */
.fa-risk-critical { color: var(--app-crit); }
.fa-risk-high { color: var(--app-warn-ink); }

/* 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, var(--app-accent));
  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;
}
/* Dikkat listesinde satırın tetikleyici türü (ikon + "Veri kesintisi") SAĞDA, tarihin solunda durur.
   .fa-attn-sub'ın ikizi ama nowrap: burası artık dar bir sütun, "Veri kesintisi" iki satıra kırılmamalı.
   Ayrı sınıf, çünkü .fa-attn-sub'ı limit ihlali kartları da kullanıyor ve orada satır-içi kalmalı. */
.fa-attn-kind {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-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; }
}

/* 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, var(--app-crit)); 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; }
/* Şerit tuvali: kendi SVG'miz (ApexCharts değil, gerekçe state-timeline.js başında). Araç düğmeleri ve
   tooltip tuvale göre mutlak konumlanır. */
.vst-canvas { position: relative; width: 100%; }
.vst-svg {
  display: block;
  width: 100%;
  height: 108px;
  font-size: 11px;
  cursor: crosshair;
}
.vst-svg .vst-bar-hover { pointer-events: none; }
.vst-svg [hidden] { display: none; }
/* Yaklaştır / uzaklaştır / sıfırla: sağ üstte, şeridin üstündeki boşlukta (eski apex toolbar'ın yeri). */
.vst-tools {
  position: absolute;
  top: -4px;
  right: 8px;
  z-index: 1;
  display: flex;
  gap: 2px;
}
.vst-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  cursor: pointer;
}
.vst-tools button:hover {
  background: var(--accent);
  color: var(--foreground);
}
/* Tooltip: şeridin ÜSTÜNDE durur (alt taraf eksen etiketlerine ait), tuval dışına taşabilir (kart overflow'u açık). */
.vst-tooltip {
  position: absolute;
  bottom: 89px; /* tuval 108 px, şerit y=25'te başlar → şeridin 6 px üstü */
  left: 0;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.vst-tooltip[hidden] { display: none; }
.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; }
/* Tooltip gövdesi (durum dilimi satırları). */
.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'ı; KTDatePicker paneli bu girdinin altına iner
   (sürücü analizindeki .vda-daterange ile aynı desen). */
.vst-daterange {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}


/* ---------- Araç detayı "CAN Verileri" kart şeridi (vcs) ---------- */
/* Kendi aralık seçicisi yok: pencereyi Grafikler tab'ının ortak araç çubuğu (vch-toolbar) verir. */
/* 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;
  padding: 16px;
  min-width: 0;
  overflow: hidden;
}
/* 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(--app-ink-muted);
}
.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, var(--app-accent));
  outline-offset: -2px;
}

/* ==== Anasayfa gösterge kartlarının bilgi düğmesi (card-info.js) ====
   Düğme kartın içeriğine değil KÖKÜNE eklenir: cihaz kartlarının içeriği <button>, Aktif Sürücü'nünki <a>;
   iç içe etkileşimli öğe geçersiz HTML olurdu. Başlık satırı sağda düğmeye yer ayırır, düğme o boşluğa
   mutlak konumlanır. Satır ve bağlantı noktası AYNI yükseklikte (1.75rem = text-lg ikonun satır yüksekliği)
   → dikey hiza ölçüm gerektirmeden tutar.
   İçerik dolgusu ile düğmenin konumu TEK değişkenden okunur: şablondaki `p-6` derlenmiş CSS'te YOK, gerçek
   dolgu kt-card-content'in 1.25rem'i idi; düğme 1.5rem varsayılınca rozetin 4 px altında kalıyordu.
   Satırın sağ boşluğu = düğme (22 px) + tablo araçlarıyla aynı 8 px aralık. */
.dash-info-host {
  --dash-info-inset: 1.25rem;
  position: relative;
}
.dash-info-host > .kt-card-content {
  padding: var(--dash-info-inset);
}
.dash-info-row {
  min-height: 1.75rem;
  padding-inline-end: 30px;
}
.dash-info-anchor {
  position: absolute;
  top: var(--dash-info-inset);
  inset-inline-end: var(--dash-info-inset);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 1.75rem;
}
.dash-tile-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 1rem;
}
.dash-tile-badges:empty {
  display: none;
}
.dash-fill-success {
  background-color: var(--color-green-500);
}
.dash-fill-warning {
  background-color: var(--color-yellow-500);
}
.dash-fill-destructive {
  background-color: var(--destructive);
}
.dash-value-warning {
  color: var(--color-yellow-600);
}
.dash-value-destructive {
  color: var(--destructive);
}
.dfault-modal {
  max-width: 560px;
}
.dfault-body {
  padding-top: 0.25rem;
}
.dfault-modal .fa-risk-foot {
  flex-wrap: wrap;
}
/* 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, var(--app-crit));
}

/* 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, var(--app-line));
}

.dfault-tl-section + .dfault-tl-section {
  margin-top: 0.875rem;
}
.dfault-tl .vda-tl-item {
  cursor: default;
}
.dfault-tl-dot.is-ongoing {
  background: var(--app-crit-soft);
  color: var(--app-crit);
}
.dfault-tl-dot.is-event {
  background: var(--app-warn-soft);
  color: var(--app-warn);
}
.dfault-tl-focus .vda-tl-card {
  border-color: var(--color-destructive, var(--app-crit));
  box-shadow: inset 3px 0 0 var(--color-destructive, var(--app-crit));
}
.dfault-tl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Asistan balonu ve sohbet paneli (core/assistant-widget.js).
   Katman sırası: operate-as rozeti 60 < asistan 1050 < diyaloglar 1100 < SOS 1200.
   Yanlış katman paneli diyalogların arkasında bırakır ya da SOS uyarısını örter.
   --------------------------------------------------------------------------- */
#assistant-widget {
  position: fixed;
  right: 2rem;
  bottom: 4rem;
  z-index: 1050;
  width: 3rem;
  height: 3rem;
  transition: left 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#assistant-widget.is-docked {
  right: auto;
  bottom: auto;
}

#assistant-widget.is-dragging {
  transition: none;
}

/* Adına-işlem rozeti aynı köşede duruyor; ikisi üst üste binmesin diye asistan yukarı kayar. */
body:has(#operate-as-indicator) #assistant-widget:not(.is-docked) {
  bottom: 7rem;
}

.assistant-fab {
  /* grid + tek hücre: iki ikon üst üste yığılır. inline-flex'te absolute konumlandırma gerekirdi
     ve flex konteynerde abspos statik konumu tarayıcıya göre kayabiliyor. */
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: #1b84ff; /* asistan marka mavisi: iki temada da sabit (üstünde beyaz ikon) */
  color: #fff;
  font-size: 1.125rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  cursor: grab;
  touch-action: none;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.3s ease, font-size 0.3s ease,
    border-radius 0.3s ease, width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.assistant-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}
.assistant-fab:active {
  transform: scale(0.94);
}
#assistant-widget.is-dragging .assistant-fab,
#assistant-widget.is-dragging .assistant-fab:active {
  cursor: grabbing;
  transform: scale(1.06);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
}

/* Simge takası: panel açıkken sohbet ikonu çarpıya DÖNER. İki ikon da hep DOM'da durur ve
   opacity/rotate ile geçer — display takası olsaydı geçiş hiç çalışmazdı (ani atlar). */
.assistant-fab > i {
  grid-area: 1 / 1;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.assistant-fab .assistant-fab-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.55);
}
#assistant-widget.is-open .assistant-fab .assistant-fab-chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.55);
}
#assistant-widget.is-open .assistant-fab .assistant-fab-close {
  opacity: 1;
  transform: none;
}

#assistant-widget.is-tucked .assistant-fab {
  opacity: 0.92;
  font-size: 0.8125rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
#assistant-widget.is-tucked[data-side='left'] .assistant-fab {
  left: calc(-1 * var(--assistant-edge, 12px));
  width: 1.375rem;
  border-radius: 0 999px 999px 0;
}
#assistant-widget.is-tucked[data-side='right'] .assistant-fab {
  left: calc(100% - 1.375rem + var(--assistant-edge, 12px));
  width: 1.375rem;
  border-radius: 999px 0 0 999px;
}
#assistant-widget.is-tucked[data-side='top'] .assistant-fab {
  top: calc(-1 * var(--assistant-edge, 12px));
  height: 1.375rem;
  border-radius: 0 0 999px 999px;
}
#assistant-widget.is-tucked[data-side='bottom'] .assistant-fab {
  top: calc(100% - 1.375rem + var(--assistant-edge, 12px));
  height: 1.375rem;
  border-radius: 999px 999px 0 0;
}

#assistant-widget:not(.is-open):not(.is-dragging) .assistant-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #1b84ff;
  animation: assistant-fab-pulse 5s ease-out infinite;
  pointer-events: none;
}
@keyframes assistant-fab-pulse {
  0%,
  68% {
    opacity: 0;
    transform: scale(1);
  }
  72% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

/* Keşfedilebilirlik darbesi: asistanı HİÇ açmamış kullanıcıya üç kez halka atar, sonra susar
   (ilk açılışta localStorage'a işaretlenir). Sonsuz darbe köşede kalıcı gürültü olurdu. */
#assistant-widget.is-hinting .assistant-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--app-accent);
  animation: assistant-fab-hint 1.8s ease-out 3 forwards;
  pointer-events: none;
}
@keyframes assistant-fab-hint {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.75);
  }
}

/* Giriş selamlama balonu: taze login'den sonra FAB'ın üstünde bir kez belirir, tıklanınca paneli
   açar, kısa süre sonra kendiliğinden söner. Panelle aynı giriş/çıkış diline sahiptir. */
.assistant-greet {
  position: absolute;
  right: calc(-1 * var(--assistant-greet-x, 0px));
  bottom: calc(100% + 0.75rem);
  width: max-content;
  max-width: min(78vw, 19rem);
  padding: 0.625rem 2rem 0.625rem 0.875rem; /* sağda kapatma düğmesine yer */
  border: 1px solid var(--app-line);
  /* Sağ-alt köşe sivriltilir: balon konuşma oku çizmeden FAB'ı işaret eder. */
  border-radius: 0.875rem 0.875rem 0.25rem 0.875rem;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transform-origin: bottom right;
  animation: assistant-panel-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.assistant-greet:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}
.assistant-greet.is-leaving {
  /* Süre JS'teki GREET_OUT_MS (180 ms) ile eş; ayrışırsa balon ya yarıda kesilir ya geç silinir. */
  animation: assistant-panel-out 0.18s ease-in forwards;
  pointer-events: none;
}
.assistant-greet-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Daktilo imleci yalnız yazım fazında yanıp söner (sınıfı JS koyar/kaldırır). */
.assistant-greet.is-typing .assistant-greet-text::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.125em;
  background: currentColor;
  animation: assistant-greet-caret 0.9s steps(1) infinite;
}
@keyframes assistant-greet-caret {
  50% {
    opacity: 0;
  }
}
.assistant-greet-close {
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-ink-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.assistant-greet-close:hover {
  background: var(--app-surface-track);
  color: var(--app-ink);
}

.assistant-panel {
  position: absolute;
  right: calc(-1 * var(--assistant-x, 0px));
  bottom: calc(100% + 0.75rem);
  display: flex;
  flex-direction: column;
  width: min(92vw, 24rem);
  height: min(70vh, 32rem);
  max-height: var(--assistant-space, 100vh);
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  /* Panel FAB'ın üstünde duruyor; sağ-alt köşeden büyümek onu "düğmeden çıkmış" gösterir. */
  transform-origin: bottom right;
  animation: assistant-panel-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* [hidden] tek başına display:flex'i ezemez; gizleme kuralı ayrıca yazılmalı. */
.assistant-panel[hidden] {
  display: none;
}

#assistant-widget.is-left .assistant-panel {
  right: auto;
  left: var(--assistant-x, 0px);
}
#assistant-widget.is-left .assistant-greet {
  right: auto;
  left: var(--assistant-greet-x, 0px);
}
#assistant-widget.is-top .assistant-panel,
#assistant-widget.is-top .assistant-greet {
  bottom: auto;
  top: calc(100% + 0.75rem);
}
#assistant-widget.is-left .assistant-panel,
#assistant-widget.is-left .assistant-greet {
  transform-origin: bottom left;
}
#assistant-widget.is-top .assistant-panel,
#assistant-widget.is-top .assistant-greet {
  transform-origin: top right;
}
#assistant-widget.is-top.is-left .assistant-panel,
#assistant-widget.is-top.is-left .assistant-greet {
  transform-origin: top left;
}
#assistant-widget.is-left .assistant-greet {
  padding: 0.625rem 0.875rem 0.625rem 2rem;
  border-radius: 0.875rem 0.875rem 0.875rem 0.25rem;
}
#assistant-widget.is-left .assistant-greet-close {
  right: auto;
  left: 0.3125rem;
}
#assistant-widget.is-top .assistant-greet {
  border-radius: 0.25rem 0.875rem 0.875rem 0.875rem;
}
#assistant-widget.is-top.is-left .assistant-greet {
  border-radius: 0.875rem 0.25rem 0.875rem 0.875rem;
}

/* Kapanış: display:none animasyonu KESER, o yüzden panel hidden'a alınmadan önce burada
   bekletilir (JS zamanlayıcısı ile) ve forwards son kareyi tutar. pointer-events kapalı,
   yoksa sönerken tıklanabilir görünmez bir yüzey kalır. */
.assistant-panel.is-closing {
  animation: assistant-panel-out 0.14s ease-in forwards;
  pointer-events: none;
}
@keyframes assistant-panel-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes assistant-panel-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
}

.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--app-line);
  font-weight: 600;
}
.assistant-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
/* "Yeni sohbet": içerik anında yok olursa arıza gibi okunur; kısa bir sönme onu eylem yapar. */
.assistant-log.is-clearing {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.assistant-msg {
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.assistant-msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-msg.is-user {
  align-self: flex-end;
  background: var(--app-info-soft);
  color: var(--app-ink);
}
.assistant-msg.is-bot {
  align-self: flex-start;
  background: var(--app-surface-track);
  color: var(--app-ink);
}
.assistant-msg.is-pending {
  opacity: 0.7;
}

/* Balon girişi YALNIZ .is-entering ile koşar ve JS sınıfı kaldırır. Animasyon doğrudan
   .assistant-msg üzerinde olsaydı panel her açıldığında (display:none → flex) TÜM geçmiş
   yeniden canlanırdı — CSS animasyonları görünürlüğe dönüşte baştan başlar. */
.assistant-msg.is-entering,
.assistant-note.is-entering {
  animation: assistant-msg-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Balon hangi kenardaysa o kenardan gelir: kullanıcı sağdan, bot soldan. */
.assistant-msg.is-user.is-entering {
  animation-name: assistant-msg-in-user;
}
.assistant-msg.is-bot.is-entering {
  animation-name: assistant-msg-in-bot;
}
@keyframes assistant-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes assistant-msg-in-user {
  from {
    opacity: 0;
    transform: translate(12px, 6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes assistant-msg-in-bot {
  from {
    opacity: 0;
    transform: translate(-12px, 6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Yazıyor göstergesi: LLM turu 10-30 sn sürüyor. Durağan bir metin donmuş arayüzden
   ayırt edilemez; zıplayan noktalar "hâlâ çalışıyor" bilgisini taşıyan tek işarettir.
   Metin ekran okuyucu için aria-label'da durur, görsel olarak noktalarla değişir. */
.assistant-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.3125rem;
}
.assistant-dots i {
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: currentColor;
  animation: assistant-dot 1.05s ease-in-out infinite;
}
.assistant-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.assistant-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes assistant-dot {
  0%,
  60%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  30% {
    opacity: 0.85;
    transform: translateY(-3px);
  }
}

.assistant-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--app-ink-muted);
  text-align: center;
}

/* Kapsam şeridi: hangi sorgunun yetki/pencere nedeniyle boş döndüğünü görünür kılar. */
.assistant-scope {
  margin: 0.5rem 0 0;
  padding-top: 0.375rem;
  border-top: 1px dashed var(--app-line);
  font-size: 0.75rem;
  color: var(--app-ink-muted);
}

.assistant-table {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.assistant-table td {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--app-line);
}
.assistant-table tr:last-child td {
  border-bottom: 0;
}
/* Satırlar kademeli belirir (gecikme JS'te, ilk 8 satırla sınırlı). Kademe girişi de
   .is-entering'e bağlı: panel yeniden açıldığında eski tablolar tekrar akmasın. */
.assistant-msg.is-entering .assistant-table tr {
  animation: assistant-row-in 0.26s ease-out both;
}
/* Kapsam şeridi balonun kendisinden hemen sonra belirir (cevap → sonra "neyi göremedim"). */
.assistant-msg.is-entering .assistant-scope {
  animation: assistant-msg-in 0.24s ease-out 0.1s both;
}
@keyframes assistant-row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.assistant-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.assistant-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--app-line);
}
.assistant-input {
  flex: 1;
  max-height: 6rem; /* = INPUT_MAX_HEIGHT (96px, assistant-widget.js); ayrışırsa tavanda titrer */
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--app-line);
  border-radius: 0.5rem;
  background: var(--app-surface);
  color: var(--app-ink);
  font-size: 0.875rem;
  resize: none;
  overflow-y: auto;
  /* Yükseklik JS ile içeriğe göre yazılır; geçiş satır eklenmesini sıçrama değil büyüme yapar. */
  transition: height 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.assistant-input:focus {
  outline: none;
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(27, 132, 255, 0.16);
}
.assistant-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: #1b84ff; /* asistan marka mavisi: iki temada da sabit (üstünde beyaz ikon) */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease, filter 0.15s ease;
}
.assistant-send:hover:not(:disabled) {
  filter: brightness(1.08);
}
.assistant-send:active:not(:disabled) {
  transform: scale(0.9);
}
.assistant-send:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Panel başlığındaki eylemler (yeni sohbet, kapat). */
.assistant-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.assistant-new,
.assistant-usage {
  border: 0;
  background: transparent;
  color: var(--app-ink-muted);
  cursor: pointer;
}

/* Hover geri bildirimi yoktu: imleç üstündeyken hiçbir şey değişmiyordu. */
.assistant-new,
.assistant-usage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.28s ease;
}
.assistant-new:hover,
.assistant-usage:hover {
  background: var(--app-surface-track);
  color: var(--app-ink);
}
.assistant-usage:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Artı işareti çeyrek tur atar: "sohbeti sıfırladım" geri bildirimi (JS 280 ms sonra siler). */
.assistant-new.is-spinning {
  transform: rotate(90deg);
}

/* Hareket azaltma: tüm giriş/çıkış animasyonları ve sürekli darbeler susar. Kapanış
   zamanlayıcısı JS tarafında da sıfırlanır, yoksa panel görünmez ama açık kalırdı. */
@media (prefers-reduced-motion: reduce) {
  .assistant-panel,
  .assistant-panel.is-closing,
  .assistant-msg.is-entering,
  .assistant-note.is-entering,
  .assistant-msg.is-entering .assistant-scope,
  .assistant-msg.is-entering .assistant-table tr,
  .assistant-dots i,
  #assistant-widget.is-hinting .assistant-fab::after,
  #assistant-widget:not(.is-open):not(.is-dragging) .assistant-fab::before,
  .assistant-greet,
  .assistant-greet.is-leaving,
  .assistant-greet.is-typing .assistant-greet-text::after {
    animation: none;
  }
  #assistant-widget,
  .assistant-fab,
  .assistant-fab > i,
  .assistant-input,
  .assistant-send,
  .assistant-log,
  .assistant-new,
  .assistant-usage,
  .assistant-greet,
  .assistant-greet-close {
    transition: none;
  }
  .assistant-dots i {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   Lastik iş emri (Bakım & Muayene 3. sekme) — genişleyen modal + aks şeması.
   Modal genişliği id-özgül: Metronic bundle'ı max-w-[...] üretmiyor. Araç
   seçilince .is-expanded eklenir; max-width geçişi modalın "büyümesini",
   grid-template-rows 0fr→1fr geçişi ünite sütununun "açılmasını" oynatır.
   -------------------------------------------------------------------------- */
#tire-order-modal .kt-modal-content {
  width: calc(100% - 2rem);
  max-width: 560px;
  transition: max-width 0.35s ease-in-out;
}
#tire-order-modal .kt-modal-content.is-expanded {
  max-width: 1040px;
}
.tire-order-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .is-expanded .tire-order-grid {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}
.tire-units-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease-in-out;
}
.is-expanded .tire-units-wrap {
  grid-template-rows: 1fr;
}
.tire-units-inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #tire-order-modal .kt-modal-content,
  .tire-units-wrap {
    transition: none;
  }
}

/* Ünite kartı içi düzen editörü */
.tire-layout-editor {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
}
.tire-axle-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}
.tire-axle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.tire-axle-row .kt-select {
  width: 6.5rem;
}

/* Şema: SVG kabı içinde ortalı; CSS çizim rengini sınıflarla verir (markup'ta style yok). */
.tire-schematic {
  display: flex;
  justify-content: center;
}
.tire-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
.tire-front {
  fill: var(--muted-foreground);
  opacity: 0.55;
}
.tire-frame {
  fill: var(--muted);
  stroke: var(--border);
  stroke-width: 1.5;
}
.tire-axle {
  stroke: var(--muted-foreground);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.6;
}
.tire-axle-no,
.tire-label {
  fill: var(--muted-foreground);
  font-size: 9px;
  font-family: inherit;
}
.tire-axle-no {
  font-size: 10px;
  font-weight: 600;
}
.tire .tire-hit {
  fill: transparent;
}
.tire .tire-body {
  fill: var(--background);
  stroke: var(--muted-foreground);
  stroke-width: 1.5;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.tire .tire-tread {
  stroke: var(--border);
  stroke-width: 1;
}
.tire:not(.is-readonly) {
  cursor: pointer;
}
.tire:not(.is-readonly):hover .tire-body,
.tire:focus-visible .tire-body {
  stroke: var(--primary);
  stroke-width: 2;
}
.tire:focus-visible {
  outline: none;
}
.tire.is-selected .tire-body {
  fill: var(--primary);
  stroke: var(--primary);
}
.tire.is-selected .tire-tread {
  stroke: var(--primary-foreground, #fff);
  opacity: 0.6;
}
.tire.is-selected .tire-label {
  fill: var(--primary);
  font-weight: 600;
}
.tire.is-highlight .tire-body {
  stroke: var(--destructive);
  stroke-width: 2.5;
}
.tire-badge circle {
  fill: var(--destructive);
}
.tire-badge text {
  fill: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: inherit;
}

/* Fotoğraf ızgarası (diyalog + detay) */
.tire-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
}
.tire-photo-grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.tire-photo-empty {
  grid-column: 1 / -1;
}
.tire-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--muted);
  border: 1px solid var(--border);
}
.tire-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tire-photo-thumb.is-loading::after,
.tire-photo-thumb.is-missing::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--muted);
}
.tire-photo-thumb.is-loading::after {
  animation: tire-photo-shimmer 1.2s ease-in-out infinite;
}
.tire-photo-thumb.is-missing::after {
  background:
    linear-gradient(45deg, transparent 47%, var(--border) 47%, var(--border) 53%, transparent 53%),
    var(--muted);
}
@keyframes tire-photo-shimmer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.tire-photo-thumb.is-new {
  border-color: var(--primary);
}
.tire-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  border: 0;
  cursor: pointer;
}
.tire-photo-remove:hover {
  background: var(--destructive);
}

/* Detay diyaloğu düzeni: aks/lastik şeması SOLDA kendi kartında, bilgi kutuları ve lastik satırları
   SAĞDA. Eskiden her ünite tek kartta şema + satırları birlikte taşıyor ve kartlar md:grid-cols-2 ile
   yan yana diziliyordu; şema en az 260px, fotoğraf ızgarası en az 72px'lik iz istediği için gövde
   yatay kayıyordu (.kt-modal-body overflow-y:auto taşıyor, bu da overflow-x'i auto'ya çeviriyor).
   min-width:0 ŞART: grid öğesinin varsayılan min-width'i auto, yani içeriğin min-content genişliği
   kolonu şişirip aynı yatay kaymayı geri getirir. */
.tire-detail-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.tire-detail-layout > *,
.tire-detail-main > * {
  min-width: 0;
}
@media (min-width: 768px) {
  .tire-detail-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
  /* Şema kolonu satırlar kaydırılırken görünür kalır (lastiğe tıkla → satırı vurgula bağı korunsun).
     Yalnız iki kolonda: tek kolonda şema, altındaki satırların üstüne yapışıp içeriği örtüyordu. */
  .tire-detail-diagrams {
    position: sticky;
    top: 0;
  }
}
.tire-detail-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
}
.tire-detail-diagram {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
/* Bilgi kutuları: sabit kolon sayısı yerine sığdıkça — daralan sağ kolonda 4 kolon değerleri kırıyordu. */
.tire-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

/* Detay: lastik satırları */
.tire-detail-row {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.tire-detail-row.is-highlight {
  border-color: var(--primary);
  background: var(--accent);
}

/* Liste: araç hücresindeki tip ikonu */
.tire-row-type-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Araç formu "Aks Düzeni" kartı: editör solda, önizleme sağda (dar ekranda alt alta). */
.axle-field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 768px) {
  .axle-field-grid {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}

/* Son dorse önerisi çipi (iş emri modalı) */
.tire-trailer-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 0.5rem;
  color: var(--secondary-foreground, var(--muted-foreground));
}
.tire-trailer-hint > i {
  color: var(--primary);
}
.tire-trailer-hint > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Araç detayı bakım kartları: kompakt satır listeleri + lastik özeti ızgarası */
.vshow-maint-list {
  display: grid;
  gap: 0.25rem;
}
.vshow-maint-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.vshow-maint-row-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vshow-maint-row-link:hover {
  border-color: var(--primary);
  background: var(--accent);
}
.vshow-tire-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 768px) {
  .vshow-tire-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

/* Metronic bundle'ında olmayan Tailwind utility'leri (paket kullanıcı limiti: dolu limitte "Yeni Kullanıcı" pasif). */
.pointer-events-none { pointer-events: none; }
.opacity-50 { opacity: 0.5; }
/* Flex çocuğu içeriğinden küçülebilsin (varsayılan min-height:auto kaydırmayı engeller); Metronic bundle'ında yok. */
.min-h-0 { min-height: 0; }
/* Küçük punto BÜYÜK HARF etiketler (denetim ayrıntısı, sidebar bölüm başlıkları) harf aralığı olmadan sıkışık okunuyor. */
.tracking-wide { letter-spacing: 0.025em; }

/* --------------------------------------------------------------------------
   DENETİM KAYDI — AYRINTI AKORDİYONU

   Tablo `table-auto`: sütun genişlikleri İÇERİĞİN min-content genişliğinden
   çıkar. Ayrıntı satırındaki JSON bloğu tek satırda çok uzun olabiliyor
   (metadata, user-agent, uzun değişiklik seti) ve blokta `overflow-x: auto`
   olması bunu ENGELLEMEZ: kaydırma kutusu oluşur ama hücrenin intrinsic
   katkısı yine içerik kadar hesaplanır. Sonuç: akordiyon açılınca tablo
   ekranın çok ötesine uzuyor, başlık sütunları ayrıntı satırıyla birlikte
   geriliyor ve düzen bozuk görünüyordu.

   Çözüm hücrenin İÇİNDEKİ kutuda: `width: 0` BELİRLİ bir genişliktir, yani
   intrinsic hesapta içeriğin yerine geçer → hücreye katkı 0. `min-width: 100%`
   ise yüzde olduğu için intrinsic hesapta yok sayılır (kap genişliği o anda
   belirsizdir) ama YERLEŞİM sırasında kutuyu hücrenin gerçek genişliğine
   uzatır. Böylece uzun içerik tabloyu değil kendi kaydırma kutusunu kaydırır.
   -------------------------------------------------------------------------- */
.audit-detail-body {
  width: 0;
  min-width: 100%;
  /* Sarılabilen uzun değerler (oturum kimliği, e-posta, hata nedeni) sığmadığında kırılır.
     `break-words` (overflow-wrap: break-word) YETMEZ: o yalnız yerleşimde kırar, min-content
     KATKISINI düşürmez — yani tablo yine içeriğin genişliğine gerilirdi. `anywhere` intrinsic
     hesaba da girer. Kural miras alınır; girintisi korunması gereken JSON bloğu <pre> olduğu
     için (white-space: pre) sarma zaten devre dışıdır, o yatay kaydırmayla okunur. */
  overflow-wrap: anywhere;
}

/* Uzun gövde kendi kutusunda kayar. <pre>'nin UA margin'i akordiyonun `gap`
   düzenine ekleniyordu (m-0 utility'si bundle'da yok) — burada sıfırlanır.
   Yükseklik tavanı: yüzlerce alanlı bir değişiklik seti satırı ekranlar boyu
   uzatıp altındaki kayıtları erişilemez kılıyordu. */
.audit-detail-json {
  margin: 0;
  max-height: 24rem;
  overflow: auto;
}

.audit-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}
.audit-filter-field,
.table-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.audit-filter-label,
.table-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.audit-filter-field > .kt-select {
  width: 8.75rem;
}
.table-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--color-border, var(--app-line));
}
.table-filter-bar > .kt-input {
  flex: 0 0 auto;
  width: 16rem;
  max-width: 100%;
}
.audit-filter-search {
  flex: 1 1 9rem;
  max-width: 12.5rem;
}
.audit-filter-search > .kt-input {
  width: 100%;
}
.audit-filter-range {
  width: 11.5rem;
}
.audit-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--spacing) * 8.5);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   "Yeni Sürümde Neler Var" ve "Sürüm Geçmişi" pencereleri

   İki pencere de uygulamanın standart diyalog yüzeyinde durur (.kt-modal-content:
   --popover zemin, --border kenar) ve sayfa temasıyla birlikte döner. Not satırını
   ikisi de aynı üreticiden çiziyor (core/release-notes-view.js); satır renkleri bu
   yüzden burada tek yerde ve --app-* token'larından.

   Kaydırma TEK katmanda, diyalog gövdesinde (.kt-modal-body) olur. Gövde, içerik
   kutusunun tavanı içinde kalan yüksekliği flex düzende kendisi ölçer (bkz.
   .kt-modal > .kt-modal-content). Listeye ayrıca sabit bir tavan
   (calc(100dvh - 16rem)) konduğunda tahmin gövdenin gerçek yüksekliğini aşıyordu:
   iç içe iki kaydırma oluşuyor, iç liste sonuna vardığında son notlar hâlâ gövdenin
   alt kenarının altında kalıyordu.
   -------------------------------------------------------------------------- */

/* Kayan gövdenin çubuğu da temaya uyar: tarayıcının varsayılan çubuğu koyu temada
   pencerenin kenarında beyaz bir şerit bırakıyordu. */
.release-notes-dialog .kt-modal-body {
  scrollbar-color: var(--app-ink-faint) transparent;
}

/* Sürüm damgası: v.<tam etiket> - <yayın tarihi>. Tam etiket (1.5.1-18) bilinçli —
   destek "hangi sürümdesiniz" sorusunu bu satırdan cevaplıyor. */
.whats-new-stamp {
  margin-bottom: 14px;
  color: var(--app-ink-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Üç sütun da HER satırda aynı x'te başlar. Flex düzende başlamıyordu: rozet genişliği hem tipe hem
   dile göre değişiyor ("Hata" / "Yeni Özellik" / "Verbesserung") ve her satır kendi rozetine göre
   kayıyordu — tarihler ve metinler merdiven gibi duruyordu. `max-content` sütunu en geniş rozete göre
   ölçer, yani sabit bir px tahmini gerekmez ve dil değişince kendiliğinden uyar. */
.whats-new-list {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  row-gap: 11px;
}
/* Satırın üç hücresi doğrudan ızgaraya girer; aradaki <li> kutu üretseydi sütunlar yalnız kendi
   satırında hizalanır, satırlar arasında hizalanmazdı. */
.whats-new-item {
  display: contents;
}
.whats-new-badge {
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
/* Rozetler durum ailelerinden: açık temada yumuşak zemin + koyu mürekkep, koyuda saydam dolgu +
   açık mürekkep. Başarı ailesinin kenarlık token'ı yok; o rozet halkasız. */
.whats-new-badge-danger {
  background: var(--app-crit-soft);
  box-shadow: inset 0 0 0 1px var(--app-crit-line);
  color: var(--app-crit-ink);
}
.whats-new-badge-success {
  background: var(--app-good-soft);
  color: var(--app-good-ink);
}
.whats-new-badge-warning {
  background: var(--app-warn-soft);
  box-shadow: inset 0 0 0 1px var(--app-warn-line);
  color: var(--app-warn-ink);
}
.whats-new-date {
  color: var(--app-ink-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.whats-new-date::after {
  content: ' -';
}
/* Uzun not kendi sütununda sarar; alt satırlar da metin sütununun hizasında başlar. */
.whats-new-text {
  color: var(--app-ink);
  font-size: 13px;
  line-height: 1.5;
  /* Jira notuna yapıştırılmış bir URL ya da uzun bir tanımlayıcı sütunu taşırmasın; `break-word`
     yetmez, o yalnız yerleşimde kırar (bkz. .audit-detail-body'deki aynı gerekçe). */
  overflow-wrap: anywhere;
}
/* Dar ekran: üç sütun metne okunur genişlik bırakmıyor, metin kendi satırına iner.
   row-gap küçülür ve farkı metnin alt boşluğu kapatır — yoksa satır içi boşlukla maddeler arası
   boşluk eşitlenir ve hangi tarihin hangi nota ait olduğu okunmaz olurdu. */
@media (max-width: 520px) {
  .whats-new-list {
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: 4px;
  }
  .whats-new-text {
    grid-column: 1 / -1;
    margin-bottom: 7px;
  }
}

/* Liste kendi başına kaymaz; akordeonun tamamı diyalog gövdesiyle birlikte kayar (bkz. bölüm başı). */
.release-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.release-history-item {
  border: 1px solid var(--app-line);
  border-radius: 0.625rem;
  background: var(--app-surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.release-history-item:has(> [aria-expanded="true"]) {
  border-color: var(--app-info-line);
}
.release-history-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 0;
  background: transparent;
  color: var(--app-ink);
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}
.release-history-head:hover {
  background: var(--app-surface-sunken);
}
.release-history-head[aria-expanded="true"] {
  border-bottom: 1px solid var(--app-line-soft);
  background: var(--app-surface-sunken);
}
.release-history-caret {
  color: var(--app-ink-muted);
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}
.release-history-head[aria-expanded="false"] .release-history-caret {
  transform: rotate(-90deg);
}
.release-history-version {
  color: var(--app-ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.release-history-date {
  margin-inline-start: auto;
  color: var(--app-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.release-history-panel {
  padding: 0.875rem 1rem 1rem 2.25rem;
}
.release-history-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 120px;
  color: var(--app-ink-soft);
  font-size: 0.8125rem;
  text-align: center;
}
.release-history-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--app-line);
  border-top-color: var(--app-info);
  border-radius: 50%;
  animation: map-card-spin 0.8s linear infinite;
}
@media (max-width: 520px) {
  .release-history-panel {
    padding-left: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .release-history-caret,
  .release-history-head,
  .release-history-item {
    transition: none;
  }
}

/* Sorun Bildir penceresindeki görsel ızgarası. Görsel dili lastik fotoğraf ızgarasıyla aynı ama
   sınıflar AYRI: iki yüzey birbirinin stiline bağlanırsa birinde yapılan düzenleme ötekini sessizce
   bozar (lastik ızgarası 96px'lik iz ve yükleme/eksik durumları taşıyor, buradaki yalnız seçilmiş
   yerel dosyaları gösteriyor). */
.support-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.support-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--muted);
  border: 1px solid var(--primary);
}
.support-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.support-photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  border: 0;
  cursor: pointer;
}
.support-photo-remove:hover {
  background: var(--destructive);
}

/* --------------------------------------------------------------------------
   kt-btn-warning — Metronic buton varyantları arasında YOK (rozet tarafında
   kt-badge-warning var, butonda karşılığı yok). "Dış servise gider" anlamındaki
   eylemleri (M2M hat kota sorgusu) birincil eylemden ayırmak için gerekiyor.

   Renkler kt-badge-warning ile AYNI token'lardan: iki bileşen aynı uyarı rengini
   göstermeli, ayrı tonlar seçmek arayüzde ikinci bir "uyarı" rengi yaratırdı.
   -------------------------------------------------------------------------- */
.kt-btn-warning {
  background-color: var(--color-yellow-400);
  color: var(--color-white);
}
@media (hover: hover) {
  .kt-btn-warning:hover {
    background-color: var(--color-yellow-500);
  }
}
.kt-btn-warning.active {
  background-color: var(--color-yellow-500);
}

/* --------------------------------------------------------------------------
   Bakım & Muayene — sekme üstü özet paneli (js/pages/maintenance/overview.js)

   Renkler --app-* token'larından okunur: panel açık/koyu temada aynı bileşen
   olarak kalmalı ve durum aileleri (crit/warn/info/good) sayfanın geri
   kalanıyla aynı anlamı taşımalı.
   -------------------------------------------------------------------------- */
.maint-ov {
  display: grid;
  gap: 14px;
}
.maint-ov-top {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* flex-direction AÇIKÇA yazılır: .kt-card kendi kuralında column dayatıyor ve yalnız display yazmak
   kartı dikey bırakıyordu — halka/ikon üstte, metin altında kalıyordu. */
.maint-ov-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  min-width: 0;
}
.maint-ov-card-col {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.maint-ov-card-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.maint-ov-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maint-ov-card-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maint-ov-card-strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maint-ov-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 20px;
}
.maint-ov-ic[data-tone="crit"] { background: var(--app-crit-soft); color: var(--app-crit); }
.maint-ov-ic[data-tone="warn"] { background: var(--app-amber-soft); color: var(--app-amber); }
.maint-ov-ic[data-tone="info"] { background: var(--app-info-soft); color: var(--app-info); }
.maint-ov-ic[data-tone="good"] { background: var(--app-good-soft); color: var(--app-good); }

/* Sağlık skoru halkası: dolu yay skorun kendisidir, rengi eşiğe göre değişir (bkz. healthTone). */
.maint-ov-ring {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}
.maint-ov-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.maint-ov-ring circle {
  fill: none;
  stroke-width: 5;
}
.maint-ov-ring-track {
  stroke: var(--app-surface-track);
}
.maint-ov-ring-value {
  stroke-linecap: round;
}
.maint-ov-ring[data-tone="good"] .maint-ov-ring-value { stroke: var(--app-good); }
.maint-ov-ring[data-tone="warn"] .maint-ov-ring-value { stroke: var(--app-amber); }
.maint-ov-ring[data-tone="crit"] .maint-ov-ring-value { stroke: var(--app-crit); }
.maint-ov-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--app-ink);
}

.maint-ov-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.maint-ov-ranges {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--app-surface-track);
}
.maint-ov-ranges button {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--app-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.maint-ov-ranges button:hover {
  color: var(--app-ink);
}
.maint-ov-ranges button.active {
  background: var(--app-surface);
  color: var(--app-ink);
}
.maint-ov-cur {
  font-size: 11px;
  font-weight: 700;
  color: var(--app-ink-soft);
  white-space: nowrap;
}
.maint-ov-cur-more {
  font-weight: 500;
  color: var(--app-ink-muted);
}
.maint-ov-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--app-surface-track);
}
.maint-ov-bar-seg[data-seg="service"] { background: var(--app-info); }
.maint-ov-bar-seg[data-seg="inspection"] { background: var(--app-violet); }
.maint-ov-bar-seg[data-seg="tire"] { background: var(--app-amber); }
.maint-ov-bar-seg[data-seg="periodic"] { background: var(--app-cyan); }
.maint-ov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--app-ink-soft);
}
.maint-ov-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.maint-ov-legend-item b {
  font-weight: 700;
  color: var(--app-ink);
}
.maint-ov-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.maint-ov-legend-dot[data-seg="service"] { background: var(--app-info); }
.maint-ov-legend-dot[data-seg="inspection"] { background: var(--app-violet); }
.maint-ov-legend-dot[data-seg="tire"] { background: var(--app-amber); }
.maint-ov-legend-dot[data-seg="periodic"] { background: var(--app-cyan); }
.maint-ov-legend-empty {
  color: var(--app-ink-muted);
}

.maint-ov-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.maint-ov-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 76px;
  padding: 16px 16px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  background: var(--app-surface);
  color: var(--app-info);
  box-shadow: inset 0 0 0 1px var(--app-line);
  transition: box-shadow 0.2s ease;
}
.maint-ov-tile:hover {
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.maint-ov-tile-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 17px;
  background: var(--app-info-soft);
}
.maint-ov-tile-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.maint-ov-tile-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--app-ink);
}
.maint-ov-tile-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maint-ov-tile.maint-ov-skeleton {
  cursor: default;
}
.maint-ov-skeleton {
  min-height: 78px;
  background: var(--app-surface-track);
  animation: maint-ov-pulse 1.2s ease-in-out infinite;
}
.maint-ov-error {
  justify-content: space-between;
}
@keyframes maint-ov-pulse {
  50% { opacity: 0.55; }
}

.vshow-vtype-thumb {
  background: var(--app-surface-track);
  color: var(--app-ink-muted);
}
#show-vehicle-image.is-photo {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
}

.vedit-photo-preview {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 8.5);
  height: calc(var(--spacing) * 8.5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--app-surface-track);
  color: var(--app-ink-muted);
  font-size: 1rem;
}
.vedit-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vio-ic {
  width: 1em;
  height: 1em;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}
.map-alerts-btn .vio-ic {
  width: 15px;
  height: 15px;
}
.dark .vio-ic,
.map-fullpage .vio-ic,
.map-geotools .vio-ic,
.map-alerts-card .vio-ic {
  filter: invert(1);
}
.map-fullpage .map-feed-thumb .vio-ic,
.map-fullpage .map-dms-chip .vio-ic,
.map-fullpage .map-route-info-head .vio-ic {
  filter: none;
}
.dark .map-fullpage .map-feed-thumb .vio-ic,
.dark .map-fullpage .map-dms-chip .vio-ic {
  filter: invert(1);
}

.trips-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}
.trips-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.trips-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.trips-range {
  position: relative;
}
.trips-range-anchor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.trips-filter-combo {
  width: 11.5rem;
  min-width: 0;
}
.trips-filter-combo > .kt-input {
  width: 100%;
}

.trips-consumption {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 0.75rem;
}

.trip-detail-modal {
  max-width: 1120px;
}
.trip-detail-window {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-ink-soft);
}
.trip-detail-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
.trip-detail-head {
  flex-wrap: wrap;
}
.trip-detail-head .vshow-emgloc-title {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.trip-detail-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.trip-detail-map {
  height: 380px;
}
.trip-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.trip-detail-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  color: var(--app-ink-soft);
}
.trip-detail-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.trip-detail-legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}
.trip-detail-actions-start {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.trip-detail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--app-surface-track);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--app-ink-soft);
}
.trip-detail-muted {
  font-size: 0.75rem;
  color: var(--app-ink-muted);
}
.trip-detail-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface-sunken);
}
.trip-detail-route-end {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 1 12rem;
  min-width: 0;
}
.trip-detail-route-end.is-end {
  justify-content: flex-end;
  text-align: end;
  flex-direction: row-reverse;
}
.trip-detail-route-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 0.8125rem;
}
.trip-detail-route-chip.is-load {
  background: var(--app-good-soft);
  color: var(--app-good-ink);
}
.trip-detail-route-chip.is-dump {
  background: var(--app-info-soft);
  color: var(--app-info-ink);
}
.trip-detail-route-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.trip-detail-route-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.trip-detail-route-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-ink);
  overflow-wrap: anywhere;
}
.trip-detail-route-time {
  font-size: 0.6875rem;
  color: var(--app-ink-soft);
}
.trip-detail-route-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
}
.trip-detail-route-span {
  padding: 0.125rem 0.5rem;
  border: 1px dashed var(--app-line);
  border-radius: 999px;
  background: var(--app-surface);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-ink-soft);
  white-space: nowrap;
}

.trip-detail-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}
.trip-detail-hl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
  min-width: 0;
}
.trip-detail-hl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 0.875rem;
}
.trip-detail-hl-icon.is-info {
  background: var(--app-info-soft);
  color: var(--app-info-ink);
}
.trip-detail-hl-icon.is-violet {
  background: var(--app-violet-wash);
  color: var(--app-violet-ink);
}
.trip-detail-hl-icon.is-amber {
  background: var(--app-amber-soft);
  color: var(--app-amber-ink);
}
.trip-detail-hl-icon.is-good {
  background: var(--app-good-soft);
  color: var(--app-good-ink);
}
.trip-detail-hl-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.trip-detail-hl-value {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--app-ink);
  white-space: nowrap;
}
.trip-detail-hl-value small {
  margin-inline-start: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--app-ink-muted);
}
.trip-detail-hl-label {
  font-size: 0.6875rem;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-detail-bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--app-surface-track);
}
.trip-detail-bar-seg.is-moving {
  background: var(--app-info);
}
.trip-detail-bar-seg.is-idle {
  background: var(--app-amber);
}
.trip-detail-bar-seg.is-other {
  background: var(--app-ink-faint);
}
.trip-detail-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--app-ink-soft);
}
.trip-detail-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.trip-detail-bar-item i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.trip-detail-bar-item i.is-moving {
  background: var(--app-info);
}
.trip-detail-bar-item i.is-idle {
  background: var(--app-amber);
}
.trip-detail-bar-item i.is-other {
  background: var(--app-ink-faint);
}
.trip-detail-bar-item b {
  color: var(--app-ink);
}

.trip-detail-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.5rem;
}
.trip-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--app-line-soft);
  font-size: 0.75rem;
}
.trip-detail-row-key {
  flex: none;
  color: var(--app-ink-soft);
}
.trip-detail-row-val {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  text-align: end;
  color: var(--app-ink);
  overflow-wrap: anywhere;
}
.trip-detail-meter {
  display: inline-block;
  width: 2.5rem;
  height: 5px;
  border-radius: 999px;
  background: var(--app-surface-track);
  overflow: hidden;
}
.trip-detail-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--app-accent);
}
.trip-detail-row-val[data-conf-trip],
.kt-badge[data-conf-trip] {
  cursor: help;
}
.trip-conf-hint {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.trip-conf-pop {
  position: fixed;
  z-index: 250;
  width: max-content;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--input);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-foreground);
}
.hover-pop-arrow {
  position: absolute;
  bottom: -6px;
  left: var(--arrow-x, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: inherit;
  border-right: 1px solid var(--input);
  border-bottom: 1px solid var(--input);
  transform: rotate(45deg);
}
.is-below > .hover-pop-arrow {
  top: -6px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--input);
  border-left: 1px solid var(--input);
}
.trip-conf-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
.trip-conf-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trip-conf-item,
.trip-conf-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.trip-conf-item {
  color: var(--foreground);
}
.trip-conf-item > i,
.trip-conf-note > i {
  margin-top: 2px;
  font-size: 14px;
}
.trip-conf-item.is-met > i {
  color: var(--app-good);
}
.trip-conf-item.is-missed > i {
  color: var(--app-crit);
}
.trip-conf-gain {
  display: block;
  color: var(--muted-foreground);
}
.trip-conf-ok {
  margin-top: 8px;
  color: var(--muted-foreground);
}
.trip-conf-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--input);
}
.trip-conf-note.is-warning > i {
  color: var(--app-warn);
}
.trip-conf-note.is-info > i {
  color: var(--muted-foreground);
}
.trip-events-backdrop {
  z-index: 210;
}
.trip-events-modal {
  max-width: 30rem;
}
.trip-events-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0.25rem;
  font-size: 0.75rem;
}
.trip-detail-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: start;
  cursor: pointer;
}
.trip-detail-event:hover {
  background: var(--app-surface-hover);
}
.trip-detail-event-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.trip-detail-event-label {
  font-weight: 600;
  color: var(--app-ink);
}
.trip-detail-event-meta {
  font-size: 0.6875rem;
  color: var(--app-ink-muted);
}
.trip-detail-event-go {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--app-ink-muted);
}
.trip-detail-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #ffffff; /* theme-ok: harita tuvali üstü pin halkası — zemini sayfa teması değil harita karosu belirler */
  background: #f3f4f6; /* theme-ok: harita tuvali üstü nötr pin zemini */
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.45); /* theme-ok: harita tuvali üstü gölge */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trip-detail-pin:hover {
  transform: scale(1.12);
}
.trip-detail-pin.is-active {
  transform: scale(1.18);
  /* theme-ok: seçili pinin harita tuvali üstündeki halkası */
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.45), 0 4px 10px rgba(15, 23, 42, 0.5);
}
.trip-detail-pin i {
  font-size: 12px;
  color: #374151; /* theme-ok: açık pin zemini üstünde sabit koyu ikon */
}
/* İkon PNG'si koyu çizimdir: harita tuvali sayfa temasını izlemediği için koyu temada da çevrilmez. */
.trip-detail-pin .vio-ic {
  width: 14px;
  height: 14px;
  filter: none;
}
.trip-detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--app-surface-track);
}
.trip-detail-badge i {
  font-size: 10px;
  color: var(--app-ink-soft);
}
.trip-detail-badge .vio-ic {
  width: 11px;
  height: 11px;
}

.trip-detail-card {
  position: absolute;
  z-index: 3;
  top: 10px;
  inset-inline-start: 10px;
  display: flex;
  flex-direction: column;
  width: 15rem;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 12px;
  background: var(--app-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28); /* theme-ok: harita tuvali üstü kart gölgesi */
}
.trip-detail-card[hidden] {
  display: none;
}
.trip-detail-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.625rem;
  border-bottom: 1px solid var(--app-line-soft);
}
.trip-detail-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--app-surface-track);
}
.trip-detail-card-icon i {
  font-size: 11px;
  color: var(--app-ink-soft);
}
.trip-detail-card-icon .vio-ic {
  width: 12px;
  height: 12px;
}
.trip-detail-card-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-detail-card-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--app-ink-soft);
  cursor: pointer;
}
.trip-detail-card-close:hover {
  background: var(--app-surface-hover);
}
.trip-detail-card-body {
  padding: 0.5rem 0.625rem 0.625rem;
  overflow-y: auto;
}
.trip-detail-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 2px 0;
  font-size: 0.6875rem;
}
.trip-detail-card-key {
  flex: none;
  color: var(--app-ink-soft);
}
.trip-detail-card-val {
  font-weight: 600;
  text-align: end;
  color: var(--app-ink);
  overflow-wrap: anywhere;
}
.trip-detail-card-note {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  color: var(--app-ink-muted);
}
.trip-detail-card-shot {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 8px;
}

/* Cihaz ayarları — ADAS eşik formu (_shared/adas-event-form.js; tek cihaz sekmesi + toplu diyalog).
   Alanlar KAPSAYICI genişliğine göre sütunlanır (auto-fill): 520px modalda iki sütun, dar diyalog ve
   telefonda tek sütun — viewport kırılımı modal içinde yanlış karar verirdi. */
.ds-adas-code {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border, var(--app-line));
  border-radius: 0.5rem;
}
.ds-adas-params {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem 1rem;
  transition: opacity 0.15s ease;
}
/* Kapalı kodun eşikleri görünür kalır (ne gönderileceği okunabilsin) ama soluk ve pasif */
.ds-adas-params.is-off {
  opacity: 0.55;
}
.ds-adas-input {
  width: 6.5rem;
}
.ds-adas-note {
  flex: 1 1 16rem;
}

/* ── Gösterge paneli lambaları (FMS tell tale) ──────────────────────────────────────────────────────────
   İkonlar siyah çizgi PNG'dir: koyu temada ihlal ikonlarıyla aynı yoldan (invert) açığa çevrilir.
   Tablo hücresi (.fa-cell-chips) anasayfa özet modalının "Dikkat Gerektiren Durum" kolonunu çizer; kare kartlar
   (.vtt-*) araç detayının gösterge sekmesidir. Kartın kenarı/zemini lambanın GÜNCEL hâlini taşır, hâl ayrıca
   metin olarak da yazılıdır — renk tek başına anlam taşımaz. */
.fa-cell-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.fa-cell-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.fa-cell-chip-ic {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
.fa-cell-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
  background-color: var(--muted);
}
.fa-cell-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fa-cell-thumb-empty {
  color: var(--muted-foreground);
}
/* Lamba grupları: her grup başlığı kenarın üstünde duran bir kutu (fieldset + legend → ekran okuyucuya da
   adıyla bir grup). min-width:0 — fieldset'in varsayılan min-content genişliği dar ekranda ızgarayı taşırırdı. */
.vtt-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Kart yokken (yükleniyor / izlenen lamba yok) kap yer kaplamaz: üstteki banner ile kart içeriğinin
   alt kenarı arasında boş bir flex gap kalmasın. */
.vtt-groups:empty {
  display: none;
}
.vtt-group {
  min-width: 0;
  margin: 0;
  padding: 6px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.vtt-group-title {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--app-ink);
}
.vtt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.vtt-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vtt-card:hover:not([aria-disabled="true"]) {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--app-ink) 10%, transparent);
}
.vtt-card[aria-disabled="true"] {
  cursor: default;
}
.vtt-card:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}
.vtt-card-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  min-height: 2.5em;
  color: var(--app-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vtt-card-ic {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.vtt-card-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vtt-card-state {
  font-size: 11px;
  color: var(--app-ink-muted);
}
.vtt-card-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--app-ink);
}
.vtt-state-red {
  border-color: var(--app-crit-line);
  background: var(--app-crit-wash);
}
.vtt-state-red .vtt-card-state {
  color: var(--app-crit-ink);
  font-weight: 600;
}
.vtt-state-yellow {
  border-color: var(--app-amber);
  background: var(--app-amber-wash);
}
.vtt-state-yellow .vtt-card-state {
  color: var(--app-amber-ink);
}
.vtt-state-info {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.vtt-state-info .vtt-card-state {
  color: var(--primary);
  font-weight: 600;
}
.vtt-state-unknown .vtt-card-ic {
  opacity: 0.45;
}
.dark .fa-cell-chip-ic,
.dark .vtt-card-ic {
  filter: invert(1);
}
/* Harita alt panelindeki 36 px karenin büyüteç kutusu: araç detayındaki kutunun AYNISI, karenin merkezinden
   büyüyerek açılır. Sayfa katmanında (body) sabit konumludur — panel taşanı kırpar. Hâl zeminleri yarı saydam
   olduğu için altına kartın kendi zemini serilir (harita içinden görünmesin). İşaretçi olaylarını yutmaz:
   fare alttaki kareden ayrılmış sayılmasın, tıklama kareye geçsin. */
.vtt-zoom {
  position: fixed;
  z-index: 110;
  width: 148px;
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  transform-origin: var(--vtt-zoom-origin, 50% 50%);
}
.vtt-zoom:not(.is-open) {
  display: none;
}
.vtt-zoom.is-open {
  animation: vtt-zoom-in 0.14s ease-out;
}
.vtt-zoom .vtt-card {
  width: 100%;
}
@keyframes vtt-zoom-in {
  from {
    opacity: 0.4;
    transform: scale(var(--vtt-zoom-from, 0.25));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vtt-zoom.is-open {
    animation: none;
  }
}

/* ── Planlı bakım banner'ı (core/platform-maintenance-banner.js, FMS-204) ─────────────────────────────
   .app-main'in en üstünde, #page-content'in dışında: içerikle kaymaz ve içeriği aşağı iter (sabit bağlantı
   şeridi gibi üstünü örtmez). Renkler uyarı token'larından; karanlık temada kendiliğinden değişir. */
.platform-maintenance-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0;
}
.platform-maintenance-stack[hidden] {
  display: none;
}
.platform-maintenance-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid var(--app-warn);
  border-inline-start-width: 4px;
  border-radius: 0.5rem;
  background: var(--app-warn-soft);
  color: var(--app-warn-ink);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.platform-maintenance-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  margin-top: 0.25rem;
}
.platform-maintenance-text {
  flex: 1;
  min-width: 0;
  padding-top: 0.25rem;
  overflow-wrap: anywhere;
}
.platform-maintenance-text strong {
  font-weight: 600;
}
.platform-maintenance-close {
  flex-shrink: 0;
  color: inherit;
}

/* ── PWA: bağlantı şeridi + "yeni sürüm" toast'ı (core/pwa) ──────────────────────────────────────────
   Şerit sayfanın en üstünde, sabit mobil üst barın ve diyalogların (z 1100) üzerinde durur; tıklamaları
   engellemez. Gizliyken ekran okuyucu da okumaz (visibility). */
.app-network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.app-network-banner.is-visible {
  visibility: visible;
  transform: none;
  transition: transform 0.2s ease, visibility 0s;
}
.app-network-banner[data-kind="offline"] {
  background: var(--app-crit-soft);
  color: var(--app-crit-ink);
}
.app-network-banner[data-kind="unreachable"] {
  background: var(--app-warn-soft);
  color: var(--app-warn-ink);
}
.app-network-banner[data-kind="recovered"] {
  background: var(--app-good-soft);
  color: var(--app-good-ink);
}
.pwa-update-toast,
.pwa-push-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.announcement-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
.login-notice-dialog .kt-modal-body {
  scrollbar-color: var(--border) transparent;
}
.login-notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-notice-group {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-notice-title {
  margin-bottom: 8px;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
}
.login-notice-items {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}
.login-notice-items.has-actions {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
}
.login-notice-item {
  display: contents;
}
.login-notice-alert > i {
  font-size: 18px;
}
.login-notice-alert.kt-alert-primary > i {
  color: var(--primary);
}
.login-notice-alert.kt-alert-destructive > i {
  color: var(--destructive);
}
.login-notice-icon {
  color: var(--primary);
  font-size: 16px;
}
.login-notice-due.is-critical {
  color: var(--destructive);
}
.login-notice-label {
  color: var(--foreground);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.login-notice-code {
  margin-inline-start: 6px;
  color: var(--muted-foreground);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}
.login-notice-meta {
  color: var(--muted-foreground);
  font-size: 12px;
  white-space: nowrap;
}
.login-notice-due {
  color: var(--foreground);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.login-notice-action {
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.login-notice-action:hover {
  text-decoration: underline;
}
button.login-notice-action {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fault-ticket-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}
.fault-ticket-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .fault-ticket-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.login-notice-more {
  display: inline-block;
  margin-top: 14px;
}
.login-notice-dialog .kt-modal-footer {
  flex-wrap: wrap;
}
.login-notice-confirm {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}
.login-notice-snooze {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: auto;
  color: var(--muted-foreground);
  font-size: 12px;
}
.login-notice-snooze .kt-select {
  width: auto;
  min-width: 140px;
}
.login-notice-alert.kt-alert-warning > i {
  color: var(--app-warn);
}
.login-notice-lamp {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* "Dikkat Gerektiren Durumlar" (core/login-notice-tabs): sekme şeridi başlığın altında, gövdenin dışında —
   uzun listede kaydırınca kaybolmaz. Kaydı olan sekme kullanıcı tıklayana kadar yavaş, hafif kırmızı atar. */
.attention-notice-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 1.25rem 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.attention-notice-tab {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.attention-notice-tab:hover {
  color: var(--foreground);
}
.attention-notice-tab.active {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}
.attention-notice-tab:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.attention-notice-tab-count {
  color: var(--destructive);
}
.attention-notice-tab-done {
  color: var(--app-good);
  font-size: 15px;
}
.attention-notice-tab.is-pulsing {
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 6%, transparent);
  animation: attention-notice-tab-pulse 2.4s ease-in-out infinite;
}
@keyframes attention-notice-tab-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 15%, transparent);
    background: color-mix(in srgb, var(--destructive) 4%, transparent);
  }
  50% {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 55%, transparent);
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
  }
}
.attention-notice-section + .attention-notice-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.attention-notice-section-title {
  margin-bottom: 10px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 700;
}
.attention-notice-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.attention-notice-done {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--app-good);
  font-size: 13px;
  font-weight: 600;
}
.attention-notice-done.is-muted {
  color: var(--muted-foreground);
}
.attention-notice-empty {
  padding: 24px 0;
  color: var(--muted-foreground);
  font-size: 13px;
  text-align: center;
}
.attention-notice-lock {
  margin: 0 auto 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .attention-notice-tab.is-pulsing {
    animation: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 55%, transparent);
  }
}
@media (max-width: 640px) {
  .login-notice-items,
  .login-notice-items.has-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .login-notice-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
  }
  .login-notice-meta {
    grid-column: 2;
    grid-row: 2;
  }
  .login-notice-action {
    grid-column: 3;
    grid-row: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-network-banner,
  .app-network-banner.is-visible {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Kullanıcı Rehberi (FMS-177): okuyucu, makale gövdesi ve root'un eşitleme ekranı.
   Makale gövdesi backend'in belge modelinden DOM ile kurulur (HTML değil); buradaki
   tipografi o düğümlere aittir. Renklerin hepsi token: koyu temada kendiliğinden döner.
   -------------------------------------------------------------------------- */

.ug-sync-hint[hidden],
.ug-tabs[hidden],
.ug-filter[hidden],
.ug-node-body[hidden] {
  display: none;
}

.ug-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 2.5rem 1.25rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), var(--app-accent));
  color: var(--primary-foreground);
  text-align: center;
}

.ug-hero-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.ug-hero-subtitle {
  max-width: 36rem;
  font-size: 0.875rem;
  opacity: 0.85;
}

.ug-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.5rem;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-ink);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.12);
}

.ug-search > i {
  color: var(--app-ink-muted);
  font-size: 1.125rem;
}

.ug-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--app-ink);
  font-size: 0.9375rem;
}

.ug-search .kt-btn {
  border-radius: 999px;
}

/* Tek kolonda da minmax(0, 1fr): uzun kod satırı ya da geniş tablo kolonu sayfayı yatay taşırmasın. */
.ug-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .ug-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

.ug-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.ug-tree {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ug-tree-empty {
  color: var(--app-ink-muted);
  font-size: 0.8125rem;
}

.ug-node-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
}

.ug-node-head:hover,
.ug-node.is-selected > .ug-node-head {
  background: var(--app-surface-hover);
}

.ug-node-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--app-ink-muted);
  font-size: 0.75rem;
}

.ug-node-toggle > i {
  transition: transform 0.15s ease;
}

.ug-node-toggle[aria-expanded="true"] > i {
  transform: rotate(90deg);
}

.ug-node-name {
  flex: 1;
  min-width: 0;
  padding: 0.375rem 0;
  overflow: hidden;
  color: var(--app-ink);
  font-size: 0.875rem;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ug-node.is-selected .ug-node-name {
  color: var(--app-info-ink);
  font-weight: 600;
}

.ug-node-count {
  min-width: 1.5rem;
  margin-inline-end: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--app-info-soft);
  color: var(--app-info-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
}

.ug-node-body {
  padding: 0.125rem 0 0.375rem 1.75rem;
}

.ug-list {
  display: flex;
  flex-direction: column;
}

.ug-list-empty {
  padding: 1.5rem 0;
  color: var(--app-ink-muted);
  font-size: 0.875rem;
  text-align: center;
}

.ug-item + .ug-item {
  border-top: 1px solid var(--app-line-soft);
}

.ug-list-compact .ug-item + .ug-item {
  border-top: 0;
}

.ug-item-link {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  border-radius: 0.375rem;
  color: var(--app-ink);
}

.ug-item-link:hover {
  background: var(--app-surface-hover);
}

.ug-item-link > i {
  margin-top: 0.125rem;
  color: var(--app-ink-muted);
  font-size: 1.25rem;
}

.ug-item-link-compact {
  gap: 0.5rem;
  padding: 0.3125rem 0.25rem;
}

.ug-item-link-compact > i {
  font-size: 1rem;
}

.ug-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}

.ug-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ug-item-link-compact .ug-item-title {
  color: var(--app-ink-soft);
  font-size: 0.8125rem;
  font-weight: 400;
}

.ug-item-meta {
  color: var(--app-ink-muted);
  font-size: 0.75rem;
}

.ug-item-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--app-ink-soft);
  font-size: 0.8125rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Sekmeler başlığın tam yüksekliğini kaplar: alt çizgi kartın kenarına oturur. */
.ug-list-header {
  align-items: stretch;
}

.ug-tabs {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Negatif alt boşluk yok: overflow-x:auto dikeyde de kırpar, 1 px taşma boşuna kaydırma çubuğu açardı. */
.ug-tab {
  display: flex;
  align-items: center;
  padding: 0 0.125rem;
  border-bottom: 2px solid transparent;
  color: var(--app-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ug-tab:hover {
  color: var(--app-ink);
}

.ug-tab.is-active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.ug-filter {
  display: flex;
  flex: 1;
  align-self: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ug-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1280px) {
  .ug-article-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.ug-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  color: var(--app-ink-muted);
  font-size: 0.75rem;
}

.ug-path > i {
  font-size: 0.625rem;
}

.ug-path-link {
  color: var(--app-ink-soft);
}

.ug-path-link:hover {
  color: var(--primary);
}

.ug-article-title {
  color: var(--app-ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ug-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
  color: var(--app-ink-muted);
  font-size: 0.8125rem;
}

.ug-content {
  color: var(--app-ink);
  font-size: 0.9375rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Makale içi bağlantı (çoğunlukla panel sayfası, yeni sekmede): ziyaret edilmiş olsa da aynı renk. */
.ug-link,
.ug-link:visited {
  color: var(--app-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--app-link) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.ug-link:hover,
.ug-link:focus-visible {
  color: var(--app-link-hover);
  text-decoration-color: currentColor;
}

.ug-content > * + * {
  margin-top: 0.875rem;
}

.ug-h {
  color: var(--app-ink);
  font-weight: 600;
  line-height: 1.35;
}

.ug-content > .ug-h {
  margin-top: 1.5rem;
}

.ug-h1 { font-size: 1.375rem; }
.ug-h2 { font-size: 1.1875rem; }
.ug-h3 { font-size: 1.0625rem; }
.ug-h4 { font-size: 0.9375rem; }

.ug-ul,
.ug-ol {
  padding-inline-start: 1.5rem;
}

.ug-ul {
  list-style: disc;
}

.ug-ol {
  list-style: decimal;
}

.ug-ul li + li,
.ug-ol li + li {
  margin-top: 0.25rem;
}

.ug-content li > .ug-p + .ug-p {
  margin-top: 0.375rem;
}

.ug-quote {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--app-line);
  color: var(--app-ink-soft);
}

.ug-panel {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--app-info-line);
  border-radius: 0.5rem;
  background: var(--app-info-soft);
}

.ug-panel > i {
  margin-top: 0.25rem;
  color: var(--app-info-ink);
  font-size: 1.125rem;
}

.ug-panel-body {
  flex: 1;
  min-width: 0;
}

.ug-panel-body > * + * {
  margin-top: 0.5rem;
}

.ug-panel-warning {
  border-color: var(--app-warn-line);
  background: var(--app-warn-wash);
}

.ug-panel-warning > i {
  color: var(--app-warn-ink);
}

.ug-panel-error {
  border-color: var(--app-crit-line);
  background: var(--app-crit-wash);
}

.ug-panel-error > i {
  color: var(--app-crit-ink);
}

.ug-panel-success,
.ug-panel-tip {
  border-color: var(--app-good-soft);
  background: var(--app-good-soft);
}

.ug-panel-success > i,
.ug-panel-tip > i {
  color: var(--app-good-ink);
}

.ug-panel-note {
  border-color: var(--app-line);
  background: var(--app-surface-sunken);
}

.ug-panel-note > i {
  color: var(--app-ink-soft);
}

.ug-code {
  overflow-x: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--app-line-soft);
  border-radius: 0.5rem;
  background: var(--app-surface-sunken);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
}

.ug-content :not(pre) > code {
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  background: var(--app-surface-sunken);
  font-size: 0.85em;
}

.ug-hr {
  border: 0;
  border-top: 1px solid var(--app-line);
}

.ug-table-wrap {
  overflow-x: auto;
}

.ug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ug-table th,
.ug-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-line);
  text-align: start;
  vertical-align: top;
}

.ug-table th {
  background: var(--app-surface-sunken);
  font-weight: 600;
}

.ug-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.ug-zoom {
  display: block;
  max-width: 100%;
  cursor: zoom-in;
}

.ug-image,
.ug-video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--app-line-soft);
  border-radius: 0.5rem;
}

.ug-video {
  width: 100%;
  background: var(--app-surface-sunken);
}

.ug-caption {
  color: var(--app-ink-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.ug-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--app-line);
  border-radius: 0.5rem;
  color: var(--app-ink);
  font-size: 0.8125rem;
}

.ug-file:hover {
  background: var(--app-surface-hover);
}

.ug-file > i {
  color: var(--primary);
  font-size: 1.125rem;
}

.ug-file-size {
  color: var(--app-ink-muted);
}

.ug-expand {
  border: 1px solid var(--app-line);
  border-radius: 0.5rem;
}

.ug-expand > summary {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  font-weight: 500;
}

.ug-expand-body {
  padding: 0 0.875rem 0.875rem;
}

.ug-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
}

.ug-sync-intro {
  margin-bottom: 1.25rem;
  color: var(--app-ink-soft);
  font-size: 0.875rem;
}

/* Durdurulan toplu kaldırma: makaleler yerinde, root onayı bekleniyor. */
.ug-sync-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--app-warn-line);
  border-radius: 0.75rem;
  background: var(--app-warn-wash);
  color: var(--app-ink);
  font-size: 0.875rem;
}

.ug-sync-alert[hidden] {
  display: none;
}

.ug-sync-alert > i {
  margin-top: 0.125rem;
  color: var(--app-warn-ink);
  font-size: 1.25rem;
}

.ug-sync-alert-text {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ug-sync-alert-note {
  color: var(--app-warn-ink);
  font-weight: 500;
}

.ug-sync-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .ug-sync-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ug-sync-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.ug-sync-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.ug-sync-label {
  color: var(--app-ink-muted);
  font-size: 0.8125rem;
}

.ug-sync-value {
  color: var(--app-ink);
  font-weight: 500;
}

.ug-sync-error {
  color: var(--app-crit-ink);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.ug-sync-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.ug-sync-metric {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ug-sync-metric > i {
  color: var(--primary);
  font-size: 1.25rem;
}

.ug-sync-metric-value {
  color: var(--app-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

.ug-col-key {
  width: 7rem;
  white-space: nowrap;
}

.ug-col-title {
  min-width: 14rem;
}

.ug-col-message {
  min-width: 18rem;
}

.ug-table-empty {
  padding: 2rem 0;
  color: var(--app-ink-muted);
  text-align: center;
}

/* Sorun Bildir penceresinin başındaki Kullanıcı Rehberi ipucu. */
.support-guide-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--app-info-soft);
  color: var(--app-info-ink);
  font-size: 0.8125rem;
}

.support-guide-hint > i {
  margin-top: 0.125rem;
  font-size: 1rem;
}

/* Root: rehber başlığında son başarılı eşitleme zamanı; hata varsa kırmızı nokta. */
.ug-sync-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--app-ink-soft);
  font-size: 0.8125rem;
}

.ug-sync-hint::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--app-good);
}

.ug-sync-hint.is-error {
  color: var(--app-crit-ink);
}

.ug-sync-hint.is-error::before {
  background: var(--app-crit);
}

.tour-layer {
  position: fixed;
  inset: 0;
  z-index: 1060;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.tour-layer.is-open {
  opacity: 1;
}

.tour-layer.is-centered {
  background-color: var(--app-scrim);
}

.tour-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--primary) 70%, transparent),
    0 0 0 200vmax var(--app-scrim);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
}

.tour-layer.is-centered .tour-spot {
  opacity: 0;
}

.tour-pop {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(22.5rem, calc(100vw - 1.5rem));
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 18px 48px rgba(7, 20, 55, 0.28);
  transition: top 0.25s ease, left 0.25s ease;
}

.tour-layer.is-centered .tour-pop {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tour-pop-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--app-ink-muted);
}

.tour-pop-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--app-ink);
}

.tour-pop-body {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--app-ink-soft);
}

.tour-pop-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-link);
}

.tour-pop-more:hover {
  color: var(--app-link-hover);
}

.tour-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.tour-pop-nav {
  display: flex;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.tour-pop-autooff {
  align-self: flex-start;
  font-size: 0.75rem;
  color: var(--app-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tour-pop-autooff:hover {
  color: var(--app-ink-soft);
}

@media (max-width: 40rem) {
  .tour-layer:not(.is-centered) .tour-pop {
    top: auto;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-layer,
  .tour-spot,
  .tour-pop {
    transition: none;
  }
}

.page-header-actions .tour-help-btn i {
  font-size: 1.25rem;
}

.map-tour-btn i {
  font-size: 1.125rem;
  color: var(--app-ink-soft);
}

.map-fullpage .map-tour-btn i {
  color: #fff;
}

.kt-modal:has(> .tour-article) {
  padding: 0;
  overflow: hidden;
}

.kt-modal > .kt-modal-content.tour-article {
  width: min(35rem, 100%);
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

.kt-modal .kt-modal-content.tour-article {
  transform: translateX(2rem);
}

.kt-modal.open .kt-modal-content.tour-article {
  transform: none;
}

.tour-article .kt-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.tour-article-open {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-link);
}

.tour-article-open:hover {
  color: var(--app-link-hover);
}

.tour-article-error {
  color: var(--app-crit-ink);
  font-size: 0.875rem;
}

.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);
}