/* ============================================================
   ŞoförUp — BÖLÜM B · Şoför / Kurye uygulaması
   sofor-app.css üzerine binen koyu tema katmanı.
   Altı çekirdek token devrildiği için kart / buton / liste /
   alan bileşenleri ve harita motoru değişmeden çalışır.
   ============================================================ */

body.theme-driver{
  /* --- altı çekirdek token, koyu --- */
  --bg:      oklch(0.185 0.036 250);
  --surface: oklch(0.245 0.040 250);
  --fg:      oklch(0.975 0.005 250);
  --muted:   oklch(0.762 0.022 250);
  --border:  oklch(0.360 0.032 250);
  --accent:  oklch(0.760 0.170 47);   /* koyu zeminde 4.7:1 okunur mercan */

  --accent-press: oklch(0.700 0.175 45);
  --accent-soft:  color-mix(in oklch, var(--accent) 18%, transparent);
  --fg-soft:      rgba(255,255,255,.07);
  --fg-hover:     rgba(255,255,255,.06);

  --ok:     oklch(0.740 0.145 155);
  --warn:   oklch(0.815 0.145 78);
  --danger: oklch(0.725 0.190 16);
  --ok-soft:     color-mix(in oklch, var(--ok) 16%, transparent);
  --warn-soft:   color-mix(in oklch, var(--warn) 16%, transparent);
  --danger-soft: color-mix(in oklch, var(--danger) 16%, transparent);

  /* --- gece haritası: motor bu token'lardan okur --- */
  --map-land:  oklch(0.228 0.020 250);
  --map-block: oklch(0.282 0.024 252);
  --map-road:  oklch(0.400 0.022 250);
  --map-edge:  oklch(0.250 0.018 250);
  --map-park:  oklch(0.288 0.038 150);
  --map-water: oklch(0.262 0.042 235);

  --shadow-card:  0 1px 2px rgba(0,0,0,.30), 0 10px 24px -16px rgba(0,0,0,.55);
  --shadow-float: 0 2px 8px rgba(0,0,0,.35), 0 20px 44px -20px rgba(0,0,0,.7);

  background: radial-gradient(58% 62% at 50% 0%, color-mix(in oklch, var(--accent) 7%, var(--bg)) 0%, var(--bg) 62%);
}
.theme-driver .mp-park-lbl{ fill:oklch(0.72 0.09 152); }
.theme-driver .mp-sea-lbl{ fill:oklch(0.70 0.07 235); }
.theme-driver .map-scrim{ background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, transparent 22%, transparent 56%, rgba(0,0,0,.30) 100%); }

/* Kilitli kural: koyu yüzeyde birincil buton beyaz dolgu + lacivert metin. */
.theme-driver .btn-primary{ background:var(--fg); color:oklch(0.185 0.036 250); }
.theme-driver .btn-primary:hover{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.theme-driver .btn-primary:active{ background:#fff; transform:translateY(1px); }
.theme-driver .btn-primary[disabled]{ background:rgba(255,255,255,.14); color:var(--muted); }
.theme-driver .btn-secondary:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.34); }
.theme-driver .tabbar{ background:color-mix(in oklch, var(--surface) 88%, transparent); }
.theme-driver .caption strong{ color:var(--fg); }
.theme-driver .device{ box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 0 2px #000 inset, 0 28px 60px -12px rgba(0,0,0,.6); }

/* ─── görev anahtarı: ekranın kahramanı ─────────────────────── */
.duty{
  display:flex; align-items:center; gap:14px; width:100%; min-height:76px;
  padding:14px 16px; border-radius:var(--radius-card); border:1.5px solid var(--border);
  background:var(--surface); color:var(--fg); font:inherit; text-align:left; cursor:pointer;
  transition:background-color 200ms cubic-bezier(.2,0,0,1), border-color 200ms cubic-bezier(.2,0,0,1);
}
.duty .lens{
  width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:var(--muted); position:relative;
}
.duty .lens svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.duty .t{ display:block; font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.duty .s{ display:block; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.35; }
.duty .knob{
  margin-left:auto; flex:none; width:58px; height:34px; border-radius:999px; padding:3px;
  background:rgba(255,255,255,.16); display:flex; align-items:center;
  transition:background-color 200ms cubic-bezier(.2,0,0,1);
}
.duty .knob i{ width:28px; height:28px; border-radius:50%; background:var(--fg); transition:transform 200ms cubic-bezier(.2,0,0,1); }
.duty[aria-pressed="true"]{ border-color:var(--ok); background:color-mix(in oklch, var(--ok) 13%, var(--surface)); }
.duty[aria-pressed="true"] .lens{ background:color-mix(in oklch, var(--ok) 26%, transparent); color:var(--ok); }
.duty[aria-pressed="true"] .lens::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  background:color-mix(in oklch, var(--ok) 20%, transparent);
  animation:selfPulse 2400ms ease-out infinite;
}
.duty[aria-pressed="true"] .knob{ background:var(--ok); }
.duty[aria-pressed="true"] .knob i{ transform:translateX(24px); }
.duty:hover{ border-color:rgba(255,255,255,.34); }

/* ─── kazanç şeridi ─────────────────────────────────────────── */
.earn-strip{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border);
  border-radius:var(--radius-card); background:var(--surface); overflow:hidden; }
