/* ==========================================================================
   SAHA İKİZİ (K.66) — modül kabuğu: üst çubuk (52 px, koyu), süzgeç çubuğu
   (44 px), üç sütun (sol panel · harita · sağ panel), zaman şeridi; duvar ekranı.

   GÖRSEL DİL (TASARIM §3): Segoe UI (uygulamanın --font-sans'ı; Inter yüklü
   değil), rakamlar tabular, emoji yok (ikonlar Ikon bileşeni). Renk sözlüğü
   BELİRTEÇTİR — harita motoru (js/sahaikizi/motor.js) aynı değerleri
   getComputedStyle ile okur; renk tek yerde kalır.

   ⚠️ YAZI ÖLÇEĞİ YALNIZ DEĞİŞKENLE (pwa-yazi-olcegi-saha): temel kurallar
   var(--si-*-yazi, mobil-varsayılan) okur; masaüstü ölçeği tema.css 5b'de
   değişken olarak atanır. Burada daha güçlü seçiciyle boyut YAZILMAZ.

   Kırılımlar: ≥ 1200 üç sütun (sol %13,5 · sağ %16,5 → harita modül
   genişliğinin %70'i); < 1200 sağ panel çekmece; < 760 tek sütun.
   ========================================================================== */

:root {
  /* Yüzeyler — uygulama belirteçlerine bağlı (palet ve koyu kip izler). */
  --si-zemin: var(--zemin, #F2F5F9);
  --si-yuzey: var(--yuzey, #ffffff);
  --si-yuzey-2: var(--yuzey-2, #F7FAFD);
  --si-kenar: var(--kenar, #DCE6F0);
  --si-metin: var(--metin, #1F2A37);
  --si-metin-2: var(--metin-2, #4A5A6E);
  --si-metin-3: var(--metin-3, #7B8CA0);
  --si-vurgu: #0F766E;
  --si-vurgu-acik: #E6F4F1;
  --si-odak: #2563EB;

  /* Üst çubuk her iki temada koyu (komuta ekranı; maket). */
  --si-ust-zemin: #0F172A;
  --si-ust-metin: #E2E8F0;
  --si-ust-ikincil: #94A3B8;
  --si-ust-kenar: rgba(148, 163, 184, .22);
  --si-ust-etkin-zemin: rgba(255, 255, 255, .12);

  /* Harita yuvası (motor gelene kadar / altlık yokken gri zemin). */
  --si-harita-zemin: #E5E9EF;
  --si-harita-ust: rgba(255, 255, 255, .94);

  /* Durum sözlüğü (§3) — renk + şekil birlikte; motor da bunları okur. */
  --si-durum-surus: #2563EB;
  --si-durum-ziyaret: #16A34A;
  --si-durum-bosta: #D97706;
  --si-durum-sinyal: #94A3B8;
  --si-durum-sahte: #DC2626;
  --si-durum-mola: #CBD5E1;
  --si-durum-depo: #0F766E;

  /* Olay sözlüğü (§3). */
  --si-olay-satis: #22C55E;
  --si-olay-tahsilat: #EAB308;
  --si-olay-iade: #F97316;
  --si-olay-siparis: #38BDF8;
  --si-olay-ziyaret: #A855F7;
  --si-olay-ihlal: #DC2626;

  /* Canlı rozeti. */
  --si-canli: #22C55E;
  --si-bayat: #F59E0B;
}

/* Koyu kip: sistem tercihi (açık palet seçilmemişse) ve "koyu" paleti. */
@media (prefers-color-scheme: dark) {
  :root:not(.tema-acik) {
    --si-vurgu: #2DD4BF;
    --si-vurgu-acik: rgba(45, 212, 191, .14);
    --si-odak: #60A5FA;
    --si-ust-zemin: #070D1A;
    --si-harita-zemin: #0B1220;
    --si-harita-ust: rgba(15, 23, 42, .92);
    --si-durum-mola: #475569;
  }
}
:root.tema-koyu {
  --si-vurgu: #2DD4BF;
  --si-vurgu-acik: rgba(45, 212, 191, .14);
  --si-odak: #60A5FA;
  --si-ust-zemin: #070D1A;
  --si-harita-zemin: #0B1220;
  --si-harita-ust: rgba(15, 23, 42, .92);
  --si-durum-mola: #475569;
}

/* Sayfa kabından taşma payı kaldırılır (harita kenara kadar). Masaüstü kabuğunda içerik sütunu ekran yüksekliğine
   bağlanır ve modül kalan alanı doldurur — üst şeridin (ve varsa lisans bandının) yüksekliği sabit yazılmaz. */
.sayfa:has(> .si-kabuk), .sayfa:has(> .si-kilit) { padding: 0; }
.icerik:has(> main.sayfa > .si-kabuk) { height: 100dvh; }
main.sayfa:has(> .si-kabuk) { display: flex; flex-direction: column; min-height: 0; overflow: auto; }

/* ================================================================ KABUK */
.si-kabuk {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 560px;
  background: var(--si-zemin);
  color: var(--si-metin);
  font-family: var(--font-sans, 'Segoe UI', system-ui, sans-serif);
  font-size: var(--si-yazi, 14px);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  position: relative;
}
.si-kabuk *, .si-tv * { box-sizing: border-box; }

/* Ekran okuyucu etiketi (ör. üst çubukta "Gün"): görünmez, okunur. Kabuk ikizfabrika.css'e bağlı kalmasın diye burada da. */
.gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ ÜST ÇUBUK */
.si-ust {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  height: 52px; padding: 0 14px; min-width: 0;
  background: var(--si-ust-zemin); color: var(--si-ust-metin);
}
.si-marka {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: #fff; text-decoration: none; font-weight: 700; font-size: var(--si-marka-yazi, 16px); letter-spacing: -.01em;
}
.si-marka-isaret {
  width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #2DD4BF, #2563EB);
}
.si-masalar {
  display: flex; gap: 2px; padding: 3px; border-radius: 10px; min-width: 0;
  background: rgba(255, 255, 255, .06);
}
.si-masa {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border-radius: 8px; color: var(--si-ust-ikincil);
  text-decoration: none; font-weight: 600; font-size: var(--si-yazi, 14px);
}
.si-masa svg { width: 15px; height: 15px; }
.si-masa:hover { color: #fff; }
.si-masa.etkin { background: var(--si-ust-etkin-zemin); color: #fff; }
.si-masa.kilitli { opacity: .55; cursor: not-allowed; }
.si-masa:focus-visible, .si-ust-dg:focus-visible, .si-marka:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 2px; }
.si-ust-bosluk { flex: 1; min-width: 0; }

.si-canli {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600;
  background: rgba(255, 255, 255, .07); color: var(--si-ust-metin);
}
.si-canli-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--si-ust-ikincil); }
.si-canli-acik .si-canli-nokta { background: var(--si-canli); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.si-canli-bayat .si-canli-nokta { background: var(--si-bayat); }
.si-canli-bayat { color: #FCD34D; }

.si-tarih {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: var(--si-ust-metin);
}
.si-tarih svg { width: 15px; height: 15px; color: var(--si-ust-ikincil); }
.si-tarih input {
  border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--si-kucuk-yazi, 12.5px);
  font-weight: 600; color-scheme: dark; min-width: 0; width: 128px; padding: 3px 0;
}
.si-tarih input:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 2px; border-radius: 4px; }

.si-ust-sarmal { position: relative; flex-shrink: 0; }
.si-ust-dg {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--si-ust-kenar);
  background: transparent; color: var(--si-ust-metin); text-decoration: none; cursor: pointer;
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600;
}
.si-ust-dg svg { width: 15px; height: 15px; }
.si-ust-dg:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* --------------------------------------- MODÜL ÇUBUĞU: UYGULAMA ARAÇLARI (K.66 modül bağlamı)
   Uygulamanın 72 px üst şeridi modülde çizilmez (MainLayout.Modul.cs); arama, İkiz Fabrika, rozetler, görünüm,
   yardım ve kullanıcı menüsü buraya 30 px simge olarak gelir. Yan menü çekmecesinin düğmesi yalnız ≤ 1024 px. */
.si-ust-araclar { display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--si-ust-kenar); }
.si-ust-ik {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex-shrink: 0;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; border: 0; cursor: pointer;
  background: transparent; color: var(--si-ust-ikincil); text-decoration: none; font: inherit;
}
.si-ust-ik svg { width: 16px; height: 16px; }
.si-ust-ik:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.si-ust-ik:focus-visible, .si-ust-avatar:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 2px; }
.si-ust-ik b { font-size: 11px; font-weight: 700; color: #fff; }
.si-ust-ikiz { color: #5EEAD4; }
.si-ust-hata { color: #FCD34D; }
.si-ust-menu { display: none; }
.si-ust-gorunum .gorunum-cip { min-height: 30px; height: 30px; padding: 0 8px; gap: 0; border-color: transparent; background: transparent; }
.si-ust-gorunum .gorunum-cip:hover { background: rgba(255, 255, 255, .08); }
.si-ust-gorunum .gorunum-cip .etiket { display: none; }
.si-ust-gorunum .gorunum-renk { box-shadow: 0 0 0 2px var(--si-ust-zemin), 0 0 0 3px rgba(148, 163, 184, .6); }
.si-ust-gorunum .gorunum-panel { color: var(--metin); }
.si-ust-kullanici { position: relative; flex-shrink: 0; margin-left: 4px; }
.si-ust-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: #0F766E; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.si-ust-kullanici-menu { z-index: 61; color: var(--metin); }
.si-ust-kullanici-bas { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 10px; border-bottom: 1px solid var(--kenar); margin-bottom: 4px; }
.si-ust-kullanici-bas b { font-size: 13.5px; }
.si-ust-kullanici-bas span { font-size: 11.5px; color: var(--metin-3); }
/* APK düğmesi menü satırı gibi görünür (bileşen ve QR kipliği aynı kalır). */
.si-ust-apk .apk-dugme { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--metin); font-size: 14px; min-height: 0; }
.si-ust-apk .apk-dugme:hover { background: var(--yuzey-2); }
@media (max-width: 1024px) { .si-ust-menu { display: inline-flex; } }

/* -------------------------------------------------------- SÜZGEÇ ÇUBUĞU */
.si-suzgec {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 44px; padding: 6px 14px; min-width: 0;
  background: var(--si-yuzey); border-bottom: 1px solid var(--si-kenar);
}
.si-suzgec-cipler { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.si-suzgec-sag { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }

/* Tek satır (≥ 760 px): sığmayan çipler sondan "Diğer" altına iner (kabuk.js suzgecSigdir → data-tasan). */
.si-diger { display: none; }
.si-diger .si-diger-panel { left: auto; right: 0; }
.si-diger-panel { padding: 8px; gap: 6px; min-width: 240px; max-height: none; overflow: visible; }
.si-diger-panel .si-cip { width: 100%; max-width: none; justify-content: flex-start; }
.si-diger-panel .si-cip-ok { margin-left: auto; }
@media (min-width: 760px) {
  .si-suzgec { flex-wrap: nowrap; }
  .si-suzgec-cipler { flex-wrap: nowrap; }
  .si-suzgec-cipler > .si-cip-sarmal { flex-shrink: 0; }
  .si-suzgec-sag { flex-wrap: nowrap; flex-shrink: 1; }
  .si-suzgec-sag .si-cip-sarmal { flex-shrink: 0; }
  .si-ara { min-width: 130px; flex: 1 1 auto; }
  .si-ara input { width: clamp(90px, 13vw, 220px); }
  .si-suzgec:not([data-tasan="0"]) .si-diger { display: block; }
  .si-suzgec[data-tasan="1"] .si-suzgec-cipler > .si-cip-sarmal:nth-last-child(-n+2):not(.si-diger),
  .si-suzgec[data-tasan="2"] .si-suzgec-cipler > .si-cip-sarmal:nth-last-child(-n+3):not(.si-diger),
  .si-suzgec[data-tasan="3"] .si-suzgec-cipler > .si-cip-sarmal:nth-last-child(-n+4):not(.si-diger),
  .si-suzgec[data-tasan="4"] .si-suzgec-cipler > .si-cip-sarmal:nth-last-child(-n+5):not(.si-diger),
  .si-suzgec[data-tasan="5"] .si-suzgec-cipler > .si-cip-sarmal:nth-last-child(-n+6):not(.si-diger) { display: none; }
  .si-suzgec[data-tasan="1"] .si-diger-panel > .si-cip-sarmal:not(:nth-last-child(-n+1)),
  .si-suzgec[data-tasan="2"] .si-diger-panel > .si-cip-sarmal:not(:nth-last-child(-n+2)),
  .si-suzgec[data-tasan="3"] .si-diger-panel > .si-cip-sarmal:not(:nth-last-child(-n+3)),
  .si-suzgec[data-tasan="4"] .si-diger-panel > .si-cip-sarmal:not(:nth-last-child(-n+4)) { display: none; }
}

.si-cip-sarmal { position: relative; min-width: 0; }
.si-cip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  height: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--si-kenar); background: var(--si-yuzey); color: var(--si-metin);
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px);
}
.si-cip:hover:not(:disabled) { border-color: var(--si-metin-3); }
.si-cip:disabled { opacity: .6; cursor: default; }
.si-cip:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 1px; }
.si-cip-etiket { color: var(--si-metin-3); }
.si-cip-deger { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-cip-dolu { border-color: var(--si-vurgu); background: var(--si-vurgu-acik); }
.si-cip-ok { width: 13px !important; height: 13px !important; transform: rotate(90deg); color: var(--si-metin-3); flex-shrink: 0; }

.si-perde { position: fixed; inset: 0; z-index: 40; }
.si-acilir {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 41;
  min-width: 220px; max-width: min(320px, calc(100vw - 24px)); max-height: 360px;
  display: flex; flex-direction: column;
  background: var(--si-yuzey); color: var(--si-metin); border: 1px solid var(--si-kenar); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  font-size: var(--si-yazi, 14px);
}
.si-acilir-sag { left: auto; right: 0; }
.si-acilir-ara { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--si-kenar); }
.si-acilir-ara svg { width: 14px; height: 14px; color: var(--si-metin-3); }
.si-acilir-ara input { border: 0; outline: 0; background: transparent; color: inherit; font: inherit; width: 100%; }
.si-acilir-liste { overflow: auto; padding: 4px; }
.si-acilir-oge { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.si-acilir-oge:hover { background: var(--si-yuzey-2); }
.si-acilir-oge input { accent-color: var(--si-vurgu); margin: 0; }
.si-acilir-bolum { padding: 8px 8px 4px; font-size: var(--si-baslik-yazi, 11.5px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--si-metin-3); }
.si-acilir-yok { padding: 10px; color: var(--si-metin-3); }
.si-acilir-alt { padding: 6px 10px; border-top: 1px solid var(--si-kenar); text-align: right; }
.si-acilir-eylem {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.si-acilir-eylem:hover { background: var(--si-yuzey-2); }
.si-acilir-eylem svg { width: 15px; height: 15px; color: var(--si-metin-2); }

.si-metin-dg {
  border: 0; background: transparent; padding: 2px 4px; cursor: pointer;
  color: var(--si-vurgu); font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600;
}
.si-metin-dg:disabled { color: var(--si-metin-3); cursor: default; }

.si-ara {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; min-width: 0;
  border: 1px solid var(--si-kenar); border-radius: 8px; background: var(--si-yuzey);
}
.si-ara svg { width: 14px; height: 14px; color: var(--si-metin-3); flex-shrink: 0; }
.si-ara input { border: 0; outline: 0; background: transparent; color: var(--si-metin); font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); width: 220px; min-width: 0; }
.si-ara:focus-within { border-color: var(--si-odak); }

.si-serit { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-serit svg { width: 15px; height: 15px; flex-shrink: 0; }
.si-serit-uyari { background: #FEF3C7; color: #92400E; }
:root.tema-koyu .si-serit-uyari { background: rgba(245, 158, 11, .15); color: #FCD34D; }
@media (prefers-color-scheme: dark) { :root:not(.tema-acik) .si-serit-uyari { background: rgba(245, 158, 11, .15); color: #FCD34D; } }

/* ---------------------------------------------------------------- GÖVDE */
.si-govde {
  display: grid; position: relative; flex: 1; min-height: 0; min-width: 0;
  grid-template-columns: minmax(240px, 13.5%) minmax(0, 1fr) minmax(272px, 16.5%);
}
.si-sol, .si-sag {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--si-yuzey);
}
.si-sol { border-right: 1px solid var(--si-kenar); }
.si-sag { border-left: 1px solid var(--si-kenar); }
.si-panel-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px 8px; color: var(--si-metin-2);
  font-size: var(--si-baslik-yazi, 11.5px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.si-panel-govde { flex: 1; min-height: 0; overflow: auto; padding: 0 12px 14px; }
.si-orta { position: relative; min-width: 0; min-height: 0; }
.si-sag-kapat, .si-sag-ac { display: none; }
.si-sag-kapat { border: 0; background: transparent; color: var(--si-metin-2); cursor: pointer; padding: 4px; border-radius: 6px; }

/* ---------------------------------------------------------- HARİTA YUVASI */
.si-harita { position: absolute; inset: 0; background: var(--si-harita-zemin); overflow: hidden; }
.si-harita-tuval { position: absolute; inset: 0; }
.si-harita-yukleniyor {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--si-harita-ust); color: var(--si-metin-2); box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
  font-size: var(--si-yazi, 14px); font-weight: 600;
}
.si-harita-hata {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px;
  background: var(--si-harita-ust); color: var(--si-metin); font-size: var(--si-kucuk-yazi, 12.5px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
}
.si-harita-hata svg { width: 15px; height: 15px; color: var(--si-bayat); flex-shrink: 0; }
.si-harita-araclar { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.si-harita-dg {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--si-kenar); background: var(--si-harita-ust); color: var(--si-metin);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}
.si-harita-dg svg { width: 17px; height: 17px; }
.si-harita-dg.etkin { background: var(--si-vurgu); border-color: var(--si-vurgu); color: #fff; }
.si-harita-dg:disabled { opacity: .5; cursor: default; }
.si-harita-dg:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 2px; }
.si-katman-menu {
  position: absolute; top: 12px; right: 56px; z-index: 4; width: 210px; padding: 8px;
  background: var(--si-yuzey); border: 1px solid var(--si-kenar); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.si-katman-baslik { padding: 4px 6px 6px; font-size: var(--si-baslik-yazi, 11.5px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--si-metin-3); }
.si-katman-oge { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; }
.si-katman-oge:hover { background: var(--si-yuzey-2); }
.si-katman-oge input { accent-color: var(--si-vurgu); margin: 0; }
/* Lejant motorun ölçek çubuğunun (sol alt, MapLibre) ÜSTÜNDE durur: çubuk ~22 px + pay. */
.si-lejant {
  position: absolute; left: 12px; bottom: 40px; z-index: 2; max-width: calc(100% - 24px);
  padding: 7px 12px; border-radius: 9px; background: var(--si-harita-ust); font-size: var(--si-kucuk-yazi, 12.5px);
}

/* ------------------------------------------------------------- PANELLER */
.si-bos { display: flex; gap: 12px; padding: 12px; margin-bottom: 12px; border: 1px dashed var(--si-kenar); border-radius: 10px; background: var(--si-yuzey-2); }
.si-bos-ikon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--si-vurgu-acik); color: var(--si-vurgu); }
.si-bos-ikon svg { width: 18px; height: 18px; }
.si-bos-govde { min-width: 0; }
.si-bos-baslik { font-weight: 700; margin-bottom: 4px; }
.si-bos-metin { margin: 0; color: var(--si-metin-2); line-height: 1.5; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-bos-eylemler { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.si-bos-bag { display: inline-flex; align-items: center; gap: 5px; color: var(--si-vurgu); font-weight: 600; text-decoration: none; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-bos-bag svg { width: 13px; height: 13px; }
.si-bos-bag:hover { text-decoration: underline; }

.si-bolum-baslik { margin: 14px 2px 8px; font-size: var(--si-baslik-yazi, 11.5px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--si-metin-2); }
.si-satir-bos { display: flex; align-items: center; gap: 8px; padding: 10px 2px; color: var(--si-metin-3); }
.si-liste-ust { margin: 2px 2px 6px; color: var(--si-metin-3); font-size: var(--si-kucuk-yazi, 12.5px); }
.si-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.si-liste-oge {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--si-metin); text-decoration: none; text-align: left;
  font: inherit; cursor: pointer;
}
.si-liste-oge:hover { background: var(--si-yuzey-2); }
.si-liste-oge.secili { background: var(--si-vurgu-acik); border-color: var(--si-vurgu); }
.si-liste-oge:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 1px; }
.si-liste-ad { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-liste-alt { color: var(--si-metin-3); font-size: var(--si-kucuk-yazi, 12.5px); flex-shrink: 0; }
.si-liste-ok { width: 14px !important; height: 14px !important; color: var(--si-metin-3); flex-shrink: 0; }
.si-plaka { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.si-avatar {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #1E293B; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.si-avatar svg { width: 15px; height: 15px; }
.si-avatar-bolge { border-radius: 8px; background: var(--si-vurgu); }
.si-avatar-arac { background: var(--si-durum-depo); }
.si-avatar-buyuk { width: 44px; height: 44px; font-size: 15px; }
.si-secili-kart { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.si-secili-ad { font-weight: 700; font-size: var(--si-buyuk-yazi, 16px); }

/* ---------------------------------------------------------- ZAMAN ŞERİDİ / GÜN TEKRARI (WP5)
   Üst satır: oynat · başlık/an · hız (1× 10× 60× 300×) · olaydan olaya · Şimdi · olay lejantı. Gövde: ad sütunu +
   kişi şeritleri (durum blokları + olay çentikleri), saat ekseni, an imleci (sürüklenir), bugünse gerçek "şimdi" (kırmızı)
   ve sonrası taralı. Yalın kip (Komuta): yalnız saat sürgüsü. */
.si-zaman { flex-shrink: 0; background: var(--si-yuzey); border-top: 1px solid var(--si-kenar); padding: 8px 14px 10px; min-width: 0; }
.si-zs { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.si-zs-ust { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; min-width: 0; }
.si-zs-oynat {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--si-vurgu); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--si-vurgu) 35%, transparent);
}
.si-zs-oynat svg { width: 15px; height: 15px; }
.si-zs-oynat.etkin { background: var(--si-metin); }
.si-zs-oynat:focus-visible, .si-zs-hiz:focus-visible, .si-zs-dg:focus-visible, .si-zs-iz:focus-visible { outline: 2px solid var(--si-odak); outline-offset: 2px; }
.si-zs-bilgi { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.si-zs-baslik { font-weight: 700; white-space: nowrap; }
.si-zs-an { color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); white-space: nowrap; }
.si-zs-aralik { color: var(--si-metin-3); }
.si-zs-hizlar { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--si-yuzey-2); border: 1px solid var(--si-kenar); }
.si-zs-hiz {
  border: 0; background: transparent; color: var(--si-metin-2); cursor: pointer; padding: 3px 9px; border-radius: 6px;
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600; font-variant-numeric: tabular-nums;
}
.si-zs-hiz.etkin { background: var(--si-yuzey); color: var(--si-metin); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.si-zs-atla { display: inline-flex; gap: 4px; }
.si-zs-dg {
  display: grid; place-items: center; width: 30px; height: 28px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--si-kenar); background: var(--si-yuzey); color: var(--si-metin);
}
.si-zs-dg svg { width: 14px; height: 14px; }
.si-zs-dg:disabled { opacity: .4; cursor: default; }
.si-zs-simdi { white-space: nowrap; }
.si-zs-lejant { display: inline-flex; gap: 10px; margin-left: auto; flex-wrap: wrap; padding: 3px 10px; border-radius: 999px; background: var(--si-yuzey-2); border: 1px solid var(--si-kenar); }
.si-zs-lejant-oge { display: inline-flex; align-items: center; gap: 5px; color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); white-space: nowrap; }
.si-olay-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--si-metin-3); }

.si-olay-satis { --si-olay: var(--si-olay-satis); }
.si-olay-tahsilat { --si-olay: var(--si-olay-tahsilat); }
.si-olay-iade { --si-olay: var(--si-olay-iade); }
.si-olay-siparis { --si-olay: var(--si-olay-siparis); }
.si-olay-ziyaret { --si-olay: var(--si-olay-ziyaret); }
.si-olay-ihlal { --si-olay: var(--si-olay-ihlal); }
.si-olay-yukleme { --si-olay: var(--si-durum-depo); }
.si-olay-diger { --si-olay: var(--si-metin-3); }
i.si-olay-nokta[class*="si-olay-"] { background: var(--si-olay, var(--si-metin-3)); }

.si-zs-govde {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 10px;
  max-height: calc(18px + var(--si-zs-satir-sayi, 3) * 24px); overflow-y: auto; overflow-x: hidden;
}
.si-zs-adlar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.si-zs-eksen-bos { height: 12px; flex-shrink: 0; }
.si-zs-ad {
  display: flex; align-items: center; gap: 6px; height: 18px; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--si-metin-2); font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); text-align: left;
}
.si-zs-ad span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-zs-ad.secili { color: var(--si-metin); font-weight: 700; }
.si-zs-ad:hover span { text-decoration: underline; }
.si-zs-ad-renk { width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.si-zs-iz { position: relative; min-width: 0; cursor: ew-resize; touch-action: pan-y; user-select: none; padding-bottom: 2px; }
.si-zs-iz.surukleniyor { cursor: grabbing; }
.si-zs-iz .si-zs-eksen { position: relative; left: 0; right: 0; bottom: auto; height: 12px; margin-bottom: 6px; }
.si-zs-eksen { position: absolute; left: 8px; right: 8px; bottom: 0; height: 12px; }
.si-zs-eksen span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; line-height: 12px; color: var(--si-metin-3); }
.si-zs-satirlar { display: flex; flex-direction: column; gap: 6px; }
.si-zs-satir { position: relative; height: 18px; border-radius: 5px; background: var(--si-yuzey-2); overflow: hidden; }
.si-zs-satir.secili { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--si-vurgu) 55%, transparent); }
.si-zs-blok { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--si-zs-renk, var(--si-metin-3)); opacity: .34; }
.si-zs-satir.secili .si-zs-blok { opacity: .5; }
.si-zs-blok-surus { --si-zs-renk: var(--si-durum-surus); }
.si-zs-blok-ziyaret { --si-zs-renk: var(--si-durum-ziyaret); }
.si-zs-blok-bosta { --si-zs-renk: var(--si-durum-bosta); opacity: .55; }
.si-zs-blok-sinyal { --si-zs-renk: var(--si-durum-sinyal); background: repeating-linear-gradient(135deg, var(--si-durum-sinyal) 0 3px, transparent 3px 6px); opacity: .7; }
.si-zs-blok-sahte { --si-zs-renk: var(--si-durum-sahte); opacity: .6; }
.si-zs-blok-depo { --si-zs-renk: var(--si-durum-depo); }
.si-zs-blok-mola { --si-zs-renk: var(--si-durum-mola); opacity: .5; }
.si-zs-blok-kapali { opacity: .18 !important; }
.si-zs-centik { position: absolute; top: 1px; bottom: 1px; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: var(--si-olay, var(--si-metin-3)); }
.si-zs-gelecek {
  position: absolute; top: 18px; bottom: 0; right: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--si-yuzey) 70%, transparent) 0 4px, color-mix(in srgb, var(--si-kenar) 45%, transparent) 4px 8px);
}
.si-zs-gercek-simdi { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #DC2626; pointer-events: none; }
.si-zs-imlec { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--si-metin); pointer-events: none; }
.si-zs-imlec-saat {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 4px;
  background: var(--si-metin); color: var(--si-yuzey); font-size: 10.5px; font-weight: 700; line-height: 13px; white-space: nowrap;
}
.si-zs-yalin .si-zs-surgu { position: relative; padding-bottom: 14px; }
.si-zs-surgu input[type=range] { width: 100%; accent-color: var(--si-vurgu); margin: 0; }

