/* Hallmark · shape: Workbench (/), Long Document (/kvkk.html) (draw 54c303 dealt Stat-Led; no figure the owner gave, so swapped) · genre: modern-minimal · theme: brand · redesign: full · job: sign up
 * paper: oklch(18.1% 0.035 258) · accent: oklch(76.9% 0.165 70.1) · display: Inter 700 · body: Inter 400 · hero: Stage (/), Banner (/kvkk.html), Stage (/404.html) · nav: floating pill · footer: mast · signature: the live order board, a card walked to delivery posts its journal lines
 * axes: dark/grotesk-heavy/warm · posture: restrained · imagery: photographs, owner's 5 (Wikimedia Commons, credited under each) · product built, 10 HTML screens, hero in a slot · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the page argues "one record instead of three tools" only through the comparison table; led the page with that table right after the hero so the argument comes before the tour */
/* Hallmark · hero-review: ship · 5 findings · 1 resolved (summary green set to ink), 2 kept by brand rule, 2 to the owner (hero screen, headline) */
/* Hallmark · finish-review: subagent · 1 recapture, then fix · 6 findings + 1 redesign note · 6 resolved (phone ledger fits, IDs on one line, nav mark clears at the hero, KVKK stacked labels, KVKK gap, lazy photos load on scroll), four steps restored beside the board · gap: none */
/* Hallmark · waive 1 · assets/fonts ships Inter and the brand guide sets the Rota wordmark in Inter 800 · Inter is Rota's own brand face, so the display stays in it */
/* Hallmark · waive 84 · the owner asked to keep the built screens and README "Ekran görüntüleri" explains why · Rota screens built in HTML keep every label and status colour tied to the product palette */
/* Hallmark · waive 39b · button.board-card holds four lines of an order card on the live board · the board's cards are draggable order records in the product screen, not page controls */
/* Hallmark · dismissed 59 · twelve sections hold the owner's whole tour, each a different product area the redesign was told to keep */
/* Hallmark · dismissed 77 · 404.html and kvkk.html are a not-found page and a legal notice, one job each, not landing strips */
/* Hallmark · dismissed F4 · .phone-button is the driver app's own button drawn inside a product screen, not a page control */
/* Hallmark · dismissed 49 · the long labels are order cards on the board, four short lines each, wrapping by design */
/* Hallmark · waive 78 · kvkk.html sets its legal headings at --text-2xl under a display-s title · the KVKK page is a Long Document of legal text, its heads are inline */
/* Hallmark · waive 44c · kvkk.html opens with a short Banner header, title and one intro paragraph · the KVKK legal text starts right under its title, not on a second screen */
/* Hallmark · reworded every internal id, class and photo file name to English (pano to board, koli-a to box-a, ambarli-limani.jpg to ambarli-port.jpg and the rest) · the owner's naming rule; section anchors in the URL stay Turkish */
/* Hallmark · dropped acilis · the splash covered the page for up to 2.6 seconds before anything showed */
/* Hallmark · dropped "Aynı bilgi üç kez giriliyor", "Yük nerede sorusunun cevabı telefon", "Mevzuat takvime yazılıyor" · 58 names them; their facts moved into the Alışılmış düzen column of the comparison table */
/* Hallmark · reworded "Dört ayrı kullanıcı, dört ayrı ekran, tek veri" to "Dört ekran, tek kayıt" · copy budget caps section heads at six words */
/* Hallmark · dropped "Neden Rota?" · a category label; its table now opens the page under "Operasyon üç ayrı yerde tutuluyor" */
/* Hallmark · dropped "Fiyatı filonuzla çıkaralım." · 69 names it, it restated the price heading beside it */
/* Hallmark · waive 74 · pre-flight found these swatches in the old site.css as the product's status tokens · Rota's six order states must match the app exactly, per the README brand rule */
@import url("./tokens.css");
@import url("./base.css");

