/* KaskStation filo paneli. Tek dosya, derleme yok.
   Varsayilan koyu tema; <html data-theme="light"> asagidaki blokla
   token'lari eziyor. Secimi head'deki satir localStorage'dan okuyup
   basar, dugme panel.js'te. Renkler hep bu degiskenlerden gelsin.

   Gorsel dil (22 Eki, genel bakisla ayni): 12px yuvarlak kartlar, 1px
   kenarlik, kalin duz yazili kart basliklari, renk seritli ozet kutulari;
   14px govde; yazi boylari --fs-s/m/l/xl (12/14/16/24). Para tutarlari
   kalin ve yesil (--ok). */

:root {
  /* Yazı boyları: dört basamak. Küçük etiket, gövde, başlık, büyük rakam. */
  --fs-s: 12px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 24px;
  color-scheme: dark;

  /* Uc renk merdiveni, 100 en koyu (koyu temada) 900 en acik. Acik tema
     ayni adlari ters yonde dolduruyor: 100 hep zemine en yakin ton. */
  --neutral-100: #1b1f22; --neutral-200: #22272b; --neutral-300: #333a3f;
  --neutral-400: #4a535a; --neutral-500: #6b757c; --neutral-600: #8a949b;
  --neutral-700: #a3adb4; --neutral-800: #c9d0d4; --neutral-900: #e9edef;

  --accent-100: #0f2a2f; --accent-200: #14393f; --accent-300: #1d5f6b;
  --accent-400: #237888; --accent-500: #2b8fa0; --accent-600: #45a9ba;
  --accent-700: #6cc3d1; --accent-800: #9fdae3; --accent-900: #d2f0f4;

  --bad-100: #2a1315; --bad-200: #43191c; --bad-300: #6e2327;
  --bad-400: #a2353a; --bad-500: #f0555b; --bad-600: #f37479;
  --bad-700: #f6979b; --bad-800: #f9bec0; --bad-900: #fde3e4;

  /* yuzeyler */
  --bg: #0a0b0d;
  --surface: #111316;
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-200);
  --line: #22262b;
  --line-strong: var(--neutral-300);
  --line-hover: var(--neutral-400);

  /* metin */
  --text: #e3e7ea;
  --muted: var(--neutral-700);
  --faint: var(--neutral-600);

  /* anlam */
  --accent: #2b8fa0;        /* logodan gelen turkuaz */
  --accent-soft: var(--accent-300);
  --ok: #35c88a;
  --warn: #e5a13a;
  --bad: #f0555b;

  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "SF Pro Display", -apple-system, system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --neutral-100: #f2f4f5; --neutral-200: #e4e8ea; --neutral-300: #dfe3e6;
  --neutral-400: #c6cdd2; --neutral-500: #aab3ba; --neutral-600: #8a949b;
  --neutral-700: #5a656c; --neutral-800: #3a4449; --neutral-900: #1b2226;

  --accent-100: #e6f4f6; --accent-200: #c9e7ec; --accent-300: #9dd3dc;
  --accent-400: #62b6c4; --accent-500: #2b8fa0; --accent-600: #217787;
  --accent-700: #1a5f6c; --accent-800: #154a54; --accent-900: #0f343b;

  --bad-100: #fdeced; --bad-200: #fad3d5; --bad-300: #f4a7aa;
  --bad-400: #e9737a; --bad-500: #cf3239; --bad-600: #b32a30;
  --bad-700: #922227; --bad-800: #701b1f; --bad-900: #4f1316;

  --bg: #f2f4f5;
  --surface: #ffffff;
  --line: #dfe3e6;
  --line-strong: var(--neutral-400);
  --line-hover: var(--neutral-500);

  --text: #1b2226;

  /* koyu temanin parlak tonlari beyaz ustunde okunmuyor; koyulastir */
  --accent: #217787;
  --ok: #178a5c;
  --warn: #a06a10;
  --bad: #cf3239;

  --shadow: 0 16px 40px rgba(20, 30, 35, .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* display veren siniflar tarayicinin [hidden] kuralini eziyor; geri aliyoruz. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-m)/1.5 "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; min-height: 100vh;
}

a { color: inherit; }
main a:not(.btn, .back, .cm, .cycle, .camp, .chip, .method, .mr) { color: var(--accent-700); text-decoration: none; }
main a:not(.btn, .back, .cm, .cycle, .camp, .chip, .method, .mr):hover { color: var(--accent); }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lower { text-transform: lowercase; }
/* Para: tasarimin tek vurgusu. Kalin, yesil, rakamlar hizali. */
.money { font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Simgeler layout.html'deki gomulu <symbol>'lerden; rengi yazidan aliyor. */
.i {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- kenar cubugu ---------- */

.side {
  flex: none; width: 196px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 10px 12px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  color: var(--text); text-decoration: none; line-height: 1.2;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-600), var(--accent-400)); color: var(--bg);
  object-fit: cover;
}
.brand b { display: block; font-weight: 600; font-size: var(--fs-l); }
.brand em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--muted); }

.side nav { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group > span {
  font-size: var(--fs-s); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); padding: 0 10px 6px;
}
.nav-group a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: var(--radius);
  color: var(--neutral-800); text-decoration: none;
  font-size: var(--fs-s); font-weight: 500; transition: background .15s, color .15s;
}
.nav-group a .i { color: var(--faint); }
.nav-group a:hover { color: var(--accent-700); }
.nav-group a.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-800); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-group a.on .i { color: var(--accent-700); }
/* Dikkat isteyen cihaz sayisi; panel.js dolduruyor. */
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--bad); color: #fff;
  font-size: var(--fs-s); font-weight: 600; display: grid; place-items: center;
}

.who { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.who b { display: block; font-size: var(--fs-m); font-weight: 600; }
.who em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--muted); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-200); color: var(--accent-800);
  font-weight: 600; font-size: var(--fs-s);
}
.avatar.sm { width: 28px; height: 28px; font-size: var(--fs-s); }
.avatar.plain { background: var(--neutral-200); color: var(--neutral-800); }
/* Kart basligindaki sira numarasi ve buyuk harfe cevrilmeyen baslik. */
.avatar.nth { width: 18px; height: 18px; font-size: var(--fs-s); font-weight: 700; letter-spacing: 0; }
.card > h2 .title, .card-head h2.title { color: var(--text); font-weight: 600; font-size: var(--fs-m); letter-spacing: 0; text-transform: none; }
.side > .row form { display: flex; }
.side-backdrop { display: none; }

/* ---------- ust cubuk ---------- */

.shell { flex: 1; min-width: 0; padding: 0 14px; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 0; margin-bottom: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-toggle { display: none; }
.crumb {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: var(--fs-s); white-space: nowrap; color: var(--muted);
}
.crumb .i { width: 12px; height: 12px; }
.crumb b { color: var(--text); font-weight: 600; }
.top-search {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 280px; min-width: 160px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted);
}
.top-search .i { width: 15px; height: 15px; }
.top-search input {
  flex: 1; min-width: 0; height: auto !important; padding: 7px 0;
  border: 0; outline: 0; background: transparent; font-size: var(--fs-m);
}
.top-search:focus-within { border-color: var(--accent); }
button.live {
  gap: 8px; padding: 6px 12px; height: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-s); font-weight: 400; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
button.live:disabled { opacity: 1; cursor: default; }
button.live b { font-weight: 600; color: var(--text); }
button.live .dot { width: 7px; height: 7px; }

main { padding: 0 0 48px; }
.page { display: grid; gap: 20px; animation: fade-in .4s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }
/* Grid ogesi varsayilan olarak iceriginden dar olamiyor; genis tablolar
   sayfayi yatay kaydiriyordu. Kaydirma .table-wrap icinde kalsin. */
.page > *, .cols-2 > *, .cols-3 > *, .tab-panel > *, .stack > * { min-width: 0; }

/* ---------- sayfa basligi ---------- */

.head { display: flex; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.head > div:first-child { flex: 1; min-width: 240px; }
.head h1 {
  margin: 0; font: 700 var(--fs-xl)/1.2 var(--display);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.head .sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-m); }
.head .sub b { color: var(--text); font-weight: 600; }
.head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-700); text-decoration: none; font-size: var(--fs-m); margin-bottom: 12px;
}
.back:hover { color: var(--accent); }

/* ---------- durum noktasi ---------- */

.dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--neutral-500); display: inline-block;
}
.dot.on { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); animation: pulse-bad 1.6s infinite; }
.dot.run { background: var(--accent); animation: pulse 1.6s infinite; }
h1 .dot { width: 14px; height: 14px; }
h1 .pill { font-size: var(--fs-m); font-weight: 400; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes pulse-bad {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- panel ---------- */
/* Iki bicim ayni gorunuyor: .panel basligi ayri bir serit (genel bakis),
   .card ise eski sayfalarin dolgulu kutusu; h2'si disari tasip ayni seridi
   ciziyor. */

.panel, .card, .stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); min-width: 0;
}
.panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-head, .card > h2, .card-head, details.card > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-l); color: var(--text); font-weight: 700; white-space: nowrap;
}
/* Basliktaki ikincil yazi kucuk ve soluk. */
.panel-head > :not(:first-child):not(button):not(.segmented), .card-head .muted, .card > h2 .muted, details.card > summary .muted { font-size: var(--fs-s); font-weight: 400; color: var(--muted); }
/* Basliktaki ikincil yazi ve dugmeler: buyuk harf yok, harf araligi yok. */
.panel-head > :not(:first-child), .card-head .actions, details.card > summary .muted {
  text-transform: none; letter-spacing: 0;
}
.panel-head h2, .card-head h2 { margin: 0; font: inherit; color: inherit; }
.panel-body { flex: 1; min-height: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }

