@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Sora:wght@500;600;700&display=swap');

/* ============================================================
   ŞoförUp — paylaşılan tasarım sistemi (müşteri uygulaması)
   Tokenlar brand-spec.md ile birebir aynıdır.
   ============================================================ */

:root{
  /* --- altı çekirdek token --- */
  --bg:      oklch(0.981 0.005 250);
  --surface: oklch(1 0 0);
  --fg:      oklch(0.263 0.046 250);
  --muted:   oklch(0.528 0.032 250);
  --border:  oklch(0.918 0.010 250);
  --accent:  oklch(0.655 0.185 40);

  /* --- türevler --- */
  --accent-press:   oklch(0.575 0.175 38);
  --accent-soft:    color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-on-dark: oklch(0.760 0.170 47);
  --fg-soft:        color-mix(in oklch, var(--fg) 6%, transparent);
  --fg-hover:       color-mix(in oklch, var(--fg) 5%, transparent);

  --navy-900:  oklch(0.196 0.038 250);
  --navy-800:  oklch(0.248 0.042 250);
  --navy-700:  oklch(0.318 0.042 250);
  --navy-line: oklch(0.372 0.034 250);
  --on-navy:        oklch(0.972 0.006 250);
  --on-navy-muted:  oklch(0.752 0.022 250);

  --ok:     oklch(0.600 0.135 155);
  --warn:   oklch(0.720 0.145 78);
  --danger: oklch(0.585 0.200 26);
  --ok-soft:     color-mix(in oklch, var(--ok) 13%, transparent);
  --warn-soft:   color-mix(in oklch, var(--warn) 18%, transparent);
  --danger-soft: color-mix(in oklch, var(--danger) 11%, transparent);

  /* --- harita --- */
  --map-land:  oklch(0.952 0.006 250);
  --map-block: oklch(0.910 0.011 252);
  --map-road:  oklch(1 0 0);
  --map-edge:  oklch(0.874 0.012 250);
  --map-park:  oklch(0.910 0.052 148);
  --map-water: oklch(0.886 0.048 232);

  /* --- tipografi --- */
  --font-display: 'Sora', 'SF Pro Display', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-h3: 16px;
  --fs-body: 15px;
  --fs-meta: 12px;

  --radius-card:  16px;
  --radius-field: 14px;
  --radius-pill:  999px;

  --shadow-card:  0 1px 2px rgba(9,20,32,.05), 0 10px 24px -16px rgba(9,20,32,.22);
  --shadow-float: 0 2px 6px rgba(9,20,32,.07), 0 20px 44px -20px rgba(9,20,32,.34);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100%; }
body{
  background: radial-gradient(58% 62% at 50% 0%, color-mix(in oklch, var(--accent) 5%, var(--bg)) 0%, var(--bg) 62%);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  padding: 36px 24px;
}

