/* ==========================================================================
   SAHA İKİZİ — SİNEMATİK 3B GÖRÜNÜM (K.66 WP10; Pages/IkizSaha.razor, js/ikizsaha.js)

   Tam sahne, üstünde cam katmanlar: başlık (2B'ye dön · kişi · durum · kamera/ışık), iz açıklaması, oynatıcı (oynat
   üçgeni, saat, olay çentikli zaman şeridi, hız, gün). Sahne içi yazılar HTML etiket kartıdır (.sk-et; Ikon SVG
   dili, emoji yok). Işık saate göre değişir: JS sahneye data-isik="gunduz|gece" yazar, katmanlar ona göre koyulaşır.
   Renkler sahaikizi.css belirteçlerinden (--si-*); yazı ölçeği değişkenle (pwa-yazi-olcegi-saha).
   ========================================================================== */

.sayfa-genis.sk-sayfa { max-width: none; }
.sayfa:has(> .sk-sayfa) { padding: 10px 12px 12px; }

.sk-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.sk-duzen.sk-panelsiz { grid-template-columns: minmax(0, 1fr); }
.sk-duzen.sk-panelsiz .sk-panel { display: none; }
.sk-panel { max-height: calc(100dvh - 92px); overflow: auto; }

/* ----------------------------------------------------------------- sahne */
.sk-sahne {
  --sk-cam: rgba(255, 255, 255, .9);
  --sk-cam-kenar: rgba(15, 23, 42, .08);
  --sk-cam-golge: 0 8px 28px rgba(15, 23, 42, .14);
  --sk-metin: #0f172a;
  --sk-metin-2: #475569;
  --sk-metin-3: #64748b;
  --sk-dg-ust: rgba(15, 23, 42, .06);
  --sk-etkin: var(--si-vurgu, #0F766E);
  position: relative;
  height: calc(100dvh - 92px);
  min-height: 520px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--si-harita-zemin, #E5E9EF);
  border: 1px solid var(--kenar, #DCE6F0);
  touch-action: none;
  user-select: none;
  isolation: isolate;
  container-type: inline-size;
  --dokun: 44px;   /* sahne üstü düğmeler: parmak boyu, ama haritayı kapatmayacak kadar */
  font-family: var(--yz-ailesi, system-ui);
}
.sk-sahne[data-isik="gece"] {
  --sk-cam: rgba(10, 16, 28, .86);
  --sk-cam-kenar: rgba(148, 163, 184, .18);
  --sk-cam-golge: 0 10px 30px rgba(0, 0, 0, .45);
  --sk-metin: #e2e8f0;
  --sk-metin-2: #cbd5e1;
  --sk-metin-3: #94a3b8;
  --sk-dg-ust: rgba(148, 163, 184, .16);
  --sk-etkin: #2DD4BF;
  background: #0b1220;
}
.sk-sahne.sk-tam { position: fixed; inset: 0; z-index: 900; height: 100dvh; border-radius: 0; border: 0; }
.sk-tuval-kap { position: absolute; inset: 0; z-index: 0; }
.sk-tuval-kap .ikz-tuval { display: block; width: 100% !important; height: 100% !important; outline: none; }
.sk-tuval-kap .ikz-tuval:focus-visible { outline: 3px solid var(--si-odak, #2563EB); outline-offset: -3px; }
.sk-sahne .ikz-yukleme { background: color-mix(in srgb, var(--si-harita-zemin, #E5E9EF) 70%, transparent); color: var(--sk-metin); }
.sk-sahne .sk-atif { right: 14px; bottom: 96px; z-index: 3; background: var(--sk-cam); color: var(--sk-metin-2); border: 1px solid var(--sk-cam-kenar); }

/* ------------------------------------------------------------- cam katman */
.sk-ust, .sk-oynatici, .sk-lejant { position: absolute; z-index: 4; color: var(--sk-metin); }
.sk-ust { top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; pointer-events: none; }
.sk-ust > * { pointer-events: auto; }
.sk-kim, .sk-segment, .sk-dg, .sk-oynatici, .sk-lejant {
  background: var(--sk-cam);
  border: 1px solid var(--sk-cam-kenar);
  box-shadow: var(--sk-cam-golge);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.sk-dg {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 13px; border-radius: 11px; cursor: pointer; white-space: nowrap;
  font: 600 var(--si-dugme-yazi, 13px)/1 var(--yz-ailesi, system-ui); color: var(--sk-metin); text-decoration: none;
}
.sk-dg svg { width: 17px; height: 17px; flex: none; }
/* all: unset pointer-events'i miras alır; .sk-ust tıklamayı geçirir (none) — düğmeler yeniden tıklanır olmalı */
.sk-ust .sk-dg, .sk-ust .sk-kim { pointer-events: auto; }
.sk-dg:hover { background: color-mix(in srgb, var(--sk-cam) 70%, var(--sk-etkin) 12%); }
.sk-dg:focus-visible, .sk-oynat:focus-visible, .sk-secici select:focus-visible, .sk-serit input:focus-visible { outline: 2px solid var(--si-odak, #2563EB); outline-offset: 2px; }
.sk-dg.etkin { background: var(--sk-etkin); color: #fff; border-color: transparent; }
.sk-sahne[data-isik="gece"] .sk-dg.etkin { color: #04201d; }
.sk-dg[disabled] { opacity: .45; cursor: not-allowed; }
.sk-dg.sk-ikon { width: 40px; padding: 0; }
.sk-dg.sk-ikon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk-donus { padding-left: 11px; }

.sk-kim { display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 14px 0 7px; border-radius: 14px; }
.sk-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #0f172a; color: #fff;
  font: 700 13px/1 var(--yz-ailesi, system-ui); letter-spacing: .02em; }
.sk-sahne[data-isik="gece"] .sk-avatar { background: #e2e8f0; color: #0f172a; }
.sk-kim-metin { display: flex; flex-direction: column; min-width: 0; }
.sk-kim-metin b { font: 700 var(--si-baslik-yazi, 15px)/1.2 var(--yz-ailesi, system-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-kim-metin small { font-size: 12px; color: var(--sk-metin-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sk-durum { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font: 600 12px/1 var(--yz-ailesi, system-ui); color: var(--sk-metin); background: var(--sk-dg-ust); font-variant-numeric: tabular-nums; }
.sk-durum i { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-d, #94a3b8); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-d, #94a3b8) 25%, transparent); }
.sk-durum-surus { --sk-d: var(--si-durum-surus, #2563EB); }
.sk-durum-ziyaret { --sk-d: var(--si-durum-ziyaret, #16A34A); }
.sk-durum-bosta { --sk-d: var(--si-durum-bosta, #D97706); }
.sk-durum-sinyal, .sk-durum-gunDisi { --sk-d: var(--si-durum-sinyal, #94A3B8); }
.sk-durum-sahte { --sk-d: var(--si-durum-sahte, #DC2626); color: #fff; background: var(--si-durum-sahte, #DC2626); }
.sk-durum-sahte i { background: #fff; box-shadow: none; }

.sk-ust-sag { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sk-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; }
.sk-segment .sk-dg { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; height: 34px; border-radius: 10px; }
.sk-segment .sk-dg.sk-ikon { width: 34px; }
.sk-segment .sk-dg.etkin { background: var(--sk-etkin); }

/* -------------------------------------------------------------- açıklama */
.sk-lejant { left: 12px; bottom: 92px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 11px;
  font: 500 12px/1.2 var(--yz-ailesi, system-ui); color: var(--sk-metin-2); }
.sk-lejant span { display: inline-flex; align-items: center; gap: 7px; }
.sk-lejant i { display: inline-block; width: 24px; height: 4px; border-radius: 2px; }
.sk-lejant-panel { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: 12px; color: var(--metin-2, #4A5A6E); }
.sk-lejant-panel span { display: inline-flex; align-items: center; gap: 7px; }
.sk-lejant-panel i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; }
.sk-l-gps { background: var(--si-durum-surus, #2563EB); }
.sk-l-tahmin { background: repeating-linear-gradient(90deg, #64748b 0 6px, transparent 6px 10px); opacity: .8; }
.sk-l-sahte { height: 9px !important; background: none !important; border: 2px solid var(--si-durum-sahte, #DC2626); border-bottom: 0; border-radius: 12px 12px 0 0 !important; }

/* -------------------------------------------------------------- oynatıcı */
.sk-oynatici { left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; }
.sk-oynat { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--sk-etkin); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sk-etkin) 40%, transparent); }
.sk-sahne[data-isik="gece"] .sk-oynat { color: #04201d; }
.sk-oynat svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.sk-oynat[disabled] { opacity: .45; cursor: not-allowed; }
.sk-saat { flex: none; min-width: 64px; font: 700 22px/1 var(--yz-ailesi, system-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sk-serit { position: relative; flex: 1; min-width: 140px; padding-top: 12px; }
.sk-serit input[type=range] { display: block; width: 100%; margin: 0; accent-color: var(--sk-etkin); cursor: pointer; }
.sk-isaretler { position: absolute; left: 8px; right: 8px; top: 0; height: 10px; pointer-events: none; }
.sk-isaret { position: absolute; top: 0; width: 3px; height: 10px; border-radius: 2px; transform: translateX(-50%); background: #94a3b8; opacity: .9; }
.sk-isaret-SATIS, .sk-isaret-FATURA { background: var(--si-olay-satis, #22C55E); }
.sk-isaret-TAHSILAT { background: var(--si-olay-tahsilat, #EAB308); }
.sk-isaret-IADE { background: var(--si-olay-iade, #F97316); }
.sk-isaret-SIPARIS { background: var(--si-olay-siparis, #38BDF8); }
.sk-isaret-ZIYARET { background: var(--si-olay-ziyaret, #A855F7); height: 6px; top: 4px; }
.sk-isaret-YUKLEME, .sk-isaret-BOSALTMA { background: var(--si-durum-depo, #0F766E); }
.sk-isaret-SAHTE { background: var(--si-olay-ihlal, #DC2626); width: 4px; height: 12px; top: -1px; }
.sk-aralik { display: flex; justify-content: space-between; margin-top: 2px; font: 500 11px/1 var(--yz-ailesi, system-ui); color: var(--sk-metin-3); font-variant-numeric: tabular-nums; }
.sk-secici select { height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--sk-cam-kenar); background: var(--sk-dg-ust); color: var(--sk-metin);
  font: 600 12.5px/1 var(--yz-ailesi, system-ui); cursor: pointer; }
.sk-sahne[data-isik="gece"] .sk-secici select { color-scheme: dark; }
.sk-canli { height: 36px; box-shadow: none; }

/* ------------------------------------------------------------- boş durum */
.sk-bos-kap { max-width: 620px; margin: 8vh auto; }
.sk-bos-katman { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 90px 16px 110px; pointer-events: none; }
.sk-bos-katman > * { pointer-events: auto; max-width: 560px; background: var(--yuzey, #fff); border-radius: 14px; box-shadow: var(--sk-cam-golge); }

/* ---------------------------------------------------------- etiket kartı */
.sk-etiketler { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.sk-et {
  position: absolute; left: 0; top: -10px; display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 11px;
  background: rgba(255, 255, 255, .97); color: #0f172a; white-space: nowrap; will-change: transform;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .07);
  font: 500 12px/1.2 var(--yz-ailesi, system-ui); transition: opacity .18s ease, visibility .18s;
}
.sk-et::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 2px rgba(15, 23, 42, .06); border-radius: 0 0 2px 0; }
.sk-et.gizli { opacity: 0; visibility: hidden; }
.sk-et.sk-et-tik { pointer-events: auto; cursor: pointer; }
.sk-et-ikon { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #eef2f7; color: #334155; }
.sk-et-ikon svg { width: 15px; height: 15px; }
.sk-et-metin { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 240px; }
.sk-et-metin b { font-weight: 700; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.sk-et-metin span, .sk-et-metin small { color: #475569; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sk-et-metin small { color: #64748b; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }

.sk-et-arac { padding: 6px 13px 6px 6px; border-radius: 13px; }
.sk-et-arac .sk-et-ikon { width: 34px; height: 34px; border-radius: 10px; background: var(--sk-durum, #2563eb); color: #fff; }
.sk-et-arac .sk-et-ikon svg { width: 19px; height: 19px; }
.sk-et-arac .sk-et-metin b { font-size: 14px; letter-spacing: .01em; }
.sk-et-arac small { color: #0f172a; font-weight: 600; }
.sk-et-arac small i { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-durum, #2563eb); }

.sk-et-musteri.sk-sirada { opacity: .88; }
.sk-et-musteri.sk-sirada .sk-et-ikon { background: #eef2f7; color: #64748b; }
.sk-et-musteri.sk-yapildi .sk-et-ikon { background: #dcfce7; color: #15803d; }
.sk-et-musteri.sk-simdi { box-shadow: 0 6px 18px rgba(15, 23, 42, .16), 0 0 0 2px var(--si-durum-ziyaret, #16A34A); }
.sk-et-musteri.sk-simdi .sk-et-ikon { background: var(--si-durum-ziyaret, #16A34A); color: #fff; }
.sk-et-musteri.gizli.sk-simdi { opacity: 0; }
.sk-et-depo .sk-et-ikon { background: var(--si-durum-depo, #0F766E); color: #fff; }
.sk-et-sahte { background: var(--si-durum-sahte, #DC2626); color: #fff; box-shadow: 0 8px 22px rgba(220, 38, 38, .35); }
.sk-et-sahte .sk-et-ikon { background: rgba(255, 255, 255, .2); color: #fff; }
.sk-et-sahte .sk-et-metin b, .sk-et-sahte .sk-et-metin small { color: #fff; }
.sk-et-olay { background: transparent; box-shadow: none; padding: 0; }
.sk-et-olay::after { display: none; }
.sk-et-ic { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 11px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18), inset 3px 0 0 var(--sk-olay); animation: sk-olay 3.6s ease-out forwards; }
.sk-et-ic .sk-et-ikon { background: var(--sk-olay); color: #fff; }
@keyframes sk-olay { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-26px); } }

/* Gece: kartlar koyu cam (okunurluk önce) */
.sk-sahne[data-isik="gece"] .sk-et, .sk-sahne[data-isik="gece"] .sk-et-ic { background: rgba(15, 23, 42, .95); color: #e2e8f0; box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(148, 163, 184, .2); }
.sk-sahne[data-isik="gece"] .sk-et-olay { background: transparent; box-shadow: none; }
.sk-sahne[data-isik="gece"] .sk-et-ic { box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 3px 0 0 var(--sk-olay); }
.sk-sahne[data-isik="gece"] .sk-et-metin span, .sk-sahne[data-isik="gece"] .sk-et-metin small { color: #94a3b8; }
.sk-sahne[data-isik="gece"] .sk-et-arac small { color: #e2e8f0; }
.sk-sahne[data-isik="gece"] .sk-et-ikon { background: #1e293b; color: #cbd5e1; }
.sk-sahne[data-isik="gece"] .sk-et-arac .sk-et-ikon { background: var(--sk-durum, #2563eb); color: #fff; }
.sk-sahne[data-isik="gece"] .sk-et-musteri.sk-yapildi .sk-et-ikon { background: rgba(22, 163, 74, .25); color: #4ade80; }
.sk-sahne[data-isik="gece"] .sk-et-musteri.sk-simdi .sk-et-ikon, .sk-sahne[data-isik="gece"] .sk-et-depo .sk-et-ikon, .sk-sahne[data-isik="gece"] .sk-et-ic .sk-et-ikon { color: #fff; }
.sk-sahne[data-isik="gece"] .sk-et-musteri.sk-simdi .sk-et-ikon { background: var(--si-durum-ziyaret, #16A34A); }
.sk-sahne[data-isik="gece"] .sk-et-depo .sk-et-ikon { background: var(--si-durum-depo, #0F766E); }
.sk-sahne[data-isik="gece"] .sk-et-ic .sk-et-ikon { background: var(--sk-olay); }
.sk-sahne[data-isik="gece"] .sk-et-sahte { background: var(--si-durum-sahte, #DC2626); color: #fff; }
.sk-sahne[data-isik="gece"] .sk-et-sahte .sk-et-ikon { background: rgba(255, 255, 255, .2); }
.sk-sahne[data-isik="gece"] .sk-et-sahte .sk-et-metin small { color: #fff; }

/* ------------------------------------------------------------------ panel */
.sk-arac-karti .sk-ozet { grid-template-columns: repeat(2, 1fr); margin-bottom: 10px; }
.sk-arac-karti .sk-ozet b { font-variant-numeric: tabular-nums; }
.sk-arac-karti .ikz-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.sk-arac-karti .dugme svg { width: 15px; height: 15px; margin-right: 6px; }

/* ---------------------------------------------------------------- duyarlı */
:root:not([data-cihaz="masaustu"]) .sk-dg { min-height: var(--dokun, 44px); }
:root:not([data-cihaz="masaustu"]) .sk-dg.sk-ikon { min-width: var(--dokun, 44px); }
:root:not([data-cihaz="masaustu"]) .sk-secici select { min-height: var(--dokun, 44px); }

@media (max-width: 1200px) {
  .sk-duzen { grid-template-columns: minmax(0, 1fr); }
  .sk-panel { max-height: none; }
}
@container (max-width: 980px) {
  .sk-segment .sk-dg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-segment .sk-dg { width: 36px; padding: 0; }
}
@container (max-width: 760px) {
  .sk-ust { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .sk-donus span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-donus { width: 44px; padding: 0; }
  .sk-kim { flex: 1; height: 48px; padding-right: 10px; }
  .sk-durum { display: none; }
  .sk-ust-sag { width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: nowrap; }
  .sk-ust-sag > .sk-ikon { display: none; }   /* tam ekran ve panel: dar ekranda panel zaten sahnenin altında */
  .sk-segment .sk-dg, .sk-segment .sk-dg.sk-ikon { width: 44px; min-width: 0; height: 40px; min-height: 40px; }
  .sk-canli span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-canli { width: 40px; padding: 0; }
  .sk-secici select { height: 40px; min-height: 40px; font-size: 13px; padding: 0 4px; }
  .sk-lejant { display: none; }
  .sk-oynatici { left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .sk-serit { order: 5; flex-basis: 100%; }
  .sk-saat { font-size: 19px; min-width: 52px; }
  .sk-oynat { width: 44px; height: 44px; }
  .sk-oynatici .sk-secici:first-of-type { margin-left: auto; }
  .sk-sahne .sk-atif { bottom: auto; top: 118px; right: 8px; font-size: 10px; }
  .sk-et-metin { max-width: 210px; }
}
@media (max-width: 760px) {
  .sayfa:has(> .sk-sayfa) { padding: 6px; }
  .sk-sahne { height: 74dvh; min-height: 460px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-et-ic { animation: none; }
  .sk-et { transition: none; }
}