.card { padding: 16px 20px; }
.card > h2, .card-head, details.card > summary { margin: -16px -20px 16px; }
.card-head { flex-wrap: wrap; white-space: normal; }
.card-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card > .lead, .card .lead { margin: 0 0 12px; color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
.card h3 {
  margin: 20px 0 10px; font-size: var(--fs-s); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
details.card > summary { cursor: pointer; }
details.card > summary b { color: var(--text); font-weight: 600; }
details.card:not([open]) > summary { margin-bottom: -16px; border-bottom: 0; }

/* Tablo kabi: baslik seridi yok, tablo kenara yakin. */
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .table-wrap { margin: 0; padding: 0; }
.card.flush > .card-head, .card.flush > h2 { margin: 0; }
.card.flush > .empty { padding: 28px 16px; }
.card.flush > .fold-list { padding: 4px 16px; }

/* Ferah kart (cihaz sayfasi): baslik serit degil, 15px yazi; satirlar genis. */
.roomy .card { padding: 18px 20px; }
.roomy .card > h2, .roomy .card-head {
  margin: 0 0 6px; padding: 0; border: 0;
  font-size: var(--fs-l); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
}
.roomy .card-head h2 { font-size: var(--fs-l); font-weight: 600; }
.roomy .card .lead { font-size: var(--fs-m); margin: 0 0 16px; }
.roomy .card h3 { margin-top: 22px; }
.roomy .cols-2, .roomy .cols-3, .roomy .stack, .roomy .tab-panel { gap: 20px; }
.roomy .line { gap: 14px; padding: 11px 0; }
.roomy .line b, .roomy .line > .grow { font-size: var(--fs-l); font-weight: 400; }
.roomy .line em { font-size: var(--fs-s); }
.roomy .card.flush { padding: 0; }

/* min(...) olmadan taban genislik dar telefonda (320 px) sutunu tasiriyordu. */
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: start; }
/* Bir sutunda alt alta duran kartlar. */
.stack { display: grid; gap: 20px; }

/* ---------- rakam kutulari ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 16px; }
/* Her kutunun kendi rengi (--k): ustte ince serit, koseden yayilan hafif renk. */
.stat {
  --k: var(--accent);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-color: color-mix(in srgb, var(--k) 22%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 14%, transparent), transparent 60%),
    var(--surface);
}
.stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k); }
.stats > .stat:nth-child(4n+1) { --k: var(--ok); }
.stats > .stat:nth-child(4n+2) { --k: var(--accent); }
.stats > .stat:nth-child(4n+3) { --k: var(--accent-700); }
.stats > .stat:nth-child(4n+4) { --k: #8b7cf6; }
.stat .k {
  display: flex; align-items: center; gap: 8px; padding: 16px 18px 0;
  font-size: var(--fs-m); font-weight: 600; color: var(--muted); white-space: nowrap;
}
.stat .v, .stat .hint, .stat .spark, .stat .meter, .stat .strip, .stat .share { margin: 0 18px; }
.stat .meter, .stat .share { margin-top: 5px; }
.stat .v {
  display: block; margin-top: 8px;
  font: 700 28px/1.1 var(--display);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.02em;
}
.stat .k > :not(:first-child) { font-weight: 600; font-size: var(--fs-s); }
.stat .v.money, .stat .v.ok { color: var(--ok); }
.stat .v.accent { color: var(--accent-700); }
.stat .v small { font-size: var(--fs-m); font-weight: 600; color: var(--faint); letter-spacing: 0; }
.stat .v.sm { font-size: var(--fs-l); font-weight: 600; line-height: 1.3; letter-spacing: 0; font-family: inherit; }
.stat > :last-child { margin-bottom: 16px; }
.hint { display: block; font-size: var(--fs-s); color: var(--muted); margin-top: 5px; }
/* Alt yazi sarsin, kesilip "6 pr..." kalmasin. Mini grafik ve serit kutunun
   dibine yaslaniyor: yazisi iki satira inen kutu yanindakilerin grafigini
   kaydirmasin (kutular satirda ayni yukseklikte). */
.stat .spark, .stat .strip { margin-top: auto; }
.up { color: var(--ok); }
.down { color: var(--bad-600); }

/* Gunluk satirin program kirilimi: parcalar kendi icinde bolunmesin, aralarina
   nokta girsin. Satir parcalarin arasindaki bosluktan kirilir (sablonda bosluk
   var); bosluk yokken dar sutunda kirilamayip yandaki sutunun ustune biniyordu.
   Nokta parcanin sonunda duruyor: satir kirilinca alt satir noktayla degil
   metinle basliyor. */
/* Cihazlar listesinde bugünkü yıkama sayıları. */
td.count { font-weight: 600; font-variant-numeric: tabular-nums; }
td.count.muted { font-weight: 400; }

/* Mini grafik: yuzde yukseklikli sutunlar. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 8px; }
.spark i { flex: 1; background: var(--k, var(--accent-500)); min-height: 2px; border-radius: 3px 3px 1px 1px; }
.spark.ok i { background: var(--ok); }
.spark.dim i { background: var(--neutral-500); }
.spark i.future { background: var(--neutral-200); }
/* Filo seridi: cihaz basina bir parca, rengi durum noktasiyla ayni. */
.strip { display: flex; gap: 3px; height: 6px; margin-top: 8px; }
.strip i { border-radius: 3px; }
.strip i { flex: 1; background: var(--neutral-500); }
.strip i.on { background: var(--ok); }
.strip i.run { background: var(--accent); }
.strip i.warn { background: var(--warn); }
.strip i.bad { background: var(--bad); }

/* Doluluk cubugu. */
.meter { display: block; height: 6px; background: var(--neutral-200); overflow: hidden; border-radius: 999px; }
.meter > b { border-radius: 999px; }
.meter > b { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.meter.ok > b { background: var(--ok); }
.meter.bad > b { background: var(--bad); }
.meter.dim > b { background: var(--neutral-500); }
.meter.thin { height: 3px; }

/* ---------- dugmeler ---------- */

.btn, .button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 18px; font: inherit; font-size: var(--fs-m); font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: none;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn .i, button .i { width: 16px; height: 16px; }
button:hover:not(:disabled), .btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
button:active:not(:disabled) { background: color-mix(in srgb, var(--text) 14%, transparent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary, .btn.primary {
  background: linear-gradient(180deg, var(--accent-600), var(--accent)); border-color: var(--accent); color: var(--bg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
button.danger { color: var(--bad-700); border-color: var(--bad-300); }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 12%, transparent); }
button.ghost, .btn.ghost { border-color: transparent; color: var(--accent-700); padding-inline: 6px; }
button.ghost.danger { color: var(--bad); }
button.ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
button.sm, .btn.sm { padding: 4px 10px; font-size: var(--fs-s); }
button.sm .i, .btn.sm .i { width: 14px; height: 14px; }
/* Panel basligina sigan en kucuk dugme. */
button.xs, .btn.xs { padding: 3px 10px; font-size: var(--fs-s); }
button.caps { padding: 0; font-size: var(--fs-s); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
button.caps:hover:not(:disabled) { background: none; color: var(--accent); }
.panel-head > button.caps { letter-spacing: .08em; text-transform: uppercase; }
/* Yuvarlak simge dugmesi: cal / durdur. */
button.round { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
button.round.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
button.icon { padding: 0; width: 26px; height: 26px; }
button.grow { flex: 1; }
/* Ses ve telefon satirlari (bildirimler), parca satiri (muzik). */
.sound-row, .phone-row, .track {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.sound-row:last-child, .phone-row:last-child, .track:last-child { border-bottom: 0; }
.sound-row .grow, .phone-row .grow { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.sound-row b, .phone-row b { font-size: var(--fs-m); font-weight: 600; }
.sound-row em, .phone-row em { font-style: normal; font-size: var(--fs-s); color: var(--muted); }
.sound-row .meter { max-width: 220px; border-radius: 2px; }
.sound-row .meter > b { transition: width .25s linear; }
.phone-row { flex-wrap: nowrap; font-size: var(--fs-s); }
.phone-row > .i { width: 20px; height: 20px; color: var(--faint); }
.phone-row .grow { min-width: 0; }
button.block { width: 100%; }

/* calisirken: metin yerine donen halka */
button.busy { color: transparent !important; position: relative; pointer-events: none; }
button.busy::after {
  content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--text); animation: spin .6s linear infinite;
}
button.primary.busy::after { color: var(--bg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- form ---------- */

input, select, textarea {
  background: var(--surface); color: var(--text); caret-color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 6px 10px; font: inherit; font-size: var(--fs-m); min-width: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
/* Tarayicinin kendi oku kutunun sag kenarina yapisiyordu: ok bizim,
   kenardan 10px iceride; yazi ona carpmasin diye sagda 32px bosluk. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238b939c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}

/* Yukseklik acikca esitleniyor: tarih kutusunun ic yapisi tarayicidan
   geliyor ve ayni padding'le select'ten ~2px uzun cikiyor — filtre
   satirinda yan yana durunca hizasiz gorunuyordu. Padding'le kovalamak
   tarayiciya gore kayiyor, sabit yukseklik ikisini de ayni yere oturtuyor. */
input:not([type=checkbox]):not([type=file]):not([type=range]), select { height: 36px; }
/* Panel basligindaki ve arac cubugundaki kucuk bicim. */
input.sm:not([type=checkbox]), select.sm { height: 28px; padding: 2px 8px; font-size: var(--fs-s); }
select.sm { padding-right: 28px; background-position: right 8px center; }
textarea { height: auto; line-height: 1.5; }

input[type=file] { padding: 5px; }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
input[type=range] { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); }

.field { display: grid; gap: 5px; margin-bottom: 14px; }
.field > span { font-size: var(--fs-m); color: var(--muted); }
.field > em, .field > small { font-style: normal; font-size: var(--fs-s); color: var(--faint); margin: 0; }
.field input, .field select, .field textarea { width: 100%; }

.check { display: flex; align-items: center; gap: 9px; font-size: var(--fs-m); cursor: pointer; margin-bottom: 12px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled .check { opacity: .45; cursor: not-allowed; }

.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
/* Dar ekranda tablo yerine katlanır satırlar: sütunlar telefona sığmıyor,
   özet satırda ad ve durum kalıyor, gerisi dokununca açılıyor. İşlemler,
   kuponlar ve cihazlar aynı biçimi kullanıyor. */
.fold-list { display: none; }
.fold { border-top: 1px solid var(--line); }
.fold:first-child { border-top: 0; }
.fold > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px; cursor: pointer;
}
.fold > summary .grow { min-width: 0; }
.fold > summary em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--faint); }
.fold-body { display: grid; gap: 8px; padding: 2px 2px 12px; }
.fold-body > div { display: flex; justify-content: space-between; gap: 12px; }
.fold-body span { color: var(--muted); font-size: var(--fs-s); }

/* ---------- arama / filtre cubugu ---------- */

.toolbar { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.card > .toolbar { margin-bottom: 12px; }
.toolbar input[type=date] { width: 140px; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.search input { width: 100%; padding-left: 30px; }
.search::before {
  content: "\2315"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: var(--fs-l); pointer-events: none;
}
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.segmented button, .segmented a {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; border-radius: 6px; color: var(--text);
  padding: 6px 12px; font-size: var(--fs-m); font-weight: 400; line-height: 1.3; text-decoration: none; white-space: nowrap;
}

.segmented .on, .segmented button.on:hover { background: var(--accent); color: var(--bg); }
.segmented small { font-size: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
/* Panel basligina sigan kucuk bicim. */
.segmented.xs button { font-size: var(--fs-s); padding: 2px 7px; }
.segmented.sm > * { font-size: var(--fs-s); padding: 4px 9px; }
.segmented.sm > * + * { border-left: 0; }
.segmented.xs > * + * { border-left: 0; }

/* ---------- tablo ---------- */

.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); font-variant-numeric: tabular-nums; }
table.dense { font-size: var(--fs-s); }
th {
  text-align: left; font-size: var(--fs-s); letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 10px 14px; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
td {
  padding: 13px 14px; vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
tbody tr.link { cursor: pointer; }
td b { font-weight: 600; }
td.right, th.right { text-align: right; }
.log td { font-size: var(--fs-s); }
.log td:first-child { white-space: nowrap; color: var(--faint); }
/* Gun basligi satiri (islemler): o gunun adedi ve toplami. */
tr.day-head td {
  padding: 10px 10px 6px; background: color-mix(in srgb, var(--text) 3%, transparent);
  font-size: var(--fs-s); color: var(--muted);
}
tr.day-head b { letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin-right: 8px; }
tr.day-head:hover { background: none; }

.liquid { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--muted); }
.liquid .meter { width: 44px; height: 6px; }
.liquid .meter > b { background: var(--accent-500); }
.liquid .meter.bad > b { background: var(--bad); }
button.go { color: var(--ok); }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell b { font-weight: 600; }
.name-cell em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--muted); }
/* Cihazlar listesinde durumun altında son görülme. */
em.seen { display: block; margin-top: 3px; font-style: normal; font-size: var(--fs-s); color: var(--muted); }

/* ---------- rozetler ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-s); font-weight: 600; letter-spacing: .01em; padding: 3px 10px; border-radius: 999px;
  background: var(--neutral-100); color: var(--neutral-800); white-space: nowrap;
}
.pill.amount { background: none; padding: 0; font-size: var(--fs-m); font-weight: 700; color: var(--ok); }
.pill.ok { background: var(--accent-100); color: var(--accent-800); }
.pill.bad { background: var(--bad-100); color: var(--bad-800); }
.pill.warn { background: color-mix(in srgb, var(--warn) 26%, transparent); color: var(--text); }
.pill.sm { padding: 1px 7px; }
.pill.outline { background: none; border: 1px solid var(--line); color: var(--muted); padding: 1px 7px; }
.pill.outline.strong { border-color: var(--accent); color: var(--accent); padding: 1px 8px; }
.pill.outline.accent { border-color: var(--accent-400); color: var(--accent-700); }
.tag {
  font-size: var(--fs-s); letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 5px;
}
/* Kupon kodu ve kullanim cubugu. */
.code { font-weight: 700; font-size: var(--fs-l); letter-spacing: .12em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.code span + span { margin-left: .35em; }
.fold .code { font-size: var(--fs-m); }
.usage { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.usage .meter { flex: 1; min-width: 40px; max-width: 90px; height: 6px; }
td em { display: block; font-size: var(--fs-s); color: var(--muted); }
/* Durum yazisi, onunde nokta (islemler tablosu). */
.state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state.ok { color: var(--ok); }
.state.run { color: var(--accent-600); }
.state.bad { color: var(--bad); }

/* ---------- kanal satiri ---------- */

.line {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.line:last-child { border-bottom: 0; }
.line b { display: block; font-weight: 600; font-size: var(--fs-m); }
.line b + .pill { margin-top: 2px; }
.line em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--muted); margin-top: 1px; }
.ch {
  flex: none; width: 30px; height: 24px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--neutral-100); border: 1px solid var(--line);
  font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--muted);
}
.line .row { flex: none; gap: 4px; }
/* Bayi sifresi satiri: dar ekranda bayi adi ustte, kutu ve dugmeler altta. */
.line.pin-line { flex-wrap: wrap; }
.pin-line .grow { flex-basis: 180px; }
.pin-line input { width: 110px; letter-spacing: .2em; }

/* ---------- sekmeler ---------- */

.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--muted); padding: 9px 14px; margin-bottom: -1px;
  font-size: var(--fs-m); font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.tabs button:hover { background: transparent; color: var(--accent-700); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
/* Ayni sekme davranisi, dugme grubu gorunumuyle (kuponlar). */
.tabs.seg {
  display: inline-flex; justify-self: start; gap: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tabs.seg button { margin: 0; border: 0; padding: 7px 12px; color: var(--text); font-weight: 400; }
.tabs.seg button + button { border-left: 1px solid var(--line); }
.tabs.seg button.on, .tabs.seg button.on:hover { background: var(--accent); color: var(--bg); }
.tab-panel { display: grid; gap: 10px; }

/* ---------- medya ---------- */

/* Kutuphane basligi: kurum dosyalari ile bayininki ayrilsin. */
.group-label {
  font-size: var(--fs-s); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  margin: 14px 0 8px;
}
.group-label:first-of-type { margin-top: 4px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumb {
  display: grid; gap: 6px; padding: 6px; text-align: left; justify-content: stretch;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-size: var(--fs-s); font-weight: 400; color: var(--muted); overflow: hidden; position: relative;
  white-space: normal;
}
button.thumb:hover { border-color: var(--accent-400); background: var(--bg); }
.thumb img { width: 100%; height: 84px; object-fit: cover; border-radius: 3px; display: block; }
.thumb .vid {
  display: grid; place-items: center; height: 84px; gap: 2px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--neutral-200)), var(--neutral-200));
  border-radius: 3px; color: var(--muted); font-size: var(--fs-s);
}
.thumb .name { color: var(--text); font-size: var(--fs-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dropzone {
  display: grid; place-items: center; gap: 4px; padding: 22px 16px; text-align: center;
  border: 1.5px dashed var(--neutral-400); border-radius: var(--radius-lg);
  color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dropzone.sm { padding: 14px 12px; }
.dropzone b { color: var(--text); font-weight: 600; }
.dropzone small { color: var(--faint); font-size: var(--fs-s); }

.playlist { list-style: none; counter-reset: n; padding: 0; margin: 0; }
.playlist li {
  counter-increment: n; display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.playlist li:last-child { border-bottom: 0; }
/* Bos liste mesaji sirada bir madde degil; numara almasin. */
.playlist li.muted { color: var(--muted); font-size: var(--fs-s); }
.playlist li.muted::before { content: none; }
/* Satirin yayin suresi: dosya adi yeri kaplasin, secici dar dursun. */
.playlist select[data-expiry] { flex: none; padding: 2px 32px 2px 10px; min-width: 116px; font-size: var(--fs-s); height: 28px; }
.playlist li::before {
  content: counter(n); flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--neutral-200);
  color: var(--neutral-800); font-size: var(--fs-s); font-weight: 700;
}

/* ---------- bos durum ---------- */

.empty { display: grid; gap: 4px; place-items: center; padding: 24px 16px; text-align: center; }
.empty .icon { font-size: var(--fs-xl); opacity: .35; line-height: 1; }
.empty b { font-weight: 600; font-size: var(--fs-m); }
.empty span { color: var(--muted); font-size: var(--fs-s); }

/* ---------- kod kutusu ---------- */

.snippet { position: relative; }
.snippet pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 12px; margin: 0; overflow-x: auto;
  font-family: var(--mono); font-size: var(--fs-s); color: var(--text);
}
.snippet .copy { position: absolute; top: 6px; right: 6px; background: var(--surface); }

.kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: var(--fs-s); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; word-break: break-all; }
.kv dd.mono { font-size: var(--fs-s); font-weight: 400; color: var(--neutral-800); }
/* Yan yana iki alan; dar ekranda alt alta. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.swatches label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-m); cursor: pointer; }
/* Genel input kuralı (height: 36px) daha özgül; id ile geçiliyor. */
#storefront .swatches input[type=radio] { width: 15px; height: 15px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); }
.swatches i { display: block; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); }
#storefront .swatches input[type=color] { flex: none; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.swatches input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatches input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.swatches input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; align-items: start; }
.field-pair .field { margin-bottom: 0; }
.panel .field > span { font-size: var(--fs-s); }
.panel .field > em { font-size: var(--fs-s); }
.dropzone .i { width: 26px; height: 26px; color: var(--ok); }

/* ---------- uyari seridi ---------- */

.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-s);
}
.banner.warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.banner.bad { border-color: var(--bad-300); background: var(--bad-100); color: var(--bad-900); }
.banner .i { flex: none; width: 18px; height: 18px; }
.banner.ok .i { color: var(--ok); }
.banner.warn .i { color: var(--warn); }
.banner.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* ---------- bildirimler ---------- */

.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: grid; gap: 8px; max-width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--text); color: var(--bg);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius); padding: 10px 14px; font-size: var(--fs-m);
  box-shadow: var(--shadow); animation: fade-in .25s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.bad { border-left-color: var(--bad); }
.toast button { padding: 0 4px; background: none; border: 0; color: inherit; opacity: .6; }

/* ---------- kip ---------- */

dialog {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); padding: 0;
  max-width: min(480px, calc(100vw - 32px)); width: 100%; box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
dialog .body { padding: 20px; display: grid; gap: 14px; }
dialog h2 { margin: 0; font-size: var(--fs-l); font-weight: 600; }
dialog .foot { display: flex; gap: 8px; justify-content: flex-end; }
/* Liste penceresi (genel bakis "Tumunu gor"): baslik sabit, govde kayar. */
dialog.list { max-width: min(680px, calc(100vw - 32px)); max-height: min(80vh, 760px); overflow: hidden; }
dialog.list[open] { display: flex; flex-direction: column; }
dialog.list .panel-head { padding: 10px 14px; flex: none; }
dialog.list .panel-head b { font-size: var(--fs-m); font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
dialog.list .scroll { overflow-y: auto; padding: 4px 14px 14px; }

/* ---------- grafikler ---------- */
/* Kutuphane yok: cubuklar yuzde yukseklikli div, yuzdeler Go'da hesaplaniyor.
   Ustune gelinen sutun parlak kaliyor, digerleri soluyor; sutunun data-info'su
   panel.js ile grafigin ustundeki satira yaziliyor. */

.chart-info {
  font-size: var(--fs-m); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px;
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
}
.chart-info .big { font-size: var(--fs-l); font-weight: 700; }
.chart-info .muted { font-weight: 400; }
.chart-info small { font-size: var(--fs-s); font-weight: 600; }
.chart { display: flex; gap: 8px; flex: 1; min-height: 150px; }
.chart.fixed { flex: none; height: 150px; }
.y-axis {
  display: flex; flex-direction: column; justify-content: space-between; flex: none;
  min-width: 36px; text-align: right;
  font-size: var(--fs-s); color: var(--faint); font-variant-numeric: tabular-nums;
}
.bars {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 3px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 25%;
}
.bars > * {
  flex: 1; height: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: opacity .15s;
}
.bars:hover > :not(:hover) { opacity: .35; }
.bars i { display: block; background: var(--accent); transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.bars i.prem { background: var(--accent-800); }
.bars i.ok { background: var(--ok); }
.bars i.dim { background: var(--neutral-400); }
.bars i.calm { background: var(--neutral-300); }
.bars i.normal { background: var(--neutral-500); }
.bars i.busy { background: var(--warn); }
.bars i.lost { background: var(--bad); margin-bottom: 1px; }
.bars i.round { border-radius: 2px 2px 0 0; }
@keyframes grow { from { transform: scaleY(0); } }
/* Sayfa kendini yenilediginde cubuklar bastan buyumesin. */
.refreshed .bars i, .refreshed.page, .refreshed .page { animation: none; }
/* Yan yana iki sutun (bugun / dun). */
.bars.pairs > * { flex-direction: row; align-items: flex-end; gap: 1px; border-bottom: 2px solid transparent; }
.bars.pairs > * > i { flex: 1; }
.bars.pairs > .now { border-bottom-color: var(--ok); }
/* Ustunde degeri yazan sutun (haftanin gunu). */
.bars.labelled { gap: 6px; background: none; }
.bars.labelled > * { align-items: center; gap: 4px; }
.bars.labelled i { width: 100%; }
.bars.labelled span { font-size: var(--fs-s); font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars.labelled .best span { color: var(--ok); }
.bars.labelled i { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.bars.labelled .best i { background: var(--ok); }
.x-axis { display: flex; gap: 3px; font-size: var(--fs-s); color: var(--faint); }
.x-axis > * { flex: 1; text-align: center; min-width: 0; }
.x-axis.ends { justify-content: space-between; font-size: var(--fs-s); padding-left: 44px; }
.x-axis.ends > * { flex: none; }
.x-axis.days { gap: 6px; font-size: var(--fs-s); color: var(--muted); }
.with-axis { padding-left: 44px; }

.legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; background: var(--accent); }
.legend i.prem { background: var(--accent-800); }
.legend i.ok { background: var(--ok); }
.legend i.dim { background: var(--neutral-500); }
.legend i.lost { background: var(--bad); }
.legend i.calm { background: var(--neutral-300); border-radius: 2px; }
.legend i.normal { background: var(--neutral-500); border-radius: 2px; }
.legend i.busy { background: var(--warn); border-radius: 2px; }

/* Yatay pay seridi (odeme yolu, program dagilimi). */
.share { display: flex; height: 10px; gap: 2px; border-radius: 2px; overflow: hidden; }
.share.thin { height: 6px; border-radius: 0; }
.share i { background: var(--neutral-500); min-width: 2px; }
/* Odeme yolu siniflari m- onekli: "card" panelin kutu sinifiyla cakisiyor. */
/* Renklerin tek anlamı var: yeşil para ve bugün, gri dün ve nötr, açık
   camgöbeği standart, koyu camgöbeği premium, sarı yoğun/uyarı. Ödeme
   yolları bu yüzden gri tonlarında; adları ve simgeleri yanlarında. */
.share i.std { background: var(--accent); }
.share i.prem { background: var(--accent-800); }
.share i.m-card { background: var(--neutral-700); }
.share i.m-qr { background: var(--neutral-500); }
.share i.m-coupon { background: var(--neutral-300); }
.share i.m-credit { background: var(--neutral-400); }
.method {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 38px minmax(64px, auto);
  gap: 8px; align-items: center; font-variant-numeric: tabular-nums;
  color: inherit; text-decoration: none;
}
.method .i { width: 15px; height: 15px; color: var(--neutral-500); }
.method.m-card .i { color: var(--neutral-700); }
.method b { font-size: var(--fs-s); font-weight: 600; white-space: nowrap; }
.method small { font-size: var(--fs-s); color: var(--muted); text-align: right; }
.method strong { font-size: var(--fs-s); font-weight: 700; text-align: right; white-space: nowrap; color: var(--muted); }
.method strong.money { color: var(--ok); }
a.method { padding: 5px 6px; margin: 0 -6px; border: 1px solid transparent; border-radius: 3px; }
a.method:hover { border-color: var(--accent-400); }
a.method.on { border-color: var(--accent-400); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- genel bakis ---------- */

/* Satir: paneller yan yana, sigmayinca alta gecer. Oran ve taban genislik
   satir ici degiskenle veriliyor: style="--grow:6;--basis:520px". */
.dash-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-row > * { flex: var(--grow, 1) 1 var(--basis, 320px); min-width: 0; }
.dash-col { display: flex; flex-direction: column; gap: 8px; }
.dash-col > .dash-row { flex: 1 0 auto; }
.page.dash { gap: 8px; }

/* Suren cevrim: ad, program, kalan sure; altinda asama asama doluluk. */
.cycles { display: flex; flex-direction: column; gap: 10px; }
.cycle { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.cycle > div:first-child { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); white-space: nowrap; }
.cycle b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cycle time { margin-left: auto; color: var(--accent-700); font-variant-numeric: tabular-nums; }
.cycle > span { font-size: var(--fs-s); color: var(--muted); }
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.segs i { height: 4px; background: var(--neutral-200); overflow: hidden; }
.segs b { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
dialog .cycle { padding: 12px 0; border-bottom: 1px solid var(--line); gap: 6px; }
dialog .cycle > div:first-child { font-size: var(--fs-m); }
dialog .segs i { height: 5px; }
.more {
  align-self: stretch; margin-top: 2px; padding: 6px;
  border-color: var(--line); color: var(--accent-700); font-size: var(--fs-s);
}
.more:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Olay gunlugu. */
.feed > div {
  display: grid; grid-template-columns: 58px 16px minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.feed > div:last-child { border-bottom: 0; }
.feed time { font-size: var(--fs-s); color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 1px; }
.feed .i { width: 14px; height: 14px; margin-top: 2px; color: var(--accent); }
/* Satir sarsin: ikinci satirda ariza nedeni var, "..." ile kesilmesin.
   anywhere: bosluksuz uzun ad dar sutunu tasirmasin. */
.feed span { display: block; font-size: var(--fs-s); overflow-wrap: anywhere; }
.feed span b { font-weight: 600; }
.feed em { display: block; font-style: normal; font-size: var(--fs-s); color: var(--muted); overflow-wrap: anywhere; }
.feed .bad .i { color: var(--bad); }
.feed .bad em { color: var(--bad-700); }

/* Cihaz karsilastirmasi: bugun (kalin cubuk) / dun ayni saat (ince cubuk). */

/* Bayi siralamasi. */
.split { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-s); color: var(--muted); }

/* Yogunluk kipleri: ucu de sayfada, sekme hangisinin gorunecegini seciyor. */
[data-mode] > [data-mode-of] { display: none; }
[data-mode="all"] > [data-mode-of="all"],
[data-mode="weekdays"] > [data-mode-of="weekdays"],
[data-mode="weekend"] > [data-mode-of="weekend"] { display: flex; }
.busy-mode { flex: 1; flex-direction: column; gap: 8px; min-height: 0; }
.level-calm { color: var(--neutral-600); }
.level-normal { color: var(--accent-600); }
.level-busy { color: var(--warn); }
/* Ciro grafigi: son 7 / 14 gun secilince eski gunler gizleniyor. */
[data-range="7"] .bars > :nth-last-child(n+8),
[data-range="14"] .bars > :nth-last-child(n+15) { display: none; }
[data-range="7"] .bars { gap: 14px; }
[data-range="14"] .bars { gap: 8px; }

/* ---------- cihaz sayfasi ---------- */

/* Durum seridi: tek kutu, sigdigi kadar sutun. */
.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.status-strip > div {
  --k: var(--accent);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px 18px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--k) 22%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 14%, transparent), transparent 60%),
    var(--surface);
}
.status-strip > div::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k); }
.status-strip > .on { --k: var(--ok); }
.status-strip > .off { --k: var(--neutral-500); }
.status-strip > div:nth-child(3) { --k: var(--accent-700); }
.status-strip > div:nth-child(4) { --k: #8b7cf6; }
.status-strip > div:nth-child(5) { --k: var(--ok); }
.status-strip > div > span:first-child { font-size: var(--fs-m); color: var(--muted); font-weight: 600; }
.status-strip b { font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; }
.status-strip b.money { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.status-strip em { font-style: normal; font-size: var(--fs-m); color: var(--muted); }
.status-strip .meter { max-width: 160px; }

/* Cevrim adimlari: sira numarasi, asama ve altinda doluluk, sure. */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.step .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-s); font-weight: 600; background: var(--neutral-200); color: var(--neutral-700);
  transition: background .3s;
}
.step.done .n { background: var(--accent); color: var(--bg); }
.step.current .n { background: var(--accent-200); color: var(--accent-800); animation: pulse 1.6s infinite; }
.step .grow { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-l); color: var(--muted); }
.step.current .grow { color: var(--text); }
.step .segs i { height: 3px; }
.step .sec, .phase-line .sec {
  font-size: var(--fs-m); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right;
}
.steps .note { margin: 8px 0 18px; font-size: var(--fs-m); font-style: italic; color: var(--muted); }
.steps .note time { font-variant-numeric: tabular-nums; }

