/* ==========================================================================
   Standard theme - THE LIGHT SKIN ("acik")
   Added 2026-09-23 on the member's brief: lighter colours, and photographs that sit behind
   the words, washed out, rather than in front of them.

   It is a SKIN, not a second template. The markup, the scripts, the layout and the
   component classes are the standard template's; this file re-binds the same nine semantic
   roles to the paper side and re-cuts the three ink surfaces the bands read raw. A tenant
   asks for it with `look.skin = 'acik'` (src/tenants/types.ts) and the engine links it after
   site.css and puts `data-tema` on <body>.

   Everything here is scoped to body[data-tema]. Nothing in this file may reach a tenant that
   did not ask for it - that is what keeps the night pages byte-identical.
   ========================================================================== */

@layer tokens {
  body[data-tema] {
    color-scheme: light;

    /* The one dark value the skin owns. Borders and shadows are tinted from it, never black. */
    --c-skin-ink: #16202F;

    /* The three surfaces the bands, the header and the footer read RAW, re-cut as paper.
       Re-binding the semantic roles alone is not enough: .band--sunken and its siblings read
       the primitive. The text primitives (ink-050, ink-100) are left alone - they are still
       white-on-dark text on the demo flag and on the signal-coloured chips. */
    --c-ink-950: #FBFCFE;
    --c-ink-900: #F2F5FA;
    --c-ink-800: #E8EEF6;
    --c-ink-700: #D3DCE8;

    --bg-page:    #FBFCFE;
    --bg-surface: #FFFFFF;
    --bg-raised:  #FFFFFF;
    --bg-sunken:  #F2F5FA;
    --bg-inset:   color-mix(in srgb, var(--c-skin-ink) 6%, transparent);

    --fg-body:    #24303F;   /* 11.6:1 on the page */
    --fg-strong:  #0E1724;
    --fg-muted:   #46536A;   /* 8.0:1 */
    --fg-faint:   #566175;   /* 6.2:1 - AA at every size used here */

    /* On paper the amber text role steps down; the tenant's own palette lands on these. */
    --fg-action:  var(--c-signal-700);
    --fg-mark:    var(--c-signal-700);
    --fg-route:   var(--c-route-600);
    --fg-ok:      var(--c-ok-700);

    --border-hair:   color-mix(in srgb, var(--c-skin-ink) 11%, transparent);
    --border-subtle: color-mix(in srgb, var(--c-skin-ink) 19%, transparent);
    --border-strong: color-mix(in srgb, var(--c-skin-ink) 32%, transparent);
    --ring: var(--c-signal-700);

    --atmo-1:     color-mix(in srgb, var(--c-signal-500) 10%, transparent);
    --atmo-2:     color-mix(in srgb, var(--c-route-500) 8%, transparent);
    --atmo-grid:  color-mix(in srgb, var(--c-skin-ink) 6%, transparent);
    --atmo-bezel: color-mix(in srgb, var(--c-skin-ink) 6%, transparent);
    --atmo-sheen: color-mix(in srgb, var(--c-signal-400) 14%, transparent);

    --e-1: 0 1px 2px color-mix(in srgb, var(--c-skin-ink) 9%, transparent),
           0 1px 1px color-mix(in srgb, var(--c-skin-ink) 6%, transparent);
    --e-2: 0 2px 6px color-mix(in srgb, var(--c-skin-ink) 9%, transparent),
           0 8px 20px color-mix(in srgb, var(--c-skin-ink) 7%, transparent);
    --e-3: 0 4px 12px color-mix(in srgb, var(--c-skin-ink) 11%, transparent),
           0 24px 56px color-mix(in srgb, var(--c-skin-ink) 9%, transparent);

    /* Repeated, because a custom property is substituted where it is DECLARED. */
    --btn-primary-bg:   var(--c-signal-700);
    --btn-primary-fg:   #FFFFFF;
    --btn-primary-bg-h: var(--c-signal-600);
    --btn-ghost-fg:     var(--fg-body);
    --btn-ghost-border: var(--border-strong);
    --card-bg:      #FFFFFF;
    --card-border:  var(--border-hair);
    --field-bg:     #FFFFFF;
    --field-border: var(--border-subtle);
    --field-fg:     var(--fg-body);
    --field-placeholder: var(--fg-faint);
    --quote-bg:     #FFFFFF;
    --quote-border: var(--border-subtle);
    --rule-color:   var(--border-hair);
  }

  /* The second ground, inside the skin. design-tokens.css binds .on-paper from ink-050 and
     ink-800, and this skin has re-cut those; without this block the paper bands would invert. */
  body[data-tema] .on-paper {
    --bg-page:    #FFFFFF;
    --bg-surface: #FFFFFF;
    --bg-raised:  #FFFFFF;
    --bg-sunken:  #F2F5FA;
    --bg-inset:   color-mix(in srgb, var(--c-skin-ink) 5%, transparent);
    --fg-body:    #24303F;
    --fg-strong:  #0E1724;
    --fg-muted:   #46536A;
    --fg-faint:   #566175;
    --border-hair:   color-mix(in srgb, var(--c-skin-ink) 11%, transparent);
    --border-subtle: color-mix(in srgb, var(--c-skin-ink) 19%, transparent);
    --border-strong: color-mix(in srgb, var(--c-skin-ink) 32%, transparent);
    --card-bg:    #FFFFFF;
    --field-bg:   #FFFFFF;
    --quote-bg:   #FFFFFF;
    --rule-color: var(--border-hair);
  }
}

