/* =========================================================================
   e-rota.com — merkezi stil dosyası
   Kaynak tasarım: LIM-343 eki "E-rota.com kurumsal tasarım (1).zip"
   (dist/index.html 1440px viewport'ta render edilip ölçüldü — hex grep yok).

   Bu dosya sitenin TEK CSS dosyasıdır. Sayfa içine inline style yazmayın;
   yeni bir görsel ihtiyaç çıkarsa buraya sınıf ekleyin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tasarım token'ları
   ------------------------------------------------------------------------- */
:root {
  /* Aksan rengi — TEK NOKTADAN DEĞİŞTİRİLİR.
     Tasarım aracı üç aksan sunuyor (kaynak dosyanın kendi enum'u):
       lime   #B8F04A / ink #5C8A00   <- tasarımın default'u, LIM-354'te
                                         Ercument'in seçimi
       cyan   #38D0F0 / ink #0A8FAD   <- LIM-343'teki dist/index.html export'u
       orange #FF8A3D / ink #C2530A
     Cyan'a dönmek için yalnızca aşağıdaki iki satır değişir. */
  --accent: #B8F04A;
  /* Tasarımın lime mürekkebi #5C8A00; açık zeminde 3,7:1 kontrast veriyor ve
     WCAG AA'yı (4,5:1) geçemiyor. LIM-354'te bu yüzden #4A6C08'e koyulaştırıldı
     (5,5:1) — ince mono etiketler ve gövde içi bağlantılar bu rengi kullanıyor. */
  --accent-ink: #4A6C08;
  --on-accent: #0A0E13;

  /* Yüzeyler ve mürekkep (açık tema) */
  --bg: #F4F4F0;
  --surface: #FFFFFF;
  --surface-soft: #FBFBF9;
  --surface-quote: #ECECE7;
  --surface-quote-alt: #E3E9EE;

  --ink: #14181D;
  --ink-muted: #4A5563;
  --ink-soft: #6B7684;
  --ink-faint: #8A94A0;

  --line: rgba(0, 0, 0, 0.09);
  --line-soft: rgba(0, 0, 0, 0.07);
  --line-faint: rgba(0, 0, 0, 0.06);
  --line-strong: rgba(0, 0, 0, 0.15);
  --line-input: rgba(0, 0, 0, 0.11);
  --line-accent: rgba(184, 240, 74, 0.35);

  /* Koyu yüzeyler (harita kartı, ürün ekranları) */
  --dark: #0C1219;
  --dark-raised: #10161D;
  --dark-panel: #0C1117;
  --dark-app: #0A0E13;
  --dark-ink: #E8EDF2;
  --dark-ink-2: #B6C0CB;
  --dark-ink-3: #8A96A3;
  --dark-ink-4: #5F6B78;
  --dark-line: rgba(255, 255, 255, 0.08);
  --dark-line-2: rgba(255, 255, 255, 0.1);
  --dark-line-3: rgba(255, 255, 255, 0.12);
  --dark-line-4: rgba(255, 255, 255, 0.05);

  /* Durum renkleri */
  --ok: #1FA971;
  --warn: #D9950F;
  --bad: #D64545;

  /* Köşe yarıçapları — tasarımdaki ölçülmüş değerler */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-btn: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  /* Ölçü sistemi */
  --container: 1200px;
  --gutter: 32px;

  /* Logo yüksekliği ve onu taşıyan menü çubuğu. Mockup 24px logo / 64px çubuk
     kullanıyordu; Ercument logoyu 50px'e çıkarttı (LIM-399), çubuk da logonun
     üstünde/altında 15px kalacak şekilde büyüdü. İkisi birlikte değişir —
     çubuk sabit kalırsa logo kaba yapışıyor. */
  --logo-height: 50px;
  --nav-height: 80px;

  /* Bölüm ritmi — tasarımda section tipine göre ÜÇ farklı değer var,
     tek bir değere sabitlenmemeli (LIM-393 bulgu #2). */
  --space-hero-top: 72px;
  --space-hero-bottom: 40px;
  --space-section: 88px;
  --space-cta: 96px;

  /* Tipografi */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* -------------------------------------------------------------------------
   2. Yerel fontlar (Google Fonts CDN bağımlılığı yok)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   3. Temel
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--ink-muted); }