/* ═══════════════════════════════════════════════════════════════════════════
   Rota: tanıtım sayfası

   Palet marka kılavuzundan (docs/rota-marka.html) birebir alındı; değerler
   tokens.css'te. Sayfa koyu temada: lacivert zemin, ana renk gündüz mavisi,
   amber tek sinyal. Amber dolgu, çerçeve, ikon ve durum noktası olarak
   kullanılır, metin rengi olarak değil.

   Durum renkleri (oluşturuldu → teslim edildi) markadan ayrı tutuluyor ve
   üründekiyle birebir aynı: tanıtım sayfasında başka bir yeşil kullanmak,
   ekrana bakan kişiyi yanıltır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inter kendi sunucumuzdan: Google Fonts ziyaretçinin IP adresini yurt dışına
   iletiyordu (KVKK). Değişken yazı tipi, iki alt küme: latin ve Türkçe harfler
   için latin-ext (ğ, ş, İ). Lisans: assets/fonts/OFL.txt */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Sayfa ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: var(--space-3xl); }
body { line-height: 1.6; }
a { text-decoration: none; }
p a, figcaption a, .closing-note a { text-decoration: underline; text-decoration-color: var(--color-rule-2); }
p a:hover, figcaption a:hover, .closing-note a:hover { text-decoration-color: currentColor; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
.lead { color: var(--color-ink-2); }

.section { padding-block: var(--section-gap); }
.section.band { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--section-gap-s); }
.section.problem { padding-top: var(--section-gap-s); }
.section.planning { padding-top: var(--section-gap-l); }

/* Bölüm başı: başlık ve tek satırlık giriş. Yan yana sürümde giriş sağ yarıda. */
.section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
@media (min-width: 60rem) {
  .section-head-split { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
  .section-head-split h2 { grid-column: 1 / span 6; }
  .section-head-split .lead { grid-column: 8 / span 5; }
}

/* Klavyeyle gezen için ilk durak; odaklanınca görünür. */
.skip-link {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-inner);
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700;
}
.skip-link:focus-visible { top: var(--space-md); }

/* ── Düğmeler ──────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input);
  font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Amberin üstündeki yazı her zaman gece laciverti: kılavuzun kontrast kuralı. */
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button-primary:hover { background: var(--color-accent-2); }
.button-outline { border-color: var(--color-rule-2); color: var(--color-ink); background: transparent; }
.button-outline:hover { border-color: var(--color-blue); }
.button-plain { color: var(--color-ink-2); padding: 0 var(--space-md); }
.button-plain:hover { color: var(--color-ink); }
.text-link { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.text-link:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* ── Gezinme: yüzen hap ────────────────────────────────────────────────── */
.site-nav { position: fixed; inset-inline: 0; top: var(--space-md); z-index: var(--z-sticky-nav); padding-inline: var(--gutter); pointer-events: none; }
.nav-inner {
  pointer-events: auto; position: relative;
  max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; min-height: 64px;
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
}
.nav-brand { display: inline-flex; align-items: center; gap: var(--space-xs); flex: none; }
.nav-brand svg { width: 28px; height: 28px; }
.nav-brand span { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.04em; color: var(--color-wordmark); }
.nav-brand i, .footer-wordmark i { font-style: normal; color: var(--color-accent); }
.emblem-route { stroke: var(--color-blue); }
.emblem-dot { fill: var(--color-accent); }
.nav-links { display: flex; gap: var(--space-2xs); margin-inline: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a[aria-current] { color: var(--color-ink); background: var(--color-paper-4); }
.nav-cta { display: flex; align-items: center; gap: var(--space-2xs); flex: none; }
.nav-cta .button { min-height: 44px; border-radius: var(--radius-pill); font-size: var(--text-sm); }
.nav-menu-button {
  display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer;
}
.nav-menu-button:hover { background: var(--color-paper-4); }

@media (max-width: 75rem) { .nav-links a { padding: 0 var(--space-xs); } .nav-cta .button-plain { display: none; } }
@media (max-width: 64rem) {
  .nav-links, .nav-cta { display: none; }
  .nav-menu-button { display: inline-flex; }
  .nav-inner { border-radius: var(--radius-card); padding-left: var(--space-md); }
  .nav-inner.open { flex-wrap: wrap; }
  .nav-inner.open .nav-links { display: grid; order: 3; flex-basis: 100%; margin: 0; padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); }
  .nav-inner.open .nav-links a { font-size: var(--text-md); padding: 0 var(--space-xs); }
  .nav-inner.open .nav-cta { display: flex; order: 4; flex-basis: 100%; padding-bottom: var(--space-xs); }
  .nav-inner.open .nav-cta .button-plain { display: inline-flex; }
}

/* ── Kahraman ──────────────────────────────────────────────────────────── */
.hero { min-height: 100svh; display: grid; align-items: center; padding-block: var(--space-3xl) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; } }
.hero-text { display: grid; gap: var(--space-lg); }
.hero h1 { max-width: 11ch; }
.hero .lead { max-width: 36ch; }
.hero .actions { margin-top: var(--space-xs); }