/* ─── sahne ─────────────────────────────────────────────────── */
.stage{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.stage-row{
  flex-direction:row; align-items:flex-start; justify-content:center;
  gap:44px; flex-wrap:wrap; max-width:1400px;
}
.stage-row .frame-block{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.caption{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing:.10em; text-transform:uppercase;
  color: var(--muted); margin:0; text-align:center;
}
.caption strong{ color: var(--fg); font-weight:600; }

/* ─── cihaz gövdesi ─────────────────────────────────────────── */
.device{
  position:relative; width:390px; height:844px;
  border-radius:56px; padding:12px;
  background: linear-gradient(160deg,#2a2a2c 0%,#1a1a1c 50%,#0e0e10 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 0 2px #000 inset,
    0 28px 60px -12px rgba(0,0,0,.42),
    0 8px 20px -8px rgba(0,0,0,.32);
  isolation:isolate; flex:none;
}
.device::before, .device::after{
  content:''; position:absolute; width:3px; top:100px; bottom:100px; pointer-events:none;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.06) 8%, transparent 16%, transparent 84%, rgba(255,255,255,.04) 92%, transparent 100%);
}
.device::before{ left:-1px; } .device::after{ right:-1px; }
.island{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:124px; height:36px; background:#000; border-radius:999px; z-index:9;
}
.btn-rail{ position:absolute; width:4px; background:#0a0a0c; border-radius:2px; }
.btn-rail.left-1{ left:-3px; top:174px; height:32px; }
.btn-rail.left-2{ left:-3px; top:220px; height:60px; }
.btn-rail.left-3{ left:-3px; top:290px; height:60px; }
.btn-rail.right-1{ right:-3px; top:250px; height:100px; }

/* ─── ekran yüzeyi ──────────────────────────────────────────── */
.screen{
  position:relative; width:100%; height:100%;
  background: var(--bg); border-radius:44px; overflow:hidden;
  display:flex; flex-direction:column;
}
.statusbar{
  flex:0 0 47px; padding:18px 26px 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  font-size:15px; font-weight:600; color:var(--fg); letter-spacing:-.01em;
  position:relative; z-index:6;
}
.statusbar .right{ display:inline-flex; align-items:center; gap:6px; }
.statusbar svg{ width:17px; height:11px; fill:currentColor; }
.statusbar .battery{ width:25px; }
.screen.dark-top .statusbar{ color: var(--on-navy); }
/* tam boy koyu sheet: home indicator seridi de koyu olmali, aksi halde beyaz cizgi kaybolur */
.screen.sheet-bottom{ background: var(--navy-900); }
/* harita ekranları: içerik durum çubuğunun altına kadar uzanır */
.screen.edge-to-edge .statusbar{ position:absolute; top:0; left:0; right:0; z-index:7; }

.content{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; padding:8px 0 26px; position:relative;
}
.content::-webkit-scrollbar{ display:none; }
.content.flush{ padding:0; overflow:hidden; }

.home-indicator{ flex:0 0 28px; position:relative; z-index:6; }
.home-indicator::after{
  content:''; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:134px; height:5px; background:var(--fg); border-radius:999px; opacity:.85;
}
.home-indicator.on-dark::after{ background:var(--on-navy); }

/* ─── düzen ilkelleri ───────────────────────────────────────── */
.pad{ padding-inline:20px; }
.stack{ display:flex; flex-direction:column; gap:14px; }
.row{ display:flex; align-items:center; gap:12px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.header{ padding:6px 20px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.header h1{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:600; letter-spacing:-.025em; line-height:1.12; margin:0; }
.greeting{ font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 5px; }

.h2{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600; letter-spacing:-.02em; line-height:1.2; margin:0; }
.h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.3; margin:0; }
.meta{ font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--muted); letter-spacing:.01em; }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }

/* ─── kart & liste ──────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:16px; box-shadow:var(--shadow-card);
}
.card.flat{ background:transparent; border:0; box-shadow:none; padding:13px 0; border-top:1px solid var(--border); border-radius:0; }
.card.flat:first-child{ border-top:0; padding-top:0; }
.card.accent{ background:var(--accent); color:#fff; border-color:transparent; }
.card.accent .meta{ color:rgba(255,255,255,.78); }

.list-row{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px;
  padding:13px 0; border-top:1px solid var(--border); min-height:48px;
}
.list-row:first-child{ border-top:0; }
.list-row .body .title{ font-size:15px; font-weight:500; line-height:1.28; }
.list-row .body .sub{ color:var(--muted); font-size:13px; line-height:1.34; margin-top:2px; }
.avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  background: linear-gradient(140deg, color-mix(in oklch, var(--accent) 22%, var(--surface)), color-mix(in oklch, var(--fg) 14%, var(--surface)));
  border:1px solid var(--border); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--fg);
}

/* ─── rozet / pill / tag ────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:500;
}
.tag{ display:inline-flex; align-items:center; padding:4px 10px; color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill); font-size:12px; }
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.badge.ok{ background:var(--ok-soft); color:oklch(0.44 0.12 155); }
.badge.warn{ background:var(--warn-soft); color:oklch(0.50 0.13 68); }
.badge.bad{ background:var(--danger-soft); color:oklch(0.47 0.18 26); }
.badge.neutral{ background:var(--fg-soft); color:var(--muted); }

/* ─── butonlar ──────────────────────────────────────────────── */
.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:52px; padding:15px 20px;
  background:var(--accent); color:#fff; border:0; border-radius:var(--radius-field);
  font:inherit; font-size:15.5px; font-weight:600; letter-spacing:-.005em; cursor:pointer;
  transition: background-color 150ms cubic-bezier(.2,0,0,1), transform 150ms cubic-bezier(.2,0,0,1);
}
.btn-primary:hover{ background:var(--accent-press); }
.btn-primary:active{ background:var(--accent-press); transform:translateY(1px); }
.btn-primary[disabled]{ background:var(--border); color:var(--muted); cursor:not-allowed; }

