/* otobusistanbul.com — mobile-first styles, no framework.
 *
 * Design rules: every value below comes from the tokens in :root.
 *   5 font sizes · 3 weights · 2 line heights · 6 spacing steps · 3 radii · 1 colour palette.
 * Raw colours, sizes or radii outside :root are a bug; add a token only after a design decision.
 */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colour — text tokens all pass WCAG AA (4.5:1) on both --card and --bg */
  --text: #1f2430;
  --muted: #565d6b;
  --line: #e3e6eb;
  --bg: #f6f7f9;
  --card: #ffffff;
  --accent: #0172ad;
  --accent-soft: #e6f2f9;
  --good: #12733a;
  --good-soft: #e8f6ed;
  --warn: #a14a07;
  --warn-soft: #fff4e0;
  --bad: #b91c1c;
  --bad-soft: #fdecec;
  --bus: #e11d48;
  --bus-soft: #fde8ee;   /* light background for bus-red accents (favourite star) */
  --badge: #4a5670;
  --brand-grad: linear-gradient(90deg, #84266c, #43479d);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

  /* Type: only these five sizes, three weights and two line heights */
  --fs-sm: .8125rem;  /* 13px meta, labels, fine print */
  --fs-md: 1rem;      /* 16px body, lists, buttons, inputs */
  --fs-lg: 1.25rem;   /* 20px panel titles, brand, badges */
  --fs-xl: 1.75rem;   /* 28px page titles, minutes */
  --fs-2xl: 2.25rem;  /* 36px home hero title only */
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 800;
  --lh-tight: 1.2;
  --lh-body: 1.45;
  --ls-title: -.01em;
  --ls-caps: .08em;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Space and shape */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-full: 999px;
  --tap: 44px;       /* minimum touch target */
  --control: 52px;   /* inputs, primary buttons, list rows */
  --icon: 20px;
  --badge-w: 52px;   /* line badge and stop icon share one width so list rows align */
  --gutter: var(--s4);
  --wrap: 1200px;    /* desktop content width; header, main and footer share it */
  --bar-h: 69px;     /* sticky top bar height incl. border (sticky desktop maps sit below it) */
  --side: 400px;     /* desktop side panel: line view list, stop view map */
  color-scheme: light;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* footer at the bottom of short pages */
}
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); letter-spacing: var(--ls-title); font-weight: var(--fw-bold); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
img { display: block; }
small { font-size: var(--fs-sm); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { flex: none; width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s2); top: -60px; z-index: 100; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--card); }
.skip-link:focus { top: var(--s2); }
/* List rows, chips and arrivals are real links (crawlable, open in a new tab); they look like the buttons they replaced. */
a:is(.result, .saved-open, .arrival, .line-chip, .route-stop-link) { color: inherit; text-decoration: none; }
a.line-chip { display: inline-flex; align-items: center; justify-content: center; }
.topbar-search, .desk-only, .desk-show { display: none; }

/* ── Header and footer: full bleed, same gutter ── */
.bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: var(--s3) var(--gutter);
  padding-top: max(var(--s3), env(safe-area-inset-top));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-title);
  color: var(--text); text-decoration: none;
}
.brand span { font-weight: var(--fw-regular); color: var(--muted); margin-left: calc(var(--s1) * -1); }
.brand-mark { width: 28px; height: 28px; }
.topbar-link {
  min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent); text-decoration: none;
}
.topbar-link[aria-current="page"] { background: var(--accent-soft); border-color: transparent; }

.site-footer {
  margin-top: var(--s4); padding: var(--s5) var(--gutter) max(var(--s5), env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line); color: var(--muted);
}
.site-footer .bar-inner { display: block; }
.footer-top { display: flex; flex-direction: column; gap: var(--s4); }
.footer-about p { margin-top: var(--s2); max-width: 40ch; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.footer-col { display: flex; flex-direction: column; }
.footer-col h2 { margin-bottom: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-bottom { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-sm); }

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) var(--s6); }
.view { padding-top: var(--s4); }