/* ── Maketler ──────────────────────────────────────────────────────────────
   Ürün ekranlarının HTML/CSS ile çizilmiş örnekleri. Çerçeve yok: tarayıcı
   çubuğu ya da telefon kasası çizilmez, ekranın kendisi gösterilir. İçerideki
   paneller çerçevesiz, bir ton açık zeminle ayrılır. */
.mockup {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper-3); color: var(--color-ink);
  font-size: var(--text-sm); min-width: 0;
}
.mockup-caption { margin-top: auto; padding-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mockup-caption b { color: var(--color-ink-2); font-weight: 600; }

.panel { border-radius: var(--radius-inner); background: var(--color-paper-4); color: var(--color-ink); overflow: hidden; }
.panel-head {
  display: flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-sm) var(--space-md);
  font-weight: 600; border-bottom: 1px solid var(--color-rule);
}
.panel-head span { margin-left: auto; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
.panel-body { padding: var(--space-md); }
.panel-grid { display: grid; gap: var(--space-md); }
.panel-grid.uetds { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 60rem) {
  .panel-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}
.mockup-scroll { overflow-x: auto; }
.mockup-scroll table.mini { min-width: 26rem; }

table { border-collapse: collapse; width: 100%; }
table.mini th, table.mini td { padding: var(--space-xs) var(--space-md); text-align: left; vertical-align: middle; }
table.mini th { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
table.mini td { border-top: 1px solid var(--color-rule); white-space: nowrap; }
table.mini td.ref, table.mini td.num { white-space: nowrap; }
table.mini .ref, .ref { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.num, .align-right { text-align: right !important; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .hide-narrow { display: none; } }

/* Durum çipi: noktanın rengi üründeki durumun rengi. */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.d-idle i { background: var(--st-idle); }
.d-prep i { background: var(--st-prep); }
.d-dispatch i { background: var(--st-dispatch); }
.d-transit i { background: var(--st-transit); }
.d-done i { background: var(--st-done); }
.d-fail i { background: var(--st-fail); }
.good { color: var(--st-done); }

/* Özet satırı: etiket üstte, değer altta; nokta yerine sütun. */
.result-row, .trip-summary { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.result-row dt, .trip-summary dt { font-size: var(--text-xs); color: var(--color-muted); }
.result-row dd, .trip-summary dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Kahramandaki sefer planı: büyük, okunur, slot içinde. */
.mockup-hero { min-height: min(560px, 68svh); justify-content: space-between; padding: var(--space-xl); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-md); }
.trip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); }
.trip-head > div { display: grid; gap: var(--space-2xs); }
.trip-ref { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.trip-driver { color: var(--color-ink-2); }
.trip-km { font-weight: 600; color: var(--color-ink-2); }
table.trip td { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); vertical-align: top; }
table.trip td:first-child { width: 3.5rem; font-size: var(--text-sm); }
table.trip td b { display: block; font-weight: 600; margin-bottom: var(--space-2xs); }
table.trip .num { font-weight: 600; font-size: var(--text-lg); }
.trip-summary { gap: var(--space-md) var(--space-2xl); }
.trip-summary dd { font-size: var(--text-xl); color: var(--color-ink); }

/* ── Bugün ve Rota'da ──────────────────────────────────────────────────── */
.problem-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.problem-top .section-head { margin-bottom: 0; }
@media (min-width: 60rem) { .problem-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); column-gap: var(--space-2xl); } }

