/* ==========================================================================
   Standard theme - site stylesheet
   Reads design-tokens.css. No raw colour, font, size or spacing value below.
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  img, svg, video { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  summary { cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
  table { border-collapse: collapse; width: 100%; }
  /* A component that sets display would otherwise show what the markup hides (2026-09-28). */
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--bg-page);
    color: var(--fg-body);
    font-family: var(--f-body);
    font-size: var(--fs-2);
    line-height: var(--lh-body);
    font-weight: 400;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--f-display);
    color: var(--fg-strong);
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    font-weight: 800;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-6); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-5); }
  h3 { font-size: var(--fs-4); font-weight: 700; }
  h4 { font-size: var(--fs-3); font-weight: 700; }
  p  { text-wrap: pretty; }

  a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
  a:hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--fg-mark); color: var(--c-ink-950); }

  /* every digit that can change is tabular; only codes (flight, plate) stay monospaced */
  .num, time, .price, .code {
    font-family: var(--f-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .code { font-family: var(--f-mono); }

  .label {
    font-family: var(--f-data);
    font-size: var(--fs-0);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--fg-faint);
    font-weight: 500;
  }

  .lede { font-size: var(--fs-3); color: var(--fg-muted); max-width: var(--measure); }
  .muted { color: var(--fg-muted); }
  .mark { color: var(--fg-mark); }
}

/* ==========================================================================
   LAYOUT - the shell, the bands, the rhythm
   ========================================================================== */
@layer layout {
  .shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
  }
  .shell-wide { width: min(100% - (var(--gutter) * 2), var(--shell-wide)); margin-inline: auto; }

  /* The five alternating grounds. One ground for the whole page is the defect
     this page exists to avoid - see memory.md 2026-09-02. */
  .band {
    position: relative;
    padding-block: var(--section-y);
    background: var(--bg-page);
    color: var(--fg-body);
  }
  .band--sunken  { background: var(--c-ink-900); }
  .band--raised  { background: var(--c-ink-800); }
  .band--paper   { background: var(--bg-page); color: var(--fg-body); }
  .band--deep    { background: var(--c-ink-950); }

  .band + .band { border-top: 1px solid var(--rule-color); }

  .band-head {
    display: grid;
    gap: var(--sp-3);
    margin-block-end: var(--sp-7);
    max-width: 62ch;
  }
  .band-head .label { color: var(--fg-action); }

  .split {
    display: grid;
    gap: var(--sp-6) var(--sp-8);
    grid-template-columns: 1fr;
  }
  @media (min-width: 60rem) {
    .split--head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
    .split--head .band-head { margin-block-end: 0; }
  }

  .rule { height: 1px; background: var(--rule-color); border: 0; }
}

/* ==========================================================================
   GROUND LAYER - atmosphere. Never competes, never over text.
   ========================================================================== */
@layer layout {
  .ground {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .ground__field {
    position: absolute; inset: -20%;
    background:
      radial-gradient(760px 420px at 14% -8%,  var(--atmo-1), transparent 70%),
      radial-gradient(900px 560px at 92% 12%,  var(--atmo-2), transparent 72%);
  }

  .ground__grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right,  var(--atmo-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--atmo-grid) 1px, transparent 1px);
    background-size: var(--sp-8) var(--sp-8);
    mask-image: radial-gradient(130% 90% at 50% 0%, #000 0%, transparent 70%);
  }

  .ground__grain {
    position: absolute; inset: 0;
    opacity: .045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .on-paper .ground__grain { mix-blend-mode: multiply; opacity: .035; }

  /* the Istanbul night line, generated - sits at the foot of the hero */
  .ground__skyline {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: clamp(90px, 16vw, 210px);
    color: var(--c-ink-700);
    opacity: .55;
    mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  }
  .ground__skyline svg { width: 100%; height: 100%; }

  .band > .shell, .band > .shell-wide { position: relative; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
@layer components {
  .topbar {
    background: var(--c-ink-950);
    border-block-end: 1px solid var(--border-hair);
    font-size: var(--fs-0);
  }
  .topbar__in {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
    align-items: center; justify-content: space-between;
    padding-block: var(--sp-2);
  }
  .topbar .label { color: var(--fg-faint); }
  .topbar strong { color: var(--fg-muted); font-weight: 500; }
  /* The phone, then the language and the currencies (2026-10-03: moved up from the header, so the
     header holds the menu and the two buttons). Drawn in the bar's own text colour, so the same
     rules serve a dark bar and a light one; the list that drops down keeps its own surface. */
  .topbar__end { display: flex; align-items: center; gap: var(--sp-4); margin-inline-start: auto; }
  .topbar .lang__btn { color: inherit; padding: 2px var(--sp-2); border-color: color-mix(in srgb, currentColor 35%, transparent); }
  .topbar .lang__btn:hover, .topbar .lang__btn[aria-expanded="true"] { border-color: currentColor; }
  .topbar .lang__chev { color: inherit; }
  .topbar .cur { border-color: color-mix(in srgb, currentColor 35%, transparent); }
  .topbar .cur button { color: inherit; min-height: 1.5rem; }
  /* An agency's social accounts beside the phone (2026-10-14), in the bar's own text colour. */
  .topbar .social { display: flex; align-items: center; gap: var(--sp-1); }
  .topbar .social a {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill);
    color: inherit; transition: background var(--dur-fast) var(--ease-out);
  }
  .topbar .social a:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
  .topbar .social svg { width: 16px; height: 16px; }
  .topbar .cur button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }

  .header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--c-ink-950) 88%, transparent);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--border-hair);
  }
  .header__in {
    display: flex; align-items: center; gap: var(--sp-5);
    min-height: var(--nav-h);
  }

  .logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-inline-end: auto; }
  .logo__mark { width: 30px; height: 30px; color: var(--fg-mark); flex: none; }
  .logo__text {
    font-family: var(--f-display); font-weight: 800;
    letter-spacing: .04em; font-size: var(--fs-3); color: var(--fg-strong);
  }
  .logo__text span { color: var(--fg-mark); }
  /* An agency's own logo picture (TenantLook.logo, 2026-10-13): the dark-ground copy in the footer. */
  .logo__img { display: block; height: 40px; width: auto; flex: none; }
  .logo__img--dark, .footer .logo__img { display: none; }
  .footer .logo__img--dark { display: block; }
  @media (max-width: 30rem) { .header .logo__img { height: 32px; } }
  .namecard__img { display: block; height: 28px; width: auto; margin-inline: auto; }

  .nav { display: none; gap: var(--sp-5); }
  .nav a {
    text-decoration: none; font-size: var(--fs-1); color: var(--fg-muted);
    padding-block: var(--sp-2); position: relative;
  }
  .nav a::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    height: 1px; background: var(--fg-mark); scale: 0 1; transform-origin: left;
    transition: scale var(--dur-fast) var(--ease-out);
  }
  .nav a:hover { color: var(--fg-body); }
  .nav a:hover::after { scale: 1 1; }
  @media (min-width: 62rem) { .nav { display: flex; } }

  .header__tools { display: flex; align-items: center; gap: var(--sp-3); }

  /* The passenger's currency (2026-09-27): the ones the agency offers, as pressed buttons, beside
     the language and again above the vehicles. Built by site.js only when there are two or more. */
  .cur { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-subtle); border-radius: var(--r-pill); }
  .cur button {
    font-family: var(--f-data); font-size: var(--fs-0); line-height: 1; letter-spacing: .02em;
    min-width: 2.25rem; min-height: 2rem; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); color: var(--fg-muted);
  }
  .cur button:hover { color: var(--fg-strong); }
  .cur button[aria-pressed="true"] { background: var(--bg-inset); color: var(--fg-strong); font-weight: 700; }
  .cur .cur__code { display: none; }
  .cur--wide { margin-block-start: var(--sp-2); }
  .cur--wide .cur__code { display: inline; }
  .panel__head--vehicles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }

  /* Language: only the current code shows; the five languages drop below it as a listbox,
     each with its code and its own name in its own script. Revision 3, 2026-09-21. */
  .lang { position: relative; }
  .lang__btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .06em; line-height: 1;
    color: var(--fg-body); padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .lang__btn:hover, .lang__btn[aria-expanded="true"] { border-color: var(--border-strong); }
  .lang__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--fg-faint); transition: rotate var(--dur-fast) var(--ease-out); }
  .lang__btn[aria-expanded="true"] .lang__chev { rotate: 180deg; }
  .lang__list {
    position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-end: 0; z-index: 60;
    min-width: 7rem; margin: 0; padding: var(--sp-1); list-style: none;
    background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    box-shadow: var(--e-3);
  }
  .lang__list[hidden] { display: none; }
  .lang__list [role="option"] {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    cursor: pointer; color: var(--fg-muted); font-size: var(--fs-1);
  }
  .lang__list [role="option"] b { font-family: var(--f-data); font-size: var(--fs-0); font-weight: 500; letter-spacing: .06em; color: var(--fg-faint); }
  .lang__list [role="option"]:hover, .lang__list [role="option"]:focus-visible { background: var(--bg-inset); color: var(--fg-body); outline: none; }
  .lang__list [role="option"][aria-selected="true"] { color: var(--fg-strong); }
  .lang__list [role="option"][aria-selected="true"] b { color: var(--fg-action); }
  .lang__list [role="option"][aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--fg-action); }
  .lang__list [dir="rtl"] { text-align: start; }
  .drawer .lang__list { inset-inline: 0 auto; }

  .nav-toggle { display: grid; gap: 5px; padding: var(--sp-2); }
  .nav-toggle i { display: block; width: 20px; height: 2px; background: var(--fg-body); border-radius: var(--r-pill); }
  @media (min-width: 62rem) { .nav-toggle { display: none; } }

  .drawer { border-block-start: 1px solid var(--border-hair); background: var(--c-ink-900); }
  .drawer[hidden] { display: none; }
  .drawer a {
    display: block; padding: var(--sp-4) 0; text-decoration: none;
    border-block-end: 1px solid var(--border-hair); color: var(--fg-muted);
  }
  .drawer a:last-child { border-block-end: 0; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-1);
    text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                translate var(--dur-fast) var(--ease-out);
  }
  .btn:active { translate: 0 1px; }

  .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--e-1); }
  .btn--primary:hover { background: var(--btn-primary-bg-h); }

  .btn--ghost { border: 1px solid var(--btn-ghost-border); color: var(--btn-ghost-fg); }
  .btn--ghost:hover { border-color: var(--fg-mark); color: var(--fg-action); }

  .btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-2); }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: .45; pointer-events: none; }

  .btn svg { width: 1.1em; height: 1.1em; flex: none; }
}

/* ==========================================================================
   FIELDS
   ========================================================================== */