/* Role satiri: kanal kutusu role acikken dolu. */
.roomy .ch { background: var(--surface); border-color: transparent; }
.line:has([data-relay-on]:not([hidden])) .ch { background: var(--accent); color: var(--bg); }
.line .pill { margin-left: 6px; }

/* Program karti: ad, ucret, toplam sure; satirlarda sure cubugu. */
.program-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap; }
.program-head .price { font-size: var(--fs-l); font-weight: 600; color: var(--accent-700); }
.program-head .muted { font-size: var(--fs-m); font-weight: 400; }
.phase-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 60px 84px; gap: 14px; align-items: center; }
.phase-line .meter { height: 6px; }
.phase-line .meter > b { background: var(--accent-500); }
.phase-line input { width: 100%; height: 30px !important; font-size: var(--fs-m); padding: 2px 8px; }

/* Tablo kabindaki baslik ve gecmis tablolari. */
.flush-title, .roomy .card.flush > .flush-title {
  margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-l); font-weight: 700; color: var(--text);
}
table.history { font-size: var(--fs-m); }
table.history .truncate { max-width: 320px; }
.nowrap { white-space: nowrap; }

/* ---------- medya ve muzik sayfalari ---------- */

.toolbar-head { padding: 8px 10px; flex-wrap: wrap; white-space: normal; }
.toolbar-head .top-search input { font-size: var(--fs-s); padding: 5px 0; }
.panel-foot {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-top: 1px solid var(--line); font-size: var(--fs-s); color: var(--faint);
}
.panel-foot .i { width: 13px; height: 13px; }
/* Birakma bolgesi panelin kendisi: dosya suruklenirken kesikli cerceve. */
.panel.over { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* Yukleme satirlari: dosya adi, ilerleme, yuzde. */
.uploads { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.uploads > div { display: grid; grid-template-columns: 16px minmax(0, 1fr) minmax(80px, 160px) 40px; gap: 8px; align-items: center; font-size: var(--fs-s); }
.uploads .i { width: 14px; height: 14px; color: var(--accent); }
.uploads .meter { height: 4px; border-radius: 2px; }
.uploads .meter > b { transition: width .2s linear; }
.uploads small { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.media-grid { padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
/* Kutuphane: solda yukleyen (kurum ya da bayi), sagda dosyalar. */
.media-body { display: flex; align-items: flex-start; }
.media-body > .media-grid { flex: 1; min-width: 0; }
.media-sources {
  flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0 10px 10px; position: sticky; top: 0;
}
.media-sources button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  background: transparent; border: 0; border-radius: var(--radius); color: var(--text);
  padding: 7px 10px; font-size: var(--fs-m); font-weight: 400; line-height: 1.3; text-align: left;
}
.media-sources button:hover { background: var(--accent-100); }
.media-sources button.on, .media-sources button.on:hover { background: var(--accent); color: var(--bg); }
.media-sources small { font-size: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .media-body { flex-direction: column; align-items: stretch; }
  .media-sources { flex: none; flex-direction: row; overflow-x: auto; padding: 10px 10px 0; position: static; }
  .media-sources button { flex: 0 0 auto; white-space: nowrap; }
}
.media-card {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.media-card:hover { border-color: var(--accent-400); }
.media-card.in-list { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.media-card .shot {
  aspect-ratio: 16 / 10; border-radius: 3px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--neutral-200)), var(--neutral-200));
}
.media-card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card .shot .i { width: 30px; height: 30px; color: var(--faint); }
.media-card .kind {
  position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 2px;
  font-size: var(--fs-s); font-weight: 600; background: var(--neutral-300); color: var(--text);
}
.media-card .kind.video { background: var(--accent); color: var(--bg); }
.media-card .order {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-s); font-weight: 700;
  background: var(--accent); color: var(--bg);
}
.media-card > b { font-size: var(--fs-s); font-weight: 600; }
.media-card .meta { font-size: var(--fs-s); color: var(--muted); }
.media-card .row { gap: 4px; }
.media-card.in-list [data-add] { border-color: var(--accent-400); color: var(--accent-700); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Kiosk onizlemesi: reklam alani kare, kalin cerceve tablet gibi. */
.kiosk {
  aspect-ratio: 1; max-height: 300px; margin: 0 auto; width: 100%; max-width: 300px;
  border-radius: 6px; border: 6px solid var(--neutral-200); background: #050607;
  position: relative; overflow: hidden;
}
.kiosk-shot { position: absolute; inset: 0; display: grid; place-items: center; }
.kiosk-shot img, .kiosk-shot video { width: 100%; height: 100%; object-fit: contain; display: block; animation: fade-in .5s ease-out; }
.kiosk-brand {
  position: absolute; top: 10px; left: 10px; padding: 2px 6px; border-radius: 2px;
  font-size: var(--fs-s); font-weight: 600; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .45);
}
.kiosk .segs { position: absolute; left: 10px; right: 10px; bottom: 10px; gap: 3px; }
.kiosk .segs i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.kiosk .segs b { background: #fff; transition: width .25s linear; }
.kiosk-empty { position: absolute; inset: 0; display: none; place-items: center; font-size: var(--fs-s); color: #888; }
.empty-list .kiosk-empty { display: grid; }
.empty-list .kiosk-brand, .empty-list .kiosk .segs { display: none; }
/* Cihaz secici: baglanti, secili olan boyali. */
.chip-link {
  font-size: var(--fs-s); padding: 2px 8px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--line); color: var(--muted);
}
main a.chip-link { color: var(--muted); }
main a.chip-link.on, .chip-link.on { border-color: var(--accent-400); color: var(--accent-700); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.panel .playlist li { font-size: var(--fs-s); }
.panel .playlist select[data-expiry] { height: 26px !important; font-size: var(--fs-s); }

/* Parca satiri: cal, ad ve ilerleme, sure, boyut, kullanim, sil. */
.track { flex-wrap: nowrap; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.track .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.track b { font-weight: 600; }
.track .meter { max-width: 320px; border-radius: 2px; }
.track .meter > b { transition: width .25s linear; }
.track .cell { flex: none; width: 70px; color: var(--muted); }
.track .cell.wide { width: 150px; }
.track button.round { width: 28px; height: 28px; }
/* Oynatma listesindeki parca: sira numarasi yerine tutamak. */
.playlist li.track::before { content: none; }
.grip { display: inline-flex; flex: none; color: var(--faint); cursor: grab; }
.grip .i { width: 16px; height: 16px; stroke-width: 2.8; }
/* Suruklenen satir (surukle-birak siralama). */
.playlist li.dragging { opacity: .4; }

/* Ses seviyesi: uc kaydirici yan yana, dar ekranda alt alta. */
.volume { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px 28px; padding: 14px 12px; }
.vol { display: grid; gap: 6px; }
.vol .split { font-size: var(--fs-s); align-items: baseline; }
.vol .split b { color: var(--text); font-weight: 600; }
.vol .split span, .vol output { font-variant-numeric: tabular-nums; }
.vol output { font-size: var(--fs-s); color: var(--muted); }

/* "Cihazlara gonder" penceresindeki hedef listesi. */
.copy-targets { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; padding-left: 24px; }
.copy-targets .check { margin-bottom: 6px; }

/* ---------- kampanyalar ---------- */

/* Liste satiri: secili olan cerceveli ve boyali. */
.camp {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 3px; color: inherit; text-decoration: none;
}
.camp:hover { border-color: var(--accent-400); }
.camp.on { border-color: var(--accent-400); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.camp > span { display: flex; align-items: center; gap: 8px; }
.camp b { flex: 1; font-size: var(--fs-m); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp small { font-size: var(--fs-s); color: var(--muted); }
/* Rakam kutulari ve iki sutunlu bilgi satirlari. */
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0; }
.boxes > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; }
.boxes dt { font-size: var(--fs-s); color: var(--muted); }
.boxes dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 16px; margin: 0; font-size: var(--fs-s); }
.rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; font-weight: 600; text-align: right; }
.note { margin: 8px 0 0; font-size: var(--fs-s); color: var(--muted); text-wrap: pretty; }
p.note.ok { color: var(--ok); }
p.note.warn { color: var(--warn); }
/* Kazanan satiri: hesap, kod, yorum, durum rozetleri; altinda kimlikler. */
.winner {
  display: grid; grid-template-columns: 150px 76px minmax(0, 1fr) auto;
  gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s);
}
.winner .tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.winner small { grid-column: 1 / 4; font-size: var(--fs-s); }
.winner .campaign-comment { color: var(--muted); white-space: nowrap; }
.winner .row:empty { display: none; }
.panel-head a { color: var(--accent-700); text-decoration: none; font-size: var(--fs-s); }
.campaign-post-preview h3 { margin: 0 0 8px; font-size: var(--fs-s); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- DM yanitlari ---------- */

.reply { display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.reply > h2 { margin-bottom: 2px; }
.reply .lead { margin: 0; }
.reply textarea { width: 100%; font-size: var(--fs-s); resize: vertical; }
/* Anahtar kapali: yanit gonderilmiyor, kart soluk. */
.reply:has(input[name=send]:not(:checked)) { opacity: .55; }
/* Acma kapama anahtari: isaret kutusunun kendisi gizli, yerine hap. */
.switch { display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span {
  width: 34px; height: 18px; border-radius: 9px; padding: 2px;
  background: var(--neutral-400); display: flex; transition: background .2s;
}
.switch span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tetikleyen kelimeler: etiketler, sonunda "+ kelime". */
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chips .pill { padding: 2px 4px 2px 8px; gap: 2px; }
.chips .pill button { border: 0; padding: 0 3px; font-size: var(--fs-m); line-height: 1; color: var(--muted); background: none; }
.chips .pill button:hover { color: var(--bad); background: none; }
.chips input { height: 24px !important; width: 120px; padding: 1px 6px; font-size: var(--fs-s); }

/* ---------- cihaz kartlari (bayiler, kullanicilar, medya) ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }

/* Filtre cipi (islemler): baglanti, secili olan dolu. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  font-size: var(--fs-s); color: var(--text); text-decoration: none; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-500); }
.chip.ok::before { background: var(--ok); }
.chip.run::before { background: var(--accent); }
.chip.bad::before { background: var(--bad); }
.chip.on { background: var(--accent); color: var(--bg); }
.chip small { font-size: inherit; opacity: .65; font-variant-numeric: tabular-nums; }

/* ---------- dar ekran ---------- */

@media (max-width: 860px) {
  /* Kenar cubugu cekmece: menu dugmesi aciyor, perdeye dokununca kapaniyor. */
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 60; height: auto; width: 220px;
    transform: translateX(-100%); transition: transform .2s ease-out;
  }
  .nav-open .side { transform: none; box-shadow: var(--shadow); }
  .nav-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); }
  .nav-toggle { display: inline-flex; }
  .shell { padding: 0 10px; }
  .topbar { gap: 8px; }
  /* Ilk satir: menu, sayfa adi, saat. Arama alt satira iniyor. */
  .crumb > :not(b) { display: none; }
  .crumb { flex: 1; font-size: var(--fs-m); }
  .topbar > .grow { display: none; }
  .top-search { order: 3; flex: 1 1 100%; }
}

@media (max-width: 720px) {
  main { padding-bottom: 40px; }
  .card { padding: 14px; }
  .stats, .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat .k, .status-strip > div { padding-left: 14px; padding-right: 14px; }
  .stat .v, .stat .hint, .stat .spark, .stat .meter, .stat .strip, .stat .share { margin-left: 14px; margin-right: 14px; }
  .stat .v { font-size: var(--fs-xl); }
  .status-strip b { font-size: var(--fs-l); }
  .segmented { max-width: 100%; overflow-x: auto; }
  .card > h2, .card-head, details.card > summary { margin: -14px -14px 14px; padding: 12px 14px; }
  details.card:not([open]) > summary { margin-bottom: -14px; }
  .card.flush > .card-head, .card.flush > h2 { margin: 0; }
  .panel-head, .flush-title { padding: 12px 14px; }
  .panel-body { padding: 14px; }
  .table-wrap { margin: 0 -14px; padding: 0; }
  .card.flush > .table-wrap { margin: 0; }
  th:first-child, td:first-child { padding-left: 14px; }
  th:last-child, td:last-child { padding-right: 14px; }
  /* Dar ekranda daha çok sütun sığsın; tablo yine de kaydırılabiliyor. */
  table { font-size: var(--fs-s); }
  th, td { padding: 8px 6px; }
  .wide-only { display: none; }
  .fold-list { display: block; }
  /* Oynatma listesi satiri: dosya adi ustte, sure ve dugmeler alt satirda.
     .grow'un tabani 0 oldugu icin sarmiyor, adi kendi genisligine birakiyoruz. */
  .playlist li { flex-wrap: wrap; }
  .playlist li .grow { flex-basis: auto; }
  .banner { flex-wrap: wrap; }
  /* Baslik telefonda sarsin; "Son 30 gun" nowrap kaldiginda sutunu tasiriyordu. */
  th { white-space: normal; }
  /* Komut kaydi dort sutun: yuk sutunu kisalsin, hucreler daralsin. */
  .log .truncate { max-width: 64px; }
  .log td { padding-left: 6px; padding-right: 6px; }
  .head .actions { margin-left: 0; width: 100%; }
  .head .actions button, .head .actions .btn { flex: 1; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .panel-head { flex-wrap: wrap; white-space: normal; }
  /* Parca satiri: ad ve sil dugmesi ustte; sure, boyut ve kullanim alt satirda. */
  .track { flex-wrap: wrap; row-gap: 4px; }
  .track .grow { flex-basis: calc(100% - 90px); }
  .track .cell, .track .cell.wide { order: 1; width: auto; font-size: var(--fs-s); }
  .track [data-duration] { margin-left: 38px; }
  /* Listedeki satirda cal dugmesinin onunde tutamak da var. */
  .playlist li.track [data-duration] { margin-left: 64px; }
  /* Asama satiri: cubuk siga sigmiyor, ad + sure + kutu kaliyor. */
  .phase-line { grid-template-columns: minmax(0, 1fr) auto 84px; gap: 10px; }
  .phase-line .meter { display: none; }
  /* Kazanan satiri: hesap ve kod ustte; yorum, rozetler ve kimlikler alt alta. */
  .winner { grid-template-columns: minmax(0, 1fr) auto; }
  .winner .campaign-comment, .winner .tags, .winner small { grid-column: 1 / -1; }
  .winner .tags { justify-content: flex-start; }
}

/* ---------- giris / parola sayfalari ---------- */

body.center {
  display: grid; place-items: center; min-height: 100vh; padding: 24px; box-sizing: border-box;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--bg);
}
.auth { width: min(400px, 100%); display: grid; gap: 4px; justify-items: center; }
.auth-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font: 700 var(--fs-xl)/1.2 var(--display);
}
.auth-brand img {
  width: 52px; height: 52px; border-radius: 15px; object-fit: cover;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent);
}
.auth-sub { margin: 0 0 20px; color: var(--muted); font-size: var(--fs-m); }
.auth .card {
  width: 100%; box-sizing: border-box; display: grid; gap: 6px; padding: 24px;
  box-shadow: 0 20px 50px color-mix(in srgb, #000 30%, transparent);
}
.auth .card button.primary { margin-top: 10px; padding: 12px 18px; }
.auth .banner { margin-bottom: 10px; }

/* Kampanyalar mevcut tema tokenlarını kullanır. */
.campaign-page { display: grid; gap: 10px; }
/* Kart icindeki aciklama satiri (.head disinda da kullaniliyor). */
.card .sub, dialog .sub { margin: 8px 0; color: var(--muted); font-size: var(--fs-s); text-wrap: pretty; }
dialog .sub { margin: 0; }
.campaign-comment, .campaign-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Mesaj onizlemesi: sohbet balonu. */
.campaign-preview { padding: 10px 12px; border-radius: 12px 12px 12px 3px; background: var(--neutral-200); line-height: 1.5; max-width: 520px; }
.campaign-deliveries, .campaign-reservations { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.campaign-coupon-picker { max-height: 220px; overflow-y: auto; margin: 12px 0; }
.campaign-coupon-picker label { padding: 8px 0; }
#campaign-messages-dialog { width: min(680px, calc(100vw - 24px)); max-width: none; }
#campaign-messages-form textarea { resize: vertical; }
#campaign-messages-form > .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.campaign-message-preview h3, .campaign-message-preview .muted { margin: 0 0 8px; }
.campaign-message-preview .campaign-preview { margin: 0 0 16px; }
#campaign-dialog { width: min(620px, calc(100vw - 24px)); max-width: none; }

.campaign-post-preview { display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
.campaign-post-preview > div { min-width: 0; }
.campaign-post-preview .campaign-preview { margin: 0; }
.campaign-post-preview img, .campaign-image-preview { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.campaign-image-preview { max-width: 320px; }
.campaign-image-preview { display: block; margin: 12px auto; }
.campaign-image-preview[hidden] { display: none; }
#campaign-upload-fields textarea { resize: vertical; min-height: 140px; }
@media (max-width: 640px) { .campaign-post-preview { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---------- "?" açıklaması ---------- */
.help {
  display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%;
  font: 700 11px/1 var(--display); color: var(--muted); cursor: help; user-select: none;
  border: 1px solid var(--line-strong); background: var(--surface-2); vertical-align: middle;
  text-transform: none; letter-spacing: 0;
}
.help:hover, .help:focus-visible { color: var(--accent-700); border-color: var(--accent); outline: none; }
#tip {
  position: fixed; z-index: 100; max-width: 280px; padding: 10px 12px; border-radius: var(--radius);
  font-size: var(--fs-s); line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  pointer-events: none;
}
.ov-status.off { color: var(--muted); background: var(--surface-2); }

/* ---------- Liste sayfaları: tablo kartının başlığında süzgeç ve arama ---------- */
.list-head { gap: 12px; flex-wrap: wrap; }
.list-head .search { min-width: 220px; }
.list-head .search input { height: 32px; }

/* Cihazlar tablosu: genel bakışın makine tablosu gibi. Satırın solunda
   durum renginde ince çizgi, durum hap rozeti, sayılar renkli kutucuk. */
.dev-table td { padding-top: 14px; padding-bottom: 14px; }
.dev-table tbody tr { box-shadow: inset 3px 0 0 transparent; transition: background .12s, box-shadow .12s; }
.dev-table tbody tr.st-run { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dev-table tbody tr.st-bad { box-shadow: inset 3px 0 0 var(--bad); }
.dev-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent-600); }
.dev-table .name-cell b { font-size: var(--fs-m); }
.dev-table .name-cell .dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); }
.dev-table .name-cell .dot.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent); }
.dev-table .name-cell .dot.bad { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 16%, transparent); }
.dev-table tr.st-off .name-cell b { color: var(--muted); }
.dealer-inline { display: none; }
.dealer-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dealer-tag i {
  font-style: normal; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none;
  font-size: 10px; font-weight: 700; color: var(--accent-800); background: var(--accent-100);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.dev-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-state em { font-style: normal; font-size: var(--fs-s); color: var(--muted); }
.fold.st-ok .st, .dev-table tr.st-ok .st { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.fold.st-run .st, .dev-table tr.st-run .st { background: var(--accent-100); color: var(--accent-800); }
.fold.st-bad .st, .dev-table tr.st-bad .st { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.fold.st-off .st, .dev-table tr.st-off .st { background: var(--neutral-200); color: var(--muted); }
.dev-progress { max-width: 180px; margin-top: 8px; }
.cnt {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.cnt.std { color: var(--accent-800); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cnt.prem { color: #fff; background: var(--accent-400); }
:root[data-theme="light"] .cnt.prem:not(.zero) { background: var(--accent-600); }
.cnt.zero { color: var(--faint); background: transparent; font-weight: 500; }
@media (max-width: 1250px) {
  .dev-table .dealer-col { display: none; }
  .dealer-inline { display: inline; }
}

/* Bayi kartları: genel bakışın özet kartı biçiminde, renk sırayla. */
.cards.dealer-cards { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dealer-cards > .kpi:nth-child(4n+1) { --k: var(--ok); }
.dealer-cards > .kpi:nth-child(4n+2) { --k: var(--accent); }
.dealer-cards > .kpi:nth-child(4n+3) { --k: #8b7cf6; }
.dealer-cards > .kpi:nth-child(4n+4) { --k: var(--accent-700); }
.dl .lb-av { width: 34px; height: 34px; border-radius: 10px; }
.dl-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dl-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-name small { font-size: var(--fs-s); color: var(--faint); }

/* İşlemler: ödeme halkası yanında satırlar, hacim çubukları yuvarlak. */
.pay-split { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; }
.pay-split .donut { width: 150px; height: 150px; margin: 0; }
.pay-split .method { grid-template-columns: 10px minmax(0, 1fr) auto 90px; padding: 8px; border-radius: var(--radius); border-top: 0; }
.pay-split .method.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pay-split .method:hover { background: var(--surface-2); }
.tx-bars { gap: 4px; }
.tx-bars i:first-child, .tx-bars i { border-radius: 0; }
.tx-bars > div > i:last-child { border-radius: 5px 5px 0 0; }
@media (max-width: 720px) {
  .pay-split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pay-split .donut-rows { width: 100%; }
  .list-head .search { min-width: 0; flex: 1 1 100%; order: 5; }
  .list-head .search input { width: 100%; }
}

/* ---------- Genel bakış (ov) ----------
   22 Eki: üç örnek panelin karışımı. Renkli özet kartları, alan grafiği,
   halka grafikler, tablo gibi makine listesi. Grafikler sunucuda çizilen
   SVG (view.Curve, view.Donut); renkleri buradan. Kategorik renkler yalnız
   ödeme halkasında: kart, karekod, kupon, kredi, ücretsiz, diğer. */
/* Ödeme halkasının kategorik renkleri (genel bakış ve İşlemler). */
:root {
  --c-card: var(--accent); --c-qr: #8b7cf6; --c-coupon: var(--warn);
  --c-credit: #e46fae; --c-free: var(--neutral-500); --c-other: var(--neutral-400);
}
.page.dash.ov { gap: 20px; }

/* Başlık ve durum rozeti. */
.ov-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ov-top h1 { margin: 0; font: 700 var(--fs-xl)/1.2 var(--display); }
.ov-top p { margin: 4px 0 0; font-size: var(--fs-m); color: var(--muted); }
.ov-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-size: var(--fs-m); font-weight: 600; border: 1px solid var(--line);
}
.ov-status.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ov-status.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }

/* Dört özet kartı: her birinin kendi rengi (--k), üstte ince renk şeridi,
   köşeden yayılan hafif renk, renkli simge rozeti. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* Dört kart 3 + 1 diye kırılmasın: dar ekranda 2 × 2. */
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  --k: var(--accent);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 0; min-height: 168px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--k) 22%, var(--line));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--k) 16%, transparent), transparent 60%),
    var(--surface);
}
.kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k); }
.k-today { --k: var(--ok); }
.k-month { --k: var(--accent); }
.k-wash { --k: var(--accent-700); }
.k-fleet { --k: var(--ok); }
.k-fleet.warn { --k: var(--warn); }
.k-fleet.bad { --k: var(--bad); }
.k-bad { --k: var(--bad); }
.k-other { --k: #8b7cf6; }
.kpi-share.meter > b { background: var(--k); }
.k-bad .kpi-v { color: var(--bad); }
.kpi-runs { display: flex; flex-direction: column; gap: 6px; margin: auto 0 18px; }
.kpi-runs .meter > b { background: var(--k); }
.kpi-share { margin: auto 0 20px; border-radius: 999px; }
.kpi-head { display: flex; align-items: center; gap: 10px; }
.kpi-ic {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent);
}
.kpi-ic .i { width: 17px; height: 17px; }
.kpi-k { font-size: var(--fs-m); color: var(--muted); font-weight: 600; }
.kpi-vrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-v { font: 700 30px/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 6px; }
.kpi-v.money { color: var(--ok); }
.kpi-v small { font-size: var(--fs-l); font-weight: 600; color: var(--faint); }
.kpi-s { font-size: var(--fs-s); color: var(--muted); }
.kpi-spark { display: block; width: calc(100% + 40px); height: 48px; margin: auto -20px 0; }
.kpi-spark path { vector-effect: non-scaling-stroke; fill: none; }
.kpi-spark .line { stroke: var(--k); stroke-width: 2; }
.kpi-spark .prev { stroke: var(--neutral-500); stroke-width: 1.5; stroke-dasharray: 3 3; }
.kpi-spark .fill { fill: color-mix(in srgb, var(--k) 22%, transparent); stroke: none; }
.kpi-week { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin: auto 0 16px; }
.kpi-week i { flex: 1; min-height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--k) 35%, var(--neutral-200)); }
.kpi-week i.now { background: var(--k); }
.kpi-ring { display: flex; align-items: center; gap: 16px; margin: auto 0 18px; }
.kpi-ring svg { width: 76px; height: 76px; flex: none; transform: rotate(0deg); }
.kpi-ring > div { display: flex; flex-direction: column; gap: 4px; }
.kpi-ring .kpi-v { margin: 0; }
.kpi-ring circle, .donut circle { fill: none; stroke-width: 3.6; }
/* .track değil: müzik sayfasının parça satırı .track, panel.js onları seçiyor. */
.kpi-ring circle.ring-bg, .donut circle.ring-bg { stroke: var(--neutral-200); }
.kpi-ring circle.val { stroke: var(--k); stroke-linecap: round; }