.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-3); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.photo figcaption { margin-top: var(--space-sm); max-width: 60ch; font-size: var(--text-sm); color: var(--color-muted); }
.photo figcaption a { display: block; margin-top: var(--space-3xs); color: var(--color-muted); }

.table-wrap { margin-top: var(--space-3xl); overflow-x: auto; }
.comparison { min-width: 40rem; }
.comparison th, .comparison td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--color-rule); }
.comparison thead th { padding-block: 0 var(--space-sm); border-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.comparison tbody th { width: 22%; font-weight: 600; }
.comparison tbody td { width: 39%; }
.comparison tbody td:nth-of-type(1) { color: var(--color-muted); }
.comparison tbody td:nth-of-type(2) { color: var(--color-ink); }
/* Telefonda her satır kendi bloğu: konu başta, iki düzen altında etiketli. */
@media (max-width: 40rem) {
  .comparison { min-width: 0; }
  .comparison thead { display: none; }
  .comparison tr { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
  .comparison tbody th, .comparison tbody td { width: auto; padding: 0; border: 0; }
  .comparison tbody th { margin-bottom: var(--space-2xs); }
  .comparison tbody td::before { display: block; font-size: var(--text-xs); color: var(--color-muted); }
  .comparison tbody td:nth-of-type(1)::before { content: "Alışılmış düzen"; }
  .comparison tbody td:nth-of-type(2)::before { content: "Rota"; }
}

/* ── Canlı sipariş panosu ──────────────────────────────────────────────────
   Kart seçilir, sonra hedef sütunun başlığına basılır ya da kart sürüklenir.
   Yalnız bir sonraki duruma geçiş kabul edilir; teslimde yevmiye satırları
   panonun altında oluşur. Script yoksa pano durağan bir ekran olarak kalır. */
.mockup-board { padding: var(--space-lg); }
.board { display: grid; gap: var(--space-sm); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 48rem) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-column {
  display: flex; flex-direction: column; gap: var(--space-xs); min-height: 320px; padding: var(--space-sm);
  border-radius: var(--radius-inner); background: var(--color-paper-4);
  transition: background-color var(--dur-short) var(--ease-out);
}
.board-column.target { background: var(--color-rule); }
/* Sütun başlığı: üst kenarda durum rengi, başlık aynı zamanda hedef düğmesi. */
.board-head {
  display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs);
  border: 0; border-top: 3px solid var(--status-color); border-radius: 2px; background: transparent;
  font: 600 var(--text-sm)/1.2 var(--font-body); color: var(--color-ink-2); text-align: left; cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.board-head:hover { color: var(--color-ink); }
.board-head:active { transform: translateY(1px); }
.board-head b { margin-left: auto; font-weight: 400; color: var(--color-muted); }
.board-card {
  display: block; width: 100%; padding: var(--space-sm); border: 0; border-radius: var(--radius-inner);
  background: var(--color-paper-3); color: var(--color-ink); text-align: left; font: inherit; cursor: grab;
  transition: background-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.board-card:hover { background: var(--color-rule); }
.board-card:active { transform: scale(0.98); }
.board-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.board-card > span { display: block; }
.board-card .ref { font-size: var(--text-xs); }
.board-card .name { font-weight: 600; margin: var(--space-3xs) 0 var(--space-2xs); }
.board-card .route { color: var(--color-ink-2); }
.board-card .meta { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.board-card[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.board-card.dragging { opacity: 0.45; }
.board-card.delivered { cursor: default; outline: 1px solid var(--st-done); }
.board-card.rejected { animation: red 360ms var(--ease-out); }
@keyframes red { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.board-message { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.board-message.warn { color: var(--color-ink); }
.board-message.warn::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-xs); border-radius: 2px; background: var(--st-prep); }
.board-message.ok { color: var(--st-done); }
.board-reset {
  min-height: 44px; margin-left: var(--space-xs); padding: 0 var(--space-xs); border: 0; background: none;
  font: inherit; color: var(--color-blue-2); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.board-reset:hover { color: var(--color-ink); }

/* Dört adım: panonun sütunlarını sırayla anlatır. */
.flow-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); margin-bottom: var(--space-xl); counter-reset: adim; }
@media (min-width: 48rem) { .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow-steps li { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); counter-increment: adim; }
.flow-steps h3 { font-size: var(--text-lg); }
.flow-steps h3::before { content: counter(adim) ". "; color: var(--color-muted); }
.flow-steps p { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── Fotoğraf bandı ───────────────────────────────────────────────────── */
.photo-band { position: relative; margin: 0; }
.photo-band img { width: 100%; height: clamp(360px, 52vw, 720px); object-fit: cover; object-position: 50% 45%; }
.photo-band figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.photo-band figcaption span { max-width: 75ch; }
.photo-band figcaption a { color: var(--color-muted); }

/* ── Planlama: bento ───────────────────────────────────────────────────── */
.bento { display: grid; gap: var(--gap-columns); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento > * { grid-column: 1 / -1; }
@media (min-width: 60rem) {
  .bento-seven { grid-column: 1 / span 7; }
  .bento-five { grid-column: 8 / span 5; }
}

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: var(--space-xs) var(--space-lg); border-left: 1px solid var(--color-rule); }
.kpi:first-child { padding-left: 0; border-left: 0; }
.kpi-label { font-size: var(--text-sm); color: var(--color-ink-2); }
.kpi-value { font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-delta { font-size: var(--text-xs); color: var(--color-muted); }
.kpi-delta.warning::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-xs); border-radius: 2px; background: var(--st-prep); }
@media (max-width: 40rem) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
}

.stack-bar { display: flex; height: 12px; border-radius: 4px; overflow: hidden; gap: var(--space-3xs); }
.stack-bar i { display: block; height: 100%; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); margin-top: var(--space-md); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); }
.legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend b { margin-left: auto; color: var(--color-ink); font-weight: 600; }

.dispatch { display: grid; gap: var(--space-lg); }
@media (min-width: 40rem) { .dispatch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list-head { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); font-weight: 600; }
.list-head span { margin-left: auto; color: var(--color-muted); font-weight: 400; }
.list { display: grid; gap: var(--space-xs); }
.list li { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-inner); background: var(--color-paper-4); }
.list .ref { font-size: var(--text-xs); }
.list .align-right { margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.avatar {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--color-field); color: var(--color-blue-2); font-size: var(--text-xs); font-weight: 700;
}