@layer components {
  .field { display: grid; gap: var(--sp-2); min-width: 0; }
  .field > .label { color: var(--fg-faint); }

  .field__box {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--r-md);
    padding-inline: var(--sp-4);
    min-height: 52px;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .field__box:has(:focus-visible) { border-color: var(--fg-mark); }
  /* :user-invalid, not :invalid - an empty required time field was red before anyone touched it (2026-09-23) */
  .field__box:has(:user-invalid) { border-color: var(--fg-danger); }
  .field__box svg { width: 18px; height: 18px; color: var(--fg-faint); flex: none; }

  .field__box input,
  .field__box select {
    flex: 1; min-width: 0; background: none; border: 0; outline: 0;
    color: var(--field-fg); padding-block: var(--sp-3); line-height: normal;
    font-size: var(--fs-2);
  }
  .field__box input::placeholder { color: var(--field-placeholder); }
  .field__box input[type="date"],
  .field__box input[type="time"] { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
  .field__box select { appearance: none; cursor: pointer; }
  .field__box select option { background: var(--c-ink-900); color: var(--c-ink-100); }
  .on-paper .field__box select option { background: #FFFFFF; color: var(--c-ink-800); }

  /* The phone's country (phone.js, 2026-10-19, revision 2): the country's flag and a chevron at
     the start of the box, a hairline after it, then the number. The flag opens a list of flags
     and country names with a search on top, drawn like the language list; the code itself is
     only a faint hint at each row's end. */
  .field__box--phone { position: relative; gap: var(--sp-3); }
  .dial { flex: none; align-self: stretch; display: flex; }
  .dial__btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding-inline-end: var(--sp-3); border-inline-end: 1px solid var(--field-border);
    color: var(--field-fg); cursor: pointer;
  }
  .dial__btn:focus-visible { outline: 2px solid var(--fg-mark); outline-offset: 2px; border-radius: var(--r-sm); }
  .field__box .dial__btn svg { width: 14px; height: 14px; color: var(--fg-faint); transition: rotate var(--dur-fast) var(--ease-out); }
  .dial__btn[aria-expanded="true"] svg { rotate: 180deg; }
  .flag {
    flex: none; display: inline-block; width: 24px; height: 18px; border-radius: 3px;
    background-repeat: no-repeat; background-size: 384px 216px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--field-fg) 18%, transparent);
  }
  .dial__pop {
    position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-start: -1px; z-index: 60;
    width: max(calc(100% + 2px), 17rem); max-width: calc(100vw - 16px);
    display: grid; grid-template-rows: auto 1fr; padding: var(--sp-2); gap: var(--sp-2);
    background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    box-shadow: var(--e-3);
  }
  .dial__pop[hidden] { display: none; }
  .field__box .dial__search {
    flex: none; width: 100%; padding: var(--sp-2) var(--sp-3); font-size: 16px;
    color: var(--fg-body); background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  }
  .field__box .dial__search:focus-visible { border-color: var(--fg-mark); }
  .dial__list { max-height: 16.5rem; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; outline: none; }
  .dial__list [role="option"] {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    cursor: pointer; color: var(--fg-muted); font-size: var(--fs-1); line-height: 1.3;
  }
  .dial__list [role="option"][hidden] { display: none; }
  .dial__list [role="option"] b { font-family: var(--f-data); font-size: var(--fs-0); font-weight: 500; color: var(--fg-faint); }
  .dial__list [role="option"]:hover, .dial__list .is-active { background: var(--bg-inset); color: var(--fg-body); }
  .dial__list [role="option"][aria-selected="true"] { color: var(--fg-strong); font-weight: 600; }
  .dial__list .dial__last-pinned { margin-block-end: var(--sp-1); box-shadow: 0 1px 0 var(--border-hair); border-end-start-radius: 0; border-end-end-radius: 0; }
  .dial__list.is-filtered .dial__last-pinned { margin-block-end: 0; box-shadow: none; }

  /* The passenger counter (site.js, 2026-10-17): "-  2  +" in the field's own box, no list.
     Centred as one group, the buttons beside the number (the member, 2026-10-18: spread to the
     box's ends across the whole row it did not look good). */
  .field__box.counter { justify-content: center; gap: var(--sp-3); padding-inline: var(--sp-2); }
  .counter__value {
    flex: none; min-inline-size: 2.5ch; text-align: center; color: var(--field-fg);
    padding-block: var(--sp-3); line-height: normal; font-weight: 600;
    font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: var(--fs-2);
  }
  .counter__btn {
    flex: none; display: grid; place-items: center;
    inline-size: 2rem; block-size: 2rem; border-radius: var(--r-pill);
    border: 1px solid var(--field-border); color: var(--field-fg);
    background: color-mix(in srgb, var(--field-fg) 6%, transparent);
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .counter__btn:hover:not(:disabled) { border-color: var(--fg-mark); }
  .counter__btn:focus-visible { outline: 2px solid var(--fg-mark); outline-offset: 2px; }
  .counter__btn:disabled { opacity: .35; cursor: default; }

  .field__hint { font-size: var(--fs-0); color: var(--fg-faint); }
  .field__hint--warn { color: var(--fg-warn); }
  .field__hint[hidden] { display: none; }

  /* The place picker under Nereden / Nereye (site.js), in place of the browser's datalist
     since 2026-09-26. Drawn like the language menu: the same raised panel and hover. */
  .field--places { position: relative; }
  .places {
    position: absolute; inset-block-start: calc(100% + var(--sp-1)); inset-inline: 0; z-index: 70;
    max-height: min(22rem, 55vh); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: var(--sp-1); list-style: none;
    background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    box-shadow: var(--e-3);
  }
  .places[hidden] { display: none; }
  .places__group {
    position: sticky; inset-block-start: calc(-1 * var(--sp-1)); z-index: 1;
    padding: var(--sp-2) var(--sp-3) var(--sp-1); background: var(--bg-raised);
    font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
  }
  .places [role="option"] {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    min-height: 44px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    cursor: pointer; color: var(--fg-body); font-size: var(--fs-1);
  }
  .places [role="option"]:hover, .places [role="option"][aria-selected="true"] { background: var(--bg-inset); color: var(--fg-strong); }
  .places__name { min-width: 0; }
  .places__name small { display: block; font-size: var(--fs-0); color: var(--fg-faint); }
  .places--grouped .places__tag { display: none; }   /* the heading already says it */
  .places__tag { flex: none; font-size: var(--fs-0); color: var(--fg-faint); white-space: nowrap; }
  .places__note { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-0); color: var(--fg-faint); }

  .check {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
    align-items: start; font-size: var(--fs-1); color: var(--fg-muted);
  }
  .check input { accent-color: var(--fg-mark); width: 18px; height: 18px; margin-block-start: 3px; }
  .check a { color: var(--fg-action); }
}

/* ==========================================================================
   HERO - the signature lives here
   ========================================================================== */
@layer components {
  .hero {
    position: relative;
    padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(3rem, 1rem + 8vw, 7rem);
    background: var(--c-ink-950);
    overflow: hidden;
  }

  .hero__grid {
    position: relative;
    display: grid;
    gap: var(--sp-7);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 64rem) {
    /* copy on the left edge, booker on the right edge, the bridge tower between them */
    .hero__grid { grid-template-columns: minmax(0, 38rem) minmax(0, 26rem); justify-content: space-between; gap: var(--sp-7); }
  }

  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--fg-muted);
  }
  .hero__eyebrow b { color: var(--fg-action); font-weight: 500; }

  .hero h1 { margin-block: var(--sp-5) var(--sp-4); max-width: 17ch; }
  .hero h1 em { font-style: normal; color: var(--fg-mark); }
  .hero__lede { max-width: 50ch; }

  .hero__facts {
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--border-hair);
  }
  .hero__fact { display: grid; gap: var(--sp-1); }
  .hero__fact b {
    font-family: var(--f-data); font-size: var(--fs-3); font-weight: 500;
    color: var(--fg-strong); font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .hero__fact span { font-size: var(--fs-0); color: var(--fg-muted); letter-spacing: .04em; }   /* muted, not faint: the photo sits behind it since revision 3 */
}

/* --- the booking panel: date and time are asked FIRST, not at step 3 --- */
@layer components {
  .booker {
    position: relative;
    background: var(--quote-bg);
    border: 1px solid var(--quote-border);
    border-radius: var(--r-lg);
    box-shadow: var(--e-3);
    padding: var(--sp-5);
    display: grid;
    gap: var(--sp-4);
  }
  .booker::before {
    content: ""; position: absolute; inset-inline: var(--sp-5); inset-block-start: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--atmo-sheen), transparent);
  }
  @media (min-width: 30rem) { .booker { padding: var(--sp-6); } }

  .booker__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .booker__head h2 { font-size: var(--fs-4); }

  .booker__tabs { display: flex; gap: var(--sp-1); background: var(--bg-inset); border-radius: var(--r-pill); padding: var(--sp-1); }
  .booker__tabs button {
    flex: 1; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
    font-size: var(--fs-0); font-weight: 700; color: var(--fg-muted); line-height: 1.4;
  }
  .booker__tabs button[aria-pressed="true"] { background: var(--bg-raised); color: var(--fg-strong); box-shadow: var(--e-1); }
  /* Four tabs when the agency sells tours (2026-09-28): each label on one line, tighter. */
  .booker__tabs:has(> [data-mode="tour"]:not([hidden])) button { flex: 1 1 auto; padding-inline: var(--sp-2); white-space: nowrap; }

  .booker__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
  @media (min-width: 26rem) { .booker__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

  .booker__swap {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle); background: var(--bg-raised);
    color: var(--fg-muted); margin-inline-start: auto; margin-block: calc(var(--sp-2) * -1);
    position: relative; z-index: 1;
  }
  .booker__swap:hover { color: var(--fg-action); border-color: var(--fg-mark); }
  .booker__swap svg { width: 16px; height: 16px; }

  .booker__foot { display: grid; gap: var(--sp-3); font-size: var(--fs-0); color: var(--fg-faint); }
  .booker__foot ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .booker__foot li { display: flex; align-items: center; gap: var(--sp-2); }
  .booker__foot svg { width: 14px; height: 14px; color: var(--fg-ok); flex: none; }
}