/* Kartlar ve ızgaralar. */
.ov-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.ov-side { display: grid; gap: 20px; align-content: start; }
.ov-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; overflow: hidden; }
.ov-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-s); color: var(--muted);
}
.ov-head h2 { margin: 0; font-size: var(--fs-l); font-weight: 700; color: var(--text); }
.ov-head a, .ov-head .link { color: var(--accent-700); text-decoration: none; font-size: var(--fs-s); background: none; border: 0; padding: 0; cursor: pointer; }
.ov-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; min-width: 0; }
.ov-card .pad { padding: 20px; margin: 0; }
.ov-card .feed { padding: 4px 20px 8px; }
.ov .chart-info { min-height: 22px; }

/* Kazanç: alan grafiği; üstündeki görünmez sütunlar fareyle bilgi veriyor,
   7/14/30 gün seçimi hangi SVG'nin görüneceğini seçiyor. */
.chart.area { height: 230px; flex: none; }
.area-box {
  position: relative; flex: 1; min-width: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 50%;
  border-bottom: 1px solid var(--line-strong);
}
.area-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: visible; }
[data-range="7"] .area-svg[data-days="7"], [data-range="14"] .area-svg[data-days="14"],
[data-range="30"] .area-svg[data-days="30"] { display: block; }
.area-svg path { vector-effect: non-scaling-stroke; }
.area-svg .line { fill: none; stroke: var(--accent-600); stroke-width: 2.5; }
.area-svg stop { stop-color: var(--accent); }
.bars.hit { position: absolute; inset: 0; background: none; gap: 0; }
.bars.hit > div { border-radius: 4px; }
.bars.hit > div:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); opacity: 1; }
.bars.hit > .now { box-shadow: inset 0 -2px 0 var(--ok); }
.bars.hit:hover > :not(:hover) { opacity: 1; }
.ov .bars.pairs i { border-radius: 3px 3px 0 0; }
.ov .chart { min-height: 200px; }