/* ============================================================ BÖLGE MASASI (WP6b) */

/* Durum renk sınıfları (avatar noktası, dağılım çubuğu, hap). */
.si-d-surus { background: var(--si-durum-surus); }
.si-d-ziyaret { background: var(--si-durum-ziyaret); }
.si-d-bosta { background: var(--si-durum-bosta); }
.si-d-sinyal { background: var(--si-durum-sinyal); }
.si-d-sahte { background: var(--si-durum-sahte); }
.si-d-depo { background: var(--si-durum-depo); }
.si-d-mola { background: var(--si-durum-mola); }

/* Bölge masası sütunları: ekip satırı ad + plaka + durum hapı + net/durak taşıyacak genişlikte (maket 1920: 320 px). */
.si-masa-bolge .si-govde { grid-template-columns: minmax(296px, 17%) minmax(0, 1fr) minmax(300px, 18.5%); }

/* ---------------------------------------------------------- GÖSTERGE KARTLARI */
.si-kpi-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 12px; }
.si-kpi {
  min-width: 0; padding: 9px 11px 10px; border-radius: 10px; border: 1px solid var(--si-kenar); background: var(--si-yuzey);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.si-kpi-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; min-width: 0; margin-top: 1px; }
.si-kpi-ust .si-kpi-alt { margin-top: 0; min-width: 0; }
.si-kpi-ad { color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-kpi-deger { font-size: var(--si-kpi-deger-yazi, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin-top: 3px; white-space: nowrap; }
.si-kpi .si-kivilcim { width: 46px; height: 18px; }
/* Bağlam satırı kırpılmaz ("99/114 du…"): dar kartta kıvılcımın yanında iki satıra iner. */
.si-kpi-alt { color: var(--si-metin-3); font-size: 11.5px; margin-top: 1px; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.si-kpi-cubuk { height: 4px; border-radius: 3px; background: var(--si-yuzey-2); margin-top: 7px; overflow: hidden; }
.si-kpi-cubuk span { display: block; height: 100%; border-radius: 3px; }

.si-kivilcim { width: 62px; height: 22px; flex-shrink: 0; overflow: visible; }
.si-kivilcim-cizgi { fill: none; stroke: var(--si-kivilcim-renk); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.si-kivilcim-alan { fill: color-mix(in srgb, var(--si-kivilcim-renk) 14%, transparent); stroke: none; }
.si-kivilcim-son { fill: var(--si-kivilcim-renk); }

/* ---------------------------------------------------------- EKİP LİSTESİ */
.si-ekip-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.si-ekip-sayi { color: var(--si-metin-3); font-size: var(--si-kucuk-yazi, 12.5px); }
.si-ekip-sorunlu { color: var(--si-durum-sahte); font-weight: 600; }
.si-kiyas-dg {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--si-kenar); background: var(--si-yuzey); color: var(--si-metin-2);
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600; white-space: nowrap;
}
.si-kiyas-dg svg { width: 14px; height: 14px; }
.si-kiyas-dg.etkin { border-color: var(--si-vurgu); background: var(--si-vurgu-acik); color: var(--si-vurgu); }
.si-kiyas-dg:disabled { opacity: .5; cursor: default; }
.si-kiyas-ipucu { margin: 0 2px 8px; padding: 6px 9px; border-radius: 8px; background: var(--si-vurgu-acik); color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); }

.si-ekip { list-style: none; margin: 0 -4px 10px; padding: 0; display: flex; flex-direction: column; }
.si-ekip > li + li { border-top: 1px solid var(--si-kenar); }
.si-ekip-satir {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 9px 8px 9px 10px;
  border: 0; background: transparent; color: var(--si-metin); text-align: left; font: inherit; cursor: pointer; border-radius: 8px;
}
.si-ekip-satir:hover { background: var(--si-yuzey-2); }
.si-ekip-satir.secili { background: var(--si-vurgu-acik); }
.si-ekip-satir.secili::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--si-kiyas-renk, var(--si-vurgu)); }
.si-ekip-satir:focus-visible { outline: 2px solid var(--si-odak); outline-offset: -2px; }
.si-ekip-satir .si-avatar { position: relative; width: 34px; height: 34px; font-size: 12px; }
.si-avatar-durum {
  position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--si-yuzey);
}
.si-ekip-satir.secili .si-avatar-durum { border-color: var(--si-vurgu-acik); }
.si-ekip-orta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
/* Plaka kırpılmaz ("16 NLF 0…" anlamsızdı): ada yan yana sığmazsa alt satıra iner. */
.si-ekip-ad { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; row-gap: 0; min-width: 0; }
.si-ekip-ad b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 100%; }
.si-ekip-ad small { color: var(--si-metin-3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.si-kipi-kiyas .si-ekip-ad small, .si-kipi-kiyas .si-hap-istisna { display: none; }
.si-ekip-durum { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.si-ekip-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.si-ekip-net { font-weight: 700; white-space: nowrap; }
.si-ekip-sag small { color: var(--si-metin-3); font-size: 11.5px; white-space: nowrap; }
.si-ekip-sag small.si-ekip-geride { color: var(--si-durum-bosta); font-weight: 600; }
.si-ekip-not { display: flex; gap: 6px; align-items: flex-start; margin: 4px 2px 0; color: var(--si-metin-3); font-size: 11.5px; line-height: 1.45; }
.si-ekip-not svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.si-kiyas-kutu {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--si-kenar); font-size: 11px; font-weight: 700; color: #fff;
}
.si-kiyas-kutu.dolu { background: var(--si-kiyas-renk); border-color: var(--si-kiyas-renk); }

/* Durum hapı: açık zemin + koyu yazı (renk + metin; renk körlüğünde de okunur). */
.si-hap {
  --si-hap: var(--si-metin-3);
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--si-hap) 15%, transparent); color: color-mix(in srgb, var(--si-hap) 80%, var(--si-metin));
  font-size: 11.5px; font-weight: 600; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.si-hap svg { width: 12px; height: 12px; flex-shrink: 0; }
.si-hap-surus { --si-hap: var(--si-durum-surus); }
.si-hap-ziyaret { --si-hap: var(--si-durum-ziyaret); }
.si-hap-bosta { --si-hap: var(--si-durum-bosta); }
.si-hap-sinyal { --si-hap: #64748B; }
.si-hap-sahte { --si-hap: var(--si-durum-sahte); }
.si-hap-depo { --si-hap: var(--si-durum-depo); }
.si-hap-mola { --si-hap: #64748B; }
.si-hap-geride { --si-hap: var(--si-durum-bosta); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--si-durum-bosta) 45%, transparent); }
.si-hap-istisna { --si-hap: var(--si-durum-sahte); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--si-durum-sahte) 40%, transparent); }