/* --- the sample quote card: the signature element --- */
@layer components {
  .quote {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    display: grid; gap: var(--sp-4);
    box-shadow: var(--e-2);
    position: relative;
  }
  .quote__tag {
    position: absolute; inset-block-start: 0; inset-inline-end: var(--sp-5);
    translate: 0 -50%;
    background: var(--c-ok-700); color: var(--c-ink-050);
    border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .quote__tag svg { width: 12px; height: 12px; }

  .quote__route { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center; }
  .quote__leg { display: grid; gap: var(--sp-1); }
  .quote__leg b { font-size: var(--fs-2); color: var(--fg-strong); font-weight: 700; }
  .quote__leg span { font-size: var(--fs-0); color: var(--fg-faint); }

  .quote__line { width: 20px; display: grid; justify-items: center; gap: 3px; padding-block: var(--sp-1); }
  .quote__line i { width: 7px; height: 7px; border-radius: var(--r-pill); border: 1.5px solid var(--fg-route); }
  .quote__line u { width: 1px; flex: 1; min-height: 26px; background: var(--fg-route); opacity: .5; }
  .quote__line i:last-child { background: var(--fg-route); }

  .quote__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-0); color: var(--fg-muted); }
  .quote__meta b { color: var(--fg-route); font-weight: 500; }

  .quote__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-hair);
  }
  .quote__total .price { font-size: var(--fs-5); color: var(--fg-mark); font-weight: 500; letter-spacing: -.02em; }
  .quote__total small { font-size: var(--fs-0); color: var(--fg-faint); display: block; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
@layer components {
  .trust {
    background: var(--c-ink-900);
    border-block: 1px solid var(--border-hair);
    padding-block: var(--sp-5);
  }
  .trust__list {
    display: grid; gap: var(--sp-4) var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .trust__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: center; }
  .trust__item svg { width: 22px; height: 22px; color: var(--fg-mark); flex: none; }
  .trust__item b { display: block; font-size: var(--fs-1); color: var(--fg-body); font-weight: 700; line-height: 1.3; }
  .trust__item span { font-size: var(--fs-0); color: var(--fg-faint); }
}

/* ==========================================================================
   ROUTE TABLE - the price list nobody in this category publishes properly
   ========================================================================== */
@layer components {
  .routes { border: 1px solid var(--border-hair); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); }
  .routes table { font-size: var(--fs-1); }
  .routes th {
    text-align: left; font-family: var(--f-data); font-size: var(--fs-0);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint);
    font-weight: 500; padding: var(--sp-3) var(--sp-4); background: var(--bg-inset);
    border-block-end: 1px solid var(--border-hair); white-space: nowrap;
  }
  .routes td { padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--border-hair); vertical-align: middle; }
  .routes tr:last-child td { border-block-end: 0; }
  .routes tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
  .routes tbody tr:hover { background: var(--bg-inset); }
  .routes .to { color: var(--fg-strong); font-weight: 700; }
  .routes .num { color: var(--fg-route); white-space: nowrap; }
  .routes .price { color: var(--fg-mark); font-weight: 500; white-space: nowrap; }
  .routes .go { color: var(--fg-action); text-decoration: none; font-size: var(--fs-0); white-space: nowrap; font-weight: 700; }
  .routes .go:hover { text-decoration: underline; }
  /* position: relative makes the scroller the containing block of the .sr-only text in the
     last header cell. Without it that absolutely positioned text resolved against .shell,
     escaped the scroller's clip, and widened every page with this table by ~90px at
     500px (measured 2026-09-24: 559 and 573 against a 485 viewport). */
  .routes__scroll { overflow-x: auto; position: relative; }
  .routes__note { margin-block-start: var(--sp-4); font-size: var(--fs-0); color: var(--fg-faint); }

  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
  .chips a {
    border: 1px solid var(--border-hair); border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4); font-size: var(--fs-0); text-decoration: none;
    color: var(--fg-muted); transition: border-color var(--dur-fast) var(--ease-out);
  }
  .chips a:hover { border-color: var(--fg-mark); color: var(--fg-action); }

  /* The popular places tabs (2026-09-28), after the reference site: a strip of tabs, then the
     lines of the chosen one in two columns, each a link with its starting price. */
  .popular__tabs {
    display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    padding-block-end: var(--sp-1); margin-block-end: var(--sp-5);
  }
  .popular__tabs::-webkit-scrollbar { display: none; }
  .popular__tabs [role="tab"] {
    flex: none; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle); background: var(--bg-raised);
    font-size: var(--fs-0); font-weight: 700; color: var(--fg-muted); white-space: nowrap;
  }
  .popular__tabs [role="tab"]:hover { border-color: var(--fg-mark); color: var(--fg-strong); }
  .popular__tabs [role="tab"][aria-selected="true"] { background: var(--fg-action); border-color: var(--fg-action); color: var(--bg-raised); }
  .popular__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-6);
  }
  @media (min-width: 52rem) { .popular__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .popular__list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-2); border-block-end: 1px solid var(--border-hair);
    text-decoration: none; color: var(--fg-body);
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .popular__list a:hover { background: var(--bg-inset); }
  .popular__route { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; font-size: var(--fs-0); }
  .popular__route span:last-child { color: var(--fg-strong); font-weight: 700; }
  .popular__route svg { width: 14px; height: 14px; flex: none; color: var(--fg-faint); }
  [dir="rtl"] .popular__route svg { transform: scaleX(-1); }
  .popular__price { display: grid; justify-items: end; flex: none; line-height: 1.2; }
  .popular__price .price { color: var(--fg-mark); font-weight: 700; white-space: nowrap; }
  .popular__price small { font-size: 11px; color: var(--fg-faint); white-space: nowrap; }
}

/* ==========================================================================
   FLEET - generated SVG silhouettes, drawn to real proportions
   ========================================================================== */
@layer components {
  .fleet { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

  .car {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--e-1);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    overflow: hidden;
    transition: box-shadow var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out);
  }
  .car:hover { box-shadow: var(--e-2); translate: 0 -3px; }

  .car__art {
    aspect-ratio: 16 / 9;
    display: grid; place-items: center;
    background:
      radial-gradient(70% 70% at 50% 110%, var(--atmo-1), transparent 70%),
      var(--bg-sunken);
    border-block-end: 1px solid var(--card-border);
    padding: var(--sp-5);
    position: relative;
  }
  .car__art svg { width: 100%; height: auto; color: var(--fg-muted); }
  .car__badge {
    position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .08em;
    color: var(--fg-faint); border: 1px solid var(--border-hair);
    border-radius: var(--r-sm); padding: 2px var(--sp-2);
  }

  .car__body { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
  .car__body h3 { font-size: var(--fs-3); }
  .car__spec { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-0); color: var(--fg-muted); }
  .car__spec span { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .car__spec svg { width: 14px; height: 14px; color: var(--fg-faint); }
  .car__extras { font-size: var(--fs-0); color: var(--fg-faint); }

  .car__foot {
    padding: var(--sp-4) var(--sp-5);
    border-block-start: 1px solid var(--card-border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  }
  .car__foot .price { font-size: var(--fs-3); color: var(--fg-mark); font-weight: 500; }
  .car__foot small { display: block; font-size: var(--fs-0); color: var(--fg-faint); }
}

/* ==========================================================================
   STEPS - an actual sequence, so it gets numbers
   ========================================================================== */
@layer components {
  .steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: s; }
  .step { display: grid; gap: var(--sp-3); align-content: start; padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border-subtle); position: relative; }
  .step::before {
    counter-increment: s; content: "0" counter(s);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .1em;
    color: var(--fg-mark);
  }
  .step h3 { font-size: var(--fs-3); }
  .step p { font-size: var(--fs-1); color: var(--fg-muted); }
}

/* ==========================================================================
   THE ARRIVAL - what actually happens when the flight lands
   ========================================================================== */
@layer components {
  .arrival { display: grid; gap: var(--sp-7); align-items: center; }
  @media (min-width: 62rem) { .arrival { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }

  .timeline { display: grid; gap: 0; }
  .tl {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-block-end: 1px solid var(--border-hair);
  }
  .tl:last-child { border-block-end: 0; }
  .tl__t {
    font-family: var(--f-data); font-variant-numeric: tabular-nums;
    color: var(--fg-route); font-size: var(--fs-1);
    display: flex; align-items: baseline; gap: var(--sp-2);
  }
  .tl__t i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--fg-route); flex: none; translate: 0 -2px; }
  .tl b { display: block; color: var(--fg-strong); font-weight: 700; font-size: var(--fs-2); }
  .tl p { font-size: var(--fs-1); color: var(--fg-muted); margin-block-start: var(--sp-1); }
  .tl--now .tl__t { color: var(--fg-action); }
  .tl--now .tl__t i { background: var(--fg-mark); }

  /* the name card - a real object from the product's own world */
  .namecard {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--e-3);
    padding: var(--sp-6);
    display: grid; gap: var(--sp-4);
    rotate: -1.6deg;
    text-align: center;
  }
  .namecard__logo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--fg-mark); }
  .namecard__logo svg { width: 22px; height: 22px; }
  .namecard__logo span { font-family: var(--f-display); font-weight: 800; letter-spacing: .1em; font-size: var(--fs-1); color: var(--fg-muted); }
  .namecard__name { font-family: var(--f-display); font-size: var(--fs-4); color: var(--fg-strong); font-weight: 800; }
  .namecard__meta { font-family: var(--f-mono); font-size: var(--fs-0); color: var(--fg-faint); display: grid; gap: var(--sp-1); letter-spacing: .04em; }
  .namecard__meta b { color: var(--fg-route); font-weight: 500; }
}

/* ==========================================================================
   TOURS
   ========================================================================== */