.btn-secondary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:50px; padding:14px 20px;
  background:var(--surface); color:var(--fg); border:1px solid var(--border);
  border-radius:var(--radius-field); font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition: background-color 150ms cubic-bezier(.2,0,0,1), border-color 150ms cubic-bezier(.2,0,0,1);
}
.btn-secondary:hover{ background:var(--fg-hover); border-color:color-mix(in oklch, var(--fg) 22%, var(--border)); }

.btn-ghost{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; min-height:48px; padding:12px 16px; background:transparent;
  color:var(--fg); border:0; border-radius:var(--radius-field);
  font:inherit; font-size:14.5px; font-weight:500; cursor:pointer;
  transition: background-color 150ms cubic-bezier(.2,0,0,1);
}
.btn-ghost:hover{ background:var(--fg-hover); }

.icon-btn{
  width:44px; height:44px; border-radius:var(--radius-pill); flex:none;
  background:var(--surface); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--fg); cursor:pointer;
  transition: background-color 150ms cubic-bezier(.2,0,0,1), border-color 150ms cubic-bezier(.2,0,0,1);
}
.icon-btn:hover{ background:var(--fg-hover); border-color:color-mix(in oklch, var(--fg) 22%, var(--border)); }
.icon-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}

/* ─── alt sekme çubuğu ──────────────────────────────────────── */
.tabbar{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  padding:8px 8px 0; border-top:1px solid var(--border);
  background:color-mix(in oklch, var(--surface) 88%, transparent);
  backdrop-filter:blur(20px); position:relative; z-index:6;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0; min-height:50px; color:var(--muted); font-size:10px;
  letter-spacing:.01em; text-decoration:none; cursor:pointer;
  transition: color 150ms cubic-bezier(.2,0,0,1);
}
.tab:hover{ color:var(--fg); }
.tab.active{ color:var(--accent); }
.tab svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tab.active svg{ stroke-width:2.1; }

/* ─── harita ────────────────────────────────────────────────── */
.map{ position:absolute; inset:0; background:var(--map-land); overflow:hidden; }
.map svg.map-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.map-label{
  position:absolute; font-family:var(--font-body); font-size:10.5px; font-weight:500;
  color:color-mix(in oklch, var(--fg) 54%, var(--map-land)); letter-spacing:.04em;
  white-space:nowrap; pointer-events:none;
}
.map-label.road{ font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in oklch, var(--fg) 40%, var(--map-land)); }
.map-scrim{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(9,20,32,.10) 0%, transparent 20%, transparent 56%, rgba(9,20,32,.12) 100%); pointer-events:none; }