img { max-width: 100%; }

h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.mono { font-family: var(--font-mono); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   4. Yerleşim ilkelleri
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Bölüm sarmalayıcı: üst çizgi + isteğe bağlı beyaz zemin */
.section { border-top: 1px solid var(--line); }
.section--white { background: var(--surface); }

/* Bölüm iç boşlukları — tasarımdaki üç ritim */
.section-body { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-body--hero { padding-top: var(--space-hero-top); padding-bottom: var(--space-hero-bottom); }
.section-body--cta { padding-top: var(--space-cta); padding-bottom: var(--space-cta); }
.section-body--head { padding-top: var(--space-section); padding-bottom: 40px; }
.section-body--showcase { padding-top: 40px; padding-bottom: 72px; }
.section-body--metrics { padding-top: 16px; padding-bottom: var(--space-cta); }
.section-body--phones { padding-top: 0; padding-bottom: var(--space-cta); }

.stack { display: flex; flex-direction: column; }
.stack--12 { gap: 12px; }
.stack--16 { gap: 16px; }
.stack--20 { gap: 20px; }
.stack--24 { gap: 24px; }
.stack--28 { gap: 28px; }
.stack--32 { gap: 32px; }

/* -------------------------------------------------------------------------
   5. Tipografi ölçeği
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
.label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.label--accent { color: var(--accent-ink); }
.label--sm {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.h1 {
  font-size: 52px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.h2 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}
.h2--cta { font-size: 40px; letter-spacing: -0.025em; line-height: 1.1; }
.h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; }
.h3--sm { font-size: 24px; }

.lede { font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 460px; text-wrap: pretty; }
.body-lg { font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.body-md { font-size: 15px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.measure { max-width: 680px; }

.note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   6. Butonlar — tasarımda üç ayrı görev, üçü de radius 8px (LIM-393 bulgu #3)
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Nav'daki CTA: koyu lacivert zemin, beyaz metin, 38px yükseklik */
.btn--nav {
  height: 38px;
  white-space: nowrap;
  padding: 0 16px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}
.btn--nav:hover { color: #FFFFFF; background: #000; }

/* Hero'daki birincil CTA: aksan zemini */
.btn--primary {
  height: 46px;
  padding: 0 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn--primary:hover { color: var(--on-accent); filter: brightness(0.96); }

/* Hero'daki ikincil CTA: çizgi kenarlık */
.btn--ghost {
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink);
}
.btn--ghost:hover { color: var(--ink); border-color: rgba(0, 0, 0, 0.35); }

/* Form içindeki tam genişlik CTA */
.btn--block { width: 100%; height: 46px; margin-top: 4px; }

/* -------------------------------------------------------------------------
   7. Kartlar ve yüzeyler
   ------------------------------------------------------------------------- */
.card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.card--white { background: var(--surface); border-radius: var(--radius-xl); }
.card--accent { border-color: var(--line-accent); }
.card--pad { padding: 28px; }
.card--pad-sm { padding: 18px 20px; }
.card--pad-md { padding: 20px 22px; }
.card--pad-lg { padding: 22px 24px; }
.card--clip { overflow: hidden; }

.rule { height: 1px; background: var(--line); }

/* -------------------------------------------------------------------------
   8. Üst menü
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 244, 240, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo tek başına duruyor — yanındaki tanımlayıcı yazı Ercument'in isteğiyle
   kaldırıldı (mockup'ta "SERVİS GÜZERGAH" yazıyordu). Yazı gidince
   `align-items: baseline` + `top: 2px` hizası anlamsız kaldı, ikisi de düştü. */
.nav__brand { display: flex; align-items: center; }
.nav__logo { height: var(--logo-height); width: auto; display: block; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { color: var(--ink-muted); }
.nav__links a:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.hero__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.25);
}
.hero__actions { display: flex; gap: 12px; align-items: center; }

/* -------------------------------------------------------------------------
   10. Canlı harita kartı (hero görseli)
   ------------------------------------------------------------------------- */
.map-card {
  position: relative;
  background: var(--dark);
  border: 1px solid var(--dark-line-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.map-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dark-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dark-ink-3);
}
.map-card__bar-left { display: flex; gap: 14px; }
.map-card__bar strong { color: var(--dark-ink); font-weight: 400; }
.map-card__live { display: flex; align-items: center; gap: 6px; }
.map-card__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  animation: blink 1.6s infinite;
}
.map-card__svg { display: block; width: 100%; height: auto; }

.map-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dark-ink-3);
  background: rgba(12, 18, 25, 0.85);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--dark-line);
}
.map-legend span { display: flex; align-items: center; gap: 6px; }
.swatch { width: 8px; height: 8px; border-radius: var(--radius-xs); display: inline-block; }
.swatch--ok { background: var(--ok); }
.swatch--warn { background: var(--warn); }
.swatch--bad { background: var(--bad); }