@layer components {
  .tours { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .tour {
    border: 1px solid var(--border-hair); border-radius: var(--r-md);
    background: var(--bg-surface); overflow: hidden;
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), translate var(--dur-mid) var(--ease-out);
  }
  .tour:hover { border-color: var(--border-strong); translate: 0 -3px; }
  .tour__art { aspect-ratio: 4 / 3; background: var(--bg-sunken); border-block-end: 1px solid var(--border-hair); position: relative; overflow: hidden; }
  .tour__art svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--fg-route); opacity: .6; }
  .tour__body { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
  .tour__body h3 { font-size: var(--fs-3); }
  .tour__body p { font-size: var(--fs-1); color: var(--fg-muted); }
  .tour__foot { padding: var(--sp-4) var(--sp-5); border-block-start: 1px solid var(--border-hair); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .tour__foot .price { color: var(--fg-mark); font-size: var(--fs-3); font-weight: 500; }
  .tour__foot small { font-size: var(--fs-0); color: var(--fg-faint); }
}

/* ==========================================================================
   FAQ - objection handling, on paper
   ========================================================================== */
@layer components {
  .faq { display: grid; gap: 0; max-width: 60rem; }
  .qa { border-block-end: 1px solid var(--border-subtle); }
  .qa:first-child { border-block-start: 1px solid var(--border-subtle); }
  .qa summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding-block: var(--sp-5);
    font-family: var(--f-display); font-weight: 700; font-size: var(--fs-3);
    color: var(--fg-strong); list-style: none;
  }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after {
    content: ""; width: 12px; height: 12px; flex: none;
    border-inline-end: 2px solid var(--fg-mark); border-block-end: 2px solid var(--fg-mark);
    rotate: 45deg; translate: 0 -3px;
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .qa[open] summary::after { rotate: -135deg; translate: 0 3px; }
  .qa p { padding-block-end: var(--sp-5); color: var(--fg-muted); max-width: var(--measure); }
  .qa p + p { padding-block-start: 0; margin-block-start: calc(var(--sp-4) * -1); }
}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
@layer components {
  .contact { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .contact a, .contact div {
    display: grid; gap: var(--sp-2); align-content: start;
    padding: var(--sp-5);
    border: 1px solid var(--border-hair); border-radius: var(--r-md);
    background: var(--bg-surface); text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .contact a:hover { border-color: var(--fg-mark); }
  .contact svg { width: 20px; height: 20px; color: var(--fg-mark); }
  .contact b { font-family: var(--f-data); font-size: var(--fs-2); color: var(--fg-strong); font-weight: 500; }
  .contact span { font-size: var(--fs-0); color: var(--fg-faint); }

  .footer { background: var(--c-ink-950); padding-block: var(--sp-8) var(--sp-6); border-block-start: 1px solid var(--border-hair); }
  .footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .footer h4 { font-size: var(--fs-1); font-family: var(--f-data); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint); margin-block-end: var(--sp-4); }
  .footer li { margin-block-end: var(--sp-3); }
  .footer a { font-size: var(--fs-1); color: var(--fg-muted); text-decoration: none; }
  .footer a:hover { color: var(--fg-action); }
  .footer__about p { font-size: var(--fs-1); color: var(--fg-muted); max-width: 34ch; margin-block-start: var(--sp-4); }
  .footer__legal {
    margin-block-start: var(--sp-7); padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--border-hair);
    display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
    font-size: var(--fs-0); color: var(--fg-faint);
  }
  .badges { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-5); }
  .badge {
    display: inline-grid; gap: 2px; padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-hair); border-radius: var(--r-sm);
    font-family: var(--f-data); font-size: var(--fs-0); color: var(--fg-faint); letter-spacing: .04em;
  }
  .badge b { color: var(--fg-body); font-weight: 500; }

  /* TÜRSAB verification, 2026-09-24: the agency's licence, one click from TÜRSAB's own
     Dijital Doğrulama page, on every page's foot. The full block sits on the home page;
     the other pages carry the seal alone in their legal line. */
  .verify {
    margin-block-start: var(--sp-7); padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--border-hair);
    display: grid; gap: var(--sp-3) var(--sp-6); align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .verify h4 { grid-column: 1 / -1; margin-block-end: 0; }
  .verify p { font-size: var(--fs-0); color: var(--fg-faint); max-width: 62ch; }
  .verify p a { font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
  @media (max-width: 40rem) { .verify { grid-template-columns: minmax(0, 1fr); } }
  .verify + .footer__legal { margin-block-start: var(--sp-5); }

  .footer a.seal, .seal {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .04em;
    color: var(--fg-muted); text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .seal svg { width: 18px; height: 18px; color: var(--fg-mark); flex: none; }
  .seal b { color: var(--fg-strong); font-weight: 500; }
  .footer a.seal:hover { border-color: var(--fg-mark); color: var(--fg-body); }

  /* The TÜRSAB Dijital Doğrulama badge, 2026-09-28: the member's own picture of the badge,
     cropped to the card, with its sample number erased. The agency's number is laid over the
     blank in the badge's red, so one picture serves every tenant (Örnek reads DEMO). */
  .tursab-badge {
    position: relative; display: block; width: 15rem; max-width: 100%;
    container-type: inline-size; border-radius: 12px;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 14px rgb(0 0 0 / .06);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .tursab-badge img { display: block; width: 100%; height: auto; border-radius: inherit; }
  .tursab-badge__no {
    position: absolute; left: 88%; top: 79.5%; transform: translate(-50%, -50%);
    font: 700 6cqw/1 Arial, "Helvetica Neue", sans-serif; letter-spacing: .02em;
    color: #CB232A; white-space: nowrap;
  }
  .tursab-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgb(0 0 0 / .1), 0 8px 22px rgb(0 0 0 / .1); }
  .tursab-badge:focus-visible { outline: 2px solid var(--fg-action); outline-offset: 3px; }
}

/* ==========================================================================
   BOOKING LOOKUP (sorgula.html), 2026-09-24
   ========================================================================== */
@layer components {
  /* In the header: a quiet second action beside "Fiyat al". Below the nav breakpoint the
     header keeps only the mark and the menu, so it shrinks to its magnifier. */
  .header__lookup { padding-inline: var(--sp-4); }
  /* "Giriş yap" and "Üye ol" are one size (2026-09-28, the member: "buton boyutları da birbiriyle
     aynı olsun"): the same width, and the primary carries a clear border so the heights match. */
  @media (min-width: 62rem) { .header__tools > .btn { min-width: 8.25rem; } }
  .header__tools > .btn--primary { border: 1px solid transparent; }
  @media (max-width: 61.99rem) {
    .header__lookup { padding: var(--sp-2); border-color: transparent; }
    .header__lookup span { display: none; }
    .header__lookup svg { width: 20px; height: 20px; }
  }

  .lookup {
    display: grid; gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--quote-bg); border: 1px solid var(--quote-border); border-radius: var(--r-lg);
  }
  .lookup__fields { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  /* The passenger sign-up (2026-09-28): fixed pairs, so every row lines up; one column on a phone. */
  .lookup__fields--pairs { grid-template-columns: 1fr 1fr; align-items: end; }
  .lookup__hint { grid-column: 1 / -1; margin-top: calc(-1 * var(--sp-2)); }
  @media (max-width: 36rem) { .lookup__fields--pairs { grid-template-columns: 1fr; } }
  .lookup__error { font-size: var(--fs-1); color: var(--fg-danger); }
  .lookup__error[hidden] { display: none; }

  /* The rating page (degerlendir.html, 2026-09-26): five stars per group, radio buttons. */
  .stars { border: 0; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); }
  .stars__row { display: flex; gap: var(--sp-2); }
  .stars__star { position: relative; cursor: pointer; font-size: 2.2rem; line-height: 1; color: var(--border-strong); transition: color var(--dur-fast) var(--ease-out); }
  .stars__star input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .stars__star.is-on, .stars__star:hover { color: var(--fg-mark); }
  .stars__star:has(:focus-visible) { outline: 2px solid var(--fg-mark); outline-offset: 2px; border-radius: var(--r-sm); }
  /* After the rating (2026-09-28): the agency's Google and TripAdvisor pages, for everyone. */
  .review-share { display: grid; gap: var(--sp-3); }
  .review-share .flow__nav { margin-top: 0; }

  /* The consent banner (consent.js, 2026-09-28). Fixed to the foot, two equal buttons: declining
     is as easy as accepting. */
  .consent { position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--bg-raised); color: var(--fg-body);
    border-top: 1px solid var(--border-strong); box-shadow: var(--e-3); padding: var(--sp-4) 0; }
  .consent[hidden] { display: none; }
  .consent__in { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
  .consent__text { flex: 1 1 32rem; min-width: 0; font-size: var(--fs-0); }
  .consent__text b { display: block; color: var(--fg-strong); font-size: var(--fs-1); margin-bottom: var(--sp-1); }
  .consent__text p { margin: 0 0 var(--sp-1); color: var(--fg-muted); }
  .consent__actions { display: flex; gap: var(--sp-3); flex: 0 0 auto; }
  .consent__actions .btn { min-width: 8.5rem; justify-content: center; }
  .consent__again { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
  @media (max-width: 40rem) { .consent__actions { width: 100%; } .consent__actions .btn { flex: 1 1 0; min-width: 0; } }

  .review__text { width: 100%; background: var(--field-bg); color: var(--field-fg); border: 1px solid var(--field-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font: inherit; resize: vertical; }
  .lookup__status { font-size: var(--fs-1); color: var(--fg-muted); }
  .quote[hidden], .notice[hidden], .lookup[hidden] { display: none; }
}

/* ==========================================================================
   STICKY MOBILE ACTION BAR - one bar, nothing overlapping the CTA
   ========================================================================== */
@layer components {
  .actionbar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    display: flex; gap: var(--sp-2);
    padding: var(--sp-3) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-ink-950) 92%, transparent);
    backdrop-filter: blur(14px);
    border-block-start: 1px solid var(--border-hair);
  }
  .actionbar .btn { flex: 1; }
  .actionbar .btn--ghost { flex: 0 0 auto; padding-inline: var(--sp-4); }
  @media (min-width: 62rem) { .actionbar { display: none; } }
  @media (max-width: 61.99rem) { body { padding-block-end: 5.5rem; } }
}

/* ==========================================================================
   BOOKING FLOW
   ========================================================================== */
@layer components {
  .stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; font-size: var(--fs-0); }
  .stepper li { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-faint); font-family: var(--f-data); letter-spacing: .04em; }
  .stepper li i {
    width: 22px; height: 22px; border-radius: var(--r-pill); display: grid; place-items: center;
    border: 1px solid var(--border-subtle); font-size: var(--fs-0); flex: none;
  }
  .stepper li[aria-current="step"] { color: var(--fg-strong); }
  .stepper li[aria-current="step"] i { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: transparent; font-weight: 700; }
  .stepper li[data-done="1"] i { background: var(--c-ok-700); color: var(--c-ink-050); border-color: transparent; }
  .stepper li[data-done="1"] { color: var(--fg-muted); }
  .stepper button {
    display: flex; align-items: center; gap: var(--sp-2); padding: 0; border: 0; background: none;
    font: inherit; letter-spacing: inherit; color: inherit;
  }
  .stepper button:disabled { cursor: default; }
  .stepper li[data-done="1"] button:not(:disabled) { cursor: pointer; }
  .stepper li[data-done="1"] button:not(:disabled):hover { color: var(--fg-action); text-decoration: underline; }

  .flow { display: grid; gap: var(--sp-7); align-items: start; }
  @media (min-width: 64rem) { .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: var(--sp-8); } }

  .panel {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--r-md); padding: var(--sp-5); display: grid; gap: var(--sp-5);
  }
  @media (min-width: 30rem) { .panel { padding: var(--sp-6); } }
  .panel h2 { font-size: var(--fs-4); }
  .panel__head { display: grid; gap: var(--sp-2); }

  .summary { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
  .summary dl { display: grid; gap: var(--sp-3); }
  .summary div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-1); }
  .summary dt { color: var(--fg-faint); }
  .summary dd { color: var(--fg-body); text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums; }
  .summary__head { margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-hair); font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
  .summary__lines { margin-block: var(--sp-3) var(--sp-4); }
  .summary__lines dt { color: var(--fg-body); }
  .summary__lines dt small, .summary__lines dd small { display: block; font-size: var(--fs-0); color: var(--fg-faint); }
  .summary__total { padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-hair); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .summary__total .price { font-size: var(--fs-4); color: var(--fg-mark); font-weight: 500; }

  /* choice cards - vehicle and payment */
  .choices { display: grid; gap: var(--sp-3); }
  .choice { position: relative; display: grid; }
  .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .choice__box {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center;
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    padding: var(--sp-4); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .choice:has(input:checked) .choice__box { border-color: var(--fg-mark); background: var(--bg-inset); }
  .choice:has(input:focus-visible) .choice__box { outline: 2px solid var(--ring); outline-offset: 2px; }
  .choice__box > svg { width: 56px; height: auto; color: var(--fg-muted); flex: none; }
  .choice__box b { display: block; color: var(--fg-strong); font-size: var(--fs-2); font-weight: 700; }
  .choice__box small { display: block; font-size: var(--fs-0); color: var(--fg-faint); }
  .choice__price { font-family: var(--f-data); font-variant-numeric: tabular-nums; color: var(--fg-mark); font-size: var(--fs-3); font-weight: 500; white-space: nowrap; }
  .choice--pay .choice__box { grid-template-columns: auto 1fr; }
  .choice--pay .choice__box > svg { width: 24px; color: var(--fg-mark); }
  /* A paused payment option (2026-10-14): in sight, not pickable. */
  .choice--off { opacity: .5; cursor: not-allowed; }
  .choice--off .choice__box { pointer-events: none; }

  .card-fields { display: grid; gap: var(--sp-4); }
  .card-fields[hidden] { display: none; }
  .card-row { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .notice {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
    border: 1px solid var(--border-hair); border-inline-start: 2px solid var(--fg-mark);
    border-radius: var(--r-sm); padding: var(--sp-4);
    font-size: var(--fs-1); color: var(--fg-muted); background: var(--bg-inset);
  }
  .notice svg { width: 18px; height: 18px; color: var(--fg-mark); flex: none; }
  .notice--ok { border-inline-start-color: var(--fg-ok); }
  .account-offer[hidden] { display: none; }
  .account-offer p { margin: 0; }
  .account-offer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3) !important; }
  .notice--ok svg { color: var(--fg-ok); }

  /* The discount code under the extras (2026-10-14). */
  .promo { margin-top: var(--sp-4); max-width: 28rem; }
  .promo[hidden] { display: none; }
  .promo__row { display: flex; gap: var(--sp-2); }
  .promo__row .field__box { flex: 1; min-width: 0; }
  .promo__row .btn { flex: 0 0 auto; }
  .promo [data-promo-msg].is-ok { color: var(--fg-ok); }
  .promo [data-promo-msg].is-bad { color: var(--fg-danger); }

  .flow__nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
  .flow__nav .btn--primary { flex: 1; min-width: 12rem; }

  .demo-flag {
    background: var(--c-signal-700); color: var(--c-ink-050);
    text-align: center; padding: var(--sp-2) var(--gutter); font-size: var(--fs-0);
    font-family: var(--f-data); letter-spacing: .04em;
  }
  .demo-flag b { color: #FFFFFF; }
}

/* ==========================================================================
   MOTION - one directed reveal. Finished state is the default.
   ========================================================================== */
@layer utilities {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: rise linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 26%;
      }
      @keyframes rise {
        from { opacity: 0; translate: 0 1.4rem; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .lift { animation: lift var(--dur-mid) var(--ease-out) both; }
    @keyframes lift { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }
    .lift-2 { animation-delay: 90ms; }
    .lift-3 { animation-delay: 180ms; }
  }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [hidden] { display: none; }
}

/* ==========================================================================
   UTILITIES - a small, named set. No raw values, no inline declarations.
   ========================================================================== */