@layer components {
  /* --- the few places the night skin put white text on a dark chip --- */
  body[data-tema] .field__box select option { background: #FFFFFF; color: var(--fg-body); }
  body[data-tema] .car__art--photo .car__badge {
    color: var(--fg-strong);
    background: color-mix(in srgb, #FFFFFF 84%, transparent);
    border-color: var(--border-subtle);
  }
  body[data-tema] .ground__grain { mix-blend-mode: multiply; opacity: .03; }
  body[data-tema] .ground__skyline { color: var(--c-skin-ink); opacity: .10; }
  body[data-tema] .map-route-halo { stroke: #FFFFFF; stroke-opacity: .8; }

  /* --- the hero: the photograph is a wash under the words, never a backdrop over them --- */
  /* Revision 8, 2026-09-23: the member wants the picture as legible here as it is on the night
     page. It is opened by raising the photograph and thinning the veil ONLY on the right half -
     the headline lives in the left 46%, which keeps the 94/86% cover it always had. */
  body[data-tema] .ground__photo {
    filter: saturate(.74) brightness(1.1) contrast(.98);
    opacity: .74;
  }
  body[data-tema] .ground__shade {
    background:
      linear-gradient(to top, var(--bg-page) 0%, transparent 42%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--bg-page) 94%, transparent) 0%,
        color-mix(in srgb, var(--bg-page) 86%, transparent) 46%,
        color-mix(in srgb, var(--bg-page) 44%, transparent) 60%,
        color-mix(in srgb, var(--bg-page) 26%, transparent) 100%);
  }
  @media (max-width: 63.99rem) {
    body[data-tema] .ground__shade { background: color-mix(in srgb, var(--bg-page) 82%, transparent); }
  }

  /* ------------------------------------------------------------------------
     THE THREE TREATMENTS. One markup, three pages that do not look related:
       a  the photograph beside the words, hairline cards, calm green
       b  the photograph behind everything, round soft cards, warm sand
       c  almost no photograph, sharp bordered cards, cool slate
     ------------------------------------------------------------------------ */

  /* The wash is graded for the night page in site.css; on paper it has to go the other way. */
  /* The band wash carries body copy directly over it, so it is raised in opacity but also
     lifted in brightness: the picture reads, the mid-tones stay well under the text. */
  body[data-tema] .ground__photo--wash { filter: saturate(.68) brightness(1.18) contrast(.96); }
  body[data-tema] .shot img { filter: saturate(.95) contrast(1.02); }

  /* a - Sakin */
  body[data-tema="a"] .ground__photo--wash { opacity: .38; }

  /* b - Acik: one picture under the whole hero, and softer geometry throughout */
  body[data-tema="b"] {
    --r-sm: 8px; --r-md: 16px; --r-lg: 26px;
    --card-border: transparent;
  }
  body[data-tema="b"] .ground__photo {
    inset-inline: 0; inset-block-start: 0; left: auto;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%;
    opacity: .78;
  }
  /* b carries one picture behind the whole hero, so its veil covers the copy as well as the
     picture. It is the design that read as fog: opened to 62/50% and the photograph raised. */
  body[data-tema="b"] .ground__shade {
    background: linear-gradient(to top,
      var(--bg-page) 0%,
      color-mix(in srgb, var(--bg-page) 62%, transparent) 55%,
      color-mix(in srgb, var(--bg-page) 50%, transparent) 100%);
  }
  body[data-tema="b"] .ground__photo { filter: saturate(.8) brightness(1.02) contrast(1.02); }
  body[data-tema="b"] .car, body[data-tema="b"] .review,
  body[data-tema="b"] .booker, body[data-tema="b"] .qa { box-shadow: var(--e-2); }
  body[data-tema="b"] .ground__photo--wash {
    opacity: .36;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 70%, transparent);
  }
  body[data-tema="b"] .ground__grid { display: none; }

  /* c - Kagit: the drawing does the work, the photograph is barely there */
  body[data-tema="c"] {
    --r-sm: 2px; --r-md: 4px; --r-lg: 6px;
    --border-hair: color-mix(in srgb, var(--c-skin-ink) 16%, transparent);
  }
  body[data-tema="c"] .ground__photo { opacity: .72; filter: saturate(.62) brightness(1.06) contrast(.98); }
  body[data-tema="c"] .ground__photo--wash { opacity: .30; }
  body[data-tema="c"] .car, body[data-tema="c"] .review,
  body[data-tema="c"] .booker, body[data-tema="c"] .qa { box-shadow: none; }
  body[data-tema="c"] .ground__field { opacity: .55; }

  /* --- the theme switch, shown inside the demo flag on a rotating demo --- */
  .tema-switch { display: inline-flex; gap: var(--sp-2); align-items: baseline; margin-inline-start: var(--sp-3); }
  .tema-switch a { color: inherit; opacity: .72; }
  .tema-switch a:hover { opacity: 1; }
  .tema-switch a[aria-current="true"] { opacity: 1; font-weight: 700; text-decoration: none; }
}

/* ==========================================================================
   REVISION 10 - 2026-09-24
   Revision 9 raised the photographs and put every block of words on a frosted panel. The
   member saw it and asked for the opposite on both counts: the line where one band's picture
   ends and the next begins read as a seam, and the words look better free on the picture than
   boxed. What he asked for instead, after the night skin (a navy ground the photograph
   shows through):
     - ONE tinted ground under the whole site, in each design's own colour (a green, b sand,
       c blue). No band has a ground of its own and no band has a top rule, so there is no
       edge to see.
     - The photograph at the very bottom of its band, with the design's colour laid over it
       like a filter - light, so the picture is still read, strong enough that the words sit
       on it without a panel. The band's whole ground fades in and out over 8rem, into the
       same tint, so where a photograph starts is not a line.
     - Bands alternate: a photograph, then a drawn motif (waves, orbits, a route network),
       then a photograph. The motifs are generated in tenant-assets/ornek/gen.mjs.
   ========================================================================== */