/* ---------------------------------------------------------- KARNE */
.si-karne { display: flex; flex-direction: column; gap: 10px; }
.si-karne-ust { display: flex; align-items: center; gap: 12px; }
.si-karne-ust.si-iskelet { gap: 8px; color: var(--si-metin-3); min-height: 48px; }
.si-karne-puan { font-size: var(--si-puan-yazi, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1; min-width: 44px; }
.si-puan-iyi { color: var(--si-durum-ziyaret); }
.si-puan-orta { color: var(--si-durum-bosta); }
.si-puan-kotu { color: var(--si-durum-sahte); }
.si-karne-sira { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.si-karne-sira small { color: var(--si-metin-3); font-size: 11.5px; }
.si-karne-egri { width: 84px; height: 30px; }
.si-karne-donem { color: var(--si-metin-3); font-size: 11.5px; margin-top: -4px; }
.si-karne-yok { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 9px; background: var(--si-yuzey-2); color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); }
.si-karne-yok svg { width: 15px; height: 15px; flex-shrink: 0; }
.si-mini-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.si-mini { min-width: 0; padding: 7px 8px; border-radius: 8px; background: var(--si-yuzey-2); border: 1px solid var(--si-kenar); }
.si-mini span { display: block; color: var(--si-metin-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Değer kırpılmaz (QA 15.10.2026: "Kasa 1 gün gecik…"): sığmazsa ikinci satıra kırılır. */
.si-mini b { display: block; font-size: var(--si-yazi, 14px); white-space: normal; overflow-wrap: anywhere; line-height: 1.25; margin-top: 1px; }
.si-mini-kotu { color: var(--si-durum-bosta); }
b.si-mini-kotu, small.si-mini-kotu { color: var(--si-durum-bosta); }
.si-mini-iyi { color: var(--si-durum-ziyaret); }
.si-kocluk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.si-kocluk-ust { display: flex; justify-content: space-between; gap: 8px; }
.si-kocluk-kayip { color: var(--si-durum-sahte); font-weight: 600; font-size: var(--si-kucuk-yazi, 12.5px); white-space: nowrap; }
.si-kocluk-cubuk { height: 4px; border-radius: 3px; background: var(--si-yuzey-2); margin: 4px 0 3px; overflow: hidden; }
.si-kocluk-cubuk span { display: block; height: 100%; background: color-mix(in srgb, var(--si-durum-sahte) 70%, transparent); }
.si-kocluk-alt { color: var(--si-metin-2); font-size: 11.5px; line-height: 1.45; }
.si-karne-not { margin: 0; color: var(--si-metin-3); font-size: 11.5px; }
.si-karne-birak { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.si-karne-birak svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------- GÜNÜN OLAYLARI */
.si-olay-baslik { display: flex; justify-content: space-between; align-items: baseline; }
.si-bolum-sayi { color: var(--si-metin-3); font-weight: 600; letter-spacing: 0; }
.si-olaylar { list-style: none; margin: 0 -6px 8px; padding: 0; }
.si-olay {
  display: grid; grid-template-columns: 40px 10px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; width: 100%;
  padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--si-metin); text-align: left; font: inherit;
  font-size: var(--si-kucuk-yazi, 12.5px); cursor: pointer;
}
.si-olay:hover { background: var(--si-yuzey-2); }
.si-olay-saat { color: var(--si-metin-3); font-variant-numeric: tabular-nums; }
.si-olay .si-olay-nokta { align-self: center; }
.si-olay-metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-olay-metin b { font-weight: 600; }
.si-olay-metin span { color: var(--si-metin-2); }
.si-olay-tutar { font-weight: 700; white-space: nowrap; }
.si-olay-gelecek .si-olay { opacity: .38; }
.si-olay-son .si-olay { background: var(--si-vurgu-acik); }

/* ---------------------------------------------------------- BÖLGE ÖZETİ */
.si-bolge-ozeti .si-bolum-baslik:first-child { margin-top: 2px; }
.si-dagilim { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.si-dagilim-parca { min-width: 6px; }
.si-dagilim-lejant { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--si-kucuk-yazi, 12.5px); color: var(--si-metin-2); }
.si-dagilim-lejant li { display: inline-flex; align-items: center; gap: 5px; }
.si-dagilim-lejant i { width: 9px; height: 9px; border-radius: 3px; }
.si-bolge-kart { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--si-kenar); background: var(--si-yuzey); margin-bottom: 8px; }
.si-bolge-kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.si-bolge-kart-ust small { color: var(--si-metin-3); white-space: nowrap; }
.si-bolge-kart-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.si-bolge-kart-izgara span { display: block; color: var(--si-metin-3); font-size: 11px; }
.si-bolge-kart-izgara b { font-size: var(--si-yazi, 14px); }
.si-bolge-kart-hedef { margin-top: 9px; color: var(--si-metin-2); font-size: 11.5px; }
.si-sira-tablo { width: 100%; border-collapse: collapse; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-sira-tablo th { text-align: left; color: var(--si-metin-3); font-weight: 600; font-size: 11px; padding: 4px 4px 6px; border-bottom: 1px solid var(--si-kenar); }
.si-sira-tablo td { padding: 6px 4px; border-bottom: 1px solid var(--si-kenar); vertical-align: top; }
.si-sira-tablo tbody tr { cursor: pointer; }
.si-sira-tablo tbody tr:hover td { background: var(--si-yuzey-2); }
.si-sira-tablo tbody tr:focus-visible { outline: 2px solid var(--si-odak); outline-offset: -2px; }
.si-sira-tablo .sag { text-align: right; white-space: nowrap; }
.si-sira-no { color: var(--si-metin-3); width: 18px; }
.si-sira-ad { font-weight: 600; margin-right: 6px; }
.si-sira-cubuk { display: block; height: 3px; border-radius: 2px; background: var(--si-yuzey-2); margin-top: 4px; overflow: hidden; }
.si-sira-cubuk span { display: block; height: 100%; background: var(--si-vurgu); }
.si-ozet-iyi { display: flex; align-items: center; gap: 6px; color: var(--si-durum-ziyaret); font-size: var(--si-kucuk-yazi, 12.5px); }
.si-ozet-iyi svg { width: 15px; height: 15px; }
.si-istisna-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.si-istisna-liste button {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 6px 8px 6px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--si-kenar); border-left: 3px solid var(--si-metin-3); background: var(--si-yuzey); color: var(--si-metin); font: inherit;
  font-size: var(--si-kucuk-yazi, 12.5px);
}
.si-istisna-liste small { color: var(--si-metin-3); }
.si-istisna-kritik button { border-left-color: var(--si-durum-sahte); }
.si-istisna-yuksek button { border-left-color: var(--si-durum-bosta); }
.si-bos-dugme {
  margin-top: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--si-vurgu); background: var(--si-vurgu); color: #fff;
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600; cursor: pointer;
}

/* ---------------------------------------------------------- KARŞILAŞTIR */
.si-kiyas { display: flex; flex-direction: column; gap: 10px; }
.si-kiyas-kaydir { overflow-x: auto; margin: 0 -4px; }
.si-kiyas-tablo { width: 100%; border-collapse: collapse; font-size: var(--si-kucuk-yazi, 12.5px); table-layout: fixed; }
.si-kiyas-tablo th, .si-kiyas-tablo td { padding: 6px 5px; border-bottom: 1px solid var(--si-kenar); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-kiyas-tablo th[scope=row] { text-align: left; color: var(--si-metin-2); font-weight: 500; width: 34%; white-space: normal; }
.si-kiyas-tablo thead th { border-bottom: 2px solid var(--si-kiyas-renk, var(--si-kenar)); }
.si-kiyas-tablo td small { display: block; color: var(--si-metin-3); font-size: 11px; }
.si-kiyas-ad { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; max-width: 100%; }
.si-kiyas-ad .si-metin-dg { padding: 0; color: var(--si-metin); overflow: hidden; text-overflow: ellipsis; }
.si-kiyas-cizgi { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--si-kiyas-renk); flex-shrink: 0; }
.si-kiyas-cikar { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--si-metin-3); cursor: pointer; }
.si-kiyas-cikar svg { width: 12px; height: 12px; }
.si-kiyas-en { font-weight: 700; color: var(--si-durum-ziyaret); }
.si-kiyas-buyuk { font-size: 18px; font-weight: 800; }
.si-kiyas-tablo .si-hap { justify-content: flex-end; }
.si-kiyas-kocluk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-kiyas-kocluk li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.si-kiyas-kocluk span { color: var(--si-metin-2); flex-basis: 100%; padding-left: 18px; }