@layer utilities {
  .sprite { position: absolute; }
  .u-plain { text-decoration: none; }
  .u-action { color: var(--fg-action); }
  .u-ok { color: var(--fg-ok); }
  .u-strong { color: var(--fg-strong); font-weight: 700; }
  .u-small { font-size: var(--fs-0); }
  .u-h4 { font-size: var(--fs-3); }
  .u-mb-6 { margin-block-end: var(--sp-6); }
  .u-sp { height: var(--sp-4); }
  .u-narrow { max-width: 46rem; }
  .u-hide-sm { display: none; }
  @media (min-width: 45rem) { .u-hide-sm { display: inline; } }
}

@layer utilities {
  .u-small-body { font-size: var(--fs-1); }
  .u-h-sm { font-size: var(--fs-1); }
}

/* ==========================================================================
   FIXES from the 2026-09-15 screenshot critique
   ========================================================================== */
@layer components {
  /* an <svg> with no viewBox and no height falls back to 300x150 and blew the
     payment rows up to 190px tall. Both dimensions, always. */
  .choice--pay .choice__box > svg { width: 24px; height: 24px; }

  /* the total was wrapping "65" and "€" onto two lines */
  .summary__total { align-items: end; }
  .summary__total .price { white-space: nowrap; }
  .summary__total b { display: block; color: var(--fg-strong); font-weight: 700; }

  /* a checked choice needs a mark, not only a tinted border */
  .choice__box { position: relative; }
  .choice:has(input:checked) .choice__box::after {
    content: ""; position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
    width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--fg-mark);
  }
}

@layer utilities {
  /* Below the nav breakpoint the header carried a language group AND a CTA AND a
     hamburger, and pushed the hamburger off a 390px screen. The action bar at the
     foot of the page already carries the CTA, and the language group moves into
     the drawer. */
  @media (max-width: 61.99rem) {
    .topbar__end > :is(.lang, .cur),
    .header__tools > .btn--primary { display: none; }
    .drawer .lang { display: flex; margin-block: var(--sp-4); width: max-content; }
  }
}

@layer utilities {
  /* A grid item's automatic minimum size is min-content, and `min-width: 0` on the
     .field did nothing because the item that overflows is the .field__box inside it.
     Measured 2026-09-15: a 175px track holding a 305px box, with a size=20 monospace
     input sitting at its intrinsic 241px because nothing above it could shrink.
     The min-width goes on the box AND on the flex item, or neither shrinks. */
  .field__box { min-width: 0; }
  .field__box > input,
  .field__box > select { min-width: 0; width: 100%; }
}

/* ==========================================================================
   LIVE QUOTE AND ROUTE MAP - added 2026-09-21 (revision 2, easybuytransfer reference)
   Map, distance, drive time under that hour's traffic, arrival and fare.
   ========================================================================== */
@layer components {
  .map {
    --map-h: 11rem;
    height: var(--map-h); border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--border-subtle); background: var(--bg-sunken);
    isolation: isolate;   /* keeps Leaflet's z-indexes inside the card */
  }
  .route__map { --map-h: clamp(14rem, 10rem + 14vw, 20rem); }

  .quote { display: grid; gap: var(--sp-4); }
  .quote[hidden] { display: none; }

  .quote__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  @media (min-width: 40rem) { .route .quote__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .quote__stats > div { display: grid; gap: 2px; align-content: start; }
  .quote__stats dt { font-size: var(--fs-0); color: var(--fg-faint); letter-spacing: var(--ls-label); text-transform: uppercase; }
  .quote__stats dd { font-family: var(--f-data); font-variant-numeric: tabular-nums; color: var(--fg-strong); font-size: var(--fs-2); }
  .quote__stats dd small { display: block; font-family: var(--f-body); font-size: var(--fs-0); color: var(--fg-muted); }
  .quote__stats > .quote__sep {
    grid-column: 1 / -1; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border-hair);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  }
  .quote__stats > .quote__sep dd { font-size: var(--fs-1); color: var(--fg-body); }

  .quote__from {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
    padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border-hair);
    font-size: var(--fs-1); color: var(--fg-muted);
  }
  .quote__from .price { margin-inline-start: auto; font-family: var(--f-data); font-size: var(--fs-4); font-weight: 500; color: var(--fg-mark); }
  .quote__from small { flex-basis: 100%; text-align: end; font-size: var(--fs-0); color: var(--fg-faint); }

  .quote__state { font-size: var(--fs-1); color: var(--fg-muted); }
  .quote__state[hidden] { display: none; }

  .route { display: grid; gap: var(--sp-5); }
  .route__legs { display: grid; gap: var(--sp-5); }
  .route__leg { display: grid; gap: var(--sp-3); }
  .route__leg h3 .muted { font-weight: 500; }
  .route__note { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); font-size: var(--fs-0); color: var(--fg-faint); }
  .route__note svg { width: 16px; height: 16px; color: var(--fg-route); }

  .choice--off .choice__box { opacity: .5; }
  .choice--off .choice__price { color: var(--fg-faint); font-size: var(--fs-1); }

  /* map marks: colour lives here, never in the script */
  .map-route { stroke: var(--fg-mark); stroke-width: 4; stroke-linecap: round; fill: none; }
  .map-route--est { stroke-dasharray: 6 8; }
  .map-route-halo { stroke: var(--c-ink-950); stroke-width: 8; stroke-opacity: .55; fill: none; }
  .map-pin { border-radius: var(--r-pill); border: 3px solid var(--c-ink-950); box-shadow: var(--e-2); }
  .map-pin--from { background: var(--fg-route); }
  .map-pin--to { background: var(--fg-mark); }
}

/* Leaflet's own stylesheet is unlayered, and unlayered rules beat every @layer rule.
   These overrides therefore have to be unlayered too. Tokens only. */
.map .leaflet-container, .map.leaflet-container { background: var(--bg-sunken); font-family: var(--f-body); }
.map .leaflet-control-attribution {
  background: color-mix(in srgb, var(--c-ink-950) 72%, transparent); color: var(--fg-faint);
  font-size: 10px; padding: 1px 6px;
}
.map .leaflet-control-attribution a { color: var(--fg-muted); }
.map .leaflet-bar { border: 1px solid var(--border-subtle); box-shadow: var(--e-1); }
.map .leaflet-bar a {
  background: var(--bg-raised); color: var(--fg-body); border-block-end-color: var(--border-hair);
  width: 28px; height: 28px; line-height: 28px;
}
.map .leaflet-bar a:hover { background: var(--bg-surface); color: var(--fg-action); }

/* ==========================================================================
   REVISION 3 - 2026-09-21: photographs, route options, tolls
   ========================================================================== */
@layer components {
  /* Hero: the city at night behind the booking. The shade keeps the copy on the left at the
     same contrast it had on the plain ground; the booker sits on its own surface. */
  /* Revision 5: the photo has a fixed size that never depends on the height of the hero.
     It used to fill the section, so opening "gidiş - dönüş" or the quote made the section
     taller and the picture re-scaled and jumped. Now the booker can grow over a still picture,
     which fades out at its foot into the hero ground. */
  .ground__photo {
    position: absolute; inset-block-start: 0; inset-inline: 0;
    width: 100%; height: 40rem; max-width: none;
    object-fit: cover; object-position: 61% 50%;
    filter: saturate(1) brightness(1.25);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  /* Desktop: the lit tower (61% across the picture, 22%-80% down) stands in the gap between the
     copy and the booker. The copy is 38rem, the booker 26rem, both pinned to the shell edges,
     so the middle of the gap is always 6rem right of the viewport centre. The picture is
     sized in vw so that it covers the viewport from edge to edge at every width. */
  @media (min-width: 64rem) {
    .ground__photo {
      --ph: max(60rem, calc(86vw - 7rem));
      inset-inline: auto; left: calc(50% + 6rem - 0.918 * var(--ph));
      inset-block-start: calc(4rem - 0.2 * var(--ph));
      width: calc(1.5 * var(--ph)); height: var(--ph);
      object-fit: fill;
    }
  }
  .ground__shade {
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, var(--c-ink-950) 0%, transparent 35%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--c-ink-950) 90%, transparent) 0%,
        color-mix(in srgb, var(--c-ink-950) 84%, transparent) 51%,
        color-mix(in srgb, var(--c-ink-950) 18%, transparent) 57%,
        color-mix(in srgb, var(--c-ink-950) 10%, transparent) 100%);
  }
  @media (max-width: 63.99rem) {
    .ground__shade { background: color-mix(in srgb, var(--c-ink-950) 84%, transparent); }
  }

  /* Vehicle and tour photographs: one grade for all, so pictures from different cameras
     read as one set. */
  .car__art--photo { padding: 0; overflow: hidden; }
  .car__art--photo img, .tour__art--photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.85) contrast(1.04);
    transition: scale var(--dur-mid) var(--ease-out);
  }
  .car__art--photo::after, .tour__art--photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--c-ink-950) 45%, transparent), transparent 45%);
  }
  .car:hover .car__art--photo img, .tour:hover .tour__art--photo img { scale: 1.04; }
  .car__art--photo .car__badge {
    z-index: 1; color: var(--c-ink-050);
    background: color-mix(in srgb, var(--c-ink-950) 70%, transparent); border-color: var(--border-subtle);
  }

  /* Route options: the same trip over different crossings, compared. */
  .ropts { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
  .ropts legend { padding: 0; margin-block-end: var(--sp-2); font-size: var(--fs-1); font-weight: 700; color: var(--fg-strong); }
  .ropts legend small { display: block; font-weight: 400; font-size: var(--fs-0); color: var(--fg-faint); }
  .ropt {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3); border: 1px solid var(--border-hair); border-radius: var(--r-md);
    background: var(--bg-sunken); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .ropt:hover { border-color: var(--border-strong); }
  .ropt:has(input:checked) { border-color: var(--fg-mark); background: var(--bg-inset); }
  .ropt:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  .ropt input { position: absolute; opacity: 0; pointer-events: none; }
  .ropt__tag {
    width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: var(--r-pill);
    font-family: var(--f-data); font-size: var(--fs-0); font-weight: 500;
    border: 1px solid var(--border-strong); color: var(--fg-muted);
  }
  .ropt:has(input:checked) .ropt__tag { background: var(--fg-mark); border-color: var(--fg-mark); color: var(--c-ink-950); }
  .ropt__main { display: grid; gap: 2px; min-width: 0; }
  .ropt__main b { font-size: var(--fs-1); color: var(--fg-strong); }
  .ropt__main small { font-size: var(--fs-0); color: var(--fg-muted); }
  /* revision 5: the right column is the drive time, never a price */
  .ropt__time { display: grid; justify-items: end; gap: 2px; text-align: end; }
  .ropt__time b { font-family: var(--f-data); font-variant-numeric: tabular-nums; font-size: var(--fs-2); font-weight: 700; color: var(--fg-route); white-space: nowrap; }
  .ropt__diff { font-size: var(--fs-0); color: var(--fg-faint); white-space: nowrap; }
  .ropt__diff--ok { color: var(--fg-ok); }

  .map-route--alt { stroke: var(--fg-route); stroke-width: 3; stroke-opacity: .5; stroke-dasharray: 2 7; cursor: pointer; }
  .map-route--alt:hover { stroke-opacity: .9; }

  /* photo credits: required by the CC licences; on their own page since revision 5 */
  .credits-list { list-style: disc; padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--fs-1); color: var(--fg-muted); max-width: var(--measure); }
  .credits-list a { color: var(--fg-body); overflow-wrap: anywhere; }
  .u-mt-6 { margin-block-start: var(--sp-6); }
}

/* ==========================================================================
   REVISION 5 - 2026-09-21: reviews, passengers, typography, justified copy
   ========================================================================== */