.load { display: grid; gap: var(--space-lg); align-items: center; }
.load svg { width: 100%; max-width: 360px; margin-inline: auto; }
.box-a1 { fill: var(--box-a-1); } .box-a2 { fill: var(--box-a-2); } .box-a3 { fill: var(--box-a-3); }
.box-b1 { fill: var(--box-b-1); } .box-b2 { fill: var(--box-b-2); } .box-b3 { fill: var(--box-b-3); }
.box-c1 { fill: var(--box-c-1); } .box-c2 { fill: var(--box-c-2); } .box-c3 { fill: var(--box-c-3); }
.trailer-floor { fill: var(--truck-floor); stroke: var(--color-rule-2); }
.trailer-wall-left { fill: var(--truck-wall-l); stroke: var(--color-rule-2); }
.trailer-wall-right { fill: var(--truck-wall-r); stroke: var(--color-rule-2); }
.trailer-frame { stroke: var(--truck-frame); }
.meters { display: grid; gap: var(--space-sm); }
.meter-label { display: flex; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-2xs); color: var(--color-ink-2); }
.meter-label b { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.meter { height: 8px; border-radius: 4px; background: var(--color-rule); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; }

/* ── Saha: harita ve sürücü ────────────────────────────────────────────── */
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) {
  .field-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: start; }
  .field-left { position: sticky; top: var(--space-3xl); }
}
.field-left .section-head { margin-bottom: var(--space-xl); }
.photo-motorway img { aspect-ratio: 5 / 4; }
.field-right { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); }

