/* ============================================================
   ŞoförUp — BÖLÜM C · Yönetici web paneli
   1440px masaüstü kabuğu. Renk ve tipografi token'ları
   sofor-app.css'teki açık tema :root'undan gelir.
   ============================================================ */

body.admin{
  display:block; padding:0; background:var(--bg);
  min-width:1180px;
}
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

/* ─── sol menü ──────────────────────────────────────────────── */
.side{
  background:var(--navy-900); color:var(--on-navy);
  display:flex; flex-direction:column; padding:20px 14px 16px;
  position:sticky; top:0; height:100vh;
  --muted: var(--on-navy-muted);
}
.side .brand{ display:flex; align-items:center; gap:11px; padding:0 8px 22px; }
.side .brand .mark{ width:36px; height:36px; border-radius:11px; background:var(--accent);
  display:grid; place-items:center; flex:none; }
.side .brand .mark svg{ width:20px; height:20px; }
.side .brand b{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.02em; }
.side .brand span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-navy-muted); margin-top:3px; }

.side .grp-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-navy-muted); padding:14px 10px 8px; margin:0; }
.snav{ display:flex; align-items:center; gap:11px; min-height:44px; padding:10px 10px;
  border-radius:11px; color:var(--on-navy-muted); text-decoration:none; font-size:14.5px;
  transition:background-color 150ms cubic-bezier(.2,0,0,1), color 150ms cubic-bezier(.2,0,0,1); }
.snav svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; stroke-linecap:round; stroke-linejoin:round; }
.snav:hover{ background:rgba(255,255,255,.08); color:var(--on-navy); }
.snav.active{ background:rgba(255,255,255,.12); color:var(--on-navy); font-weight:600; }
/* vurgu bütçesi logo + grafik için ayrıldı; sayaç nötr kalır */
.snav .count{ margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:600;
  background:rgba(255,255,255,.16); color:var(--on-navy); border-radius:999px; padding:2px 7px; }
.side .me{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px 10px 0;
  border-top:1px solid var(--navy-line); }
.side .me .ava{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, oklch(0.70 0.10 250), oklch(0.40 0.06 262));
  font-family:var(--font-display); font-weight:600; font-size:13px; color:#fff; }
.side .me b{ display:block; font-size:13.5px; font-weight:600; line-height:1.2; }
.side .me span{ display:block; font-size:12px; color:var(--on-navy-muted); margin-top:2px; }
.side :focus-visible{ outline-color:var(--accent-on-dark); }

/* ─── üst bar ───────────────────────────────────────────────── */
.main{ min-width:0; display:flex; flex-direction:column; }
.top{
  height:64px; flex:none; display:flex; align-items:center; gap:16px;
  padding:0 32px; background:color-mix(in oklch, var(--surface) 92%, transparent);
  border-bottom:1px solid var(--border); backdrop-filter:blur(20px);
  position:sticky; top:0; z-index:20;
}
.top h1{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.025em; margin:0; }
.top .crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 3px; }
.top .search{
  margin-left:auto; display:flex; align-items:center; gap:9px; min-width:260px; min-height:38px;
  padding:8px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--muted); font-size:13.5px; cursor:text;
}
.top .search svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; flex:none; stroke-linecap:round; }
.top .search kbd{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--muted);
  border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.top .search:hover{ border-color:color-mix(in oklch, var(--fg) 22%, var(--border)); }
.tbtn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; color:var(--fg); cursor:pointer; flex:none; position:relative;
  transition:background-color 150ms cubic-bezier(.2,0,0,1); }
.tbtn:hover{ background:var(--fg-hover); }
.tbtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tbtn .dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); border:1.5px solid var(--surface); }