/* Makineler: başlık satırlı tablo. */
.mr {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 90px 110px; align-items: center;
  gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; font-size: var(--fs-m);
}
.mr:last-child { border-bottom: 0; }
a.mr:hover { background: var(--surface-2); }
.mr.mh { padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-s); font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); }
.mr.mh > :nth-child(n+3) { text-align: right; }
.mr-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mr-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mr-name b { font-weight: 600; overflow-wrap: anywhere; }
.mr-name small { font-size: var(--fs-s); color: var(--faint); }
.mr-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mr-state .meter { flex: 1 0 60px; max-width: 120px; border-radius: 2px; }
.st { font-style: normal; font-weight: 600; font-size: var(--fs-s); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mr.ok .st { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.mr.run .st { background: var(--accent-100); color: var(--accent-800); }
.mr.bad .st { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.mr.off .st { background: var(--neutral-200); color: var(--muted); }
.mr.off .mr-name b { color: var(--muted); }
.mr-note { color: var(--muted); font-size: var(--fs-s); }
.mr-wash { color: var(--muted); font-size: var(--fs-s); text-align: right; white-space: nowrap; }
.mr-money { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Ödeme halkası. */
.donut { position: relative; width: 168px; height: 168px; margin: 4px auto 6px; }
.donut svg { width: 100%; height: 100%; }
.donut circle:not(.ring-bg) { stroke-width: 4.2; }
.donut .m-card { stroke: var(--c-card); } .donut .m-qr { stroke: var(--c-qr); }
.donut .m-coupon { stroke: var(--c-coupon); } .donut .m-credit { stroke: var(--c-credit); }
.donut .m-free { stroke: var(--c-free); } .donut .m-other { stroke: var(--c-other); }
.donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-mid b { font: 700 var(--fs-xl)/1 var(--display); }
.donut-mid span { font-size: var(--fs-s); color: var(--muted); }
.donut-rows { display: flex; flex-direction: column; }
.donut-rows .method { grid-template-columns: 10px minmax(0, 1fr) auto 90px; padding: 7px 0; border-top: 1px solid var(--line); }
.donut-rows .method > i { width: 10px; height: 10px; border-radius: 3px; background: var(--c-other); }
.donut-rows .m-card > i { background: var(--c-card); } .donut-rows .m-qr > i { background: var(--c-qr); }
.donut-rows .m-coupon > i { background: var(--c-coupon); } .donut-rows .m-credit > i { background: var(--c-credit); }
.donut-rows .m-free > i { background: var(--c-free); }
.donut-rows .method b { font-size: var(--fs-m); font-weight: 500; }
.ov .mix { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.ov .mix .share { border-radius: 3px; }

/* Son olaylar: zaman çizgisi; simge halkası olayın türünün renginde. */
.ov .feed > div {
  position: relative; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px;
  padding: 9px 0; border: 0;
}
.ov .feed > div > :first-child { order: 3; }
.ov .feed > div::before {
  content: ""; position: absolute; left: 14.5px; top: 36px; bottom: -6px; width: 1px; background: var(--line);
}
.ov .feed > div:last-child::before { display: none; }
.ov .feed .i, .ov .feed > div > span:empty {
  --e: var(--accent);
  width: 30px; height: 30px; margin: 0; padding: 7px; box-sizing: border-box; border-radius: 50%;
  color: var(--e); background: color-mix(in srgb, var(--e) 15%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--e) 30%, transparent);
}
.ov .feed .ev-check .i { --e: var(--ok); }
.ov .feed .ev-download .i { --e: #8b7cf6; }
.ov .feed .ev-card .i, .ov .feed .ev-qr .i, .ov .feed .ev-ticket .i { --e: var(--warn); }
.ov .feed .ev-wrench .i { --e: var(--neutral-600); }
.ov .feed .bad .i { --e: var(--bad); }
.ov .feed > div > div { padding-top: 6px; }
.ov .feed span { font-size: var(--fs-m); }
.ov .feed time { padding-top: 7px; white-space: nowrap; }

/* Haftanın günleri: iz üstünde hap çubuklar, en iyi gün dolu renk. */
.ov-head .pill { font-size: var(--fs-s); font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.ov-head .pill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.wk { display: flex; gap: 10px; flex: 1; min-height: 200px; padding-top: 6px; }
.wk-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.wk-v { font-size: var(--fs-s); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-track {
  flex: 1; width: 100%; max-width: 46px; border-radius: 14px; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--neutral-500) 12%, transparent); overflow: hidden;
}
.wk-track i {
  display: block; width: 100%; border-radius: 14px; min-height: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 55%, transparent), color-mix(in srgb, var(--ok) 25%, transparent));
  transform-origin: bottom; animation: grow .9s cubic-bezier(.2, .8, .2, 1) backwards;
}
.wk-d { font-size: var(--fs-s); color: var(--faint); font-weight: 600; }
.wk-col.best .wk-track i {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 75%, #fff), var(--ok));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ok) 35%, transparent);
}
.wk-col.best .wk-v {
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); padding: 1px 8px; border-radius: 999px;
}
.wk-col.best .wk-d { color: var(--text); }
.wk-col:hover .wk-track i { filter: brightness(1.15); }

/* Yoğun saatler: ısı renkli çubuklar, şu anki saat işaretli. */
.ov .busy-mode { flex: 1; }
.busy-now .big { font: 700 var(--fs-xl)/1.1 var(--display); }
.bars.heat { flex: 1; min-height: 190px; gap: 4px; background-size: 100% 33.33%; }
.bars.heat i {
  border-radius: 6px 6px 2px 2px; min-height: 3px;
  background: color-mix(in srgb, var(--neutral-500) 30%, transparent);
}
.bars.heat i.normal { background: linear-gradient(180deg, var(--accent-600), color-mix(in srgb, var(--accent) 45%, transparent)); }
.bars.heat i.busy {
  background: linear-gradient(180deg, #ffb547, #f0703a);
  box-shadow: 0 4px 14px color-mix(in srgb, #f0703a 30%, transparent);
}
.bars.heat > .now { position: relative; }
.bars.heat > .now::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--text);
}
.heat-x { gap: 4px; margin-top: 6px; }
.heat-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-s); color: var(--muted); }
.heat-foot .legend i { width: 10px; height: 10px; border-radius: 3px; }
.heat-foot .legend i.calm { background: color-mix(in srgb, var(--neutral-500) 30%, transparent); }
.heat-foot .legend i.normal { background: var(--accent-600); }
.heat-foot .legend i.busy { background: linear-gradient(180deg, #ffb547, #f0703a); }
.level-busy { color: #f0703a; }

/* Makine makine: ad + tutar + fark, altında bugün (kalın) ve dün (ince). */
.ov-grid.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: stretch; }
.ov-grid.solo { grid-template-columns: minmax(0, 1fr); }
.ov-grid.duo .ov-card { display: flex; flex-direction: column; }
.ov-grid.duo .ov-body { flex: 1; }
.cms { gap: 4px; }
.cm {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bars em";
  gap: 6px 16px; align-items: center; padding: 10px 12px; margin: 0 -12px; border-radius: 10px;
  color: inherit; text-decoration: none; font-variant-numeric: tabular-nums;
}
.cm:hover { background: var(--surface-2); }
.cm-name { grid-area: name; display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.cm-val { grid-area: val; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cm-val strong { font-size: var(--fs-l); }
.cm-bars { grid-area: bars; display: flex; flex-direction: column; gap: 3px; }
.cm-bars b { display: block; height: 8px; min-width: 4px; border-radius: 999px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cm-bars .t { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 55%, transparent), var(--ok)); }
.cm-bars .y { height: 4px; background: color-mix(in srgb, var(--neutral-500) 45%, transparent); }
.cm em { grid-area: em; font-style: normal; font-size: var(--fs-s); color: var(--faint); white-space: nowrap; text-align: right; }
/* Yüzde farkı rozeti (.chip panelin süzgeç çipi, ayrı). */
.ov .delta {
  font-style: normal; font-size: var(--fs-s); font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, currentColor 13%, transparent);
}

/* Bayiler: sıralı lider tablosu. */
.lbs { gap: 2px; }
.lb { display: grid; grid-template-columns: 26px 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lb:last-child { border-bottom: 0; }
.lb-rank {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-s); font-weight: 700; color: var(--muted); background: var(--surface-2);
}
.lb-rank.r1 { color: #5a3d00; background: linear-gradient(135deg, #ffe08a, #f2b632); }
.lb-rank.r2 { color: #2f3a40; background: linear-gradient(135deg, #eef2f4, #b9c3c9); }
.lb-rank.r3 { color: #4a2510; background: linear-gradient(135deg, #f3c9a2, #c98250); }
.lb-av {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: var(--fs-s); font-weight: 700; color: var(--accent-800);
  background: linear-gradient(135deg, var(--accent-200), var(--accent-100));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.lb-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lb-top { display: flex; align-items: baseline; gap: 10px; }
.lb-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-top strong { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--neutral-500) 15%, transparent); overflow: hidden; }
.lb-bar b { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--ok)); }
.lb small { font-size: var(--fs-s); color: var(--faint); }

@media (max-width: 1200px) {
  .ov-grid, .ov-grid.duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 720px) {
  .page.dash.ov { gap: 14px; }
  .kpi { padding: 14px 14px 0; min-height: 150px; }
  .kpi-spark { width: calc(100% + 28px); margin: auto -14px 0; }
  .kpi-v { font-size: var(--fs-xl); }
  .kpi-ring svg { width: 56px; height: 56px; }
  .kpi .delta { display: none; }
  .ov-head, .ov-body { padding-left: 14px; padding-right: 14px; }
  .chart.area { height: 180px; }
  .mr {
    grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 12px 14px;
    grid-template-areas: "name money" "state wash";
  }
  .mr.mh { display: none; }
  .mr-name { grid-area: name; }
  .mr-money { grid-area: money; }
  .mr-state { grid-area: state; }
  .mr-wash { grid-area: wash; }
}