.next-stop {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 240px;
  background: rgba(16, 22, 29, 0.94);
  border: 1px solid var(--dark-line-2);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--dark-ink);
}
.next-stop__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dark-ink-3);
  letter-spacing: 0.05em;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--on-accent);
  background: var(--ok);
}
.next-stop__name { font-size: 15px; font-weight: 500; }
.figures {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dark-ink-2);
}
.figures b { color: var(--dark-ink); font-size: 16px; font-weight: 400; }
.progress { height: 3px; background: var(--dark-line); border-radius: var(--radius-xs); overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); }

/* -------------------------------------------------------------------------
   11. İstatistik şeridi
   ------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-soft);
}
.metrics__item {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metrics__item:last-child { border-right: 0; }
.metrics__value { font-family: var(--font-mono); font-size: 30px; letter-spacing: -0.02em; }
.metrics__label { font-size: 13px; color: var(--ink-soft); }
.metrics__foot { margin-top: 10px; }

/* -------------------------------------------------------------------------
   12. Sorun / çözüm
   ------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two-col--48 { gap: 48px; }
.two-col--64 { gap: 64px; }
.two-col--end { align-items: end; }
.two-col--center { align-items: center; }
.two-col--start { align-items: start; }

.chat { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.chat__bubble {
  align-self: flex-start;
  max-width: 85%;
  background: var(--surface-quote);
  border-radius: 10px 10px 10px 3px;
  padding: 9px 12px;
  color: var(--ink-muted);
}
.chat__bubble--out {
  align-self: flex-end;
  background: var(--surface-quote-alt);
  border-radius: 10px 10px 3px 10px;
}
.chat__who { color: var(--ink-soft); font-size: 11px; display: block; margin-bottom: 2px; }

.points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  line-height: 1.5;
  margin: 0;
  list-style: none;
  padding-left: 0;
}
.points--plain { border-top: 0; padding-top: 0; color: var(--ink); }
.points--dash { color: var(--ink-muted); }
.points--dash li { display: flex; gap: 10px; }
.points--dash li::before {
  content: '—';
  color: var(--accent-ink);
  font-family: var(--font-mono);
}

/* Küçük veri tablosu (açık zemin) */
.mini-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
}
.mini-table__row {
  display: grid;
  grid-template-columns: 70px 1fr 70px 90px;
  gap: 8px;
  padding: 9px 12px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
}
.mini-table__row:last-child { border-bottom: 0; }
.mini-table__row--head {
  padding: 8px 12px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.t-ok { color: var(--ok); }
.t-warn { color: var(--warn); }
.t-bad { color: var(--bad); }
.t-ink { color: var(--ink); }
.t-dark-ink { color: var(--dark-ink); }

/* -------------------------------------------------------------------------
   13. Tarayıcı çerçevesi (planlamacı paneli görseli)
   ------------------------------------------------------------------------- */
.browser {
  width: 1136px;
  max-width: 100%;
  height: 600px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  background: #35363a;
}
.browser__tabbar {
  display: flex;
  align-items: center;
  height: 44px;
  background: #202124;
  padding-right: 8px;
  flex-shrink: 0;
}
.browser__lights { display: flex; gap: 8px; padding: 0 14px; }
.browser__lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser__lights i:nth-child(1) { background: #ff5f57; }
.browser__lights i:nth-child(2) { background: #febc2e; }
.browser__lights i:nth-child(3) { background: #28c840; }
.browser__tabs { display: flex; align-items: flex-end; height: 100%; padding-left: 4px; flex: 1; }
.browser__tab {
  height: 34px;
  align-self: flex-end;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #35363a;
  border-radius: 8px 8px 0 0;
  min-width: 120px;
  max-width: 220px;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  color: #e8eaed;
}
.browser__tab i { width: 14px; height: 14px; border-radius: 50%; background: #5f6368; flex-shrink: 0; }
.browser__tab span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser__toolbar {
  height: 40px;
  background: #35363a;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  flex-shrink: 0;
}
.browser__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.browser__icon i { width: 16px; height: 16px; border-radius: 50%; background: #9aa0a6; opacity: 0.4; }
.browser__url {
  flex: 1;
  height: 30px;
  border-radius: 15px;
  background: #282a2d;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  margin: 0 6px;
  color: #e8eaed;
  font-family: system-ui, sans-serif;
  font-size: 13px;
}
.browser__url i { width: 12px; height: 12px; border-radius: 50%; background: #9aa0a6; opacity: 0.4; }
.browser__viewport { flex: 1; background: #fff; overflow: hidden; }

/* Panel ekranı (koyu) */
.app {
  display: flex;
  height: 100%;
  background: var(--dark-panel);
  color: var(--dark-ink);
  font-family: var(--font-sans);
  font-size: 13px;
}
.app__side {
  width: 200px;
  border-right: 1px solid var(--dark-line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.app__tenant { padding: 6px 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.app__tenant b { font-weight: 600; }
.app__tenant span { font-family: var(--font-mono); font-size: 10.5px; color: var(--dark-ink-4); }
.app__nav-item { padding: 8px 10px; color: var(--dark-ink-3); }
.app__nav-item--active {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  color: var(--dark-ink);
}
.app__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--dark-line);
}
.app__title { display: flex; align-items: baseline; gap: 12px; }
.app__title b { font-size: 16px; font-weight: 600; }
.app__title span { font-family: var(--font-mono); font-size: 11.5px; color: var(--dark-ink-3); }
.app__actions { display: flex; gap: 8px; }
.chip {
  padding: 6px 10px;
  border: 1px solid var(--dark-line-3);
  border-radius: var(--radius-md);
  color: var(--dark-ink-2);
  font-size: 12px;
}
.chip--accent {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}
.app__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; }
.kpi {
  background: var(--dark-raised);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
}
.kpi__label { font-size: 11px; color: var(--dark-ink-3); }
.kpi__value { font-family: var(--font-mono); font-size: 22px; margin-top: 4px; }
.kpi__value small { font-size: 12px; color: var(--dark-ink-4); }

.dark-table {
  margin: 0 20px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-btn);
  overflow: hidden;
}
.dark-table__row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr 90px 70px 110px 70px;
  gap: 12px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--dark-ink-2);
  border-bottom: 1px solid var(--dark-line-4);
  align-items: center;
}
.dark-table__row:last-child { border-bottom: 0; }
.dark-table__row--head {
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dark-ink-4);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--dark-line);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.with-dot { display: inline-flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------------------
   14. Telefon çerçevesi (sürücü / yolcu uygulaması)
   ------------------------------------------------------------------------- */
.phone-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 36px 36px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
}
.phone-slot { display: flex; justify-content: center; margin-bottom: -300px; }
.phone {
  width: 402px;
  height: 874px;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.phone__island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 50;
}
.phone__status {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 24px 19px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.phone__status-icons { display: flex; align-items: center; gap: 7px; }
.phone__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--dark-app);
  color: var(--dark-ink);
  padding-top: 62px;
}
.phone__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px 12px;
}
.phone__head-title { display: flex; flex-direction: column; }
.phone__head-title span { font-family: var(--font-mono); font-size: 11px; color: var(--dark-ink-3); }
.phone__head-title b { font-size: 16px; font-weight: 600; }
.pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--dark-line-3);
  color: var(--dark-ink-3);
}
.pill--ok { color: var(--ok); border-color: rgba(61, 220, 151, 0.4); }