@layer components {
  /* Headings a step lighter, figures in the body face with more weight: the mono labels and
     800 headings read as a departure board, the member wanted a calmer, finer page. */
  h1, h2 { font-weight: 700; }
  .label { font-weight: 700; }
  .hero__eyebrow { font-weight: 600; }
  .price, .choice__price, .quote__from .price, .car__foot .price, .routes .price, .quote__total .price { font-weight: 700; }
  .hero__fact b { font-weight: 700; }
  .quote__stats dd { font-weight: 600; }
  .lede { line-height: 1.6; }

  /* Running copy is justified: both edges straight. Hyphenation follows the page language
     (html lang), so Turkish, German and Russian break words correctly instead of opening
     rivers of space. Short UI text (buttons, labels, prices, one-liners) is left alone.
     Phones keep ragged-right: a line of 35 characters justified opens gaps wider than words. */
  @media (min-width: 40rem) {
    .band-head p, .lede, .step p, .tl p, .qa p, .tour__body p, .footer__about p, .review p,
    .panel__head p, .route__note span, .routes__note, .notice span {
      text-align: justify; text-align-last: start;
      hyphens: auto; -webkit-hyphens: auto;
      text-wrap: wrap;
    }
  }

  /* --- reviews --- */
  .reviews__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); margin-block-end: var(--sp-7); }
  .reviews__top .band-head { margin-block-end: 0; }
  .rating { display: flex; align-items: center; gap: var(--sp-4); }
  .rating__score { font-size: var(--fs-6); font-weight: 700; line-height: 1; color: var(--fg-strong); }
  .rating__stars { display: flex; gap: 2px; }
  .rating__stars svg { width: 20px; height: 20px; color: var(--fg-mark); }
  .rating__count { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-0); color: var(--fg-muted); }

  .reviews { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .reviews--folded .review--more { display: none; }
  /* 2026-10-13: one row of reviews until "Tümünü görüntüle" (site.js); the rows below collapse to nothing. */
  .reviews--row { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
  .reviews:focus { outline: none; }
  .review {
    display: grid; gap: var(--sp-3); align-content: start;
    padding: var(--sp-5); background: var(--card-bg);
    border: 1px solid var(--card-border); border-radius: var(--card-radius);
  }
  .review__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
  .review__avatar { width: 48px; height: 48px; border-radius: var(--r-pill); object-fit: cover; background: var(--bg-inset); }
  .review__head b { display: block; color: var(--fg-strong); font-size: var(--fs-1); }
  /* 2026-09-29: a Google reviewer's name links to their Google profile, as Google's attribution asks. */
  .review__head a.review__author { display: block; color: var(--fg-strong); font-size: var(--fs-1); font-weight: 700; text-decoration: none; }
  .review__head a.review__author:hover { text-decoration: underline; }
  .review__head span { font-size: var(--fs-0); color: var(--fg-faint); }
  .review__stars { display: flex; gap: 1px; align-self: start; }
  .review__stars svg { width: 14px; height: 14px; }
  .review__stars .on { color: var(--fg-mark); }
  .review__stars .off { color: var(--border-strong); }
  .review p { font-size: var(--fs-1); color: var(--fg-body); line-height: 1.6; }
  .review__trip {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
    padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border-hair);
    font-size: var(--fs-0); color: var(--fg-faint);
  }
  .reviews__more { display: grid; justify-items: center; gap: var(--sp-3); margin-block-start: var(--sp-6); }
  .reviews__more .btn[hidden] { display: none; }
  .reviews__note { font-size: var(--fs-0); color: var(--fg-faint); }
  /* 2026-09-29: the review band stays hidden until Google answers (site.js). It is the drawn band
     between the tours' photographs and the FAQ photograph, so while it is hidden the FAQ band
     drops its photograph: two photographs never meet at a band edge (the member, 2026-09-28). */
  #yorumlar[hidden] + #sss .ground img { display: none; }

  /* --- one row per passenger on the booking page --- */
  .pax { display: grid; gap: var(--sp-4); }
  .pax__row { border: 1px solid var(--border-hair); border-radius: var(--r-md); padding: var(--sp-4); margin: 0; min-width: 0; }
  .pax__row legend { padding-inline: var(--sp-2); font-size: var(--fs-1); font-weight: 700; color: var(--fg-strong); }
  .pax__row legend .muted { font-weight: 400; font-size: var(--fs-0); }
  .pax__fields { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
  @media (min-width: 30rem) {
    .pax__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pax__fields > .field:last-child { grid-column: 1 / -1; }
  }

  /* the confirm button stays off until both required boxes are ticked */
  .btn[disabled] { cursor: not-allowed; }
}

/* Leaflet paints the marker boxes itself (unlayered), so the route letter tags are too. */
.map .map-tag {
  display: grid; place-items: center; border-radius: var(--r-pill);
  font-family: var(--f-data); font-size: 11px; font-weight: 500;
  background: var(--bg-raised); color: var(--fg-route); border: 1.5px solid var(--fg-route);
  box-shadow: var(--e-1);
}
.map .map-tag--on { background: var(--fg-mark); color: var(--c-ink-950); border-color: var(--c-ink-950); }

/* ==========================================================================
   LANGUAGES - revision 4, 2026-09-21. Unlayered on purpose: these must win over every layer.
   Arabic runs right to left (i18n.js sets dir="rtl"); the layout already uses logical
   properties, so it mirrors by itself.
   ========================================================================== */
:root[lang="ar"] {
  --f-display: "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --f-body: "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
}
/* letter-spacing breaks the joins of Arabic script, and Arabic has no capitals */
:root[lang="ar"] body * { letter-spacing: normal; text-transform: none; }
/* the map, the codes and the digits stay left to right inside a right-to-left page */
.map, .code, .num, .price, time { direction: ltr; unicode-bidi: isolate; }
.map { text-align: left; }
/* right to left: the copy sits on the right, so the shade that protects it flips with it */
:root[dir="rtl"] .ground__shade { transform: scaleX(-1); }
/* right to left the gap between copy and booker sits 6rem LEFT of the centre; the picture is
   a little larger so that it still reaches the right edge of the viewport */
@media (min-width: 64rem) {
  :root[dir="rtl"] .ground__photo {
    --ph: max(60rem, calc(86vw + 11rem));
    left: calc(50% - 6rem - 0.918 * var(--ph));
  }
}

/* ==========================================================================
   REVISION 6 - 2026-09-23: initials instead of faces, staged arrival, washed grounds
   ========================================================================== */
@layer components {
  /* A reviewer is a pair of initials, not a stock portrait. The member asked for this on
     2026-09-23: a face nobody can verify reads as a stock photograph, and a monogram makes
     no claim it cannot keep. Six hues, cycled by position, so the wall does not go flat. */
  /* .review__head span is (0,1,1) and sets the faint, small style of the city line, so the
     monogram has to be written at least as specifically or it inherits it. */
  .review__head .review__avatar--mono {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: var(--r-pill);
    font-family: var(--f-data); font-size: var(--fs-2); font-weight: 700;
    letter-spacing: .03em; color: #FFFFFF; user-select: none;
    background: var(--mono-bg);
  }
  /* Every hue is dark enough for white to clear 5.5:1 on it: the first six tried were mid-tones
     and the initials washed out on the light skin. */
  .review__head .review__avatar--mono[data-mono="0"] { --mono-bg: #1F6B4C; }
  .review__head .review__avatar--mono[data-mono="1"] { --mono-bg: #2C578A; }
  .review__head .review__avatar--mono[data-mono="2"] { --mono-bg: #6B3F80; }
  .review__head .review__avatar--mono[data-mono="3"] { --mono-bg: #8E4A25; }
  .review__head .review__avatar--mono[data-mono="4"] { --mono-bg: #1F6E6E; }
  .review__head .review__avatar--mono[data-mono="5"] { --mono-bg: #5E5323; }

  /* The arrival timeline used to be a clock log (03:40, 04:05). Since revision 6 it names
     STAGES, which are words and need a wider, quieter column than four digits did. */
  .timeline--stages .tl { grid-template-columns: 8.5rem 1fr; }
  .timeline--stages .tl__t {
    font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-label);
    color: var(--fg-faint);
  }
  .timeline--stages .tl--now .tl__t { color: var(--fg-action); }
  @media (max-width: 40rem) {
    .timeline--stages .tl { grid-template-columns: 1fr; gap: var(--sp-2); }
  }

  /* A photograph behind a whole band, washed out until it is almost paper: the light skin
     uses it, the night skin does not carry one at all (the slot is a tenant block). */
  .ground__photo--wash {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;
    opacity: .22;
    filter: saturate(.5) brightness(.5) contrast(1);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  }
}

/* ==========================================================================
   REVISION 7 - 2026-09-23
   Photographs where the page was plainest, and the arrival section shown rather
   than only described. The member's brief: the washes had gone so faint they read
   as nothing, the night hero looked pixellated, and four bands were bare.
   ========================================================================== */

@layer components {
  /* The right-hand column of the arrival section: a photograph with the name card
     riding over its bottom edge, so the card keeps looking like an object on a table. */
  .arrival__aside { display: grid; justify-items: stretch; }
  .shot {
    margin: 0;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--e-3);
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }
  .shot img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.86) contrast(1.02);
  }
  /* The card overlaps the photograph and is pulled in from the edges, which is what makes
     the two read as one object instead of two stacked boxes. */
  .arrival__aside .namecard {
    margin-block-start: calc(var(--sp-6) * -1);
    margin-inline: var(--sp-5);
    position: relative; z-index: 1;
  }
  @media (max-width: 61.99rem) {
    .arrival__aside .namecard { margin-inline: var(--sp-4); }
  }
}

/* ==========================================================================
   REVISION 8 - 2026-09-23
   The booking page opens on an empty booker when no trip was chosen, the fleet
   band gets a photograph behind it, and the fleet grid is closed at eight.
   ========================================================================== */

@layer components {
  /* The start of the booking page: the words on the left, the same booker as the home page
     on the right, in the same proportions as the hero. One column on a phone. */
  .start { display: grid; gap: var(--sp-6); align-items: start; }
  .start .band-head { margin-block-end: 0; }
  @media (min-width: 64rem) {
    .start { grid-template-columns: minmax(0, 30rem) minmax(0, 28rem); justify-content: space-between; gap: var(--sp-7); }
    .start .band-head { padding-block-start: var(--sp-6); }
  }

  /* A washed photograph on a PAPER band. The night-skin wash darkens (brightness .5) because
     it sits on ink; on paper that would grey the page, so here it is lifted towards white.
     The light skin's own body[data-tema] rules are more specific and keep winning there. */
  .on-paper .ground__photo--wash {
    opacity: .34;
    filter: saturate(.55) brightness(1.12) contrast(.94);
  }

  /* The eighth card: the car that is not on the list. Same frame as a car, no price. */
  .car__art--ask svg { width: 3rem; height: 3rem; color: var(--fg-mark); }
  .car--ask .car__foot a.code { font-size: var(--fs-0); color: var(--fg-strong); white-space: nowrap; }
}

/* ==========================================================================
   REVISION 12 - 2026-09-28: the booker on one line, like the reference site
   Member: "form kısmı yatay olmamış, gidiş dönüş referans sitedeki gibi butonlu
   yapılmamış, uçuş no diğer ekrana taşınmamış". The copy sits above, the booker
   runs the width of the shell under it; the return trip is a switch; the flight
   number moved to the passenger step. A phone keeps the stacked form.
   ========================================================================== */
@layer components {
  @media (min-width: 64rem) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .hero__grid > .lift:first-child { max-width: 44rem; }
    .start { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .start .band-head { padding-block-start: 0; }
  }

  .booker__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .booker--bar .booker__tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .booker--bar .booker__tabs button,
  .booker--bar .booker__tabs:has(> [data-mode="tour"]:not([hidden])) button { flex: none; padding-inline: var(--sp-4); white-space: nowrap; }

  /* the return trip: a switch with the agency's discount on it */
  .booker__round {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle); background: var(--bg-raised);
    font-size: var(--fs-0); font-weight: 700; color: var(--fg-muted); line-height: 1.4;
  }
  .booker__round:hover { border-color: var(--fg-mark); color: var(--fg-strong); }
  .booker__round[aria-pressed="true"] { border-color: var(--fg-action); color: var(--fg-strong); }
  .booker__switch {
    position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--r-pill);
    background: var(--bg-inset); border: 1px solid var(--border-subtle);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .booker__switch::after {
    content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--fg-faint);
    transition: translate var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .booker__round[aria-pressed="true"] .booker__switch { background: var(--fg-action); border-color: var(--fg-action); }
  .booker__round[aria-pressed="true"] .booker__switch::after { background: var(--bg-raised); translate: 14px 0; }
  [dir="rtl"] .booker__round[aria-pressed="true"] .booker__switch::after { translate: -14px 0; }
  /* the discount inside the switch's frame, centred under its label: faint while the return is
     off, the site's colour once it is on (member, 2026-09-28) */
  .booker__roundtext { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
  .booker__deal {
    font-size: .7rem; font-weight: 600; color: var(--fg-faint); white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .booker__round[aria-pressed="true"] .booker__deal { color: var(--fg-action); font-weight: 700; }

  /* the fields: stacked on a phone, two rows on a tablet, one line from 75rem */
  .booker__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
  .booker__bar > .field { flex: 1 1 calc(50% - var(--sp-3)); }
  .booker__bar > .booker__place { flex: 1 1 100%; }
  .booker__go { width: 100%; min-height: 52px; white-space: nowrap; }
  .booker--bar .booker__swap { margin-block: calc(var(--sp-3) * -1); }
  .booker__return { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }

  @media (min-width: 48rem) {
    .booker__bar > .booker__place { flex: 1 1 calc(50% - 2.5rem); }
    .booker--bar .booker__swap { margin: 0 0 9px; flex: none; }
    .booker__bar > .field { flex: 1 1 8rem; }
    .booker__return { grid-template-columns: repeat(2, minmax(0, 12rem)); }
  }
  @media (min-width: 75rem) {
    .booker__bar { flex-wrap: nowrap; }
    /* the places take what is left; the short answers keep the width their values need */
    .booker__bar > .field { flex: 0 0 7.75rem; }
    .booker__bar > .field:has([type="date"]) { flex-basis: 10rem; }
    .booker__bar > .field:has([name="pax"]) { flex-basis: 8.75rem; }
    .booker__bar > .field.booker__place { flex: 1 1 0; min-width: 9rem; }
    /* the button at the end of the field row, the return row under the fields */
    .booker--bar { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); }
    .booker--bar > * { grid-column: 1 / -1; }
    .booker--bar > .booker__bar { grid-column: 1; grid-row: 2; }
    .booker--bar > .booker__go { grid-column: 2; grid-row: 2; align-self: end; width: auto; padding-inline: var(--sp-5); }
    .booker--bar > .booker__return { grid-column: 1; }
    .booker--bar .field__box { padding-inline: var(--sp-3); gap: var(--sp-2); }
  }

  /* the live quote under a wide booker: map beside the numbers, not above them */
  @media (min-width: 64rem) {
    .booker--bar .quote { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; column-gap: var(--sp-6); }
    .booker--bar .quote__map { --map-h: 15rem; grid-row: span 3; }
  }
}

/* The vehicle step shows the cars as photographs (member, 2026-09-28: "Filo kaldırılıp
   rezervasyon araç seçim kısmına alınacaktı fotoğraflı şekilde"). The fleet band on the home
   page is gone; this is where a passenger sees the car. Two across from 40rem. */
@layer components {
  .choices--cars { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .choices--cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .choices--cars .choice__box {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
    padding: 0 0 var(--sp-4); overflow: hidden; row-gap: var(--sp-3);
  }
  .choice__photo {
    grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    background: var(--bg-sunken); border-block-end: 1px solid var(--border-hair);
  }
  .choices--cars .choice__box > span:not(.choice__price) { padding-inline-start: var(--sp-4); min-width: 0; }
  .choices--cars .choice__price { padding-inline-end: var(--sp-4); }
  .choices--cars .choice:has(input:checked) .choice__box::after { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--bg-raised); }
}

/* Flags beside the language codes (member, 2026-09-28: "çeviri dilleri ülke kısaltmalarının
   yanına bayraklarını da ekleyelim"). Drawn as small SVGs, not emoji: Windows shows a flag
   emoji as two letters. EN is the United Kingdom; AR is a stylised Saudi flag, its script not
   drawn at this size (kararlar/2026-09-28). The button follows the chosen language. */
@layer components {
  .lang__code::before, .lang__list [data-code] b::before {
    content: ""; display: inline-block; width: 18px; height: 12px; flex: none;
    margin-inline-end: var(--sp-2); vertical-align: -1px; border-radius: 2px;
    background: var(--flag) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  }
  .lang__code { display: inline-flex; align-items: center; }
  .lang__list [data-code] b { display: inline-flex; align-items: center; }
  .lang, .lang__list [data-code="tr"] { --flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2020%22%3E%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%23E30A17%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2212.25%22%20cy%3D%2210%22%20r%3D%224%22%20fill%3D%22%23E30A17%22%2F%3E%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2214.40%2C10.00%2016.09%2C9.41%2016.13%2C7.62%2017.21%2C9.05%2018.92%2C8.53%2017.90%2C10.00%2018.92%2C11.47%2017.21%2C10.95%2016.13%2C12.38%2016.09%2C10.59%22%2F%3E%3C%2Fsvg%3E"); }
  .lang[data-current="en"], .lang__list [data-code="en"] { --flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%2C0L60%2C30M60%2C0L0%2C30%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M0%2C0L60%2C30M60%2C0L0%2C30%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M30%2C0V30M0%2C15H60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%2F%3E%3Cpath%20d%3D%22M30%2C0V30M0%2C15H60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22%2F%3E%3C%2Fsvg%3E"); }
  .lang[data-current="de"], .lang__list [data-code="de"] { --flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2018%22%3E%3Crect%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%23000%22%2F%3E%3Crect%20y%3D%226%22%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%23DD0000%22%2F%3E%3Crect%20y%3D%2212%22%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%23FFCE00%22%2F%3E%3C%2Fsvg%3E"); }
  .lang[data-current="ru"], .lang__list [data-code="ru"] { --flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2018%22%3E%3Crect%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20y%3D%226%22%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%230039A6%22%2F%3E%3Crect%20y%3D%2212%22%20width%3D%2230%22%20height%3D%226%22%20fill%3D%22%23D52B1E%22%2F%3E%3C%2Fsvg%3E"); }
  .lang[data-current="ar"], .lang__list [data-code="ar"] { --flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2020%22%3E%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%23006C35%22%2F%3E%3Cpath%20d%3D%22M8%2C8.5c2-1.6%203.5%2C1.2%205.5-.2s3.5%201.3%205.5-.2%202.6.8%203%20.4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M8.5%2C13.2H21.5M20%2C12.2v2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
}

/* The passenger's account pages (giris.html, uye-ol.html, hesabim.html; 2026-09-28) and the
   saved-address chips it adds under the booking form's address field. */
@layer components {
  .account__switch { font-size: var(--fs-1); }
  .account__list { display: grid; gap: var(--sp-2); }
  .account__item {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-hair); border-radius: var(--r-md);
    background: var(--bg-surface);
  }
  .account__main { flex: 1 1 14rem; min-width: 0; display: grid; gap: 2px; }
  .account__main b { color: var(--fg-strong); overflow-wrap: anywhere; }
  .account__main small { font-size: var(--fs-0); color: var(--fg-faint); overflow-wrap: anywhere; }
  .account__remove { font-size: var(--fs-0); color: var(--fg-faint); }
  .account__remove:hover { color: var(--fg-danger); }
  .account__add { display: grid; gap: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-hair); }
  .account__add .btn { justify-self: start; }
  .account__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .chip {
    border: 1px solid var(--border-hair); border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-3); font-size: var(--fs-0); color: var(--fg-muted);
  }
  .chip:hover { border-color: var(--fg-mark); color: var(--fg-action); }

  /* Hesabım as a profile (2026-09-28, revision 2): the profile and its menu on the side, one
     panel on the right. On a phone the side becomes a card over the panel and the menu scrolls
     sideways. */
  .account { display: grid; gap: var(--sp-6); grid-template-columns: 16rem minmax(0, 1fr); align-items: start; margin-block-end: var(--sp-6); }
  .account[hidden], .account__panel[hidden], .account__empty[hidden], [data-account-head][hidden] { display: none; }
  .account__side {
    position: sticky; inset-block-start: 6rem;
    display: grid; gap: var(--sp-5); padding: var(--sp-5);
    background: var(--quote-bg); border: 1px solid var(--quote-border); border-radius: var(--r-lg);
  }
  .account__profile { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .account__avatar {
    flex: none; width: 3rem; height: 3rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--btn-primary-bg); color: var(--btn-primary-fg);
    font-family: var(--f-data); font-size: var(--fs-2); letter-spacing: .04em;
  }
  .account__who { display: grid; gap: 2px; min-width: 0; }
  .account__who b { color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account__who small { font-size: var(--fs-0); color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account__menu { display: grid; gap: 2px; padding-block: var(--sp-4); border-block: 1px solid var(--border-hair); }
  .account__menu a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
    color: var(--fg-muted); text-decoration: none; font-size: var(--fs-1);
  }
  .account__menu a:hover { color: var(--fg-strong); background: var(--bg-surface); }
  .account__menu a[aria-current="page"] { color: var(--fg-strong); background: var(--bg-surface); box-shadow: inset 3px 0 0 var(--fg-mark); }
  .account__menu svg, .account__exit svg { width: 18px; height: 18px; flex: none; }
  .account__menu span { flex: 1; }
  .account__count { font-style: normal; font-family: var(--f-data); font-size: var(--fs-0); color: var(--fg-faint); }
  .account__exit { display: grid; gap: 2px; }
  .account__exit button {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-md); background: none;
    font: inherit; font-size: var(--fs-1); color: var(--fg-muted); cursor: pointer; text-align: start;
  }
  .account__exit button:hover { background: var(--bg-surface); color: var(--fg-strong); }
  .account__leave button {
    padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-0);
    color: var(--fg-faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .account__leave button:hover { color: var(--fg-danger); }

  .account__body { min-width: 0; }
  .account__panel { display: grid; gap: var(--sp-4); }
  .account__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-block-end: var(--sp-2); }
  .account__top h2 { margin: 0; }
  .account__top .btn svg { width: 18px; height: 18px; }
  .account__h { font-size: var(--fs-1); font-family: var(--f-data); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint); margin: var(--sp-4) 0 0; font-weight: 500; }
  .account__h--flush { margin: 0; }
  .account__card { gap: var(--sp-4); }
  .account__card .muted { margin: var(--sp-1) 0 0; font-size: var(--fs-1); }
  .account__actions { align-items: center; }
  .account__actions .btn--primary { flex: 0 0 auto; min-width: 10rem; }
  .account__link { font-size: var(--fs-1); color: var(--fg-action); }
  /* The e-mail code, "Şifremi unuttum" and the campaign consent (2026-10-18, migration 034). */
  button.account__link { padding: 0; font: inherit; font-size: var(--fs-1); text-decoration: underline; text-underline-offset: 2px; }
  button.account__link:disabled { opacity: .45; cursor: default; text-decoration: none; }
  form[data-account-form] { scroll-margin-top: 7rem; }
  .account__forgot { margin: calc(-1 * var(--sp-2)) 0 0; text-align: end; font-size: var(--fs-1); }
  .account__sent { margin: 0; font-size: var(--fs-1); overflow-wrap: anywhere; }
  .account__code { letter-spacing: .4em; font-size: var(--fs-3); }
  .account__wide { grid-column: 1 / -1; }
  .account__resent { color: var(--fg-ok); }
  .account__consent { margin-block-start: var(--sp-5); }
  .account__note { font-size: var(--fs-0); }
  .account__demo { margin-block-end: var(--sp-6); }
  .account__empty {
    display: grid; gap: var(--sp-4); padding: var(--sp-5);
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  }
  .account__empty p { margin: 0; color: var(--fg-muted); }
  .account__empty b { color: var(--fg-strong); }
  .account__empty .flow__nav .btn--primary { flex: 0 0 auto; }

  /* One booking's status, in the row: a pill that sits in the line, not over the card's edge. */
  .account__status {
    flex: none; border-radius: var(--r-pill); padding: 2px var(--sp-3);
    font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: .04em;
    border: 1px solid var(--border-subtle); color: var(--fg-muted);
  }
  .account__status--live { border-color: transparent; background: var(--c-ok-700); color: var(--c-ink-050); }
  .account__status--done { color: var(--fg-faint); }

  /* The active booking: the whole booking at a glance and how far along it is. */
  .trip {
    display: grid; gap: var(--sp-5); padding: var(--sp-6);
    background: var(--quote-bg); border: 1px solid var(--quote-border); border-radius: var(--r-lg);
    box-shadow: var(--e-2);
  }
  .trip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .trip__ref { font-family: var(--f-data); font-size: var(--fs-1); color: var(--fg-faint); letter-spacing: .04em; }
  .trip__route { display: grid; gap: var(--sp-1); }
  .trip__route b { font-size: var(--fs-4); color: var(--fg-strong); line-height: 1.2; overflow-wrap: anywhere; }
  .trip__route span { color: var(--fg-muted); }
  .trip__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); margin: 0; }
  .trip__facts div { display: grid; gap: 2px; min-width: 0; }
  .trip__facts dt { font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: var(--ls-label); color: var(--fg-faint); text-transform: uppercase; }
  .trip__facts dd { margin: 0; color: var(--fg-strong); overflow-wrap: anywhere; }
  .trip__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
  .trip__steps li { padding-block-start: var(--sp-2); border-block-start: 3px solid var(--border-hair); font-size: var(--fs-0); color: var(--fg-faint); }
  .trip__steps li.is-done { border-color: var(--fg-mark); color: var(--fg-muted); }
  .trip__steps li.is-now { border-color: var(--fg-mark); color: var(--fg-strong); font-weight: 600; }
  .trip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
  .trip__actions .account__remove { margin-inline-start: auto; background: none; border: 0; font: inherit; font-size: var(--fs-0); cursor: pointer; }
  .account__item .account__remove { background: none; border: 0; font: inherit; font-size: var(--fs-0); cursor: pointer; }
  .account__item > a.u-action { font-size: var(--fs-1); }

  /* THE SIMPLER SCREENS (2026-10-18, the member approved "yolcu ekranları önerisi"). */
  .band--tight { padding-block-start: var(--sp-7); }
  .lookup__fields--stack { grid-template-columns: minmax(0, 1fr); }
  .field__eye {
    flex: none; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--r-sm, 6px); background: none;
    font: inherit; font-size: var(--fs-0); color: var(--fg-action); cursor: pointer;
  }
  .field__eye:hover { text-decoration: underline; text-underline-offset: 2px; }
  .account__switch + .account__switch { margin-block-start: calc(-1 * var(--sp-2)); }
  .account__privacy { display: flex; gap: var(--sp-3); align-items: start; margin: 0; font-size: var(--fs-1); color: var(--fg-muted); }
  .account__privacy[hidden] { display: none; }
  .account__privacy svg { width: 18px; height: 18px; flex: none; margin-block-start: 2px; color: var(--fg-faint); }
  .account__group { display: grid; gap: var(--sp-3); }
  .account__group[hidden] { display: none; }
  .account__group > .account__h { margin: 0; }
  .account__item--trip { padding: 0; gap: 0 var(--sp-4); }
  .account__open {
    flex: 1 1 18rem; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
    gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; border-radius: var(--r-md);
  }
  .account__open:hover { background: var(--bg-raised); }
  .account__open:hover b { color: var(--fg-action); }
  .account__chev { flex: none; font-size: var(--fs-3); line-height: 1; color: var(--fg-faint); }
  .account__item--trip > .account__remove { padding-inline-end: var(--sp-4); }
  .trip__driver { display: grid; gap: var(--sp-1); justify-items: start; }
  .trip__plate {
    border: 1px solid var(--border-strong); border-radius: var(--r-sm, 4px); padding: 1px var(--sp-2);
    font-size: var(--fs-1); letter-spacing: .06em; white-space: nowrap;
  }
  .trip__now { display: none; margin: 0; font-size: var(--fs-1); color: var(--fg-strong); font-weight: 600; }
  .trip__help { margin: 0; font-size: var(--fs-1); color: var(--fg-muted); }
  .account__more { display: grid; gap: var(--sp-4); }
  .account__more > summary { list-style: none; cursor: pointer; justify-self: start; }
  .account__more > summary::-webkit-details-marker { display: none; }
  .account__more:not(.account__more--button) > summary {
    margin-block-start: var(--sp-2); font-size: var(--fs-1); color: var(--fg-action);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .account__more--button > summary svg { width: 18px; height: 18px; }
  .account__more--button[open] > summary { display: none; }
  .account__email { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: 52px; color: var(--fg-strong); font-size: var(--fs-2); overflow-wrap: anywhere; }
  .account__verified { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-0); color: var(--fg-ok); }
  .account__verified[hidden] { display: none; }
  .account__verified svg { width: 16px; height: 16px; }
  .account__foot { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border-hair); }
  .account__foot p { margin: 0; }

  @media (max-width: 52rem) {
    .account { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    /* On a phone: one slim row (name and Çıkış) over three tabs that fit the width, no card. */
    .account__side {
      position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
      padding: 0; background: none; border: 0;
    }
    .account__exit { grid-row: 1; grid-column: 2; }
    .account__avatar { width: 2.25rem; height: 2.25rem; font-size: var(--fs-1); }
    .account__who small { display: none; }
    .account__menu {
      grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;
      padding: 0; gap: 0;
    }
    .account__menu a { justify-content: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); border-radius: 0; }
    .account__menu svg { display: none; }
    .account__menu span { flex: none; }
    .account__menu a[aria-current="page"] { background: none; box-shadow: inset 0 -3px 0 var(--fg-mark); }
  }
  @media (max-width: 36rem) {
    .trip { padding: var(--sp-5); }
    .trip__steps li { font-size: 0; }   /* the bar alone on a phone; the line under it names the step */
    .trip__now { display: block; }
    .account__top .btn { width: 100%; justify-content: center; }
    /* A booking row on a phone: the route over its status, the arrow at the side. */
    .account__open { grid-template-columns: minmax(0, 1fr) auto; }
    .account__open .account__status { grid-row: 2; grid-column: 1; justify-self: start; }
    .account__open .account__chev { grid-row: 1 / span 2; grid-column: 2; }
    .account__item--trip > .account__remove { padding: 0 var(--sp-4) var(--sp-3); }
  }
  @media (max-width: 24rem) {
    .account__menu a { font-size: var(--fs-0); }
  }
}

