/* Istasyon izleme sayfalarinin ortak stili (izleme.html, istasyon.html). */
/* Tasarim: Stitch "Voltgo COCC // NOC" (2026-09-29). Renk ve olculer tasarim
   kodundaki Tailwind yapilandirmasindan alindi; CDN yerine burada duz CSS. */
/* Acik tema (kullanici istegi 2026-09-29). Yerlesim ve olculer Stitch
   "Voltgo COCC // NOC" tasarimindan; renkler ayni tonlarin acik karsiliklari.
   Tum metin/zemin ciftleri >= 4.5:1 olculdu (bkz. kontrast betigi). */
:root {
  /* Katman olcegi (alttan uste). Istasyon pencereleri --z-windows katmaninin
   * icinde JS ile 100+ siralanir; o katman kendi baglamini olusturur. */
  --z-sticky: 1;       /* tablo basliklari */
  --z-chart-tip: 5;    /* grafik ipucu */
  --z-topbar: 40;
  --z-sidebar: 50;
  --z-windows: 90;     /* istasyon pencereleri katmani */
  --z-docks: 95;       /* kucultulmus pencereler */
  --z-tooltip: 200;    /* terim ipucu */
  --z-overlay: 300;    /* giris ekrani */
  --z-signature: 400;  /* imza (imza.css) */
  --bg: #f3f5f9;
  --s-lowest: #ffffff;
  --s-low: #ffffff;
  --s: #f1f4f9;
  --s-high: #e6ebf2;
  --s-highest: #d9e0ea;
  --on: #151b28;
  --on-var: #465062;
  --outline: #626b7d;
  --outline-var: #c4cbd7;
  --primary: #2f3fbf;
  --primary-c: #3a4cd9;
  --on-primary-c: #ffffff;
  --ok: #0a6e4c;
  --ok-c: #14a06c;
  --warn: #8a4f00;
  --warn-c: #f6d08a;
  --on-warn-c: #3b2300;
  --err: #b3261e;
  --err-c: #fde3e0;
  --on-err-c: #8a1b15;
  --nodata: #5b3fb8;
  --nodata-c: #ebe5fb;
  --tint-primary: rgba(58,76,217,.12);
  --tint-ok: rgba(10,110,76,.10);
  --tint-warn: rgba(138,79,0,.10);
  --tint-err: rgba(179,38,30,.10);
  --banner-warn: #fff3dc;
  --banner-err: #fdecea;
  --topbar-bg: rgba(255,255,255,.92);
  --shadow: rgba(15,23,42,.08);
  --shadow-strong: rgba(15,23,42,.18);
  --overlay: rgba(15,23,42,.45);
  --alarm-glow: rgba(179,38,30,.16);
  --overlay-bg: rgba(243,245,249,.97);
  --on-alarm: #ffffff;
  color-scheme: light;
  --r: 0.25rem;
  --r-lg: 0.5rem;
  --sans: 'Geist', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

/* Koyu tema: Stitch "Voltgo COCC // NOC" tasariminin ozgun renkleri.
   <html data-theme="dark"> ile acilir (ust bardaki dugme, tercih localStorage'da). */
:root[data-theme="dark"] {
  --bg: #0d1320;
  --s-lowest: #080e1b;
  --s-low: #161b29;
  --s: #1a1f2d;
  --s-high: #242a38;
  --s-highest: #2f3543;
  --on: #dde2f5;
  --on-var: #c2c6d6;
  --outline: #8c909f;
  --outline-var: #424754;
  --primary: #b4beff;
  --primary-c: #4759eb;
  --on-primary-c: #ffffff;
  --ok: #4edea3;
  --ok-c: #00a572;
  --warn: #ffb95f;
  --warn-c: #ca8100;
  --on-warn-c: #3e2400;
  --err: #ffb4ab;
  --err-c: #93000a;
  --on-err-c: #ffdad6;
  --nodata: #c9b6ff;
  --nodata-c: #3b2f63;
  --tint-primary: rgba(71,89,235,.24);
  --tint-ok: rgba(78,222,163,.1);
  --tint-warn: rgba(255,185,95,.12);
  --tint-err: rgba(147,0,10,.3);
  --banner-warn: #2a2210;
  --banner-err: #2d1416;
  --topbar-bg: rgba(8,14,27,.9);
  --shadow: rgba(0,0,0,.25);
  --shadow-strong: rgba(0,0,0,.5);
  --overlay: rgba(0,0,0,.55);
  --overlay-bg: rgba(8,14,27,.96);
  --alarm-glow: rgba(239,68,68,.25);
  --on-alarm: #3b0006;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--on);
  font: 400 0.875rem/1.25rem var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 18px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  vertical-align: middle; user-select: none;
}
.mono { font-family: var(--mono); }
.label { font: 500 0.6875rem/0.875rem var(--mono); letter-spacing: 0.04em; }
.muted { color: var(--on-var); }
.dim { color: var(--outline); }

/* ---------- Yerlesim ---------- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 16rem; z-index: var(--z-sidebar);
  background: var(--s-lowest); display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 8px var(--shadow); border-right: 1px solid var(--s-high);
}
.brand { height: 4rem; padding: 0 1rem; display: flex; align-items: center; gap: .5rem; background: var(--s-low); width: 100%; border: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.brand:hover .brand-logo { filter: brightness(1.15); }
.brand:focus-visible { outline: 2px solid var(--primary-c); outline-offset: -2px; }
/* NEXUS logosu (public/brand, scripts/nexus-logo.js) */
:root { --logo-main: #062A6E; --logo-soft: #1C4B89; }
:root[data-theme="dark"] { --logo-main: #4759EB; --logo-soft: #B3CEFB; }
.brand-logo { width: 2rem; height: 2rem; flex: none; display: block; }
.brand-word { display: block; height: .9375rem; width: auto; color: var(--on); margin-bottom: .1875rem; }
.auth-logo { display: flex; align-items: center; gap: .75rem; margin: 0 0 .25rem; }
.auth-logo svg { height: 2.75rem; width: auto; display: block; }
.auth-logo .auth-word { height: 1.5rem; color: var(--on); }
.brand-mark { width: 1.75rem; height: 1.75rem; border-radius: var(--r); background: var(--primary-c); color: var(--on-primary-c); display: grid; place-items: center; }
.brand-name { font: 500 1.125rem/1.5rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.brand-sub { font: 500 .6875rem/.875rem var(--mono); letter-spacing: .12em; color: var(--on-var); }
.fleet { padding: .5rem .75rem; background: var(--s); }
.fleet-row { display: flex; justify-content: space-between; align-items: center; }
.bar { height: .25rem; background: var(--s-highest); border-radius: var(--r); overflow: hidden; margin-top: .25rem; }
.bar > span { display: block; height: 100%; border-radius: var(--r); }
nav.side { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .5rem; }
nav.side a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--r); color: var(--on-var); text-decoration: none;
  transition: background .15s, color .15s;
}
nav.side a:hover { background: var(--s-high); color: var(--on); }
nav.side a.active { background: var(--primary-c); color: var(--on-primary-c); font-weight: 600; box-shadow: 0 0 12px var(--tint-primary); }
nav.side a .nav-l { display: flex; align-items: center; gap: .5rem; }
.side-foot { padding: .75rem; background: var(--s-low); display: flex; flex-direction: column; gap: .25rem; }
.side-foot div { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: baseline; }
.side-foot div > :last-child { text-align: right; }

.shell { padding-left: 16rem; min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar); height: 4rem; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--topbar-bg); backdrop-filter: blur(16px); box-shadow: 0 1px 8px var(--shadow);
}
.top-l, .top-r { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: var(--r); background: var(--s-high); white-space: nowrap; }
.pill.small { padding: .125rem .5rem; background: var(--s); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex: none; }
.dot.sm { width: .375rem; height: .375rem; }
.btn {
  display: inline-flex; align-items: center; gap: .25rem; padding: .375rem .75rem; border: 0; border-radius: var(--r);
  background: var(--s-high); color: var(--on); cursor: pointer; font: 500 .75rem/1rem var(--mono); letter-spacing: .03em;
}
.btn:hover { background: var(--s-highest); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--primary-c); color: var(--on-primary-c); font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.icon-only { padding: .375rem; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#run-result { max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who { display: flex; flex-direction: column; text-align: right; }

main { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.card { background: var(--s-low); border-radius: var(--r-lg); padding: .75rem; box-shadow: 0 1px 2px var(--shadow); border: 1px solid var(--s-high); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--s); border-radius: var(--r); margin-bottom: .75rem; }
.card-title { display: flex; align-items: center; gap: .5rem; }
.card-title h2 { margin: 0; font: 700 1.125rem/1.5rem var(--sans); letter-spacing: -.01em; }
.card-title p { margin: 0; font-size: .75rem; line-height: 1rem; color: var(--on-var); }
.ico-box { width: 2rem; height: 2rem; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--r); font: 600 .6875rem/1rem var(--mono); letter-spacing: .04em; white-space: nowrap; }

.subhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; background: var(--s-low); padding: .75rem 1rem; border-radius: var(--r-lg); }
.subhead h1 { margin: 0; font: 600 1.125rem/1.5rem var(--sans); letter-spacing: -.01em; }
.subhead p { margin: .125rem 0 0; font-size: .75rem; color: var(--on-var); }

.banner { border-radius: var(--r-lg); padding: .625rem .875rem; display: flex; gap: .5rem; align-items: flex-start; background: var(--banner-warn); color: var(--warn); }
.banner.error { background: var(--banner-err); color: var(--err); }

/* ---------- Sayac seridi ---------- */
.kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.kpi {
  background: var(--s-low); border: 0; border-radius: var(--r-lg); padding: .75rem; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; min-height: 7rem;
  transition: background .15s, box-shadow .15s;
}
.kpi:hover { background: var(--s); }
.kpi.selected { box-shadow: inset 0 0 0 1px var(--primary-c); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; gap: .25rem; }
.kpi-top .label { text-transform: uppercase; }
.kpi-mid { display: flex; align-items: baseline; justify-content: space-between; gap: .25rem; }
.kpi-val { font: 600 1.75rem/2rem var(--mono); letter-spacing: -.03em; }
.kpi-foot { font: 500 .6875rem/.875rem var(--mono); letter-spacing: .02em; color: var(--on-var); display: flex; justify-content: space-between; gap: .25rem; }
.kpi.alarm { background: var(--s); box-shadow: 0 0 16px var(--alarm-glow); }

/* ---------- Iki sutun ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.split > .col-7 { grid-column: span 7; }
.split > .col-5 { grid-column: span 5; }
/* Uzun listeler panel icinde kayar; asagidaki envanter itilmez */
.scroll { max-height: 38rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--s-highest) transparent; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .75rem; line-height: 1rem; }
th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--s); color: var(--on-var); text-align: left; padding: .625rem .75rem; font: 500 .6875rem/.875rem var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
td { padding: .625rem .75rem; vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--s); }
tbody tr:hover td { background: var(--s-high); }
.right-al { text-align: right; }
.st-name { font-weight: 600; font-size: .8125rem; color: var(--on); }
.st-id { font: 500 .6875rem/.875rem var(--mono); color: var(--outline); }
.st-note { font: 500 .6875rem/.875rem var(--mono); margin-top: .125rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--on-var); font-size: .8125rem; padding: .75rem; }

.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--r); font: 700 .6875rem/1rem var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.b-healthy { background: var(--tint-ok); color: var(--ok); }
.b-charging { background: var(--tint-primary); color: var(--primary); }
.b-fault { background: var(--tint-warn); color: var(--warn); }
.b-offline { background: var(--err-c); color: var(--on-err-c); }
.b-no_data { background: var(--nodata-c); color: var(--nodata); }
.b-missing { background: var(--s-highest); color: var(--on-var); }
.b-alarm { background: var(--err); color: var(--on-alarm); }
.c-healthy { color: var(--ok); } .bg-healthy { background: var(--ok); }
.c-charging { color: var(--primary); } .bg-charging { background: var(--primary); }
.c-fault { color: var(--warn); } .bg-fault { background: var(--warn); }
.c-offline { color: var(--err); } .bg-offline { background: var(--err); }
.c-no_data { color: var(--nodata); } .bg-no_data { background: var(--nodata); }
.c-missing { color: var(--on-var); } .bg-missing { background: var(--outline); }