/* ---------------------------------------------------------- HARİTA ÜSTÜ: KİŞİ KARTI, OLAY KARTI, LEJANT */
.si-kisi-karti {
  position: absolute; top: 12px; right: 60px; z-index: 3; width: min(320px, calc(100% - 84px));
  padding: 11px 13px 12px; border-radius: 12px; background: var(--si-yuzey); color: var(--si-metin);
  border: 1px solid var(--si-kenar); box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}
.si-kisi-karti-ust { display: flex; align-items: center; gap: 9px; }
.si-kisi-karti-ust .si-avatar { width: 30px; height: 30px; font-size: 11px; }
.si-kisi-karti-ad { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.si-kisi-karti-ad b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-kisi-karti-ad .si-plaka { color: var(--si-metin-3); font-size: 11.5px; white-space: nowrap; }
.si-kisi-karti-durum { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-weight: 700; font-size: var(--si-kucuk-yazi, 12.5px); }
.si-kisi-karti-durum svg { width: 14px; height: 14px; }
.si-yazi-surus { color: var(--si-durum-surus); }
.si-yazi-ziyaret { color: var(--si-durum-ziyaret); }
.si-yazi-bosta { color: var(--si-durum-bosta); }
.si-yazi-sinyal, .si-yazi-mola { color: var(--si-metin-2); }
.si-yazi-sahte { color: var(--si-durum-sahte); }
.si-yazi-depo { color: var(--si-durum-depo); }
.si-kisi-karti-alt { margin-top: 2px; color: var(--si-metin-3); font-size: 11.5px; }
.si-kisi-karti-eylem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.si-kk-dg {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 7px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--si-kenar); background: var(--si-yuzey); color: var(--si-metin);
  font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600; white-space: nowrap;
}
.si-kk-dg svg { width: 14px; height: 14px; }
.si-kk-dg:hover { border-color: var(--si-metin-3); }
.si-kk-dg.birincil { background: var(--si-vurgu); border-color: var(--si-vurgu); color: #fff; }
.si-kk-yok { align-self: center; color: var(--si-metin-3); font-size: 11.5px; }

.si-olay-karti {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 3; max-width: min(460px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px;
  background: var(--si-yuzey); color: var(--si-metin); border: 1px solid var(--si-kenar);
  border-left: 4px solid var(--si-olay, var(--si-vurgu)); box-shadow: 0 10px 28px rgba(15, 23, 42, .2);
  animation: si-olay-gir 220ms ease-out;
}
.si-olay-karti-satis { --si-olay: var(--si-olay-satis); }
.si-olay-karti-tahsilat { --si-olay: var(--si-olay-tahsilat); }
.si-olay-karti-iade { --si-olay: var(--si-olay-iade); }
.si-olay-karti-ziyaret { --si-olay: var(--si-olay-ziyaret); }
.si-olay-karti-ihlal { --si-olay: var(--si-olay-ihlal); }
.si-olay-karti-yukleme { --si-olay: var(--si-durum-depo); }
.si-olay-karti-govde { min-width: 0; }
.si-olay-karti-baslik { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-olay-karti-baslik span { color: var(--si-metin-3); font-weight: 600; margin-right: 4px; }
.si-olay-karti-alt { color: var(--si-metin-2); font-size: var(--si-kucuk-yazi, 12.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-olay-karti-tutar { font-weight: 800; white-space: nowrap; margin-left: auto; }
@keyframes si-olay-gir { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.si-lejant { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: min(640px, calc(100% - 140px)); box-shadow: 0 2px 8px rgba(15, 23, 42, .08); border: 1px solid var(--si-kenar); }
.si-lejant-icerik { display: flex; flex-wrap: wrap; align-items: center; gap: inherit; min-width: 0; }
.si-lejant-ac { display: none; }
.si-lejant-oge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--si-metin-2); }
.si-lj-cizgi { display: inline-block; width: 16px; height: 0; border-top: 3px solid var(--si-durum-surus); border-radius: 2px; }
.si-lj-tahmin { border-top: 3px dashed color-mix(in srgb, var(--si-durum-surus) 50%, transparent); }
.si-lj-sahte { border-top: 2px dashed var(--si-durum-sahte); }
.si-lj-plan { border-top: 2px dashed #64748B; }
.si-lj-durak { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); }
.si-lj-yapildi { background: #16A34A; }
.si-lj-gecikecek { background: #D97706; }
.si-lj-atlandi { background: #DC2626; }
.si-lj-sirada { background: #64748B; }

/* ---------------------------------------------------------- KİPLER: KARŞILAŞTIR, TAM EKRAN TEKRAR */
.si-kabuk.si-kipi-kiyas .si-govde { grid-template-columns: minmax(296px, 17%) minmax(0, 1fr) minmax(420px, 26%); }
.si-kabuk-tam .si-govde { grid-template-columns: minmax(0, 1fr) minmax(300px, 21%); }
.si-kabuk-tam .si-sol { display: none; }
.si-kabuk-tam .si-zs-govde { max-height: calc(18px + 6 * 24px); }
.si-tekrar-serit { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--si-yuzey); border-bottom: 1px solid var(--si-kenar); font-size: var(--si-kucuk-yazi, 12.5px); min-width: 0; }
.si-tekrar-serit b { white-space: nowrap; }
.si-tekrar-serit span { color: var(--si-metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-tekrar-serit a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--si-vurgu); font-weight: 600; text-decoration: none; white-space: nowrap; }
.si-tekrar-serit a svg { width: 13px; height: 13px; }

/* ----------------------------------------------------------------- TOST */
.si-tost {
  position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 12px); z-index: 50;
  display: flex; flex-direction: column; gap: 6px; align-items: stretch; max-width: min(560px, calc(100% - 24px));
  padding: 10px 14px; border-radius: 10px; background: #0F172A; color: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .28); opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.si-tost.gorunur { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.si-tost-bag { width: 100%; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; padding: 5px 8px; font: inherit; font-size: 12px; }

/* ---------------------------------------------------------------- KİLİT */
.si-kilit { display: grid; place-items: center; min-height: calc(100dvh - 140px); padding: 16px; }
.si-kilit-kart {
  max-width: 520px; text-align: center; padding: 28px 24px; border-radius: 14px;
  background: var(--yuzey, #fff); border: 1px solid var(--kenar, #DCE6F0);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.si-kilit-kart > svg { width: 34px; height: 34px; color: var(--metin-3, #7B8CA0); }
.si-kilit-kart h2 { margin: 0; font-size: var(--si-buyuk-yazi, 18px); }
.si-kilit-kart p { margin: 0; color: var(--metin-2, #4A5A6E); line-height: 1.55; }
.si-kilit-bag { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.si-kilit-kart .dugme { width: auto; text-decoration: none; }

/* ---------------------------------------------------------- DUVAR EKRANI */
.si-tv {
  position: fixed; inset: 0; z-index: 950; display: grid; grid-template-rows: 64px minmax(0, 1fr) 48px;
  background: #0B1220; color: #E2E8F0; font-family: var(--font-sans, 'Segoe UI', system-ui, sans-serif);
  font-variant-numeric: tabular-nums; overflow: hidden;
  --si-harita-zemin: #0B1220; --si-harita-ust: rgba(15, 23, 42, .92);
  --si-metin: #E2E8F0; --si-metin-2: #CBD5E1; --si-kenar: rgba(148, 163, 184, .25);
}
.si-tv-ust { display: flex; align-items: center; gap: 18px; padding: 0 24px; background: #070D1A; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.si-tv-ust .si-marka { font-size: 20px; }
.si-tv-masa { font-size: 20px; font-weight: 600; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.si-tv-saat { font-size: 26px; font-weight: 700; letter-spacing: .02em; }
.si-tv-harita { position: relative; min-height: 0; }
.si-tv-bos { display: grid; place-items: center; color: #94A3B8; font-size: 20px; padding: 24px; text-align: center; }
.si-tv-alt { display: flex; align-items: center; gap: 10px; padding: 0 24px; background: #070D1A; position: relative; overflow: hidden; }
.si-tv-adim { padding: 5px 12px; border-radius: 999px; color: #94A3B8; font-weight: 600; white-space: nowrap; }
.si-tv-adim.etkin { background: rgba(45, 212, 191, .16); color: #5EEAD4; }
.si-tv-ilerleme { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(148, 163, 184, .15); }
.si-tv-ilerleme span { display: block; height: 100%; background: #2DD4BF; transition: width 900ms linear; }
.si-tv-cik { position: absolute; top: 76px; right: 24px; z-index: 5; display: flex; gap: 8px; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.si-tv-cik.gorunur { opacity: 1; pointer-events: auto; }
.si-tv-cik button, .si-tv-cik a {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .9); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}

/* ============================================================ KIRILIMLAR */
/* Uygulama araçları modül çubuğuna geldi: < 1600 px'de TV / Paylaş / Dışa aktar simgeye iner (ad ipucunda). */
@media (max-width: 1599px) {
  .si-ust { gap: 8px; }
  .si-ust-dg span { display: none; }
  .si-ust-dg { padding: 6px 8px; }
}
@media (max-width: 1199px) {
  .si-govde { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
  .si-sag {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(360px, 92vw);
    transform: translateX(105%); transition: transform 200ms ease; box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
  }
  .si-sag-acik .si-sag { transform: none; }
  .si-sag-ac, .si-sag-kapat { display: grid; place-items: center; }
  .si-ust-dg span { display: none; }
  .si-ara input { width: 160px; }
}

@media (max-width: 900px) {
  .si-masa span { display: none; }
  .si-masa { padding: 6px 9px; }
}

@media (max-width: 759px) {
  .si-kabuk { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .si-ust { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; border-radius: 12px; }
  .si-ust-bosluk { display: none; }
  .si-marka { font-size: 15px; }
  .si-masalar { order: 3; flex-basis: 100%; }
  .si-masa { flex: 1; justify-content: center; }
  .si-masa span { display: inline; }
  .si-canli { order: 4; }
  .si-tarih { order: 5; }
  .si-tarih input { width: 118px; }
  .si-ust-dg { order: 6; padding: 6px 8px; }
  .si-ust-sarmal { order: 6; }
  .si-suzgec { padding: 8px 0; background: transparent; border: 0; }
  .si-suzgec-sag { flex-basis: 100%; }
  .si-ara { flex: 1; }
  .si-ara input { width: 100%; }
  .si-govde { display: flex; flex-direction: column; gap: 10px; }
  .si-sol, .si-sag { border: 1px solid var(--si-kenar); border-radius: 12px; }
  .si-sol { order: 1; }
  .si-orta { order: 2; height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--si-kenar); }
  .si-sag { order: 3; position: static; transform: none; width: auto; box-shadow: none; }
  .si-sag-ac, .si-sag-kapat { display: none; }
  .si-panel-govde { overflow: visible; }
  .si-zaman { margin-top: 10px; border: 1px solid var(--si-kenar); border-radius: 12px; }
  .si-tost { position: fixed; bottom: calc(var(--alt-gezinme-tam, 64px) + 12px); }
  .si-tv-ust { gap: 10px; padding: 0 12px; }
  .si-tv-masa, .si-tv-ust .si-canli { display: none; }
  /* Dokunmatik kabukta masalar alt gezinmededir (Komuta · Bölge · Operasyon · Uyarılar): üst bloktaki sekmeler tekrar olur. */
  :root:not([data-cihaz="masaustu"]) .si-masalar { display: none; }

}

/* ============================================================ BÖLGE MASASI KIRILIMLARI (WP6b) */
@media (max-width: 1499px) {
  .si-kpi .si-kivilcim { width: 34px; height: 16px; }
  .si-kpi-alt { font-size: 11px; }
  .si-lejant { gap: 3px 9px; font-size: 11.5px; padding: 6px 10px; }
  .si-kisi-karti { width: min(290px, calc(100% - 84px)); padding: 9px 11px 10px; }
  .si-kisi-karti-eylem { gap: 5px; margin-top: 8px; }
  .si-kk-dg { padding: 4px 8px; }
}

@media (max-width: 1199px) {
  .si-masa-bolge .si-govde, .si-kabuk.si-kipi-kiyas .si-govde { grid-template-columns: minmax(280px, 300px) minmax(0, 1fr); }
  .si-kabuk-tam .si-govde { grid-template-columns: minmax(0, 1fr); }
  .si-kabuk.si-kipi-kiyas .si-sag { width: min(460px, 94vw); }
  .si-zs-lejant { display: none; }
}

/* Mobil (§2.5): üst özet (göstergeler) → mini harita → ekip listesi → sağ panel → zaman şeridi. Sol panelin kutusu
   "display: contents" ile açılır; bölümleri gövdenin sırasına girer. */
@media (max-width: 759px) {
  .si-sol, .si-sol > .si-panel-govde { display: contents; }
  .si-sol > .si-panel-baslik { display: none; }
  .si-mobil-ust { order: 0; margin: 0; }
  .si-orta { order: 1; height: 380px; }
  .si-masa-bolge .si-ust { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: 'marka bos dg1 dg2' 'canli canli tarih tarih' 'masa masa masa masa'; }
  .si-masa-bolge .si-marka { grid-area: marka; }
  .si-masa-bolge .si-ust > .si-ust-dg { grid-area: dg1; justify-self: end; }
  .si-masa-bolge .si-ust > .si-ust-sarmal { grid-area: dg2; }
  .si-masa-bolge .si-canli { grid-area: canli; justify-self: start; }
  .si-masa-bolge .si-tarih { grid-area: tarih; justify-self: end; }
  .si-masa-bolge .si-tarih > svg, .si-masa-bolge .si-tarih .gizli-metin { display: none; }
  .si-masa-bolge .si-masalar { grid-area: masa; }
  .si-masa-bolge [data-test="si-tv"] { display: none; }
  .si-suzgec-cipler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .si-suzgec-cipler::-webkit-scrollbar { display: none; }
  .si-suzgec-cipler .si-cip-sarmal { flex-shrink: 0; }
  .si-suzgec-sag { flex-wrap: nowrap; }
  .si-suzgec-sag .si-cip-sarmal { flex-shrink: 0; }
  .si-ekip-kutu { order: 2; padding: 10px 10px 4px; border-radius: 12px; border: 1px solid var(--si-kenar); background: var(--si-yuzey); }
  .si-sol > .si-panel-govde > .si-satir-bos, .si-sol > .si-panel-govde > .si-bos { order: 2; }
  .si-sag { order: 3; }
  .si-kpi-deger { font-size: 21px; }
  .si-kisi-karti { top: auto; bottom: 8px; left: 8px; right: 56px; width: auto; padding: 7px 9px; display: grid; grid-template-columns: minmax(0, 1fr); }
  .si-kisi-karti-ust .si-avatar { display: none; }
  .si-kisi-karti-durum { margin-top: 2px; }
  .si-kisi-karti-alt, .si-kk-yok, .si-kk-karne { display: none; }
  .si-kisi-karti-eylem { margin-top: 7px; gap: 5px; }
  .si-kk-dg { padding: 4px 7px; }
  /* Lejant katlanır, varsayılan kapalı: yalnız "Lejant" düğmesi; açılınca içerik haritanın altından yukarı açılır. */
  .si-lejant { top: 8px; bottom: auto; left: 8px; padding: 0; max-width: calc(100% - 64px); display: block; }
  .si-lejant-ac {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 0; background: transparent; cursor: pointer;
    color: var(--si-metin-2); font: inherit; font-size: var(--si-kucuk-yazi, 12.5px); font-weight: 600;
  }
  .si-lejant-ac svg { width: 13px; height: 13px; }
  .si-lejant-ok { transform: rotate(90deg); transition: transform 150ms ease; }
  .si-lejant.acik .si-lejant-ok { transform: rotate(-90deg); }
  .si-lejant:not(.acik) .si-lejant-icerik { display: none; }
  .si-lejant.acik .si-lejant-icerik { padding: 0 10px 8px; gap: 4px 10px; }
  .si-olay-karti { bottom: auto; top: 44px; }
  .si-zs-govde { grid-template-columns: 78px minmax(0, 1fr); column-gap: 6px; }
  .si-zs-aralik, .si-zs-lejant { display: none; }
  .si-zs-bilgi { flex-direction: column; gap: 0; }
  .si-mini-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .si-tekrar-serit { flex-wrap: wrap; }
}

/* ============================================================ KISA EKRAN (1366×768 ve benzeri, masaüstü)
   Ölçüt (QA 15.10.2026): Bölge'de beş kişinin tamamı kaydırmasız görünür. Gösterge kartları ve ekip satırları sıkılaşır,
   zaman şeridi en çok üç satır gösterir (kalanı şeridin içinde kayar). Yazı boyutu yalnız DEĞİŞKENLE (tema.css 5b). */
@media (min-width: 760px) and (max-height: 900px) {
  .si-panel-baslik { padding: 9px 14px 6px; }
  .si-masa-bolge { --si-kpi-deger-yazi: 19px; }
  .si-masa-bolge .si-kpi { padding: 6px 9px 7px; }
  .si-masa-bolge .si-kpi-deger { margin-top: 1px; }
  .si-masa-bolge .si-kpi-cubuk { margin-top: 5px; }
  .si-masa-bolge .si-kpi-ikili { margin-bottom: 6px; }
  .si-masa-bolge .si-ekip-baslik { margin-bottom: 2px; }
  .si-ekip-satir { padding: 5px 8px 5px 10px; gap: 9px; }
  .si-ekip-satir .si-avatar { width: 30px; height: 30px; font-size: 11px; }
  .si-ekip-orta { gap: 2px; }
  .si-ekip-sag { gap: 1px; }
  .si-zs-govde { max-height: calc(18px + 3 * 24px); }
  .si-kabuk-tam .si-zs-govde { max-height: calc(18px + 4 * 24px); }
  .si-zaman { padding: 6px 14px 7px; }
  .si-zs { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-sag, .si-tost, .si-tv-ilerleme span, .si-tv-cik { transition: none; }
  .si-olay-karti { animation: none; }
}

/* ------------------------------------------------------- YAZDIR / PDF
   "Dışa aktar › Yazdır / PDF": yalnız modül kabuğu basılır (uygulamanın yan menüsü ve üst şeridi gizlenir). */
@media print {
  body.si-yazdiriliyor .yan, body.si-yazdiriliyor .ust-serit, body.si-yazdiriliyor .lisans-bandi,
  body.si-yazdiriliyor .si-harita-araclar, body.si-yazdiriliyor .si-tost, body.si-yazdiriliyor .si-zs-oynat,
  body.si-yazdiriliyor .si-ust-araclar { display: none !important; }
  body.si-yazdiriliyor .si-kabuk { height: auto; min-height: 0; }
  body.si-yazdiriliyor .si-govde { grid-template-columns: 30% 40% 30%; }
  body.si-yazdiriliyor .si-orta { min-height: 320px; }
  body.si-yazdiriliyor .si-sag { position: static; transform: none; box-shadow: none; }
  body.si-yazdiriliyor .si-panel-govde { overflow: visible; }
}