/* ── Hero (home only) ── */
.hero { text-align: center; padding: var(--s3) 0 var(--s4); }
.hero h1 { font-size: var(--fs-2xl); }
.hero h1 mark { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.hero-desc { margin-top: var(--s2); font-size: var(--fs-lg); color: var(--muted); }

/* ── Search ── */
.search { position: relative; z-index: 20; }
.search-box {
  display: flex; align-items: center; gap: var(--s2);
  height: var(--control); padding: 0 var(--s1) 0 var(--s4);
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-box > .icon { color: var(--muted); }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-weight: var(--fw-medium); }
.search-box input::placeholder { color: var(--muted); font-weight: var(--fw-regular); opacity: 1; }
.search-box input::-webkit-search-cancel-button { display: none; }
.icon-plain { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-full); background: transparent; color: var(--muted); }
.icon-plain:hover { color: var(--text); background: var(--bg); }

.results {
  margin-top: var(--s2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden auto; max-height: min(62vh, 520px);
}
.results-group { padding: var(--s3) var(--s4) var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.result {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--control); padding: var(--s2) var(--s4);
  border: 0; border-top: 1px solid var(--line); background: none; text-align: left;
}
.results-group + .result, .card-list li:first-child .result { border-top: 0; }
.result:hover, .result.active { background: var(--accent-soft); }
.result-main { flex: 1; min-width: 0; }
.result-main strong, .result-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-main strong { font-weight: var(--fw-medium); }
.result-main small { color: var(--muted); }
.result-empty { padding: var(--s4); color: var(--muted); }
.stop-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--badge-w); height: 32px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }

/* ── Line badge ── */
.badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--badge-w); height: 32px; padding: 0 var(--s2); border-radius: var(--r-sm);
  background: var(--badge); color: var(--card); font-size: var(--fs-md); font-weight: var(--fw-bold);
}
.badge-lg { min-width: 64px; height: 40px; font-size: var(--fs-lg); }

/* ── Nearby ── */
.nearby-btn {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; margin-top: var(--s3); padding: var(--s3) var(--s4);
  text-align: left; border: 2px solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent);
}
.nearby-btn .icon { width: 28px; height: 28px; }
.nearby-btn strong { display: block; font-weight: var(--fw-bold); }
.nearby-btn small { display: block; color: var(--muted); }
.nearby-btn[aria-busy="true"] { opacity: .65; }
.status-line { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.nearby-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.nearby-bar .status-line { margin-top: 0; }
.nearby-btn:not([hidden]) + .nearby-bar .status-line { margin-top: var(--s2); }
.nearby-refresh { display: inline-flex; align-items: center; gap: var(--s1); flex: none; margin-left: auto; padding-right: 0; }
.nearby-refresh .icon { width: 16px; height: 16px; }
.nearby-refresh[aria-busy="true"] .icon { animation: spin 1s linear infinite; }
.status-line:empty { display: none; }
.location-hint { margin-top: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }
.card-list { margin-top: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.distance { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); text-align: right; }

/* ── Saved places ── */
.saved { margin-top: var(--s6); }
.section-title { margin: var(--s4) 0 var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; }
.saved-list { display: flex; flex-direction: column; gap: var(--s2); }
.saved-item { display: flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.saved-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3); border: 0; background: none; text-align: left; }
.saved-empty { color: var(--muted); padding: var(--s1) 0; }
.saved-empty .icon { width: 16px; height: 16px; vertical-align: -3px; }
.saved-note { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.saved-note a { color: var(--accent); }
.text-btn { min-height: var(--tap); padding: 0 var(--s2); border: 0; background: none; color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ── Breadcrumb ── */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--s1); margin-bottom: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb .icon { width: 16px; height: 16px; margin: 0 var(--s1); transform: rotate(-90deg); color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); font-weight: var(--fw-medium); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── View header ── */
.view-head { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s4); }
.view-title { flex: 1; min-width: 0; }
.view-title h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.view-title h1:focus { outline: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.eyebrow .icon { width: 16px; height: 16px; }
.view-meta { margin-top: var(--s1); color: var(--muted); }
.icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card); color: var(--text);
}
.icon-btn[aria-pressed="true"] { color: var(--bus); border-color: transparent; background: var(--bus-soft); } /* favourite on: same red as the buses on the map */

/* ── Panels ── */
.panel { margin-bottom: var(--s3); padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.panel h2 { font-size: var(--fs-lg); }
.panel > h2 { margin-bottom: var(--s3); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.refresh-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-full); background: var(--bg); color: var(--accent); }
.refresh-btn[aria-busy="true"] .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.freshness { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.freshness::before { content: ''; flex: none; width: var(--s2); height: var(--s2); border-radius: var(--r-full); background: var(--good); }
.freshness[data-state="stale"] { color: var(--warn); }
.freshness[data-state="stale"]::before { background: var(--warn); }
.freshness[data-state="loading"]::before { background: var(--line); }
.freshness:empty { display: none; }
.fine-print { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); }

/* ── Arrivals ── */
.arrivals { display: flex; flex-direction: column; }
.arrival {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 64px; padding: var(--s3) 0;
  border: 0; border-top: 1px solid var(--line); background: none; text-align: left;
}
.arrival:first-child { border-top: 0; }
.arrival-main { flex: 1; min-width: 0; }
.arrival-main strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.arrival-main small { display: block; margin-top: var(--s1); color: var(--muted); }
.eta { flex: none; min-width: 64px; text-align: right; }
.eta b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.eta b span { margin-left: calc(var(--s1) / 2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.eta small { display: block; color: var(--muted); }
.eta[data-soon] b { color: var(--good); }
.eta[data-status="unverified"] b, .eta[data-status="unknown"] b, .eta[data-status="stale"] b { font-size: var(--fs-md); color: var(--warn); }
.message { padding: var(--s4) var(--s1); text-align: center; color: var(--muted); }
.message .text-btn { display: inline-flex; margin-top: var(--s1); }
.not-found { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); }
/* Server-rendered link lists (nearby stops on a stop page, the /hatlar index) */
.link-list li + li { border-top: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--control); padding: var(--s2) 0; color: var(--text); text-decoration: none; }
.link-list a:hover span { color: var(--accent); }
.link-list small { color: var(--muted); font-size: var(--fs-sm); }
.link-list span small { display: block; }
/* /gizlilik, /kullanim-sartlari */
.legal-nav { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.legal-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.legal-nav a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.legal-text { padding: var(--s5); }
.legal-text > * { max-width: 72ch; } /* reading measure inside the full-width card */
.legal-text h2 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-lg); }
.legal-text p, .legal-text li { line-height: var(--lh-body); }
.legal-text p + p { margin-top: var(--s3); }
.legal-text ul { padding-left: var(--s5); list-style: disc; }
.legal-text li + li { margin-top: var(--s2); }
.legal-text a { color: var(--accent); }
.legal-text code { font: inherit; font-weight: var(--fw-medium); } /* one font site-wide: no monospace */
.legal-lead { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--accent-soft); }
.lines-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.lines-jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.lines-jump a:hover { border-color: var(--accent); color: var(--accent); }
.lines-group { scroll-margin-top: 80px; }
.lines-list li + li { border-top: 1px solid var(--line); }
.lines-list a { display: flex; align-items: center; gap: var(--s3); min-height: var(--control); padding: var(--s2) 0; color: var(--text); text-decoration: none; }
.lines-list a:hover > span:last-child { color: var(--accent); }
.skeleton { height: 64px; margin: var(--s2) 0; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bg) 25%, var(--line) 37%, var(--bg) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.line-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.line-chip { min-width: 56px; min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-weight: var(--fw-bold); }
.line-chip:hover { border-color: var(--accent); color: var(--accent); }

.map-panel summary { display: flex; align-items: center; min-height: var(--tap); font-size: var(--fs-lg); font-weight: var(--fw-bold); cursor: pointer; list-style: none; }
.map-panel summary::-webkit-details-marker { display: none; }
.map-panel summary .icon { margin-left: auto; color: var(--muted); transition: transform .2s; }
.map-panel[open] summary .icon { transform: rotate(180deg); }
.map-panel[open] summary { margin-bottom: var(--s3); }
.text-link { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap); color: var(--accent); font-weight: var(--fw-medium); text-decoration: none; }
.text-link .icon { width: 16px; height: 16px; }

/* ── Notices (collapsed to three lines) ── */
/* Quiet strip: card background, an amber edge and icon carry the warning; the text stays body colour. */
.notice {
  display: flex; gap: var(--s3); margin-bottom: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-left: var(--s1) solid var(--warn); border-radius: var(--r-sm);
  background: var(--card); font-size: var(--fs-sm); line-height: var(--lh-body);
}
.notice > .icon { color: var(--warn); width: 18px; height: 18px; margin-top: calc(var(--s1) / 2); }
.notice p { flex: 1; min-width: 0; }
.notice-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.notice[data-open] .notice-text { -webkit-line-clamp: unset; }
.notice-more { min-height: 0; margin-top: var(--s1); padding: 0; }
.dir-single { display: flex; align-items: center; gap: var(--s2); margin-top: calc(var(--s2) * -1); color: var(--muted); }
.dir-single .icon { width: 16px; height: 16px; color: var(--accent); }
.dir-single strong { color: var(--text); font-weight: var(--fw-medium); }
.dir-single span::before { content: '·'; margin-right: var(--s2); }

/* ── Line view ── */
.dir-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.dir-switch:has(> :only-child) { grid-template-columns: 1fr; }
.dir-btn { min-height: 64px; padding: var(--s2) var(--s3); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--card); text-align: left; }
.dir-btn strong { display: flex; align-items: flex-start; gap: var(--s1); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.dir-btn strong .icon { width: 16px; height: 16px; margin-top: calc(var(--s1) / 2); }
.dir-btn small { display: block; margin-top: var(--s1); color: var(--muted); }
.dir-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.variant-select { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.variant-select select { min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--text); font-size: var(--fs-md); }

.map-wrap { position: relative; margin: 0 calc(var(--gutter) * -1); }
.map { background: var(--line); }
.map-lg { height: 46vh; min-height: 280px; max-height: 520px; }
.map-sm { height: 220px; border-radius: var(--r-md); overflow: hidden; }
.map-fab {
  position: absolute; right: var(--s3); bottom: var(--s5); z-index: 500; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-lg); color: var(--accent);
}
.map-fab .icon { width: 24px; height: 24px; }
.map-fab[aria-busy="true"] .icon { animation: spin 1.2s linear infinite; }
.map-fab[aria-pressed="true"] { background: var(--accent); color: var(--card); }
#line-fresh { margin-top: var(--s3); }
.nearest { margin-bottom: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.nearest :is(a, span) { color: inherit; font-weight: var(--fw-bold); text-decoration: underline; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin-bottom: var(--s2); padding: var(--s1); border-radius: var(--r-md); background: var(--line); }
.seg button { min-height: 40px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-weight: var(--fw-bold); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.seg span { font-weight: var(--fw-regular); }

.vehicle-list, .route-stops { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.vehicle { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--control); padding: var(--s2) var(--s4); border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.vehicle-list li:first-child .vehicle { border-top: 0; }
.vehicle[aria-current="true"] { background: var(--accent-soft); }
.vehicle-id { min-width: 72px; font-weight: var(--fw-bold); }
.vehicle-meta { flex: 1; min-width: 0; color: var(--muted); font-size: var(--fs-sm); }
.vehicle-dist { flex: none; color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.dot { flex: none; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--good); }
.dot[data-status="stale"], .dot[data-status="unknown"], .dot[data-status="future"] { background: var(--muted); }

.route-stops { padding: var(--s1) 0; }
.route-stop { position: relative; }
.route-stop::before { content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 3px; background: var(--accent-soft); }
.route-stop:first-child::before { top: 50%; }
.route-stop:last-child::before { bottom: 50%; }
.route-stop-link { position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: var(--s1) var(--s4) var(--s1) var(--tap); border: 0; background: none; text-align: left; }
.route-stop-link::before { content: ''; position: absolute; left: var(--s4); top: 50%; width: 15px; height: 15px; transform: translateY(-50%); border: 3px solid var(--accent); border-radius: var(--r-full); background: var(--card); }
.route-stop[data-nearest] .route-stop-link { background: var(--accent-soft); font-weight: var(--fw-bold); }
.route-stop[data-nearest] .route-stop-link::before { background: var(--accent); }
.route-stop small { margin-left: auto; color: var(--muted); white-space: nowrap; }

/* ── Durağım (line view): the user's stop with İETT's estimate for this line ── */
.my-stop {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); padding: var(--s3) var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow);
}
.my-stop > .icon { color: var(--accent); }
.my-stop-main { flex: 1; min-width: 0; }
.my-stop-main strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.my-stop-main small { display: block; color: var(--muted); }
.my-stop-main .my-stop-label { font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
.my-stop[data-state="empty"] { padding-top: var(--s2); padding-bottom: var(--s2); border-style: dashed; border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.my-stop[data-state="empty"] .my-stop-main strong { color: var(--accent); }
.my-stop[data-state="picking"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.my-stop-tools { display: flex; flex-direction: column; align-items: center; margin-right: calc(var(--s2) * -1); }
.my-stop-tools .text-btn { min-height: 32px; }
.my-stop .eta[data-status="loading"] b { color: var(--muted); }
.vehicle-list li[data-passed] .vehicle { opacity: .55; }
.bus-marker[data-passed] { opacity: .45; }
.route-stops.picking .route-stop-link { cursor: pointer; }
.route-stops.picking .route-stop-link:hover, .route-stops.picking .route-stop-link:focus-visible { background: var(--accent-soft); }
.route-stop[data-mine] .route-stop-link { font-weight: var(--fw-bold); color: var(--accent); }
.route-stop[data-mine] .route-stop-link::before { background: var(--accent); }

/* ── Today's departures (line view, under the vehicles) ── */
.departures { margin-top: var(--s3); }
.departures .fine-print { margin: var(--s1) 0 var(--s2); }
.departures-toggle { padding: 0; margin-bottom: var(--s2); }
.departure-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s2); }
.departure {
  display: grid; place-items: center; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
}
.departure[data-past] { opacity: .4; }
.departure[data-next] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-bold); }

/* ── Map markers ── */
.bus-marker { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--card); border-radius: var(--r-full); background: var(--bus); color: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.bus-marker .icon { width: 14px; height: 14px; }
.bus-marker[data-status="stale"], .bus-marker[data-status="unknown"], .bus-marker[data-status="future"] { background: var(--muted); }
.bus-marker[data-active], .bus-marker[data-hover] { background: var(--accent); transform: scale(1.3); }
.user-marker { width: 18px; height: 18px; border: 3px solid var(--card); border-radius: var(--r-full); background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.leaflet-interactive.user-accuracy, path.user-accuracy { stroke: var(--accent); stroke-opacity: .5; fill: var(--accent); fill-opacity: .12; }
.stop-marker { width: 12px; height: 12px; border: 3px solid var(--accent); border-radius: var(--r-full); background: var(--card); }
.stop-pin { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--card); border-radius: var(--r-full); background: var(--accent); color: var(--card); box-shadow: var(--shadow-lg); }
.stop-pin .icon { width: 18px; height: 18px; }
/* Leaflet ships its own 11/12/22px type; keep the map on the site scale. */
.leaflet-container, .leaflet-container .leaflet-control-attribution, .leaflet-tooltip { font-family: var(--font); font-size: var(--fs-sm); }
.leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a { font: var(--fw-medium) var(--fs-lg)/30px var(--font); color: var(--text); }
.leaflet-popup-content { margin: var(--s3) var(--s4); font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font); }
.leaflet-popup-content strong { display: block; font-size: var(--fs-md); }
.leaflet-container .leaflet-control-attribution a { color: var(--accent); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: max(var(--s5), env(safe-area-inset-bottom)); z-index: 1000; transform: translateX(-50%);
  max-width: calc(100% - var(--s6)); padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--text); color: var(--card); box-shadow: var(--shadow-lg);
}

/* ═════════ Account page (hesap.php) ═════════ */
.account-page { max-width: 480px; }
.account-intro { text-align: center; padding: var(--s5) 0 var(--s4); }
.account-intro h1 { margin-top: var(--s2); font-size: var(--fs-xl); }
.account-intro p { margin-top: var(--s2); color: var(--muted); }
.account-status { margin-bottom: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); overflow-wrap: anywhere; }
.account-status:empty { display: none; }
.account-status.error { background: var(--bad-soft); color: var(--bad); }
.account-card h2 { margin: var(--s1) 0 var(--s2); overflow-wrap: anywhere; }
.account-card p { color: var(--muted); }
.auth-tabs { margin-bottom: var(--s4); }
.field { display: block; margin-top: var(--s4); }
.field > span { display: block; margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field input {
  display: block; width: 100%; height: var(--control); padding: 0 var(--s3); border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--card); transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control); margin-top: var(--s4); padding: 0 var(--s4); border: 0; border-radius: var(--r-md); font-weight: var(--fw-bold); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--card); }