/* ─── sayfa gövdesi ─────────────────────────────────────────── */
.page{ padding:26px 32px 56px; flex:1 1 auto; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2{ font-family:var(--font-display); font-size:23px; font-weight:600; letter-spacing:-.028em; margin:0 0 6px; }
.page-head p{ margin:0; font-size:14px; color:var(--muted); }
.page-head .acts{ display:flex; align-items:center; gap:10px; flex:none; }
.page-head .btn-primary, .page-head .btn-secondary{ width:auto; padding-inline:20px; min-height:40px; font-size:14px; white-space:nowrap; }

.card-lg{ background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card); }
.card-lg > header{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--border); }
.card-lg > header h3{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.02em; margin:0; }
.card-lg > header .sub{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.card-lg .body{ padding:20px; }

/* ─── KPI kartları ──────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px;
  box-shadow:var(--shadow-card); }
.kpi .lbl{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.kpi .lbl svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.kpi .n{ display:block; font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:31px; font-weight:600; letter-spacing:-.035em; line-height:1; margin:14px 0 10px; }
.kpi .foot{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.kpi .trend{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:12.5px; font-weight:600; }
.kpi .trend svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kpi .trend.up{ color:oklch(0.46 0.12 155); }
.kpi .trend.down{ color:oklch(0.50 0.18 26); }
.kpi .live{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }

/* ─── saatlik grafik ────────────────────────────────────────── */
.hchart .plot{ display:flex; align-items:flex-end; gap:6px; height:190px; }
.hchart .plot > div{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.hchart .bar{ width:100%; border-radius:5px 5px 2px 2px; background:var(--accent);
  transition:background-color 150ms cubic-bezier(.2,0,0,1); }
.hchart .plot > div.dim .bar{ background:color-mix(in oklch, var(--accent) 32%, var(--surface)); }
.hchart .plot > div:hover .bar{ background:var(--accent-press); }
.hchart .labels{ display:flex; gap:6px; margin-top:10px; }
.hchart .labels span{ flex:1; text-align:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.03em; color:var(--muted); }
.hchart .gridline{ position:relative; }
.hchart .gridline::before{ content:''; position:absolute; left:0; right:0; top:0; border-top:1px dashed var(--border); }

/* ─── veri tablosu ──────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); padding:0 16px 11px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td{ padding:13px 16px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background-color 150ms cubic-bezier(.2,0,0,1); }
.tbl tbody tr:hover{ background:var(--fg-hover); }
.tbl .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl .right{ text-align:right; }
.tbl .who{ display:flex; align-items:center; gap:10px; }
.tbl .who .ava{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, oklch(0.74 0.09 62), oklch(0.46 0.06 250));
  font-family:var(--font-display); font-weight:600; font-size:11.5px; color:#fff; }
.tbl .who b{ font-weight:500; }
.tbl .sub{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.row-link{ background:none; border:0; padding:6px 8px; margin:-6px -8px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500; color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.row-link:hover{ color:var(--accent); background:var(--fg-hover); }

/* ─── filtre çubuğu ─────────────────────────────────────────── */
.filters{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 13px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--fg);
  font:inherit; font-size:13.5px; cursor:pointer;
  transition:background-color 150ms cubic-bezier(.2,0,0,1), border-color 150ms cubic-bezier(.2,0,0,1); }
.chip:hover{ background:var(--fg-hover); border-color:color-mix(in oklch, var(--fg) 24%, var(--border)); }
.chip[aria-pressed="true"]{ background:var(--fg); border-color:var(--fg); color:#fff; font-weight:500; }
/* basılı çipin hover eşi tanımsızdı; koyulaşarak kontrastı artırır */
.chip[aria-pressed="true"]:hover{ background:oklch(0.200 0.040 250); border-color:oklch(0.200 0.040 250); }
.chip .n{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.chip[aria-pressed="true"] .n{ color:rgba(255,255,255,.72); }
.chip svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ─── belge inceleme ────────────────────────────────────────── */
.docgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.docprev{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.docprev .img{ aspect-ratio:16/10; display:grid; place-items:center; text-align:center; padding:12px;
  background:linear-gradient(140deg, color-mix(in oklch, var(--fg) 5%, var(--surface)), color-mix(in oklch, var(--fg) 11%, var(--surface)));
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); border-bottom:1px solid var(--border); }
.docprev .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; }
.docprev .t{ font-size:13.5px; font-weight:500; }
.docprev .s{ display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ─── tarife formu ──────────────────────────────────────────── */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.form-grid .full{ grid-column:1/-1; }
.finput{ display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); overflow:hidden; min-height:46px;
  transition:border-color 150ms cubic-bezier(.2,0,0,1), box-shadow 150ms cubic-bezier(.2,0,0,1); }
.finput:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.finput input{ flex:1; min-width:0; border:0; background:none; padding:12px 14px; font:inherit;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:15px; font-weight:500; color:var(--fg); }
.finput input:focus{ outline:none; }
.finput .unit{ flex:none; padding:0 14px; font-family:var(--font-mono); font-size:13px; color:var(--muted);
  border-left:1px solid var(--border); align-self:stretch; display:grid; place-items:center; background:var(--fg-soft); }

/* ─── canlı harita paneli ───────────────────────────────────── */
.map-wrap{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background:var(--map-land); height:700px; }
.map-wrap svg.city{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mk{ position:absolute; transform:translate(-50%,-50%); }
.mk .pin{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); box-shadow:0 3px 10px -3px rgba(9,20,32,.34); color:var(--fg); }
.mk .pin svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mk.busy .pin{ background:var(--accent); border-color:transparent; color:#fff; }
.mk.free .pin{ background:var(--surface); color:oklch(0.44 0.12 155); border-color:color-mix(in oklch, var(--ok) 46%, var(--border)); }
.mk.wait .pin{ background:var(--fg); border-color:transparent; color:#fff; border-radius:50%; width:18px; height:18px; }
.map-legend{ position:absolute; left:16px; bottom:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-float); display:flex; flex-direction:column; gap:9px; }
.map-legend span{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--fg); }
.map-legend i{ width:12px; height:12px; border-radius:4px; flex:none; }

/* ─── boş / hata panelleri ──────────────────────────────────── */
.state-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:52px 24px; gap:9px; }
.state-box .ico{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--fg-soft); color:var(--muted); margin-bottom:10px; }
.state-box .ico svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.state-box.bad .ico{ background:var(--danger-soft); color:var(--danger); }
.state-box h4{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.02em; margin:0; }
.state-box p{ margin:0; font-size:14px; line-height:1.5; color:var(--muted); max-width:44ch; }
.state-box .acts{ display:flex; gap:10px; margin-top:14px; }
.state-box .acts .btn-primary, .state-box .acts .btn-secondary{ width:auto; padding-inline:20px; min-height:42px; font-size:14px; }
.sk{ background:linear-gradient(90deg, rgba(18,38,58,.06) 0%, rgba(18,38,58,.12) 50%, rgba(18,38,58,.06) 100%);
  background-size:200% 100%; border-radius:7px; animation:shimmer 1400ms linear infinite; display:block; }