.map { position: relative; border-radius: var(--radius-inner); overflow: hidden; }
.map svg { width: 100%; height: auto; }
.map-ground { fill: var(--map-ground); }
.map-road { stroke: var(--map-road); }
.map-street { stroke: var(--map-street); }
.map-zone { fill: color-mix(in oklab, var(--color-accent) 7%, transparent); stroke: var(--color-accent); }
.map-zone-label { fill: var(--zone-label); font-family: var(--font-body); }
.map-route { stroke: var(--color-blue); }
.map-route-remaining { stroke: var(--box-a-2); }
.map-stop-done { fill: var(--st-done); stroke: var(--map-ground); }
.map-stop-queued { fill: var(--st-idle); stroke: var(--map-ground); }
.map-vehicle-halo { fill: color-mix(in oklab, var(--st-transit) 18%, transparent); }
.map-vehicle { fill: var(--st-transit); stroke: var(--color-ink); }
.map-card {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm); min-width: 13rem;
  display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-inner); background: var(--color-paper-3); color: var(--color-ink);
}
.map-card .plate { font-weight: 700; margin-bottom: var(--space-2xs); }
.map-card .row { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-ink-2); }
.map-card .row b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 40rem) { .map-card { position: static; margin-top: var(--space-sm); } }

.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.phone { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-4); }
.phone-head { font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.phone-box { padding: var(--space-sm); border-radius: var(--radius-inner); background: var(--color-paper-3); }
.phone-box .ref { font-size: var(--text-xs); }
.spaced { margin-top: var(--space-xs); }
.phone-button {
  display: grid; place-items: center; min-height: 48px; margin-top: auto; border-radius: var(--radius-inner);
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700;
}
.signature-pad { margin-top: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-inner); background: var(--color-paper-4); }
.signature { stroke: var(--color-blue-2); }