/* harita SVG katmanı (sofor-map.js tarafından çizilir) */
.mp-land{ fill:var(--map-land); }
.mp-block{ fill:var(--map-block); }
.mp-block.soft{ fill:color-mix(in oklch, var(--map-block) 62%, var(--map-land)); }
.mp-park{ fill:var(--map-park); }
.mp-water{ fill:var(--map-water); }
.mp-coast{ fill:none; stroke:oklch(0.72 0.075 232); stroke-width:1; }
.mp-casing{ fill:none; stroke:var(--map-edge); stroke-linecap:round; stroke-linejoin:round; }
.mp-road{ fill:none; stroke:var(--map-road); stroke-linecap:round; stroke-linejoin:round; }
.mp-route-casing{ fill:none; stroke:#fff; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; opacity:.94; }
.mp-route{ fill:none; stroke:var(--accent); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }
.mp-route.dashed{ stroke-dasharray:1 11; stroke-width:6; }
.map-canvas text{ font-family:var(--font-body); }
.mp-district{ fill:color-mix(in oklch, var(--fg) 58%, transparent); font-size:11.5px; font-weight:600; letter-spacing:.3px; }
.mp-park-lbl{ fill:oklch(0.44 0.075 152); font-weight:500; }
.mp-sea-lbl{ fill:oklch(0.46 0.075 235); font-weight:500; }
.mp-road-lbl{ fill:color-mix(in oklch, var(--fg) 42%, transparent); font-family:var(--font-mono); font-size:8.6px; font-weight:500; letter-spacing:1.1px; }

/* harita varyantları */
.map.fixed{ inset:auto; left:0; top:0; width:390px; height:740px; }
.map-strip{ position:relative; height:168px; overflow:hidden; flex:none; border-bottom:1px solid var(--border); }
.mp-route.fg{ stroke:var(--fg); }

/* araç ve pin işaretleri */
.car-pin{
  position:absolute; width:30px; height:30px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:0 3px 10px -3px rgba(9,20,32,.32);
  display:grid; place-items:center; color:var(--fg);
}
.car-pin svg{ width:17px; height:17px; }
.map-pin{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.map-pin .pin-head{
  width:34px; height:34px; border-radius:50% 50% 50% 4px; transform:rotate(-45deg);
  display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(9,20,32,.5);
}
.map-pin .pin-head > *{ transform:rotate(45deg); }
.map-pin.origin .pin-head{ background:var(--fg); color:#fff; }
.map-pin.dest .pin-head{ background:var(--accent); color:#fff; }
.pin-dot{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:var(--fg); border:3px solid #fff; box-shadow:0 2px 8px -2px rgba(9,20,32,.5);
  transform:translate(-50%,-50%);
}
.pin-dot.accent{ background:var(--accent); }

/* konumum noktası */
.self-dot{ position:absolute; width:18px; height:18px; transform:translate(-50%,-50%); }
.self-dot i{ position:absolute; inset:0; border-radius:50%; background:oklch(0.55 0.17 255); border:3px solid #fff; box-shadow:0 2px 8px -2px rgba(9,20,32,.45); }
.self-dot::after{ content:''; position:absolute; inset:-11px; border-radius:50%; background:color-mix(in oklch, oklch(0.55 0.17 255) 22%, transparent); animation:selfPulse 2400ms ease-out infinite; }
@keyframes selfPulse{ 0%{ transform:scale(.6); opacity:.65 } 100%{ transform:scale(1.25); opacity:0 } }

/* ─── koyu bottom sheet ─────────────────────────────────────── */
.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background:var(--navy-900); color:var(--on-navy);
  border-radius:24px 24px 0 0; padding:10px 20px 18px;
  box-shadow:0 -10px 40px -14px rgba(9,20,32,.55);
  --surface: var(--navy-800);
  --border: var(--navy-line);
  --fg: var(--on-navy);
  --muted: var(--on-navy-muted);
  --fg-soft: rgba(255,255,255,.09);
  --fg-hover: rgba(255,255,255,.07);
}
.sheet .card{ box-shadow:none; }
.sheet-handle{ width:38px; height:4px; border-radius:999px; background:rgba(255,255,255,.26); margin:0 auto 14px; }
.sheet .btn-primary{ background:var(--on-navy); color:var(--navy-900); }
.sheet .btn-primary:hover{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.sheet .btn-primary:active{ background:#fff; transform:translateY(1px); }
.sheet .btn-secondary{ background:transparent; color:var(--on-navy); border-color:var(--navy-line); }
.sheet .btn-secondary:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.34); }
.sheet .btn-ghost{ color:var(--on-navy-muted); }
.sheet .btn-ghost:hover{ background:rgba(255,255,255,.08); color:var(--on-navy); }
.sheet .icon-btn{ background:var(--navy-700); border-color:var(--navy-line); color:var(--on-navy); }
.sheet .icon-btn:hover{ background:oklch(0.38 0.042 250); border-color:rgba(255,255,255,.34); }
.sheet .pill{ background:rgba(255,255,255,.10); color:var(--on-navy); }
.sheet .accent-text{ color:var(--accent-on-dark); }
.sheet :focus-visible{ outline-color:var(--accent-on-dark); }
.accent-text{ color:var(--accent); }

/* harita üstü yüzen arama çubuğu */
.float-bar{
  position:absolute; left:16px; right:16px; z-index:5;
  background:var(--surface); border-radius:var(--radius-field);
  box-shadow:var(--shadow-float); padding:13px 15px;
  display:flex; align-items:center; gap:11px; min-height:50px;
  border:0; font:inherit; text-align:left; color:var(--fg); cursor:pointer;
  transition:box-shadow 150ms cubic-bezier(.2,0,0,1);
}
button.float-bar:hover{ box-shadow:var(--shadow-float), 0 0 0 1.5px color-mix(in oklch, var(--fg) 20%, transparent); }
.float-bar svg{ width:19px; height:19px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.float-bar .txt{ flex:1; font-size:14.5px; color:var(--muted); }
.float-bar .txt.filled{ color:var(--fg); font-weight:500; }
.float-round{
  position:absolute; z-index:5; width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-float);
  display:grid; place-items:center; color:var(--fg); cursor:pointer;
}
.float-round svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.float-round:hover{ background:var(--fg-hover); }

/* ─── form alanları ─────────────────────────────────────────── */
.field{ display:block; }
.field .lbl{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.input{
  width:100%; min-height:52px; padding:14px 15px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-field);
  font:inherit; font-size:15.5px; color:var(--fg);
  transition:border-color 150ms cubic-bezier(.2,0,0,1), box-shadow 150ms cubic-bezier(.2,0,0,1);
}
.input::placeholder{ color:color-mix(in oklch, var(--muted) 80%, var(--surface)); }
.input:hover{ border-color:color-mix(in oklch, var(--fg) 22%, var(--border)); }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input.invalid{ border-color:var(--danger); }
textarea.input{ min-height:88px; resize:none; line-height:1.45; font-size:15px; }
.help{ font-size:13px; color:var(--muted); margin:7px 0 0; }
.help.error{ color:var(--danger); display:flex; align-items:center; gap:6px; }
.help.error svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }

/* telefon önek alanı */
.phone-wrap{ display:flex; align-items:stretch; gap:8px; }
.phone-prefix{
  display:flex; align-items:center; gap:8px; padding:0 14px; min-height:52px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-field);
  font-family:var(--font-mono); font-size:15px; font-weight:500; white-space:nowrap;
}

/* OTP kutucukları */
.otp{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.otp input{
  width:100%; aspect-ratio:1/1.18; text-align:center; padding:0;
  font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--fg);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-field);
  transition:border-color 150ms cubic-bezier(.2,0,0,1), box-shadow 150ms cubic-bezier(.2,0,0,1);
}
.otp input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.otp input.filled{ border-color:color-mix(in oklch, var(--fg) 34%, var(--border)); }

/* segmentli kontrol */
.segmented{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px;
  background:var(--fg-soft); border-radius:var(--radius-field);
}
.segmented button{
  min-height:44px; padding:9px 12px; border:0; border-radius:11px; cursor:pointer;
  background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:500;
  transition:background-color 150ms cubic-bezier(.2,0,0,1), color 150ms cubic-bezier(.2,0,0,1);
}
.segmented button:hover{ color:var(--fg); }
.segmented button[aria-selected="true"]{ background:var(--surface); color:var(--fg); font-weight:600; box-shadow:var(--shadow-card); }
.sheet .segmented button[aria-selected="true"]{ background:var(--navy-700); color:var(--on-navy); box-shadow:none; }

/* seçilebilir kart (radyo davranışı) */
.choice{
  position:relative; text-align:left; width:100%; cursor:pointer; font:inherit; color:inherit;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-card);
  padding:14px; display:flex; gap:12px; align-items:center; min-height:56px;
  transition:border-color 150ms cubic-bezier(.2,0,0,1), background-color 150ms cubic-bezier(.2,0,0,1);
}
.choice:hover{ border-color:color-mix(in oklch, var(--fg) 28%, var(--border)); background:var(--fg-hover); }
.choice[aria-checked="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.choice .tick{ margin-left:auto; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); flex:none; display:grid; place-items:center; }
.choice[aria-checked="true"] .tick{ background:var(--accent); border-color:var(--accent); }
.choice[aria-checked="true"] .tick::after{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; }
.sheet .choice[aria-checked="true"]{ border-color:var(--accent-on-dark); background:rgba(255,255,255,.07); }
.sheet .choice[aria-checked="true"] .tick{ background:var(--accent-on-dark); border-color:var(--accent-on-dark); }
.sheet .choice[aria-checked="true"] .tick::after{ background:var(--navy-900); }

.choice.plain[aria-checked="true"]{ border-color:var(--fg); background:var(--fg-soft); }
.choice.plain[aria-checked="true"] .tick{ background:var(--fg); border-color:var(--fg); }

/* alta sabitlenen birincil aksiyon */
.sticky-cta{
  position:sticky; bottom:-26px; z-index:3; margin-top:14px;
  padding:14px 20px 22px; background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -14px 28px -22px rgba(9,20,32,.34);
}

/* anahtar (switch) */
.switch{
  width:50px; height:30px; border-radius:999px; border:0; padding:3px; cursor:pointer; flex:none;
  background:color-mix(in oklch, var(--fg) 18%, var(--surface)); display:flex; align-items:center;
  transition:background-color 150ms cubic-bezier(.2,0,0,1);
}
.switch i{ width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(9,20,32,.3); transition:transform 150ms cubic-bezier(.2,0,0,1); }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch[aria-checked="true"] i{ transform:translateX(20px); }
.switch:hover{ background:color-mix(in oklch, var(--fg) 28%, var(--surface)); }
.switch[aria-checked="true"]:hover{ background:var(--accent-press); }

/* ─── yıldız puanlama ───────────────────────────────────────── */
.stars{ display:flex; gap:6px; justify-content:center; }
.stars button{ background:none; border:0; padding:6px; cursor:pointer; line-height:0; min-width:48px; min-height:48px; display:grid; place-items:center; border-radius:12px; }
.stars svg{ width:36px; height:36px; fill:transparent; stroke:color-mix(in oklch, var(--fg) 26%, var(--surface)); stroke-width:1.6; stroke-linejoin:round; transition:fill 150ms cubic-bezier(.2,0,0,1), stroke 150ms cubic-bezier(.2,0,0,1); }
.stars button.on svg{ fill:var(--accent); stroke:var(--accent); }
.stars button:hover svg{ stroke:var(--accent); }

/* ─── zaman çizelgesi ───────────────────────────────────────── */
.timeline{ position:relative; padding-left:28px; margin:0; }
.timeline .step{ position:relative; padding-bottom:20px; }
.timeline .step:last-child{ padding-bottom:0; }
.timeline .step::before{
  content:''; position:absolute; left:-22px; top:4px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border); z-index:1;
}
.timeline .step::after{
  content:''; position:absolute; left:-17px; top:18px; bottom:-4px; width:2px; background:var(--border);
}
.timeline .step:last-child::after{ display:none; }
.timeline .step.done::before{ background:var(--ok); border-color:var(--ok); }
.timeline .step.done::after{ background:var(--ok); }
.timeline .step.current::before{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.timeline .step .t{ display:block; font-size:14.5px; font-weight:600; line-height:1.25; }
.timeline .step .d{ display:block; font-size:13px; color:var(--muted); margin-top:3px; line-height:1.35; }
.sheet .timeline .step::before{ background:var(--navy-700); border-color:var(--navy-line); }
.sheet .timeline .step::after{ background:var(--navy-line); }
.sheet .timeline .step.current::before{ background:var(--accent-on-dark); border-color:var(--accent-on-dark); box-shadow:0 0 0 4px rgba(255,255,255,.10); }
.sheet .timeline .step.done::before{ background:var(--ok); border-color:var(--ok); }
.sheet .timeline .step.done::after{ background:var(--ok); }

/* ─── görsel yer tutucu ─────────────────────────────────────── */
.ph-img{
  background: linear-gradient(140deg, color-mix(in oklch, var(--accent) 12%, var(--surface)), color-mix(in oklch, var(--fg) 9%, var(--surface)));
  border:1px solid var(--border); border-radius:var(--radius-card); aspect-ratio:4/3;
  display:grid; place-items:center; color:var(--muted);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-align:center; padding:10px;
}
.ph-img.square{ aspect-ratio:1/1; }
.ph-img.wide{ aspect-ratio:16/9; }

/* ─── ilerleme & yükleme ────────────────────────────────────── */
.progress{ height:6px; background:var(--fg-soft); border-radius:999px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.sheet .progress{ background:rgba(255,255,255,.16); }
.sheet .progress > span{ background:var(--accent-on-dark); }

.skeleton{
  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:8px; animation:shimmer 1400ms linear infinite;
}
@keyframes shimmer{ from{ background-position:150% 0 } to{ background-position:-50% 0 } }
.spinner{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--fg-soft); border-top-color:var(--accent); animation:spin 800ms linear infinite; flex:none; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* radar */
.radar{ position:relative; width:154px; height:154px; display:grid; place-items:center; }
.radar i{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid color-mix(in oklch, var(--accent-on-dark) 60%, transparent);
  animation:radarWave 2600ms cubic-bezier(.2,0,0,1) infinite;
}
.radar i:nth-child(2){ animation-delay:870ms; }
.radar i:nth-child(3){ animation-delay:1740ms; }
@keyframes radarWave{ 0%{ transform:scale(.30); opacity:0 } 14%{ opacity:.85 } 100%{ transform:scale(1); opacity:0 } }
.radar .core{
  position:relative; width:58px; height:58px; border-radius:50%;
  background:var(--on-navy); color:var(--navy-900); display:grid; place-items:center; z-index:1;
}
.radar .core svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.radar.on-light i{ border-color:color-mix(in oklch, var(--accent) 72%, transparent); }
.radar.on-light .core{ background:var(--accent); color:#fff; box-shadow:0 10px 26px -10px rgba(226,96,31,.75); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .radar i{ opacity:.45; transform:scale(1); }
  .self-dot::after{ opacity:.3; transform:scale(1); }
}

/* ─── küçük yardımcılar ─────────────────────────────────────── */
.divider{ height:1px; background:var(--border); border:0; margin:0; }
.mt-auto{ margin-top:auto; }
.center{ text-align:center; }
.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon-sm{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon-tile{
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--fg-soft); color:var(--fg);
}
.icon-tile.accent{ background:var(--accent-soft); color:var(--accent); }
.sheet .icon-tile{ background:rgba(255,255,255,.09); color:var(--on-navy); }
.sheet .icon-tile.accent{ background:rgba(255,255,255,.09); color:var(--accent-on-dark); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }