/* Kıbrıs Araç Kiralama — marketplace storefront theme "Modern Coastal Signal" (v6, ADR-0081).
   Getaround's honest, hero-first-search + one-idea-per-block skeleton, with a RentQ-style
   restrained scroll-motion layer and a brighter, more contemporary type/colour system than v5:
   warm-white canvas, near-black ink, one vivid contemporary coral accent (never copied from a
   competitor's brand colour) plus a sparing amber support mark. Two self-hosted type families —
   Plus Jakarta Sans (body/UI) + Bricolage Grotesque (display/headings) — replace v5's single
   Manrope family; token _names_ are unchanged from v4/v5 so every existing class rule keeps
   working. 1px borders, soft restrained shadows, flat opaque colour only — the house rule
   against colour ramps and translucent/blurred decorative surfaces stays. Motion is
   transform/opacity-only (zero layout shift) and fully disabled under prefers-reduced-motion.
   Self-hosted fonts (CSP forbids CDN); latin + latin-ext subsets for Turkish glyphs. */

/* Plus Jakarta Sans — body/UI family, variable 400-700 in the font file; the theme applies
   400/500 (body, labels) and 600 (UI emphasis). Prices use tabular numerals via
   font-variant-numeric instead of a second mono family. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jakarta-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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jakarta-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched local fallback (ADR-0084 font-delivery fix, ported from the swap+ascent/descent/
   size-adjust approach validated on Manrope). font-display was "optional" — on a slow or
   first-visit connection the webfont never swaps in and the page renders in the system font
   permanently, reading as unstyled/amateur. Switching to "swap" always eventually shows Plus
   Jakarta Sans, but a naive swap causes a visible reflow when the fallback's box metrics differ
   from the webfont's. This synthetic face scales/repositions "Arial" (via size-adjust +
   ascent/descent/line-gap-override) to match Plus Jakarta Sans's own vertical metrics and average
   glyph width, so the FOUT swap is (near) zero-CLS. Values were computed with fontkit from the
   actual shipped woff2's OS/2 + hhea tables (unitsPerEm 1000, ascent 1038, descent -222, lineGap 0,
   xAvgCharWidth 585) against the system Arial (unitsPerEm 2048, ascent 1854, descent -434, lineGap
   67, xAvgCharWidth 904) — not eyeballed. */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial");
  ascent-override: 82.38%;
  descent-override: 17.62%;
  line-gap-override: 0%;
  size-adjust: 132.53%;
}
/* Bricolage Grotesque — display family for h1-h3/eyebrow/editorial-title only, variable
   400-800; the theme applies 600 (h2/h3/legend) and 700 (hero + section display headings). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-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;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched local fallback for the display family, same method as Plus Jakarta Sans above.
   Values computed with fontkit from bricolage-latin.woff2 (unitsPerEm 1000, ascent 930, descent
   -270, lineGap 0, xAvgCharWidth 498) against the same system Arial reference. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial");
  ascent-override: 77.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
  size-adjust: 112.82%;
}

:root {
  color-scheme: light;
  /* Modern Coastal Signal (v6, ADR-0081) palette — node-computed WCAG AA (see ADR-0081 for the
     full pair table): ink/paper 16.94, ink-strong/paper 18.46, white/ink 17.98, muted/paper
     5.15, sea/paper 4.81, sea-strong/paper 7.13 (white/sea-strong 7.57), poppy/paper 5.82
     (white/poppy 6.17), ok/paper 4.91 (white/ok 5.21), warn-text/paper 6.01. --sun ("amber",
     #cc8e24) is a SPARING support accent (eyebrow tick, selected state, small highlight) and
     never carries normal body text: amber/paper is 2.65 and white-on-amber is worse, both fail
     AA. Amber may only sit under ink text (amber surface + ink text = 6.39) or, where
     text-on-amber is unavoidable, use the darker --clay-text (#7e5816, 6.01). Primary buttons
     use --deep with white text; hover moves to --sea-strong. Flat, opaque fills only. */
  --paper: #faf8f3;
  --paper-2: #ffffff;
  --sand: #f0ede3;
  --ink: #14171b;
  --ink-strong: #0a0c0e;
  --muted: #606b71;
  --sea: #c83c19;
  --sea-strong: #9a2e13;
  --deep: #14171b;
  --bone-muted: #d6d2c4;
  --sun: #cc8e24;
  --gold: #cc8e24;
  --gold-strong: #8f6419;
  --clay-text: #7e5816;
  --poppy: #b92733;
  --ok: #247b52;
  --warn: #cc8e24;
  --warn-text: #7e5816;
  --border: #e5e1d6;
  --border-2: #d0cbbc;
  --focus: #c83c19;
  --shadow-1: 0 1px 2px rgb(20 23 27 / 0.07);
  --shadow: 0 2px 6px rgb(20 23 27 / 0.07), 0 10px 24px rgb(20 23 27 / 0.08);
  --shadow-2: 0 4px 10px rgb(20 23 27 / 0.08), 0 16px 32px rgb(20 23 27 / 0.1);
  --shadow-3: 0 6px 16px rgb(20 23 27 / 0.09), 0 24px 48px rgb(20 23 27 / 0.13);
  /* v7 (ADR-0082): a fourth, deeper shadow step for the richer card/slider treatment the owner
     asked for, plus a dark hero gradient and a second saturated accent ("jade"). Every new pair
     below is node-computed (WCAG relative-luminance, threshold 4.5:1 normal / 3:1 large-or-non-text)
     — see ADR-0082 for the full table. Gradients/rich shadows were previously banned by house
     rule (ADR-0068-0081); that ban is lifted for this pass. */
  --shadow-4: 0 10px 24px rgb(10 12 14 / 0.14), 0 32px 64px rgb(10 12 14 / 0.22);
  --hero-bg-1: #0a0c0e;
  --hero-bg-2: #2b1006;
  --hero-ink: #ffffff;
  --hero-muted: #c9cdd2;
  --jade: #0a7a54;
  --jade-strong: #075c3f;
  --jade-bright: #2fd699;
  --jade-tint: #d8f4e6;
  /* ff8a63/hero-bg-1 8.46, ff8a63/hero-bg-2 7.69 -- coral lightened for use as text on the dark hero only */
  --hero-accent: #ff8a63;
  /* v8 (ADR-0084): reference-pattern palette add-on -- orange/navy/red used for the header CTA,
     the full-width trust strip, the navy reservation band and its red primary action, layered
     onto the existing v6/v7 tokens above (unchanged, still used by vehicle cards, footer and the
     price-transparency icons). Every pair below is node-computed (WCAG relative luminance,
     4.5:1 normal / 3:1 large-or-non-text) -- see ADR-0084 for the full table.
     white/orange 3.07 FAILS normal text, so white-on-orange surfaces (trust strip, filled CTA
     text) use the darkened --orange-strong (4.94) instead; ink/orange 5.86 passes, so bright
     --orange may still carry ink text or sit as a large-text/icon-only fill. */
  --orange: #e8720c;
  --orange-strong: #b85207;
  --orange-deep: #8f4005;
  --navy: #0b1f3a;
  --red: #c81e1e;
  --red-strong: #9c1518;
  --radius: 18px;
  --radius-lg: 20px;
  --radius-tight: 12px;
  --radius-pill: 999px;
  --target: 44px;
  --shell-max: 1360px;
  --shell-gutter: 1rem;
  --sans:
    "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", var(--sans);
  --display-grotesk: var(--display);
  --mono: var(--sans);
  font-family: var(--sans);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
  line-height: 1.6;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--sea-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--poppy);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.button,
.ghost-button,
.text-link {
  min-height: var(--target);
}

button,
.button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-tight);
  /* v8 sweep: primary `.button`/`<button>` reuses the homepage's own `--red`/`--red-strong` CTA
     pair (already AA-checked, ADR-0084) instead of the pre-v8 navy fill, so catalogue/detail/
     checkout CTAs match the homepage. `.hero .button` and `.nav-cta` keep their own overrides. */
  border: 1px solid var(--red);
  padding: 0.78rem 1.4rem;
  background: var(--red);
  color: #ffffff;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition:
    transform 0.16s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

button:hover,
.button:hover {
  background: var(--red-strong);
  border-color: var(--red-strong);
  color: #ffffff;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

button:active,
.button:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-1);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ghost-button,
.button-compact {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--border-2);
  box-shadow: none;
}

.ghost-button:hover,
.button-compact:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--sea-strong);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-150%);
  background: var(--deep);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-tight);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: min(var(--shell-max), calc(100% - 2 * var(--shell-gutter)));
  margin: 0 auto;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}

.nav-shell,
.nav-actions,
.brand,
.market-chip,
.hero-actions {
  display: flex;
  align-items: center;
}

.nav-shell {
  min-height: 76px;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink-strong);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand small,
.brand strong {
  display: block;
  line-height: 1.05;
}

.brand strong {
  font-weight: 600;
}

.brand small {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--deep);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.05rem;
}

.nav-actions {
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-actions a,
.market-chip {
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
}

.nav-actions a:hover {
  background: var(--sand);
  color: var(--sea-strong);
}

/* v8 (ADR-0084): orange-filled primary CTA in the nav, matching the reference pattern's
   colour-coded header action. White text on --orange-strong is 4.94:1 (AA, see the :root
   comment); the plain-orange fill fails normal-text AA so the darkened token is used here. */
.nav-cta {
  background: var(--orange-strong);
  color: #ffffff !important;
}

.nav-cta:hover {
  background: var(--orange-deep);
  color: #ffffff !important;
}

.market-chip {
  gap: 0.4rem;
  border: 1px solid var(--border-2);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
}

.nav-toggle {
  display: none;
}

.nav-toggle::marker,
.nav-toggle::-webkit-details-marker {
  display: none;
  content: "";
}

.nav-toggle-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

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

/* Desktop nav fix (v8 sweep): `.nav-actions` is now a SIBLING of `.nav-disclosure` in the markup
   (see `renderSiteHeader`), not nested inside the `<details>` -- a closed native `<details>` in
   this codebase's pinned Chromium build collapses any forced-visible child back to zero-width
   during flex layout, confirmed by swapping the live `<details>` for a plain `<div>` with the same
   children/classes and watching the identical CSS instantly measure correct width. `.nav-actions`
   already gets `display: flex` from the shared selector list above, so it needs no override here.
   `.nav-disclosure` now holds only the hamburger `<summary>` and serves no purpose at desktop
   (no visible toggle button outside the ≤640px query below), so it is hidden entirely. */
.nav-disclosure {
  display: none;
}

/* ---------- Breadcrumb ---------- */
/* "›" separators are CSS-generated (decorative), so each crumb's DOM text stays exactly the
   crumb name — keeping the visible text byte-identical to the BreadcrumbList JSON-LD names. */
.breadcrumb {
  margin: 0 0 0.9rem;
}

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.breadcrumb-trail li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.5rem;
}

.breadcrumb-trail li + li::before {
  content: "\203A";
  color: var(--border-2);
  font-weight: 600;
}

.breadcrumb-trail a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb-trail a:hover {
  color: var(--sea-strong);
  text-decoration: underline;
}

.breadcrumb-trail [aria-current="page"] {
  color: var(--ink-strong);
  font-weight: 600;
}

/* ---------- Hero (v7, ADR-0082: dark gradient signal band) ---------- */
/* v7 moves the hero from v3-v6's bright paper band to a dark, gradient-lit signal band (the
   aesthetic-only "no gradient" house rule is lifted by ADR-0082) -- near-black at the copy edge
   warming into a deep coral-tinted ember toward the photo, echoing the --sea accent without
   literally reusing a competitor's palette. A radial glow (also a gradient, not a blurred/
   translucent "glass" surface -- that ban stays) sits behind the eyebrow for depth. Every
   foreground colour on this dark ground is node-computed AA against BOTH gradient endpoints
   (see the :root comment / ADR-0082): white/hero-bg-1 19.59, white/hero-bg-2 17.80,
   hero-muted/hero-bg-1 12.27, hero-muted/hero-bg-2 11.15, sea/hero-bg-1 5.08, sea/hero-bg-2 4.61. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(2.4rem, 4.5vw, 3.8rem);
  background:
    radial-gradient(120% 140% at 8% 0%, rgb(200 60 25 / 0.28) 0%, rgb(200 60 25 / 0) 45%),
    linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  color: var(--hero-ink);
}

.hero > * {
  position: relative;
}

/* Asymmetric 7/5 hero: the grid itself is edge-to-edge (no .shell wrapper), with a left inset
   equal to the shell's own gutter so the copy column lines up with every other section, while
   the photo column has no right inset at all -- its fr-share of the remaining width naturally
   reaches the true viewport edge. No negative margins, nothing that can overflow. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 3rem);
  width: 100%;
  padding-left: max(var(--shell-gutter), calc((100vw - var(--shell-max)) / 2 + var(--shell-gutter)));
}

.hero-copy {
  padding-right: var(--shell-gutter);
}

.hero-visual-bleed {
  min-width: 0;
}

.hero .eyebrow {
  color: var(--hero-accent);
}

.hero .eyebrow::before {
  background: var(--jade-bright);
}

.hero .display {
  color: var(--hero-ink);
}

/* v8 (ADR-0084): the real "from <price>/day" fragment of the H1 (see `renderHomeHeading`) reads
   as a distinct accent, reusing the already-AA-checked hero-accent pair (8.46 on hero-bg-1,
   7.69 on hero-bg-2 -- ADR-0082's table) rather than introducing a new colour for this text. */
.display-price {
  color: var(--hero-accent);
}

.hero .lede {
  color: var(--hero-muted);
}

.hero .notice {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
  color: var(--hero-ink);
}

.hero .notice strong {
  color: var(--hero-ink);
}

/* Hero primary/secondary CTA pair (ADR-0082 follow-up). The default `.button` fill (`--deep`,
   near-black) would nearly vanish against the equally dark hero gradient, so the hero's primary
   action inverts to a solid white fill -- ink-strong-on-white already carries the theme's base
   body-text AA pairing (18.46), so no new colour/contrast pair is introduced. The secondary
   ghost action mirrors `.hero .notice`'s translucent-white-on-dark treatment (white/hero-bg-1
   19.59, white/hero-bg-2 17.80 already covers this pairing above). */
.hero .button {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ink-strong);
}

.hero .button:hover {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--ink-strong);
}

.hero .ghost-button {
  background: rgb(255 255 255 / 0.08);
  color: var(--hero-ink);
  border-color: rgb(255 255 255 / 0.32);
}

.hero .ghost-button:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.55);
  color: var(--hero-ink);
}

.hero .hero-figure .photo-credit {
  color: var(--hero-muted);
}

.hero .hero-figure .photo-credit a {
  color: var(--hero-ink);
}

/* v8 (ADR-0084): honest trust microcopy moves from a quiet paper-coloured line under the search
   strip to a full-width ORANGE band directly under the header, matching the reference pattern's
   colour-coded trust strip. White text/icons on --orange-strong is 4.94:1 (AA) -- see the :root
   comment for the full pair table. Still exactly the same four already-true platform claims,
   said once, never a fabricated stat. */
.trust-line {
  padding: 0.85rem 0;
  background: var(--orange-strong);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hero-trust li + li::before {
  content: "\00B7";
  color: rgb(255 255 255 / 0.6);
  font-weight: 600;
}

/* Same one-style line-icon language as the price-transparency `.value-icon` cards (v7,
   ADR-0082 follow-up) -- no emoji, a single stroke-icon system reused across both surfaces. */
.trust-icon {
  display: inline-flex;
  flex: none;
  color: #ffffff;
}

/* v8 (ADR-0084): compact real-number chips inside the dark hero copy column (published-vehicle
   and pickup-point counts -- the same server-computed figures the stats-strip section below
   renders in full; never a separate/invented count). Same translucent-white-on-dark treatment
   as `.hero .notice`, so no new contrast pair is introduced (white/hero-bg-1 19.59, white/
   hero-bg-2 17.80 already cover this). */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
  background: rgb(255 255 255 / 0.08);
  color: var(--hero-ink);
  font-size: 0.86rem;
}

.hero-stats strong {
  font-family: var(--display);
  font-size: 1.05rem;
  color: #ffffff;
}

.display,
.editorial-title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.display {
  max-width: 17ch;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
}

.editorial-title {
  max-width: 900px;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4.1rem);
}

h1,
h2,
h3,
legend {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lede {
  max-width: 640px;
  margin-top: 1.15rem;
  color: var(--muted);
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.32rem);
  line-height: 1.55;
}

/* No CSS text-transform here (v7 follow-up: fixes a live Turkish uppercasing defect). Literal
   eyebrow copy is typed uppercase directly in source, so it needs no transform. Company/supplier
   names are the other kind of eyebrow content, and they are NOT case-transformed at all --
   CSS's uppercasing algorithm cannot be relied on to apply Turkish-specific casing (dotted İ /
   dotless ı) to arbitrary text, and a server-side locale uppercase has the opposite failure mode
   (it would incorrectly Turkish-dot the "i" in a non-Turkish brand/company name, e.g. "Nissan"
   -> "NİSSAN"). Rendering these names exactly as the supplier entered them is the only
   transform that can never corrupt either kind of text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  color: var(--sea);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--sun);
}

.hero-actions {
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.1rem;
}

.notice,
.status-banner,
.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-tight);
  padding: 0.95rem 1.1rem;
  background: var(--paper-2);
  color: var(--ink);
}

.hero-visual {
  position: relative;
  height: 100%;
}

.hero-figure {
  position: relative;
  margin: 0;
  height: 100%;
}

.card-photo img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

/* Edge-bleed photo: no border, no floating-card shadow -- it reads as part of the page edge,
   not a card. Rounded only on the inward (left) corners; the right/top/bottom edges are flush
   with the hero section and the viewport. */
.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.photo-credit,
figcaption {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.hero-figure .photo-credit {
  margin-right: var(--shell-gutter);
  color: var(--muted);
}

/* ---------- Card surfaces ---------- */
.offer-card,
.form-card,
.summary-card,
.process-card,
.value-card,
.showcase-card,
.service-card,
.location-card,
.editorial-card,
.empty-state,
.source-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
}

/* ---------- Search widget ---------- */
/* v8 (ADR-0084): the search panel no longer sits in its own full-width strip -- it is the white
   `.reservation-card` inside the navy `.reservation-band` (below). On a location-landing page the
   same `.search-panel` form still sits inside an ordinary content section (no extra chrome
   there -- the section around it supplies the surface). */
.search-panel {
  position: relative;
  color: var(--ink);
}

fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  display: block;
  margin-bottom: 1rem;
  padding-top: 0.35rem;
  color: var(--ink-strong);
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.1;
}

.search-grid,
.form-grid,
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.reservation-card .search-grid {
  align-items: end;
}

.location-field {
  grid-column: 1 / -1;
}

/* "Sürücü bilgileri" disclosure: driver age + licence-held-months. Open by default (both
   fields are `required`), so the panel only saves vertical rhythm on a wide screen where the
   primary row already reads clearly without them -- it never hides a mandatory field. */
.driver-details {
  margin-top: 0.9rem;
}

.driver-details summary {
  color: var(--sea-strong);
  font-size: 0.92rem;
}

.driver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.field {
  margin: 0;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

input,
select,
textarea {
  min-height: var(--target);
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-tight);
  padding: 0.68rem 0.8rem;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--sans);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* A real, un-overridable focus outline on every field (WCAG 2.4.7): `select:focus` outranks
   `:focus-visible`, so fields keep an explicit indicator for keyboard and pointer alike. */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgb(12 115 117 / 0.16);
}

small,
.muted,
.search-footnote {
  color: var(--muted);
}

/* v8 (ADR-0084): the primary "find a car" action becomes the palette's red accent everywhere it
   appears (homepage reservation card + location-landing search panel) -- white text on --red is
   5.74:1, hover --red-strong is 8.29:1, both comfortably AA. */
.search-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 1.15rem;
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  font-size: 1.05rem;
}

.search-submit:hover {
  background: var(--red-strong);
  border-color: var(--red-strong);
  color: #ffffff;
}

/* ---------- v8 (ADR-0084) navy reservation band ---------- */
/* A full-width navy band carrying the same real search-panel form (now inside a white card,
   flush with `.search-panel`'s own AA-checked ink-on-white text) plus an honest 3-step
   explanation of how a booking request actually works on this marketplace -- no "instant
   confirmation" claim, since booking type is per-listing (ON_REQUEST or INSTANT_CONFIRMATION)
   and the marketplace never promises the latter site-wide. */
.reservation-band {
  padding: clamp(2.4rem, 5vw, 4.2rem) 0;
  background: var(--navy);
  color: #ffffff;
}

.reservation-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(280px, 5fr);
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
  align-items: start;
}

.reservation-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow-3);
}

.reservation-card legend {
  color: var(--ink-strong);
}

.reservation-info {
  padding-top: 0.4rem;
}

.reservation-info .eyebrow {
  color: var(--orange);
}

.reservation-info .eyebrow::before {
  background: var(--orange);
}

/* Orange/navy 5.38:1 (AA) -- see the :root pair table. */
.reservation-heading {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.12;
  color: #ffffff;
}

.reservation-heading em {
  font-style: italic;
  color: var(--orange);
}

.reservation-steps {
  display: grid;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservation-steps li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.reservation-steps .step-index {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.35);
  color: var(--orange);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
}

.reservation-steps h3 {
  margin: 0 0 0.2rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.reservation-steps p {
  margin: 0;
  color: var(--hero-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .reservation-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- v8 (ADR-0084) "why us" band ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.why-card {
  padding: 1.3rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.why-card .value-icon {
  margin-bottom: 0.7rem;
}

/* Four already-AA-checked fills (white/orange-strong 4.94, white/navy 16.52, white/red 5.74,
   white/jade 5.35 -- the last from ADR-0082's table) rotate across the four cards. */
.why-card:nth-of-type(1) .value-icon {
  background: var(--orange-strong);
  color: #ffffff;
}

.why-card:nth-of-type(2) .value-icon {
  background: var(--navy);
  color: #ffffff;
}

.why-card:nth-of-type(3) .value-icon {
  background: var(--red);
  color: #ffffff;
}

.why-card:nth-of-type(4) .value-icon {
  background: var(--jade);
  color: #ffffff;
}

.why-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
}

.why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .why-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(2.4rem, 6vw, 7rem) 0;
}

/* Branded 404: give the short error page enough vertical presence to not float the footer up. */
.error-shell {
  display: grid;
  align-content: center;
  min-height: 46vh;
}

.section-tint {
  background: var(--paper-2);
  border-block: 1px solid var(--border);
}

.section-head,
.compact-head {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.5rem;
}

.section-head h2 {
  margin: 0;
  max-width: 780px;
  color: var(--ink-strong);
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.section-head p {
  max-width: 460px;
  color: var(--muted);
}

.trust-grid,
.process-grid,
.value-grid,
.showcase-grid,
.service-grid,
.location-grid,
.editorial-grid,
.offer-list {
  display: grid;
  gap: 1rem;
}

.trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust-grid article {
  border-left: 3px solid var(--sea);
  padding: 0.2rem 0 0.2rem 1rem;
}

.trust-grid strong,
.trust-grid span {
  display: block;
}

.trust-grid strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.trust-grid span {
  color: var(--muted);
}

.process-grid,
.value-grid,
.showcase-grid,
.service-grid,
.location-grid,
.editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-card,
.value-card,
.showcase-card,
.service-card,
.location-card,
.editorial-card,
.empty-state,
.source-box {
  padding: 1.3rem;
  box-shadow: var(--shadow-1);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.process-card:hover,
.value-card:hover,
.showcase-card:hover,
.service-card:hover,
.location-card:hover,
.editorial-card:hover {
  /* v7 (ADR-0082): a deeper, richer hover shadow than v6's -- the flat/restrained-shadow house
     rule was aesthetic-only and is lifted for this pass. */
  transform: translateY(-4px);
  box-shadow: var(--shadow-4);
  border-color: var(--border-2);
}

.value-icon {
  box-shadow: var(--shadow-1);
}

.value-card:nth-of-type(1) .value-icon {
  background: var(--jade);
  color: #ffffff;
}

.value-card:nth-of-type(2) .value-icon {
  background: var(--sea-strong);
  color: #ffffff;
}

.value-card:nth-of-type(3) .value-icon {
  background: var(--gold-strong);
  color: #ffffff;
}

.process-card span,
.value-index,
.location-type,
.editorial-card span {
  color: var(--sea);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.value-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  border-radius: 12px;
  background: var(--sun);
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 1.1rem;
}

.showcase-card {
  display: grid;
  gap: 0.85rem;
}

.card-photo {
  margin: 0;
}

.showcase-card ul,
.market-section ul,
.site-footer ul {
  padding-left: 1.15rem;
}

/* ---------- Offers ---------- */
.results-panel {
  display: grid;
  gap: 1rem;
}

.offer-filters {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.filter-check {
  align-self: end;
}

.filter-check label {
  display: flex;
  min-height: var(--target);
  align-items: center;
  gap: 0.55rem;
  text-transform: none;
  font-family: var(--sans);
  font-size: 1rem;
}

.filter-check input {
  width: auto;
  min-height: auto;
}

.offer-list {
  grid-template-columns: 1fr;
}

.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 1rem;
  padding: 1.15rem;
  box-shadow: var(--shadow-1);
}

.quick-terms {
  display: grid;
}

.offer-details summary {
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

/* ---------- Catalogue ---------- */
.catalogue-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}

/* ---------- Fleet slider (v7, ADR-0082): manual, click/swipe-only vehicle showcase ----------
   The house preference for a static grid was aesthetic-only and is lifted; the a11y rules it
   sat next to are not -- this stays keyboard-operable (native scroll container, `tabindex="0"`,
   arrow-key scroll is the browser default on a scrollable region) and NEVER autoplays: the track
   only moves in response to a click on `.fleet-slider-btn` or the user's own touch/trackpad
   scroll (`slider.v1.js`). `scroll-snap` gives a clean, honest resting position between cards; no
   library, `classList`/`scrollBy`-only JS (see `slider.v1.js`). */
.fleet-slider {
  position: relative;
  margin-top: 1.4rem;
}

.fleet-slider-track.catalogue-grid {
  display: flex;
  grid-template-columns: unset;
  gap: 1.1rem;
  margin-top: 0;
  padding-bottom: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--shell-gutter);
  -webkit-overflow-scrolling: touch;
}

.fleet-slider-track .listing-card {
  /* `.listing-card`'s normal 3-column grid needs ~550-600px to lay out without overlap (it only
     collapses to 1 column under the 900px page breakpoint, below); a slider card is always
     narrower than that, at any page width, so force the single-column stack unconditionally
     here regardless of viewport. */
  flex: 0 0 min(88vw, 360px);
  grid-template-columns: 1fr;
  scroll-snap-align: start;
}

.fleet-slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.fleet-slider-btn {
  display: inline-grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: var(--paper-2);
  color: var(--ink-strong);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.16s ease;
}

.fleet-slider-btn:hover:not(:disabled) {
  background: var(--deep);
  color: #ffffff;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.fleet-slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Stats strip (v7, ADR-0082): honest, server-computed counters ---------- */
.stats-strip {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.stat {
  display: grid;
  gap: 0.3rem;
  padding: 1.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
}

.stat-number {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  color: var(--jade-strong);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.catalogue-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.32fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

.catalogue-sidebar {
  position: sticky;
  top: 88px;
}

.catalogue-filter-sheet,
.catalogue-status {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.catalogue-filter-sheet {
  padding: 0.95rem;
  box-shadow: var(--shadow-1);
}

.catalogue-filter-sheet summary {
  display: flex;
  min-height: var(--target);
  align-items: center;
  color: var(--sea-strong);
  font-weight: 600;
}

.catalogue-filters {
  display: grid;
  gap: 1rem;
  margin-top: 0.85rem;
}

.catalogue-filters fieldset {
  display: grid;
  gap: 0.85rem;
}

.filter-actions,
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.filter-actions > *,
.empty-actions > * {
  min-width: var(--target);
}

.catalogue-status {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow-1);
}

.catalogue-status p {
  margin: 0;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.active-filters li {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: var(--paper-2);
  color: var(--ink-strong);
  font-size: 0.82rem;
  font-weight: 600;
}

.catalogue-results {
  min-width: 0;
}

.catalogue-results h2 {
  margin-top: 0;
  font-family: var(--display);
}

/* ---------- Listing card ---------- */
.listing-card {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(230px, 250px);
  gap: 1.15rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-2);
}

.listing-media {
  margin: 0;
}

.listing-media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-tight);
  border: 1px solid var(--border-2);
}

.listing-media-empty {
  display: grid;
  gap: 0.6rem;
  min-height: 180px;
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-tight);
  background: var(--sand);
  color: var(--muted);
  text-align: center;
}

.listing-media-empty .media-placeholder-icon {
  width: 40px;
  height: 40px;
  color: var(--border-2);
}

.listing-media-empty span {
  font-size: 0.82rem;
  font-weight: 500;
}

/* Category-representative photo (v8 image pass): shown instead of the plain car-outline
   placeholder when a listing has no real supplier photo but its category maps to a stock
   representative image. The "Temsili görsel"/"Representative image" badge sits ON the photo
   (never removed) -- the honesty requirement is that a visitor can never mistake this for the
   actual vehicle. An OPAQUE `--ink-strong` pill (not a translucent overlay) is used so contrast
   against the badge text is a fixed, always-AA pair (white/ink-strong ~19:1) regardless of what
   the underlying photo looks like. */
.listing-media-representative {
  /* `.listing-card` is a 3-column CSS grid, whose items default to `align-self: stretch` -- without
     overriding it here, this box would stretch to the full (taller, text-driven) row height while
     the `<img>` keeps its own fixed `aspect-ratio`, leaving a blank gap below the photo with the
     absolutely-positioned badge floating in it instead of sitting on the image. */
  align-self: start;
  position: relative;
  margin: 0;
}

.listing-media-representative img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-tight);
  border: 1px solid var(--border-2);
}

.listing-media-representative .representative-badge {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--ink-strong);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.listing-card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
}

.listing-price {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  border-left: 1px solid var(--border);
  padding-left: 1.15rem;
}

.price-breakdown {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

/* Stacked (label above value) rather than side-by-side: the price rail is narrow
   (230-250px) and some values ("Tarih seçilince hesaplanır"/"Calculated after dates are
   selected") are long enough that a side-by-side auto column let the value overlap the label
   instead of wrapping cleanly. */
.price-breakdown div {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.price-breakdown dd {
  text-align: left;
  font-family: var(--mono);
}

.listing-quote-form {
  display: grid;
  gap: 0.65rem;
}

.listing-quote-form button {
  width: 100%;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.3rem;
}

.offer-card h3,
.showcase-card h3,
.process-card h3,
.value-card h3,
.service-card h3,
.location-card h3,
.editorial-card h3 {
  margin: 0.35rem 0;
  color: var(--ink-strong);
  font-family: var(--display);
}

/* ---------- Specs / terms / price panel ---------- */
.vehicle-specs,
.quick-terms,
.terms-grid,
.price-panel dl,
.summary-card dl,
.form-card dl {
  display: grid;
  gap: 0.55rem;
}

.vehicle-specs,
.quick-terms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0;
}

.rental-terms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 0;
}

/* Catalogue/homepage card chip-density pass (v7 follow-up): the card's top row is the four core
   specs only (category/transmission/fuel/seats -- doors/luggage stay detail-page-only), and the
   three decision-critical policy rows below sit in one row rather than the full spec grid's
   default 3/2-column wrap, so the hierarchy reads as "top row, then policy row, then a link"
   instead of one long undifferentiated chip list. */
.listing-card .vehicle-specs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-terms-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.terms-detail-link {
  margin-top: 0.6rem;
}

.terms-groups {
  display: grid;
  gap: 1.1rem;
  margin-top: 1rem;
}

.terms-group h3 {
  margin: 0 0 0.55rem;
  color: var(--sea-strong);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.terms-group dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

/* Sticky search-summary bar above the catalogue results: current pickup/dates + a "change"
   link back to #search. Thin, quiet, never covers content on small screens. */
.catalogue-summary-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-tight);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
  font-size: 0.9rem;
}

.catalogue-summary-bar strong {
  color: var(--ink-strong);
}

.vehicle-specs div,
.quick-terms div,
.terms-grid div {
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-tight);
  background: var(--paper);
}

dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

dd {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 600;
}

details {
  margin-top: 1rem;
}

summary {
  min-height: var(--target);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--sea-strong);
  font-weight: 600;
}

.price-panel {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  border-left: 1px solid var(--border);
  padding-left: 1.15rem;
}

.price-total {
  margin: 0;
}

.price-total span,
.price-daily,
.pay-split {
  color: var(--muted);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.price-total strong {
  display: block;
  color: var(--ink-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* ---------- Checkout ---------- */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 1rem;
}

.form-card,
.summary-card {
  padding: 1.3rem;
}

.form-card h2,
.summary-card h2 {
  font-family: var(--display);
}

.summary-card {
  position: sticky;
  top: 88px;
  align-self: start;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
}

/* Native ::marker counters are unreliable once an <ol> becomes a flex container (the browser still
   generates the marker box but cannot position it in outside-list flow, so it overlaps the start of the
   list item text — e.g. "1. Talep gönderilir" collides with the next item's "2."). Drop the native marker
   and render the step number as explicit counter content instead so it always sits cleanly before the
   text, at every viewport width. */
.process-mini {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  counter-reset: process-step;
}

.process-mini li {
  counter-increment: process-step;
}

.process-mini li::before {
  content: counter(process-step) ". ";
  font-weight: 600;
}

/* ---------- Blog ---------- */
.blog-article {
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
}

.blog-article h1 {
  font-family: var(--display);
}

.source-box {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  background: var(--paper-2);
}

/* Guide/blog source links are raw citation URLs with no natural break points; at narrow widths
   (<= 390px) an unbroken URL is wider than the card and pushes the whole page into horizontal
   scroll. Let long link text wrap at any character once it no longer fits. */
.source-box a {
  overflow-wrap: anywhere;
}

/* Byline strip (author / reviewer / updated) in the ticket-print voice, dot-separated. */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.4rem 0 1rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.article-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.article-meta > * + *::before {
  content: "\00B7";
  margin-right: 0.55rem;
  color: var(--border-2);
  font-weight: 600;
}

/* `summary { display: flex }` suppresses the native disclosure marker, so draw our own:
   a teal "+" that turns into a minus when the panel is open (CSS-generated — the summary's
   DOM text stays byte-identical to any JSON-LD question name). `:not(.nav-toggle)` excludes the
   header's hamburger `<summary>` (v8 sweep bugfix) -- it already draws its own icon
   (`.nav-toggle-icon`) and this generic FAQ-accordion "+" was leaking in front of it. */
summary:not(.nav-toggle)::before {
  content: "+";
  margin-right: 0.55rem;
  color: var(--sea);
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1;
}

details[open] > summary:not(.nav-toggle)::before {
  content: "\2212";
}

/* ---------- Homepage FAQ ---------- */
.faq-list {
  display: grid;
  gap: 0.15rem;
  max-width: 780px;
}

.faq-list details {
  margin-top: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.faq-list details p {
  margin: 0.6rem 0 0.15rem 1.55rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(2.6rem, 5vw, 3.6rem) 0 1.6rem;
  background: var(--deep);
  color: var(--bone-muted);
  font-size: 0.92rem;
}

/* v7 (ADR-0082): a thin gradient signal bar replaces the flat 1px border-top -- purely
   decorative (aria-hidden via `::before`, no content), previously banned by the aesthetic-only
   gradient ban. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sea) 0%, var(--hero-accent) 35%, var(--jade-bright) 70%, var(--sun) 100%);
}

.footer-grid nav:nth-of-type(2) h2 {
  color: var(--jade-bright);
}

.footer-grid nav:nth-of-type(3) h2 {
  color: var(--hero-accent);
}

.site-footer a {
  color: var(--bone-muted);
}

.site-footer a:hover {
  color: #ffffff;
}

.site-footer .brand,
.site-footer h2 {
  color: #ffffff;
}

.site-footer p {
  color: var(--bone-muted);
}

.site-footer h2 {
  font-family: var(--display);
}

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum): stacked footer/market list links keep a >=24px
   clickable box plus spacing (list items, not primary actions). */
.market-section li a,
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 0.25rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 1.5rem;
}

.footer-grid h3,
.footer-grid h4 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  color: var(--bone-muted);
  font-size: 0.8rem;
}

/* ---------- Product layer: price-anatomy accents, closing band ---------- */
.value-grid-premium .value-index {
  color: var(--sea);
}

/* Directional affordance on teaser links — an arrow that steps right on hover/focus. */
.text-link::after,
.location-card a::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.text-link:hover::after,
.location-card a:hover::after,
.location-card:hover a::after,
.location-card a:focus-visible::after {
  transform: translateX(4px);
}

.location-card a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-weight: 600;
  color: var(--sea-strong);
  text-decoration: none;
}

.location-card:hover {
  border-color: var(--sea);
}

/* First trip-planning teaser leads as a wider editorial feature. */
.editorial-masonry .editorial-card:first-child {
  grid-column: span 2;
}

.editorial-card {
  position: relative;
  overflow: hidden;
}

.editorial-card::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 3px;
  background: var(--sea);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.editorial-card:hover::after,
.editorial-card:focus-within::after {
  transform: scaleX(1);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid,
  .offer-card,
  .listing-card,
  .catalogue-layout,
  .checkout-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Below the 900px breakpoint the hero stacks to one column -- return to the shell's own
     symmetric gutters instead of the desktop edge-bleed inset, and let the photo take a
     shorter, natural ratio instead of the desktop 4/5 portrait crop. */
  .hero-grid {
    padding-left: var(--shell-gutter);
    padding-right: var(--shell-gutter);
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero-photo {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-radius: var(--radius-lg);
  }

  .price-panel,
  .listing-price {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 1rem;
  }

  .catalogue-sidebar,
  .summary-card {
    position: static;
  }

  .trust-grid,
  .process-grid,
  .value-grid,
  .showcase-grid,
  .service-grid,
  .location-grid,
  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-head {
    display: block;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(100% - 1rem, var(--shell-max));
  }

  .nav-toggle {
    display: inline-flex;
    min-width: var(--target);
    min-height: var(--target);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 999px;
    color: var(--ink);
  }

  .nav-toggle:hover,
  .nav-disclosure[open] .nav-toggle {
    background: var(--sand);
  }

  .nav-disclosure[open] .nav-toggle-icon {
    background: transparent;
  }

  .nav-disclosure[open] .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-disclosure[open] .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .nav-shell {
    flex-wrap: wrap;
  }

  .nav-disclosure {
    display: block;
  }

  .nav-actions {
    order: 4;
    width: 100%;
  }

  .nav-disclosure:not([open]) ~ .nav-actions {
    display: none;
  }

  .nav-disclosure[open] ~ .nav-actions {
    display: grid;
    width: 100%;
    align-items: stretch;
    /* `.nav-actions`'s base `justify-content: flex-end` (a flexbox value) carries over to this
       `display: grid` state and right-aligns the single implicit column to content width instead
       of spanning the row -- `stretch` makes the open mobile menu's links fill the full width. */
    justify-content: stretch;
  }

  .nav-actions a {
    width: 100%;
  }

  .search-grid,
  .form-grid,
  .filter-grid,
  .trust-grid,
  .process-grid,
  .value-grid,
  .showcase-grid,
  .service-grid,
  .location-grid,
  .editorial-grid,
  .vehicle-specs,
  .quick-terms,
  .rental-terms,
  .listing-card .vehicle-specs,
  .rental-terms-compact {
    grid-template-columns: 1fr;
  }

  .footer-bottom,
  .hero-actions {
    display: grid;
  }
}

/* ---------- Motion (v6, ADR-0081): restrained, scroll-triggered entrances -----------
   Transform/opacity only — never a property that affects layout — so this never moves the
   Cumulative Layout Shift needle. `.reveal` starts fully VISIBLE: a page with JS disabled,
   blocked, or motion.v1.js failing to load never hides content. motion.v1.js is the only thing
   that arms the hidden-then-reveal state (`html.reveal-armed`), and only once it has confirmed
   prefers-reduced-motion is NOT set; it then flips `.is-visible` per element via
   IntersectionObserver as each one scrolls into view. */
.reveal {
  opacity: 1;
  transform: none;
}

/* `visibility: hidden` (not opacity alone) marks the pre-reveal state: automated contrast
   checks (and screen readers) correctly treat visibility-hidden text as "not currently
   rendered" instead of flagging a near-1 foreground/background contrast ratio for text that a
   sighted user simply has not scrolled to yet. Visibility flips to `visible` the instant
   `.is-visible` is added — only opacity/transform animate. */
html.reveal-armed .reveal {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

html.reveal-armed .reveal.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* Sticky header settles into a slightly shorter bar past the first scroll — motion.v1.js
   toggles this class on `[data-site-header]` past a small threshold. Scroll-driven shifts
   inside the browser's 500ms user-input window are excluded from CLS by definition. */
.site-header {
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-1);
}

.nav-shell {
  transition: min-height 0.25s ease;
}

.site-header.is-scrolled .nav-shell {
  min-height: 60px;
}

/* Hero soft entrance — pure CSS keyframe, no JS dependency, plays once on load. Transform-only
   (never opacity): an opacity dip that is still mid-transition at the exact instant an
   automated contrast scan (or a user's screen) samples it would read as a false "text is
   unreadable" state, so the entrance only ever repositions, never fades. */
@keyframes hero-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

.hero-copy,
.hero-visual-bleed {
  animation: hero-rise 0.7s ease both;
}

.hero-visual-bleed {
  animation-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .process-card:hover,
  .value-card:hover,
  .showcase-card:hover,
  .service-card:hover,
  .location-card:hover,
  .editorial-card:hover,
  .listing-card:hover {
    transform: none;
  }

  .reveal,
  html.reveal-armed .reveal {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header.is-scrolled .nav-shell {
    min-height: 76px;
  }
}