/* ---------- Basari analitigi ---------- */
.net-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .75rem; }
.net { background: var(--s); border-radius: var(--r); padding: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.net-row { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem; }
.net-val { font: 700 1.25rem/1.75rem var(--sans); }
.tabs { display: flex; gap: .25rem; margin-bottom: .5rem; }
.tab { flex: 1; padding: .375rem .5rem; border: 0; border-radius: var(--r); background: var(--s); color: var(--on-var); cursor: pointer; font: 600 .75rem/1rem var(--mono); }
.tab.active { background: var(--primary-c); color: var(--on-primary-c); }
.sa-section-label { display: flex; align-items: center; gap: .25rem; color: var(--err); text-transform: uppercase; margin: .25rem 0 .375rem; }
.sa-list { display: flex; flex-direction: column; gap: .25rem; }
.sa-card { background: var(--s); border-radius: var(--r); padding: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.sa-card:hover { background: var(--s-high); }
.sa-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.sa-name { font-weight: 600; font-size: .875rem; line-height: 1.25rem; }
.rate-chip { padding: .125rem .5rem; border-radius: var(--r); font: 700 .75rem/1rem var(--mono); white-space: nowrap; }
.rate-bad { background: var(--tint-err); color: var(--err); }
.rate-warn { background: var(--tint-warn); color: var(--warn); }
.code-row { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.code-chip { padding: .125rem .375rem; border-radius: var(--r); background: var(--s-highest); font: 500 .6875rem/1rem var(--mono); }
.desc-chip { padding: .125rem .375rem; border-radius: var(--r); background: var(--s-highest); color: var(--on-var); font-size: .6875rem; line-height: 1rem; }
details.sample { margin-top: .5rem; }
details.sample summary { cursor: pointer; color: var(--on-var); padding: .25rem 0; }
.causes { margin-top: .75rem; background: var(--s); border-radius: var(--r); padding: .5rem; }
.causes .label { color: var(--on-var); text-transform: uppercase; display: block; margin-bottom: .25rem; }
.cause { display: inline-flex; gap: .25rem; margin: 0 .25rem .25rem 0; padding: .125rem .5rem; border-radius: var(--r); background: var(--s-high); font: 500 .6875rem/1rem var(--mono); }

/* ---------- Envanter ---------- */
.inv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.search { position: relative; flex: 1; max-width: 28rem; min-width: 14rem; }
.search .icon { position: absolute; left: .625rem; top: .5rem; color: var(--outline); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search input { -webkit-appearance: none; appearance: none; display: block; width: 100%; padding: .375rem 2rem .375rem 2.25rem; border: 0; border-radius: var(--r); background: var(--bg); color: var(--on); font-size: .75rem; }
.search input::placeholder { color: var(--outline); }
.search input:focus { outline: 1px solid var(--primary-c); background: var(--s-high); }
.search .clear {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center; overflow: hidden;
  background: none; border: 0; color: var(--outline); cursor: pointer; padding: 0;
}
.search .clear:hover { color: var(--on); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding-bottom: .25rem; margin-bottom: .5rem; }
.fchip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; border: 0; border-radius: var(--r); background: var(--s-high); color: var(--on); cursor: pointer; white-space: nowrap; font: 500 .6875rem/1rem var(--mono); }
.fchip:hover { background: var(--s-highest); }
.fchip.active { background: var(--primary-c); color: var(--on-primary-c); font-weight: 700; }
.fchip.soft { background: var(--s); }
.sep { width: 1px; height: 1rem; background: var(--s-highest); flex: none; margin: 0 .25rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; color: var(--on-var); font: 500 .6875rem/1rem var(--mono); }
.inv-scroll { max-height: 70vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--s-highest) transparent; }
.pages { display: flex; gap: .25rem; align-items: center; }
.pages button { padding: .25rem .625rem; border: 0; border-radius: var(--r); background: var(--s); color: var(--on); cursor: pointer; font: inherit; }
.pages button.active { background: var(--primary-c); color: var(--on-primary-c); font-weight: 700; }
.pages button:disabled { opacity: .4; cursor: default; }

/* ---------- Olaylar ---------- */
.events { background: var(--s-lowest); }
.ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
.ev { background: var(--s); border-radius: var(--r); padding: .25rem .5rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font: 500 .6875rem/1rem var(--mono); min-width: 0; }
.ev-l { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.ev-l .t { font-weight: 700; flex: none; }
.ev-l .txt { color: var(--on); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); }
.ev .r { color: var(--outline); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Ayarlar ve giris ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem 1rem; align-items: end; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field label { color: var(--on-var); font: 500 .6875rem/.875rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.field input[type=text], .field input[type=password], .field input:not([type]) {
  padding: .5rem .625rem; border: 0; border-radius: var(--r); background: var(--bg); color: var(--on);
}
.field input:focus { outline: 1px solid var(--primary-c); }
.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--on); }
#conn-result { margin-top: .5rem; font-size: .8125rem; }
#conn-result.error { color: var(--err); }
#conn-result.ok { color: var(--ok); }
.overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: none; align-items: center; justify-content: center; z-index: var(--z-overlay); }
.login { background: var(--s-low); padding: 1.75rem; border-radius: var(--r-lg); width: min(22rem, 92vw); box-shadow: 0 12px 40px var(--shadow-strong); border: 1px solid var(--s-high); display: flex; flex-direction: column; gap: .75rem; }
.login h2 { margin: 0; font: 600 1.25rem/1.75rem var(--sans); }
#auth-error { color: var(--err); font-size: .8125rem; min-height: 1.125rem; margin: 0; }

/* ---------- Daraltilabilir kenar cubugu ---------- */
.sidebar, .shell { transition: width .18s ease, padding-left .18s ease; }
.brand-text { min-width: 0; }
body.sb-collapsed .sidebar { width: 4rem; }
body.sb-collapsed .shell { padding-left: 4rem; }
body.sb-collapsed .brand { justify-content: center; padding: 0; }
body.sb-collapsed .brand-text, body.sb-collapsed .fleet, body.sb-collapsed .side-foot,
body.sb-collapsed .nav-text, body.sb-collapsed #nav-total { display: none; }
body.sb-collapsed nav.side a { justify-content: center; padding: .5rem; position: relative; }
body.sb-collapsed #nav-alarms { position: absolute; top: .125rem; right: .125rem; padding: 0 .25rem; font-size: .625rem; }

/* ---------- Istasyon ayrintisi (oturumlar) ---------- */
.clickable { cursor: pointer; }
.sa-card.clickable:focus-visible, tr.clickable:focus-visible { outline: 1px solid var(--primary-c); }
.stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.stat { background: var(--s); border-radius: var(--r); padding: .5rem .75rem; }
.stat .v { font: 600 1.25rem/1.75rem var(--mono); }
.ok-b { background: var(--tint-ok); color: var(--ok); }
.fail-b { background: var(--tint-err); color: var(--err); }
.skip-b { background: var(--s-highest); color: var(--on-var); }
.seq { color: var(--outline); font: 500 .6875rem/1rem var(--mono); }
.charged-flag { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; padding: .125rem .5rem; border-radius: var(--r); background: var(--tint-primary); color: var(--primary); font: 600 .6875rem/1rem var(--mono); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Olasi sebepler ---------- */
.diag { background: var(--s); border-radius: var(--r-lg); padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.diag-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.diag-head h3 { margin: 0; font: 700 .9375rem/1.25rem var(--sans); }
.findings { display: flex; flex-direction: column; gap: .375rem; }
.finding { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .625rem; border-radius: var(--r); background: var(--s-low); border-left: 3px solid var(--outline); }
.finding.high { border-left-color: var(--err); }
.finding.med { border-left-color: var(--warn); }
.finding.info { border-left-color: var(--primary); }
.finding.ok { border-left-color: var(--ok); }
.finding .t { font-weight: 600; font-size: .8125rem; }
.finding .d { color: var(--on-var); font-size: .75rem; line-height: 1.1rem; }
.kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .5rem; }
details.kb { background: var(--s-low); border-radius: var(--r); padding: .5rem .625rem; }
details.kb summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; list-style: none; }
details.kb summary::-webkit-details-marker { display: none; }
details.kb summary::before { content: 'â–¸'; color: var(--outline); }
details.kb[open] summary::before { content: 'â–¾'; }
.kb h4 { margin: .5rem 0 .125rem; font: 600 .6875rem/1rem var(--mono); letter-spacing: .04em; color: var(--on-var); }
.kb ul { margin: 0; padding-left: 1.1rem; font-size: .75rem; line-height: 1.1rem; }
.kb .pdf { font-size: .75rem; line-height: 1.1rem; background: var(--s); border-radius: var(--r); padding: .375rem .5rem; }

/* ---------- Duyarli ---------- */
@media (max-width: 1600px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1440px) {
  .split > .col-7, .split > .col-5 { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .sidebar { position: static; width: auto; height: auto; }
  .sidebar .fleet, .sidebar .side-foot { display: none; }
  nav.side { flex-direction: row; overflow-x: auto; padding: .5rem; }
  nav.side a { white-space: nowrap; }
  .shell { padding-left: 0; }
  .topbar { height: auto; flex-wrap: wrap; padding: .5rem 1rem; }
  .hide-md { display: none !important; }
  body.sb-collapsed .sidebar { width: auto; }
  body.sb-collapsed .shell { padding-left: 0; }
  body.sb-collapsed nav.side { display: none; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-boxes { grid-template-columns: 1fr; }
  .ev-grid { grid-template-columns: 1fr; }
  .who { display: none; }
  main { padding: .75rem; }
}

/* Siralanabilir sutun basligi */
.th-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .125rem; }
.th-sort:hover, .th-sort.active { color: var(--primary); }

/* ---------- Ikon kutulari ---------- */
.ico-primary { background: var(--tint-primary); color: var(--primary); }
.ico-warn { background: var(--tint-warn); color: var(--warn); }
.ico-err { background: var(--tint-err); color: var(--err); }

/* ---------- Istasyon ayrinti sayfasi (istasyon.html) ---------- */
.page { max-width: 90rem; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: .75rem 1rem; }
.page-head h1 { margin: .25rem 0 0; font: 700 1.25rem/1.75rem var(--sans); }
.back { font: 500 .75rem/1rem var(--mono); color: var(--primary); text-decoration: none; }
.back:hover { text-decoration: underline; }
.ptabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--s-highest); }
.ptab { padding: .5rem 1rem; border: 0; background: none; color: var(--on-var); cursor: pointer; font: 600 .8125rem/1.25rem var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptab:hover { color: var(--on); }
.ptab.active { color: var(--primary); border-bottom-color: var(--primary); }
.codes-table td { vertical-align: middle; }
.codes-table tr.expand td { background: var(--s) !important; }
.cause-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .75rem; padding: .25rem 0; }
.cause-box h4 { margin: 0 0 .25rem; font: 600 .6875rem/1rem var(--mono); letter-spacing: .04em; color: var(--on-var); }
.cause-box ul { margin: 0; padding-left: 1.1rem; font-size: .8125rem; line-height: 1.2rem; }
.cause-box .pdf { font-size: .8125rem; line-height: 1.2rem; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r); padding: .375rem .5rem; }

/* Istasyon sayfasi: kutular ve tablolar zeminden ayrissin */
.page .stat { background: var(--s-low); border: 1px solid var(--s-high); }
.page .table-wrap { background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); }
.page .finding { background: var(--s-low); border-top: 1px solid var(--s-high); border-right: 1px solid var(--s-high); border-bottom: 1px solid var(--s-high); }
a.btn { text-decoration: none; }

/* ---------- Istasyon acilir penceresi (izleme.html) ----------
   Icerik istasyon.html'in kendisi (iframe); pencere icinde normal sayfa akisi
   oldugu icin eski cekmecedeki tablo sikisma sorunu olmaz. */
/* Tasinabilir pencere: arka sayfa kullanilabilir kalir (katman tiklamalari gecirir) */
.win-layer { position: fixed; inset: 0; z-index: var(--z-windows); pointer-events: none; }
.modal {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  min-width: 26rem; min-height: 16rem; max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  background: var(--bg); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 16px 48px var(--shadow-strong); border: 1px solid var(--s-high);
  resize: both;
}
.modal.maximized { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; border-radius: 0; resize: none; }
.modal.dragging iframe, .modal.resizing iframe { pointer-events: none; }
.modal.dragging { opacity: .96; }
/* Birden fazla pencerede ondeki belirgin */
.modal.front { box-shadow: 0 18px 56px var(--shadow-strong); border-color: var(--outline-var); }
.modal-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .375rem .5rem .375rem .75rem; background: var(--s-low); border-bottom: 1px solid var(--s-high); cursor: move; user-select: none; touch-action: none; }
.modal.maximized .modal-bar { cursor: default; }
.win-btns { display: flex; gap: .375rem; align-items: center; flex: none; cursor: default; }
/* Kucultulen pencereler: sag altta, imzanin (DESIGN BY MNK) USTUNDE alt alta */
.win-docks { position: fixed; right: 1rem; bottom: 3.5rem; z-index: var(--z-docks); display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; pointer-events: none; }
.win-dock {
  position: relative; pointer-events: auto; max-width: min(24rem, 90vw);
  display: inline-flex; align-items: stretch; border-radius: var(--r-lg); overflow: hidden;
  background: var(--s-low); color: var(--on); border: 1px solid var(--s-highest); box-shadow: 0 8px 24px var(--shadow-strong);
}
.win-dock:hover { border-color: var(--primary-c); }
.win-dock button { border: 0; background: none; color: inherit; cursor: pointer; font: 600 .8125rem/1.25rem var(--sans); }
.dock-open { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .5rem .5rem .75rem; min-width: 0; }
.dock-open span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-close { display: inline-grid; place-items: center; padding: 0 .625rem; border-left: 1px solid var(--s-high) !important; color: var(--on-var) !important; }
.dock-open:hover { background: var(--s); }
.dock-close:hover { background: var(--tint-err); color: var(--err) !important; }
.win-dock[hidden] { display: none; }
@media (max-width: 640px) { .hide-sm { display: none; } .modal { min-width: 0; } }
.modal-bar .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* Pencere icinde gosterilen istasyon sayfasi: tekrar eden ogeler gizli */
html.embedded .back, html.embedded #theme-toggle, html.embedded #mode-switch { display: none !important; }
html.embedded .page { max-width: none; }
/* Pencere icinde kaydirma sona gelince arka sayfa kaymasin */
html.embedded, html.embedded body { overscroll-behavior: contain; }
.modal, .scroll, .inv-scroll, #sa-body { overscroll-behavior: contain; }

/* Basarili kodla bitip enerji verilmeyen oturum notu */
.charged-flag.low-flag { background: var(--tint-err); color: var(--err); }