@layer tokens {
  /* The one ground. --tint is the page; the three ink surfaces the bands, the header and
     the footer read raw are re-cut to it, so every one of them lands on the same colour. */
  body[data-tema="a"], body[data-tema="a"] .on-paper { --tint: #E9F3ED; }
  body[data-tema="b"], body[data-tema="b"] .on-paper { --tint: #F6EDE2; }
  body[data-tema="c"], body[data-tema="c"] .on-paper { --tint: #E7EEF7; }
  body[data-tema], body[data-tema] .on-paper {
    --bg-page: var(--tint);
    --c-ink-950: var(--tint);
    --c-ink-900: var(--tint);
    --c-ink-800: var(--tint);
  }
}

@layer components {
  body[data-tema] { background: var(--tint); }
  body[data-tema] :is(.band, .trust) { background: transparent; }
  body[data-tema] .band + .band { border-top: 0; }
  body[data-tema] .trust { border-block: 0; }

  /* --- a band with a photograph: photograph, then the colour, then the words --- */
  body[data-tema] .ground:has(> .ground__photo--wash) {
    isolation: isolate;
    background: var(--tint);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8rem, #000 calc(100% - 8rem), transparent 100%);
  }
  /* The words are on the left, so the picture is fainter there and full on the right. */
  body[data-tema] .ground > .ground__photo--wash {
    opacity: var(--wash, .56);
    filter: grayscale(.35) contrast(1.04);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.5) 45%, #000 78%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.5) 45%, #000 78%);
  }
  /* The filter: the design's colour, blended as hue, over the photograph only. */
  body[data-tema] .ground:has(> .ground__photo--wash)::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--c-signal-600);
    mix-blend-mode: color;
    opacity: .42;
  }
  body[data-tema="a"] { --wash: .58; }
  body[data-tema="b"] { --wash: .62; }
  body[data-tema="c"] { --wash: .54; }

  /* Free words on a picture: a soft halo in the ground colour, not a box. */
  body[data-tema] .band:has(> .ground > .ground__photo--wash) :is(
    .band-head, .timeline--stages, .steps, .rating, .routes__note, .chips, .faq
  ) {
    text-shadow: 0 0 18px var(--tint), 0 0 6px var(--tint), 0 0 2px var(--tint);
  }
  body[data-tema] .band:has(> .ground > .ground__photo--wash) .faq .qa p { color: var(--fg-body); }
  /* The steps run the full width, so the picture under them is evenly faint, not faint on the left only. */
  body[data-tema] .band:has(.steps) .ground > .ground__photo--wash {
    opacity: calc(var(--wash) * .52);
    -webkit-mask-image: none; mask-image: none;
  }
  body[data-tema] .band:has(> .ground > .ground__photo--wash) :is(.steps p, .step p) { color: var(--fg-body); }

  /* --- a band with a drawn motif --- */
  body[data-tema] .ground__motif {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    color: var(--c-signal-600);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
  }
  @media (max-width: 40rem) {
    body[data-tema] .ground__motif { opacity: .55; }
  }

  /* --- the hero: the same order, photograph, colour, words; the words are free --- */
  body[data-tema] .hero .ground { isolation: isolate; }
  body[data-tema] .hero .ground__photo { opacity: .9; filter: grayscale(.25) contrast(1.04); }
  /* the road ahead, seen through the windscreen at dusk, sits to the right and melts into the page on the left, so the words
     sit on a clear ground, as on the reference site (member, 2026-09-28) */
  @media (min-width: 64rem) {
    body[data-tema] .hero .ground__photo {
      left: 36%; right: auto; top: 0; width: 64%; height: 100%;
      object-fit: cover; object-position: 50% 50%;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
              mask-image: linear-gradient(to right, transparent 0, #000 34%);
    }
    [dir="rtl"] body[data-tema] .hero .ground__photo {
      left: 0;
      -webkit-mask-image: linear-gradient(to left, transparent 0, #000 34%);
              mask-image: linear-gradient(to left, transparent 0, #000 34%);
    }
  }
  body[data-tema] .hero .ground::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--c-signal-600);
    mix-blend-mode: color;
    opacity: .38;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 35%);
    mask-image: linear-gradient(to top, transparent 0, #000 35%);
  }
  body[data-tema] .ground__shade {
    background:
      linear-gradient(to top, var(--tint) 0%, transparent 32%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--tint) 88%, transparent) 0%,
        color-mix(in srgb, var(--tint) 74%, transparent) 42%,
        color-mix(in srgb, var(--tint) 30%, transparent) 64%,
        color-mix(in srgb, var(--tint) 10%, transparent) 100%);
  }
  body[data-tema="b"] .ground__shade {
    background:
      linear-gradient(to top, var(--tint) 0%, transparent 34%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--tint) 84%, transparent) 0%,
        color-mix(in srgb, var(--tint) 66%, transparent) 50%,
        color-mix(in srgb, var(--tint) 34%, transparent) 100%);
  }
  body[data-tema] .hero .lift { text-shadow: 0 0 22px var(--tint), 0 0 6px var(--tint); }
  @media (max-width: 63.99rem) {
    body[data-tema] .ground__shade,
    body[data-tema="b"] .ground__shade {
      background:
        linear-gradient(to top, var(--tint) 0%, transparent 30%),
        color-mix(in srgb, var(--tint) 72%, transparent);
    }
  }
}

/* ==========================================================================
   REVISION 11 - 2026-09-28: 'w', PLAIN WHITE
   The member chose white for the first agency, like the reference site (istanbulshuttleport.com):
   white all the way down, one accent, the hero photograph shown as it is and fading to white
   where the words are. No tinted ground, no colour laid over the picture, no drawn grid.
   The agency keeps the template's own palette; only the ground changes.
   ========================================================================== */