/* ── Mevzuat ───────────────────────────────────────────────────────────── */
.regulation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
@media (min-width: 60rem) { .regulation-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.photo-kapikule img { aspect-ratio: 4 / 5; object-position: 40% 50%; }
.warning-row { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.warning-row b { color: var(--color-ink); }

.rows { margin-top: var(--space-3xl); }
.rows > div { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.rows > div:last-child { border-bottom: 1px solid var(--color-rule); }
.rows dt { font-size: var(--text-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.rows dd { color: var(--color-ink-2); max-width: 60ch; }
@media (min-width: 60rem) {
  .rows > div { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; }
  .rows dt { grid-column: 1 / span 4; }
  .rows dd { grid-column: 5 / span 7; }
}

/* ── Ticaret ve muhasebe ───────────────────────────────────────────────── */
.accounting-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
@media (min-width: 60rem) { .accounting-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.margin-good { color: var(--st-done); }
.margin-mid { color: var(--color-ink); }
.margin-bad { color: var(--st-fail-text); }

.lists { display: grid; gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-3xl); }
@media (min-width: 48rem) { .lists { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lists h3 { margin-bottom: var(--space-md); }
.lists li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }

/* ── Uygulamalar ───────────────────────────────────────────────────────── */
.apps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 60rem) {
  .apps-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .apps-grid .section-head { grid-column: 1 / span 4; margin-bottom: 0; }
  .apps { grid-column: 6 / span 7; }
}
.apps li { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.apps li:first-child { border-top: 0; padding-top: 0; }
.apps p { color: var(--color-ink-2); }
.app-address { justify-self: start; font-size: var(--text-sm); color: var(--color-blue-2); }
a.app-address { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
a.app-address:hover { text-decoration-color: currentColor; }

/* ── Entegrasyon ───────────────────────────────────────────────────────── */
.code-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
@media (min-width: 60rem) { .code-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.code-card { min-width: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule); overflow: hidden; }
.code-label { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-rule); font: 400 var(--text-sm)/1.4 var(--font-outlier); color: var(--color-ink-2); }
.code { margin: 0; padding: var(--space-lg); overflow-x: auto; font: 400 var(--text-sm)/1.7 var(--font-outlier); color: var(--color-ink); }
.code .tok-key { color: var(--color-blue-2); }
.code .tok-str { color: var(--color-ink); }
.code .tok-num { color: var(--st-done); }
.code .tok-comment { color: var(--color-muted); }

.services { margin-top: var(--space-2xl); overflow-x: auto; }
.service-table { min-width: 36rem; }
.service-table th, .service-table td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: left; border-top: 1px solid var(--color-rule); }
.service-table thead th { padding-block: 0 var(--space-sm); border-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.service-table .service-name { font-size: var(--text-md); font-weight: 600; }
.service-table td:nth-of-type(2) { color: var(--color-ink-2); }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-inner); background: var(--color-paper-4); font-size: var(--text-sm); white-space: nowrap; }
.badge.off { color: var(--color-ink-2); }
.badge.open { color: var(--st-done); }
.service-note { margin-top: var(--space-lg); max-width: 65ch; color: var(--color-ink-2); }

/* ── Fiyat ─────────────────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
@media (min-width: 60rem) { .pricing-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: start; } }
.pricing-main { display: grid; gap: var(--space-lg); justify-items: start; }
.pricing-main p:not(.lead) { color: var(--color-ink-2); max-width: 60ch; }
.pricing-main .button { margin-top: var(--space-xs); }
.pricing-included h3 { margin-bottom: var(--space-md); }
.pricing-included li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }

/* ── SSS ───────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 60rem) {
  .faq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .faq-grid h2 { grid-column: 1 / span 4; position: sticky; top: var(--space-3xl); }
  .faq { grid-column: 6 / span 7; }
}
.faq-item { border-top: 1px solid var(--color-rule); }
.faq-item:last-child { border-bottom: 1px solid var(--color-rule); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  min-height: 72px; padding-block: var(--space-md); cursor: pointer; list-style: none;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--color-ink-2), var(--color-ink-2)) center / 14px 2px no-repeat, linear-gradient(var(--color-ink-2), var(--color-ink-2)) center / 2px 14px no-repeat;
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--color-blue-2); }
.faq-item p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 65ch; }

/* ── Kapanış ───────────────────────────────────────────────────────────── */
.closing { padding-block: var(--section-gap-s); background: var(--color-field); color: var(--color-ink); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .closing-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-3xl); } }
.closing-text { display: grid; gap: var(--space-lg); justify-items: start; }
.closing-text .lead { color: var(--color-ink-2); }
.closing-note { max-width: 52ch; font-size: var(--text-sm); color: var(--color-ink-2); }
.photo-anadolu figcaption, .photo-anadolu figcaption a { color: var(--color-ink-2); }

/* ── Altbilgi: büyük kelime işareti ────────────────────────────────────── */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper); color: var(--color-ink); }
.footer-wordmark {
  max-width: none; margin-bottom: var(--space-xl);
  font-size: clamp(6rem, 18vw, 16rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: var(--color-wordmark);
}
.footer-top { display: grid; gap: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
@media (min-width: 60rem) { .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); } }
.footer-about { max-width: 44ch; color: var(--color-ink-2); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--gap-columns); }
@media (min-width: 40rem) { .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); white-space: nowrap; }
.footer-links a:hover { color: var(--color-blue-2); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom a { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.footer-bottom a:hover { color: var(--color-ink); }
/* Fotoğraf künyeleri: CC BY ve CC BY-SA lisansının şartı, kaldırılmamalı. */
.footer-credits { max-width: 90ch; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.footer-credits a { color: var(--color-ink-2); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.footer-credits a:hover { color: var(--color-ink); }

/* ── KVKK: uzun metin ───────────────────────────────────────────────────
   Hukuki metin olduğu gibi kalır; sayfa yalnız okunur bir sütun kurar. */
.legal-head { padding-block: calc(var(--space-4xl) + var(--space-xl)) var(--space-4xl); }
.legal-section { padding-block: 0 var(--space-2xl); }
.legal > * { max-width: 70ch; }
.legal h1 { max-width: 16ch; font-size: var(--text-display-s); }
.legal-head .legal { display: grid; gap: var(--space-lg); }
.legal .intro-text { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.legal h2:not(:first-child) { margin-top: var(--space-2xl); }
.legal h2 { font-size: var(--text-2xl); }
.legal p, .legal li { margin-top: var(--space-sm); line-height: 1.7; color: var(--color-ink-2); }
.legal ul { list-style: disc; padding-left: var(--space-lg); }
.legal a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.legal table { max-width: none; margin-top: var(--space-lg); }
.legal th, .legal td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--color-rule); }
.legal thead th { padding-top: 0; border-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.legal td { color: var(--color-ink-2); }
.legal td:first-child { color: var(--color-ink); font-weight: 600; }
.legal .updated { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) {
  .legal thead { display: none; }
  .legal tr { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
  .legal th, .legal td { padding: 0; border: 0; }
  .legal td::before { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); }
  .legal td:nth-of-type(1)::before { content: "Veri"; }
  .legal td:nth-of-type(2)::before { content: "Nereden gelir"; margin-top: var(--space-xs); }
  .legal td:nth-of-type(3)::before { content: "Amaç ve hukuki sebep"; margin-top: var(--space-xs); }
}

/* ── 404 ───────────────────────────────────────────────────────────────── */
.page-404 .mockup-hero { min-height: min(640px, 74svh); justify-content: center; }
@media (min-width: 60rem) { .page-404 .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.page-404 table.trip td { padding-block: var(--space-xl); }
/* İpucu satırı kartın alt kenarına iner; başlık grubu üstte ortalanır. */
@media (min-width: 60rem) {
  .page-404 .hero-text { display: flex; flex-direction: column; align-self: stretch; }
  .page-404 .hero-text h1 { margin-top: auto; }
  .page-404 .hint-404 { margin-top: auto; }
}
.hint-404 { max-width: 44ch; font-size: var(--text-sm); color: var(--color-muted); }

/* ── Telefon ───────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-top: var(--space-4xl); }
  .mockup-hero { min-height: 0; padding: var(--space-lg); }
  .mockup { padding: var(--space-md); }
}
@media (max-width: 40rem) {
  .mockup-scroll table.mini { min-width: 0; }
  table.mini td:not(.ref):not(.num) { white-space: normal; }
  table.mini { font-size: var(--text-xs); }
  .panel .mockup-scroll { overflow-x: visible; }
  .board-column { min-height: 0; }
  .board-column[data-step="4"] { grid-column: 1 / -1; }
  table.mini th, table.mini td { padding-inline: var(--space-2xs); }
  table.mini th:first-child, table.mini td:first-child { padding-left: var(--space-xs); }
  table.mini th:last-child, table.mini td:last-child { padding-right: var(--space-xs); }
  .phones { grid-template-columns: minmax(0, 1fr); }
  .meter-label { flex-wrap: wrap; }
  .trip-summary { gap: var(--space-md) var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .board-card.rejected { animation: none; }
  .button, .board-card, .board-head, .board-column, .nav-links a, .faq-item summary::after { transition: none; }
}