.phone__map {
  position: relative;
  margin: 0 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--dark-line);
}
.phone__map--driver { height: 280px; }
.phone__map--rider { height: 250px; margin: 14px 14px 0; }
.phone__map svg { display: block; width: 100%; height: 100%; }
.phone__map-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dark-ink-3);
  background: rgba(12, 18, 25, 0.85);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}
.phone__map-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.phone__panel {
  margin: 14px 14px 0;
  background: var(--dark-raised);
  border: 1px solid var(--dark-line-2);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone__panel--accent { margin: 0 14px; border-color: var(--line-accent); gap: 6px; }
.phone__panel-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--dark-ink-3); letter-spacing: 0.05em; }
.phone__stop { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.phone__figures { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--dark-ink-2); }
.phone__figures b { color: var(--dark-ink); font-size: 18px; font-weight: 400; }
.phone__eta { display: flex; align-items: baseline; gap: 8px; }
.phone__eta b { font-family: var(--font-mono); font-size: 40px; letter-spacing: -0.03em; line-height: 1; font-weight: 400; }
.phone__eta span { font-size: 15px; color: var(--dark-ink-2); }
.phone__sub { font-size: 12.5px; color: var(--dark-ink-3); }
.phone__split { display: flex; gap: 8px; margin-top: 4px; }
.phone__split > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--dark-ink-2);
}
.phone__split span { color: var(--dark-ink-4); font-size: 10.5px; }
.phone__cta {
  margin: 14px 14px 0;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
}
.phone__buttons { margin: 14px 14px 0; display: flex; gap: 10px; }
.phone__buttons > div {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
}
.phone__buttons > div:first-child { border: 1px solid rgba(255, 255, 255, 0.14); }
.phone__buttons > div:last-child { background: var(--dark-ink); color: var(--dark-app); font-weight: 600; }