@layer tokens {
  body[data-tema="w"], body[data-tema="w"] .on-paper { --tint: #FFFFFF; }
  body[data-tema="w"] { --bg-sunken: #F6F7F9; }
}

@layer components {
  body[data-tema="w"] { --wash: .5; }
  body[data-tema="w"] .hero .ground::after { display: none; }
  body[data-tema="w"] .hero .ground__photo { opacity: 1; filter: none; }
  body[data-tema="w"] :is(.ground__grid, .ground__field) { display: none; }
  body[data-tema="w"] :is(.car, .review, .booker, .qa, .tour) { box-shadow: var(--e-2); }
  /* The footer and the trust strip are the only lines between parts of a white page. */
  body[data-tema="w"] .footer { border-block-start: 1px solid var(--border-hair); }
  body[data-tema="w"] .trust { border-block: 1px solid var(--border-hair); }
}

/* ==========================================================================
   REVISION 13 - 2026-10-03: 'd', THE MEMBER'S OWN DRAWING FOR THE DEMO
   His design package (screens/demo-agency.html): a navy top bar, a white header, a hero
   photograph under a navy-to-blue veil with white words and the booker as a white card beside
   them, then white and light grey bands with centred heads and soft white cards, one dark
   "why us" band, a teal call-to-book card and a navy footer. Inter for the words, Playfair
   Display for the headlines, teal for the action. His teal (#00BFA5) is 2.3:1 under white
   text, so it is the light step here and the buttons take #007A68 (src/tenants/ornek.ts).
   Left out on his word: the fleet band. Kept from the site: every band it already had, the
   language list, Giriş yap / Üye ol, and empty fields with no example text in them.
   ========================================================================== */

@layer tokens {
  body[data-tema="d"], body[data-tema="d"] .on-paper {
    --tint: #FFFFFF;
    --d-navy: #1A2733;
    --d-blue: #0F4C81;
    --d-sky: #1E88E5;
    --d-grey: #F5F7FA;
    --d-line: #E0E7ED;
    --d-slate: #546E7A;     /* 5.0:1 on the grey, 5.4:1 on white */
    --c-skin-ink: #1A2733;
    --bg-sunken: #F5F7FA;
    --fg-body: #1A2733;
    --fg-strong: #1A2733;
    --fg-muted: #546E7A;
    --fg-faint: #546E7A;
    --border-hair: #E0E7ED;
    --border-subtle: #E0E7ED;
    --field-bg: #F5F7FA;
    --field-border: #E0E7ED;
    --card-border: transparent;
    --r-sm: 10px; --r-md: 12px; --r-lg: 24px;
    --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-data: var(--f-body);
    /* 2026-10-13 (the member): codes and numbers (TÜRSAB no, phone, MERSİS, tax no) in Inter.
       Design d never loads JetBrains Mono, so they fell back to Consolas, whose 0 reads as an 8.
       Inter's figures stay tabular through .code's tnum. */
    --f-mono: var(--f-body);
    --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --ls-head: 0;
  }
}

@layer components {
  /* --- the grounds: no photograph and no drawn motif under any band but the hero --- */
  body[data-tema="d"] :is(.ground__grid, .ground__field, .ground__grain, .ground__motif) { display: none; }
  /* --d-alt is the other ground: what a card or a label sits on inside the band */
  body[data-tema="d"] .band { background: #FFFFFF; --d-alt: var(--d-grey); }
  body[data-tema="d"] :is(#hizmetler, #karsilama, #turlar, #sss, #iletisim) { background: var(--d-grey); --d-alt: #FFFFFF; }
  /* while the review band is hidden, the bands after it swap so two greys never meet */
  body[data-tema="d"] :is(#yorumlar[hidden] ~ #sss, #yorumlar[hidden] ~ #iletisim) { background: #FFFFFF; --d-alt: var(--d-grey); }
  body[data-tema="d"] #yorumlar[hidden] ~ #hemen { background: var(--d-grey); --d-alt: #FFFFFF; }
  body[data-tema="d"] .trust { display: none; }

  /* --- type: Playfair for the headlines, Inter for everything a person reads or taps --- */
  body[data-tema="d"] :is(h1, h2) { font-weight: 700; letter-spacing: 0; }
  body[data-tema="d"] :is(h3, h4, .logo__text) { font-family: var(--f-body); letter-spacing: 0; }
  body[data-tema="d"] .band-head { justify-items: center; text-align: center; margin-inline: auto; max-width: 46rem; }
  body[data-tema="d"] .reviews__top .band-head { justify-items: start; text-align: start; margin-inline: 0; }
  /* a centred head cannot be justified (site.css justifies .band-head p from 40rem) */
  @media (min-width: 40rem) {
    body[data-tema="d"] .band-head p { text-align: center; text-align-last: center; }
    body[data-tema="d"] :is(.reviews__top .band-head p, .hero__lede) { text-align: start; text-align-last: start; }
  }
  body[data-tema="d"] .band-head .label {
    justify-self: center; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
    background: var(--d-alt); color: var(--c-signal-700);
    font-size: var(--fs-1); font-weight: 600; letter-spacing: 0; text-transform: none;
  }

  /* --- top bar, header, buttons --- */
  body[data-tema="d"] .topbar { background: var(--d-navy); border: 0; color: #FFFFFF; }
  body[data-tema="d"] .topbar :is(.label, strong, a) { color: #FFFFFF; }
  body[data-tema="d"] .topbar .label { text-transform: none; letter-spacing: 0; font-weight: 400; }
  body[data-tema="d"] .header {
    background: #FFFFFF; backdrop-filter: none;
    border-block-end: 1px solid var(--d-line);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--d-navy) 6%, transparent);
  }
  @media (min-width: 62rem) { body[data-tema="d"] .header__in { min-height: 5rem; } }
  body[data-tema="d"] .header .logo__mark {
    width: 44px; height: 44px; padding: 9px; border-radius: 12px; color: #FFFFFF;
    background: linear-gradient(135deg, var(--d-blue), var(--d-sky));
  }
  body[data-tema="d"] .logo__text { font-weight: 700; font-size: var(--fs-2); letter-spacing: .02em; }
  body[data-tema="d"] .nav a { color: var(--d-navy); font-weight: 500; }
  body[data-tema="d"] .nav a:hover { color: var(--c-signal-700); }
  body[data-tema="d"] .btn { border-radius: var(--r-md); }
  body[data-tema="d"] .btn--primary { box-shadow: 0 8px 18px color-mix(in srgb, var(--c-signal-700) 24%, transparent); }

  /* --- the hero: the photograph under the whole band, a navy-to-blue veil, white words --- */
  body[data-tema="d"] .hero { background: var(--d-navy); padding-block: clamp(3rem, 2rem + 5vw, 6.5rem); }
  /* 2026-10-13 (the member): a fixed height, not the band's. At height: 100% choosing "Tek yön"
     or "Gidiş - Dönüş" changed the band's height, so the picture re-scaled and jumped. Now the
     booker grows over a still picture, which fades into the navy if the band outgrows it. */
  body[data-tema="d"] .hero .ground__photo {
    inset: 0 0 auto; left: 0; width: 100%; height: 75rem;
    object-fit: cover; object-position: 50% 50%;
    opacity: 1; filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
    mask-image: linear-gradient(to bottom, #000 85%, transparent);
  }
  body[data-tema="d"] .hero .ground__shade { display: none; }
  body[data-tema="d"] .hero .ground::after {
    content: ""; position: absolute; inset: 0;
    mix-blend-mode: normal; opacity: 1;
    -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--d-navy) 92%, transparent) 0%,
      color-mix(in srgb, var(--d-blue) 82%, transparent) 50%,
      color-mix(in srgb, var(--d-blue) 30%, transparent) 100%);
  }
  @media (max-width: 63.99rem) {
    body[data-tema="d"] .hero .ground::after {
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--d-navy) 90%, transparent),
        color-mix(in srgb, var(--d-blue) 86%, transparent));
    }
  }
  body[data-tema="d"] .hero .lift { text-shadow: none; }
  body[data-tema="d"] .hero h1 { color: #FFFFFF; max-width: 14ch; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1.12; }
  body[data-tema="d"] .hero h1 em { display: block; color: var(--c-signal-400); }
  body[data-tema="d"] .hero__lede { color: color-mix(in srgb, #FFFFFF 90%, transparent); font-size: var(--fs-3); text-align: start; }
  body[data-tema="d"] .hero__eyebrow {
    border: 0; background: color-mix(in srgb, #FFFFFF 12%, transparent);
    color: #FFFFFF; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-1);
  }
  body[data-tema="d"] .hero__eyebrow svg { color: var(--c-signal-400); }
  body[data-tema="d"] .hero__eyebrow b { color: #FFFFFF; font-weight: 600; }
  /* The eyebrow's text may break onto a second line inside the pill instead of running out of it
     on a narrow phone (the member, 2026-10-18: "o alanın dışına taşmasın"). */
  body[data-tema="d"] .hero__eyebrow { max-inline-size: 100%; flex-wrap: wrap; row-gap: var(--sp-1); column-gap: var(--sp-3); }
  @media (max-width: 30rem) { body[data-tema="d"] .hero__eyebrow { border-radius: var(--r-lg); font-size: var(--fs-0); } }
  /* Two by two since 2026-10-18: four figures (the member: "toplamda 4 olsun") left the fourth
     alone on a second row when they wrapped as a flex line. */
  body[data-tema="d"] .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--sp-4) var(--sp-7); margin-block-start: var(--sp-6); }
  body[data-tema="d"] .hero__stat { display: flex; align-items: center; gap: var(--sp-3); color: #FFFFFF; }
  body[data-tema="d"] .hero__stat-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md);
    background: color-mix(in srgb, #FFFFFF 12%, transparent); color: var(--c-signal-400);
  }
  body[data-tema="d"] .hero__stat-icon svg { width: 24px; height: 24px; }
  body[data-tema="d"] .hero__stat b { display: block; font-size: var(--fs-4); font-weight: 700; line-height: 1.1; }
  body[data-tema="d"] .hero__stat span { font-size: var(--fs-1); color: color-mix(in srgb, #FFFFFF 82%, transparent); }

  /* the copy on the left, the booker as a card on the right.
     2026-10-16 (the member): the copy is pinned to the top, not centred. Centred, it moved down
     every time "Gidiş - Dönüş", "Saatlik" or "Turlar" made the card taller. The padding puts it
     where centring put it beside the one-way card, the shortest. */
  @media (min-width: 64rem) {
    body[data-tema="d"] .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: start; gap: var(--sp-8); }
    body[data-tema="d"] .hero__grid > .lift:first-child { max-width: none; padding-block-start: var(--sp-7); }
  }

  /* --- the booker card --- */
  body[data-tema="d"] .hero .booker--bar {
    grid-template-columns: minmax(0, 1fr); gap: var(--sp-4);
    background: #FFFFFF; border: 0; border-radius: var(--r-lg);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--d-navy) 35%, transparent);
    padding: var(--sp-6);
  }
  body[data-tema="d"] .hero .booker--bar::before { display: none; }
  body[data-tema="d"] .hero .booker--bar > * { grid-column: 1; grid-row: auto; }
  body[data-tema="d"] .hero .booker--bar > .booker__go { width: 100%; padding-inline: var(--sp-5); }
  body[data-tema="d"] .booker__top--types { display: grid; gap: var(--sp-2); justify-content: stretch; }
  body[data-tema="d"] .booker__title { font-family: var(--f-body); font-size: var(--fs-4); font-weight: 700; margin-block-end: var(--sp-3); }
  body[data-tema="d"] .booker .label {
    color: var(--d-navy); font-size: var(--fs-1); font-weight: 500;
    letter-spacing: 0; text-transform: none;
  }
  /* Every type the agency offers on one row (2026-10-03, the member: "diğerlerini biraz daraltıp
     saatliği de yanına koyup ... üçünü yan yana"): one column per visible button, so Tek yön,
     Gidiş - Dönüş and Saatlik share a line. With Turlar too, four would be cramped, so they go
     two by two. Gidiş - Dönüş carries the longest word and the discount under it, so it takes a
     wider share of the row (the member, the same night: "yazısı sanki biraz sıkışmış"). */
  body[data-tema="d"] .booker .booker__types {
    display: flex; gap: var(--sp-2);
    background: none; padding: 0; border-radius: 0; overflow: visible;
  }
  body[data-tema="d"] .booker .booker__types > button { flex: 1 1 0; }
  body[data-tema="d"] .booker .booker__types > button[data-mode="round"] { flex-grow: 1.5; }
  body[data-tema="d"] .booker .booker__types:has(> button:nth-of-type(4):not([hidden])) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-tema="d"] .booker .booker__types button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 52px; padding: var(--sp-2); border-radius: var(--r-md);
    background: var(--d-grey); color: var(--d-slate); box-shadow: none;
    font-size: var(--fs-1); font-weight: 600; white-space: nowrap; min-width: 0;
  }
  /* On a narrow card the icon goes above the word, so three still fit side by side. */
  @media (max-width: 30rem) {
    body[data-tema="d"] .booker .booker__types button { flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-1); min-height: 60px; }
  }
  body[data-tema="d"] .booker .booker__types button:hover { background: var(--d-line); }
  body[data-tema="d"] .booker .booker__types button[aria-pressed="true"] { background: var(--c-signal-700); color: #FFFFFF; }
  body[data-tema="d"] .booker .booker__types svg { width: 16px; height: 16px; flex: none; }
  body[data-tema="d"] .booker__types .booker__deal { font-size: .72rem; font-weight: 600; color: var(--c-signal-700); }
  body[data-tema="d"] .booker__types [aria-pressed="true"] .booker__deal { color: #FFFFFF; }

  /* every field on its own line; date and time side by side, as drawn */
  body[data-tema="d"] .hero .booker__bar { flex-wrap: wrap; gap: var(--sp-4) var(--sp-3); }
  body[data-tema="d"] .hero .booker__bar > .field,
  body[data-tema="d"] .hero .booker__bar > .field.booker__place { flex: 1 1 100%; min-width: 0; }
  body[data-tema="d"] .hero .booker__bar > .field:has(:is([type="date"], [type="time"])),
  body[data-tema="d"] .hero .booker__bar:has(> [data-for="hourly"]:not([hidden])) > .field:is(:has([name="hours"]), :has([name="pax"])) { flex: 1 1 calc(50% - var(--sp-3)); }
  body[data-tema="d"] .hero .booker--bar .booker__swap { display: none; }
  body[data-tema="d"] .hero .booker__return { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-tema="d"] .booker .field__box { min-height: 48px; padding-inline: var(--sp-4); gap: var(--sp-3); }
  body[data-tema="d"] .booker .field__box svg { color: var(--d-slate); }
  body[data-tema="d"] .booker .field__box input,
  body[data-tema="d"] .booker .field__box select { font-size: var(--fs-1); color: var(--d-navy); }
  /* 2026-10-03: the member wants the sample places back in the empty fields */
  body[data-tema="d"] .booker .field__box input::placeholder { color: var(--d-slate); opacity: .75; }
  /* the drawing puts a calendar and a clock in the date and time fields */
  body[data-tema="d"] .hero .booker .field__box:has(> :is([type="date"], [type="time"]))::before {
    content: ""; width: 18px; height: 18px; flex: none; background: var(--d-slate);
    -webkit-mask: var(--d-ico) center / contain no-repeat; mask: var(--d-ico) center / contain no-repeat;
  }
  body[data-tema="d"] .hero .booker .field__box:has(> [type="date"]) {
    --d-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  }
  body[data-tema="d"] .hero .booker .field__box:has(> [type="time"]) {
    --d-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  }
  /* a phone keeps the date and the time side by side; the drawn icons give way to the digits */
  @media (max-width: 30rem) {
    body[data-tema="d"] .hero .booker--bar { padding: var(--sp-5); }
    body[data-tema="d"] .booker .field__box:has(> :is([type="date"], [type="time"])) { padding-inline: var(--sp-3); }
    body[data-tema="d"] .hero .booker .field__box:has(> :is([type="date"], [type="time"]))::before { display: none; }
  }
  body[data-tema="d"] .booker__go {
    min-height: 56px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--c-signal-700), var(--c-signal-600));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--c-signal-700) 30%, transparent);
  }
  body[data-tema="d"] .booker__foot ul { justify-content: center; }
  body[data-tema="d"] .booker__foot svg { color: var(--c-signal-700); }

  /* The whole card on the first screen (the member, 2026-10-18: "site ilk açıldığında transfer
     formu tam görünecek"). Measured at 1366x768 the card ended 250px below the fold, the button
     150px. On a wide screen: less air above the band, the service types on one row with the icon
     over the word, date, time and passengers side by side, "Transfer tipi" kept for screen
     readers only, and the three promises under the button on one line. */
  @media (min-width: 64rem) {
    body[data-tema="d"] .hero { padding-block: var(--sp-5) var(--sp-8); }
    /* Only the band on the first screen (the member, the same day: "aşağıdan hizmetlerimiz
       sayfasının başlığı ve yazıları görünmesin"): the band reaches the bottom of the window, the
       top bar (44px) and the sticky header (81px) above it, and its content sits in the middle. At
       1920x1080 "Hizmetlerimiz" showed 110px above the fold. */
    body[data-tema="d"] .hero { display: grid; align-content: center; min-height: calc(100svh - 7.8125rem); }
    body[data-tema="d"] .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
    /* The copy lines up with the card (the member, the same day: "formu yandaki yazıyla tam uyumlu
       şekilde hizala"): the eyebrow's top on the card title's, the last figure's foot on the
       promises' line. The card's padding above, the stats' gap trimmed to land on that line. */
    body[data-tema="d"] .hero__grid > .lift:first-child { padding-block-start: var(--sp-5); }
    body[data-tema="d"] .hero__stats { margin-block-start: 1.625rem; }
    body[data-tema="d"] .hero .booker--bar { gap: var(--sp-3); padding: var(--sp-5); }
    body[data-tema="d"] .booker__title { font-size: var(--fs-3); margin-block-end: 0; }
    body[data-tema="d"] .booker__top--types > .label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    body[data-tema="d"] .booker .booker__types:has(> button:nth-of-type(4):not([hidden])) { display: flex; }
    body[data-tema="d"] .booker .booker__types button { flex-direction: column; gap: 2px; min-height: 56px; padding: var(--sp-2) var(--sp-1); }
    body[data-tema="d"] .hero .booker__bar { gap: var(--sp-3); }
    body[data-tema="d"] .hero .booker .field { gap: var(--sp-1); }
    body[data-tema="d"] .hero .booker__bar > .field:has(:is([type="date"], [type="time"], [name="pax"])) { flex: 1 1 calc(30% - var(--sp-3)); }
    /* The date's digits and its calendar button need the most room: at a third each they touched. */
    body[data-tema="d"] .hero .booker__bar > .field:has([type="date"]) { flex-basis: calc(36% - var(--sp-3)); }
    body[data-tema="d"] .booker .field__box { min-height: 44px; }
    body[data-tema="d"] .booker .field__box:has(> :is([type="date"], [type="time"])) { padding-inline: var(--sp-3); }
    body[data-tema="d"] .hero .booker .field__box:has(> :is([type="date"], [type="time"]))::before { display: none; }
    body[data-tema="d"] .hero .booker .field__box.counter > svg { display: none; }
    body[data-tema="d"] .booker__go { min-height: 52px; }
    body[data-tema="d"] .booker__foot ul { flex-wrap: nowrap; gap: var(--sp-3); white-space: nowrap; }
  }

  /* The card on a phone's first screen too (the member approved the picture, 2026-10-18: "telefon
     düzenini de onaylıyorum"). Before, the heading, lede and figures filled the screen and the
     card started below it. Now the heading, then the card, then the eyebrow, lede and figures;
     the copy block opens up (display: contents) so its parts can be ordered around the card. The
     types on one row, "Transfer tipi" for screen readers only, the promises under the button
     hidden. At 390x844 the button ends at 735px, above the sticky bottom bar; at 360x780 it is
     still behind it. */
  @media (max-width: 63.99rem) {
    body[data-tema="d"] .hero { padding-block-start: var(--sp-4); }
    body[data-tema="d"] .hero__grid { gap: var(--sp-4); }
    body[data-tema="d"] .hero__grid > .lift:first-child { display: contents; }
    body[data-tema="d"] .hero h1 { order: 1; margin: 0; font-size: 1.9rem; }
    body[data-tema="d"] .hero .booker { order: 2; }
    body[data-tema="d"] .hero__eyebrow { order: 3; justify-self: start; margin: var(--sp-2) 0 0; }
    body[data-tema="d"] .hero__lede { order: 4; margin: 0; }
    body[data-tema="d"] .hero__stats { order: 5; margin-block-start: var(--sp-2); }
    body[data-tema="d"] .hero .booker--bar { gap: .75rem; padding: 1.1rem; }
    body[data-tema="d"] .booker__title { font-size: 1.2rem; margin: 0; }
    body[data-tema="d"] .booker__top--types > .label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    body[data-tema="d"] .booker .booker__types:has(> button:nth-of-type(4):not([hidden])) { display: flex; }
    body[data-tema="d"] .booker .booker__types { gap: .4rem; }
    body[data-tema="d"] .hero .booker--bar .booker__types > button,
    body[data-tema="d"] .hero .booker--bar .booker__types > button[data-mode="round"] { flex: 1 1 auto; min-height: 54px; font-size: .78rem; padding: .4rem .5rem; }
    body[data-tema="d"] .hero .booker__bar { gap: .6rem; }
    body[data-tema="d"] .hero .booker .field { gap: .2rem; }
    body[data-tema="d"] .booker .field__box { min-height: 44px; }
    body[data-tema="d"] .booker__go { min-height: 50px; }
    body[data-tema="d"] .booker__foot { display: none; }
    /* A word may break inside its button: at 360 wide the four overran the card by 25px. */
    body[data-tema="d"] .hero .booker--bar .booker__types > button { min-width: 0; white-space: normal; line-height: 1.15; }
  }

  /* "Saatlik" in two even columns (the member, 2026-10-18: "saatlik seçince tarih süre yolcu
     kısımları hizalı gelmiyor"): the wide date and narrow time of the transfer row made the top
     row uneven over an even "Süre / Yolcu" row. And one height for every box: the date, time,
     select and counter boxes were 44 to 48px, so the labels beside each other sat 1-2px apart. */
  body[data-tema="d"] .hero .booker__bar:has(> [data-for="hourly"]:not([hidden])) > .field:is(:has([type="date"]), :has([type="time"]), :has([name="hours"]), :has([name="pax"])) {
    flex: 1 1 calc(50% - var(--sp-3));
  }
  body[data-tema="d"] .hero .booker__bar > .field > .field__box { height: 46px; min-height: 0; }

  /* --- services --- */
  body[data-tema="d"] .services__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  body[data-tema="d"] .service {
    display: grid; gap: var(--sp-3); align-content: start;
    background: #FFFFFF; border-radius: 18px; padding: var(--sp-6);
    transition: box-shadow var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
  }
  body[data-tema="d"] .service:hover { box-shadow: var(--e-3); translate: 0 -4px; }
  body[data-tema="d"] .service__icon {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
    color: #FFFFFF; margin-block-end: var(--sp-3);
  }
  body[data-tema="d"] .service__icon svg { width: 30px; height: 30px; }
  body[data-tema="d"] .service__icon--teal { background: linear-gradient(135deg, var(--c-signal-400), var(--c-signal-700)); }
  body[data-tema="d"] .service__icon--blue { background: linear-gradient(135deg, var(--d-sky), #1565C0); }
  body[data-tema="d"] .service__icon--violet { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
  body[data-tema="d"] .service h3 { font-size: var(--fs-3); }
  body[data-tema="d"] .service p { font-size: var(--fs-1); color: var(--d-slate); }
  body[data-tema="d"] .service ul { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-2); font-size: var(--fs-1); }
  body[data-tema="d"] .service li { display: flex; align-items: center; gap: var(--sp-2); }
  body[data-tema="d"] .service li svg { width: 16px; height: 16px; color: var(--c-signal-700); flex: none; }

  /* --- why us: the one dark band --- */
  body[data-tema="d"] .band.why { background: linear-gradient(135deg, var(--d-navy), var(--d-blue)); color: #FFFFFF; }
  body[data-tema="d"] .why :is(h2, h3) { color: #FFFFFF; }
  body[data-tema="d"] .why .band-head p { color: color-mix(in srgb, #FFFFFF 82%, transparent); }
  body[data-tema="d"] .why__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); text-align: center; }
  body[data-tema="d"] .why__item { display: grid; justify-items: center; gap: var(--sp-2); }
  body[data-tema="d"] .why__icon {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin-block-end: var(--sp-2);
    background: color-mix(in srgb, #FFFFFF 10%, transparent); color: var(--c-signal-400);
  }
  body[data-tema="d"] .why__icon svg { width: 30px; height: 30px; }
  body[data-tema="d"] .why h3 { font-size: var(--fs-2); font-weight: 600; }
  body[data-tema="d"] .why p { font-size: var(--fs-1); color: color-mix(in srgb, #FFFFFF 76%, transparent); }

  /* --- the cards the site already had, in the drawing's soft white --- */
  body[data-tema="d"] :is(.tour, .qa, .contact a, .contact div, .review) { border-color: transparent; border-radius: 18px; background: var(--d-alt); }
  body[data-tema="d"] .faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--sp-3); }
  body[data-tema="d"] .qa { padding: var(--sp-2) var(--sp-5); border: 0; }
  body[data-tema="d"] .qa summary { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
  @media (min-width: 40rem) {
    body[data-tema="d"] :is(.tour__body p, .footer__about p) { text-align: start; text-align-last: start; }
  }
  body[data-tema="d"] .contact svg { color: var(--c-signal-700); }
  body[data-tema="d"] .step { border-block-start-color: var(--d-line); }

  /* --- call to book --- */
  body[data-tema="d"] .cta__card {
    position: relative; overflow: hidden; display: grid; justify-items: center; gap: var(--sp-4);
    padding: clamp(2rem, 1rem + 4vw, 3.5rem); border-radius: var(--r-lg); text-align: center;
    background: linear-gradient(135deg, var(--c-signal-600), #006454); color: #FFFFFF;
  }
  body[data-tema="d"] .cta__card::before,
  body[data-tema="d"] .cta__card::after {
    content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, #FFFFFF 10%, transparent);
  }
  body[data-tema="d"] .cta__card::before { width: 16rem; height: 16rem; inset-block-start: -8rem; inset-inline-end: -8rem; }
  body[data-tema="d"] .cta__card::after { width: 12rem; height: 12rem; inset-block-end: -6rem; inset-inline-start: -6rem; }
  body[data-tema="d"] .cta__card > * { position: relative; }
  body[data-tema="d"] .cta__card h2 { color: #FFFFFF; }
  body[data-tema="d"] .cta__card p { max-width: 44rem; font-size: var(--fs-2); color: color-mix(in srgb, #FFFFFF 92%, transparent); }
  body[data-tema="d"] .cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-block-start: var(--sp-2); }
  body[data-tema="d"] .cta__book { background: #FFFFFF; color: var(--c-signal-700); }
  body[data-tema="d"] .cta__book:hover { background: color-mix(in srgb, #FFFFFF 90%, transparent); }
  body[data-tema="d"] .cta__wa { border: 2px solid #FFFFFF; color: #FFFFFF; background: color-mix(in srgb, #FFFFFF 10%, transparent); }
  body[data-tema="d"] .cta__wa:hover { background: color-mix(in srgb, #FFFFFF 20%, transparent); }

  /* --- footer: navy, white words --- */
  body[data-tema="d"] .footer {
    --fg-body: #FFFFFF; --fg-strong: #FFFFFF;
    --fg-muted: color-mix(in srgb, #FFFFFF 74%, transparent);
    --fg-faint: color-mix(in srgb, #FFFFFF 66%, transparent);
    --fg-action: var(--c-signal-400); --fg-mark: var(--c-signal-400);
    --border-hair: color-mix(in srgb, #FFFFFF 12%, transparent);
    --border-subtle: color-mix(in srgb, #FFFFFF 18%, transparent);
    background: var(--d-navy); color: var(--fg-muted); border: 0;
  }
  body[data-tema="d"] .footer h4 { color: #FFFFFF; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-2); }
  body[data-tema="d"] .footer .logo__mark {
    width: 40px; height: 40px; padding: 8px; border-radius: 10px; color: #FFFFFF;
    background: linear-gradient(135deg, var(--d-blue), var(--d-sky));
  }
  body[data-tema="d"] .footer :is(.badge, .verify) { background: color-mix(in srgb, #FFFFFF 6%, transparent); border-color: var(--border-subtle); }
  /* 2026-10-03 (the member): the verification block was a bare band with the badge spilling
     out of it. Now one card: a smaller badge beside the text, the card names under the text. */
  body[data-tema="d"] .footer .verify {
    border: 1px solid var(--border-subtle); border-radius: 16px;
    padding: var(--sp-5) var(--sp-6); gap: var(--sp-4) var(--sp-6);
  }
  body[data-tema="d"] .footer .tursab-badge { width: 11rem; }
  body[data-tema="d"] .footer .verify p { color: var(--fg-muted); }
  body[data-tema="d"] .footer .paylogos span { background: color-mix(in srgb, #FFFFFF 8%, transparent); border-color: var(--border-subtle); color: #FFFFFF; }
  /* the agency's social accounts, where the TÜRSAB / belge / araç chips were */
  body[data-tema="d"] .footer .social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
  body[data-tema="d"] .footer .social a {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: color-mix(in srgb, #FFFFFF 8%, transparent); border: 1px solid var(--border-subtle); color: #FFFFFF;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  body[data-tema="d"] .footer .social a:hover { background: var(--c-signal-600); border-color: var(--c-signal-600); color: #FFFFFF; }
  body[data-tema="d"] .footer .social svg { width: 20px; height: 20px; }
}