.earn-strip div{ padding:13px 10px; text-align:center; }
.earn-strip div + div{ border-left:1px solid var(--border); }
.earn-strip .n{ display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.025em; }
.earn-strip .l{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-top:5px; }

/* ─── gelen talep ───────────────────────────────────────────── */
.ring{ position:relative; width:64px; height:64px; flex:none; }
.ring svg{ width:64px; height:64px; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:5; }
.ring .track{ stroke:rgba(255,255,255,.16); }
.ring .bar{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.ring .n{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:22px; font-weight:600; letter-spacing:-.03em; }
.ring.urgent .bar{ stroke:var(--danger); }
.ring.urgent .n{ color:var(--danger); }

.fare-hero{ text-align:center; padding:4px 0 2px; }
.fare-hero .amt{ font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:46px; font-weight:600; letter-spacing:-.04em; line-height:1; display:block; }
.fare-hero .cap{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-top:8px; }

.leg{ position:relative; padding-left:26px; }
.leg .mark{ position:absolute; left:0; width:11px; height:11px; }
.leg .mark.o{ top:5px; border-radius:50%; border:2.6px solid var(--fg); }
.leg .mark.d{ top:57px; border-radius:3px; background:var(--accent); }
.leg .conn{ position:absolute; left:5px; top:21px; width:2px; height:34px;
  background:repeating-linear-gradient(to bottom, var(--border) 0 3px, transparent 3px 6px); }
.leg .row{ min-height:52px; }
.leg .row + .row{ margin-top:0; }
.leg .k{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.leg .v{ display:block; font-size:14.5px; font-weight:500; line-height:1.35; margin-top:3px; }

/* ─── kaydırmalı aksiyon ────────────────────────────────────── */
.swipe{
  position:relative; height:60px; border-radius:16px; overflow:hidden; user-select:none;
  background:rgba(255,255,255,.10); border:1px solid var(--border); touch-action:none;
}
.swipe .hint{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--fg); pointer-events:none; }
.swipe .fill{ position:absolute; inset:0 auto 0 0; width:54px; background:color-mix(in oklch, var(--ok) 30%, transparent); }
.swipe .thumb{
  position:absolute; top:5px; left:5px; width:50px; height:48px; border-radius:12px;
  background:var(--fg); color:oklch(0.185 0.036 250); display:grid; place-items:center; cursor:grab;
}
.swipe .thumb:active{ cursor:grabbing; }
.swipe .thumb svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.swipe.done .hint{ color:var(--ok); }
.swipe.finish .fill{ background:color-mix(in oklch, var(--accent) 30%, transparent); }
.swipe.finish.done .hint{ color:var(--accent); }

/* ─── navigasyon bandı ──────────────────────────────────────── */
.nav-band{
  position:absolute; left:12px; right:12px; top:56px; z-index:5;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-float); padding:13px 15px; display:flex; align-items:center; gap:13px;
}
.nav-band .turn{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:color-mix(in oklch, var(--accent) 20%, transparent); color:var(--accent); }
.nav-band .turn svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.nav-band .dist{ display:block; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.nav-band .street{ display:block; font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.3; }
.nav-band .eta{ margin-left:auto; text-align:right; flex:none; }
.nav-band .eta b{ display:block; font-family:var(--font-mono); font-size:15px; font-weight:600; }
.nav-band .eta span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:3px; }