/* LEGAL PAGES AND PAYMENT MARKS. Added 2026-09-28 for the banks' virtual POS review: the seven
   legal pages (sirket-bilgileri.html and the rest), the links to them at the foot of every page,
   and the card-scheme marks at the payment step. The marks are text until the payment provider
   hands over its official logo files. */
@layer components {
  .legal { display: grid; gap: var(--sp-7); grid-template-columns: minmax(12rem, 16rem) minmax(0, 46rem); align-items: start; }
  .legal__nav { position: sticky; top: var(--sp-6); }
  .legal__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .legal__nav a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--fg-muted); text-decoration: none; font-size: var(--fs-1); }
  .legal__nav a:hover { color: var(--fg-action); }
  .legal__nav a[aria-current="page"] { color: var(--fg-strong); background: var(--bg-inset); box-shadow: inset 2px 0 0 var(--fg-mark); }
  .legal__body { display: grid; gap: var(--sp-4); min-width: 0; }
  .legal__body h1 { font-size: var(--fs-5); color: var(--fg-strong); line-height: 1.15; }
  .legal__body h2 { font-size: var(--fs-3); color: var(--fg-strong); margin-block-start: var(--sp-4); }
  .legal__body p, .legal__body li { color: var(--fg-body); max-width: 68ch; overflow-wrap: anywhere; }
  .legal__body ul { display: grid; gap: var(--sp-2); padding-inline-start: 1.2em; margin: 0; }
  .legal__body a { color: var(--fg-action); }
  .legal__facts { display: grid; gap: 0; margin: 0; border: 1px solid var(--border-hair); border-radius: var(--r-sm); }
  .legal__facts div { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-block-start: 1px solid var(--border-hair); }
  .legal__facts div:first-child { border-block-start: 0; }
  .legal__facts dt { font-family: var(--f-data); font-size: var(--fs-0); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint); }
  .legal__facts dd { margin: 0; color: var(--fg-strong); overflow-wrap: anywhere; }
  .legal__stamp { font-size: var(--fs-0); margin-block-start: var(--sp-5); }
  @media (max-width: 52rem) {
    .legal { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .legal__nav { position: static; }
    .legal__nav ul { display: flex; overflow-x: auto; scrollbar-width: none; }
    .legal__nav a { white-space: nowrap; }
    .legal__facts div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  }

  .footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
  .footer__links a { font-size: var(--fs-0); }
  .footer .footer__links + .footer__legal { margin-block-start: var(--sp-5); }
  .footer__pay { margin-block-start: var(--sp-6); }
  /* 2026-10-03 (the member): the card names sit under the verification text, each with its mark. */
  .verify__text { display: grid; gap: var(--sp-3); align-content: center; }
  .verify__text .footer__pay { margin-block-start: 0; }

  .paylogos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
  .paylogos span {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border-hair); border-radius: var(--r-sm);
    font-family: var(--f-data); font-size: var(--fs-0); font-weight: 500; letter-spacing: .04em; color: var(--fg-body); background: var(--bg-inset);
  }
  .paylogos svg { width: 26px; height: 16px; flex: none; border-radius: 3px; }
  .paylogos svg.paylogos__lock { width: 15px; height: 15px; border-radius: 0; color: var(--fg-mark); }
}

/* ==========================================================================
   THE MEETING - 2026-10-13
   A tenant's arrival section told as the way out of the airport: three photographs in
   order (hall, exit, car), each with its number riding over the photograph's edge.
   ========================================================================== */
@layer components {
  .meet {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-7);
  }
  @media (min-width: 48rem) { .meet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
  .meet__step { display: grid; align-content: start; gap: var(--sp-2); }
  .meet__shot { aspect-ratio: 4 / 3; }
  .meet__n {
    justify-self: start;
    margin-block-start: calc(var(--sp-6) * -1); margin-inline-start: var(--sp-4);
    position: relative; z-index: 1;
    width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
    display: grid; place-items: center;
    background: var(--bg-raised); color: var(--fg-mark);
    border: 1px solid var(--border-subtle); box-shadow: var(--e-3);
    font-family: var(--f-data); font-variant-numeric: lining-nums tabular-nums; font-weight: 700; font-size: var(--fs-2);
  }
  .meet__step b { display: block; color: var(--fg-strong); font-weight: 700; font-size: var(--fs-2); margin-block-start: var(--sp-1); }
  .meet__step p { font-size: var(--fs-1); color: var(--fg-muted); }
}