/* -------------------------------------------------------------------------
   15. Canlı takip bölümü
   ------------------------------------------------------------------------- */
/* Yapışkan menünün altında kalmasın: çubuk yüksekliği + 32px nefes payı. */
.sticky-col { position: sticky; top: calc(var(--nav-height) + 32px); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2--12 { gap: 12px; }
.grid-2--2-1 { grid-template-columns: 2fr 1fr; }
.span-all { grid-column: 1 / -1; }

.card__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}

.ws-log { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.ws-log__row { display: grid; grid-template-columns: 64px 90px 1fr 70px; gap: 12px; }
.ws-log__row span:first-child { color: var(--ink-faint); }

.kv { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.kv__row { display: flex; justify-content: space-between; }
.kv__row--muted { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   16. Sürüş güvenliği
   ------------------------------------------------------------------------- */
.events__head {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
}
.events__row {
  display: grid;
  grid-template-columns: 60px 1.2fr 1fr 1fr 60px;
  gap: 12px;
  padding: 11px 20px;
  font-size: 13px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-faint);
  align-items: center;
}
.events__row:last-child { border-bottom: 0; }
.events__row--head {
  padding: 9px 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line-soft);
}
.events__type { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }

.bar { display: flex; flex-direction: column; gap: 5px; }
.bar__head { display: flex; justify-content: space-between; font-size: 13px; }
.bar__track { height: 4px; background: var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.bar__fill { height: 100%; }

.thresholds { font-size: 12.5px; color: var(--ink-muted); line-height: 1.7; font-family: var(--font-mono); }

/* -------------------------------------------------------------------------
   17. Çoklu şirket
   ------------------------------------------------------------------------- */
.tenant__head { display: flex; justify-content: space-between; align-items: center; }
.tenant__name { font-size: 14px; font-weight: 500; }
.tenant__slug { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.tenant__figures { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.tenant__figures b { color: var(--ink); font-weight: 400; }
.tenant__foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; }
.tenant__foot span:first-child { color: var(--ink-faint); }

/* -------------------------------------------------------------------------
   18. Demo formu (v1: statik görsel — dinamik akış sonraki aşamada)
   ------------------------------------------------------------------------- */
.form-card {
  background: var(--surface-soft);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 12.5px; color: var(--ink-soft); }
.field__box {
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--ink-faint);
}
.form-card__foot { font-size: 12px; color: var(--ink-faint); text-align: center; }

/* -------------------------------------------------------------------------
   19. Alt bilgi
   ------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); }
.footer__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ink-faint);
}
.footer__brand { display: flex; align-items: center; }
/* Header'la aynı 24/20 oranı korunarak büyütüldü. */
.footer__logo { height: 42px; width: auto; display: block; opacity: 0.85; }
.footer__links { display: flex; gap: 24px; }
.footer__links a { color: var(--ink-faint); }
.footer__links a:hover { color: var(--ink-muted); }
.footer__copy { font-family: var(--font-mono); font-size: 11.5px; }

/* -------------------------------------------------------------------------
   20. Yasal metin sayfaları
   ------------------------------------------------------------------------- */
.page-head { padding-top: 64px; padding-bottom: 24px; }
.prose {
  max-width: 760px;
  padding-bottom: 88px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.prose h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.prose h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--surface-soft); color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; }

/* Hata sayfası */
.error-page { padding-top: 120px; padding-bottom: 120px; text-align: center; }
.error-page__code {
  font-family: var(--font-mono);
  font-size: 64px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.error-page__actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; }

/* -------------------------------------------------------------------------
   21. Animasyonlar
   ------------------------------------------------------------------------- */
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@keyframes veh-move {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
.veh {
  offset-path: path('M60 350 L150 320 L210 245 L300 235 L380 165 L470 148 L560 78');
  offset-rotate: 0deg;
  animation: veh-move 24s linear infinite;
}
.ping { animation: pulse 1.8s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .veh { animation: none; offset-distance: 38%; }
  .ping, .map-card__live-dot { animation: none; }
}

/* -------------------------------------------------------------------------
   22. Duyarlılık — tasarımın kendi kırılma noktaları (900px / 560px)
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .browser { height: auto; }
  .browser__viewport { height: 520px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .hero,
  .two-col,
  .grid-2--2-1,
  .phones-grid { grid-template-columns: 1fr !important; gap: 28px; }

  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics__item:nth-child(2) { border-right: 0; }
  .metrics__item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .sticky-col { position: static; }
  .nav__links { display: none; }

  .map-legend { position: static; margin: 14px 14px 0; align-self: flex-start; }
  .next-stop { position: static; width: auto; margin: 10px 14px 14px; }

  /* Telefon `transform: scale()` ile küçültülüyor ama YERLEŞİM kutusu 402px
     kalıyor; dar ekranda bu belgeyi yatay kaydırılabilir yapıyordu.
     Görsel olarak küçültülmüş telefon zaten kaba sığdığı için kutuyu kırpmak
     görünen hiçbir şeyi kesmiyor. */
  .phone-slot { margin-bottom: -360px; overflow: hidden; }
  .phone-slot > * { transform: scale(0.85); transform-origin: top center; }

  .h1 { font-size: 38px; }
  .h2, .h2--cta { font-size: 28px; }

  .dark-table__row,
  .events__row { font-size: 11.5px; }
}

@media (max-width: 560px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .metrics__item:last-child { border-bottom: 0; }

  .phone-slot > * { transform: scale(0.72); }
  .phone-slot { margin-bottom: -420px; }

  .h1 { font-size: 32px; }

  /* 390px'te 188px'lik logo + CTA çubuğu tam dolduruyor, aralarında boşluk
     kalmıyor. Dar ekranda logo ve çubuk küçülüyor; masaüstündeki 50px etkilenmez. */
  :root { --logo-height: 34px; --nav-height: 64px; }

  .map-card__bar { font-size: 10.5px; gap: 8px; }
  .map-card__bar-left { gap: 8px; flex-wrap: wrap; min-width: 0; }

  /* `1fr` sütununun min-content genişliği ("Gebze OSB — B") kartı dar ekranda
     kabından taşırıyordu; minmax(0,1fr) + ellipsis ile sabitlendi. */
  .card--pad { padding: 20px; }
  .mini-table { font-size: 11px; }
  .mini-table__row,
  .mini-table__row--head {
    grid-template-columns: 52px minmax(0, 1fr) 40px 62px;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mini-table__row > span,
  .mini-table__row--head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .footer__inner { justify-content: flex-start; }
  .ws-log__row { grid-template-columns: 60px 1fr; }
  .events__row, .events__row--head { grid-template-columns: 50px 1fr 60px; }
  .events__row > :nth-child(3),
  .events__row > :nth-child(4),
  .events__row--head > :nth-child(3),
  .events__row--head > :nth-child(4) { display: none; }
  .dark-table__row, .dark-table__row--head { grid-template-columns: 70px 1fr 70px; }
  .dark-table__row > :nth-child(n + 4),
  .dark-table__row--head > :nth-child(n + 4) { display: none; }
}