/* ─── belge yükleme kartları ────────────────────────────────── */
.stepper{ display:flex; align-items:center; gap:7px; }
.stepper i{ height:4px; flex:1; border-radius:999px; background:rgba(255,255,255,.14); }
.stepper i.done{ background:var(--ok); }
.stepper i.on{ background:var(--accent); }

.doc{
  display:flex; align-items:center; gap:13px; width:100%; min-height:74px; padding:13px 14px;
  border-radius:var(--radius-card); border:1.5px solid var(--border); background:var(--surface);
  color:var(--fg); font:inherit; text-align:left; cursor:pointer;
  transition:border-color 150ms cubic-bezier(.2,0,0,1), background-color 150ms cubic-bezier(.2,0,0,1);
}
.doc:hover{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04); }
.doc .thumb{ width:52px; height:40px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:var(--muted); overflow:hidden; }
.doc .thumb svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.doc .thumb.filled{ background:linear-gradient(140deg, oklch(0.415 0.050 47), oklch(0.300 0.028 250)); }
.doc .t{ display:block; font-size:14.5px; font-weight:500; line-height:1.25; }
.doc .s{ display:block; font-size:13px; color:var(--muted); margin-top:3px; line-height:1.3; }
.doc .state{ margin-left:auto; flex:none; }
.doc.ok{ border-color:color-mix(in oklch, var(--ok) 55%, var(--border)); }
.doc.bad{ border-color:color-mix(in oklch, var(--danger) 60%, var(--border)); background:color-mix(in oklch, var(--danger) 8%, var(--surface)); }
.doc.todo{ border-style:dashed; }
.doc .tick{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.doc .tick.ok{ background:var(--ok); }
.doc .tick.bad{ background:var(--danger); }
.doc .tick svg{ width:13px; height:13px; stroke:oklch(0.185 0.036 250); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.doc .bar{ width:56px; height:4px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.doc .bar i{ display:block; height:100%; background:var(--accent); border-radius:999px; }

/* ─── kazanç grafiği (dolgulu kodlama) ──────────────────────── */
.bars .plot{ display:flex; align-items:flex-end; gap:9px; height:136px; }
.bars .plot > div{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.bars .stack{ width:100%; border-radius:6px 6px 3px 3px; overflow:hidden; display:flex; flex-direction:column; }
.bars .ride{ background:var(--accent); }
.bars .parcel{ background:oklch(0.545 0.085 47); }   /* accent ile ayni hue, dusuk kroma */
.bars .plot > div.today .stack{ outline:2px solid var(--fg); outline-offset:2px; border-radius:6px; }
.bars .labels{ display:flex; gap:9px; margin-top:10px; }
.bars .labels span{ flex:1; text-align:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.05em; color:var(--muted); }
.bars .labels span.today{ color:var(--fg); font-weight:600; }
.legend{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); }
.legend i{ width:10px; height:10px; border-radius:3px; }

/* ─── satır dökümü ──────────────────────────────────────────── */
.erow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border); min-height:56px; }
.erow:first-child{ border-top:0; }
.erow .ico{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--fg-soft); color:var(--muted); }
.erow .ico svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.erow .t{ display:block; font-size:14.5px; font-weight:500; line-height:1.25; }
.erow .s{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.erow .amt{ margin-left:auto; flex:none; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:600; }
.erow .amt.neg{ color:var(--muted); }