/* ---------- Sayfalar (body[data-view]) ---------- */
.home { display: none; }
body[data-view="anasayfa"] .home { display: block; }
/* Ana Sayfa: yalnizca ozet (+ uyarilar, kurulum gerekiyorsa ayarlar) */
body[data-view="anasayfa"] main > :not(#home):not(#banners):not(#settings.needs-setup) { display: none; }

/* Tek bolum sayfalari: basliklar ve KPI yok, bolum tam genislik */
body[data-view="basari"] main > :not(#banners):not(.split),
body[data-view="alarmlar"] main > :not(#banners):not(.split),
body[data-view="istasyonlar"] main > :not(#banners):not(#inventory),
body[data-view="analiz"] main > :not(#banners):not(#ganaliz),
body[data-view="bilgiler"] main > :not(#banners):not(#info),
body[data-view="terimler"] main > :not(#banners):not(#terimler),
body[data-view="kilavuzlar"] main > :not(#banners):not(#kilavuz),
body[data-view="personel"] main > :not(#banners):not(#personel),
body[data-view="goflow"] main > :not(#banners):not(#goflow),
body[data-view="inceleme"] main > :not(#banners):not(#inceleme),
body[data-view="olaylar"] main > :not(#banners):not(#events),
body[data-view="ayarlar"] main > :not(#banners):not(#settings) { display: none; }
body[data-view="basari"] #alarms, body[data-view="alarmlar"] #sa { display: none; }
body[data-view="basari"] #sa, body[data-view="alarmlar"] #alarms { grid-column: 1 / -1; }
body[data-view="basari"] #sa-body, body[data-view="alarmlar"] #alarms .scroll { max-height: calc(100vh - 16rem); max-height: calc(100dvh - 16rem); }
body[data-view="istasyonlar"] .inv-scroll { max-height: calc(100vh - 15rem); max-height: calc(100dvh - 15rem); }

/* Ana Sayfa ozetleri */
.home-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .625rem; }
.home-card-h .label.muted { font-weight: 700; letter-spacing: .06em; }
.home-more { color: var(--primary); text-decoration: none; font-weight: 600; }
.home-more:hover { text-decoration: underline; }
.stack-bar { display: flex; height: .75rem; border-radius: 999px; overflow: hidden; background: var(--s-high); gap: 2px; }
.stack-bar > span { display: block; min-width: 3px; }
.stack-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .25rem .75rem; margin-top: .75rem; }
.legend-item { white-space: nowrap; display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem; border-radius: var(--r); color: inherit; text-decoration: none; font-size: .8125rem; }
.legend-item:hover { background: var(--s-high); }
.legend-val { margin-left: auto; font: 700 .875rem/1.25rem var(--mono); }
.legend-item .dim { font: 500 .6875rem/1rem var(--mono); min-width: 2.75rem; text-align: right; }
.home-list { display: flex; flex-direction: column; gap: .25rem; }
.home-row { display: flex; align-items: center; gap: .625rem; padding: .5rem .5rem; border-radius: var(--r); background: var(--s); }
.home-row:hover { background: var(--s-high); }
.home-row-name { flex: 1; min-width: 0; font-weight: 600; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row .code-chip { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .home-lists { grid-template-columns: minmax(0, 1fr); }
}

/* Ana Sayfa (tasarim: karsilama + 4 KPI + dagilim + bolum kartlari + listeler + serit) */
.home.home { flex-direction: column; gap: 1rem; }
body[data-view="anasayfa"] .home { display: flex; }
.home-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hero { position: relative; overflow: hidden; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px var(--shadow); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.hero-glow.a { width: 18rem; height: 18rem; right: -4rem; top: -4rem; background: var(--tint-primary); }
.hero-glow.b { width: 15rem; height: 15rem; left: -2.5rem; bottom: -2.5rem; background: var(--tint-ok); }
.hero-in { position: relative; height: 5.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Ana sayfa basligi: buyuk NEXUS logosu (kullanici istegi 2026-10-01) */
.hero .hero-logo { margin: 0; display: flex; align-items: center; gap: 1.25rem; }
.hero-mark { height: clamp(2.5rem, 6vw, 4.5rem); width: auto; display: block; filter: drop-shadow(0 0 1.25rem rgba(71, 89, 235, .45)); }
.hero-word { height: clamp(1.75rem, 4vw, 3.1rem); max-width: 100%; width: auto; display: block; color: var(--on); }
.hero-stats { list-style: none; margin: 0; padding: 0; flex: none; text-align: right; color: var(--ok); font: 400 .8125rem/1.3125rem var(--mono); }
.hero-stats b { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-stats li { white-space: nowrap; }
.hero .hero-logo { min-width: 0; }
@media (max-width: 760px) { .hero-in { height: auto; min-height: 5.25rem; flex-direction: column-reverse; align-items: flex-start; justify-content: center; gap: .75rem; } }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.tag { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border-radius: var(--r); font: 600 .6875rem/1rem var(--mono); letter-spacing: .04em; }
.tag-primary { background: var(--tint-primary); color: var(--primary); }
.tag-ok { background: var(--tint-ok); color: var(--ok); }
.tag-err { background: var(--tint-err); color: var(--err); }
.hero h1 { margin: 0; font: 600 1.5rem/2rem var(--sans); letter-spacing: -.02em; }
.hero p { margin: .25rem 0 0; font-size: .875rem; color: var(--on-var); }

.hkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hkpi { background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: 1rem 1.125rem; box-shadow: 0 1px 2px var(--shadow); display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.hkpi-h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.hkpi-h .label { font-weight: 700; letter-spacing: .06em; }
.hkpi-ico { width: 2rem; height: 2rem; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.hkpi-ico .icon { font-size: 18px; }
.hkpi-v { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.hkpi-num { font: 600 1.75rem/2rem var(--mono); letter-spacing: -.03em; }
.hkpi-sub { font: 500 .75rem/1rem var(--mono); min-height: 1rem; }
.hkpi-f { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--s-high); font: 500 .6875rem/1rem var(--mono); color: var(--on-var); }
.hkpi-f strong { color: var(--on); font-weight: 600; }
.hk-link { text-decoration: none; font-weight: 600; }
.hk-link:hover { text-decoration: underline; }
.m-primary { background: var(--tint-primary); color: var(--primary); }
.m-ok { background: var(--tint-ok); color: var(--ok); }
.m-warn { background: var(--tint-warn); color: var(--warn); }
.m-err { background: var(--tint-err); color: var(--err); }
.m-neutral { background: var(--s-high); color: var(--on); }

.home-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: .25rem; }
.home-sec-h h2 { margin: 0; font: 600 1.125rem/1.5rem var(--sans); letter-spacing: -.01em; }
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mod { display: flex; flex-direction: column; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: 1.125rem; box-shadow: 0 1px 2px var(--shadow); color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.mod.m-primary, .mod.m-ok, .mod.m-warn, .mod.m-err, .mod.m-neutral { background: var(--s-low); color: inherit; }
.mod:hover { border-color: var(--primary); }
.mod:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary-c); outline-offset: 2px; }
.mod-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mod-ico { width: 2.5rem; height: 2.5rem; border-radius: var(--r); display: grid; place-items: center; transition: transform .15s; }
.mod-ico .icon { font-size: 22px; }
.mod.m-primary .mod-ico { background: var(--tint-primary); color: var(--primary); }
.mod.m-ok .mod-ico { background: var(--tint-ok); color: var(--ok); }
.mod.m-warn .mod-ico { background: var(--tint-warn); color: var(--warn); }
.mod.m-err .mod-ico { background: var(--tint-err); color: var(--err); }
.mod.m-neutral .mod-ico { background: var(--s-high); color: var(--on); }
.mod:hover .mod-ico { transform: scale(1.05); }
.mod-arrow { color: var(--outline); font-size: 20px; transition: transform .15s, color .15s; }
.mod:hover .mod-arrow { color: var(--primary); transform: translateX(3px); }
.mod h3 { margin: .875rem 0 0; font: 600 1.0625rem/1.5rem var(--sans); }
.mod:hover h3 { color: var(--primary); }
.mod p { margin: .25rem 0 0; font-size: .75rem; line-height: 1.125rem; color: var(--on-var); flex: 1; }
.mod-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--s-high); font: 500 .6875rem/1rem var(--mono); }
.mod-stat { color: var(--on-var); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-cta { color: var(--primary); font-weight: 600; white-space: nowrap; }
.mod.m-err .mod-cta { color: var(--err); }

.strip { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: .75rem 1.25rem; }
.strip[hidden] { display: none; }
.strip-l { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.strip-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--err); flex: none; animation: strip-pulse 2s ease-in-out infinite; }
@keyframes strip-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .strip-dot { animation: none; } }
.strip-txt { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .8125rem; }
.strip-k, .strip-name { font-weight: 600; }

@media (max-width: 1200px) { .hkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hkpis, .mods, .home-lists { grid-template-columns: minmax(0, 1fr); } .hero { padding: 1rem; } }

/* Loglardan basari orani (yalnizca Basari Analitigi sayfasi) */
/* Kullanici istegi 2026-10-01: tum sayfalarda gorunur */
#log-btn:disabled { opacity: 1; cursor: progress; }
.rate-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; }
.log-chip { font: 600 .6875rem/1rem var(--mono); white-space: nowrap; }

.log-meta { margin: .125rem 0 .25rem; }
.log-rule { margin-bottom: .5rem; line-height: 1rem; }
.net-boxes.log-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .5rem; }
.rate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rate-one { display: flex; flex-direction: column; gap: .125rem; padding: .375rem .5rem; border-radius: var(--r); background: var(--s-low); }
.rate-big { font: 700 1.5rem/1.875rem var(--mono); letter-spacing: -.02em; }

/* Acik alarmlar: durum gruplari */
tr.group-row td { background: var(--s-high); padding: .5rem .75rem; position: sticky; top: 2.125rem; z-index: var(--z-sticky); }
tr.group-row td > * { vertical-align: middle; }
.group-name { font-weight: 700; margin: 0 .5rem 0 .375rem; }
.group-hint { margin-left: .5rem; font-size: .75rem; }
.group-empty { padding: .5rem .75rem; font-size: .8125rem; }
.alarm-jump { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.alarm-jump .chip { border: 0; cursor: pointer; font-weight: 700; }
.alarm-jump .chip:hover { filter: brightness(1.08); text-decoration: underline; }
/* Ilk kurulum: panel giris formu Ana Sayfa'da en ustte (uyarinin hemen alti) */
body[data-view="anasayfa"] #banners { order: -2; }
body[data-view="anasayfa"] #settings.needs-setup { order: -1; }
.cause-box .fw-box { margin-top: .5rem; font-size: .8125rem; line-height: 1.2rem; background: var(--tint-primary); border-radius: var(--r); padding: .375rem .5rem; }
.cause-box .fw-src { grid-column: 1 / -1; font-size: .6875rem; color: var(--on-var); }

/* Istasyon ayrintisi > Haberlesme grafigi */
.comm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.comm-toggle { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
.comm-range-txt { margin-left: .5rem; }
.comm-legend { display: flex; flex-wrap: wrap; gap: .375rem 1rem; align-items: center; margin-bottom: .375rem; color: var(--on-var); }
.comm-legend > span { display: inline-flex; align-items: center; gap: .375rem; }
.lg-line { display: inline-block; width: 18px; height: 2px; background: var(--primary); border-radius: 1px; }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg-dot.bad { background: var(--err); }
.lg-dot.ok { background: var(--ok); width: 8px; height: 8px; }
.comm-chart { position: relative; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: .5rem .25rem; overflow: hidden; user-select: none; }
.comm-svg { display: block; cursor: crosshair; }
.comm-panel-title { font: 700 11px var(--mono); fill: var(--on); letter-spacing: .04em; }
.comm-row-label { font: 500 10.5px var(--sans); fill: var(--on-var); }
.comm-tick { font: 500 10px var(--mono); fill: var(--on-var); }
.comm-grid { stroke: var(--s-high); stroke-width: 1; }
.comm-grid.supply { stroke: var(--tint-ok); stroke-width: 9; }
.comm-vgrid { stroke: var(--s-high); stroke-width: 1; stroke-dasharray: 2 4; }
.comm-axis { stroke: var(--outline-var); stroke-width: 1; }
.comm-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.comm-dot { stroke: var(--s-low); stroke-width: 2; }
.comm-dot.bad { fill: var(--err); }
.comm-dot.ok { fill: var(--ok); }
.comm-cross { stroke: var(--on-var); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.comm-sel { fill: var(--tint-primary); stroke: var(--primary); stroke-width: 1; pointer-events: none; }
.comm-tip { position: absolute; z-index: var(--z-chart-tip); max-width: 280px; pointer-events: none; background: var(--s); border: 1px solid var(--s-high); border-radius: var(--r); box-shadow: 0 4px 12px var(--shadow); padding: .375rem .5rem; font-size: .75rem; line-height: 1.1rem; }
.comm-tip[hidden] { display: none; }
.comm-h { margin: 1rem 0 .375rem; font: 600 .875rem/1.25rem var(--sans); }
.comm-go { padding: .25rem; }
.comm-go .icon { font-size: 16px; }

/* Istasyon Bilgileri (#bilgiler) */
#info { display: none; }
body[data-view="bilgiler"] #info { display: block; }
.info-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: .375rem 1.25rem; margin: .25rem 0 .75rem; padding: .625rem .75rem; background: var(--s); border-radius: var(--r-lg); }
.info-sum-row { display: flex; align-items: flex-start; gap: .625rem; min-width: 0; }
.info-sum-label { flex: none; width: 7.5rem; padding-top: .3rem; font-weight: 700; }
.info-sum-chips { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.info-sum-chips .fchip { padding: .1875rem .5rem; }
.info-n { margin-left: .375rem; opacity: .7; font-weight: 700; }
.info-sep { width: 1px; align-self: stretch; background: var(--s-high); margin: 0 .25rem; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .75rem; }
.info-card { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem; background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); box-shadow: 0 1px 2px var(--shadow); transition: border-color .15s; min-width: 0; }
.info-card:hover { border-color: var(--primary); }
.info-card:focus-visible { border-color: var(--primary); outline: 2px solid var(--primary-c); outline-offset: 2px; }
.info-top { display: flex; align-items: flex-start; gap: .5rem; }
.info-top > .dot { margin-top: .4rem; flex: none; }
.info-name { flex: 1; min-width: 0; }
.info-title { font-weight: 600; font-size: .875rem; line-height: 1.2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.info-facts { display: flex; flex-wrap: wrap; gap: .25rem; }
.info-fact { padding: .0625rem .4375rem; border-radius: var(--r); background: var(--s-high); font: 500 .6875rem/1.125rem var(--mono); color: var(--on); }
.info-comps { font-size: .8125rem; font-weight: 600; color: var(--on); }
.info-vers { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font: 500 .75rem/1rem var(--mono); }
.info-ver.old { color: var(--warn); font-weight: 700; }
.info-old { display: flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: var(--r); background: var(--tint-warn); color: var(--warn); font-size: .75rem; font-weight: 600; }
.info-old .icon { font-size: 16px; }
.info-none { font-size: .75rem; color: var(--on-var); }

/* Istasyon penceresi > Bilgiler */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .75rem; align-items: start; }
.spec-sec { background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: .625rem .75rem; }
.spec-sec h4 { margin: 0 0 .375rem; font: 700 .6875rem/1rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-var); }
.spec-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8125rem; }
.spec-sec { min-width: 0; }
.spec-table th, .spec-table td { position: static; background: none; text-transform: none; letter-spacing: 0; padding: .3125rem .25rem; border-top: 1px solid var(--s-high); text-align: left; vertical-align: top; }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 0; }
.spec-table th { width: 10rem; font: 500 .75rem/1.1rem var(--sans); color: var(--on-var); white-space: normal; }
.spec-table td { font-weight: 600; color: var(--on); white-space: normal; overflow-wrap: anywhere; }
.spec-old { color: var(--warn); font-weight: 700; font-size: .75rem; }
.spec-ok { color: var(--ok); font-weight: 600; font-size: .75rem; }
.manual-cell { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.manual-cell .mono { font-family: var(--mono); font-size: .75rem; word-break: break-all; }
.manual-btn { flex: none; display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--s); color: var(--on-var); cursor: pointer; }
.manual-btn:hover { color: var(--primary); border-color: var(--primary); }
.manual-btn .icon { font-size: 15px; }
.manual-edit { display: flex; flex-wrap: wrap; gap: .25rem; width: 100%; }
.manual-input { flex: 1 1 8rem; min-width: 0; padding: .25rem .375rem; border: 1px solid var(--outline-var); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1.1rem var(--mono); }
.manual-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.manual-save, .manual-cancel { padding: .1875rem .5rem; font-size: .6875rem; }
.manual-msg { width: 100%; color: var(--err); font-size: .6875rem; font-weight: 600; }
.manual-msg:empty { display: none; }

/* Menunun en altindaki ayri bolum (Veri Girisi) */
.side-extra { border-top: 1px solid var(--s-high); padding-top: .5rem; padding-bottom: .5rem; }

.manual-acts { display: inline-flex; align-items: center; gap: .375rem; }
.manual-map { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.manual-map:hover { text-decoration: underline; }
.manual-map .icon { font-size: 15px; }
.pending-box { margin-top: 1rem; padding: .5rem .75rem; border: 1px dashed var(--outline-var); border-radius: var(--r-lg); }
.pending-box summary { cursor: pointer; font-weight: 700; }

/* Istasyon ayrintisi: elle tarih araligi (Canli izlemenin solunda) */
.range-box { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; padding: .25rem .375rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s); }
.range-box[hidden] { display: none; }
.range-box.custom { border-color: var(--primary); box-shadow: 0 0 0 1px var(--tint-primary); }
.range-box input { padding: .25rem .375rem; border: 1px solid var(--outline-var); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1.1rem var(--mono); color-scheme: light dark; }
.range-box input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.range-box .btn { padding: .3125rem .625rem; font-size: .75rem; }
.range-ico { font-size: 18px; color: var(--on-var); }

/* Ust bar: COCC tarih araligi (Loglardan hesapla) */
.top-range { padding: .125rem .25rem; gap: .25rem; flex-wrap: nowrap; white-space: nowrap; }
.top-range input { width: 9.75rem; }
.top-r { flex-wrap: nowrap; }
.top-range input { padding: .1875rem .3125rem; font-size: .6875rem; }
.top-range .btn { padding: .3125rem .5rem; }
@media (max-width: 1560px) { .top-range .range-ico { display: none; } }
/* 1250-1400 px arasinda tarih kutulari sigmiyordu (tema/tam ekran dugmeleri tasiyordu; 2026-10-02) */
@media (max-width: 1400px) { .top-range input, .top-range > .dim, .top-range .range-ico { display: none; } .top-range { border: 0; background: none; padding: 0; } }
/* Ust bar sigsin: tarih araligi eklenince son cekim / baglanti yazilari dar ekranda gizlenir */
@media (max-width: 1780px) { #run-when { display: none; } }
@media (max-width: 1500px) { .top-l .pill.small { display: none; } }
.top-l { min-width: 0; }

/* Genel Analiz (#analiz) */
#ganaliz { display: flex; flex-direction: column; gap: 1rem; }
.ga-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ga-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ga-controls .seg { display: inline-flex; gap: .25rem; }
.ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ga-card { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.ga-wide { grid-column: 1 / -1; }
.ga-note { font-size: .8125rem; line-height: 1.25rem; color: var(--on-var); }
.ga-note.warn { background: var(--tint-warn); color: var(--warn); }
.ga-note.err { background: var(--tint-err); color: var(--err); }
.ga-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ga-rate-box h4 { margin: 0 0 .375rem; font: 600 .6875rem/1rem var(--mono); letter-spacing: .04em; color: var(--on-var); text-transform: uppercase; }
.ga-small { font-size: .6875rem; }
.ga-good { color: var(--ok); }
.rate-chip.ga-good { background: var(--tint-ok); }
.ga-table td { vertical-align: middle; }
.ga-name { font-weight: 600; }
.ga-id { font-size: .625rem; }
.ga-code { font-weight: 600; margin-right: .375rem; }
.ga-cat { margin: 0; }
.ga-mean { color: var(--on-var); max-width: 28rem; }
.ga-empty { margin: 0; font-size: .8125rem; }
.ga-bars { display: flex; flex-direction: column; gap: .375rem; margin-bottom: .75rem; }
.ga-bar-row { display: grid; grid-template-columns: 14rem 1fr 9rem; align-items: center; gap: .5rem; font-size: .75rem; }
.ga-bar { height: .5rem; margin: 0; }
.ga-bar-val { text-align: right; font-size: .6875rem; }
.ga-cause { background: var(--s-low); border-radius: var(--r); padding: .5rem .625rem; }
.ga-kpis { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ga-kpi { display: flex; flex-direction: column; gap: .125rem; padding: .375rem .625rem; border-radius: var(--r); background: var(--s-low); }
.ga-kpi-v { font: 700 1rem/1.5rem var(--mono); }
@media (max-width: 1100px) { .ga-grid, .ga-rates { grid-template-columns: 1fr; } .ga-bar-row { grid-template-columns: 9rem 1fr 7rem; } }

/* Istasyon penceresi: Canli izleme + Durum loglarina git alt alta */
.st-links { display: flex; flex-direction: column; gap: .375rem; align-items: stretch; }
.st-links .btn { justify-content: center; }

/* Basit / Uzman gorunum (kullanici istegi 2026-10-01) */
:root[data-mod="basit"] .uzman { display: none !important; }
:root[data-mod="uzman"] .basit { display: none !important; }
.mode-switch { display: inline-flex; border-radius: var(--r); background: var(--s-high); padding: .125rem; gap: .125rem; flex: none; }
.mode-switch button { border: 0; background: none; color: var(--on-var); padding: .25rem .625rem; border-radius: var(--r); cursor: pointer; font: 600 .6875rem/1rem var(--mono); }
.mode-switch button:hover { color: var(--on); }
.mode-switch button.active { background: var(--primary-c); color: var(--on-primary-c); }

/* Terim ipucu (?) */
.tip-wrap { display: inline-flex; align-items: center; gap: .25rem; }
.tip { position: relative; display: inline-grid; place-items: center; width: .875rem; height: .875rem; border-radius: 50%; background: var(--s-highest); color: var(--on-var); font: 700 .5625rem/1 var(--sans); cursor: help; flex: none; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.tip:hover, .tip:focus-visible { background: var(--primary-c); color: var(--on-primary-c); }
.tip:focus-visible { outline: 2px solid var(--primary-c); outline-offset: 1px; }
.tip-pop { position: fixed; z-index: var(--z-tooltip); max-width: 18rem; padding: .375rem .5rem; border-radius: var(--r); background: var(--on); color: var(--bg); font: 400 .75rem/1.05rem var(--sans); box-shadow: 0 4px 16px rgba(0,0,0,.2); pointer-events: none; }

/* Istasyon durum cumlesi */
.story { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .625rem; border-radius: var(--r); font-size: .8125rem; line-height: 1.25rem; }
.story .icon { font-size: 18px; flex: none; margin-top: .0625rem; }
.story-ok { background: var(--tint-ok); color: var(--on); } .story-ok .icon { color: var(--ok); }
.story-warn { background: var(--tint-warn); color: var(--on); } .story-warn .icon { color: var(--warn); }
.story-bad { background: var(--tint-err); color: var(--on); } .story-bad .icon { color: var(--err); }
.story-idle { background: var(--s-high); color: var(--on-var); } .story-idle .icon { color: var(--on-var); }
.story.compact { padding: 0; background: none; font-size: .75rem; line-height: 1.05rem; gap: .25rem; margin-top: .125rem; }
.story.compact .icon { font-size: 14px; margin-top: .0625rem; }
.story.compact .story-text { color: var(--on-var); }

/* Terimler sayfasi */
.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.term { background: var(--s-low); border-radius: var(--r); padding: .625rem .75rem; }
.term h4 { margin: 0 0 .25rem; font: 700 .8125rem/1.25rem var(--sans); }
.term p { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--on-var); }

/* Yalniz kendi sayfalarinda (Genel Bakis tum bolumleri gosterir) */
#ganaliz, #terimler { display: none; }
body[data-view="analiz"] #ganaliz { display: flex; }
body[data-view="terimler"] #terimler { display: block; }

/* Tum Istasyonlar: durum cumlesi icin ad sutunu genis */
#station-body td:first-child { min-width: 20rem; }

/* Tum Istasyonlar: basari hucresi (COCC buyuk, R.P kucuk) ve siralama */
.rate-cell .rate-main { font: 700 1rem/1.25rem var(--mono); }
.rate-cell .rate-rp { font: 500 .6875rem/1rem var(--mono); color: var(--on-var); }
.th-pair { display: inline-flex; align-items: center; gap: .5rem; }
.th-sort.th-rp { font-size: .625rem; opacity: .8; }
.th-sort.th-rp.active { opacity: 1; }

/* web-design-guidelines (2026-10-01): dokunmatikte cift dokunma gecikmesi yok;
 * hareket azaltma tercihinde animasyon ve gecisler kapali */
html { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Yardimci siniflar (satir ici stillerin yerine, 2026-10-01). !important:
 * eskiden satir ici olduklari icin bilesen kurallarini ezmeleri gerekiyor. */
.fw-500 { font-weight: 500 !important; } .fw-700 { font-weight: 700 !important; }
.upper { text-transform: uppercase !important; }
.label-strong { font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.fs-11 { font-size: .6875rem !important; } .fs-13 { font-size: .8125rem !important; }
.ff-sans { font-family: var(--sans) !important; }
.ico-12 { font-size: 12px !important; } .ico-14 { font-size: 14px !important; } .ico-16 { font-size: 16px !important; } .ico-inline { vertical-align: -3px; }
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: .25rem !important; } .mt-15 { margin-top: .375rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: .75rem !important; }
.mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .p-2 { padding: .5rem !important; }
.mw-none { max-width: none !important; }
.row { display: flex; gap: .5rem; } .row-c { display: flex; gap: .5rem; align-items: center; } .row-t { display: flex; gap: .5rem; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: .5rem; }
.inline-row { display: inline-flex; align-items: center; gap: .375rem; }
.wrap-row { display: inline-flex; gap: .25rem; flex-wrap: wrap; } .wrap-row-c { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; gap: .5rem; }
.stack-tight { display: flex; flex-direction: column; gap: .125rem; margin-top: .25rem; }
.dot-offset { margin-top: .3rem; }
.chip-neutral { background: var(--s-high) !important; }
.btn-block { justify-content: center; padding: .625rem !important; }
.link-btn { background: none; border: 0; color: var(--on-var); cursor: pointer; padding: 0; text-align: right; }
.link-btn:hover { color: var(--on); }
.card-head-plain { background: transparent !important; padding: 0 0 .5rem !important; margin: 0 !important; }
.ga-bar-fill { background: var(--primary-c); }

/* Basma tepkisi (yalniz transform) */
.btn:active:not(:disabled), .fchip:active, .tab:active, .ptab:active, .mode-switch button:active,
.th-sort:active, .mod:active, .kpi:active { transform: translateY(1px); }

/* Basliklarda tek kalan kelime olmasin */
h1, h2, h3, h4 { text-wrap: balance; }
.card-title p, .term p { text-wrap: pretty; }

/* Yukleniyor iskeleti (yalniz opacity animasyonu) */
.skel { display: block; height: .75rem; border-radius: var(--r); background: var(--s-high); animation: skel-pulse 1.4s ease-in-out infinite; }
.skel + .skel { margin-top: .375rem; }
@keyframes skel-pulse { 50% { opacity: .45; } }
.skel-row td { padding-top: .875rem; padding-bottom: .875rem; }
.skel-card { padding: .875rem 1rem; border-radius: var(--r-lg); background: var(--s-low); border: 1px solid var(--s-high); margin-bottom: .5rem; }
.skel-stat { min-height: 4.5rem; }

/* Ana icerige gec (klavye ile odaklaninca gorunur) */
.skip-link { position: fixed; left: .75rem; top: -3rem; z-index: var(--z-overlay); padding: .5rem .875rem; border-radius: var(--r); background: var(--primary-c); color: var(--on-primary-c); font-weight: 600; text-decoration: none; }
.skip-link:focus-visible { top: .75rem; outline: 2px solid var(--on); outline-offset: 2px; }
main:focus { outline: none; }

/* Ana sayfa bolum kartlari: sikisik dortlu izgara (interface-design 2026-10-02).
 * Kart tamamen tiklanabilir; "...'a git" yazilari kaldirildi. Simge notr gri,
 * yalniz Acik Alarmlar kirmizi (anlam tasiyor); ustune gelince vurgu rengi. */
.mods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1280px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mods { grid-template-columns: minmax(0, 1fr); } }
.mods .mod { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .125rem; align-items: start; padding: .875rem 1rem; }
.mods .mod-top { display: contents; }
.mods .mod .mod-ico { grid-column: 1; grid-row: 1 / span 3; width: 2.25rem; height: 2.25rem; background: var(--s); color: var(--on-var); }
.mods .mod .mod-ico .icon { font-size: 20px; }
.mods .mod.m-err .mod-ico { background: var(--tint-err); color: var(--err); }
.mods .mod:hover .mod-ico { background: var(--tint-primary); color: var(--primary); }
.mods .mod.m-err:hover .mod-ico { background: var(--tint-err); color: var(--err); }
.mods .mod-arrow, .mods #hm-badge-alarmlar { grid-column: 3; grid-row: 1; }
.mods .mod-arrow { font-size: 18px; margin-top: .125rem; }
.mods .mod h3 { grid-column: 2; grid-row: 1; margin: 0; font: 600 .9375rem/1.375rem var(--sans); }
.mods .mod p { grid-column: 2 / 4; grid-row: 2; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mods .mod-foot { grid-column: 2 / 4; grid-row: 3; margin-top: .5rem; padding-top: 0; border-top: 0; }
.mods .mod-stat { color: var(--on); }
/* Kart alt satirlari ayni hizada: aciklama satiri esnek, alt bilgi en altta */
.mods .mod { grid-template-rows: auto 1fr auto; }
/* Menu alt bilgisi: uzun deger dengeli iki satira bolunsun, tek kelime kalmasin */
.side-foot div > :last-child { text-wrap: balance; }
/* Telefon: ust bar dugmeleri alt satira gecsin, sayfa yana tasmasin */
@media (max-width: 640px) {
  .top-r { flex-wrap: wrap; row-gap: .5rem; }
  #fullscreen-btn { display: none; }
}

/* Istasyon ozeti: odak kutu genis ve buyuk, digerleri esit (interface-design 2026-10-02) */
.stats { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.stat { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.stat .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-hero { grid-column: span 2; background: var(--s-low); border: 1px solid var(--s-high); }
.stat-hero .v { font: 700 2rem/2.375rem var(--mono); letter-spacing: -.02em; }
.stat-sub { font: 500 .6875rem/1rem var(--mono); color: var(--on-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-rates { display: grid; grid-template-columns: auto auto 1fr; gap: .125rem .625rem; margin-top: .375rem; font: 500 .6875rem/1rem var(--mono); white-space: nowrap; }
.stat-rates .dim { text-align: right; }
@media (max-width: 520px) { .stat-hero { grid-column: 1 / -1; } }
/* Odak kutu solda iki satir boyu; digerleri sagda 3x2 (etiketler tam sigsin) */
.stats { grid-template-columns: minmax(14rem, 1.3fr) repeat(3, minmax(0, 1fr)); }
.stat-hero { grid-column: auto; grid-row: span 2; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-hero { grid-column: 1 / -1; grid-row: auto; } }
/* Basit: "Sayilmayan" gizli; bos hucre kalmasin */
:root[data-mod="basit"] .stats > .stat:nth-child(6) { grid-column: span 2; }
@media (max-width: 760px) { :root[data-mod="basit"] .stats > .stat:nth-child(6) { grid-column: auto; } }
/* Istasyon basligi: baslik blogu daralabilir, kontroller sagda kalir */
.page-head > div:first-child { flex: 1 1 20rem; min-width: 0; }
/* Sigmazsa sag blok alta iner ve kendi icinde sarar (yan panel / dar pencere; 2026-10-06 tasma duzeltmesi) */
.page-head > div:last-child { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.page-head .range-box { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  .page-head > div:last-child { flex: 1 1 100%; flex-wrap: wrap; }
  .page-head .range-box { flex-wrap: wrap; }
}

/* Istasyon penceresi: oturum dipnotu Bilgiler sekmesinde gizli */
body[data-tab="info"] .sess-note { display: none !important; }

/* Basari kartlari: basitte iki satir (sayi + en sik sorun ayni satirda, sade metin) */
.sa-meta { font-family: var(--mono); }
.sa-why { font-family: var(--sans); color: var(--on-var); font-size: .75rem; }

/* Tum Istasyonlar: ariza nedeni durum hucresinde */
.inv-reason { margin-top: .25rem; font-size: .6875rem; line-height: 1rem; max-width: 12rem; }

/* Genel Analiz: en basarili/basarisiz tablolarinda sorun satiri */
.ga-why { margin-top: .125rem; font-size: .6875rem; line-height: 1rem; color: var(--on-var); }

/* Istasyon Bilgileri (interface-design 2026-10-02):
 * "Bilgi yok" cipleri geri planda (kesik cizgi, sonuk); "Eski surum" uyarisi kutu
 * yerine renkli satir (167 kartta turuncu kutu sayfayi bogiyordu) */
.info-sum-chips .fchip.soft:not(.active) { background: none; color: var(--outline); box-shadow: inset 0 0 0 1px var(--s-highest); }
.info-old { background: none; padding: 0; font-weight: 500; }

/* Genel Bakis ozet kartlari: 4 (ve 2) sutunda 7. kart bosluk birakmasin; acik alarm iki sutun */
@media (max-width: 1600px) { .kpis .kpi-alarm { grid-column: span 2; } }

/* Terimler gruplari */
.term-group + .term-group { margin-top: 1.25rem; }
.term-group-h { margin: .75rem 0 0; font: 600 .6875rem/1rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-var); }

/* Panel Ayarlari: Teltonika RMS */
.rms-box { margin: .75rem 0; padding: .75rem; border-radius: var(--r-lg); background: var(--s); }
.rms-input { flex: 1 1 20rem; min-width: 0; padding: .375rem .5rem; border: 1px solid var(--outline-var); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1.1rem var(--mono); }

/* Durum dagilimi: "Calisiyor" blogu (saglikli + sarjda), sarjdaki kisim akan isikla
 * (kullanici secimi 2026-10-02). Yalniz transform animasyonu; hareket azaltmada durur. */
.stack-bar > .fleet-run { display: flex; height: 100%; min-width: 3px; }
.fleet-run > span { display: block; height: 100%; min-width: 2px; }
/* Iki temada da: bosta acik yesil, sarjda koyu yesil */
:root { --run-idle: #3fbf8a; --run-chg: #0a6e4c; }
:root[data-theme="dark"] { --run-idle: #4edea3; --run-chg: #00a572; }
.bg-run-idle { background: var(--run-idle); }
.c-run-idle { color: var(--run-idle); }
.fleet-chg, .bg-run-chg { background: var(--run-chg); }
.c-run-chg { color: var(--run-chg); }
.fleet-chg { position: relative; overflow: hidden; }
.fleet-chg::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: fleet-flow 1.8s ease-in-out infinite;
}
@keyframes fleet-flow { to { transform: translateX(250%); } }
.fleet-run-brace { position: relative; height: .375rem; margin: .375rem 0 1.375rem; border: 1.5px solid var(--run-chg); border-top: 0; border-radius: 0 0 4px 4px; }
.fleet-run-brace[hidden] { display: none; }
.fleet-run-brace span { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 .6875rem/1rem var(--mono); color: var(--ok); }

/* ===================== Basit gorunum (2026-10-02) =====================
 * Teknik bilgisi az olan ekip icin sade duzen. Renk ve yazi tipleri ayni;
 * Uzman gorunum degismez. Ayrintilara her bolumdeki "→" baglantilariyla ulasilir. */

/* Menu: 4 oge (Ana Sayfa, Sorunlar, Istasyonlar, Raporlar) + "Daha fazla" */
:root[data-mod="basit"] nav.side a[data-view="anasayfa"] { order: 1; }
:root[data-mod="basit"] nav.side a[data-view="alarmlar"] { order: 2; }
:root[data-mod="basit"] nav.side a[data-view="istasyonlar"] { order: 3; }
:root[data-mod="basit"] nav.side a[data-view="analiz"] { order: 4; }
:root[data-mod="basit"] nav.side .nav-more-btn { order: 6; }
:root[data-mod="basit"] nav.side a.nav-more { order: 7; }
:root[data-mod="basit"] nav.side:not(.more-open) a.nav-more { display: none; }
.nav-more-btn { display: flex; align-items: center; width: 100%; padding: .5rem .75rem; margin-top: .25rem; border: 0; border-top: 1px solid var(--s-high); border-radius: 0; background: none; color: var(--on-var); font: 500 .8125rem var(--sans); cursor: pointer; text-align: left; }
.nav-more-btn:hover { color: var(--on); }
.nav-more-btn .nav-l { display: flex; align-items: center; gap: .5rem; }
:root[data-mod="basit"] nav.side a { font-size: .875rem; }

/* Ana sayfa */
.hb-head { margin: 1rem 0 1rem; font: 600 1.3125rem/1.8125rem var(--sans); letter-spacing: -.01em; color: var(--on); }
.hb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.hb-tile { position: relative; display: flex; flex-direction: column; gap: .125rem; padding: 1rem 1.125rem; border-radius: var(--r-lg); background: var(--s-low); border: 1px solid var(--s-high); border-left-width: 4px; color: var(--on); text-decoration: none; box-shadow: 0 1px 2px var(--shadow); }
.hb-tile:hover { border-color: var(--outline-var); }
.hb-tile.t-ok { border-left-color: var(--ok); }
.hb-tile.t-err { border-left-color: var(--err); }
.hb-tile.t-warn { border-left-color: var(--warn); }
.hb-go { position: absolute; top: .875rem; right: .875rem; color: var(--on-var); }
.hb-n { font: 700 2.125rem/2.5rem var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hb-t { font-weight: 600; font-size: .9375rem; }
.hb-s { color: var(--on-var); font-size: .8125rem; }
.hb-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .625rem; }
.hb-sec h2 { margin: 0; font: 600 1rem var(--sans); }
.hb-sec a { font-size: .8125rem; font-weight: 500; color: var(--primary); text-decoration: none; }
.hb-sec a:hover { text-decoration: underline; }
.hb-list { background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 1px 2px var(--shadow); }
.hb-row { display: grid; grid-template-columns: .625rem minmax(0, 1fr) auto 1.25rem; gap: .875rem; align-items: center; padding: .8125rem 1rem; border-top: 1px solid var(--s-high); cursor: pointer; }
.hb-row:first-child { border-top: 0; }
.hb-row:hover { background: var(--s); }
.hb-row-n { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-row-w { color: var(--on-var); font-size: .8125rem; margin-top: .125rem; }
.hb-row-d { font: 600 .8125rem var(--mono); color: var(--on-var); white-space: nowrap; text-align: right; }
.hb-rate-in { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.125rem; }
.hb-rate-n { font: 700 2rem var(--mono); letter-spacing: -.02em; }
.hb-rate-m { flex: 1; min-width: 0; }
.hb-meter { height: .5rem; border-radius: 99px; background: var(--s-high); overflow: hidden; margin-bottom: .5rem; }
.hb-meter i { display: block; height: 100%; background: var(--ok-c); }
.hb-link { color: var(--primary); cursor: pointer; }
.hb-link:hover { text-decoration: underline; }
.hb-note { display: flex; gap: .5rem; align-items: center; justify-content: center; color: var(--on-var); font-size: .8125rem; margin: .5rem 0 0; }
@media (max-width: 760px) {
  .hb-tiles { grid-template-columns: 1fr; }
  .hb-head { font-size: 1.25rem; line-height: 1.75rem; }
  .hb-row-n { white-space: normal; }
  .hb-rate-in { flex-direction: column; align-items: stretch; gap: .5rem; }
}

/* Basit: istasyon penceresi Ozet sekmesi */
.sb-meta { margin-top: .25rem; color: var(--on-var); font-size: .875rem; }
.sb-status { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.125rem; border-radius: var(--r-lg); border: 1px solid var(--s-high); background: var(--s-low); margin: 1rem 0; }
.sb-status > .icon { font-size: 28px; }
.sb-status.lv-ok { border-color: var(--ok); background: var(--tint-ok); }
.sb-status.lv-ok > .icon, .sb-status.lv-ok .sb-st-t { color: var(--ok); }
.sb-status.lv-warn { border-color: var(--warn); background: var(--tint-warn); }
.sb-status.lv-warn > .icon, .sb-status.lv-warn .sb-st-t { color: var(--warn); }
.sb-status.lv-bad { border-color: var(--err); background: var(--tint-err); }
.sb-status.lv-bad > .icon, .sb-status.lv-bad .sb-st-t { color: var(--err); }
.sb-st-t { font-weight: 700; font-size: 1.0625rem; }
.sb-st-s { margin-top: .25rem; font-size: .9375rem; color: var(--on); }
.sb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.sb-num { background: var(--s-low); border: 1px solid var(--s-high); border-radius: var(--r-lg); padding: .875rem 1rem; box-shadow: 0 1px 2px var(--shadow); min-width: 0; }
.sb-num-n { font: 700 1.75rem/2.25rem var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-num-l { font-weight: 600; margin-top: .125rem; }
.sb-reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 12rem) 2rem; gap: .875rem; align-items: center; padding: .6875rem 1rem; border-top: 1px solid var(--s-high); font-size: .9375rem; }
.sb-reason:first-child { border-top: 0; }
.sb-track { height: .5rem; border-radius: 99px; background: var(--s-high); overflow: hidden; }
.sb-track i { display: block; height: 100%; background: var(--err); opacity: .75; }
.sb-reason b { text-align: right; }
.sb-sess { display: grid; grid-template-columns: 1.5rem 6.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6875rem 1rem; border-top: 1px solid var(--s-high); font-size: .9375rem; }
.sb-sess:first-child { border-top: 0; }
.sb-fold { display: grid; grid-template-columns: auto 1fr 1.25rem; gap: .75rem; align-items: center; padding: .8125rem 1rem; border-top: 1px solid var(--s-high); color: var(--on); text-decoration: none; font-weight: 600; }
.sb-fold:first-child { border-top: 0; }
.sb-fold .dim { font-weight: 400; font-size: .8125rem; text-align: right; }
.sb-fold:hover { background: var(--s); }
#pane-overview .hb-note { margin-bottom: .5rem; }
body[data-tab="overview"] .sess-note { display: none !important; }
@media (max-width: 760px) {
  .sb-nums { grid-template-columns: 1fr; }
  .sb-sess { grid-template-columns: 1.5rem 5.5rem minmax(0, 1fr); }
  .sb-sess > :last-child { display: none; }
  .sb-fold .dim { display: none; }
}

/* Basit: Tum Istasyonlar ek filtreleri yeni satirda */
.chips-break { flex-basis: 100%; height: 0; }

/* Istasyon penceresi: Mudahale gecmisi (GoFlow is emirleri) */
.wo-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.wo-sum { font-size: .875rem; }
.wo-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .875rem; align-items: start; padding: .8125rem 1rem; border-top: 1px solid var(--s-high); }
.wo-row:first-child { border-top: 0; }
.wo-row > .badge { justify-self: start; margin-top: .125rem; }
.wo-title { font-weight: 600; font-size: .9375rem; }
.wo-desc { margin-top: .375rem; font-size: .8125rem; color: var(--on); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wo-com { margin-top: .375rem; display: flex; gap: .375rem; align-items: flex-start; font-size: .75rem; color: var(--on-var); }
.wo-open { white-space: nowrap; }
.gf-user { flex: 0 1 20rem; }
@media (max-width: 760px) {
  .wo-row { grid-template-columns: 1fr; gap: .375rem; }
}

/* Sekme satiri dar pencerede kendi icinde kayar (sayfayi yana itmez) */
.ptabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--s-highest); }
.ptabs .ptab { white-space: nowrap; flex: none; margin-bottom: 0; }

/* Basari esigi duzenleme (Basari Analitigi) */
.thr-box { display: flex; align-items: center; }
.thr-btn { border: 0; cursor: pointer; }
.thr-btn:hover { filter: brightness(1.1); }
.thr-btn .icon { margin-left: .125rem; }
.thr-edit { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.thr-edit input { width: 4.5rem; padding: .25rem .375rem; border: 1px solid var(--outline-var); border-radius: var(--r); background: var(--bg); color: var(--on); font: 600 .8125rem var(--mono); }

/* Kilavuzlar sayfasi: solda liste, sagda gomulu PDF */
#kilavuz { display: none; }
body[data-view="kilavuzlar"] #kilavuz { display: block; }
:root[data-mod="basit"] nav.side a[data-view="kilavuzlar"] { order: 5; }
.kv-grid { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: .875rem; margin-top: .75rem; }
.kv-side { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.kv-list { display: flex; flex-direction: column; gap: .25rem; max-height: calc(100dvh - 17rem); overflow: auto; }
.kv-cat { margin: .5rem 0 .125rem; font: 600 .6875rem/1rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-var); }
.kv-item { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .5rem .625rem; border-radius: var(--r); border: 1px solid transparent; background: none; color: var(--on); text-align: left; cursor: pointer; font: inherit; }
.kv-item:hover { background: var(--s); }
.kv-item.active { background: var(--tint-primary); border-color: var(--primary-c); }
.kv-item .icon { color: var(--err); font-size: 18px; }
.kv-item-t { font-weight: 600; font-size: .875rem; }
.kv-item-d { color: var(--on-var); font-size: .75rem; margin-top: .125rem; }
.kv-view { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.kv-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.kv-title { font-weight: 600; }
#kv-frame { width: 100%; height: calc(100dvh - 15rem); min-height: 28rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s); }
.kv-empty { display: grid; place-items: center; min-height: 20rem; border: 1px dashed var(--s-high); border-radius: var(--r-lg); }
@media (max-width: 900px) {
  .kv-grid { grid-template-columns: 1fr; }
  .kv-list { max-height: 16rem; }
}
.kv-side .search { flex: none; max-width: none; }
.kv-side .chips:empty { display: none; }

/* ===== Tasarim gozden gecirme (taste-skill redesign denetimi, 2026-10-02) ===== */
/* Genis ekranda Basit ana sayfa satirlari ~1600 px'e yayiliyordu: okunur genislik */
:root[data-mod="basit"] #home { max-width: 80rem; }
/* Uzun aciklama satirlari (ayarlar kutulari) okunur uzunlukta */
.rms-box p { max-width: 110ch; }
/* Basliklarda tek kalan kelime olmasin */
.hb-head, .card-title h2, .hb-sec h2, .sb-st-t { text-wrap: balance; }
.hb-row-w, .sb-st-s, .wo-desc, .kv-item-d { text-wrap: pretty; }
/* Yeni etkilesimli ogeler: yumusak gecis + basma geri bildirimi (yalniz renk/transform) */
.hb-tile, .hb-row, .kv-item, .sb-fold, .nav-more-btn, .wo-row, .thr-btn {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.hb-tile:hover { background: var(--s); }
.hb-tile:active, .hb-row:active, .kv-item:active, .sb-fold:active, .thr-btn:active { transform: translateY(1px); }
/* Klavyeyle gezinmede tutarli odak cercevesi (tarayici varsayilani yerine) */
a:focus-visible, button:focus-visible, [role="link"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary-c); outline-offset: 2px;
}
.hb-row:focus-visible, .kv-item:focus-visible { outline-offset: -2px; }

/* ===================== Basit gorunum efektleri (kullanici istegi 2026-10-03) =====================
 * Yalniz Basit: gren/doku, cam yuzeyler, kademeli giris. Uzman (yogun veri) degismez.
 * Geri donus etiketi: basit-efekt-oncesi-2026-10-03. Animasyon yalniz transform/opacity;
 * "hareketi azalt" acikken global kural animasyonu kapatir. */
:root {
  --glass-bg: rgba(255, 255, 255, .64);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-line: rgba(21, 27, 40, .08);
  --ambient-a: rgba(58, 76, 217, .14);
  --ambient-b: rgba(10, 110, 76, .09);
  --grain-opacity: .09;
}
:root[data-theme="dark"] {
  --glass-bg: rgba(22, 27, 41, .58);
  --glass-edge: rgba(255, 255, 255, .06);
  --glass-line: rgba(255, 255, 255, .07);
  --ambient-a: rgba(71, 89, 235, .24);
  --ambient-b: rgba(78, 222, 163, .09);
  --grain-opacity: .13;
}

/* Ortam isigi: cam yuzeylerin arkasinda bulaniklasacak hafif renk */
:root[data-mod="basit"] body {
  background:
    radial-gradient(60rem 40rem at 85% -10%, var(--ambient-a), transparent 60%),
    radial-gradient(50rem 36rem at 10% 110%, var(--ambient-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Gren: sabit, tiklanmaz, cok hafif kumlu doku */
:root[data-mod="basit"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 85;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cam yuzeyler: yari saydam + bulaniklik + ust kenarda ince isik */
:root[data-mod="basit"] .card,
:root[data-mod="basit"] .hb-tile,
:root[data-mod="basit"] .hb-list,
:root[data-mod="basit"] .sb-num,
:root[data-mod="basit"] .spec-sec {
  background: var(--glass-bg);
  border-top-color: var(--glass-line); border-right-color: var(--glass-line); border-bottom-color: var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 2px var(--shadow), 0 8px 24px -16px var(--shadow);
}
:root[data-mod="basit"] .topbar,
:root[data-mod="basit"] .sidebar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
/* Cam icinde satir ayraclari ve hover daha yumusak */
:root[data-mod="basit"] .hb-row:hover, :root[data-mod="basit"] .sb-fold:hover { background: var(--glass-line); }

/* Kademeli giris: sayfa acilinca bloklar sirayla yerine oturur */
@keyframes nx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
:root[data-mod="basit"] .hero,
:root[data-mod="basit"] #hb > *,
:root[data-mod="basit"] .hb-tiles > *,
:root[data-mod="basit"] .hb-list > *,
:root[data-mod="basit"] main > section.card,
:root[data-mod="basit"] .ga-grid > *,
:root[data-mod="basit"] .sb-nums > *,
:root[data-mod="basit"] #pane-overview > *,
:root[data-mod="basit"] .sb-status {
  animation: nx-rise .42s cubic-bezier(.2, .7, .2, 1) both;
}
:root[data-mod="basit"] #hb > :nth-child(1) { animation-delay: .06s; }
:root[data-mod="basit"] #hb > :nth-child(2) { animation-delay: .1s; }
:root[data-mod="basit"] #hb > :nth-child(3) { animation-delay: .16s; }
:root[data-mod="basit"] #hb > :nth-child(4) { animation-delay: .2s; }
:root[data-mod="basit"] #hb > :nth-child(5) { animation-delay: .24s; }
:root[data-mod="basit"] #hb > :nth-child(n+6) { animation-delay: .28s; }
:root[data-mod="basit"] .hb-tiles > :nth-child(1), :root[data-mod="basit"] .sb-nums > :nth-child(1), :root[data-mod="basit"] .ga-grid > :nth-child(1) { animation-delay: .12s; }
:root[data-mod="basit"] .hb-tiles > :nth-child(2), :root[data-mod="basit"] .sb-nums > :nth-child(2), :root[data-mod="basit"] .ga-grid > :nth-child(2) { animation-delay: .18s; }
:root[data-mod="basit"] .hb-tiles > :nth-child(3), :root[data-mod="basit"] .sb-nums > :nth-child(3), :root[data-mod="basit"] .ga-grid > :nth-child(3) { animation-delay: .24s; }
:root[data-mod="basit"] .ga-grid > :nth-child(n+4) { animation-delay: .3s; }
:root[data-mod="basit"] .hb-list > :nth-child(1) { animation-delay: .22s; }
:root[data-mod="basit"] .hb-list > :nth-child(2) { animation-delay: .26s; }
:root[data-mod="basit"] .hb-list > :nth-child(3) { animation-delay: .3s; }
:root[data-mod="basit"] .hb-list > :nth-child(4) { animation-delay: .34s; }
:root[data-mod="basit"] .hb-list > :nth-child(n+5) { animation-delay: .38s; }
/* Kutularin renkli sol kenari cam altinda da kalir */
:root[data-mod="basit"] .hb-tile:not(.t-ok):not(.t-err):not(.t-warn), :root[data-mod="basit"] .card, :root[data-mod="basit"] .hb-list, :root[data-mod="basit"] .sb-num, :root[data-mod="basit"] .spec-sec { border-left-color: var(--glass-line); }

/* Basit efektleri: tablolu sayfalar (Sorunlar, Istasyonlar, Basari Analitigi, Olaylar, Bilgiler).
 * Duz renkli satir/baslik zeminleri cami ortuyordu: yari saydam ton + yapiskan basliklarda bulaniklik. */
:root[data-mod="basit"] .card-head { background: var(--glass-line); }
:root[data-mod="basit"] th,
:root[data-mod="basit"] tr.group-row td {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
:root[data-mod="basit"] tr.group-row td { box-shadow: inset 0 -1px 0 var(--glass-line); }
:root[data-mod="basit"] tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--s) 45%, transparent); }
:root[data-mod="basit"] tbody tr:hover td { background: var(--glass-line); }
:root[data-mod="basit"] tr.group-row:hover td { background: var(--glass-bg); }

/* Kademeli giris: yan yana kartlar ve ilk tablo satirlari */
:root[data-mod="basit"] .split > .card,
:root[data-mod="basit"] tbody > tr:nth-child(-n+14),
:root[data-mod="basit"] .kv-list > *:nth-child(-n+12),
:root[data-mod="basit"] .sa-card:nth-child(-n+12) {
  animation: nx-rise .42s cubic-bezier(.2, .7, .2, 1) both;
}
:root[data-mod="basit"] tbody > tr:nth-child(1), :root[data-mod="basit"] .kv-list > :nth-child(1) { animation-delay: .1s; }
:root[data-mod="basit"] tbody > tr:nth-child(2), :root[data-mod="basit"] .kv-list > :nth-child(2) { animation-delay: .13s; }
:root[data-mod="basit"] tbody > tr:nth-child(3), :root[data-mod="basit"] .kv-list > :nth-child(3) { animation-delay: .16s; }
:root[data-mod="basit"] tbody > tr:nth-child(4), :root[data-mod="basit"] .kv-list > :nth-child(4) { animation-delay: .19s; }
:root[data-mod="basit"] tbody > tr:nth-child(5), :root[data-mod="basit"] .kv-list > :nth-child(5) { animation-delay: .22s; }
:root[data-mod="basit"] tbody > tr:nth-child(6), :root[data-mod="basit"] .kv-list > :nth-child(6) { animation-delay: .25s; }
:root[data-mod="basit"] tbody > tr:nth-child(7), :root[data-mod="basit"] .kv-list > :nth-child(7) { animation-delay: .28s; }
:root[data-mod="basit"] tbody > tr:nth-child(8), :root[data-mod="basit"] .kv-list > :nth-child(8) { animation-delay: .31s; }
:root[data-mod="basit"] tbody > tr:nth-child(n+9), :root[data-mod="basit"] .kv-list > :nth-child(n+9) { animation-delay: .34s; }

/* Personel sayfasi (yalniz yonetici) */
#personel { display: none; }
body[data-view="personel"] #personel { display: block; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; }
.ps-span { grid-column: 1 / -1; margin-top: .75rem; }
.ps-card { display: flex; flex-direction: column; gap: .625rem; padding: .875rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--s-high); background: var(--s-low); color: var(--on); text-align: left; cursor: pointer; font: inherit; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.ps-card:hover { background: var(--s); }
.ps-card:active { transform: translateY(1px); }
.ps-card.active { border-color: var(--primary-c); box-shadow: 0 0 0 1px var(--primary-c); }
.ps-card.ps-hidden { opacity: .5; }
.ps-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ps-name { font-weight: 700; font-size: .9375rem; }
.ps-role { color: var(--on-var); font-size: .75rem; margin-top: .125rem; }
.ps-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ps-nums > div { display: flex; flex-direction: column; }
.ps-nums b { font: 700 1.375rem/1.75rem var(--mono); }
.ps-nums span { color: var(--on-var); font-size: .6875rem; }
.ps-foot { display: flex; flex-direction: column; gap: .125rem; font-size: .75rem; }
.ps-check { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; padding-top: .375rem; border-top: 1px solid var(--s-high); cursor: pointer; }
#ps-detail:not(:empty) { margin-top: 1rem; }
.ps-detail-in { padding: 1rem 1.125rem; }
.ps-detail-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.ps-detail-h h3 { margin: 0; font-size: 1.125rem; }
.ps-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .875rem; align-items: center; padding: .6875rem 1rem; border-top: 1px solid var(--s-high); }
.ps-row:first-child { border-top: 0; }
.ps-row > .badge { justify-self: start; }
.ps-row-t { font-weight: 600; font-size: .875rem; }
.ps-bars { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: 1rem; }
.ps-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .375rem .25rem; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--on); cursor: pointer; font: inherit; }
.ps-bar:hover { background: var(--s); }
.ps-bar.active { border-color: var(--primary-c); }
.ps-bar-v { font: 700 .8125rem var(--mono); }
.ps-bar-t { width: 100%; max-width: 3rem; height: 5rem; display: flex; align-items: flex-end; background: var(--s-high); border-radius: var(--r); overflow: hidden; }
.ps-bar-t i { display: block; width: 100%; background: var(--primary-c); border-radius: var(--r) var(--r) 0 0; }
.ps-bar-l { color: var(--on-var); font-size: .6875rem; }
.ps-login { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; padding: 1.25rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s-low); }
.ps-login-t { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
@media (max-width: 760px) { .ps-row { grid-template-columns: 1fr; gap: .375rem; } }
:root[data-mod="basit"] .ps-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-mod="basit"] .ps-grid > * { animation: nx-rise .42s cubic-bezier(.2, .7, .2, 1) both; }

#pw-save, #rms-save, #goflow-save { white-space: nowrap; }

/* Sarj oturumu ayrintisi (pop-up, istasyon penceresi) */
.sess-click { cursor: pointer; }
.sb-sess.sess-click:hover, tr.sess-click:hover td { background: var(--s); }
.sess-dlg { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: 1.125rem 1.25rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s-low); color: var(--on); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); overflow: auto; }
.sess-dlg::backdrop { background: rgba(5, 8, 15, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sess-dlg[open] { animation: nx-rise .22s cubic-bezier(.2, .7, .2, 1) both; }
.sd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .875rem; }
.sd-head h2 { margin: 0; font-size: 1.125rem; }
.sd-sub { color: var(--on-var); font-size: .8125rem; margin-top: .25rem; }
.sd-result { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--s-high); }
.sd-result > .icon { font-size: 26px; }
.sd-result.lv-ok { background: var(--tint-ok); border-color: var(--ok); }
.sd-result.lv-bad { background: var(--tint-err); border-color: var(--err); }
.sd-result-t { font-weight: 700; font-size: 1rem; }
.sd-result-s { margin-top: .125rem; }
.sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; margin-top: .875rem; }
.sd-stat { padding: .625rem .75rem; border-radius: var(--r); background: var(--s); }
.sd-n { font: 700 1.25rem/1.75rem var(--mono); white-space: nowrap; }
.sd-l { font-weight: 600; font-size: .8125rem; }
.sd-soc { display: flex; height: .5rem; margin-top: .625rem; border-radius: 99px; background: var(--s-high); overflow: hidden; }
.sd-soc-a { background: var(--outline-var); }
.sd-soc-b { background: var(--ok-c); }
.sd-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: flex; flex-direction: column; gap: .125rem; }
.sd-steps li { counter-increment: st; display: flex; align-items: center; gap: .5rem; padding: .375rem .625rem; border-left: 2px solid var(--ok-c); font-size: .875rem; }
.sd-steps li::before { content: counter(st); font: 600 .6875rem var(--mono); color: var(--on-var); min-width: 1rem; }
.sd-steps li.end { border-left-color: var(--err); background: var(--tint-err); }
.sd-step-flag { margin-left: auto; font: 700 .6875rem var(--mono); color: var(--err); text-transform: uppercase; }
.sd-causes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .875rem; padding: .75rem .875rem; border-radius: var(--r); background: var(--s); font-size: .8125rem; }
.sd-causes h4 { margin: 0 0 .25rem; font-size: .8125rem; }
.sd-causes ul { margin: 0; padding-left: 1.1rem; }
.sd-info { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .375rem .75rem; margin: 0 0 .5rem; font-size: .8125rem; }
.sd-info dt { color: var(--on-var); }
.sd-info dd { margin: 0; overflow-wrap: anywhere; }
.sd-foot { display: flex; justify-content: flex-end; margin-top: .75rem; }
@media (max-width: 640px) {
  .sd-stats { grid-template-columns: 1fr 1fr; }
  .sd-causes { grid-template-columns: 1fr; }
  .sd-info { grid-template-columns: 1fr; }
}
:root[data-mod="basit"] .sess-dlg { background: var(--glass-bg); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }

/* Kenara yaslama / bolunmus gorunum (istasyon pencereleri) */
.snap-preview { position: fixed; z-index: 1; pointer-events: none; border: 2px solid var(--primary-c); border-radius: var(--r-lg); background: var(--tint-primary); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease; }
.snap-preview[hidden] { display: none; }
.modal.snapped { border-radius: 0; resize: none; box-shadow: 0 0 0 1px var(--s-high), 0 0 40px -10px rgba(0, 0, 0, .5); }
body.split-right .shell { padding-right: var(--split-w); }
body.split-left .shell { padding-left: calc(var(--split-l) + var(--split-w)); }
.win-snap[aria-pressed="true"] { background: var(--primary-c); color: var(--on-primary-c); }
@media (max-width: 1099px) { .win-snap { display: none; } }
/* Bolunmus gorunumde sayfanin ust cubugu yarim genislige sigsin (dar ekran kurallari gibi) */
body.split-left .topbar, body.split-right .topbar { height: auto; min-height: 4rem; flex-wrap: wrap; row-gap: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
body.split-left .top-r, body.split-right .top-r { flex-wrap: wrap; justify-content: flex-end; row-gap: .5rem; }
body.split-left #run-when, body.split-right #run-when,
body.split-left .top-l .pill.small, body.split-right .top-l .pill.small,
body.split-left .top-range input, body.split-right .top-range input,
body.split-left .top-range > .dim, body.split-right .top-range > .dim,
body.split-left .top-range .range-ico, body.split-right .top-range .range-ico { display: none; }
body.split-left .top-range, body.split-right .top-range { border: 0; background: none; padding: 0; }

/* En sik hata kodlari: donemin oturum sayilari (kart basliginin sagi) */
.ga-sc { margin-left: auto; display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
.ga-sc-grp { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .25rem .875rem; font-size: .8125rem; }
.ga-sc-src { min-width: 3.75rem; text-align: right; }
.ga-sc-item b { font-weight: 700; color: var(--on); }
.ga-sc-item.ok b { color: var(--ok, var(--on)); }
.ga-sc-item.bad b { color: var(--err, var(--on)); }
@media (max-width: 900px) { .ga-card .card-title:has(.ga-sc) { flex-wrap: wrap; } .ga-sc { margin-left: 0; align-items: flex-start; width: 100%; } .ga-sc-grp { justify-content: flex-start; } .ga-sc-src { text-align: left; } }

/* GoFlow Acik Vakalar (2026-10-04) */
#goflow { display: none; }
body[data-view="goflow"] #goflow { display: block; }
body[data-view="goflow"] #goflow .inv-scroll { max-height: calc(100vh - 19rem); max-height: calc(100dvh - 19rem); }
.gf-kpis { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.gf-kpi { display: flex; flex-direction: column; gap: .125rem; min-width: 6.5rem; padding: .5rem .75rem; border-radius: var(--r); background: var(--s-low); }
.gf-kpi-v { font: 700 1.25rem/1.5rem var(--mono); }
.gf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.gf-search { max-width: 22rem; }
.gf-sel, .gf-date-in { padding: .375rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1rem var(--sans); color-scheme: light dark; }
.gf-sel { min-width: 11rem; }
.gf-sel:focus, .gf-date-in:focus { outline: 1px solid var(--primary-c); }
.gf-dates { display: inline-flex; align-items: center; gap: .375rem; }
.gf-table td { vertical-align: top; }
.gf-age { font-weight: 700; font-size: .8125rem; white-space: nowrap; }
.gf-title { font-weight: 600; color: var(--on); min-width: 12rem; max-width: 26rem; overflow-wrap: anywhere; }
.gf-st { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.gf-st-name { display: inline-flex; align-items: center; gap: .25rem; color: var(--primary); }
.gf-st-name .icon { opacity: .7; }
.gf-st:hover .gf-st-name span { text-decoration: underline; }
.gf-st:focus-visible { outline: 2px solid var(--primary-c); outline-offset: 2px; border-radius: 2px; }
.gf-date { white-space: nowrap; color: var(--on-var); }
.gf-note { max-width: 22rem; color: var(--on-var); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gf-open { white-space: nowrap; }
@media (max-width: 900px) { .gf-open-t { display: none; } .gf-search { max-width: none; flex-basis: 100%; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gf-prio { font-weight: 600; white-space: nowrap; }

/* Istasyon penceresi > CAN loglari (2026-10-05) */
.can-intro { max-width: 60rem; }
.can-bar { height: .375rem; }
.can-kpis { display: flex; flex-wrap: wrap; gap: .5rem; }
.can-kpi { display: flex; flex-direction: column; gap: .125rem; min-width: 8rem; padding: .5rem .75rem; border-radius: var(--r); background: var(--s-low); }
.can-kpi b { font: 700 1.125rem/1.5rem var(--mono); }
.can-toggle { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; cursor: pointer; }
.can-table td { vertical-align: top; }
.can-table .nowrap { white-space: nowrap; }
.can-ev { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* CAN logu ayrinti pop-up (2026-10-05) */
.can-row { cursor: pointer; }
.can-row:hover td { background: var(--s); }
.can-row:focus-visible { outline: 2px solid var(--primary-c); outline-offset: -2px; }
.can-dlg { width: min(72rem, calc(100vw - 2rem)); }
.cd-chart { margin-top: .875rem; padding: .625rem .75rem .5rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s-lowest); }
.cd-chart-h { display: flex; align-items: baseline; gap: .5rem; font-size: .8125rem; }
.cd-legend { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin: .25rem 0; font-size: .6875rem; color: var(--on-var); }
.cd-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.cd-plot { position: relative; }
.cd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cd-svg .cd-gl { stroke: var(--s-high); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cd-svg .cd-ax { fill: var(--outline); font: 500 10px var(--mono); }
.cd-svg .cd-seg-t { fill: #fff; font: 600 10px var(--mono); pointer-events: none; }
.cd-svg .cd-cross { stroke: var(--on-var); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.cd-tip { position: absolute; top: .25rem; transform: translateX(.75rem); min-width: 10rem; padding: .375rem .5rem; border-radius: var(--r); background: var(--s-high); box-shadow: 0 6px 18px -8px var(--shadow-strong); font-size: .6875rem; line-height: 1.1rem; pointer-events: none; z-index: 2; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: .75rem; margin-top: .875rem; }
.cd-box { padding: .75rem .875rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); }
.cd-box h3 { margin: 0 0 .5rem; font-size: .8125rem; }
.cd-kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: .75rem; }
.cd-kv dt { color: var(--on-var); }
.cd-kv dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.cd-hlc, .cd-list { margin: 0; padding-left: 1.125rem; font-size: .75rem; line-height: 1.25rem; }
.cd-bars { display: flex; flex-direction: column; gap: .25rem; }
.cd-bar-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: .5rem; align-items: center; font-size: .6875rem; }
.cd-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-bar { height: .5rem; border-radius: 2px; background: var(--s-high); overflow: hidden; }
.cd-bar > span { display: block; height: 100%; }
.cd-bar-v { white-space: nowrap; }

/* Kilavuz ekle (2026-10-05) */
#kilavuz .card-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.kv-dlg { width: min(34rem, calc(100vw - 2rem)); }
.kv-fields { display: flex; flex-direction: column; gap: .75rem; }
.kv-fields .field { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--on-var); }
.kv-fields input[type=text], .kv-fields textarea { padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 400 .8125rem/1.25rem var(--sans); resize: vertical; }
.kv-fields input[type=file] { font-size: .75rem; color: var(--on); }
.kv-fields input:focus, .kv-fields textarea:focus { outline: 1px solid var(--primary-c); }
.kv-tag { margin-left: .375rem; padding: 0 .375rem; border-radius: var(--r); background: var(--tint-primary); color: var(--primary); font: 600 .625rem/1rem var(--mono); vertical-align: middle; }

/* Incelenecek istasyonlar (2026-10-06) */
#inceleme { display: none; }
body[data-view="inceleme"] #inceleme { display: block; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.rv-card { display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem; border: 1px solid var(--s-high); border-left: 3px solid var(--warn); border-radius: var(--r-lg); background: var(--s-low); min-width: 0; }
.rv-card.rv-closed { border-left-color: var(--ok-c); opacity: .85; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; flex-wrap: wrap; }
.rv-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rv-n { display: grid; grid-template-columns: 1.25rem 1fr; gap: .375rem; align-items: start; }
.rv-n > .icon { color: var(--on-var); margin-top: .1rem; }
.rv-n-close > .icon { color: var(--ok-c); }
.rv-n-reopen > .icon { color: var(--warn); }
.rv-n-t { font-size: .8125rem; line-height: 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-actions { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--s-high); }
.rv-ta, .rv-dlg textarea { width: 100%; box-sizing: border-box; padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 400 .8125rem/1.25rem var(--sans); resize: vertical; }
.rv-ta:focus, .rv-dlg textarea:focus { outline: 1px solid var(--primary-c); }
.rv-del { margin-left: auto; }
.rv-del:hover { color: var(--err); }
/* istasyon penceresi */
.rv-dlg { width: min(36rem, calc(100vw - 2rem)); }
.rv-field { display: block; margin-bottom: .25rem; font-size: .75rem; color: var(--on-var); }
.rv-hist { display: flex; flex-direction: column; gap: .5rem; max-height: 14rem; overflow: auto; margin-bottom: .75rem; padding: .625rem .75rem; border-radius: var(--r); background: var(--s); }
.rv-note-t { font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
#st-review.rv-on { background: var(--tint-warn); color: var(--warn); }

/* Istasyon basligi (2026-10-06): tarih araligi / Analiz et / CAN loglari ortada kalmasin, ustte hizalansin */
.page-head > .row-c { align-items: flex-start; }
body[data-tab="work"] .sess-note, body[data-tab="review"] .sess-note, body[data-tab="can"] .sess-note { display: none !important; }
/* Inceleme kapanis nedeni (2026-10-06) */
.rv-close-dlg { width: min(30rem, calc(100vw - 2rem)); }
.rv-close-dlg textarea { width: 100%; box-sizing: border-box; margin-top: .75rem; padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 400 .8125rem/1.25rem var(--sans); resize: vertical; }
.rvc-opts { display: flex; flex-direction: column; gap: .25rem; }
.rvc-opt { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); cursor: pointer; font-size: .8125rem; }
.rvc-opt:hover { background: var(--s); }
.rvc-opt:has(input:checked) { border-color: var(--primary-c); background: var(--tint-primary); }
.rv-reason { font-weight: 600; }
.rv-filter-sel { padding: .25rem .5rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1rem var(--sans); }

/* Is emirleri NEXUS icinden (2026-10-06) */
.gfw-top { flex-wrap: wrap; justify-content: flex-end; }
.gfw-dlg { width: min(46rem, calc(100vw - 2rem)); }
.gfw-login { width: min(26rem, calc(100vw - 2rem)); }
.gfw-fields { display: flex; flex-direction: column; gap: .5rem; }
.gfw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.gfw-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .gfw-grid { grid-template-columns: 1fr; } }
.gfw-f { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--on-var); min-width: 0; }
.gfw-dlg input[type=text], .gfw-dlg input[type=password], .gfw-dlg input[type=datetime-local], .gfw-dlg select, .gfw-dlg textarea { width: 100%; box-sizing: border-box; padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 400 .8125rem/1.25rem var(--sans); color-scheme: light dark; }
.gfw-dlg textarea { resize: vertical; }
.gfw-dlg input:focus, .gfw-dlg select:focus, .gfw-dlg textarea:focus { outline: 1px solid var(--primary-c); }
.gfw-seg { display: inline-flex; gap: .25rem; }
.gfw-seg-b { padding: .375rem .875rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 600 .75rem/1rem var(--sans); cursor: pointer; }
.gfw-seg-b.active.gfw-p-low { background: var(--tint-ok); border-color: var(--ok-c); color: var(--ok); }
.gfw-seg-b.active.gfw-p-medium { background: var(--tint-warn); border-color: var(--warn); color: var(--warn); }
.gfw-seg-b.active.gfw-p-high { background: var(--tint-err); border-color: var(--err); color: var(--err); }
.gfw-checks { display: flex; flex-wrap: wrap; gap: .375rem; }
.gfw-chk { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border: 1px solid var(--s-high); border-radius: var(--r); font-size: .75rem; color: var(--on); cursor: pointer; }
.gfw-chk:has(input:checked) { border-color: var(--primary-c); background: var(--tint-primary); }
.gfw-actions { flex-wrap: wrap; margin-bottom: .75rem; }
.gfw-status-sel { width: auto !important; min-width: 11rem; }
.gfw-del { margin-left: auto; }
.gfw-del:hover { color: var(--err); }
.gfw-kv { grid-template-columns: auto 1fr; }
.gfw-desc { margin-top: .75rem; padding: .625rem .75rem; border-radius: var(--r); background: var(--s); font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.gfw-h3 { margin: 1rem 0 .5rem; font-size: .8125rem; }
.gfw-comments { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .625rem; max-height: 22rem; overflow: auto; }
.gfw-comments > li { padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); }
.gfw-img { display: block; max-width: 16rem; max-height: 12rem; margin-top: .375rem; border-radius: var(--r); object-fit: cover; }
.gf-title-b { text-align: left; }
.gf-title-b:hover .gf-title { text-decoration: underline; }

/* Ana sayfa NEXUS karti arka plani: DC + AC sarj cihazi cizimi (2026-10-06) */
/* Logo ile rakamlar arasindaki bosluga yerlesir, onlarin ustune binmez; bosluk darsa gizlenir */
.hero { container: hero / inline-size; }
.hero-art { flex: 1 1 0; min-width: 0; align-self: stretch; margin-block: -1.25rem; pointer-events: none;
  background: url(/brand/hero-sarj.jpg) center / auto 100% no-repeat; mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
@container hero (max-width: 62rem) { .hero-art { display: none; } }
/* Acik tema: koyu cizimi ters cevirip zemine karistir (cizgiler civit mavisi kalir) */
:root:not([data-theme="dark"]) .hero-art { filter: invert(1) hue-rotate(180deg) brightness(1.2); mix-blend-mode: multiply; }
@media (max-width: 760px) { .hero-art { display: none; } }

/* Istasyon basligi dar (yan panel / kucuk pencere): kontroller basligin altinda tek blok, baglanti dugmeleri yan yana (2026-10-06) */
.page-head { container: sthead / inline-size; }
@container sthead (max-width: 82rem) {
  .page-head > div:last-child { flex: 1 1 100%; justify-content: flex-start; align-items: center; }
  .page-head .st-links { flex-direction: row; flex-wrap: wrap; }
}

/* Veri supheli seridi (2026-10-06) */
.dq-det { min-width: 0; }
.dq-det > summary { cursor: pointer; }
.dq-det ul { margin: .375rem 0; padding-left: 1.125rem; font-size: .8125rem; }
.dq-det .label { opacity: .85; }

/* Personel > Saha konumlari (2026-10-07) */
.pl-wrap { margin-bottom: 1rem; border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s-low); padding: .75rem; container: plwrap / inline-size; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .625rem; }
.pl-h { margin: 0; font-size: .9375rem; }
.pl-tools { flex-wrap: wrap; gap: .375rem; }
.pl-tools select, .pl-tools input[type=date] { padding: .3125rem .5rem; border: 1px solid var(--outline-var); border-radius: var(--r); background: var(--bg); color: var(--on); font: 500 .75rem/1.1rem var(--mono); color-scheme: light dark; max-width: 12rem; }
.pl-chk { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; cursor: pointer; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: .75rem; }
@container plwrap (max-width: 46rem) { .pl-grid { grid-template-columns: minmax(0, 1fr); } .pl-list { max-height: 16rem; } }
.pl-map { height: 26rem; border-radius: var(--r); border: 1px solid var(--s-high); background: var(--s); z-index: 0; }
:root[data-theme="dark"] .pl-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.pl-map .leaflet-popup-content-wrapper, .pl-map .leaflet-popup-tip { background: var(--s-low); color: var(--on); }
.pl-map .leaflet-container a { color: var(--primary); }
.pl-list { display: flex; flex-direction: column; gap: .25rem; max-height: 26rem; overflow: auto; }
.pl-row { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--on); font: inherit; text-align: left; cursor: pointer; }
.pl-row:hover { background: var(--s); }
.pl-row.off { opacity: .6; }
.pl-row-m { display: flex; flex-direction: column; min-width: 0; }
.pl-row-n { font-weight: 600; font-size: .8125rem; }
.pl-row-s { font-size: .6875rem; color: var(--on-var); overflow-wrap: anywhere; }
.pl-empty { font-size: .75rem; }
.pl-pin { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-c); color: #fff; font: 700 .6875rem/1 var(--mono); border: 2px solid var(--s-low); box-shadow: 0 1px 3px var(--shadow); }
.pl-pin.stale { background: var(--warn); }
.pl-pin.off { background: var(--s-high); color: var(--on-var); }
.pl-pop { display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; font-family: var(--sans); }
.pl-pop .btn { align-self: flex-start; margin-top: .25rem; }
.pl-route-sum:not(:empty) { margin-top: .5rem; }

/* Ust cubuk kullanici adi: tek satir, sigmazsa kisalir (yonetici girisinde yatay tasma vardi, 2026-10-07) */
.who { min-width: 0; max-width: 11rem; }
#auth-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Istasyon penceresi > Canli / Reset (2026-10-08) */
.lv-socks { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem; }
.lv-sock { border: 1px solid var(--s-high); border-radius: var(--r-lg); background: var(--s-low); padding: .75rem .875rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.lv-sock-h { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.lv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; }
.lv-grid-pc { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.lv-kv { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.lv-kv b { font: 600 .875rem/1.25rem var(--mono); overflow-wrap: anywhere; }
.lv-errs { display: flex; flex-wrap: wrap; gap: .25rem; }
.lv-det { margin-top: .5rem; border: 1px solid var(--s-high); border-radius: var(--r); padding: .375rem .625rem; }
.lv-det > summary { cursor: pointer; font-size: .8125rem; font-weight: 600; }
.lv-det-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .375rem .75rem; margin-top: .5rem; }
.lv-det-g .lv-kv b { font-size: .75rem; font-weight: 500; }
.rs-login { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.rs-select { width: 100%; padding: .5rem .625rem; border: 1px solid var(--s-high); border-radius: var(--r); background: var(--bg); color: var(--on); font: 400 .8125rem/1.25rem var(--sans); color-scheme: light dark; }
#rs-dlg textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Canli / Reset sekmelerinde oturum dipnotu gizli */
body[data-tab="live"] .sess-note, body[data-tab="reset"] .sess-note { display: none !important; }
.rs-login .rms-input { flex: none; }
.lv-kv > .badge { align-self: flex-start; }

/* Panel Ayarlari > Baslatma komutu gelmiyor uyarisi */
.nt-num { flex: none !important; width: 5.5rem !important; }