.btn-secondary { margin-top: var(--s2); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.btn-danger { background: var(--bad); color: var(--card); }
.account-card .text-btn { display: block; margin: var(--s2) auto 0; }
.success-tag { display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--r-full); background: var(--good-soft); color: var(--good); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.account-settings { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.account-settings summary { display: flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-medium); cursor: pointer; }
.account-settings details { margin-top: var(--s2); }
.account-settings .text-btn { margin: 0; padding: 0; }
.confirm { display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-sm); }
.confirm input { flex: none; width: 18px; height: 18px; margin-top: calc(var(--s1) / 2); }
.privacy-note { margin: var(--s4) var(--s1) 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* Account: signed-in view */
.account-head { padding: var(--s5) 0 var(--s4); }
.account-head h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.form-note { margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); }
.verify-box { border: 2px solid var(--warn); background: var(--warn-soft); }
.verify-box h2 { display: flex; align-items: center; gap: var(--s2); color: var(--warn); }
.verify-box p { margin-top: var(--s2); }
.code-form { display: flex; gap: var(--s2); margin-top: var(--s3); }
.code-form input {
  flex: 1; min-width: 0; height: var(--control); padding: 0 var(--s3); border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--card); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-align: center;
}
.code-form input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.code-form .btn { width: auto; margin-top: 0; }
.verify-box .text-btn { margin-top: var(--s2); padding: 0; }
.fav-list { display: flex; flex-direction: column; }
.fav-item { display: flex; align-items: center; gap: var(--s1); border-top: 1px solid var(--line); }
.fav-item:first-child { border-top: 0; }
.fav-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) 0; color: var(--text); text-decoration: none; }
.fav-open:hover strong { color: var(--accent); }
.fav-empty p { color: var(--muted); }
.steps { margin: var(--s3) 0 0; padding-left: var(--s5); list-style: decimal; color: var(--text); }
.steps li { margin-top: var(--s2); }
.steps .icon { width: 16px; height: 16px; vertical-align: -3px; }
.fav-empty .btn { margin-top: var(--s4); }
.setting { border-top: 1px solid var(--line); }
.setting summary { display: flex; align-items: center; min-height: var(--control); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.setting summary::-webkit-details-marker { display: none; }
.setting summary .icon { margin-left: auto; color: var(--muted); transition: transform .2s; }
.setting[open] summary .icon { transform: rotate(180deg); }
.setting form { padding-bottom: var(--s4); }
.setting p { color: var(--muted); }
#account-status:empty { display: none; }
#account-status { margin-top: var(--s4); }

/* Elements scrolled into view must clear the sticky top bar. */
.search, .map-wrap, .seg, .view-head, .panel, .my-stop { scroll-margin-top: 72px; }

/* ── Larger screens ── */
@media (min-width: 640px) {
  :root { --gutter: var(--s5); }
  .hero { padding: var(--s6) 0 var(--s5); }
  .map-wrap { margin: 0; }
  .map-lg { height: 440px; border-radius: var(--r-md); overflow: hidden; }
  .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .footer-nav { grid-template-columns: repeat(2, minmax(160px, auto)); column-gap: var(--s6); }
  .footer-bottom { flex-direction: row; justify-content: space-between; gap: var(--s5); }
}

/* ═════════ Desktop (≥ 1024px) ═════════
 * Mobile above stays untouched; everything here only rearranges the same content for a wide screen.
 * One 1200px grid for header, main and footer; side-by-side columns instead of one long stack. */
@media (min-width: 1024px) {
  :root { --fs-xl: 2rem; --fs-2xl: 3rem; } /* still five sizes per screen; titles need more weight on a wide page */
  .bar-inner { max-width: var(--wrap); margin: 0 auto; }
  main, .account-page { max-width: calc(var(--wrap) + var(--gutter) * 2); }
  .desk-only { display: block; }
  .desk-show { display: inline; }
  .desk-hide { display: none; }
  .view { padding-top: var(--s5); }

  /* Top bar: brand · search · account */
  .topbar .bar-inner { gap: var(--s5); }
  .topbar-search { display: block; flex: 1; max-width: 560px; margin-right: auto; }
  .topbar-search:empty { display: none; }
  .topbar .search-box { height: var(--tap); border-width: 1px; box-shadow: none; background: var(--bg); }
  .topbar .search-box:focus-within { background: var(--card); }
  .search-link { gap: var(--s2); color: var(--muted); text-decoration: none; }
  .search-link:hover { border-color: var(--accent); }
  /* Results float over the page instead of pushing it down */
  .search .results { position: absolute; left: 0; right: 0; top: 100%; }
  .search-box:hover { border-color: var(--accent); }

  /* Home: hero and search centred, then favourites | nearby */
  .hero, #view-home > .search { max-width: 720px; margin-left: auto; margin-right: auto; }
  .hero { padding: var(--s6) 0 var(--s5); }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); margin-top: var(--s6); align-items: start; }
  /* Favourites column is a card of its own, so it balances the nearby card on the right */
  .home-grid .saved { order: -1; margin-top: 0; padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
  .home-grid .section-title { margin: var(--s5) 0 var(--s3); }
  .home-grid .section-title:first-child { margin-top: 0; }
  .home-grid .section-title-row { margin-top: var(--s5); }
  .home-grid .section-title-row .section-title { margin-top: 0; }
  .home-grid .section-title-row .text-btn { min-height: 0; }
  .home-grid .saved-empty { padding: var(--s4); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--bg); }
  .home-grid .saved-item { background: var(--bg); }
  .home-grid .saved-item:hover { background: var(--card); }
  .home-grid .saved-note { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
  .home-grid .saved-note:empty { display: none; }
  /* Nearby column: a card like favourites; before a search the button fills it as a centred call to action */
  .home-grid { align-items: stretch; }
  .home-grid:has(#nearby-list:not([hidden])) { align-items: start; } /* a long result list must not stretch the favourites card */
  .home-nearby { display: flex; flex-direction: column; padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
  .home-nearby .nearby-btn {
    flex: 1; flex-direction: column; justify-content: center; gap: var(--s3); margin-top: 0; padding: var(--s5);
    text-align: center; border: 1px dashed var(--accent); transition: background .15s, border-color .15s;
  }
  .home-nearby .nearby-btn:hover { border-style: solid; background: var(--card); }
  .home-nearby .nearby-btn > .icon { width: var(--tap); height: var(--tap); padding: var(--s2); border-radius: var(--r-full); background: var(--card); }
  .home-nearby .nearby-btn strong { font-size: var(--fs-lg); }
  .home-nearby .card-list { box-shadow: none; }
  .saved-open:hover strong { color: var(--accent); }
  .saved-item:hover { border-color: var(--accent); }

  /* Stop: arrivals and lines | sticky open map */
  .stop-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--s5); align-items: start; }
  .stop-side { position: sticky; top: calc(var(--bar-h) + var(--s4)); }
  .map-panel summary { cursor: default; }
  .map-panel summary .icon { display: none; }
  .map-panel .map-sm { height: 360px; }
  .arrival:hover strong, .line-chip:hover { color: var(--accent); }

  /* Line: side panel (title, directions, lists) | map filling the screen height, sticky while the list scrolls */
  #view-line { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
  #view-line > * { grid-column: 1; min-width: 0; }
  #view-line > .map-wrap {
    grid-column: 2; grid-row: 1 / span 30; position: sticky; top: calc(var(--bar-h) + var(--s4));
    height: calc(100vh - var(--bar-h) - var(--s4) * 2); min-height: 480px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);
  }
  #view-line .map-lg { height: 100%; max-height: none; }
  #line-fresh { margin-top: 0; }
  .vehicle:hover { background: var(--accent-soft); }
  a.route-stop-link:hover { background: var(--bg); }
  .departure-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Account: signed out = pitch | form; signed in = favourites | verification and settings */
  #signed-out { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s6); align-items: center; padding-top: var(--s6); }
  .account-intro { text-align: left; padding: 0; }
  .account-intro h1 { margin-top: 0; }
  .account-perks { margin-top: var(--s5); }
  .account-perks li { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
  .account-perks .icon { color: var(--accent); }
  #reset-card { max-width: 480px; margin: var(--s6) auto 0; }
  #signed-in { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: auto auto 1fr; column-gap: var(--s5); align-items: start; }
  .account-head { grid-column: 1 / -1; }
  .account-favs { grid-column: 1; grid-row: 2 / span 2; }
  .account-side { grid-column: 2; grid-row: 2; }
  .account-settings-panel { grid-column: 2; grid-row: 3; }
  .fav-open:hover strong { color: var(--accent); }
  .legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .legal-nav { position: sticky; top: calc(var(--bar-h) + var(--s4)); flex-direction: column; }
  .lines-list { columns: 2; column-gap: var(--s6); }
  .lines-list li { break-inside: avoid; }
  .lines-list li + li { border-top: 0; }
  .lines-list a { border-bottom: 1px solid var(--line); }
  /* /duraklar: districts and a district's stops in columns */
  .index-cols { columns: 3; column-gap: var(--s6); }
  .index-cols li { break-inside: avoid; }
  .index-cols li + li { border-top: 0; }
  .index-cols a { border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}