/* ──────────────────────────────────────────────────────────────────────────
   Sore Turizm — Design System
   Premium Türk mirası × modern travel. Hand-crafted, no framework dependency.
   2026 patterns: color-mix(), :has(), container queries, view-transition-name,
   prefers-reduced-motion, oklch() colors.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    /* Brand palette (2026-05-04 revision):
       — Pure white background; gece-mavisi corporate ink; puslu mavi support;
         gün-batımı turuncu CTA. Less suffocating than the old cream/terracotta. */
    --c-bg:            #FFFFFF;                          /* page background */
    --c-corporate:     #1B263B;                          /* primary corporate */
    --c-support:       #415A77;                          /* secondary / nature */
    --c-cta:           #E07A5F;                          /* CTA / coşku */

    /* Vacation palette layer (2026-05-07 revise sprint):
       Sea + turquoise + sunset-pink — adds "tatil hissi" without dropping the
       gece-mavisi anchor. Use for accents, gradients, hero glows. */
    --c-sea:           #0E5A8A;                          /* deniz mavisi (Bodrum) */
    --c-sea-deep:      #083A5F;
    --c-turquoise:     #00A6A6;                          /* Akdeniz turkuvazı */
    --c-turquoise-soft:#7FD4D4;
    --c-sunset-pink:   #F4A8A8;                          /* günbatımı pembesi */
    --c-sunset-gold:   #F4B27A;                          /* günbatımı turuncu/sarı */
    --c-sand:          #F5E6D3;                          /* kum */

    /* Standard dark hero gradient — the one visual "signature" background used across
       every full-bleed section hero (Transfer, İletişim, Rota Tasarla, …) so they all
       read as one system instead of each page rolling its own recipe. */
    --grad-hero-standard:
        radial-gradient(120% 140% at 100% 0%, color-mix(in oklch, var(--c-turquoise) 32%, transparent), transparent 55%),
        radial-gradient(120% 160% at 0% 100%, color-mix(in oklch, var(--c-cta) 26%, transparent), transparent 55%),
        linear-gradient(160deg, var(--c-corporate), var(--c-sea-deep));

    --c-ink:           var(--c-corporate);               /* primary text */
    --c-ink-soft:      var(--c-support);                 /* secondary text */
    --c-ink-muted:     color-mix(in oklch, var(--c-support) 65%, white);

    --c-paper:         var(--c-bg);                      /* main background */
    --c-paper-soft:    color-mix(in oklch, var(--c-support) 6%, white);
    --c-paper-elevated: #FFFFFF;

    --c-accent:        var(--c-cta);                     /* sunset orange */
    --c-accent-warm:   color-mix(in oklch, var(--c-cta) 80%, #f4b27a);
    --c-accent-deep:   color-mix(in oklch, var(--c-cta) 70%, var(--c-corporate));
    --c-accent-tint:   color-mix(in oklch, var(--c-cta) 10%, white);

    --c-night:         var(--c-corporate);               /* hero / footer */
    --c-night-deep:    color-mix(in oklch, var(--c-corporate) 80%, black);

    --c-line:          color-mix(in oklch, var(--c-corporate) 14%, transparent);
    --c-line-soft:     color-mix(in oklch, var(--c-corporate) 7%, transparent);

    --c-success:       #2F855A;
    --c-warning:       #D69E2E;
    --c-danger:        #C53030;

    /* Type — Inter for UI, Fraunces for editorial display */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

    /* Type scale — modular, optical-size aware */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.5rem;
    --fs-3xl:  clamp(3rem, 6vw + 1rem, 5.5rem);

    /* Spacing — 4px base, harmonic */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
    --s-4: 1rem;     --s-5: 1.5rem;   --s-6: 2rem;
    --s-7: 3rem;     --s-8: 4rem;     --s-9: 6rem;     --s-10: 8rem;

    /* Radii */
    --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
    --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

    /* Shadows — soft, layered, no harsh blacks */
    --shadow-1: 0 1px 2px color-mix(in oklch, var(--c-ink) 6%, transparent),
                0 0 0 1px color-mix(in oklch, var(--c-ink) 4%, transparent);
    --shadow-2: 0 4px 16px -4px color-mix(in oklch, var(--c-ink) 12%, transparent),
                0 0 0 1px color-mix(in oklch, var(--c-ink) 5%, transparent);
    --shadow-3: 0 18px 48px -12px color-mix(in oklch, var(--c-ink) 22%, transparent),
                0 0 0 1px color-mix(in oklch, var(--c-ink) 6%, transparent);
    --shadow-glow: 0 0 0 4px color-mix(in oklch, var(--c-accent) 18%, transparent);

    /* Motion */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --t-fast: 120ms;
    --t-base: 220ms;
    --t-slow: 420ms;

    /* Layout */
    --container-w: 76rem;
}

/* Brand identity is now light-first: saf beyaz arka plan, gece-mavisi metin.
   Dark-mode override intentionally removed — system 'dark' preference no longer
   inverts brand surfaces. Re-introduce only after a curated dark palette ships. */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    /* Pin the visitor site to a light color-scheme. Without this, a browser/OS in
       dark mode makes UA form controls default to WHITE text — and any input that
       sets `background: white` but no explicit `color` renders white-on-white
       (invisible typed text). Admin already forces this inside [data-admin]. */
    color-scheme: light;
    /* Native smooth scroll for non-Lenis pages (TOC anchors, "back to top" etc).
       Lenis takes over on Home; reduced-motion media query below disables both. */
    scroll-behavior: smooth;
    /* Stable scrollbar gutter — prevents 6px content jump when modals/dialogs lock scroll. */
    scrollbar-gutter: stable;
}

/* ── Site-wide custom scrollbar — thin, brand-tinted ────────────────────── */
html { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--c-corporate) 25%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--c-corporate) 22%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--c-accent) 60%, var(--c-corporate));
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--c-ink);
    background: var(--c-paper);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-md); }
p { color: var(--c-ink-soft); }
strong { color: var(--c-ink); font-weight: 600; }

/* View Transitions — full-page subtle crossfade between routes */
@view-transition { navigation: auto; }

/* ── Utility primitives ─────────────────────────────────────────────────── */
.container { width: min(100% - 2rem, var(--container-w)); margin-inline: auto; }
.eyebrow {
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    color: var(--c-ink-muted);
    font-weight: 600;
}

.section-head { max-width: 42rem; margin-bottom: var(--s-6); }
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-lede { font-size: var(--fs-md); color: var(--c-ink-soft); }

.empty-state {
    padding: var(--s-7);
    text-align: center;
    color: var(--c-ink-muted);
    background: var(--c-paper-soft);
    border-radius: var(--r-lg);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 500;
    border-radius: var(--r-pill);
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary {
    background: var(--c-accent);
    color: white;
    padding: var(--s-3) var(--s-5);
    box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--c-accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: var(--c-paper-elevated);
    color: var(--c-ink);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--c-line);
}
.btn-secondary:hover { border-color: var(--c-accent); color: var(--c-accent-deep); }

.btn-tertiary {
    color: var(--c-accent-deep);
    font-size: var(--fs-sm);
    padding: var(--s-2) 0;
    font-weight: 600;
}
.btn-tertiary:hover { color: var(--c-accent); }

.btn-ghost {
    color: var(--c-ink);
    padding: var(--s-2) var(--s-4);
    font-size: var(--fs-sm);
}
.btn-ghost:hover { color: var(--c-accent); }

button:focus-visible, a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}

/* Blazor's <FocusOnNavigate> programmatically focuses the page <h1> (tabindex=-1)
   after every navigation, which made the browser paint a default focus ring around
   the heading on each load until the next click. Keyboard focus still shows a ring
   (:focus-visible); only mouse/programmatic focus is silenced. */
:focus:not(:focus-visible) { outline: none; }
/* FocusOnNavigate (Routes.razor, Selector="h1") programmatically focuses the page <h1>
   on every navigation for screen readers. Browsers inconsistently match :focus-visible on
   that programmatic focus, so the rule above can leave a ring/border around the hero title
   on first load until the next click. An <h1> is never keyboard-reachable, so silence its
   focus ring outright (this also covers tabindex=-1 modal/drawer containers). */
h1:focus, [tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* ═══ Site header ═══════════════════════════════════════════════════════════
   The rules here ARE the desktop bar. The mobile panel is rebuilt wholesale in
   the @media (max-width: 1145px) block further down and overrides whatever it
   needs — keep that contract intact when editing here, and put anything that
   must be desktop-only (dividers, button fills) behind @media (min-width:1146px)
   so it can't leak into the panel. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    background: color-mix(in oklch, var(--c-paper) 82%, transparent);
    /* Resting header floats flush with the page; header-scroll.js flips
       data-elevated once you leave the top, and the rule below detaches it with a
       hairline + soft shadow. Border starts transparent so the transition is smooth. */
    border-bottom: 1px solid transparent;
    transition: background var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
    /* Promote to own compositor layer so blurred header doesn't repaint on scroll. */
    will-change: backdrop-filter;
    transform: translateZ(0);
}
.site-header[data-elevated="true"] {
    background: color-mix(in oklch, var(--c-paper) 93%, transparent);
    border-bottom-color: var(--c-line-soft);
    box-shadow: 0 8px 30px -18px color-mix(in oklch, var(--c-night-deep) 60%, transparent);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    height: 4.25rem;
}

/* ── Brand / logo lockup ──────────────────────────────────────────────────
   .brand-logo is a fixed 2.25rem slot ready for a real logo asset; today it
   frames the ◉ mark as a gradient badge. flex-shrink:0 + nowrap on the wordmark
   is the fix for the two-line "Sore / Turizm" pile-up under space pressure. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.brand-logo {
    display: inline-grid;
    place-items: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 0.72rem;
    background: linear-gradient(140deg, var(--c-accent) 0%, var(--c-accent-deep) 100%);
    color: white;
    box-shadow: 0 4px 14px -5px color-mix(in oklch, var(--c-accent) 65%, transparent);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.brand-mark {
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform var(--t-base) var(--ease-out);
}
.brand:hover .brand-logo {
    transform: translateY(-1px);
    box-shadow: 0 7px 20px -5px color-mix(in oklch, var(--c-accent) 72%, transparent);
}
.brand:hover .brand-mark { transform: rotate(45deg); }
.brand-text { white-space: nowrap; line-height: 1.05; color: var(--c-ink); }
.brand-text em { font-style: normal; font-family: var(--font-display); font-weight: 500; color: var(--c-accent-deep); }

/* ── Primary nav — pill links with an animated centred underline ──
   NB: no `align-items` here on purpose. The mobile panel re-flows this to a
   column and relies on the default `stretch` so rows fill the panel width;
   setting `center` on the base leaked into the panel and shrank the rows to
   content width (centred menu). Desktop centring lives in the min-1146 block. */
.primary-nav { display: flex; flex-wrap: nowrap; gap: 0.12rem; }
.primary-nav a {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0.82rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.primary-nav a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0.3rem;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--c-accent);
    transform: translateX(-50%);
    transition: width var(--t-base) var(--ease-out);
}
.primary-nav a:hover {
    color: var(--c-ink);
    background: color-mix(in oklch, var(--c-ink) 5%, transparent);
}
.primary-nav a:hover::after { width: 1.15rem; }
.primary-nav a[aria-current="page"] { color: var(--c-accent-deep); font-weight: 600; }
.primary-nav a[aria-current="page"]::after { width: 1.15rem; }

/* Condense the mid band so 7 links + the full action cluster never collide
   before the hamburger takes over at 1145px. The actual condensing rules live in
   the tight-band block AFTER the desktop refinements below, so they win the cascade
   over the comfortable spacing set there. */

/* ── Action cluster: language + currency pills, divider, auth ── */
.header-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.header-actions .btn-secondary, .header-actions .btn-ghost { white-space: nowrap; }
/* Hairline between the preference pills and the auth actions — desktop only;
   in the stacked mobile panel it would be a stray floating line. */
.header-sep { display: none; }

.currency-switch {
    display: inline-flex;
    background: var(--c-paper-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: 2px;
    gap: 1px;
}
.currency-pill {
    padding: var(--s-1) var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-muted);
    border-radius: var(--r-pill);
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--t-fast) var(--ease-out);
    white-space: nowrap;
}
.currency-pill:hover { color: var(--c-ink); }
.currency-pill.is-active {
    background: var(--c-paper-elevated);
    color: var(--c-accent-deep);
    box-shadow: var(--shadow-1);
}
@media (max-width: 720px) {
    .currency-pill { padding: var(--s-1) var(--s-2); }
}

/* ── Desktop-only refinements (kept out of the mobile panel) ── */
@media (min-width: 1146px) {
    .header-inner { height: 4.5rem; }        /* a touch more presence on the wide bar */
    .primary-nav { align-items: center; }    /* row centring — kept off the base so it can't reach the mobile column */

    .header-sep {
        display: block;
        width: 1px; height: 1.6rem;
        background: var(--c-line);
        flex-shrink: 0;
        margin: 0 0.15rem;
    }

    /* Segmented preference controls share one height + resting surface so the
       language toggle, currency toggle and auth row read as a single cluster. */
    .header-actions .lang-switch,
    .header-actions .currency-switch { min-height: 2.5rem; align-items: center; }
    .header-actions .currency-pill,
    .header-actions .lang-pill { min-height: 2.05rem; }

    /* Auth links become compact pills; sign-up is the one filled CTA. */
    .header-actions .btn-ghost {
        padding: 0.55rem 0.9rem;
        border-radius: var(--r-pill);
        font-weight: 600;
        color: var(--c-ink-soft);
    }
    .header-actions .btn-ghost:hover {
        color: var(--c-accent-deep);
        background: color-mix(in oklch, var(--c-ink) 5%, transparent);
    }
    .header-actions .btn-secondary {
        padding: 0.55rem 1.15rem;
        font-weight: 600;
        background: var(--c-accent);
        border-color: transparent;
        color: white;
        box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--c-accent) 70%, transparent);
    }
    .header-actions .btn-secondary:hover {
        background: var(--c-accent-deep);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 9px 22px -8px color-mix(in oklch, var(--c-accent) 75%, transparent);
    }

    /* Signed-in account chip — avatar + name in one soft pill. */
    .header-actions .header-account-link {
        padding: 0.3rem 0.75rem 0.3rem 0.35rem;
        border-radius: var(--r-pill);
        background: var(--c-paper-soft);
        border: 1px solid var(--c-line);
        color: var(--c-ink);
    }
    .header-actions .header-account-link:hover {
        border-color: color-mix(in oklch, var(--c-accent) 45%, var(--c-line));
        background: var(--c-paper-elevated);
    }
}

/* ── Tight band (small laptops / large tablet landscape) ───────────────────
   Between the 1145px hamburger handoff and ~1400px, 7 nav links + the full
   action cluster genuinely crowd the bar. Placed AFTER the comfortable desktop
   block so these condensing rules win the cascade; drops the divider, tightens
   pill padding and gaps until it fits without a horizontal scroll. */
@media (min-width: 1146px) and (max-width: 1400px) {
    .header-inner { gap: var(--s-2); }
    .primary-nav { gap: 0; }
    .primary-nav a { padding-inline: 0.34rem; font-size: var(--fs-xs); }
    .header-actions { gap: 0.4rem; }
    .header-sep { display: none; }
    .header-actions .btn-ghost { padding-inline: 0.6rem; }
    .header-actions .btn-secondary { padding-inline: 0.82rem; }
    .header-actions .lang-switch { margin-right: 0.2rem; }
    .header-actions .currency-pill { padding-inline: var(--s-2); }
    .header-actions .lang-pill { padding-inline: 0.5rem; }
}

/* Hamburger toggle — hidden on desktop; the collapse wrapper is transparent to
   layout (display:contents) so the desktop header renders exactly as before. */
.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: var(--c-paper-soft); border: 1px solid var(--c-line);
    border-radius: var(--r-md, 0.65rem);
    color: var(--c-ink); font-size: 1.4rem; cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }
.header-collapse { display: contents; }

/* ── Mobile-menu decoration — inert on desktop ───────────────────────────
   The panel markup carries icon tiles, section eyebrows, chevrons and grouping
   wrappers. Above the hamburger breakpoint they must leave no trace: the
   decoration is hidden and the wrappers become display:contents so .header-inner
   still sees .primary-nav / .lang-switch / .currency-switch as direct children. */
.nav-eyebrow, .nav-ico, .nav-chev, .nav-pref-label { display: none; }
.nav-pref, .nav-auth { display: contents; }

/* Hand over to the hamburger while the condensed bar still fits (it needs
   ~1103px). Anything lower here leaves the full nav on screen too narrow for
   it and scrolls the whole document sideways — tablets included. */
@media (max-width: 1145px) {
    .nav-toggle { display: inline-flex; }
    /* Everything except the brand + hamburger collapses into a dropdown panel,
       so the top bar can never overflow the viewport. */
    .header-collapse {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: var(--s-3);
        padding: var(--s-4);
        background: var(--c-paper);
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--shadow-3, 0 22px 46px rgba(0,0,0,0.18));
        max-height: calc(100dvh - 4.25rem); overflow-y: auto;
    }
    .site-header.is-open .header-collapse { display: flex; }

    /* Section eyebrow — gives the panel a scannable hierarchy instead of one
       undifferentiated list. */
    .nav-eyebrow {
        display: block;
        margin: 0 0 var(--s-1); padding: 0 var(--s-2);
        font-size: var(--fs-xs); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--c-ink-muted);
    }

    /* ── Nav rows: icon tile + label + chevron ── */
    .primary-nav { display: flex; flex-direction: column; gap: 2px; }
    .primary-nav a {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-3);
        min-height: 3.25rem;          /* comfortably past the 44px tap target */
        padding: var(--s-2) var(--s-2);
        border-radius: var(--r-md);
        border-bottom: 0;             /* rows are separated by rhythm, not rules */
        font-size: var(--fs-base);
        font-weight: 500;
        color: var(--c-ink);
        white-space: normal;          /* the desktop bar sets nowrap */
        transition: background var(--t-fast) var(--ease-out);
    }
    /* The desktop hover underline has no place in a stacked list. */
    .primary-nav a::after { display: none; }
    .primary-nav a:active { background: var(--c-paper-soft); }

    .nav-ico {
        display: grid; place-items: center;
        width: 2.5rem; height: 2.5rem;
        border-radius: 0.7rem;
        font-size: 1.35rem; line-height: 1;
        flex: 0 0 auto;
    }
    .nav-ico--teal   { color: var(--ico-teal);   background: color-mix(in oklch, var(--ico-teal) 12%, white); }
    .nav-ico--coral  { color: var(--ico-coral);  background: color-mix(in oklch, var(--ico-coral) 12%, white); }
    .nav-ico--amber  { color: var(--ico-amber);  background: color-mix(in oklch, var(--ico-amber) 14%, white); }
    .nav-ico--violet { color: var(--ico-violet); background: color-mix(in oklch, var(--ico-violet) 12%, white); }
    .nav-ico--green  { color: var(--ico-green);  background: color-mix(in oklch, var(--ico-green) 12%, white); }
    .nav-ico--blue   { color: var(--ico-blue);   background: color-mix(in oklch, var(--ico-blue) 12%, white); }
    .nav-ico--accent { color: var(--c-accent-deep); background: var(--c-accent-tint); }

    .nav-chev { display: inline; font-size: 0.85rem; color: var(--c-ink-muted); opacity: 0.45; }

    /* Current page — the panel should answer "where am I?" at a glance. */
    .primary-nav a[aria-current="page"] {
        background: var(--c-accent-tint);
        font-weight: 700;
    }
    .primary-nav a[aria-current="page"] .nav-chev { opacity: 0.9; color: var(--c-accent-deep); }

    /* ── Preferences: labelled rows, not pills adrift in a wrap ── */
    .header-actions {
        display: flex; flex-direction: column; align-items: stretch;
        gap: var(--s-2);
        margin-top: var(--s-4); padding-top: var(--s-4);
        border-top: 1px solid var(--c-line-soft);
    }
    .nav-pref {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--s-3);
        min-height: 3rem;
        padding: 0 var(--s-2);
    }
    .nav-pref-label {
        display: inline-block;
        font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-soft);
    }
    .lang-switch, .currency-switch { flex: 0 0 auto; }

    /* ── Auth: full-width stacked CTAs ── */
    .nav-auth {
        display: flex; flex-direction: column; gap: var(--s-2);
        margin-top: var(--s-2); padding-top: var(--s-4);
        border-top: 1px solid var(--c-line-soft);
    }
    /* .btn-ghost carries no border or background, which reads as a stray text
       link once it is stacked in the panel. Give every auth link a real button
       shell here, then let the sign-up CTA outrank it. */
    .nav-auth > a {
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--s-2);
        width: 100%; min-height: 2.75rem;
        padding: var(--s-3) var(--s-4);
        border-radius: var(--r-md);
        border: 1px solid var(--c-line);
        background: var(--c-paper-elevated);
        color: var(--c-ink);
        font-size: var(--fs-base);
        font-weight: 600;
    }
    /* Sign-up is the conversion action — the only filled button in the panel. */
    .nav-auth > .btn-secondary {
        background: var(--c-accent);
        border-color: transparent;
        color: #fff;
        box-shadow: var(--shadow-2);
    }
    /* In the panel there is room for the label — .d-none-mobile hides it in the
       top bar at <=540px, which must not reach inside here. */
    .header-collapse .d-none-mobile { display: inline; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper-soft) 100%);
    /* Generous, balanced vertical rhythm — but content-driven height (no forced
       min-height / flex-centering). That keeps the photo ending right where the
       content does (no empty lower band) and keeps the search box high on the
       page so its typeahead dropdown opens within the fold instead of spilling
       far past it. Centered to match the section heads below and to kill the old
       lopsided empty-right gutter. */
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 4.5vw, 4rem);
    text-align: center;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--c-ink) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.04;
}
.hero-glow {
    position: absolute;
    width: 60vw; height: 60vw;
    top: -20vw; right: -10vw;
    /* Two-tone glow: sunset gold + sea blue → tatil hissi without ripping the brand. */
    background:
        radial-gradient(circle at 30% 30%, var(--c-accent-warm) 0%, transparent 55%),
        radial-gradient(circle at 70% 75%, var(--c-turquoise-soft) 0%, transparent 60%);
    opacity: 0.22;
    filter: blur(50px);
    border-radius: 50%;
    transform: translateZ(0);
}
/* Secondary blob — sea-blue, opposite corner. Static (drift removed: a 60vw
   blurred element animating forever was repainting the entire hero region
   on every frame — biggest scroll-jank source on the homepage). */
.hero-glow-2 {
    position: absolute;
    width: 45vw; height: 45vw;
    bottom: -10vw; left: -8vw;
    background: radial-gradient(circle, var(--c-sea) 0%, transparent 60%);
    opacity: 0.14;
    filter: blur(50px);
    border-radius: 50%;
    transform: translateZ(0);
}

.hero-inner { max-width: 100rem; }
.hero .eyebrow { margin-bottom: var(--s-4); }
.hero-title {
    /* Display token, finally used where it belongs — was rendering at --fs-2xl,
       i.e. the SAME size as a section <h2>. This is the page's primary line; it
       should read at hero scale (up to ~88px), not heading scale. */
    font-size: var(--fs-3xl);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-bottom: var(--s-5);
    text-wrap: balance;
}
.hero-title-line { display: inline; }
.hero-title-line.accent {
    background: linear-gradient(110deg, var(--c-accent) 20%, var(--c-accent-warm) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
.hero-lede {
    font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3rem);
    line-height: 1.55;
    max-width: 42rem;
    margin: 0 auto var(--s-6);
    color: var(--c-ink-soft);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); margin-bottom: 0; align-items: center; justify-content: center; }
/* Center the search panel within the now-centered hero column (it carries its
   own 44rem max-width, so without this it stays left-hugged). */
.hero-inner .hs-wrap,
.hero-inner .hero-search { margin-inline: auto; }

/* ── Photographic hero — full-bleed image + brand-navy scrim ──────────────────
   For a travel brand the first screen has to *feel* like a trip, not a gradient.
   Image sits in .hero-bg (negative z-index → above the fallback fill, below the
   text). A bottom-weighted navy scrim keeps the headline/lede/search legible
   over any photo while the upper third stays airy. White type inherits the
   centered rhythm + big --fs-3xl scale from the base .hero. */
.hero--photo {
    background: var(--c-night-deep);     /* fallback fill while the photo decodes */
    color: #fff;
    /* NOTE: no overflow:hidden here — the ken-burns photo is already clipped by
       .hero-bg's own overflow:hidden, and clipping at the hero level would also
       cut off the search typeahead dropdown where it extends past the hero. */
}
.hero--photo .hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    /* slow, GPU-only zoom-in — life without scroll jank */
    animation: hero-kenburns 22s var(--ease-out) both;
}
@keyframes hero-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}
.hero--photo .hero-scrim {
    position: absolute;
    inset: 0;
    /* Soft central halo (first layer = on top) darkens directly behind the text
       block so the headline/eyebrow stay legible even over bright cloud; the
       vertical wash anchors the search panel at the bottom and the eyebrow up top. */
    background:
        radial-gradient(115% 78% at 50% 44%,
            color-mix(in oklch, var(--c-night-deep) 32%, transparent) 0%,
            transparent 60%),
        linear-gradient(180deg,
            color-mix(in oklch, var(--c-night-deep) 42%, transparent) 0%,
            color-mix(in oklch, var(--c-night-deep) 22%, transparent) 42%,
            color-mix(in oklch, var(--c-night-deep) 80%, transparent) 100%);
}
.hero--photo .hero-grain { opacity: 0.06; mix-blend-mode: overlay; }
.hero--photo .eyebrow {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 18px color-mix(in oklch, var(--c-night-deep) 55%, transparent);
}

/* ── Kinetic hero tagline — particle-text morph (progressive enhancement) ──────
   The static .hero-eyebrow__text is the source of truth: SSR, screen-reader
   label, and the fallback that low-end / touch / reduced-motion devices keep at
   zero cost. hero-text-fx.js adds .is-kinetic ONLY on capable desktops, which
   reveals the transparent canvas and reserves the band so nothing reflows. */
.hero-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
    max-width: 100%;
}
.hero .hero-eyebrow .eyebrow { margin-bottom: 0; }
/* Same face as the hero headline (--font-display / Fraunces) so the eyebrow reads
   as the same font — matches the kinetic canvas, and keeps the static fallback
   (touch / low-end / reduced-motion) consistent. Slightly tighter tracking than the
   default .eyebrow since serif caps need less than sans. */
.hero-eyebrow__text {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: opacity var(--t-base) var(--ease-out);
}
.hero-eyebrow__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-slow) var(--ease-out);
}
.hero-eyebrow.is-kinetic {
    width: min(100%, 34rem);
    min-height: 3.25rem;
}
.hero-eyebrow.is-kinetic .hero-eyebrow__text { opacity: 0; }
.hero-eyebrow.is-kinetic .hero-eyebrow__canvas { opacity: 1; }
.hero--photo .hero-title {
    color: #fff;
    text-shadow: 0 2px 34px color-mix(in oklch, var(--c-night-deep) 58%, transparent);
}
.hero--photo .hero-lede {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 22px color-mix(in oklch, var(--c-night-deep) 48%, transparent);
}
.hero--photo .hero-lede strong { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .hero--photo .hero-photo { animation: none; }
}

/* ── Media gallery (visitor) ─────────────────────────────────────────────── */
.detail-gallery { margin-bottom: var(--s-5); }

.mg-single {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: var(--r-lg);
    overflow: hidden;
}
.mg-single img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: min(48vh, 420px);
    object-fit: cover;
    border-radius: var(--r-lg);
}
.mg-mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    max-height: min(48vh, 420px);
    gap: 6px;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.mg-mosaic[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mg-mosaic[data-count="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
/* 1 hero + 3 tiles: the default 3x2 would leave the bottom-right cell empty. */
.mg-mosaic[data-count="4"] { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.mg-mosaic[data-count="4"] .mg-tile-hero { grid-row: span 3; }
/* 16/9 leaves ~79px thumbs on a 360px screen; give it more height on phones. */
@media (max-width: 560px) {
    .mg-mosaic { aspect-ratio: 4 / 3; max-height: min(52vh, 380px); }
}
.mg-tile {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: var(--c-paper-soft);
    cursor: zoom-in;
    transition: opacity 0.2s ease-out;
}
.mg-tile:hover { opacity: 0.9; }
.mg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-tile-hero { grid-row: span 2; }
.mg-mosaic[data-count="2"] .mg-tile-hero { grid-row: 1; }
/* Scrim over the last visible tile rather than a grid cell of its own, so it
   cannot be pushed into an implicit row and clipped by .mg-mosaic's overflow. */
.mg-tile-more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgb(0 0 0 / 0.55);
    color: white;
    font-weight: 600;
    font-size: var(--fs-md);
    pointer-events: none;
}

/* :target lightbox — pure CSS */
.mg-lightbox {
    position: fixed;
    inset: 0;
    /* Tinted, translucent scrim (not pure black) with a blur — matches the brand
       night tone and lets the page glow through at low opacity. */
    background:
        radial-gradient(120% 120% at 50% 40%,
            color-mix(in oklch, var(--c-night-deep) 78%, transparent) 0%,
            color-mix(in oklch, var(--c-night-deep) 90%, transparent) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-5);
    animation: mg-fade 0.2s ease-out;
}
.mg-lightbox--open { display: flex; }
.mg-lightbox-close,
.mg-lightbox-nav { border: 0; cursor: pointer; }
@keyframes mg-fade { from { opacity: 0; } to { opacity: 1; } }

.mg-lightbox-close,
.mg-lightbox-nav {
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    background: rgb(255 255 255 / 0.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    transition: background 0.15s;
}
.mg-lightbox-close:hover,
.mg-lightbox-nav:hover { background: rgb(255 255 255 / 0.24); }
.mg-lightbox-close { top: var(--s-4); right: var(--s-4); font-size: 2rem; }
.mg-lightbox-nav { top: 50%; transform: translateY(-50%); }
.mg-lightbox-prev { left: var(--s-4); }
.mg-lightbox-next { right: var(--s-4); }

.mg-lightbox-figure {
    max-width: 92vw;
    max-height: 88vh;
    margin: 0;
    text-align: center;
}
.mg-lightbox-figure img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--r-sm);
}
.mg-lightbox-figure figcaption {
    color: white;
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    opacity: 0.85;
}

/* ── Fan-card lightbox (linked attractions "büyüt" preview) — reuses .mg-lightbox for
   the dark overlay + close/prev/next chrome, adds a white info panel under the photo. ── */
/* aspect-ratio lives on the <img>/placeholder itself (not the <figure>) — the figure
   needs to grow to fit the caption panel below, so it can't be clamped to the photo's
   ratio. The aspect-ratio still reserves a real box (for the .media-frame loading
   icon/shimmer) from first paint, instead of collapsing to a sliver while the 1600px
   photo is still streaming in. */
.fan-lightbox-figure { max-width: 34rem; width: 100%; }
/* Direct-child combinator: a bare descendant `img` selector also matched the tiny
   SoIcon <img> nested deep inside .fan-lightbox-caption (the city pin), stretching it
   to fill width:100%/aspect-ratio:4:3 same as the real photo — it rendered as a huge
   orange blob sitting over the caption text. */
.fan-lightbox-figure > img { display: block; border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; }
.fan-lightbox-noimg {
    display: grid; place-items: center; aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--c-support), var(--c-corporate));
    border-radius: var(--r-lg) var(--r-lg) 0 0; color: rgba(255, 255, 255, 0.55); font-size: 2.4rem;
}
/* Specificity note: .mg-lightbox-figure figcaption (a class + element, 0-1-1) would
   otherwise beat a single .fan-lightbox-caption class (0-1-0) and force its white
   lightbox-on-black caption color onto this white panel — qualify with the figure
   class to win instead. */
.fan-lightbox-figure .fan-lightbox-caption {
    background: var(--c-paper-elevated); border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: var(--s-5); text-align: left; margin: 0; color: var(--c-ink);
    display: flex; flex-direction: column; gap: var(--s-2); opacity: 1;
}
.fan-lightbox-type { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--c-accent); }
.fan-lightbox-caption strong { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); }
.fan-lightbox-city { font-size: var(--fs-sm); color: var(--c-ink-muted); display: inline-flex; align-items: center; gap: 0.4em; }
.fan-lightbox-link { align-self: flex-start; margin-top: var(--s-2); }

/* ── Admin gallery grid (MediaGallerySection) ────────────────────────────── */
.media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.media-gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
}
.media-gallery-item.is-showcase { border-color: var(--c-accent, #E07A5F); }
.media-gallery-photo {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    position: relative;
}
.media-gallery-showcase-tag {
    position: absolute;
    top: 6px; left: 6px;
    background: var(--c-accent, #E07A5F);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
.media-gallery-actions {
    position: absolute;
    bottom: 6px; right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.media-gallery-item:hover .media-gallery-actions { opacity: 1; }

/* ── Listing pages (filtered grid) ───────────────────────────────────────── */
.listing-head {
    background: linear-gradient(180deg, var(--c-paper-soft), var(--c-paper));
    padding: var(--s-7) 0 var(--s-5);
    border-bottom: 1px solid var(--c-line-soft);
}
/* Compact variant — used after the search form moved into the sidebar so the
   page-top is just title + lede, freeing vertical space for tour cards. */
.listing-head--compact {
    padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.25rem, 2.5vw, 2rem);
}
.listing-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    margin: var(--s-2) 0 var(--s-2);
    letter-spacing: -0.02em;
}
.listing-lede { color: var(--c-ink-muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }

/* Hero row: text/search on the left, the selected-region 3D emblem on the right. */
.listing-head-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    justify-content: space-between;
}
.listing-head-main { flex: 1 1 auto; min-width: 0; }
.listing-head-emblem { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
/* Big region art. Descendant selector beats the .so-ic--empty size box; art is square
   so height:auto tracks width. Shared by the destination-detail info card below. */
.listing-head-emblem .region-emblem-icon { width: clamp(140px, 18vw, 240px); height: auto; }
.dest-region-emblem { display: flex; justify-content: center; margin-bottom: var(--s-4); }
.dest-region-emblem .region-emblem-icon { width: clamp(112px, 14vw, 168px); height: auto; }
@media (max-width: 720px) {
    .listing-head-emblem { display: none; }
}

.listing-body {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: var(--s-6);
    padding: var(--s-6) 0 var(--s-9);
    align-items: start;
}
@media (max-width: 960px) {
    .listing-body { grid-template-columns: 1fr; }
    .listing-sidebar { position: static !important; }
}

/* Sticky sidebar uses page scroll — NO inner overflow on the card itself.
   Long check lists collapse into <details> blocks; only the body of an
   individual block can scroll if needed, and even then with a hairline track. */
.listing-sidebar { position: static; align-self: flex-start; }
.filter-card {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    box-shadow: var(--shadow-1);
}
.filter-card-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: var(--s-2);
    gap: var(--s-2);
}
.filter-card-head h2 { font-family: inherit; font-size: var(--fs-md); font-weight: 600; margin: 0; flex: 1; }
.filter-close-mobile {
    display: none; background: none; border: 0; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--c-ink-muted);
}

/* <details> based collapse — clean expand/collapse, no JS, no double scroll. */
.filter-block {
    border-top: 1px solid var(--c-line-soft);
    padding: 0;
}
.filter-block[open] { padding-bottom: var(--s-3); }
.filter-block:first-of-type { border-top: 0; }

/* Date-range — two date inputs side-by-side + a clear button. */
.filter-daterange {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
}
.dr-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dr-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 700;
}
.dr-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: white;
    cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dr-control:hover {
    border-color: color-mix(in oklch, var(--c-turquoise) 50%, var(--c-line));
}
.dr-control:focus-within {
    border-color: var(--c-turquoise);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-turquoise) 18%, transparent);
}
.dr-control > i {
    color: var(--c-turquoise);
    font-size: 1rem;
    flex-shrink: 0;
    pointer-events: none;
}
.dr-display {
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
    flex: 1;
    min-width: 0;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-field.has-value .dr-display {
    color: var(--c-ink);
    font-weight: 600;
}
.dr-control input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: transparent;
    font-size: 16px; /* prevent iOS zoom on focus */
}
.dr-control input[type="date"]:focus { outline: 0; }
.dr-control input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    background: transparent;
}
.filter-daterange-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--s-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-ink-soft);
    font-size: var(--fs-xs);
    font-family: inherit;
    cursor: pointer;
}
.filter-daterange-clear:hover { color: var(--c-accent-deep); }
.filter-block summary.filter-block-title i {
    margin-right: 0.4rem;
    color: var(--c-ink-muted);
    font-size: 1rem;
}
.filter-block summary.filter-block-title {
    list-style: none;
    cursor: pointer;
    padding: var(--s-3) 0;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--c-ink-soft);
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.filter-block summary.filter-block-title::-webkit-details-marker { display: none; }
.filter-block summary.filter-block-title::after {
    content: "+";
    font-weight: 400;
    font-size: 1rem;
    color: var(--c-ink-muted);
    transition: transform 0.18s ease-out;
}
.filter-block[open] summary.filter-block-title::after { content: "−"; }
.filter-block summary em { font-style: normal; color: var(--c-ink-muted); font-weight: 500; margin-left: 6px; }

.filter-checks {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 14rem;
    overflow-y: auto;
    padding-right: 4px;
    /* Thin custom scrollbar — match brand, no chunky default browser bar. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--c-corporate) 25%, transparent) transparent;
}
.filter-checks::-webkit-scrollbar { width: 6px; }
.filter-checks::-webkit-scrollbar-track { background: transparent; }
.filter-checks::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--c-corporate) 25%, transparent);
    border-radius: 999px;
}
.filter-checks::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--c-corporate) 45%, transparent);
}
.filter-check {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    padding: 4px 0;
    transition: color 0.12s;
}
.filter-check:hover { color: var(--c-accent-deep); }
.filter-check input[type="checkbox"] { accent-color: var(--c-accent); cursor: pointer; }
.filter-check em {
    font-style: normal;
    color: var(--c-ink-muted);
    font-size: var(--fs-xs);
    margin-left: 4px;
}

.filter-range { display: flex; gap: var(--s-2); }
.filter-range label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.filter-range input,
.filter-select {
    width: 100%;
    padding: var(--s-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    /* 16px + 44px, matching .dr-control input[type=date] below: iOS zooms the
       viewport on focus under 16px and never zooms back out. */
    font-size: 1rem;
    min-height: 2.75rem;
    color: var(--c-ink);
    background: var(--c-paper);
    font-family: inherit;
}
.filter-range input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--shadow-glow);
}

.listing-main { min-width: 0; position: relative; }

/* ── Filter-refresh affordance ─────────────────────────────────────────────
   Filters auto-apply, but the query is silent — the reader couldn't tell a reload
   happened without watching the count on the right. This gives feedback where the
   eyes already are (over the grid): a thin top progress bar + the current cards
   dimmed under a centred spinner. The current results stay in place, so there is no
   skeleton flash and no layout collapse on every keystroke. */
.listing-refresh-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s var(--ease-out);
    pointer-events: none;
    z-index: 5;
}
.listing-main.is-refreshing .listing-refresh-bar { opacity: 1; }
.listing-refresh-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent,
        var(--c-turquoise),
        var(--c-sea));
    animation: refresh-slide 1.05s var(--ease-in-out) infinite;
}
@keyframes refresh-slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* The grid + its veil share one positioning context. */
.listing-results { position: relative; }
.listing-results .card-grid {
    transition: opacity 0.18s var(--ease-out), filter 0.18s var(--ease-out);
}
.listing-results.is-refreshing .card-grid {
    opacity: 0.45;
    filter: saturate(0.85);
    pointer-events: none;
}
.listing-refresh-veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2);
    padding-top: clamp(3rem, 18vh, 9rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s var(--ease-out);
}
/* Only reveal the veil if the refresh actually lasts a beat — a 30ms cached query
   shouldn't flash a spinner. The delay applies on show; removing .is-refreshing drops
   transition-delay to 0 so it hides instantly. */
.listing-results.is-refreshing .listing-refresh-veil {
    opacity: 1;
    transition-delay: 0.12s;
}
.listing-refresh-spinner {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    border: 3px solid color-mix(in oklch, var(--c-turquoise) 25%, transparent);
    border-top-color: var(--c-turquoise);
    animation: refresh-spin 0.7s linear infinite;
    /* Ride at the top of a tall grid so it stays on-screen without JS scroll math. */
    position: sticky;
    top: 40vh;
    background: var(--c-paper);
    box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--c-night-deep) 30%, transparent);
}
.listing-refresh-text {
    position: sticky;
    top: calc(40vh + 2.6rem);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-sea-deep);
    background: var(--c-paper);
    padding: 0.15rem 0.6rem;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 10px -3px color-mix(in oklch, var(--c-night-deep) 25%, transparent);
}
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .listing-refresh-bar::before { animation: none; width: 100%; opacity: 0.7; }
    .listing-refresh-spinner { animation-duration: 1.4s; }
}

.listing-result-count { font-size: var(--fs-md); }
.listing-result-count strong { color: var(--c-ink); font-family: var(--font-display); font-size: var(--fs-lg); }
.listing-result-count .text-muted { color: var(--c-ink-muted); font-size: var(--fs-sm); }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.listing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line-soft);
}
.listing-pagination .text-muted { color: var(--c-ink-muted); font-size: var(--fs-sm); }

/* ── Mobile filter toggle ─────────────────────────────────────────────── */
.mobile-filter-toggle {
    display: none;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: var(--s-3);
    align-self: flex-start;
}
.badge-count {
    display: inline-flex;
    width: 1.25rem; height: 1.25rem;
    align-items: center; justify-content: center;
    background: var(--c-accent);
    color: white;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
}
/* Grab handle + sticky "show results" footer only exist inside the mobile sheet. */
.filter-sheet-handle,
.filter-sheet-foot { display: none; }

@media (max-width: 960px) {
    .mobile-filter-toggle { display: inline-flex; }
    .listing-sidebar { display: none; }

    /* Bottom-sheet, not an inline block. The general mobile rule above set
       `position: static !important`, which silently beat the old is-open `position:
       fixed` (no !important) — so the panel rendered in-flow at the bottom of the page
       instead of as a modal. The catalog of failures: no backdrop, no scroll isolation,
       the "sheet" pushed 600px down the document. `!important` here is load-bearing: it
       is what overrides that static rule. */
    /* Explicit height + flex, NOT inset:0 + absolute card. The base
       `.listing-sidebar` is a grid item with `align-self: flex-start`; toggling it to
       position:fixed left `inset:0` resolving to a 0-height box (the fixed overlay
       collapsed and the bottom-anchored card flew off the top of the screen). An explicit
       100dvh can't collapse, and flex `justify-content:flex-end` pins the sheet to the
       bottom without absolute positioning. */
    .listing-sidebar.is-open {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: fixed !important;
        top: 0; left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;                   /* dvh dodges the mobile URL-bar jump */
        /* Above the KVKK cookie banner (z-index 9999) — a full-screen modal must not have
           the fixed banner poking through its backdrop and covering the apply footer. */
        z-index: 10000;
        background: rgb(0 0 0 / 0.5);
        padding: 0;
        overflow: hidden;                 /* the CARD scrolls, not the backdrop */
        animation: sheet-fade 0.2s var(--ease-out);
    }
    /* The card IS the scroll container — that's what makes the sticky header/footer stick.
       (flex + overflow:hidden would clip the blocks instead of scrolling them.) */
    .listing-sidebar.is-open .filter-card {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0;
        max-height: 90dvh;
        overflow-y: auto;
        overscroll-behavior: contain;     /* scroll stops here; doesn't chain to the page */
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        padding: 0 var(--s-4);
        box-shadow: 0 -12px 40px -8px rgb(0 0 0 / 0.35);
        animation: sheet-up 0.28s var(--ease-out);
    }

    /* Drag-handle affordance at the very top of the sheet. */
    .filter-sheet-handle {
        display: block;
        flex-shrink: 0;
        width: 2.5rem; height: 4px;
        margin: var(--s-2) auto 0;
        border-radius: 999px;
        background: var(--c-line);
    }

    /* Header pinned while the filter body scrolls under it. */
    .listing-sidebar.is-open .filter-card-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--c-paper-elevated);
        padding-top: var(--s-3);
        margin: 0 calc(-1 * var(--s-4)) var(--s-2);
        padding-left: var(--s-4);
        padding-right: var(--s-4);
    }

    /* Sticky apply/close footer carrying the live result count. */
    .filter-sheet-foot {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: var(--s-2) calc(-1 * var(--s-4)) 0;
        padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
        background: linear-gradient(to top,
            var(--c-paper-elevated) 72%,
            color-mix(in oklch, var(--c-paper-elevated) 0%, transparent));
        border-top: 1px solid var(--c-line-soft);
    }
    .filter-sheet-apply {
        width: 100%;
        min-height: 3rem;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--c-accent);
        color: white;
        font: inherit;
        font-weight: 700;
        font-size: var(--fs-md);
        cursor: pointer;
        transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    }
    .filter-sheet-apply:active { transform: scale(0.985); }
    .filter-sheet-apply:hover { background: var(--c-accent-deep); }

    .filter-close-mobile { display: inline-block !important; }
}
@keyframes sheet-fade { from { background: rgb(0 0 0 / 0); } to { background: rgb(0 0 0 / 0.5); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .listing-sidebar.is-open,
    .listing-sidebar.is-open .filter-card { animation: none; }
}

/* ── Hero search bar ─────────────────────────────────────────────────────── */
.hero-search {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-3);
    box-shadow: var(--shadow-2);
    margin-bottom: var(--s-5);
    max-width: 44rem;
}
.hero-search-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr auto;
    gap: var(--s-2);
    align-items: end;
}
@media (max-width: 720px) {
    .hero-search-row { grid-template-columns: 1fr; }
}
.hero-search-field { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3); }
.hero-search-field label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--c-ink-muted);
}
.hero-search-field input,
.hero-search-field select {
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-size: var(--fs-base);
    /* The wrapper's padding is not clickable, so the control itself must carry
       a usable tap height. */
    min-height: 2.75rem;
    font-family: inherit;
    outline: none;
    padding: 0;
}
.hero-search-field + .hero-search-field { border-left: 1px solid var(--c-line-soft); }
@media (max-width: 720px) {
    .hero-search-field + .hero-search-field { border-left: 0; border-top: 1px solid var(--c-line-soft); }
}
.hero-search-btn { padding: var(--s-3) var(--s-5) !important; }

/* ── Hero typeahead ──────────────────────────────────────────────────────── */
.hs-wrap { position: relative; max-width: 44rem; margin-bottom: var(--s-5); }
.hs-wrap .hero-search { margin-bottom: 0; }

/* search icon inlined into the input row */
.hs-field { flex-direction: column; }
.hs-input-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.hs-search-svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    color: var(--c-accent);
}
.hs-input-row input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-size: var(--fs-base);
    font-family: inherit;
    outline: none;
    padding: 0;
}

/* dropdown panel */
.hs-panel {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    background: color-mix(in oklch, var(--c-paper-elevated) 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--c-line);
    border-radius: 16px;
    box-shadow: 0 8px 32px color-mix(in oklch, var(--c-corporate) 14%, transparent);
    padding: var(--s-2) var(--s-2);
    z-index: 50;
    /* Keep the panel within the fold: the hero sits the search box low, so a tall
       48vh dropdown spilled well past the viewport. Cap it and let it scroll. */
    max-height: min(22rem, 46vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: hsPanelIn 170ms cubic-bezier(.2,.8,.2,1);
    transform-origin: top center;
}
@keyframes hsPanelIn {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* group label */
.hs-group-label {
    margin: var(--s-1) 0 2px 0;
    padding: 0 var(--s-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.hs-divider {
    height: 1px;
    background: var(--c-line-soft);
    margin: var(--s-2) var(--s-2);
}

/* individual row */
.hs-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px var(--s-3);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    color: var(--c-ink);
    transition: background 100ms ease;
}
.hs-row:hover, .hs-row:focus-visible {
    background: color-mix(in oklch, var(--c-support) 7%, white);
    outline: none;
}

/* place icon — 32×32, no background, colored SVG */
.hs-icon {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
}
.hs-icon svg { width: 18px; height: 18px; }
.hs-icon--place {
    background: color-mix(in oklch, var(--c-support) 10%, white);
    color: var(--c-support);
}
.hs-icon--tour {
    background: color-mix(in oklch, var(--c-cta) 10%, white);
    color: var(--c-cta);
}

/* tour thumbnail */
.hs-thumb {
    width: 40px; height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    display: block;
}

.hs-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hs-name {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hs-meta {
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
}

/* "Tümünü gör" footer link */
.hs-all {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: var(--s-3) var(--s-3);
    margin-top: var(--s-1);
    border-top: 1px solid var(--c-line-soft);
    color: var(--c-accent);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border-radius: 0 0 12px 12px;
    transition: background 100ms ease;
}
.hs-all:hover, .hs-all:focus-visible {
    background: color-mix(in oklch, var(--c-accent) 5%, transparent);
    outline: none;
}

/* loading / empty states */
.hs-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--s-5) var(--s-3);
    color: var(--c-ink-muted);
    font-size: var(--fs-sm);
    text-align: center;
}
.hs-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid color-mix(in oklch, var(--c-accent) 25%, transparent);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    margin-right: var(--s-2);
    animation: hsSpin 700ms linear infinite;
    vertical-align: -3px;
}
@keyframes hsSpin { to { transform: rotate(360deg); } }

/* ── Mobile search: "Ara" pill + fullscreen overlay ──────────────────────────
   Same service/state as the desktop typeahead, separate presentation. The desktop
   inline form (.hs-wrap--desktop) and this pill are mutually exclusive by breakpoint;
   the overlay is mounted by Blazor only while open. */
.hs-pill {
    display: none; /* desktop: hidden — shown ≤720px */
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    max-width: 44rem;
    margin: 0 auto var(--s-5);
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    color: var(--c-ink-muted);
    font-family: inherit;
    font-size: var(--fs-base);
    text-align: left;
    cursor: pointer;
    min-height: 3.25rem;
}
.hs-pill .hs-search-svg { width: 20px; height: 20px; color: var(--c-accent); flex-shrink: 0; }
.hs-pill-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hs-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--c-paper);
    animation: hsOverlayIn 300ms cubic-bezier(.2, .9, .25, 1);
}
/* Slide up from the bottom — the native "search sheet" feel (Airbnb / iOS). */
@keyframes hsOverlayIn {
    from { opacity: 0; transform: translateY(14%); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-overlay { animation: none; }
}

/* Top bar: rounded search field + "Cancel" text button (iOS pattern). */
.hs-overlay-top {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: max(var(--s-3), env(safe-area-inset-top)) var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--c-line-soft);
    background: var(--c-paper);
}
.hs-overlay-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    height: 3rem;
    padding: 0 var(--s-3);
    background: color-mix(in oklch, var(--c-support) 8%, white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    transition: border-color 120ms ease, background 120ms ease;
}
.hs-overlay-field:focus-within {
    border-color: color-mix(in oklch, var(--c-accent) 45%, var(--c-line));
    background: var(--c-paper-elevated);
}
.hs-overlay-field .hs-search-svg { width: 18px; height: 18px; color: var(--c-accent); flex-shrink: 0; }
.hs-overlay-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-size: 1.0625rem; /* 17px — comfortable mobile field, avoids iOS zoom */
    font-family: inherit;
    outline: none;
    padding: 0;
}
.hs-overlay-field input::-webkit-search-cancel-button { display: none; } /* we render our own clear */
.hs-field-clear {
    flex-shrink: 0;
    width: 1.5rem; height: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: color-mix(in oklch, var(--c-ink) 30%, transparent);
    color: white;
    font-size: .7rem;
    cursor: pointer;
}
.hs-overlay-cancel {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--c-accent);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    padding: var(--s-2) var(--s-1);
}
.hs-overlay-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-3) var(--s-3) calc(var(--s-6) + env(safe-area-inset-bottom));
}
/* Default-state quick links (popular regions) — full-width rows with our region icons. */
.hs-region-chips { display: flex; flex-direction: column; gap: var(--s-2); }
.hs-region-chip {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-paper-elevated);
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.hs-region-chip > span { flex: 1; min-width: 0; }
.hs-region-chip > i { color: var(--c-ink-muted); }
.hs-region-chip:hover, .hs-region-chip:focus-visible {
    background: color-mix(in oklch, var(--c-accent) 5%, white);
    border-color: color-mix(in oklch, var(--c-accent) 30%, var(--c-line));
    outline: none;
}
.hs-region-chip:active { transform: scale(.99); }

body.no-scroll { overflow: hidden; }

@media (max-width: 720px) {
    .hs-wrap--desktop { display: none; }
    .hs-pill { display: flex; }
}
/* Defensive: the overlay is only ever opened from the mobile pill, but if a viewport
   grows past the breakpoint while it's open, don't render it fullscreen on desktop. */
@media (min-width: 721px) {
    .hs-overlay { display: none; }
}

/* ── Mobile bottom navigation bar (phone-only) ───────────────────────────────── */
.mobile-tabbar { display: none; }
@media (max-width: 720px) {
    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 900;
        background: color-mix(in oklch, var(--c-paper-elevated) 94%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--c-line);
        box-shadow: 0 -4px 20px color-mix(in oklch, var(--c-corporate) 8%, transparent);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        min-height: 58px;
        text-decoration: none;
        color: var(--c-ink-muted);
        font-size: 11px;
        font-weight: 600;
    }
    /* Our WebP icons, sized up for thumb reach. Overrides .so-ic--nav (higher specificity). */
    .mobile-tab .so-ic.mobile-tab-ico { width: 30px; height: 30px; }
    .mobile-tab .so-ic-fb { font-size: 28px; line-height: 1; }
    .mobile-tab span { line-height: 1; }
    .mobile-tab[aria-current="page"] { color: var(--c-accent); }
    .mobile-tab[aria-current="page"] .so-ic { filter: drop-shadow(0 2px 6px color-mix(in oklch, var(--c-accent) 35%, transparent)); }

    /* Keep scroll content + the WhatsApp float clear of the fixed bar. */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    .whatsapp-float { bottom: calc(58px + env(safe-area-inset-bottom) + 12px) !important; }
}

/* Attraction filter inside listing sidebar */
.filter-attraction-search {
    padding: var(--s-2) 0 var(--s-2) 0;
}
.filter-attraction-search input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md, 10px);
    background: var(--c-paper);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-family: inherit;
}
.filter-attraction-search input:focus {
    outline: none;
    border-color: var(--c-accent);
}
.filter-checks--scroll {
    max-height: 14rem;
    overflow-y: auto;
    padding-right: 4px;
}
.filter-checks--scroll::-webkit-scrollbar { width: 6px; }
.filter-checks--scroll::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--c-support) 25%, transparent);
    border-radius: 3px;
}

.ai-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-accent) 40%, transparent);
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0   color-mix(in oklch, var(--c-accent) 50%, transparent); }
    70%  { box-shadow: 0 0 0 12px color-mix(in oklch, var(--c-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in oklch, var(--c-accent) 0%, transparent); }
}

/* ── Featured / card grid ───────────────────────────────────────────────── */
.featured { padding: var(--s-7) 0 var(--s-9); }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--s-5);
}
.card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .card-grid--4 { grid-template-columns: 1fr; }
}

/* Centered "see all …" action beneath a card grid. */
.section-cta-row {
    display: flex;
    justify-content: center;
    margin-top: var(--s-6);
}

.subsection-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--c-ink-muted);
    font-weight: 700;
    margin: var(--s-7) 0 var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-line-soft);
}
.subsection-label:first-child { margin-top: 0; }

.tour-card {
    background: var(--c-paper-elevated);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--t-base) var(--ease-out),
                transform var(--t-base) var(--ease-out);
    display: flex; flex-direction: column;
}
.tour-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
.tour-card-media-link { display: block; }
/* ── Media shimmer: a diagonal glass sweep over card/gallery images until they
   finish loading, then the image fades in. Applied via .media-frame — background
   frames set the image from JS (data-bg preload); <img> frames wait for load.
   Full-bleed heroes render directly (resize only, no shimmer) to protect LCP. ── */
/* Loading placeholder is a calm neutral (not stark white) so the icon below reads
   clearly and the wait doesn't feel like an empty flash of white. */
.media-frame { position: relative; overflow: hidden; background-color: color-mix(in oklch, var(--c-support) 14%, white); }
/* Centered, size-relative icon flip-book — cycles 4 brand icons in hard, unmistakable
   steps (no crossfade) while the real photo streams in, so a slow load reads as "loading"
   rather than "broken/empty". background-size is a %-of-the-frame (clamped), so it scales
   with whatever card/gallery/thumbnail this particular .media-frame happens to be. */
.media-frame::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-repeat: no-repeat; background-position: center;
    background-size: clamp(24px, 38%, 96px) auto;
    animation: media-loading-icons 2.4s steps(1, jump-none) infinite;
    transition: opacity .4s ease;
}
.media-frame[data-loaded]::before { opacity: 0; animation: none; }
@keyframes media-loading-icons {
    0%   { background-image: url('/image/icons/itin_path.webp'); }
    25%  { background-image: url('/image/icons/tour_adventure.webp'); }
    50%  { background-image: url('/image/icons/region_gap.webp'); }
    75%  { background-image: url('/image/icons/region_karadeniz.webp'); }
}
/* The opaque backing layer this used to carry now lives on .media-frame itself (the
   icon flip-book needs to show through, underneath the sweep) — this is just the
   translucent diagonal sweep gliding over whatever's beneath it (icon, or the real
   <img> once it fades in). */
.media-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg,
        transparent 28%,
        color-mix(in oklch, white 42%, transparent) 47%,
        color-mix(in oklch, white 68%, transparent) 50%,
        color-mix(in oklch, white 42%, transparent) 53%,
        transparent 72%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    animation: media-shimmer 1.5s ease-in-out infinite;
    transition: opacity .5s ease;
}
@keyframes media-shimmer {
    0%   { background-position: -120% 0; }
    100% { background-position:  220% 0; }
}
.media-frame[data-loaded]::after { opacity: 0; animation: none; }
.media-frame > img { display: block; opacity: 0; transition: opacity .55s ease; }
.media-frame[data-loaded] > img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .media-frame::before { animation: none; background-image: url('/image/icons/itin_path.webp'); }
    .media-frame::after { animation: none; }
    .media-frame > img { transition: none; }
}

.tour-card-media {
    aspect-ratio: 4 / 3;
    background-color: var(--c-paper-soft);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform var(--t-slow) var(--ease-out);
}
.tour-card:hover .tour-card-media { transform: scale(1.04); }
.theme-pill {
    position: absolute;
    top: var(--s-3); left: var(--s-3);
    padding: var(--s-1) var(--s-3);
    background: color-mix(in oklch, var(--c-paper) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink);
}
/* Popularity score badge — mirrors .theme-pill, anchored top-right, warm star.
   Reads "★ 85 / 100" so the scale is explicit and legible at a glance. */
.pop-badge {
    position: absolute;
    top: var(--s-3); right: var(--s-3);
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
    padding: 0.3rem 0.6rem;
    background: color-mix(in oklch, var(--c-paper) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklch, var(--c-ink) 8%, transparent);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-1, 0 1px 3px rgb(0 0 0 / 0.12));
    font-size: var(--fs-sm);
    color: var(--c-ink);
    line-height: 1;
    white-space: nowrap;
}
.pop-badge .pop-star {
    color: var(--c-accent-warm, #e8973a);
    font-size: 1.15em;
    align-self: center;
    transform: translateY(0.5px); /* optical: star glyph sits high beside lining digits */
}
.pop-badge .pop-score { font-weight: 800; font-size: 1.05em; }
.pop-badge .pop-max { font-weight: 600; font-size: 0.78em; color: var(--c-ink-muted); }
.tour-card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.tour-city {
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.tour-title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.2;
}
.tour-title a { transition: color var(--t-fast) var(--ease-out); }
.tour-title a:hover { color: var(--c-accent-deep); }
.tour-price-row {
    display: flex; justify-content: space-between; align-items: end;
    margin-top: auto; padding-top: var(--s-3);
    border-top: 1px solid var(--c-line-soft);
}
.tour-price { display: flex; flex-direction: column; }
.price-label { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.price-amount { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--c-ink); }

/* ── Skeletons ──────────────────────────────────────────────────────────── */
.skeleton .tour-card-media,
.skeleton-line {
    background: linear-gradient(90deg,
        var(--c-paper-soft) 0%,
        color-mix(in oklch, var(--c-paper-soft) 60%, var(--c-paper)) 50%,
        var(--c-paper-soft) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: var(--r-sm);
}
.skeleton .tour-card-media { border-radius: 0; }
.skeleton-line { height: 0.85rem; }
.skeleton-line + .skeleton-line { margin-top: var(--s-2); }
.w-30 { width: 30%; } .w-40 { width: 40%; } .w-60 { width: 60%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── How it works ───────────────────────────────────────────────────────── */
.how {
    padding: var(--s-9) 0;
    background: var(--c-paper-soft);
}
.steps {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--s-6);
    margin-top: var(--s-7);
}
.steps li {
    background: var(--c-paper-elevated);
    padding: var(--s-6);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column; gap: var(--s-3);
    border: 1px solid var(--c-line-soft);
}
.step-num {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--c-accent);
    font-style: italic;
    font-weight: 500;
}
.steps h3 { font-size: var(--fs-md); }
.steps p { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* ── AI swap badge / spark ───────────────────────────────────────────────── */
.ai-spark {
    display: inline-block;
    margin-right: 0.25rem;
    animation: ai-twinkle 2s ease-in-out infinite;
}
@keyframes ai-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.92); }
}
.ai-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: linear-gradient(135deg, #fff7e6, #ffe7d1);
    color: #92400e;
    border: 1px solid #fde68a;
    vertical-align: middle;
}
.swap-option.is-ai-pick {
    box-shadow: 0 0 0 2px color-mix(in oklch, #f59e0b 60%, transparent);
    background: linear-gradient(180deg, white, color-mix(in oklch, #fff7e6 60%, white));
}

/* ── Account dashboard (sidebar + body) ──────────────────────────────────── */
.account-shell {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2rem;
    padding: 2.5rem 0 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 880px) {
    .account-shell { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.account-sidebar {
    position: sticky;
    min-width: 0;
    top: 6rem;
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 34px -20px rgb(15 30 45 / 0.22);
    display: flex;
    flex-direction: column;
}
@media (max-width: 880px) {
    .account-sidebar { position: static; }
}

.account-side-head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.5rem 1rem;
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 0.75rem;
}
.account-side-avatar {
    width: 2.6rem; height: 2.6rem;
    background: linear-gradient(145deg, var(--c-corporate), var(--c-night));
    color: white;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: var(--font-display);
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px color-mix(in oklch, var(--c-night) 45%, transparent);
}
/* A long e-mail address is one unbreakable token; without this it sets the
   sidebar's min-content width and drags the whole page into sideways scroll. */
.account-side-name { margin: 0; font-weight: 600; color: var(--c-ink); font-size: 0.95rem; line-height: 1.2; overflow-wrap: anywhere; }
.account-side-meta { margin: 0.15rem 0 0; color: var(--c-ink-muted); font-size: 0.8rem; overflow-wrap: anywhere; }

.account-nav-list {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.account-nav {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    color: var(--c-ink-soft);
    text-decoration: none;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.account-nav i { font-size: 1.15rem; opacity: 0.85; }
.account-nav:hover { background: color-mix(in oklch, var(--c-paper-soft) 70%, white); color: var(--c-ink); }
.account-nav--active {
    background: color-mix(in oklch, var(--c-corporate) 9%, white);
    color: var(--c-corporate);
    font-weight: 600;
    position: relative;
}
.account-nav--active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 1.4rem; border-radius: 0 3px 3px 0;
    background: var(--c-cta);
}
.account-nav--active i { opacity: 1; color: var(--c-corporate); }
.account-nav--danger { color: #b91c1c; margin-top: 0.25rem; }
.account-nav--danger:hover { background: color-mix(in oklch, #fee2e2 80%, white); }

.account-nav-badge {
    margin-left: auto;
    background: var(--c-accent-warm);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.account-side-foot {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-line-soft);
}

.account-body { min-width: 0; }

.account-section { display: flex; flex-direction: column; gap: 1.5rem; }
.account-section-head { margin-bottom: 0.5rem; }
.account-section-title { font-family: var(--font-display); font-weight: 700; color: var(--c-ink); font-size: 1.85rem; line-height: 1.15; margin: 0.25rem 0 0.5rem; }
.account-section-lede { color: var(--c-ink-muted); margin: 0; }

.account-banner {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.account-banner i { font-size: 1.4rem; flex-shrink: 0; }
.account-banner div { display: flex; flex-direction: column; gap: 0.4rem; }
.account-banner--ok { background: #ecfdf5; color: #065f46; }
.account-banner--warn { background: #fffbeb; color: #92400e; }
.account-banner--err { background: #fef2f2; color: #991b1b; }
.account-banner-action {
    align-self: flex-start;
    background: white;
    border: 1px solid currentColor;
    color: inherit;
    padding: 0.35rem 0.85rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.account-stat-card {
    display: flex; align-items: center; gap: 1rem;
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.85rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform 0.15s, box-shadow 0.15s;
}
.account-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / 0.06); }
.account-stat-icon { font-size: 1.75rem; color: var(--c-ink-muted); }
.account-stat-icon--ok { color: #059669; }
.account-stat-icon--warn { color: #d97706; }
.account-stat-value { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.account-stat-label { margin: 0.2rem 0 0; color: var(--c-ink-muted); font-size: 0.85rem; }

.account-h2 { font-size: 1.15rem; margin: 1.25rem 0 0.25rem; font-weight: 600; }
.account-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.account-quick-card {
    display: flex; align-items: center; gap: 0.85rem;
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.75rem;
    padding: 0.95rem 1.1rem;
    text-decoration: none;
    color: var(--c-ink);
    transition: border-color 0.15s, transform 0.15s;
}
.account-quick-card:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.account-quick-card i { font-size: 1.4rem; color: var(--c-accent); }
.account-quick-card strong { display: block; font-size: 0.95rem; }
.account-quick-card span { color: var(--c-ink-muted); font-size: 0.8rem; }

/* Reservation cards */
.reservation-list { display: flex; flex-direction: column; gap: 0.85rem; }
.reservation-card {
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
}
.reservation-card-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    margin-bottom: 0.75rem;
}
.reservation-title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.reservation-title a { color: var(--c-ink); text-decoration: none; }
.reservation-title a:hover { color: var(--c-accent); }
.reservation-meta {
    display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
    color: var(--c-ink-soft); font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.reservation-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.reservation-meta i { font-size: 1rem; color: var(--c-ink-muted); }
.reservation-card-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-line-soft);
    color: var(--c-ink-muted); font-size: 0.8rem;
}
.reservation-id code { background: var(--c-paper-soft); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.75rem; }

/* Rota Stüdyosu — hesap "Rotalarım" durak zinciri */
.route-stop-trail {
    list-style: none; margin: 0 0 0.75rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem;
}
.route-stop-trail li {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--c-paper-soft); color: var(--c-ink-soft);
    padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem;
}
.route-stop-trail i { font-size: 0.9rem; color: var(--c-ink-muted); }
.route-ref b { color: var(--c-ink); letter-spacing: 0.02em; }

/* ── Account → priced quote panel (route + bespoke: accept / decline) ──── */
.quote-panel {
    position: relative; overflow: hidden;
    margin: var(--s-5) 0 0; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 4px);
    border: 1px solid color-mix(in oklch, var(--c-cta) 22%, var(--c-line-soft));
    border-radius: var(--r-lg);
    background:
        radial-gradient(130% 130% at 100% 0%, color-mix(in oklch, var(--c-cta) 9%, transparent) 0%, transparent 55%),
        var(--c-paper);
    box-shadow: 0 8px 26px -16px color-mix(in oklch, var(--c-cta) 45%, transparent);
}
.quote-panel::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
    background: linear-gradient(var(--c-cta), color-mix(in oklch, var(--c-cta) 55%, var(--c-corporate)));
}
.quote-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.quote-panel-label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-cta); font-weight: 700; }
.quote-panel-amount { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--c-ink); line-height: 1; }
.quote-panel-valid { font-size: var(--fs-sm); color: var(--c-ink-muted); margin: var(--s-3) 0 0; display: inline-flex; align-items: center; gap: .35rem; }
.quote-panel-msg {
    margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4);
    border-left: 3px solid color-mix(in oklch, var(--c-cta) 30%, transparent);
    background: color-mix(in oklch, var(--c-cta) 5%, transparent);
    border-radius: 0 6px 6px 0; color: var(--c-ink-soft); line-height: 1.6; white-space: pre-wrap;
}
.quote-panel-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.quote-panel-actions .btn-primary { flex: 1 1 12rem; }
.quote-panel-done {
    margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
}
.quote-panel-done i { font-size: 1.25rem; }
.quote-panel-done.ok { color: var(--ico-green); background: color-mix(in oklch, var(--ico-green) 10%, transparent); }
.quote-panel-done.err { color: var(--ico-coral); background: color-mix(in oklch, var(--ico-coral) 10%, transparent); }

/* ── Account overview: "waiting for you" pending-actions panel ──────────── */
.account-pending {
    border: 1px solid color-mix(in oklch, var(--c-cta) 25%, var(--c-line-soft));
    border-radius: var(--r-lg);
    background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, var(--c-cta) 8%, transparent) 0%, transparent 55%), var(--c-paper);
    box-shadow: 0 8px 26px -18px color-mix(in oklch, var(--c-cta) 45%, transparent);
    padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
}
.account-pending-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.account-pending-head strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--c-ink); }
.account-pending-head span { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.account-pending-badge {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px;
    background: var(--c-cta); color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.account-pending-items { display: flex; flex-direction: column; gap: var(--s-2); }
.account-pending-item {
    display: flex; align-items: center; gap: var(--s-3); text-decoration: none;
    padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
    background: color-mix(in oklch, var(--c-cta) 6%, var(--c-paper));
    border: 1px solid color-mix(in oklch, var(--c-cta) 15%, transparent);
    color: var(--c-ink); font-weight: 600; transition: transform .12s ease, border-color .12s ease;
}
.account-pending-item:hover { transform: translateX(2px); border-color: var(--c-cta); }
.account-pending-item > i:first-child { font-size: 1.35rem; color: var(--c-cta); }
.account-pending-arrow { margin-left: auto; color: var(--c-cta); }

/* ── Bespoke quote "what you requested" collapsible ─────────────────────── */
.bq-details { margin: var(--s-3) 0 0; border-top: 1px solid var(--c-line-soft); padding-top: var(--s-3); }
.bq-details > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-corporate);
}
.bq-details > summary::-webkit-details-marker { display: none; }
.bq-details[open] > summary { margin-bottom: var(--s-3); }
.bq-details-body { display: flex; flex-direction: column; gap: var(--s-3); }
.bq-detail-block { display: flex; flex-direction: column; gap: .35rem; }
.bq-detail-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-muted); font-weight: 700; }
.bq-detail-notes { margin: 0; color: var(--c-ink-soft); line-height: 1.6; white-space: pre-wrap; }
.bq-detail-chips, .bq-tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.bq-chip, .bq-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .65rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
    background: var(--c-paper-soft); border: 1px solid var(--c-line-soft); color: var(--c-ink-soft);
}
.bq-chip i, .bq-tag i { color: var(--c-corporate); }
.bq-tag { background: color-mix(in oklch, var(--c-turquoise-soft) 12%, var(--c-paper)); }

/* Quote card notes subtitle (identity at a glance) */
.reservation-subtitle { margin: -.25rem 0 .5rem; color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.5; }

/* ── Account → My groups (initiator's live group tracking) ─────────────── */
.group-list { display: flex; flex-direction: column; gap: 1rem; }
.group-card {
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
}
.group-card-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    margin-bottom: 1rem;
}
.group-card-title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.group-card-title a { color: var(--c-ink); text-decoration: none; }
.group-card-title a:hover { color: var(--c-accent); }
.group-card-meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
    color: var(--c-ink-soft); font-size: 0.85rem;
}
.group-card-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.group-card-meta i { font-size: 1rem; color: var(--c-ink-muted); }

.group-progress { margin-bottom: 1rem; }
.group-progress-bar {
    height: 0.5rem; border-radius: 999px;
    background: var(--c-paper-soft);
    overflow: hidden;
}
.group-progress-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--c-success), color-mix(in oklch, var(--c-success) 70%, var(--c-accent)));
    border-radius: 999px;
    transition: width var(--t-base) var(--ease-out);
}
.group-progress-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
    margin-top: 0.5rem;
    font-size: 0.82rem; color: var(--c-ink-soft);
}
.group-progress-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.group-progress-legend i { color: var(--c-success); }

.group-money {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 1rem;
}
.group-money > div { display: flex; flex-direction: column; }
.group-money-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); }
.group-money strong { font-size: 1.05rem; color: var(--c-ink); }
.group-money-expiry {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: #92400e;
    background: #fef3c7; padding: 0.35rem 0.7rem; border-radius: 999px;
}
.group-timeleft { font-weight: 600; }

.group-roster-head {
    margin: 0 0 0.6rem; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); font-weight: 600;
}
.group-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.group-member { display: flex; align-items: center; gap: 0.7rem; }
.group-member-avatar {
    flex-shrink: 0;
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent-tint); color: var(--c-accent-deep);
    font-size: 0.8rem; font-weight: 700;
}
.group-member-avatar.is-open {
    background: var(--c-paper-soft); color: var(--c-ink-muted);
    border: 1px dashed var(--c-line);
}
.group-member-name { flex: 1; font-size: 0.9rem; color: var(--c-ink); display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.group-member-open { color: var(--c-ink-muted); font-style: italic; }
.group-member-tag {
    font-size: 0.68rem; font-weight: 600;
    background: var(--c-accent-tint); color: var(--c-accent-deep);
    padding: 0.1rem 0.5rem; border-radius: 999px;
}
.group-member-status {
    flex-shrink: 0;
    font-size: 0.74rem; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: var(--c-paper-soft); color: var(--c-ink-muted);
}
.group-member-status.is-joined { background: #e0f2fe; color: #075985; }
.group-member-status.is-paid { background: #d1fae5; color: #065f46; }
.group-member-status.is-refunded { background: #fee2e2; color: #991b1b; }

.group-invites {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--c-line-soft);
}
.group-invites .group-invite-head { margin-top: 0; }
.group-invites-hint { margin-top: 0.5rem; color: var(--c-ink-muted); }

.group-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding-top: 1rem; margin-top: 1rem;
    border-top: 1px solid var(--c-line-soft);
}
.group-confirmed-note {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #065f46; font-weight: 600; font-size: 0.9rem;
}
.group-confirmed-note i { font-size: 1.1rem; }
.group-await-note {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: #92400e; font-weight: 600; font-size: 0.9rem;
}
.group-await-note i { font-size: 1.1rem; }

/* ── Group-created (invite share) page ────────────────────────────────── */
.group-created { max-width: 52rem; text-align: center; }
.group-created-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in oklch, var(--c-success) 14%, transparent);
    color: var(--c-success); font-size: 1.75rem;
}
.group-created .checkout-lede { max-width: 40rem; margin-left: auto; margin-right: auto; }
.group-created-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--c-line-soft);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg); overflow: hidden;
    margin: 1.75rem 0;
    text-align: left;
}
.gcs-cell { background: white; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
.gcs-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); }
.gcs-value { font-size: 1rem; color: var(--c-ink); line-height: 1.3; }
.gcs-sub { font-size: 0.8rem; color: var(--c-ink-soft); }
@media (max-width: 640px) {
    .group-created-summary { grid-template-columns: 1fr; }
}

.group-how {
    text-align: left;
    background: var(--c-paper-soft);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}
.group-how-head { margin: 0 0 1rem; font-weight: 600; color: var(--c-ink); }
.group-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.group-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.group-step-num {
    flex-shrink: 0;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent); color: white;
    font-weight: 700; font-size: 0.85rem;
}
.group-step strong { display: block; color: var(--c-ink); margin-bottom: 0.15rem; }
.group-step p { margin: 0; font-size: 0.88rem; color: var(--c-ink-soft); line-height: 1.5; }

.group-invite-block { text-align: left; margin-bottom: 1.75rem; }
.group-invite-head { margin: 0 0 0.85rem; font-weight: 600; color: var(--c-ink); }
.group-invite-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--c-line-soft);
    flex-wrap: wrap;
}
.group-invite-num {
    flex-shrink: 0;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-paper-soft); color: var(--c-ink-soft);
    font-size: 0.8rem; font-weight: 700;
}
.group-invite-input {
    flex: 1; min-width: 12rem;
    /* 16px — tapping to select the invite link must not zoom the page. */
    font-size: 1rem;
    background: var(--c-paper); color: var(--c-ink);
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-3); font-family: inherit;
}
.group-invite-actions { display: flex; gap: 0.5rem; }
.btn-wa {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #25d366; color: white;
    border: 0; border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-3);
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    cursor: pointer;
}
.btn-wa:hover { background: #1ebe5a; color: white; }
.group-expiry-note { margin-top: 1rem; }
.group-created-cta {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
}

/* Status badges */
.status-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.status-badge i { font-size: 0.95rem; }
.status-badge--pending { background: #fef3c7; color: #92400e; }
.status-badge--ok { background: #d1fae5; color: #065f46; }
.status-badge--err { background: #fee2e2; color: #991b1b; }

/* Tabs (used in reservations) */
.account-tabs {
    display: flex; gap: 0.25rem;
    border-bottom: 1px solid var(--c-line-soft);
    overflow-x: auto;
    flex-wrap: wrap;
}
.account-tab {
    background: transparent;
    border: 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.account-tab:hover { color: var(--c-ink); }
.account-tab--active { color: var(--c-ink); border-bottom-color: var(--c-night); }
.account-tab-count {
    background: var(--c-paper-soft);
    color: var(--c-ink-muted);
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
}
.account-tab--active .account-tab-count { background: var(--c-night); color: white; }

/* Empty state */
.account-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--c-ink-muted);
}
.account-empty i { font-size: 3rem; opacity: 0.5; }
.account-empty h3 { margin: 1rem 0 0.5rem; color: var(--c-ink); }
.account-empty p { margin: 0 0 1.25rem; }

/* Cards */
.account-card {
    background: white;
    border-radius: 1rem;
    padding: 1.75rem;
    border: 1px solid var(--c-line-soft);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.04);
}
.account-card--danger { border-color: #fecaca; }
.account-card-title { font-size: 1.1rem; margin: 0 0 0.5rem; color: var(--c-ink); font-weight: 600; }
.account-card-title--danger { color: #991b1b; }
.account-card-lede { color: var(--c-ink-soft); margin: 0 0 1.25rem; line-height: 1.5; font-size: 0.9rem; }

/* Forms inside cards */
.account-form { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; }
.account-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .account-row { grid-template-columns: 1fr; } }
.account-field { display: flex; flex-direction: column; gap: 0.35rem; }
.account-field label { font-size: 0.85rem; font-weight: 600; color: var(--c-ink); }
.account-field input, .account-field select, .account-field textarea {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.5rem;
    /* Stay at 16px: iOS Safari zooms the viewport on focus below that and
       never zooms back out, stranding the user mid-form. */
    font-size: 1rem;
    background: white;
    /* Pin text colour explicitly — never rely on the inherited/UA default, which
       goes white under a dark-mode color-scheme and hides typed text. */
    color: var(--c-ink);
    font-family: inherit;
}
.account-field input::placeholder, .account-field textarea::placeholder { color: var(--c-ink-muted); }
.account-field input:focus, .account-field select:focus {
    outline: 2px solid color-mix(in oklch, var(--c-accent) 50%, transparent);
    outline-offset: 1px;
    border-color: var(--c-accent);
}
.account-field input:disabled { background: var(--c-paper-soft); color: var(--c-ink-muted); }
.account-field small { color: var(--c-ink-muted); font-size: 0.75rem; }

/* Security rows */
.security-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}
.security-row-meta { color: var(--c-ink-muted); font-size: 0.85rem; margin: 0.25rem 0 0; }
/* Both render raw e-mail addresses — see .account-side-meta above. */
.security-row strong, .security-row-meta { overflow-wrap: anywhere; min-width: 0; }
.security-toggle {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0;
    cursor: pointer;
    margin-bottom: 1rem;
}

/* Consent log */
.consent-list { display: flex; flex-direction: column; gap: 0.5rem; }
.consent-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    gap: 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--c-paper-soft);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    align-items: center;
}
.consent-pill {
    text-align: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-weight: 600;
    font-size: 0.75rem;
}
.consent-pill--yes { background: #d1fae5; color: #065f46; }
.consent-pill--no { background: #fee2e2; color: #991b1b; }
.consent-date, .consent-policy { color: var(--c-ink-muted); font-family: var(--font-mono, monospace); font-size: 0.75rem; }
/* Four columns (pill + status + timestamp + version) need ~302px and cannot fit
   the ~290px card on a phone. Fold to 2x2: pill+status, then date+version. */
@media (max-width: 560px) {
    .consent-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.35rem 0.75rem;
        align-items: baseline;
    }
    .consent-pill { justify-self: start; }
}

/* Data export */
.account-export-preview { margin: 1rem 0 1.5rem; }
.account-export-preview summary { cursor: pointer; color: var(--c-ink-muted); font-weight: 600; padding: 0.5rem 0; }
.account-export-pre {
    background: var(--c-paper-soft);
    padding: 1rem;
    border-radius: 0.5rem;
    max-height: 320px;
    overflow: auto;
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Danger buttons */
.btn-danger {
    background: #991b1b; color: white;
    border: 1px solid #991b1b;
    padding: 0.6rem 1.1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-danger:hover { background: #7f1d1d; }
.btn-danger-outline {
    background: white; color: #991b1b;
    border: 1px solid #fecaca;
    padding: 0.6rem 1.1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-danger-outline:hover { background: #fef2f2; border-color: #991b1b; }

/* ── Header avatar chip ──────────────────────────────────────────────────── */
.header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--c-night);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 0.4rem;
    text-transform: uppercase;
    position: relative;
}

/* Customer "needs your attention" indicator next to the account link */
.header-account-link { position: relative; }
.header-notif-dot {
    position: absolute; top: -1px; right: 0.15rem;
    width: 0.6rem; height: 0.6rem; border-radius: 50%;
    background: var(--c-cta); border: 2px solid var(--c-bg);
}
.header-notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.35rem; margin-left: 0.35rem;
    border-radius: 999px; background: var(--c-cta); color: #fff;
    font-size: 0.7rem; font-weight: 800; line-height: 1;
}
@media (max-width: 540px) {
    .d-none-mobile { display: none; }
}

/* ── Auth pages (login/register/reset) ───────────────────────────────────── */
.auth-shell {
    min-height: calc(100dvh - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg,
        color-mix(in oklch, white 95%, var(--c-night)) 0%,
        white 100%);
}
.auth-card {
    width: 100%;
    max-width: 440px;
    background: white;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.04);
    border: 1px solid color-mix(in oklch, white 88%, var(--c-night));
}
.auth-card-wide { max-width: 560px; }
.auth-title {
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
    color: var(--c-ink);
}
.auth-lede {
    color: var(--c-ink-soft);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    /* SifreSifirla interpolates the user's e-mail here. */
    overflow-wrap: anywhere;
}
.auth-card { overflow-wrap: anywhere; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.375rem; }
.auth-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-field input {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in oklch, white 80%, var(--c-night));
    border-radius: 0.625rem;
    font-size: 1rem;
    background: white;
    color: var(--c-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--c-night);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-night) 12%, transparent);
}

/* ── Premium split layout for the public login / register pages ────────── */
.auth-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100dvh - 5rem);
}
.auth-brand {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem;
    color: #fff;
    background: #0b1f2a url('https://images.pexels.com/photos/34577902/pexels-photo-34577902.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
}
/* Editorial scrim — keeps the photo legible and brand-tints the lower two-thirds where text sits. */
.auth-brand::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(168deg,
        color-mix(in oklch, var(--c-night) 28%, transparent) 0%,
        color-mix(in oklch, var(--c-night) 66%, transparent) 55%,
        color-mix(in oklch, var(--c-corporate) 90%, transparent) 100%);
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-logo {
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
    color: #fff; text-decoration: none; letter-spacing: .01em;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}
.auth-brand-body { max-width: 30rem; }
.auth-brand-tagline {
    font-family: var(--font-display); font-size: 2.35rem; line-height: 1.12;
    font-weight: 800; margin: 0 0 2rem; color: #fff;
    text-shadow: 0 2px 20px rgb(0 0 0 / 0.4);
}
.auth-brand-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.auth-brand-points li {
    display: flex; align-items: center; gap: .85rem; font-size: 1.02rem; font-weight: 500;
    color: color-mix(in oklch, white 92%, var(--c-turquoise-soft));
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.35);
}
.auth-brand-points i { font-size: 1.35rem; color: var(--c-turquoise-soft); flex: 0 0 auto; }
.auth-brand-trust {
    margin: 2.25rem 0 0; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .88rem; color: color-mix(in oklch, white 80%, transparent);
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}
.auth-brand-trust i { color: var(--c-turquoise-soft); font-size: 1.05rem; }
.auth-split-form {
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, color-mix(in oklch, white 96%, var(--c-night)) 0%, white 100%);
}
.auth-split .auth-card { box-shadow: 0 18px 50px -24px rgb(15 30 45 / 0.28); }
@media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; min-height: auto; }
    .auth-brand { min-height: 34vh; padding: 2rem; }        /* slim photo banner instead of hidden */
    .auth-brand-tagline { font-size: 1.6rem; margin-bottom: 0; }
    .auth-brand-points, .auth-brand-trust { display: none; } /* keep the mobile banner clean */
}
.auth-consent {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 0.875rem;
    color: var(--c-ink-soft);
    cursor: pointer;
}
.auth-consent input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--c-night);
}
.auth-error,
.validation-message {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b !important;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
    display: block;
}
.account-field .validation-message,
.account-field .auth-error { margin-top: 0.35rem; }
.auth-success {
    background: color-mix(in oklch, #10b981 12%, white);
    border: 1px solid color-mix(in oklch, #10b981 30%, white);
    color: #065f46;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.auth-links {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--c-ink-muted);
}
.auth-links a {
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.auth-links a:hover { border-bottom-color: var(--c-ink); }

/* ── Attraction strip (tour detail "Bu turda göreceğiniz yerler") ────────── */
/* ── "Places you'll see" — big-photo horizontal slider ───────────────────── */
.places-section { margin-bottom: var(--s-7); }
.places-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
.places-head .section-title { margin-bottom: 0; }
.places-nav { display: flex; gap: 0.4rem; }
.places-nav-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--c-line-soft); background: var(--c-paper-elevated);
    color: var(--c-ink); display: grid; place-items: center; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.places-nav-btn:hover {
    border-color: var(--c-accent); color: var(--c-accent);
    transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.places-slider,
.reviews-slider {
    display: flex; gap: var(--s-4); overflow-x: auto;
    scroll-snap-type: x mandatory; padding: var(--s-3) 0 var(--s-4);
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.places-slider::-webkit-scrollbar,
.reviews-slider::-webkit-scrollbar { height: 8px; }
.places-slider::-webkit-scrollbar-thumb,
.reviews-slider::-webkit-scrollbar-thumb { background: var(--c-line-soft); border-radius: 4px; }
.place-card {
    position: relative; flex: 0 0 clamp(240px, 34vw, 320px); aspect-ratio: 4 / 5;
    border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start;
    text-decoration: none; box-shadow: var(--shadow-2); display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.place-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(15, 33, 51, 0.5); }
.place-card-photo {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transition: transform 0.5s ease;
}
.place-card:hover .place-card-photo { transform: scale(1.06); }
.place-card-photo--ph {
    display: grid; place-items: center; font-size: 2.5rem; color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(135deg, var(--c-support), var(--c-corporate));
}
.place-card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(3, 10, 18, 0.82) 0%, rgba(3, 10, 18, 0.28) 45%, transparent 72%);
}
.place-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-4);
    display: flex; flex-direction: column; gap: 4px; color: #fff;
}
.place-card-type {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700; color: rgba(255, 255, 255, 0.82);
}
.place-card-name { font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.place-card-meta { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85); display: inline-flex; align-items: center; gap: 4px; }

/* ── Compact tour slider (Destinasyon "tours covering this place") ──────────
   A horizontal, swipeable rail of small tour cards — replaces the oversized
   card-grid. Native scroll-snap; hscroll.js only wires the prev/next buttons. */
.tour-slider {
    display: flex; gap: var(--s-4); overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--s-3) var(--s-1) var(--s-4);
    margin: 0 calc(-1 * var(--s-1));
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tour-slider::-webkit-scrollbar { height: 8px; }
.tour-slider::-webkit-scrollbar-thumb { background: var(--c-line-soft); border-radius: 4px; }
.tour-slide {
    flex: 0 0 clamp(15rem, 74vw, 17.5rem);
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg); overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: var(--shadow-1);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.tour-slide:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--c-line); }
.tour-slide-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tour-slide-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.tour-slide:hover .tour-slide-photo { transform: scale(1.05); }
.tour-slide-photo--ph { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.6); background: linear-gradient(135deg, var(--c-support), var(--c-corporate)); }
.tour-slide-mode {
    position: absolute; top: var(--s-2); left: var(--s-2);
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 600; color: #fff;
    background: rgba(3, 10, 18, 0.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tour-slide-body { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--s-4); flex: 1; }
.tour-slide-city {
    font-size: var(--fs-xs); color: var(--c-ink-muted);
    display: inline-flex; align-items: center; gap: 0.3rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tour-slide-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--fs-md); line-height: 1.25; color: var(--c-ink); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tour-slide-foot {
    margin-top: auto; padding-top: var(--s-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.tour-slide-price { display: flex; flex-direction: column; line-height: 1.1; }
.tour-slide-price-label { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.tour-slide-price-amount { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--c-accent-deep); }
.tour-slide-cta {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-accent-tint); color: var(--c-accent-deep);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tour-slide:hover .tour-slide-cta { background: var(--c-accent); color: #fff; }
/* Disabled slider buttons at the scroll extremes (hscroll.js toggles [disabled]). */
.places-nav-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* ── Homepage "Toplu Paketler" — asymmetric photo mosaic ───────────────────
   Every tile is a full-bleed image with text overlaid on a bottom scrim. The tile
   sizing (below) is a deliberate one-big-one-small rhythm, not a uniform grid, so the
   section reads as bespoke/editorial rather than a stock template. ── */
.bento-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.bento-head-intro { max-width: 46rem; }
.bento-head-intro .eyebrow-chip { margin-bottom: var(--s-3); }
.bento-head-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    letter-spacing: -0.02em; margin: 0 0 var(--s-3);
}
.bento-head-intro .section-lede { margin: 0; color: var(--c-ink-soft); }
.bento-head-cta { white-space: nowrap; flex: none; }

/* Square-unit mosaic — the row height tracks the column width (via a vw-based clamp)
   so cells stay SQUARE, never wide-landscape. The rhythm is one-big-one-small and
   vertical: a 2×2 big square, a tall 1×2 portrait, and two 1×1 squares. `dense`
   auto-flow keeps it gapless. */
.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(190px, 23vw, 300px);   /* ≈ one column wide → square cells */
    grid-auto-flow: row dense;
    gap: var(--s-3);
}
.bento-tile {
    position: relative; display: block; overflow: hidden;
    grid-column: span 1; grid-row: span 1;        /* default: square */
    border-radius: var(--r-lg);
    text-decoration: none; color: #fff;
    box-shadow: var(--shadow-2);
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}
.bento-tile--feature { grid-column: span 2; grid-row: span 2; }   /* big square */
.bento-tile:nth-child(3) { grid-row: span 2; }                    /* tall portrait */
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }

.bento-photo {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 0.6s var(--ease-out);
}
.bento-tile:hover .bento-photo { transform: scale(1.06); }
.bento-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
        rgba(3, 10, 18, 0.86) 0%,
        rgba(3, 10, 18, 0.34) 42%,
        rgba(3, 10, 18, 0.02) 72%);
}
.bento-chip, .bento-rating {
    position: absolute; top: var(--s-3); z-index: 2;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: var(--fs-xs); color: #fff;
    background: rgba(3, 10, 18, 0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bento-chip { left: var(--s-3); font-weight: 600; }
.bento-rating { right: var(--s-3); font-weight: 700; }
.bento-rating .ph-star { color: #f4b740; }
.bento-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: var(--s-4);
}
.bento-city {
    font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.85);
    display: inline-flex; align-items: center; gap: 0.3rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.bento-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--fs-md); line-height: 1.2;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bento-tile--feature .bento-title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    -webkit-line-clamp: 3;
}
.bento-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    margin-top: var(--s-2);
}
.bento-price { display: flex; flex-direction: column; line-height: 1.15; }
.bento-price-label { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.78); }
.bento-price-amount { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
.bento-go {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.16); color: #fff;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: background var(--t-fast) var(--ease-out);
}
.bento-tile:hover .bento-go { background: var(--c-accent); }
/* Small tiles are tighter — drop the "from" label to protect the title. */
.bento-tile:not(.bento-tile--feature) .bento-price-label { display: none; }
/* Skeleton tiles shimmer directly (no inner media element). */
.bento-tile.skeleton {
    background: linear-gradient(90deg,
        var(--c-paper-soft) 0%,
        color-mix(in oklch, var(--c-paper-soft) 60%, var(--c-paper)) 50%,
        var(--c-paper-soft) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite linear;
}

/* Phone: 2 columns of square cells. Big square (2×2) tops the grid, then a square,
   a tall portrait and a square pack under it with no gaps. Row height tracks the
   2-col width so cells stay square. */
@media (max-width: 600px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 45vw, 260px); }
    .bento-tile--feature { grid-column: span 2; grid-row: span 2; }
    .bento-tile:nth-child(3) { grid-row: span 2; }
}

/* ── Card-fan carousel (tour "places you'll see") — a fanned hand of photo cards.
   Fallback (pre-JS): a centred scrollable row. JS adds .is-fanned → cards stack at the
   container centre and CSS transitions fan them into an arc (see card-fan.js). ── */
.card-fan {
    position: relative; display: flex; gap: var(--s-3);
    justify-content: flex-start; align-items: flex-end; overflow-x: auto;
    padding: var(--s-3) var(--s-1) var(--s-2);
    scroll-snap-type: x proximity;
}
.card-fan.is-fanned {
    display: block; overflow: visible;
    height: clamp(25rem, 46vw, 33rem);
    max-width: 62rem; margin: var(--s-6) auto var(--s-4); padding: 0;
    cursor: grab;
}
.card-fan.is-fanned.is-dragging { cursor: grabbing; }
.fan-card {
    flex: 0 0 auto; width: clamp(10.5rem, 16.5vw, 14rem); aspect-ratio: 3 / 4.2;
    position: relative; display: block;
    border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: center;
    /* Branded gradient behind the photo — a missing/blocked image reads as an
       intentional tile (with its name overlay) rather than a flat dark box. */
    background: linear-gradient(145deg, var(--c-support), var(--c-corporate));
    box-shadow: 0 22px 48px -22px rgba(3, 10, 18, 0.6);
}
/* The actual navigable link — fills the card; the expand button is its sibling,
   not its child (see the markup comment in TourDetail.razor for why). */
.fan-card-link { position: absolute; inset: 0; display: block; text-decoration: none; }
.card-fan.is-fanned .fan-card {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center; opacity: 0;
    transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1), opacity 0.45s ease, box-shadow 0.3s ease;
    will-change: transform, opacity; cursor: pointer;
}
.card-fan.is-fanned .fan-card:hover { box-shadow: 0 30px 60px -20px rgba(3, 10, 18, 0.7); }
.fan-card-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.fan-card-photo--ph { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.5); background: linear-gradient(135deg, var(--c-support), var(--c-corporate)); }
/* Darker + taller than before: a slow/failed photo load leaves .fan-card-photo showing
   its near-white .media-frame placeholder, which used to wash this scrim out to a mid-gray
   right behind the text — legible on a real dark photo, not on a pale one. The stronger,
   taller dark stop plus per-line text-shadow below keeps the name/type/meta readable
   regardless of what's actually behind them. */
.fan-card-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 10, 18, 0.92) 0%, rgba(3, 10, 18, 0.6) 38%, rgba(3, 10, 18, 0.15) 68%, transparent 84%); }
.fan-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; color: #fff; }
.fan-card-type { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.fan-card-name {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    line-height: 1.22;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
.fan-card-meta { font-size: 0.68rem; color: rgba(255, 255, 255, 0.9); display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

/* Expand-to-lightbox affordance — carries its own glass pill so it stays legible
   whether or not the card's scrim is showing (side cards in the fanned deck hide the
   scrim/name until hovered, see above). */
.fan-card-expand {
    position: absolute; top: var(--s-2); right: var(--s-2); z-index: 5;
    width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff; font-size: 0.95rem;
    background: rgba(3, 10, 18, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    opacity: 0; transform: scale(0.85); transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.fan-card:hover .fan-card-expand,
.fan-card:focus-within .fan-card-expand,
.card-fan.is-fanned .fan-card.is-center .fan-card-expand { opacity: 1; transform: scale(1); }
.fan-card-expand:hover { background: rgba(3, 10, 18, 0.68); }
/* Touch devices never hover — the plain scrollable row keeps it always visible there. */
@media (pointer: coarse) { .fan-card-expand { opacity: 1; transform: none; } }
/* In the fan, side cards are clean photos — the scrim + label appear only on the front
   (centre) card and on hover, so overlapping cards never hide each other's text. */
.card-fan.is-fanned .fan-card-scrim,
.card-fan.is-fanned .fan-card-body { opacity: 0; transition: opacity 0.35s ease; }
.card-fan.is-fanned .fan-card.is-center .fan-card-scrim,
.card-fan.is-fanned .fan-card.is-center .fan-card-body,
.card-fan.is-fanned .fan-card:hover .fan-card-scrim,
.card-fan.is-fanned .fan-card:hover .fan-card-body { opacity: 1; }
/* Paging only exists while JS is actually fanning the deck. Keyed off .is-fanned
   rather than a media query so it can never drift from card-fan.js's capability
   gate (which also weighs cores/memory/saveData — untestable from CSS). Without
   this, the ungated fallback row would show dead prev/next/dots. */
.card-fan-controls { display: none; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-3); }
.card-fan.is-fanned ~ .card-fan-controls { display: flex; }
.card-fan-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-paper-elevated); color: var(--c-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.card-fan-nav:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.card-fan-dots { display: flex; gap: 6px; }
.card-fan-dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklch, var(--c-ink) 18%, transparent); transition: background 0.3s, transform 0.3s; }
.card-fan-dot.is-on { background: var(--c-accent); transform: scale(1.35); }

/* ── Public reviews (tour detail) ────────────────────────────────────────── */
.reviews-section { padding: var(--s-7) 0 var(--s-9); }
.reviews-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.reviews-head-title { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.reviews-head-title .section-title { margin-bottom: 0; }
.reviews-summary { display: inline-flex; align-items: center; gap: 0.5rem; }
.reviews-summary-avg { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.reviews-summary-stars { display: inline-flex; gap: 1px; }
.reviews-summary-stars .star { color: color-mix(in oklch, var(--c-ink) 20%, transparent); }
.reviews-summary-stars .star.is-on { color: var(--c-accent); }
.reviews-summary-count { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.reviews-slider .review-card { flex: 0 0 clamp(260px, 34vw, 340px); scroll-snap-align: start; }
.review-card {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.reviews-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: var(--s-6); text-align: center; color: var(--c-ink-muted);
    background: var(--c-paper-elevated); border: 1px dashed var(--c-line-soft); border-radius: var(--r-lg);
}
.reviews-empty i { font-size: 2rem; color: var(--c-accent); }
.review-composer { margin-top: var(--s-5); }
.review-composer-note {
    display: flex; align-items: center; gap: 0.6rem; padding: var(--s-4);
    border-radius: var(--r-md); background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft); color: var(--c-ink); font-size: var(--fs-sm);
}
.review-composer-note.is-ok {
    border-color: color-mix(in oklch, var(--c-accent) 45%, transparent);
    background: color-mix(in oklch, var(--c-accent) 8%, var(--c-paper-elevated));
}
.review-composer-note i { color: var(--c-accent); font-size: 1.2rem; }
.review-composer-note .btn-tertiary { margin-left: auto; white-space: nowrap; }
.review-form {
    background: var(--c-paper-elevated); border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column;
    gap: var(--s-3); max-width: 560px;
}
.review-form-title { font-weight: 700; color: var(--c-ink); }
.review-form-stars { display: inline-flex; gap: 0.25rem; }
.rf-star {
    font-size: 1.75rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: 0;
    color: color-mix(in oklch, var(--c-ink) 20%, transparent);
    transition: color 0.12s, transform 0.12s;
}
.rf-star:hover, .rf-star.is-on { color: var(--c-accent); }
.rf-star:hover { transform: scale(1.12); }
.review-form-comment, .review-form-name {
    width: 100%; border: 1px solid var(--c-line-soft); border-radius: var(--r-md);
    padding: 0.6rem 0.75rem; font: inherit; color: var(--c-ink);
    background: var(--c-paper, #fff); resize: vertical;
}
.review-form-comment:focus, .review-form-name:focus { outline: none; border-color: var(--c-accent); }
.review-form-public { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--c-ink); cursor: pointer; }
.review-form .btn-primary { align-self: flex-start; }
.review-author-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: #fff;
    display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
}
.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.review-stars { display: inline-flex; gap: 2px; }
.review-stars .star { color: color-mix(in oklch, var(--c-ink) 20%, transparent); font-size: 1rem; }
.review-stars .star.is-on { color: var(--c-accent); }
.review-date { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.review-body { color: var(--c-ink); line-height: 1.55; font-size: var(--fs-sm); }
.review-photo {
    border-radius: var(--r-sm);
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}
.review-author {
    color: var(--c-ink-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── WhatsApp floating button ────────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgb(37 211 102 / 0.45), 0 2px 6px rgb(0 0 0 / 0.15);
    z-index: 9000;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    animation: whatsapp-pulse 2.6s ease-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgb(37 211 102 / 0.55), 0 3px 8px rgb(0 0 0 / 0.18); }
@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgb(37 211 102 / 0.45), 0 0 0 0 rgb(37 211 102 / 0.55); }
    50%      { box-shadow: 0 6px 20px rgb(37 211 102 / 0.45), 0 0 0 14px rgb(37 211 102 / 0); }
}
@media (max-width: 540px) {
    .whatsapp-float { bottom: 1rem; right: 1rem; width: 50px; height: 50px; }
}

/* ── Footer social + TÜRSAB ──────────────────────────────────────────────── */
.footer-social {
    display: inline-flex;
    gap: 0.75rem;
    align-items: center;
}
.footer-social a {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklch, white 25%, var(--c-night));
    color: color-mix(in oklch, white 75%, var(--c-night));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.footer-social a:hover {
    color: white;
    border-color: var(--c-accent);
    background: color-mix(in oklch, var(--c-accent) 15%, transparent);
}
.footer-tursab {
    color: color-mix(in oklch, white 65%, var(--c-night));
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
}
.footer-tursab strong { color: white; font-weight: 600; }

/* ── KVKK consent banner ─────────────────────────────────────────────────── */
.kvkk-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: color-mix(in oklch, white 96%, var(--c-night));
    border-top: 1px solid color-mix(in oklch, white 85%, var(--c-night));
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
    z-index: 9999;
    padding: 1rem 0;
    backdrop-filter: blur(8px);
    animation: kvkk-slide-up 0.4s ease-out;
}
@keyframes kvkk-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.kvkk-banner-inner {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.kvkk-banner-text {
    flex: 1 1 320px;
    font-size: 0.875rem;
    color: var(--c-ink-soft);
    line-height: 1.5;
}
.kvkk-banner-text strong { color: var(--c-ink); display: block; margin-bottom: 0.25rem; }
.kvkk-banner-text a { color: var(--c-accent, var(--c-night)); text-decoration: underline; }
.kvkk-banner-actions {
    display: flex;
    gap: 0.5rem;
    /* Must be able to shrink and wrap: the Turkish labels push the accept
       button off a 360px screen otherwise. */
    flex-shrink: 1;
    flex-wrap: wrap;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Pre-footer CTA — bridges the dark page-end (sticky-gallery, etc.) with the
   navy site-footer via a single soft gradient. Replaces the previous hard cut
   that the user flagged on the homepage. */
.pre-footer-cta {
    background: linear-gradient(180deg, #020617 0%, var(--c-night) 100%);
    color: rgba(255,255,255,0.92);
    padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    position: relative;
}
.pre-footer-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 20% 0%, rgba(0,166,166,0.18), transparent 60%),
        radial-gradient(ellipse 50% 70% at 80% 100%, rgba(232,124,76,0.16), transparent 65%);
    pointer-events: none;
}
.pre-footer-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
    z-index: 1;
}
.pre-footer-cta-text { max-width: 56ch; }
.pre-footer-eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
.pre-footer-title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.65rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.65rem;
    color: white;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.pre-footer-lede {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 0.98rem;
    line-height: 1.55;
}
.pre-footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}
.pre-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.2s, background 0.15s, border-color 0.15s;
    border: 1px solid transparent;
}
.pre-footer-btn i { font-size: 1.1rem; }
.pre-footer-btn--primary {
    background: linear-gradient(135deg, var(--c-accent-warm), var(--c-cta));
    color: white;
    box-shadow: 0 10px 26px rgba(232,124,76,0.35);
}
.pre-footer-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(232,124,76,0.45);
}
.pre-footer-btn--ghost {
    background: rgba(255,255,255,0.08);
    color: white;
    border-color: rgba(255,255,255,0.18);
}
.pre-footer-btn--ghost:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.32);
}
@media (max-width: 760px) {
    .pre-footer-cta-inner { grid-template-columns: 1fr; text-align: left; }
    .pre-footer-cta-actions { width: 100%; }
    .pre-footer-btn { flex: 1 1 auto; justify-content: center; }
}

.site-footer {
    background: var(--c-night);
    color: color-mix(in oklch, white 80%, var(--c-night));
    padding: var(--s-7) 0 var(--s-5);
    margin-top: 0; /* pre-footer CTA above already provides the gap */
}
.footer-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--s-5);
}
.footer-brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.footer-brand .brand-mark { color: var(--c-accent-warm); }
/* Wrap: the four links total ~324px and overflow a 320px screen otherwise. */
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.footer-nav a { font-size: var(--fs-sm); color: color-mix(in oklch, white 70%, var(--c-night)); }
.footer-nav a:hover { color: var(--c-accent-warm); }
.footer-copy { color: color-mix(in oklch, white 50%, var(--c-night)); font-size: var(--fs-xs); }

/* ── Tour detail page ───────────────────────────────────────────────────── */
.detail-hero {
    position: relative;
    /* min-height, NOT height: a long title + the 5-item meta row is taller than a fixed
       13rem box on mobile, and with justify-content:flex-end + overflow:hidden the extra
       content was clipped off the TOP (title cut, pills colliding). Letting the hero grow
       to fit its content keeps everything inside the scrim and never overlaps. */
    min-height: clamp(15rem, 32vh, 21rem);
    overflow: hidden;
    isolation: isolate;
    /* Fallback surface so the white overlay text stays legible even when the tour
       has no hero image yet — the .detail-hero-image layer is then transparent and
       this brand-navy gradient shows through instead of the light page background. */
    background: linear-gradient(135deg, var(--c-corporate), var(--c-support));
}
.detail-hero-image {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s var(--ease-out);
    transform: scale(1.04);
}
.detail-hero:hover .detail-hero-image { transform: scale(1.08); }

/* Real-<img> hero media (TourDetail) — the image is the LCP element, so it's an
   eager <img fetchpriority=high>, not a CSS background (which loads at low priority
   and can't be preloaded/srcset). Destinasyon still uses .detail-hero-image above. */
.detail-hero-media { position: absolute; inset: 0; overflow: hidden; }
.detail-hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 8s var(--ease-out);
    transform: scale(1.04);
}
.detail-hero:hover .detail-hero-img { transform: scale(1.08); }
.detail-hero-fade {
    position: absolute; inset: 0;
    /* Legibility scrim. The text is bottom-anchored, so the wash is strongest at the
       bottom and eases up — the photo stays visible up top but white title/meta stay
       AA-legible over ANY photo. Smoother multi-stop ramp (no hard cut) + a faint warm
       accent tint on the diagonal so it reads on-brand, not "just dark". */
    background:
        linear-gradient(0deg,
            color-mix(in oklch, var(--c-night) 82%, transparent) 0%,
            color-mix(in oklch, var(--c-night) 60%, transparent) 26%,
            color-mix(in oklch, var(--c-night) 32%, transparent) 55%,
            color-mix(in oklch, var(--c-night) 10%, transparent) 82%,
            transparent 100%),
        linear-gradient(115deg,
            color-mix(in oklch, var(--c-accent) 16%, transparent) 0%,
            transparent 52%);
}
.detail-hero-inner {
    position: relative;
    /* Matches the hero's min-height so short content still bottom-aligns, but grows
       (and grows the hero with it) when the title/meta are tall — no clipping. */
    min-height: clamp(15rem, 32vh, 21rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: var(--s-6);
    padding-bottom: var(--s-7);
    color: white;
}
.breadcrumbs {
    display: flex; gap: var(--s-2); align-items: center;
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
    color: color-mix(in oklch, white 80%, transparent);
}
.breadcrumbs a:hover { color: var(--c-accent-warm); }
.breadcrumbs span[aria-hidden] { color: color-mix(in oklch, white 50%, transparent); }

.theme-pill-hero {
    /* .theme-pill is position:absolute (it's a photo-corner overlay on cards). On the
       hero it lives INSIDE .hero-pill-row, so it must return to normal flow — otherwise
       it floats to the hero's top-left corner and lands on top of the title. */
    position: static;
    top: auto; left: auto;
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: color-mix(in oklch, var(--c-accent) 90%, transparent);
    color: white;
}
/* Flat line-icon in the category pill (matches the meta row) — the 3D raster chip
   icon was heavy and clashed with the flat pill; one icon language reads cleaner. */
.theme-pill-hero i { font-size: 1.05em; line-height: 1; }
/* "New tour" chip fills the rating slot when a tour has no reviews yet. */
.detail-meta-new i { color: #e6a817; }
.detail-title {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    color: white;
    margin-bottom: var(--s-3);
    max-width: 36ch;
    text-shadow: 0 2px 24px color-mix(in oklch, var(--c-night) 60%, transparent);
}
.detail-meta {
    display: flex; flex-wrap: wrap; gap: var(--s-5);
    color: color-mix(in oklch, white 90%, transparent);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.detail-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
/* Uniform flat line-icons in the meta row (they inherit the row's single colour, so no
   more orange/grey/blue 3D-icon jumble). Rating star + "new" sparkle keep their gold. */
.detail-meta i { font-size: 1.05em; opacity: 0.9; }
.detail-meta-rating i,
.detail-meta-new i { color: #e6a817; opacity: 1; }

/* Glass "back" control on the mobile tour hero — hidden by default (desktop keeps the
   in-card breadcrumb), revealed only ≤720px by the block below. Absolutely placed over
   the photo; desktop .detail-hero-media has overflow:hidden so it can never leak. */
.hero-back-btn {
    display: none;
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    z-index: 3;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--c-night) 32%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid color-mix(in oklch, white 26%, transparent);
    color: white;
    font-size: 1.15rem;
    box-shadow: 0 2px 12px rgba(3, 10, 18, 0.3);
    transition: background var(--t-fast) var(--ease-out);
}
.hero-back-btn:hover,
.hero-back-btn:active { background: color-mix(in oklch, var(--c-night) 46%, transparent); }

/* ── Mobile tour hero — sıfırdan (2026-07-19) ────────────────────────────────
   Premium OTA app pattern: an immersive full-bleed photo (no text on it, so
   legibility can never fail) with a floating glass back button, then the title +
   meta on a rounded white "sheet" that lifts over the photo. Clean typographic
   hierarchy: category chip → title → gold rating chip → one calm facts line.
   Scoped to .detail-hero--tour so Destinasyon/Transfer heroes are untouched. */
@media (max-width: 720px) {
    .detail-hero--tour {
        min-height: 0;
        overflow: visible;
        background: none;
    }

    /* Immersive frame, subject-weighted crop (skyline/monument sits up top). */
    .detail-hero--tour .detail-hero-media {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        max-height: 44vh;
    }
    .detail-hero--tour .detail-hero-img { transform: none; object-position: center 30%; }

    /* Re-enabled as a soft, twofold scrim: a dark wash at the TOP seats the glass
       back button legibly on any photo, and a faint bottom shade adds depth where
       the white sheet lifts off the image. */
    .detail-hero--tour .detail-hero-fade {
        display: block;
        background:
            linear-gradient(180deg,
                color-mix(in oklch, var(--c-night) 44%, transparent) 0%,
                transparent 32%),
            linear-gradient(0deg,
                color-mix(in oklch, var(--c-night) 20%, transparent) 0%,
                transparent 20%);
    }

    .detail-hero--tour .hero-back-btn { display: inline-flex; }

    /* Back button + city-in-meta make the breadcrumb redundant on phones. */
    .detail-hero--tour .breadcrumbs { display: none; }

    /* Content sheet lifting over the photo. */
    .detail-hero--tour .detail-hero-inner {
        position: relative;
        z-index: 2;
        min-height: 0;
        margin-top: -1.75rem;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        color: var(--c-ink);
        background: var(--c-paper);
        box-shadow: 0 -16px 34px -20px rgba(3, 10, 18, 0.5);
        padding: var(--s-5) var(--s-5) var(--s-4);
    }

    .detail-hero--tour .hero-pill-row {
        align-items: center;
        gap: var(--s-2);
        margin-bottom: var(--s-3);
    }
    /* Category: a light tinted chip (the heavy solid-accent pill was too loud on white). */
    .detail-hero--tour .theme-pill-hero {
        background: var(--c-accent-tint);
        color: var(--c-accent-deep);
        font-weight: 650;
    }
    /* Tour code is reference info, not a headline — quiet caption, not a chip. */
    .detail-hero--tour .tour-code-pill {
        background: transparent;
        border: 0;
        padding: 0;
        color: var(--c-ink-muted);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .detail-hero--tour .detail-title {
        color: var(--c-ink);
        text-shadow: none;
        font-size: clamp(1.45rem, 6.2vw, 1.9rem);
        line-height: 1.2;
        letter-spacing: -0.01em;
        margin-bottom: var(--s-3);
    }

    /* Meta: a prominent gold rating chip, then the key facts (city · duration · group)
       as one calm muted line — no more wrapping icon jumble. */
    .detail-hero--tour .detail-meta {
        align-items: center;
        gap: var(--s-2) var(--s-3);
        color: var(--c-ink-soft);
        font-size: var(--fs-sm);
        font-weight: 500;
    }
    .detail-hero--tour .detail-meta-rating {
        gap: var(--s-1);
        padding: 0.28rem 0.6rem;
        border-radius: var(--r-pill);
        background: color-mix(in oklch, #e6a817 15%, white);
        color: var(--c-ink);
        font-weight: 600;
    }
    .detail-hero--tour .detail-meta-new {
        padding: 0.28rem 0.6rem;
        border-radius: var(--r-pill);
        background: var(--c-accent-tint);
        color: var(--c-accent-deep);
        font-weight: 600;
    }
    .detail-hero--tour .detail-meta i { color: var(--c-accent); opacity: 1; }
    .detail-hero--tour .detail-meta-rating i,
    .detail-hero--tour .detail-meta-new i { color: #e6a817; }
    /* Keep the row to the ~4 decision facts (rating · city · duration · group). */
    .detail-hero--tour .detail-meta-2nd { display: none; }
}

/* ── Sticky mobile CTA bar (TourDetail P2) ─────────────────────────────────
   Fixed price + primary action, phone-only, so the booking CTA stays reachable
   while scrolling the itinerary/reviews. Sits above the WhatsApp FAB (lifted via
   :has() below) and respects the iOS home-indicator safe area. */
.mobile-cta-bar { display: none; }
@media (max-width: 720px) {
    .mobile-cta-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
        display: flex; align-items: center; gap: var(--s-4);
        padding: var(--s-3) var(--s-4);
        padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
        background: color-mix(in oklch, var(--c-paper) 92%, transparent);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--c-line-soft);
        box-shadow: 0 -6px 24px -12px rgba(3, 10, 18, 0.35);
    }
    .mcta-price { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 0 0 auto; }
    .mcta-label { font-size: var(--fs-xs); color: var(--c-ink-muted); white-space: nowrap; }
    .mcta-amount { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--c-ink); white-space: nowrap; }
    .mcta-btn { flex: 1; margin: 0; white-space: nowrap; }

    /* Lift the global WhatsApp FAB so it never covers the bar's button. */
    body:has(.mobile-cta-bar) .whatsapp-float { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
    /* Bottom clearance so the fixed bar never hides the last section. */
    body:has(.mobile-cta-bar) .reviews-section { padding-bottom: 6rem; }
}

/* Body grid: 2 columns desktop, stacked mobile */
.detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--s-7);
    padding: var(--s-8) 0 var(--s-9);
    align-items: start;
}
@media (max-width: 960px) {
    /* minmax(0, …) is load-bearing: a bare 1fr keeps min-width:auto, so the
       card deck's min-content (~1436px) grew the track and scrolled the page
       on the SSR paint, before deferred JS fanned the cards. It also lets
       .card-fan's overflow-x:auto actually scroll. */
    .detail-body { grid-template-columns: minmax(0, 1fr); }
    /* Every .detail-sidebar is an at-a-glance price/action card (TourDetail's
       booking CTA, Configurator's "Fiyatı Kilitle", Destinasyon's map link).
       Stacked last it landed after ~4000px of itinerary, and sticky is inert
       inside a single-column grid area — so lift it above the body instead.
       Applies to TourDetail, Configurator and Destinasyon, which all collapse
       to one column at this breakpoint. */
    .detail-sidebar { order: -1; position: static; }

    /* …EXCEPT the reference panel (Destinasyon). Lifting it made it repeat the hero —
       city, region and type are all already up there — before the reader reached a single
       line of content. Natural order puts it (and its Google Maps link) after the article,
       and the duplicated rows are dropped so only the genuinely new bits remain. */
    .detail-sidebar--info { order: 0; }
    .detail-sidebar--info .dest-card-head,
    .detail-sidebar--info .dest-fact--dup { display: none; }
    /* The head is gone, so the summary is now the card's first child — drop the rule that
       used to separate it from the (now hidden) city block. */
    .detail-sidebar--info .price-card-summary { border-top: 0; margin-top: 0; padding-top: 0; }
}

.detail-lede {
    font-size: var(--fs-md);
    color: var(--c-ink-soft);
    margin-bottom: var(--s-7);
    max-width: 42rem;
}

/* ── Destination article prose — professional typographic rhythm for the SEO-HTML
   descriptions (lead + h2/h3 sections + paragraphs). Without this the raw tags inherit
   the 40px display h2 and cram against the body copy with no spacing/measure. ── */
.detail-prose {
    max-width: 68ch;
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--c-ink-soft);
}
.detail-prose p { margin: 0 0 1.15rem; }
.detail-prose > :last-child { margin-bottom: 0; }

/* Cross-links from a destination into the Route Studio + Bespoke Builder */
.dest-cross-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 2rem 0 0;
}
@media (max-width: 640px) { .dest-cross-cta { grid-template-columns: 1fr; } }
.dest-cross-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 1rem 1.1rem; border-radius: 0.9rem;
    background: var(--c-paper, #f7f6f3); border: 1px solid rgba(0,0,0,0.08);
    text-decoration: none; color: var(--c-ink, #1f2937);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.dest-cross-card:hover {
    transform: translateY(-2px); border-color: var(--c-corporate, #0e7490);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.dest-cross-card > i:first-child { font-size: 1.6rem; color: var(--c-corporate, #0e7490); flex-shrink: 0; }
.dest-cross-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.dest-cross-body strong { font-size: 0.98rem; line-height: 1.25; }
.dest-cross-body span { font-size: 0.82rem; color: var(--c-ink-soft, #6b7280); }
.dest-cross-arrow { color: var(--c-ink-soft, #9ca3af); flex-shrink: 0; }
.detail-prose p.lead {
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--c-ink);
    margin-bottom: 1.5rem;
}
.detail-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1rem + 1.4vw, 1.7rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    margin: 2.5rem 0 0.75rem;
}
.detail-prose h2:first-child { margin-top: 0; }
.detail-prose h2::after {
    content: '';
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--c-accent);
}
.detail-prose h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--c-ink);
    margin: 1.8rem 0 0.5rem;
}
.detail-prose h3:first-child { margin-top: 0; }
.detail-prose ul, .detail-prose ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.detail-prose li { margin: 0.4rem 0; line-height: 1.65; }
.detail-prose li::marker { color: var(--c-accent); }
.detail-prose a { color: var(--c-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.detail-prose strong { color: var(--c-ink); font-weight: 650; }

.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    margin: var(--s-7) 0 var(--s-5);
    letter-spacing: -0.02em;
}
.section-title:first-of-type { margin-top: var(--s-6); }

/* ── Destination photo gallery — side-by-side grid inside a rounded panel ── */
.dest-gallery-wrap {
    margin: 1.75rem 0 2rem;
    padding: clamp(0.55rem, 2vw, 1rem);
    background: var(--c-paper-soft);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-xl, 1.25rem);
    box-shadow: var(--shadow-1);
}
.dest-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 0.85rem);
    margin: 0;
}
.dest-slide {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    display: block;
    background-color: color-mix(in oklch, var(--c-corporate, #17313f) 88%, black);
    box-shadow: var(--shadow-1);
}
.dest-slide-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: transform 0.5s var(--ease-out);
}
.dest-slide:hover .dest-slide-img { transform: scale(1.06); }
.dest-slide::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 0 var(--c-accent); pointer-events: none;
    transition: box-shadow 0.25s var(--ease-out);
}
.dest-slide:hover::after { box-shadow: inset 0 0 0 2px var(--c-accent); }
.dest-gallery-credit {
    margin: 0.75rem 0.25rem 0.15rem;
    font-size: var(--fs-xs); color: var(--c-ink-muted);
    display: flex; align-items: center; gap: 0.35rem;
}
.dest-gallery-credit i { opacity: 0.8; }
/* On phones keep photos genuinely side-by-side (pairs) rather than collapsing to one. */
@media (max-width: 640px) {
    .dest-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Itinerary */
.itinerary { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.itinerary-day {
    background: var(--c-paper-elevated);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    border: 1px solid var(--c-line-soft);
}
.itinerary-day header {
    display: flex; align-items: center; gap: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: var(--s-3);
}
.day-num {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    font-style: italic;
    color: var(--c-accent-deep);
}
.itinerary-items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.itinerary-items .item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-3);
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease-out);
}
.itinerary-items .item:hover { background: var(--c-paper-soft); }
.itinerary-items .item.is-anchor {
    background: var(--c-accent-tint);
    border-left: 3px solid var(--c-accent);
}
.item-icon { font-size: 1.5rem; line-height: 1; }
.item-name { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); margin-bottom: 2px; }
.item-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.anchor-tag { color: var(--c-accent-deep); font-weight: 600; }
.item-price { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 500; color: var(--c-ink); }

/* Departure picker */
.dep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--s-3);
}
.dep-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-4);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    text-align: left;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.dep-card:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dep-card.is-selected {
    border-color: var(--c-accent);
    background: var(--c-accent-tint);
    box-shadow: var(--shadow-glow);
}
.dep-date-block {
    display: flex; flex-direction: column; align-items: center;
    background: var(--c-paper-soft);
    border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-3);
    min-width: 3.5rem;
}
.dep-card.is-selected .dep-date-block { background: var(--c-paper-elevated); }
.dep-day {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--c-accent-deep);
    line-height: 1;
}
.dep-month {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    margin-top: 2px;
}
.dep-info { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dep-line { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 500; }
.dep-seats { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.dep-seats.is-low { color: var(--c-accent-deep); font-weight: 600; }
.hot-tag {
    display: inline-block;
    padding: 1px 8px;
    background: color-mix(in oklch, var(--c-accent) 15%, transparent);
    color: var(--c-accent-deep);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* Sticky price card — DESKTOP ONLY. Scoped to min-width:961px so it can't override the
   `position: static` set in the max-width:960px block above (media queries don't add
   specificity, so this later base rule was winning on mobile and the card followed the
   scroll — the exact bug reported: the price card stayed stuck while the page moved). */
@media (min-width: 961px) {
    .detail-sidebar { position: sticky; top: 6rem; }
}
.price-card {
    background: var(--c-paper-elevated);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-2);
}
.price-card .eyebrow { margin-bottom: var(--s-2); }
.price-card-amount-row { display: flex; align-items: center; gap: var(--s-3); }
.price-card-amount-row .so-ic--feature { flex-shrink: 0; }
.price-card-amount {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    margin-bottom: var(--s-2);
}
.price-card-amount-row .price-card-amount { margin-bottom: 0; }
.price-card-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-bottom: var(--s-5); }
.stale-tag { color: var(--c-warning); font-weight: 600; }

.price-card-summary {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: var(--s-5);
}
.price-card-summary > div {
    display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm);
}
.price-card-summary span { color: var(--c-ink-muted); display: inline-flex; align-items: center; gap: .5em; }
.price-card-summary strong { color: var(--c-ink); font-weight: 600; }

.btn-block { width: 100%; justify-content: center; }
.btn-primary:disabled {
    background: var(--c-ink-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.price-card-note {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    margin-top: var(--s-4);
    line-height: 1.4;
}

/* ── In-card departure picker (TourDetail price card) ───────────────────────
   The date list sits directly above the booking CTA so pick-a-date and book
   read as one action. Capped height + scroll keeps a long departure list from
   ballooning the sticky card (and, on mobile, the lifted-to-top card). */
.pc-departures { margin: var(--s-4) 0; }
.pc-departures-label {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-2);
}
.pc-dep-list {
    display: flex; flex-direction: column; gap: var(--s-2);
    max-height: 15.5rem; overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}
.pc-dep-list::-webkit-scrollbar { width: 7px; }
.pc-dep-list::-webkit-scrollbar-thumb { background: var(--c-line-soft); border-radius: 4px; }
.pc-dep {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--s-3);
    width: 100%; text-align: left;
    padding: var(--s-2) var(--s-3);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md); cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.pc-dep:hover { border-color: var(--c-accent); }
.pc-dep.is-selected {
    border-color: var(--c-accent);
    background: var(--c-accent-tint);
    box-shadow: var(--shadow-glow);
}
.pc-dep-date {
    display: flex; flex-direction: column; align-items: center;
    min-width: 2.75rem; line-height: 1;
}
.pc-dep-day { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--c-accent-deep); }
.pc-dep-mon { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); margin-top: 1px; }
.pc-dep-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-dep-line { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 500; }
.pc-dep-seats { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.pc-dep-seats.is-low { color: var(--c-accent-deep); font-weight: 600; }
.pc-dep-check {
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; flex: 0 0 auto;
    border: 1.5px solid var(--c-line);
    color: transparent;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pc-dep.is-selected .pc-dep-check {
    border-color: var(--c-accent); background: var(--c-accent); color: #fff;
}

/* No-departures state — a soft note above the info/WhatsApp CTAs. */
.pc-nodate {
    display: flex; align-items: flex-start; gap: var(--s-2);
    font-size: var(--fs-sm); color: var(--c-ink-soft);
    line-height: 1.45;
    padding: var(--s-3);
    background: var(--c-paper-soft);
    border-radius: var(--r-md);
    margin: var(--s-4) 0;
}

/* WhatsApp CTA — brand-green, used as a secondary shortcut in the price card. */
.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-weight: 600; text-decoration: none;
    background: #25d366; color: #06331b;
    border: 1px solid transparent;
    transition: filter var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn-whatsapp:hover { filter: brightness(0.96); transform: translateY(-1px); }
.btn-whatsapp i { font-size: 1.2em; }

.empty-state-page {
    padding: var(--s-9) 0;
    text-align: center;
}
.empty-state-page h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.empty-state-page p { color: var(--c-ink-soft); }
.detail-skeleton { padding: var(--s-7) 0; }

/* ── Configurator ───────────────────────────────────────────────────────── */
.config-shell { padding: var(--s-7) 0 var(--s-9); }
.config-header { margin-bottom: var(--s-6); }
.back-link {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
    margin-bottom: var(--s-3);
    transition: color var(--t-fast) var(--ease-out);
}
.back-link:hover { color: var(--c-accent); }
.config-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-2);
}
.config-sub { color: var(--c-ink-soft); font-size: var(--fs-sm); }

.config-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--s-7);
    align-items: start;
}
@media (max-width: 960px) {
    .config-body { grid-template-columns: minmax(0, 1fr); }
}

.item-actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1);
}
.changed-tag {
    display: inline-block;
    margin-left: var(--s-2);
    padding: 1px 8px;
    background: color-mix(in oklch, var(--c-success) 18%, transparent);
    color: oklch(35% 0.10 145);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: lowercase;
}

/* Lock state */
.price-card.is-locked {
    background: linear-gradient(180deg,
        var(--c-paper-elevated),
        color-mix(in oklch, var(--c-accent) 6%, var(--c-paper-elevated)));
    border-color: var(--c-accent);
    box-shadow: var(--shadow-3);
}
.countdown-eyebrow {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--c-accent-deep) !important;
    font-weight: 700 !important;
}
.dot-live {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-success);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-success) 50%, transparent);
    animation: pulse 1.6s ease-out infinite;
}
.lock-progress {
    width: 100%; height: 4px;
    background: var(--c-line-soft);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin: var(--s-2) 0 var(--s-5);
}
.lock-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-warm) 100%);
    transition: width 1s linear;
}

/* Delta toast */
.delta-toast {
    margin-top: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-accent-tint);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-md);
    color: var(--c-accent-deep);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-md);
    text-align: center;
    animation: slideUp var(--t-base) var(--ease-out);
}
@keyframes slideUp {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Drawer */
.drawer-backdrop {
    position: fixed; inset: 0;
    background: color-mix(in oklch, var(--c-night) 60%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 80;
    animation: fadeIn var(--t-base) var(--ease-out);
}
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: var(--c-paper);
    z-index: 90;
    display: flex; flex-direction: column;
    box-shadow: -16px 0 40px -8px color-mix(in oklch, var(--c-night) 30%, transparent);
    animation: slideInRight var(--t-base) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-5);
    border-bottom: 1px solid var(--c-line-soft);
}
.drawer-head h3 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; }
.drawer-close {
    width: 2rem; height: 2rem; border-radius: 50%;
    font-size: 1.25rem; line-height: 1;
    color: var(--c-ink-muted);
}
.drawer-close:hover { background: var(--c-paper-soft); color: var(--c-ink); }
.drawer-body { padding: var(--s-4); overflow-y: auto; flex: 1; }

.swap-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.swap-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-3);
    align-items: center;
    width: 100%;
    padding: var(--s-3);
    text-align: left;
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
.swap-option:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.swap-icon { font-size: 1.5rem; }
.swap-name { font-weight: 600; color: var(--c-ink); }
.swap-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.swap-delta {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-sm);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
}
.swap-delta.is-up { color: var(--c-accent-deep); background: color-mix(in oklch, var(--c-accent) 12%, transparent); }
.swap-delta.is-down { color: oklch(40% 0.10 145); background: color-mix(in oklch, var(--c-success) 12%, transparent); }

/* ── Concierge ──────────────────────────────────────────────────────────── */
.concierge-shell {
    padding: var(--s-6) 0 var(--s-7);
    background: linear-gradient(180deg,
        var(--c-paper) 0%,
        color-mix(in oklch, var(--c-accent-warm) 6%, var(--c-paper)) 100%);
}
.concierge-inner {
    max-width: 48rem;
    display: flex; flex-direction: column;
    gap: var(--s-4);
}
.concierge-head { text-align: center; }
.concierge-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.concierge-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: var(--s-4);
}
.concierge-lede {
    font-size: var(--fs-md);
    color: var(--c-ink-soft);
    max-width: 32rem;
    margin: 0 auto;
}
/* 3D bot avatar above the concierge headline */
.concierge-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-2);
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
/* Quick-prompt chips: keep the 3D icon optically inline with the label */
.prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.prompt-chip .so-ic { flex: none; }
/* AI recommendation card: theme icon leads the city/theme line */
.ai-card-city {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Story 11.7 — auth gate + per-user monthly quota chrome */
.concierge-gate {
    max-width: 28rem;
    margin: var(--s-6) auto 0;
    padding: var(--s-6);
    text-align: center;
    border-radius: var(--r-lg, 1rem);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.concierge-gate-icon {
    font-size: 2.5rem;
    color: var(--c-turquoise, #00A6A6);
    margin-bottom: var(--s-3);
}
.concierge-gate-title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--s-2);
}
.concierge-gate-lede {
    color: var(--c-ink-soft);
    margin: 0 0 var(--s-4);
    line-height: 1.5;
}
.concierge-gate-actions {
    display: flex; gap: var(--s-2);
    justify-content: center; flex-wrap: wrap;
}

/* Auth modal — anonim ziyaretçi composer'a tıkladığında / yazmaya çalıştığında
   gate olarak çıkar. Login/register CTA'ları için mevcut .concierge-gate-*
   tipografisini yeniden kullanır; sadece overlay + dialog konumlandırması yeni. */
.concierge-auth-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1000;
}
.concierge-auth-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-width: 28rem;
    width: calc(100% - 2rem);
    padding: var(--s-6);
    text-align: center;
    border-radius: var(--r-lg, 1rem);
    background: var(--c-paper, #fff);
    border: 1px solid var(--c-line, rgba(0,0,0,.08));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    z-index: 1001;
    color: var(--c-ink, #111);
}
.concierge-auth-modal-close {
    position: absolute; top: .5rem; right: .5rem;
    width: 2.25rem; height: 2.25rem;
    background: transparent; border: 0; cursor: pointer;
    color: var(--c-ink-soft, #555);
    font-size: 1.25rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast, .15s) var(--ease-out, ease-out);
}
.concierge-auth-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.concierge-quota {
    text-align: center;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    margin: var(--s-3) auto var(--s-2);
}
.concierge-quota-reset {
    margin-left: var(--s-1);
    opacity: .65;
}

.quick-prompts {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    justify-content: center;
}
.prompt-chip {
    padding: var(--s-2) var(--s-4);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    transition: all var(--t-fast) var(--ease-out);
}
.prompt-chip:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-deep);
    background: var(--c-accent-tint);
    transform: translateY(-1px);
}

.conversation {
    display: flex; flex-direction: column;
    gap: var(--s-4);
    min-height: 8rem;
}
/* Nothing to reserve room for yet — an empty chat shouldn't push the composer
   further down the page than the conversation it doesn't have yet. */
.conversation:empty { min-height: 0; }
.turn { display: flex; }
.turn-user { justify-content: flex-end; }
.turn-ai { justify-content: flex-start; }

.bubble {
    max-width: 85%;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-lg);
    line-height: 1.5;
    /* Chat carries user-pasted URLs — one unbroken token would otherwise
       scroll the entire page sideways. Inherits to the AI card children. */
    overflow-wrap: anywhere;
    animation: bubbleIn var(--t-base) var(--ease-out);
}
@keyframes bubbleIn {
    from { transform: translateY(8px) scale(.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.bubble-user {
    background: var(--c-accent);
    color: white;
    border-bottom-right-radius: var(--r-sm);
}
.bubble-ai {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft);
    color: var(--c-ink);
    border-bottom-left-radius: var(--r-sm);
    max-width: 100%;
    width: 100%;
}
.ai-line { color: var(--c-ink); margin-bottom: var(--s-3); }
.bubble-ai:last-child .ai-line:last-child { margin-bottom: 0; }

.is-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--s-3) var(--s-4);
    width: auto;
}
.thinking-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-accent);
    animation: bounce 1.2s infinite ease-in-out;
}
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.ai-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--s-3);
}
.ai-card {
    background: var(--c-paper);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-line-soft);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    display: flex; flex-direction: column;
}
.ai-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--c-accent);
}
.ai-card-media {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--c-paper-soft);
}
.ai-card-body { padding: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.ai-card-city {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.ai-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.25;
}
.ai-card-reason {
    font-size: var(--fs-xs);
    color: var(--c-accent-deep);
    font-style: italic;
    line-height: 1.4;
}

.composer {
    display: flex;
    gap: var(--s-2);
    align-items: flex-end;
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-2);
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    position: sticky;
    bottom: var(--s-4);
}
.composer:focus-within {
    border-color: var(--c-accent);
    box-shadow: var(--shadow-glow);
}
.composer-input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: var(--fs-base);
    padding: var(--s-3);
    resize: none;
    outline: none;
    min-height: 2.5rem;
    max-height: 12rem;
}
.composer-input::placeholder { color: var(--c-ink-muted); }
.composer-send {
    flex-shrink: 0;
    padding: var(--s-3) var(--s-5);
}

.composer-error {
    color: var(--c-danger);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ── Mode badges + tour-card meta (2026 model refinement) ───────────────── */
.mode-badge {
    position: absolute;
    top: var(--s-3); right: var(--s-3);
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mode-badge-group {
    background: color-mix(in oklch, var(--c-night) 75%, transparent);
    color: color-mix(in oklch, white 95%, transparent);
}
.mode-badge-private {
    background: color-mix(in oklch, var(--c-accent) 80%, transparent);
    color: white;
}
.mode-badge-bespoke {
    background: color-mix(in oklch, var(--c-night) 85%, transparent);
    color: color-mix(in oklch, white 92%, transparent);
}
.mode-badge-transfer {
    background: color-mix(in oklch, var(--c-corporate) 80%, transparent);
    color: white;
}

/* ── Card variants ──────────────────────────────────────────────────────── */
.tour-card--group   { border-top: 3px solid var(--c-accent); }
.tour-card--private { border-top: 3px solid var(--c-support); }
.tour-card--bespoke { border-top: 3px solid var(--c-night); }
.tour-card--bespoke .tour-card-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%,
        color-mix(in oklch, var(--c-night) 35%, transparent) 100%);
    pointer-events: none;
}
.tour-card--transfer { border-top: 3px solid var(--c-corporate); }
.tour-card--transfer .tour-card-media { aspect-ratio: 3 / 2; }

.tour-meta-row {
    display: flex; gap: var(--s-2); flex-wrap: wrap;
    margin: 2px 0 var(--s-2);
}
.tour-meta-tag {
    font-size: var(--fs-xs);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--c-paper-soft);
    color: var(--c-ink-soft);
    font-weight: 500;
}

/* ── Hero pill row (detail page) ─────────────────────────────────────── */
.hero-pill-row {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.mode-pill {
    background: color-mix(in oklch, var(--c-night) 60%, transparent) !important;
}
.tour-code-pill {
    padding: var(--s-1) var(--s-3);
    background: color-mix(in oklch, white 18%, transparent);
    border: 1px solid color-mix(in oklch, white 28%, transparent);
    color: color-mix(in oklch, white 92%, transparent);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Highlights list ───────────────────────────────────────────────────── */
.highlights-list {
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.highlights-list li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper-elevated);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line-soft);
}
.highlight-bullet {
    color: var(--c-accent);
    font-size: 1.15rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* ── Itinerary day meta tags ───────────────────────────────────────────── */
.itinerary-day header {
    display: flex; align-items: baseline; gap: var(--s-3);
    flex-wrap: wrap;
}
.day-title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-ink);
}
.day-summary {
    color: var(--c-ink-soft);
    margin-bottom: var(--s-3);
    line-height: 1.55;
}
.day-meta-row {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.day-meta-tag {
    font-size: var(--fs-xs);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--c-paper-soft);
    color: var(--c-ink-soft);
    font-weight: 500;
}
.day-meta-tag.is-included {
    background: color-mix(in oklch, var(--c-success) 14%, transparent);
    color: oklch(40% 0.10 145);
}
.day-meta-tag.is-excluded {
    color: var(--c-ink-muted);
    text-decoration: line-through;
    text-decoration-color: var(--c-ink-muted);
    text-decoration-thickness: 1px;
}

/* ── Cancellation policy note (tour detail / checkout) ─────────────────── */
.cxl-policy {
    margin-top: var(--s-3);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
    background: var(--c-paper-elevated);
}
.cxl-policy-summary {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
    list-style: none;
}
.cxl-policy-summary::-webkit-details-marker { display: none; }
.cxl-policy-summary i { color: var(--c-accent-deep); }
.cxl-policy[open] .cxl-policy-summary { border-bottom: 1px solid var(--c-line-soft); }
.cxl-policy-body { padding: var(--s-4); }
.cxl-policy-intro { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0 0 var(--s-3); }
.cxl-policy-tiers { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; gap: 0; }
.cxl-tier {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px dashed var(--c-line-soft);
    font-size: var(--fs-sm);
}
.cxl-tier:last-child { border-bottom: 0; }
.cxl-tier-when { color: var(--c-ink); }
.cxl-tier-rate {
    font-weight: 600; color: oklch(40% 0.10 145);
    background: color-mix(in oklch, var(--c-success) 12%, transparent);
    padding: 2px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.cxl-tier.is-none .cxl-tier-rate {
    color: var(--c-danger);
    background: color-mix(in oklch, var(--c-danger) 10%, transparent);
}
.cxl-policy-foot { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0; line-height: 1.5; }

/* ── Itinerary — tabbed day view (public tour detail) ──────────────────── */
.itinerary-tabs { display: flex; flex-direction: column; gap: var(--s-4); }
/* ── Itinerary accordion (day-by-day) ───────────────────────────────────────
   Vertical <details> accordion: the scannable day header (title + stay + meals +
   driving) stays visible; the prose + timeline sit in the collapsible body. First
   day open by default; ui-helpers wires expand/collapse-all. Replaces the old
   horizontal day-tab strip + per-day interactive map, which hid days on mobile and
   trapped page scroll (see research: NN/g, Baymard, OSU). */
.itin-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
    margin-bottom: var(--s-4);
}
.itin-note {
    display: flex; align-items: flex-start; gap: var(--s-2);
    font-size: var(--fs-sm); color: var(--c-ink-muted);
    line-height: 1.5; max-width: 62ch; margin: 0;
}
.itin-note i { color: var(--c-accent); margin-top: 0.1em; flex: 0 0 auto; }
.itin-allctl { display: inline-flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.itin-allctl-btn {
    background: none; border: 0; cursor: pointer;
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-deep);
    padding: 2px 4px; border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease-out);
}
.itin-allctl-btn:hover { color: var(--c-accent); text-decoration: underline; }
.itin-allctl-sep { color: var(--c-line); }

.itinerary-accordion { display: flex; flex-direction: column; gap: var(--s-3); }
.itin-day {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.itin-day[open] { border-color: var(--c-line); box-shadow: var(--shadow-1); }
.itin-day-head {
    display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    cursor: pointer; list-style: none; user-select: none;
}
/* Hide the native disclosure triangle — we render our own chevron. */
.itin-day-head::-webkit-details-marker { display: none; }
.itin-day-head::marker { content: ""; }
.itin-day-head:hover { background: var(--c-paper-soft); }
.itin-day-head:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.itin-day-num {
    font-family: var(--font-display); font-style: italic;
    font-weight: 600; font-size: var(--fs-sm);
    color: var(--c-accent-deep); white-space: nowrap; flex: 0 0 auto;
}
.itin-day-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.itin-day-title {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--fs-md); color: var(--c-ink); line-height: 1.25;
}
.itin-day-tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.itin-day-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: var(--fs-xs); color: var(--c-ink-muted); min-width: 0;
}
.itin-day-tag i { color: var(--c-ink-muted); }
.itin-day-chevron {
    flex: 0 0 auto; color: var(--c-ink-muted); font-size: 1.1rem;
    display: grid; place-items: center;
    transition: transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.itin-day[open] .itin-day-chevron { transform: rotate(180deg); color: var(--c-accent); }
.itin-day-body {
    padding: var(--s-4) var(--s-5) var(--s-5);
    border-top: 1px solid var(--c-line-soft);
    animation: itinDayIn var(--t-base) var(--ease-out);
}
@keyframes itinDayIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.itin-day-summary { color: var(--c-ink-soft); line-height: 1.65; margin: 0 0 var(--s-4); max-width: 68ch; }

/* Day timeline — vertical connector with a node per activity. */
.itin-timeline {
    list-style: none; padding: 0; margin: 0 0 var(--s-4);
    border-left: 2px solid var(--c-line);
}
.itin-timeline:last-child { margin-bottom: 0; }
.itin-tl-item { position: relative; padding: 0 0 var(--s-4) var(--s-5); }
.itin-tl-item:last-child { padding-bottom: 0; }
.itin-tl-dot {
    position: absolute; left: -7px; top: 0.3rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-paper-elevated);
}
.itin-tl-head { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.itin-tl-time { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.itin-tl-dur { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.itin-tl-note { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0.2rem 0 0; }
.itin-tl-photo { font-size: var(--fs-xs); color: var(--c-ink-muted); margin: 0.15rem 0 0; display: flex; align-items: center; gap: 0.3rem; }
.itin-tl-warn { font-size: var(--fs-xs); color: #b45309; margin: 0.15rem 0 0; display: flex; align-items: center; gap: 0.3rem; }

/* "Route / güzergah" fact line at the foot of a day. */
.itin-day-route { display: flex; align-items: flex-start; gap: var(--s-2); }
.itin-day-route > div { display: flex; flex-direction: column; }
.itin-fact-icon { font-size: 1.15rem; line-height: 1.3; }
.itin-fact-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); }
.itin-fact-value { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 500; }

@media (max-width: 720px) {
    .itin-day-head { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
    .itin-day-body { padding: var(--s-4); }
    .itin-day-num { align-self: flex-start; margin-top: 2px; }
}

/* ── Inclusions / Exclusions grid ──────────────────────────────────────── */
.inclusions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}
@media (max-width: 720px) {
    .inclusions-grid { grid-template-columns: 1fr; }
}
.inc-head {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--c-line-soft);
}
.inc-head.inc-yes { color: oklch(40% 0.10 145); border-bottom-color: var(--c-success); }
.inc-head.inc-no { color: var(--c-danger); border-bottom-color: var(--c-danger); }
.inc-list {
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: var(--s-2);
}
.inc-list li {
    display: flex; align-items: flex-start; gap: var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.inc-icon {
    flex-shrink: 0;
    width: 1.25rem; height: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-success);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 2px;
}
.inc-icon.excluded {
    background: var(--c-danger);
}

/* ── Departure points list ────────────────────────────────────────────── */
.dep-points-list {
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.dep-point {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
}
.dep-point-time {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--c-accent-deep);
    min-width: 4rem;
    flex-shrink: 0;
}
.dep-point-city { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.dep-point-addr { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-top: 2px; }


/* ──────────────────────────────────────────────────────────────────────────
   Sore Turizm — "Operator" Admin Design System
   2026 dashboard pattern: dark navigation rail + light dense content,
   electric-cyan accent, monospace numbers, sparkline-friendly KPIs.
   Scoped via [data-admin] so it can't bleed into the visitor surface.
   ────────────────────────────────────────────────────────────────────────── */

[data-admin] {
    /* Hex tokens — NO oklch(), NO color-mix() chains, NO @media dark-mode flips.
       Admin shell is ALWAYS light, regardless of OS preference or visitor cascade. */

    /* Surfaces */
    --ops-bg:           #f7f8fa;
    --ops-surface:      #ffffff;
    --ops-surface-2:    #f1f3f6;
    --ops-surface-3:    #e6e9ef;

    /* Sidebar (deep slate) */
    --ops-rail:         #0f1419;
    --ops-rail-2:       #181d24;
    --ops-rail-text:    #c8cfd9;
    --ops-rail-muted:   #6b7280;

    /* Lines */
    --ops-line:         #e3e6eb;
    --ops-line-strong:  #c8cdd5;

    /* Text */
    --ops-text:         #111827;
    --ops-text-soft:    #4b5563;
    --ops-text-muted:   #6b7280;

    /* Accents — modern indigo-blue (primary), violet (AI/premium) */
    --ops-accent:       #2563eb;
    --ops-accent-strong: #1d4ed8;
    --ops-accent-soft:  rgba(37, 99, 235, 0.10);
    --ops-accent-text:  #1d4ed8;
    --ops-violet:       #7c3aed;
    --ops-violet-soft:  rgba(124, 58, 237, 0.12);
    --ops-violet-text:  #6d28d9;

    /* Status */
    --ops-success:      #16a34a;
    --ops-success-soft: rgba(22, 163, 74, 0.12);
    --ops-success-text: #15803d;
    --ops-warn:         #d97706;
    --ops-warn-soft:    rgba(217, 119, 6, 0.14);
    --ops-warn-text:    #b45309;
    --ops-danger:       #dc2626;
    --ops-danger-soft:  rgba(220, 38, 38, 0.10);
    --ops-danger-text:  #b91c1c;

    --ops-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Force light surface regardless of body / dark-mode cascade. !important is
       intentional here — these are scope-root rules and must beat the visitor
       body styling in case the user's OS prefers dark. */
    background-color: var(--ops-bg) !important;
    color: var(--ops-text) !important;
    min-height: 100vh;
    color-scheme: light;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

/* Visitor base CSS sets h1/h2 to Fraunces serif and lets them inherit body color.
   Inside the admin scope we want Inter-style headings with explicit dark text so
   nothing relies on the cascade leaking the right color through. */
[data-admin] h1, [data-admin] h2, [data-admin] h3, [data-admin] h4, [data-admin] h5, [data-admin] h6 {
    font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
    color: var(--ops-text);
    font-weight: 600;
    letter-spacing: -0.02em;
}
[data-admin] p, [data-admin] span, [data-admin] div, [data-admin] td, [data-admin] th, [data-admin] li, [data-admin] label {
    color: inherit;
}
[data-admin] strong { color: var(--ops-text); font-weight: 600; }
[data-admin] a:not([class]) { color: var(--ops-accent-text); }

/* ── Shell layout ───────────────────────────────────────────────────────── */
.ops-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--ops-bg); }
@media (max-width: 900px) { .ops-shell { grid-template-columns: 1fr; } .ops-rail { display: none; } }

/* ── Rail (sidebar) ─────────────────────────────────────────────────────── */
.ops-rail { background: var(--ops-rail); color: var(--ops-rail-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.ops-rail-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ops-logo { width: 28px; height: 28px; background: linear-gradient(135deg, var(--ops-accent), var(--ops-violet)); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; flex-shrink: 0; letter-spacing: -0.04em; }
.ops-brand { color: white; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.ops-brand-sub { color: var(--ops-rail-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-top: 2px; }

.ops-rail-search { margin: 12px 12px 6px; position: relative; }
.ops-rail-search input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ops-rail-text); font: inherit; font-size: 13px; padding: 8px 12px 8px 32px; border-radius: 6px; transition: all 120ms ease-out; }
.ops-rail-search input::placeholder { color: var(--ops-rail-muted); }
.ops-rail-search input:focus { outline: none; background: rgba(255, 255, 255, 0.09); border-color: rgba(37, 99, 235, 0.55); }
.ops-rail-search::before { content: "⌕"; position: absolute; left: 10px; top: 6px; color: var(--ops-rail-muted); font-size: 14px; }
.ops-kbd { position: absolute; right: 8px; top: 7px; font-family: var(--ops-mono); font-size: 10px; padding: 1px 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px; color: var(--ops-rail-muted); }

.ops-rail-section { padding: 14px 16px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ops-rail-muted); font-weight: 700; }
.ops-rail-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; flex: 1; }
.ops-rail-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ops-rail-text); border-radius: 6px; font-size: 13px; font-weight: 500; transition: all 120ms ease-out; text-decoration: none; position: relative; }
.ops-rail-nav a:hover { background: rgba(255, 255, 255, 0.06); color: white; }
.ops-rail-nav a.is-active { background: rgba(37, 99, 235, 0.20); color: white; }
.ops-rail-nav a.is-active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; background: var(--ops-accent); border-radius: 0 2px 2px 0; }
.ops-rail-nav .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; display: inline-flex; align-items: center; justify-content: center; }
.ops-rail-nav .badge { margin-left: auto; font-family: var(--ops-mono); font-size: 10px; padding: 1px 6px; background: rgba(37, 99, 235, 0.30); color: white; border-radius: 999px; font-weight: 600; }

.ops-rail-foot { padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 10px; }
.ops-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--ops-violet), var(--ops-accent)); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ops-user-name { color: white; font-size: 13px; font-weight: 500; line-height: 1.1; }
.ops-user-role { color: var(--ops-rail-muted); font-size: 11px; margin-top: 2px; }

/* ── Main column ────────────────────────────────────────────────────────── */
.ops-main { display: flex; flex-direction: column; min-width: 0; }
.ops-topbar { height: 56px; background: #ffffff; border-bottom: 1px solid var(--ops-line); display: flex; align-items: center; padding: 0 24px; gap: 16px; position: sticky; top: 0; z-index: 20; flex-shrink: 0; }
.ops-bread { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ops-text-soft); flex: 1; min-width: 0; }
.ops-bread a { color: var(--ops-text-soft); text-decoration: none; }
.ops-bread a:hover { color: var(--ops-text); }
.ops-bread .sep { color: var(--ops-text-muted); }
.ops-bread .current { color: var(--ops-text); font-weight: 500; }
.ops-topbar-actions { display: flex; align-items: center; gap: 8px; }
.ops-icon-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ops-text-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 120ms ease-out; }
.ops-icon-btn:hover { background: var(--ops-surface-2); color: var(--ops-text); }
.ops-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ops-success); box-shadow: 0 0 0 0 transparent; animation: ops-pulse 2s ease-out infinite; }
@keyframes ops-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.40); } 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

.ops-content { padding: 24px; flex: 1; }

/* ── Page header ────────────────────────────────────────────────────────── */
.ops-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.ops-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ops-text); margin-bottom: 4px; font-family: inherit; }
.ops-page-sub { font-size: 13px; color: var(--ops-text-soft); }
.ops-actions { display: flex; gap: 8px; align-items: center; }

/* ── Buttons (admin scope) ──────────────────────────────────────────────── */
[data-admin] .btn-primary { background: var(--ops-text); color: white; padding: 8px 14px; font-size: 13px; font-weight: 500; border-radius: 6px; border: 1px solid var(--ops-text); box-shadow: none; transition: all 120ms ease-out; display: inline-flex; align-items: center; gap: 6px; }
[data-admin] .btn-primary:hover { background: #000; border-color: #000; transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
[data-admin] .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
[data-admin] .btn-secondary { background: var(--ops-surface); border: 1px solid var(--ops-line-strong); color: var(--ops-text); padding: 8px 14px; font-size: 13px; border-radius: 6px; }
[data-admin] .btn-secondary:hover { border-color: var(--ops-accent); color: var(--ops-accent-text); }
[data-admin] .btn-ghost { background: transparent; color: var(--ops-text-soft); padding: 8px 12px; font-size: 13px; border-radius: 6px; }
[data-admin] .btn-ghost:hover { background: var(--ops-surface-2); color: var(--ops-text); }
[data-admin] .btn-tertiary { color: var(--ops-accent-text); font-size: 12px; font-weight: 600; }
[data-admin] .btn-tertiary:hover { color: var(--ops-accent-strong); }
[data-admin] .btn-block { width: 100%; justify-content: center; }

/* ── KPI hero strip ─────────────────────────────────────────────────────── */
.ops-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 12px; margin-bottom: 24px; }
.ops-kpi { background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 10px; padding: 16px 18px; position: relative; overflow: hidden; transition: border-color 150ms ease-out; }
.ops-kpi:hover { border-color: var(--ops-line-strong); }
.ops-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ops-text-muted); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ops-kpi-icon { font-size: 12px; }
.ops-kpi-value { font-family: var(--ops-mono); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--ops-text); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.ops-kpi-sub { font-size: 11.5px; color: var(--ops-text-soft); display: flex; align-items: center; gap: 6px; }
.ops-trend-up { color: var(--ops-success); font-weight: 600; }
.ops-trend-down { color: var(--ops-danger); font-weight: 600; }
.ops-trend-flat { color: var(--ops-text-muted); }
.ops-spark { position: absolute; right: 12px; top: 12px; width: 64px; height: 28px; opacity: 0.85; }
.ops-spark path { fill: none; stroke: var(--ops-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ops-spark.is-violet path { stroke: var(--ops-violet); }
.ops-spark.is-success path { stroke: var(--ops-success); }
.ops-spark.is-warn path { stroke: var(--ops-warn); }

/* ── Two-column dashboard body ──────────────────────────────────────────── */
.ops-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .ops-grid-2 { grid-template-columns: 1fr; } }
.ops-stack { display: flex; flex-direction: column; gap: 16px; }

.ops-card { background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 10px; overflow: hidden; }
.ops-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ops-line); gap: 12px; }
.ops-card-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ops-text); display: flex; align-items: center; gap: 8px; }
.ops-card-sub { font-size: 11.5px; color: var(--ops-text-muted); margin-top: 2px; }
.ops-card-body { padding: 14px 18px; }
.ops-card-body.is-flush { padding: 0; }

/* ── Activity feed ──────────────────────────────────────────────────────── */
.ops-feed { display: flex; flex-direction: column; }
.ops-feed-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ops-line); align-items: center; font-size: 13px; transition: background 120ms ease-out; }
.ops-feed-item:last-child { border-bottom: 0; }
.ops-feed-item:hover { background: var(--ops-surface-2); }
.ops-feed-dot { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ops-feed-dot.is-success { background: var(--ops-success-soft); color: var(--ops-success); }
.ops-feed-dot.is-info    { background: var(--ops-accent-soft); color: var(--ops-accent-text); }
.ops-feed-dot.is-violet  { background: var(--ops-violet-soft); color: var(--ops-violet); }
.ops-feed-dot.is-warn    { background: var(--ops-warn-soft); color: var(--ops-warn-text); }
.ops-feed-dot.is-danger  { background: var(--ops-danger-soft); color: var(--ops-danger); }
.ops-feed-text { color: var(--ops-text); line-height: 1.4; min-width: 0; }
.ops-feed-text strong { font-weight: 600; }
.ops-feed-text code { font-family: var(--ops-mono); font-size: 12px; background: var(--ops-surface-2); padding: 1px 5px; border-radius: 3px; color: var(--ops-accent-text); }
.ops-feed-time { font-size: 11.5px; color: var(--ops-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Health strip ──────────────────────────────────────────────────────── */
.ops-health-list { display: flex; flex-direction: column; gap: 1px; background: var(--ops-line); }
.ops-health-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: var(--ops-surface); font-size: 13px; }
.ops-health-name { color: var(--ops-text); }
.ops-health-value { font-family: var(--ops-mono); font-size: 12px; color: var(--ops-text-soft); display: flex; align-items: center; gap: 8px; }
.ops-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ops-success); }
.ops-status-dot.is-warn { background: var(--ops-warn); }
.ops-status-dot.is-danger { background: var(--ops-danger); }

/* ── Top tours list ─────────────────────────────────────────────────────── */
.ops-top-list { display: flex; flex-direction: column; }
.ops-top-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ops-line); align-items: center; text-decoration: none; color: var(--ops-text); transition: background 120ms ease-out; }
.ops-top-row:last-child { border-bottom: 0; }
.ops-top-row:hover { background: var(--ops-surface-2); }
.ops-top-rank { font-family: var(--ops-mono); font-size: 11px; color: var(--ops-text-muted); text-align: center; }
.ops-top-name { font-size: 13px; font-weight: 500; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-top-meta { font-size: 11px; color: var(--ops-text-muted); margin-top: 2px; }
.ops-top-stat { font-family: var(--ops-mono); font-size: 12px; color: var(--ops-text-soft); font-variant-numeric: tabular-nums; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ops-table { width: 100%; background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ops-table thead { background: var(--ops-surface-2); }
.ops-table th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ops-text-muted); font-weight: 600; border-bottom: 1px solid var(--ops-line); white-space: nowrap; }
.ops-table td { padding: 12px 14px; border-bottom: 1px solid var(--ops-line); color: var(--ops-text); vertical-align: middle; }
.ops-table tbody tr:last-child td { border-bottom: 0; }
.ops-table tbody tr:hover td { background: var(--ops-surface-2); }
.ops-table code { font-family: var(--ops-mono); font-size: 11.5px; background: var(--ops-surface-2); padding: 2px 6px; border-radius: 4px; color: var(--ops-accent-text); }
.ops-table-num { font-family: var(--ops-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ── Pills (admin scope) ────────────────────────────────────────────────── */
.ops-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; }
.ops-pill-group   { background: rgba(15, 20, 25, 0.06); color: var(--ops-text); border-color: var(--ops-line-strong); }
.ops-pill-private { background: var(--ops-violet-soft); color: var(--ops-violet-text); }
.ops-pill-success { background: var(--ops-success-soft); color: var(--ops-success-text); }
.ops-pill-warn    { background: var(--ops-warn-soft); color: var(--ops-warn-text); }
.ops-pill-muted   { background: var(--ops-surface-2); color: var(--ops-text-muted); }
.ops-pill-info    { background: var(--ops-accent-soft); color: var(--ops-accent-text); }
.ops-pill-danger  { background: var(--ops-danger-soft); color: var(--ops-danger); }
.ops-pill-violet  { background: var(--ops-violet-soft); color: var(--ops-violet-text); }

/* ── Tabs (admin scope) ─────────────────────────────────────────────────── */
.ops-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ops-line); margin-bottom: 20px; overflow-x: auto; }
.ops-tabs .tab { padding: 10px 14px; background: transparent; border: 0; color: var(--ops-text-soft); font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 120ms ease-out; white-space: nowrap; }
.ops-tabs .tab:hover { color: var(--ops-text); }
.ops-tabs .tab.is-active { color: var(--ops-accent-text); border-bottom-color: var(--ops-accent); }

/* ── Forms (admin scope) ────────────────────────────────────────────────── */
[data-admin] .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 56rem; }
@media (max-width: 720px) { [data-admin] .form-grid { grid-template-columns: 1fr; } }
[data-admin] .form-row { display: flex; flex-direction: column; gap: 6px; }
[data-admin] .form-span-2 { grid-column: span 2; }
@media (max-width: 720px) { [data-admin] .form-span-2 { grid-column: 1; } }
[data-admin] .form-row label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ops-text-muted); font-weight: 600; }
[data-admin] .form-row input, [data-admin] .form-row textarea, [data-admin] .form-row select { background: var(--ops-surface); border: 1px solid var(--ops-line-strong); border-radius: 6px; padding: 8px 10px; color: var(--ops-text); font-family: inherit; font-size: 13.5px; transition: all 120ms ease-out; }
[data-admin] .form-row input:focus, [data-admin] .form-row textarea:focus, [data-admin] .form-row select:focus { outline: none; border-color: var(--ops-accent); box-shadow: 0 0 0 3px var(--ops-accent-soft); }
[data-admin] .form-hint { font-size: 11.5px; color: var(--ops-text-muted); margin-top: 4px; }
[data-admin] .form-foot { margin-top: 20px; display: flex; gap: 8px; }
[data-admin] .checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; }
[data-admin] .checkbox-row label { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; color: var(--ops-text); font-weight: normal; font-size: 13px; }
[data-admin] .text-danger { color: var(--ops-danger); }
[data-admin] .text-danger:hover { color: #991b1b; }

/* ── Flash (admin scope) ────────────────────────────────────────────────── */
[data-admin] .flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; border: 1px solid transparent; }
[data-admin] .flash-success { background: var(--ops-success-soft); color: var(--ops-success-text); border-color: var(--ops-success); }
[data-admin] .flash-error   { background: var(--ops-danger-soft); color: var(--ops-danger-text); border-color: var(--ops-danger); }
[data-admin] .flash-info    { background: var(--ops-accent-soft); color: var(--ops-accent-text); border-color: rgba(37, 99, 235, 0.55); }

/* ── Itinerary / Inclusions / Highlights / Departure points (admin reuse) ─ */
[data-admin] .admin-itinerary { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
[data-admin] .admin-itinerary-day { background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 8px; padding: 14px; }
[data-admin] .admin-itinerary-day header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 0; border: 0; }
[data-admin] .day-num { font-family: var(--ops-mono); font-size: 11px; font-style: normal; color: var(--ops-accent-text); background: var(--ops-accent-soft); padding: 2px 8px; border-radius: 4px; font-weight: 600; }
[data-admin] .day-title { font-size: 14px; font-weight: 600; color: var(--ops-text); font-family: inherit; font-style: normal; }
[data-admin] .day-summary { color: var(--ops-text-soft); font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
[data-admin] .day-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
[data-admin] .day-meta-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ops-surface-2); color: var(--ops-text-soft); font-weight: 500; }
[data-admin] .day-meta-tag.is-included { background: var(--ops-success-soft); color: var(--ops-success-text); }
[data-admin] .day-meta-tag.is-excluded { color: var(--ops-text-muted); text-decoration: line-through; }
[data-admin] .inclusions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 720px) { [data-admin] .inclusions-grid { grid-template-columns: 1fr; } }
[data-admin] .inc-head { font-family: inherit; font-size: 13px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ops-line); }
[data-admin] .inc-head.inc-yes { color: var(--ops-success-text); border-bottom-color: var(--ops-success); }
[data-admin] .inc-head.inc-no { color: var(--ops-text-muted); border-bottom-color: var(--ops-line-strong); }
[data-admin] .inc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
[data-admin] .inc-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
[data-admin] .inc-icon { width: 18px; height: 18px; background: var(--ops-success); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 0; }
[data-admin] .inc-icon.excluded { background: #9ca3af; }
[data-admin] .highlights-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
[data-admin] .highlights-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 6px; font-size: 13px; }
[data-admin] .highlight-bullet { color: var(--ops-violet); font-size: 14px; }
[data-admin] .dep-points-list { display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; margin-bottom: 16px; grid-template-columns: none; }
[data-admin] .dep-point { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ops-surface); border: 1px solid var(--ops-line); border-radius: 6px; }
[data-admin] .dep-point-time { font-family: var(--ops-mono); font-size: 12px; font-weight: 600; color: var(--ops-accent-text); min-width: 4rem; flex-shrink: 0; font-style: normal; }
[data-admin] .dep-point-city { font-size: 13px; font-weight: 600; color: var(--ops-text); }
[data-admin] .dep-point-addr { font-size: 12px; color: var(--ops-text-muted); margin-top: 2px; }

[data-admin] hr { border: 0; border-top: 1px solid var(--ops-line); margin: 24px 0; }
[data-admin] .empty-state { background: var(--ops-surface-2); color: var(--ops-text-muted); padding: 24px; text-align: center; border-radius: 8px; font-size: 13px; }
[data-admin] code { font-family: var(--ops-mono); }

/* Auth shell override for admin */
[data-admin] .auth-shell { background: linear-gradient(160deg, #eef2f7 0%, #dee5ee 100%) !important; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
[data-admin] .auth-card { background: #ffffff !important; border: 1px solid var(--ops-line); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.18); border-radius: 14px; padding: 36px; width: min(28rem, 100%); }
[data-admin] .auth-title { font-family: inherit; font-weight: 600; color: var(--ops-text); }
[data-admin] .auth-lede { color: var(--ops-text-soft); }
[data-admin] .auth-field input { background: var(--ops-surface); border-color: var(--ops-line-strong); color: var(--ops-text); }
[data-admin] .auth-field input:focus { border-color: var(--ops-accent); box-shadow: 0 0 0 3px var(--ops-accent-soft); }
[data-admin] .auth-error { color: var(--ops-danger); }

/* ── Checkout (visitor) ─────────────────────────────────────────────────── */
.checkout-shell { padding: var(--s-7) 0 var(--s-9); background: var(--c-paper-soft); min-height: calc(100dvh - 4.25rem); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-7); align-items: start; }
/* minmax(0, …) is load-bearing: a bare 1fr keeps min-width:auto, so a wide
   child (e.g. the transfer fleet table) cannot shrink and scrolls the page. */
@media (max-width: 960px) { .checkout-grid { grid-template-columns: minmax(0, 1fr); } }
.checkout-main { background: var(--c-paper-elevated); border-radius: var(--r-xl); padding: var(--s-7); border: 1px solid var(--c-line); }
/* 48px/side leaves only 230px of content on a 360px screen. */
@media (max-width: 640px) { .checkout-main { padding: var(--s-5); } }
.checkout-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; margin: var(--s-3) 0 var(--s-3); }
.checkout-lede { color: var(--c-ink-soft); margin-bottom: var(--s-6); }
.checkout-section-title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; margin: var(--s-6) 0 var(--s-4); }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-3); }
@media (max-width: 720px) { .checkout-fields { grid-template-columns: minmax(0, 1fr); } }
.ck-field { display: flex; flex-direction: column; gap: var(--s-2); }
.ck-field label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-muted); font-weight: 600; }
.ck-field input, .ck-field select, .ck-field textarea {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: var(--s-3);
    font-family: inherit; font-size: var(--fs-base); color: var(--c-ink);
    width: 100%;
}
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--shadow-glow); }
/* B-UI — textarea was not in the selector above, so the refund-reason / other ck-field
   textareas rendered with no explicit color and could lose contrast. Pin both here. */
.ck-field input::placeholder, .ck-field select::placeholder, .ck-field textarea::placeholder { color: var(--c-ink-muted); }
.ck-consent {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4); margin: var(--s-5) 0;
    background: var(--c-paper-soft);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ck-consent a { color: var(--c-accent-deep); text-decoration: underline; }

.checkout-summary { position: sticky; top: 6rem; }
.summary-card {
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--shadow-2);
}
.summary-tour { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; margin: var(--s-2) 0 var(--s-1); }
.summary-meta { font-size: var(--fs-xs); color: var(--c-ink-muted); margin-bottom: var(--s-4); }
.summary-meta code { font-family: ui-monospace, monospace; }
.summary-rows { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: var(--s-4); }
.summary-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--c-ink-soft); gap: var(--s-3); }
.summary-row strong { color: var(--c-ink); font-weight: 500; }
.summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--s-4);
}
.summary-total span { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.summary-total strong { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; color: var(--c-ink); }
.countdown-note {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--c-accent-deep);
    line-height: 1.4;
}

/* Group join — pax counter */
.join-card { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-5); }
.join-row { padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line-soft); }
.join-row:last-of-type { border-bottom: 0; }
.pax-counter {
    display: inline-flex; align-items: center; gap: 0;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: var(--s-1);
    margin-top: var(--s-2);
}
.pax-counter button {
    /* 44px — a mis-tap here changes the pax count and therefore the price. */
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: transparent;
    color: var(--c-ink);
    font-size: 1.25rem;
    transition: background var(--t-fast) var(--ease-out);
}
.pax-counter button:hover:not(:disabled) { background: var(--c-paper-soft); }
.pax-counter button:disabled { opacity: 0.3; cursor: not-allowed; }
.pax-value { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; min-width: 2.5rem; text-align: center; }

/* Booking party form — consistent field labels + styled child-age rows (replaces the
   bare native select / unstyled number input the reservation form used to show). */
.join-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--c-ink-muted); margin-bottom: 0.65rem; }
.join-sub { margin-top: 0.6rem; }
.child-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.55rem; }
.child-row-label { font-size: 0.85rem; font-weight: 500; color: var(--c-ink-soft); min-width: 4.75rem; }
.child-age {
    width: 5rem; flex: 0 0 auto; text-align: center;
    padding: 0.6rem 0.5rem; border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-paper); color: var(--c-ink); font-size: 0.95rem; font-family: inherit;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.child-age:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--shadow-glow); }
.child-row-unit { font-size: 0.82rem; color: var(--c-ink-muted); }
.child-remove {
    margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--c-line); background: transparent; color: var(--c-ink-muted);
    display: grid; place-items: center; cursor: pointer; font-size: 0.95rem;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.child-remove:hover { border-color: #d9534f; color: #d9534f; background: color-mix(in oklch, #d9534f 9%, transparent); }
.child-add {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem;
    border: 1px dashed var(--c-line); border-radius: var(--r-pill); background: transparent;
    color: var(--c-accent-deep); font-weight: 600; font-size: 0.9rem; cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.child-add:hover:not(:disabled) { border-color: var(--c-accent); background: color-mix(in oklch, var(--c-accent) 8%, transparent); }
.child-add:disabled { opacity: 0.4; cursor: not-allowed; }

/* Standardized "Travelers" party selector — Adult / Child / Infant age-band steppers
   (Viator/GetYourGuide pattern) replacing the bolted-on per-child add-rows. Each band is
   one clean row: label + age-range on the left, a stepper on the right; child ages resolve
   the price tier via compact dropdowns that appear only when children are chosen. */
.travelers { display: flex; flex-direction: column; margin-top: var(--s-2); }
.pax-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.pax-band:last-child { border-bottom: 0; }
.pax-band-info { display: flex; flex-direction: column; gap: 0.15rem; }
.pax-band-label { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.pax-band-sub { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.pax-band .pax-counter { margin-top: 0; flex: 0 0 auto; }
.child-ages { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-1) 0 var(--s-3); }
.child-age-cell { display: flex; flex-direction: column; gap: 0.3rem; }
.child-age-cell label { font-size: var(--fs-xs); color: var(--c-ink-soft); font-weight: 500; }
.child-age-select {
    padding: 0.55rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--r-md);
    /* 16px — iOS must not zoom mid-booking. */
    background: var(--c-paper); color: var(--c-ink); font-size: 1rem; font-family: inherit;
    min-width: 6.75rem; min-height: 2.75rem; cursor: pointer;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.child-age-select:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--shadow-glow); }

/* Configurator sidebar party selector — compact reuse of the .pax-band steppers */
.cfg-party { margin: var(--s-4) 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line-soft); }
.cfg-party .join-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--c-ink-muted); margin-bottom: var(--s-2); }
.cfg-party .pax-band { padding: var(--s-2) 0; }
.cfg-party .pax-band-label { font-size: var(--fs-sm); }
.cfg-party .child-age-select { min-width: 5rem; padding: 0.4rem 0.55rem; }
.cfg-party .join-sub { margin-top: var(--s-2); }

/* Checkout result */
.result-shell { min-height: calc(100dvh - 4.25rem); display: flex; align-items: center; justify-content: center; padding: var(--s-7); background: var(--c-paper-soft); }
.result-card {
    max-width: 32rem; width: 100%;
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-xl);
    padding: var(--s-7);
    text-align: center;
    box-shadow: var(--shadow-3);
}
.result-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4rem; height: 4rem;
    border-radius: 50%;
    font-size: 2rem;
    margin-bottom: var(--s-4);
    color: white;
}
.result-icon-success { background: var(--c-success); }
.result-icon-pending { background: var(--c-warning); color: var(--c-night); }
.result-icon-fail { background: var(--c-danger); }
.result-card h1 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500; margin-bottom: var(--s-3); }
.result-lede { color: var(--c-ink-soft); margin-bottom: var(--s-5); }
.result-meta { display: flex; justify-content: center; gap: var(--s-7); padding: var(--s-4) 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: var(--s-5); }
.result-meta > div { display: flex; flex-direction: column; gap: 4px; }
.result-meta span { font-size: var(--fs-xs); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.result-meta strong { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; }
/* At 360px the --fs-2xl heading ("Rezervasyonunuz" is one unbreakable 15-char
   word, 292px min-content) could not shrink inside 96px of flex padding and
   scrolled the page. Both the padding and the type-scale cuts are needed. */
@media (max-width: 480px) {
    .result-shell { padding: var(--s-5) var(--s-4); }
    .result-card { padding: var(--s-5); }
    .result-card h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
    .result-meta { gap: var(--s-5); flex-wrap: wrap; }
}
.result-meta code { font-family: ui-monospace, monospace; font-size: var(--fs-sm); }
.result-actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* ── Language switcher (visitor header only — admin stays TR-only) ──────── */
.lang-switch {
    display: inline-flex;
    align-items: center;
    background: var(--c-paper-soft);
    /* Match the currency toggle's shell so the two read as one segmented cluster. */
    border: 1px solid var(--c-line);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    margin-right: 0.5rem;
}
.lang-pill {
    border: 0;
    background: transparent;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lang-pill:hover { color: var(--c-ink); }
.lang-pill.is-active {
    background: white;
    color: var(--c-ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* ── Contact page (modern channel cards + form) ─────────────────────────── */
.contact-hero {
    background: var(--grad-hero-standard);
    color: white;
    padding: 4rem 0 3rem;
    margin-bottom: 3rem;
}
.contact-hero .eyebrow { color: color-mix(in oklch, white 80%, transparent); }
.contact-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 500;
    margin: 0.5rem 0 1rem;
    color: white;
    letter-spacing: -0.02em;
}
.contact-hero-lede {
    font-size: var(--fs-md);
    color: color-mix(in oklch, white 88%, transparent);
    max-width: 56ch;
    line-height: 1.6;
}

.contact-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
}
.contact-channel {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 1rem;
    text-decoration: none;
    color: var(--c-ink);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.contact-channel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.06);
    border-color: var(--c-accent);
}
.contact-channel-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--c-accent) 15%, white);
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.contact-channel--whatsapp .contact-channel-icon {
    background: color-mix(in oklch, #25d366 15%, white);
    color: #25d366;
}
.contact-channel h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.contact-channel-lede {
    margin: 0 0 0.5rem;
    color: var(--c-ink-soft);
    font-size: 0.85rem;
    line-height: 1.4;
}
.contact-channel-value {
    color: var(--c-ink);
    font-size: 0.95rem;
    word-break: break-word;
}

.contact-grid-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
    align-items: start;
}
@media (max-width: 880px) {
    .contact-grid-section { grid-template-columns: 1fr; }
}

.contact-h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 0.75rem;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.contact-info-col h2:not(:first-of-type) { margin-top: 2rem; }

.contact-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-ink-soft);
    font-size: 0.95rem;
    margin: 0;
}
.contact-hours i { color: var(--c-accent); font-size: 1.2rem; }

.contact-social {
    display: flex;
    gap: 0.75rem;
}
.contact-social a {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--c-paper-soft);
    color: var(--c-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.contact-social a:hover {
    background: var(--c-accent);
    color: white;
    transform: translateY(-2px);
}

.contact-map {
    margin-top: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--c-line-soft);
}
.contact-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    display: block;
}

.contact-form-card {
    background: white;
    border: 1px solid var(--c-line-soft);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.04);
}
.contact-form-lede {
    color: var(--c-ink-soft);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 540px) {
    .contact-form-row { grid-template-columns: 1fr; }
}
.contact-form-card .account-field { margin-bottom: 1rem; }
.contact-form-card textarea {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--c-line-soft);
    border-radius: 0.5rem;
    /* 16px — see .account-field. */
    font-size: 1rem;
    font-family: inherit;
    background: white;
    color: var(--c-ink);
    width: 100%;
    resize: vertical;
}
.contact-form-card textarea::placeholder { color: var(--c-ink-muted); }
.contact-form-card textarea:focus {
    outline: 2px solid color-mix(in oklch, var(--c-accent) 50%, transparent);
    border-color: var(--c-accent);
}
.contact-form-submit {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.contact-form-sent {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #ecfdf5;
    color: #065f46;
    padding: 1.5rem;
    border-radius: 0.75rem;
}
.contact-form-sent i { font-size: 1.75rem; flex-shrink: 0; }
.contact-form-sent strong { display: block; margin-bottom: 0.25rem; font-size: 1rem; }
.contact-form-sent p { margin: 0; font-size: 0.9rem; line-height: 1.5; }

/* ── Home: trust strip ────────────────────────────────────────────────── */
.trust-strip {
    background: var(--c-paper-soft, #f8f9fa);
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 1rem 0;
}
.trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 2rem;
    align-items: center;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--c-ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
}
.trust-item i { color: var(--c-accent); font-size: 1.25rem; }

/* ── Home: why-us cards ───────────────────────────────────────────────── */
.why-us { padding: var(--s-7) 0; background: white; }
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.why-card {
    padding: 1.5rem;
    background: var(--c-paper-soft, #f8f9fa);
    border: 1px solid var(--c-line-soft);
    border-radius: 1rem;
}
.why-card i { color: var(--c-accent); font-size: 1.75rem; display: block; margin-bottom: 0.75rem; }
.why-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--c-ink); }
.why-card p { margin: 0; color: var(--c-ink-soft); font-size: 0.9rem; line-height: 1.55; }

/* ── Home: stats strip ────────────────────────────────────────────────── */
.stats-strip {
    background: linear-gradient(135deg, var(--c-corporate, #1f3a5f) 0%, var(--c-support, #2d5d7a) 100%);
    color: white;
    padding: 2.5rem 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.stat-num {
    font-family: var(--font-display, inherit);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1;
    color: white;
}
.stat-num small { font-size: 0.6em; opacity: 0.85; margin-left: 0.05em; vertical-align: super; }
.stat-label {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in oklch, white 85%, transparent);
}

/* ── Home: final CTA ──────────────────────────────────────────────────── */
.final-cta { padding: var(--s-7) 0 var(--s-9); background: white; }
.final-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: var(--c-paper-soft, #f8f9fa);
    border: 1px solid var(--c-line-soft);
    border-radius: 1.25rem;
}
.final-cta-inner h2 {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin: 0 0 0.25rem;
    color: var(--c-ink);
    font-weight: 500;
}
.final-cta-inner p { margin: 0; color: var(--c-ink-soft); font-size: 0.95rem; }
.final-cta-inner .btn-primary { white-space: nowrap; }
.final-cta-inner .btn-primary i { margin-right: 0.4rem; }

/* ── Quiz IMMERSIVE (Three.js shader bg + glass card multi-step) ─────── */
.quiz-immersive {
    position: relative;
    min-height: calc(100dvh - 4.25rem);
    background: #000;
    overflow: hidden;
    isolation: isolate;
}
.quiz-shader-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Three.js canvas inserted here */
}
.quiz-shader-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.quiz-overlay-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.quiz-stage {
    position: relative;
    z-index: 5;
    min-height: calc(100dvh - 4.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
}

/* Glass-morphism card */
.glass {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    /* Promote — backdrop-filter on a moving subject is one of the most expensive
       repaints; layer-isolation prevents repaint cascading into siblings. */
    transform: translateZ(0);
}

.quiz-card {
    width: 100%;
    max-width: 720px;
    border-radius: 1.5rem;
    padding: 2.5rem 2rem 2rem;
    color: white;
    animation: quiz-card-in 0.7s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes quiz-card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.quiz-card-head { text-align: center; margin-bottom: 1.5rem; }
.quiz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 0.75rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.quiz-pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: quiz-pulse 1.6s ease-out infinite;
}
@keyframes quiz-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.quiz-headline {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: white;
    line-height: 1.1;
}
.quiz-lede {
    margin: 0 auto;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 50ch;
}

/* Progress dots */
.quiz-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1.75rem;
}
.quiz-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}
.quiz-dot.is-active {
    width: 1.75rem;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    box-shadow: 0 0 12px rgba(96,165,250,0.5);
}
.quiz-dot.is-done { background: rgba(52, 211, 153, 0.7); }
.quiz-step-label {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
}

/* Step + question */
.quiz-step-wrapper {
    animation: quiz-step-in 0.4s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes quiz-step-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: none; }
}
.quiz-step { border: 0; padding: 0; margin: 0; }
.quiz-question {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.15rem;
    font-weight: 500;
    color: white;
    margin-bottom: 1.25rem;
    padding: 0;
}
.quiz-question i {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.4rem;
    background: linear-gradient(135deg, rgba(96,165,250,0.25), rgba(192,132,252,0.25));
    color: #c4b5fd;
    flex-shrink: 0;
}

/* Tile options */
.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
}
.quiz-tile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: white;
    text-align: left;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.2s;
    font-family: inherit;
}
.quiz-tile i {
    font-size: 1.35rem;
    color: rgba(255,255,255,0.65);
    transition: color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.quiz-tile:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.quiz-tile:hover i { color: #c4b5fd; transform: scale(1.08) rotate(-3deg); }
.quiz-tile.is-selected {
    background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(192,132,252,0.22));
    border-color: rgba(192,132,252,0.55);
    box-shadow: 0 0 0 3px rgba(192,132,252,0.15), 0 8px 24px rgba(96,165,250,0.18);
    animation: quiz-tile-pop 0.4s ease;
}
.quiz-tile.is-selected i { color: white; }
@keyframes quiz-tile-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Nav buttons */
.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.quiz-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: white;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.2s;
    font-family: inherit;
}
.quiz-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}
.quiz-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.quiz-next, .quiz-submit-btn {
    background: linear-gradient(135deg, #6366f1 0%, #c084fc 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.quiz-next:hover:not(:disabled),
.quiz-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(192,132,252,0.45);
}

/* Results card */
.quiz-results-card {
    width: 100%;
    max-width: 1180px;
    border-radius: 1.5rem;
    padding: 2.25rem 2rem;
    color: white;
    animation: quiz-card-in 0.7s cubic-bezier(.2,.9,.25,1) both;
}
.quiz-results-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.quiz-results-title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0.25rem 0 0;
    color: white;
}
.quiz-empty-state {
    color: rgba(255,255,255,0.7);
    text-align: center;
    padding: 2rem;
    font-size: 0.95rem;
}
.quiz-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.quiz-result-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    animation: quiz-result-in 0.6s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes quiz-result-in {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: none; }
}
.quiz-result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(192,132,252,0.5);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.quiz-result-media-link { display: block; }
.quiz-result-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: #1f2937;
    background-size: cover;
    background-position: center;
}
.quiz-result-score {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #6366f1, #c084fc);
    color: white;
    border-radius: 0.75rem;
    box-shadow: 0 6px 20px rgba(99,102,241,0.45);
    line-height: 1;
}
.quiz-result-score-num { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.quiz-result-score-label { font-size: 0.6rem; opacity: 0.85; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.15rem; }
.quiz-result-theme {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    padding: 0.3rem 0.65rem;
    background: rgba(0,0,0,0.55);
    color: white;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}
.quiz-result-body { padding: 1rem 1.1rem 1.2rem; }
.quiz-result-city {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
}
.quiz-result-city i { color: #c4b5fd; }
.quiz-result-title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.quiz-result-title a { color: white; text-decoration: none; }
.quiz-result-title a:hover { color: #c4b5fd; }
.quiz-result-reasons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.quiz-reason-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    background: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
}
.quiz-reason-pill i { font-size: 0.85rem; }
.quiz-result-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}
.quiz-result-price-label {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.15rem;
}
.quiz-result-price-amount { color: white; font-size: 1.1rem; font-weight: 600; }
.quiz-result-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255,255,255,0.1);
    color: white;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.quiz-result-cta:hover { background: rgba(255,255,255,0.2); transform: translateX(2px); }

@media (max-width: 540px) {
    .quiz-card { padding: 1.75rem 1.25rem; border-radius: 1.25rem; }
    .quiz-headline { font-size: 1.6rem; }
    .quiz-question { font-size: 1rem; }
    .quiz-options { grid-template-columns: 1fr; }
    .quiz-results-card { padding: 1.5rem 1rem; }
}

/* ── Özel Tur Wizard (immersive 6-step Bespoke Builder) ──────────────── */
.ozel-immersive {
    position: relative;
    min-height: calc(100dvh - 4.25rem);
    background: #0b1220;
    overflow: hidden;
    isolation: isolate;
}
.ozel-bg { position: absolute; inset: 0; z-index: 0; }
.ozel-blob {
    position: absolute;
    border-radius: 999px;
    /* 50vw blurred elements — keep blur radius low; the float animations were
       removed: animating three of these forever forced GPU repaints over half
       the viewport every frame, killing scroll FPS for negligible visual gain. */
    filter: blur(48px);
    opacity: 0.5;
    transform: translateZ(0);
}
.ozel-blob-1 {
    width: 45vw; height: 45vw;
    top: -10vw; left: -10vw;
    background: radial-gradient(circle, var(--c-sea) 0%, transparent 70%);
}
.ozel-blob-2 {
    width: 50vw; height: 50vw;
    bottom: -15vw; right: -15vw;
    background: radial-gradient(circle, var(--c-cta) 0%, transparent 70%);
}
.ozel-blob-3 {
    width: 32vw; height: 32vw;
    top: 30%; left: 40%;
    background: radial-gradient(circle, var(--c-turquoise) 0%, transparent 70%);
}
.ozel-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
}
.ozel-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.ozel-stage {
    position: relative;
    z-index: 5;
    min-height: calc(100dvh - 4.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
}
.ozel-loading { color: rgba(255,255,255,0.7); text-align: center; }
.ozel-loading i { font-size: 2.25rem; display: block; margin-bottom: 0.75rem; color: #c084fc; }
.ozel-spin { animation: ozel-spin 1.2s linear infinite; }
@keyframes ozel-spin { to { transform: rotate(360deg); } }

.ozel-card {
    width: 100%;
    max-width: 1080px;
    border-radius: 1.5rem;
    padding: 2.25rem 2rem 2rem;
    color: white;
    animation: quiz-card-in 0.7s cubic-bezier(.2,.9,.25,1) both;
}
/* Dark-card default for inline <strong> (incl. MarkupString-embedded copy like
   SummaryFmt / Success.LedeFmt). Without this the global `strong{color:--c-ink}`
   reset paints dark-navy text on the dark card. Specific overrides below
   (e.g. .ozel-summary-card strong) still win by equal-specificity source order. */
.ozel-card strong { color: #fff; }
.ozel-card-head { text-align: center; margin-bottom: 1.25rem; }
.ozel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 0.75rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.ozel-pulse {
    width: 0.5rem; height: 0.5rem; border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: quiz-pulse 1.6s ease-out infinite;
}
.ozel-headline {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: white;
    line-height: 1.1;
}
.ozel-lede { margin: 0 auto; color: rgba(255,255,255,0.7); font-size: 0.95rem; line-height: 1.55; max-width: 60ch; }

.ozel-progress {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1.75rem;
}
.ozel-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 999px;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}
.ozel-dot.is-active {
    width: 1.75rem;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    box-shadow: 0 0 12px rgba(96,165,250,0.5);
}
.ozel-dot.is-done { background: rgba(52, 211, 153, 0.7); }
.ozel-step-label { margin-left: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }

.ozel-step-wrapper { animation: quiz-step-in 0.4s cubic-bezier(.2,.9,.25,1) both; }

/* Persona grid — supports optional hero background image */
.ozel-persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}
.ozel-persona-card {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 1.4rem 1.15rem 1.15rem;
    background: rgba(255,255,255,0.05);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
    font-family: inherit;
    isolation: isolate;
    min-height: 200px;
}
.ozel-persona-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.25);
}
.ozel-persona-card.is-selected {
    border-color: rgba(192,132,252,0.65);
    box-shadow: 0 0 0 3px rgba(192,132,252,0.2), 0 14px 32px rgba(96,165,250,0.25);
}
.ozel-persona-card.has-hero { background-color: #0b1220; }
.ozel-persona-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(11,18,32,0.45) 0%,
        rgba(11,18,32,0.78) 65%,
        rgba(11,18,32,0.92) 100%);
}
.ozel-persona-card.is-selected.has-hero .ozel-persona-scrim {
    background: linear-gradient(180deg,
        rgba(99,102,241,0.4) 0%,
        rgba(11,18,32,0.7) 60%,
        rgba(192,132,252,0.55) 100%);
}
.ozel-persona-card > * { position: relative; z-index: 1; }
.ozel-persona-icon {
    width: 2.85rem; height: 2.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(96,165,250,0.35), rgba(192,132,252,0.35));
    border: 1px solid rgba(255,255,255,0.18);
    color: #ddd6fe;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
    backdrop-filter: blur(6px);
    transition: transform 0.15s;
}
.ozel-persona-card:hover .ozel-persona-icon { transform: scale(1.06); }
.ozel-persona-card.is-selected .ozel-persona-icon {
    background: linear-gradient(135deg, #6366f1, #c084fc);
    border-color: transparent;
    color: white;
    box-shadow: 0 8px 24px rgba(99,102,241,0.5);
}
.ozel-persona-card h3 {
    font-size: 1.05rem;
    margin: 0 0 0.3rem;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.ozel-persona-card p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.83rem;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ozel-persona-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: #34d399;
    font-size: 1.3rem;
    z-index: 2;
    text-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* Karma rotası uyarı çipi (uçaklı transfer ipucu) */
.ozel-karma-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,70,239,0.12));
    border: 1px solid rgba(245,158,11,0.4);
    border-radius: 0.85rem;
    color: rgba(255,255,255,0.92);
    font-size: 0.85rem;
    line-height: 1.55;
}
.ozel-karma-hint i {
    color: #fcd34d;
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.ozel-karma-hint strong { color: white; font-weight: 600; }

/* Region grid — bigger card with centered icon + optional hero bg image */
.ozel-region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.ozel-region-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.1rem;
    color: white;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
    font-family: inherit;
    isolation: isolate;
}
.ozel-region-card:hover { transform: translateY(-3px); }
.ozel-region-card:hover .ozel-region-icon { transform: scale(1.08) rotate(-3deg); }
.ozel-region-card.is-selected {
    border-color: rgba(45,212,191,0.65);
    box-shadow: 0 0 0 3px rgba(45,212,191,0.2), 0 16px 40px rgba(34,211,238,0.25);
}
.ozel-region-card.has-hero { background-color: #0b1220; }
.ozel-region-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(11,18,32,0.55) 0%,
        rgba(11,18,32,0.7) 60%,
        rgba(11,18,32,0.88) 100%);
}
.ozel-region-card > * { position: relative; z-index: 1; }
.ozel-region-card.is-selected.has-hero .ozel-region-scrim {
    background: linear-gradient(180deg,
        rgba(13,148,136,0.45) 0%,
        rgba(11,18,32,0.65) 55%,
        rgba(13,148,136,0.55) 100%);
}
.ozel-region-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(34,211,238,0.25), rgba(45,212,191,0.25));
    border: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 1rem;
    transition: transform 0.2s;
    backdrop-filter: blur(6px);
}
.ozel-region-icon i { font-size: 2.25rem; color: #5eead4; }
.ozel-region-card.is-selected .ozel-region-icon {
    background: linear-gradient(135deg, #22d3ee, #2dd4bf);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(34,211,238,0.45);
}
.ozel-region-card.is-selected .ozel-region-icon i { color: white; }
.ozel-region-card h3 {
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
    color: white;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ozel-region-card p {
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 32ch;
}
.ozel-region-tick {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    color: #34d399;
    font-size: 1.4rem;
    z-index: 2;
}
.ozel-region-mixed { background: linear-gradient(135deg, rgba(192,132,252,0.1), rgba(217,70,239,0.06)); }
.ozel-region-mixed .ozel-region-icon {
    background: linear-gradient(135deg, rgba(192,132,252,0.3), rgba(217,70,239,0.3));
}
.ozel-region-mixed .ozel-region-icon i { color: #d8b4fe; }
.ozel-region-mixed.is-selected .ozel-region-icon {
    background: linear-gradient(135deg, #c084fc, #d946ef);
    box-shadow: 0 8px 24px rgba(217,70,239,0.45);
}
.ozel-region-mixed.is-selected {
    border-color: rgba(217,70,239,0.65);
    box-shadow: 0 0 0 3px rgba(217,70,239,0.2), 0 16px 40px rgba(192,132,252,0.25);
}

/* Bundle accordion */
.ozel-bundles {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    padding: 0.5rem;
}
.ozel-bundles summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ozel-bundles summary::-webkit-details-marker { display: none; }
.ozel-bundles summary i { color: #c4b5fd; font-size: 1.2rem; }
.ozel-bundles summary::after { content: "▾"; margin-left: auto; color: rgba(255,255,255,0.4); transition: transform 0.2s; }
.ozel-bundles[open] summary::after { transform: rotate(180deg); }
.ozel-bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem;
    padding: 0.5rem 0.75rem 0.85rem;
}
.ozel-bundle-card {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 1.05rem 1rem 0.95rem;
    background: rgba(255,255,255,0.05);
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.9rem;
    color: white;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s;
    font-family: inherit;
    isolation: isolate;
    min-height: 165px;
}
.ozel-bundle-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.25); }
.ozel-bundle-card.is-selected {
    border-color: rgba(245,158,11,0.7);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.25), 0 10px 24px rgba(245,158,11,0.2);
}
.ozel-bundle-card.has-hero { background-color: #0b1220; }
.ozel-bundle-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(11,18,32,0.5) 0%,
        rgba(11,18,32,0.82) 70%,
        rgba(11,18,32,0.94) 100%);
}
.ozel-bundle-card.is-selected.has-hero .ozel-bundle-scrim {
    background: linear-gradient(180deg,
        rgba(217,119,6,0.4) 0%,
        rgba(11,18,32,0.78) 65%,
        rgba(245,158,11,0.55) 100%);
}
.ozel-bundle-card > * { position: relative; z-index: 1; }
.ozel-bundle-days {
    display: inline-block;
    padding: 0.22rem 0.65rem;
    background: rgba(245,158,11,0.85);
    color: #1f2937;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.ozel-bundle-card h4 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ozel-bundle-card p {
    margin: 0 0 0.4rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ozel-bundle-card small {
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Activity tabs */
.ozel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ozel-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.ozel-tab i { color: rgba(255,255,255,0.55); }
.ozel-tab:hover { background: rgba(255,255,255,0.08); color: white; }
.ozel-tab.is-active {
    background: linear-gradient(135deg, #6366f1, #c084fc);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
}
.ozel-tab.is-active i { color: white; }
.ozel-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Activity chip grid */
.ozel-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.55rem;
}
.ozel-activity-chip {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.85rem;
    color: white;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.ozel-activity-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.ozel-activity-chip > i {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.ozel-activity-chip:hover > i { color: #c4b5fd; transform: scale(1.08); }
.ozel-activity-chip.is-selected {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(192,132,252,0.2));
    border-color: rgba(192,132,252,0.5);
    box-shadow: 0 0 0 2px rgba(192,132,252,0.18);
}
.ozel-activity-chip.is-selected > i { color: white; }
.ozel-activity-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.ozel-activity-body strong { font-size: 0.9rem; font-weight: 600; color: #fff; }
.ozel-activity-local {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
}
.ozel-activity-local i { color: #34d399; font-size: 0.85rem; }
.ozel-activity-tick { color: #34d399; font-size: 1.2rem; }

.ozel-empty-tab { color: rgba(255,255,255,0.5); text-align: center; padding: 1rem; }
.ozel-summary-line {
    margin: 1rem 0 0;
    padding: 0.75rem 0.95rem;
    background: rgba(255,255,255,0.04);
    border-radius: 0.7rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ozel-summary-line i { color: #34d399; }

/* Live "real destinations that match your picks" preview (concept bridge) */
.ozel-match { margin: 1.1rem 0 0; }
.ozel-match-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9rem; font-weight: 600;
    color: rgba(255,255,255,0.92); margin-bottom: 0.75rem;
}
.ozel-match-head i { color: #34d399; }
.ozel-match-load { color: rgba(255,255,255,0.5); }
.ozel-match-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    text-align: center;
    color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; padding: 0.9rem 0.2rem;
}
.ozel-match-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem;
}
.ozel-match-card {
    display: flex; flex-direction: column; border-radius: 0.7rem; overflow: hidden;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none; color: rgba(255,255,255,0.9);
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.ozel-match-card:hover { transform: translateY(-3px); border-color: rgba(52,211,153,0.5); }
.ozel-match-media {
    display: block; height: 84px; background-size: cover; background-position: center;
    background-color: rgba(255,255,255,0.08);
}
.ozel-match-name { padding: 0.5rem 0.6rem 0.1rem; font-weight: 600; font-size: 0.82rem; line-height: 1.2; }
.ozel-match-city { padding: 0 0.6rem 0.55rem; font-size: 0.74rem; color: rgba(255,255,255,0.6); }

/* Section header inside steps */
.ozel-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 0.85rem;
}
.ozel-section-title i { color: #c4b5fd; }

/* Generic option button */
.ozel-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}
.ozel-options-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ozel-option {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    color: white;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: left;
}
.ozel-option:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
.ozel-option > i { font-size: 1.25rem; color: rgba(255,255,255,0.6); }
.ozel-option.is-selected {
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(192,132,252,0.22));
    border-color: rgba(192,132,252,0.55);
}
.ozel-option.is-selected > i { color: #c4b5fd; }
.ozel-option-rich { align-items: flex-start; }
.ozel-option-rich div { display: flex; flex-direction: column; }
.ozel-option-rich strong { color: white; font-weight: 600; line-height: 1.2; }
.ozel-option-rich small { color: rgba(255,255,255,0.7); font-size: 0.72rem; margin-top: 0.15rem; }
.ozel-option-rich.is-selected strong { color: white; }
.ozel-option-rich.is-selected small { color: rgba(255,255,255,0.85); }

/* Form grid (Step 4 + 5) */
.ozel-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.ozel-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ozel-field-wide { grid-column: 1 / -1; }
.ozel-field label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.ozel-field label i { color: #c4b5fd; }
.ozel-field-value {
    margin-left: auto;
    background: rgba(255,255,255,0.1);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: white;
}
.ozel-field input[type="text"],
.ozel-field input[type="email"],
.ozel-field input[type="tel"],
.ozel-field input[type="number"],
.ozel-field input[type="date"],
.ozel-field textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    color: white;
    /* 16px — iOS zooms the viewport on focus below that. */
    font-size: 1rem;
    font-family: inherit;
}
.ozel-field input::placeholder, .ozel-field textarea::placeholder { color: rgba(255,255,255,0.35); }
.ozel-field input:focus, .ozel-field textarea:focus {
    outline: 2px solid rgba(192,132,252,0.5);
    border-color: rgba(192,132,252,0.55);
}
/* height — the UA default leaves a 16px hit box, too small to drag on touch. */
.ozel-field input[type="range"] { accent-color: #c084fc; height: 44px; }
.ozel-field small { color: rgba(255,255,255,0.5); font-size: 0.75rem; }
.ozel-range-ticks {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    padding: 0 0.15rem;
}

.ozel-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    line-height: 1.45;
}
.ozel-consent input { margin-top: 0.2rem; accent-color: #c084fc; }
.ozel-consent a { color: #c4b5fd; text-decoration: underline; }

/* Summary card on contact step */
.ozel-summary-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}
.ozel-summary-card h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
}
.ozel-summary-card h4 i { color: #c4b5fd; }
.ozel-summary-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
}
.ozel-summary-card li {
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
}
.ozel-summary-card strong { color: rgba(255,255,255,0.6); font-weight: 500; }

/* Nav buttons */
.ozel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.ozel-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: white;
    transition: all 0.15s;
    font-family: inherit;
    text-decoration: none;
}
.ozel-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}
.ozel-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ozel-skip { color: rgba(255,255,255,0.6); }
.ozel-next, .ozel-submit {
    background: linear-gradient(135deg, #6366f1 0%, #c084fc 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}
.ozel-next:hover:not(:disabled),
.ozel-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(192,132,252,0.45);
}

/* Success */
.ozel-success { text-align: center; max-width: 560px; padding: 2.5rem 2rem; }
.ozel-success-icon { font-size: 4rem; color: #34d399; display: block; margin: 0 auto 1rem; }
.ozel-success h1 { color: white; font-family: var(--font-display, inherit); font-size: 2rem; margin: 0 0 0.85rem; }
.ozel-success-lede { color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0 0 1.5rem; }
.ozel-success-lede code {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: rgba(192,132,252,0.2);
    color: #ddd6fe;
    border-radius: 0.4rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.92rem;
}
.ozel-success-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 720px) {
    .ozel-card { padding: 1.5rem 1rem; }
    .ozel-headline { font-size: 1.5rem; }
    .ozel-persona-grid,
    .ozel-region-grid,
    .ozel-activity-grid,
    .ozel-options { grid-template-columns: 1fr; }
}

/* ── Sticky-scroll gallery (birebir port of the React/Tailwind component) ─ */
.sticky-gallery-shell { background: #020617; color: white; }
.sticky-gallery-wrapper { position: relative; }
.sticky-gallery-hero {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #020617;
    display: grid;
    place-content: center;
    overflow: hidden;
}
.sticky-gallery-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(79,79,79,0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79,79,79,0.18) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
            mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}
.sticky-gallery-hero-title {
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.2;
    text-align: center;
    padding: 0 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: white;
    margin: 0;
}

.sticky-gallery-grid-wrap { background: #020617; padding: 0; }
.sticky-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
}
.sticky-gallery-col {
    grid-column: span 4;
    display: grid;
    gap: 0.5rem;
}
.sticky-gallery-col--sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.sticky-gallery-col figure { margin: 0; width: 100%; height: 100%; }
.sticky-gallery-col img {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: transform 0.4s ease;
    /* No persistent filter: was saturate(0.95) on every image, which forced 13
       separate compositor layers and visible scroll jank. Native saturation
       looks fine and the images get to live on the page paint layer. */
}
.sticky-gallery-col img:hover { transform: scale(1.02); }
.sticky-gallery-col--sticky img { height: 100%; }

.sticky-gallery-footer { background: #020617; overflow: hidden; }
.sticky-gallery-footer-text {
    font-size: 16vw;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(90deg, #9ca3af, #1f2937);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    transform: translateY(5rem);
}
.sticky-gallery-footer-cap {
    position: relative;
    z-index: 10;
    height: 10rem;
    background: #000;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
}

@media (max-width: 720px) {
    .sticky-gallery-grid { grid-template-columns: 1fr; }
    .sticky-gallery-col,
    .sticky-gallery-col--sticky { grid-column: span 1; }
    .sticky-gallery-col--sticky { position: relative; height: auto; }
    .sticky-gallery-col img { height: 16rem; }
}

/* ── AI tools dual-card section (Quiz + Concierge) ────────────────────── */
.ai-tools-section {
    padding: var(--s-7) 0;
    background: linear-gradient(180deg, white 0%, var(--c-paper-soft, #f8f9fa) 100%);
}
.ai-tools-section .section-head { text-align: center; margin-bottom: 2rem; }
.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.ai-tool-card {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.75rem;
    border-radius: 1.5rem;
    background: #0f172a;
    color: white;
    text-decoration: none;
    isolation: isolate;
    transition: transform 0.2s, box-shadow 0.25s;
    border: 1px solid rgba(255,255,255,0.08);
}
.ai-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(99,102,241,0.35);
}
.ai-tool-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    z-index: 0;
}
.ai-tool-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 30% 20%, rgba(14, 90, 138, 0.45), transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(0, 166, 166, 0.32), transparent 55%);
    z-index: 0;
    transform: translateZ(0);
    /* Was animating rotate+scale on a huge inset:-50% gradient × 3 cards forever.
       That kept the GPU continuously composing during scroll. Animate only on
       hover instead — same delight, no idle cost. */
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.ai-tool-card:hover .ai-tool-glow {
    transform: translateZ(0) rotate(15deg) scale(1.1);
}
.ai-tool-card--concierge .ai-tool-glow {
    background: radial-gradient(circle at 30% 30%, rgba(34,211,238,0.4), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(52,211,153,0.3), transparent 60%);
}
.ai-tool-card--bespoke .ai-tool-glow {
    background: radial-gradient(circle at 30% 30%, rgba(245,158,11,0.4), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(217,70,239,0.32), transparent 60%);
}
.ai-tools-grid--three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 1100px) {
    .ai-tools-grid--three { grid-template-columns: repeat(3, 1fr); }
}
.ai-tool-card > * { position: relative; z-index: 1; }
.ai-tool-icon {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, #6366f1, #c084fc);
    color: white;
    font-size: 1.65rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(99,102,241,0.5);
}
.ai-tool-card--concierge .ai-tool-icon {
    background: linear-gradient(135deg, #06b6d4, #10b981);
    box-shadow: 0 8px 24px rgba(6,182,212,0.5);
}
.ai-tool-card--bespoke .ai-tool-icon {
    background: linear-gradient(135deg, #f59e0b, #d946ef);
    box-shadow: 0 8px 24px rgba(245,158,11,0.5);
}
.ai-tool-card--bespoke .ai-tool-pulse { border-color: rgba(245,158,11,0.6); }
.ai-tool-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 1rem;
    border: 2px solid rgba(192,132,252,0.6);
    animation: ai-tool-pulse 2s ease-out infinite;
}
.ai-tool-card--concierge .ai-tool-pulse { border-color: rgba(34,211,238,0.6); }
@keyframes ai-tool-pulse {
    0%   { opacity: 1; transform: scale(0.95); }
    100% { opacity: 0; transform: scale(1.25); }
}
.ai-tool-eyebrow {
    margin: 0 0 0.4rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}
.ai-tool-title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    margin: 0 0 0.55rem;
    color: white;
    font-weight: 600;
    line-height: 1.2;
}
.ai-tool-lede {
    margin: 0 0 1.25rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ai-tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, transform 0.1s;
}
.ai-tool-card:hover .ai-tool-cta {
    background: rgba(255,255,255,0.22);
    transform: translateX(3px);
}

/* Hero Quiz CTA emphasis */
.btn-quiz-hero {
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(192,132,252,0.25));
    border: 1px solid rgba(192,132,252,0.4);
    position: relative;
}
.btn-quiz-hero i { margin-right: 0.4rem; color: #c4b5fd; }
.btn-quiz-hero .ai-pulse { background: #c084fc; }

/* Hero Bespoke CTA emphasis */
.btn-bespoke-hero {
    background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(217,70,239,0.22));
    border: 1px solid rgba(245,158,11,0.45);
    position: relative;
}
.btn-bespoke-hero i { margin-right: 0.4rem; color: #fcd34d; }
.btn-bespoke-hero .ai-pulse { background: #f59e0b; }

/* ── Scroll-reveal — IntersectionObserver toggles .is-visible ───────────── */
/* IMPORTANT: hide-by-default ONLY when JS is available (html.js-reveal-ready
   set by an inline script in App.razor's head). If the inline script never
   ran (CSP, network glitch, navigation race), elements stay fully visible —
   no more "everything disappears after lang switch" perception bug. */
html.js-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 600ms var(--ease-out),
        transform 600ms var(--ease-out);
    /* Sprint 14 ORTA — `--reveal-delay` is overridable per-element via inline
       `style="--reveal-delay: 80ms"` for staggered hero reveal sequences (see
       Home.razor:32, TourListing card grids). Defaults to 0 so a card without an
       explicit stagger reveals immediately. The variable is intentionally not
       declared at :root so it inherits only where the inline style sets it. */
    transition-delay: var(--reveal-delay, 0ms);
}
/* Promote ONLY while the reveal is in flight — once visible we drop will-change
   so dozens of compositor layers don't sit forever consuming memory and adding
   paint cost to scroll. */
html.js-reveal-ready [data-reveal]:not(.is-visible) {
    will-change: opacity, transform;
}
html.js-reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
html.js-reveal-ready [data-reveal="fade"] { transform: none; }
html.js-reveal-ready [data-reveal="left"] { transform: translate3d(-24px, 0, 0); }
html.js-reveal-ready [data-reveal="right"] { transform: translate3d(24px, 0, 0); }
html.js-reveal-ready [data-reveal="zoom"] { transform: scale(0.96); transform-origin: center; }
html.js-reveal-ready [data-reveal="zoom"].is-visible { transform: none; }

/* ── Section rhythm — full-bleed ribbon dividers between Home sections ──── */
.home-section {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    /* Skip layout/paint for off-screen sections — major scroll FPS win on the
       homepage. The intrinsic-size hint reserves space so jumping into a
       section doesn't shift adjacent layout. */
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}
.home-section--soft { background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper-soft) 100%); }
.home-section--paper { background: var(--c-paper); }
.home-section--night {
    background: linear-gradient(180deg, var(--c-corporate) 0%, #0d1623 100%);
    color: white;
}
.home-section--night h2,
.home-section--night h3 { color: white; }
.home-section--night p { color: rgba(255,255,255,0.78); }
.home-section--night .eyebrow { color: rgba(255,255,255,0.6); }
.home-section .section-head {
    text-align: center;
    margin-inline: auto;
    margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
    max-width: 56rem;
}
.home-section .section-head h2 {
    font-size: clamp(1.85rem, 3.5vw, 2.65rem);
    margin-bottom: var(--s-3);
}
.home-section .section-head .section-lede {
    color: var(--c-ink-soft);
    margin-inline: auto;
    max-width: 52ch;
}
.home-section--night .section-head .section-lede { color: rgba(255,255,255,0.78); }

/* Subtle full-bleed ribbon to bridge dark/light sections without a hard cut. */
.section-ribbon {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-line), transparent);
    margin: 0;
    border: 0;
}
.section-ribbon--accent {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-turquoise) 30%, var(--c-cta) 70%, transparent);
    opacity: 0.5;
}

/* ── Trust strip — energetic credibility badges under the hero ─────────────
   Trust cues (TÜRSAB, 3D Secure, local guides, small groups) stay high on the
   page on purpose: for a travel agency they cut bounce by answering "can I trust
   you?" before the visitor scrolls. Redesigned from a flat grey bar into a lively
   badge row — gradient icon chips, bold ink labels, a soft turquoise wash. */
.trust-strip {
    background:
        radial-gradient(120% 160% at 50% -20%,
            color-mix(in oklch, var(--c-turquoise) 10%, transparent) 0%, transparent 62%),
        var(--c-paper);
    border-block: 1px solid var(--c-line-soft);
    padding-block: var(--s-5);
}
.trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3);
    /* Center each item on one clean, shared line — align-items:stretch let a
       wrapping item make the row taller and the others "float", which read as the
       bar shifting down. center + a smaller icon keep it a standard, level strip. */
    align-items: center;
    justify-items: center;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    min-width: 0;
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-lg);
    transition: transform var(--t-base) var(--ease-out),
                background var(--t-base) var(--ease-out);
}
.trust-item:hover {
    transform: translateY(-2px);
    background: color-mix(in oklch, var(--c-turquoise) 7%, transparent);
}
.trust-item i {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, var(--c-turquoise) 0%, var(--c-sea-deep) 100%);
    box-shadow: 0 4px 11px color-mix(in oklch, var(--c-turquoise) 32%, transparent);
}

/* Featured tours — generous vertical rhythm so the card grid never collides with
   the trust strip above or the gallery ribbon below (previously padding-block:0,
   which made the section start/end abruptly). */
.featured { padding-block: clamp(3.5rem, 7vw, 6rem); }
.subsection-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--c-ink);
}
.subsection-label::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--c-cta), var(--c-turquoise));
    border-radius: 999px;
}

/* Sticky-gallery framing — small caption header + smoother fade-in */
.sticky-gallery-shell {
    /* Subtle approach: fade-in dark band so the cut from bright to dark isn't jarring. */
    background: linear-gradient(180deg, #020617 0%, #020617 100%);
}
.sticky-gallery-cap {
    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
    background: #020617;
    color: white;
}
.sticky-gallery-cap .eyebrow {
    color: rgba(255,255,255,0.55);
    margin-bottom: var(--s-3);
    display: inline-block;
}
.sticky-gallery-cap h2 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    color: white;
    margin: 0 auto var(--s-3);
    max-width: 24ch;
    line-height: 1.15;
    font-weight: 500;
}
.sticky-gallery-cap p {
    color: rgba(255,255,255,0.65);
    max-width: 52ch;
    margin: 0 auto;
    font-size: var(--fs-sm);
    line-height: 1.6;
}
/* Soft top→dark transition strip, masks the abrupt color jump from page. */
.sticky-gallery-shell::before {
    content: "";
    display: block;
    height: clamp(2.5rem, 6vw, 4rem);
    background: linear-gradient(180deg, var(--c-paper) 0%, #020617 100%);
}
/* And a soft bottom strip — the pre-footer CTA picks up from here so the
   gallery → CTA → footer sequence reads as one continuous dark gradient. */
.sticky-gallery-shell::after {
    content: "";
    display: block;
    height: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, #020617 0%, #020617 100%);
}

/* ── About / Hakkımızda — full redesign (2026-05-13) ────────────────────────
   Sectioned editorial layout, all content sourced from cms.AboutPage.
   Sea + turquoise palette layered onto a paper background; restrained
   typography; large hero with overlay; story → stats → mission/vision →
   values → certifications. Public layout does NOT load Bootstrap — every
   grid below uses CSS Grid directly. */

.about-container {
    max-width: 76rem;
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    width: 100%;
}

.about-hero {
    position: relative;
    min-height: clamp(560px, 88dvh, 820px);
    background-color: var(--c-sea-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(8, 58, 95, 0.35) 0%, rgba(2, 6, 23, 0.78) 70%),
        linear-gradient(180deg, rgba(2, 6, 23, 0.35) 0%, rgba(2, 6, 23, 0.65) 100%);
    z-index: 0;
}
.about-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 64rem;
    width: 100%;
    padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
}
.about-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-turquoise-soft);
    margin-bottom: 1.25rem;
    opacity: 0.9;
}
.about-hero-title {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    margin: 0 0 1.25rem;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}
.about-hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 44rem;
    margin: 0 auto 2rem;
}
.about-hero-ctas {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-about-primary,
.btn-about-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-about-primary {
    background: var(--c-turquoise);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(0, 166, 166, 0.6);
}
.btn-about-primary:hover {
    background: color-mix(in oklch, var(--c-turquoise) 85%, white);
    transform: translateY(-1px);
    color: #fff;
}
.btn-about-primary i { transition: transform 0.18s ease; }
.btn-about-primary:hover i { transform: translateX(3px); }
.btn-about-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
}
.btn-about-ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}
.about-hero-scroll {
    position: absolute;
    bottom: clamp(1.25rem, 3vh, 2.25rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.about-hero-scroll:hover { color: #fff; transform: translateX(-50%) translateY(2px); }
.about-hero-scroll-line {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.7) 100%);
}

/* ── About — Apple-style scroll-driven layer (driven by about-scroll.js) ──── */
.about-hero { --hero-progress: 0; }
/* Dedicated background layer so it can drift + zoom independently of the content. */
.about-hero-bg {
    position: absolute;
    inset: -10% 0 0 0;
    height: 120%;
    background-color: var(--c-sea-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: translate3d(0, calc(var(--hero-progress) * 14%), 0)
               scale(calc(1.06 + var(--hero-progress) * 0.06));
    transform-origin: center;
    will-change: transform;
}
/* Content lifts and fades as the hero scrolls away — the signature Apple feel. */
.about-hero-inner {
    transform: translate3d(0, calc(var(--hero-progress) * -36px), 0);
    opacity: clamp(0, calc(1 - var(--hero-progress) * 1.25), 1);
    will-change: transform, opacity;
}
.about-hero-scroll { opacity: clamp(0, calc(1 - var(--hero-progress) * 3), 1); }

/* Generic parallax hook for any element the script tags with --parallax-y. */
[data-parallax] { transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }

/* Scrollytelling: pin the story heading while its paragraphs scroll past it. */
@media (min-width: 900px) {
    .about-story-head {
        position: sticky;
        top: clamp(5rem, 16vh, 9rem);
        align-self: start;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .about-hero-scroll i { animation: aboutScrollBounce 2s var(--ease-out, ease) infinite; }
    @keyframes aboutScrollBounce {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(4px); }
    }
}

/* Reduced motion: freeze the hero in its resting state, no drift/zoom/fade. */
@media (prefers-reduced-motion: reduce) {
    .about-hero-bg { transform: none; inset: 0; height: 100%; }
    .about-hero-inner { transform: none; opacity: 1; }
    .about-hero-scroll { opacity: 1; }
}

/* ── About — pinned, frame-by-frame scrollytelling band ────────────────────
   A tall section pins a full-viewport stage; about-scroll.js cross-fades and
   zooms the scenes as you scroll through it (Apple product-page style). */
.about-journey {
    position: relative;
    height: 340vh;
    background: #05080f;
    --seq-progress: 0;
}
.about-journey-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}
.about-journey-scenes { position: absolute; inset: 0; z-index: 0; }
.about-journey-scene {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    display: flex; align-items: flex-end;
    transform-origin: center;
    will-change: opacity, transform;
}
.about-journey-scene:first-child { opacity: 1; } /* first paint / no-JS fallback */
.about-journey-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(3, 7, 18, 0.28) 0%, rgba(3, 7, 18, 0.05) 38%, rgba(3, 7, 18, 0.9) 100%);
}
.about-journey-caption {
    position: relative; z-index: 2;
    width: 100%;
    padding-bottom: clamp(3rem, 12vh, 8rem);
    color: #fff;
}
.about-journey-idx {
    display: inline-block;
    text-transform: uppercase; letter-spacing: 0.2em;
    font-size: 0.8rem; font-weight: 700;
    color: var(--c-turquoise-soft, #6fe3e3);
    margin-bottom: 1rem;
}
.about-journey-title {
    font-family: var(--font-display, inherit);
    font-weight: 700; line-height: 1.04; letter-spacing: -0.02em;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    margin: 0 0 1rem; max-width: 18ch;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.about-journey-sub {
    font-size: clamp(1.02rem, 1.7vw, 1.3rem);
    line-height: 1.6; max-width: 40rem;
    color: rgba(255, 255, 255, 0.86);
}
.about-journey-eyebrow {
    position: absolute; z-index: 3;
    top: clamp(1.5rem, 5vh, 3rem); left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.8);
}
.about-journey-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-turquoise, #00a6a6);
    animation: aboutPulse 2.2s ease-out infinite;
}
@keyframes aboutPulse {
    0%        { box-shadow: 0 0 0 0 rgba(0, 166, 166, 0.55); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(0, 166, 166, 0); }
}
.about-journey-dots {
    position: absolute; z-index: 3;
    right: clamp(1rem, 3vw, 2.25rem); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 0.7rem;
}
.about-journey-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.3s var(--ease-out, ease), transform 0.3s var(--ease-out, ease);
}
.about-journey-dot.is-on { background: var(--c-turquoise-soft, #6fe3e3); transform: scale(1.5); }
.about-journey-progress {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    height: 3px; background: rgba(255, 255, 255, 0.12);
}
.about-journey-progress-bar {
    display: block; height: 100%; width: 100%;
    transform-origin: left;
    transform: scaleX(var(--seq-progress, 0));
    background: linear-gradient(90deg, var(--c-turquoise, #00a6a6), var(--c-turquoise-soft, #6fe3e3));
}
@media (prefers-reduced-motion: reduce) {
    .about-journey { height: auto; }
    .about-journey-stage { position: relative; height: clamp(440px, 78vh, 760px); }
    .about-journey-scene:not(:first-child) { display: none; }
    .about-journey-dots, .about-journey-progress { display: none; }
}

/* ── About — immersive scroll-zoom photo gallery ───────────────────────────
   Ported from a React/framer-motion component to scroll-driven CSS: about-scroll.js
   sets --gp (0→1) as the tall section is scrolled; CSS scales each tile out from
   centre using its authored --sm, fades the tiles away, and reveals the overlay
   heading over the final third. Up to 7 admin photos, showcase first. */
.about-gallery {
    position: relative;
    height: 260vh;
    background: var(--c-paper);
    --gp: 0;
}
.about-gallery-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Soft diagonal brand wash anchored to the left — low opacity, fades to nothing
   toward the right, so the section reads as an airy continuation of the light
   page rather than a hard black slab. */
.about-gallery-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(45deg,
        rgba(0, 166, 166, 0.16) 0%,
        rgba(0, 166, 166, 0.06) 30%,
        rgba(0, 166, 166, 0) 58%);
}
.about-gallery-scenes { position: absolute; inset: 0; z-index: 1; }
.about-gallery-scene {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    transform-origin: center center;
    transform: scale(calc(1 + var(--gp) * (var(--sm, 4) - 1)));
    opacity: clamp(0, calc(1 - var(--gp)), 1);
    will-change: transform, opacity;
}
.about-gallery-box { position: relative; overflow: hidden; }
.about-gallery-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fixed art-directed positions — mirrors the source component's 7 tiles. */
.about-gallery-pos-0 { width: 25vw; height: 25vh; }
.about-gallery-pos-1 { width: 35vw; height: 30vh; top: -30vh; left: 5vw; }
.about-gallery-pos-2 { width: 20vw; height: 55vh; top: -15vh; left: -25vw; }
.about-gallery-pos-3 { width: 25vw; height: 25vh; left: 27.5vw; }
.about-gallery-pos-4 { width: 20vw; height: 30vh; top: 30vh; left: 5vw; }
.about-gallery-pos-5 { width: 30vw; height: 25vh; top: 27.5vh; left: -22.5vw; }
.about-gallery-pos-6 { width: 15vw; height: 15vh; top: 22.5vh; left: 25vw; }

.about-gallery-overlay {
    position: relative; z-index: 2;
    width: 100%; text-align: center; color: var(--c-ink);
    pointer-events: none;
    opacity: clamp(0, calc((var(--gp) - 0.6) / 0.2), 1);
    transform: scale(calc(0.85 + clamp(0, (var(--gp) - 0.6) / 0.2, 1) * 0.15));
    will-change: opacity, transform;
}
.about-gallery-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 0.72rem; font-weight: 700; color: var(--c-turquoise);
    margin: 0 0 1rem;
}
.about-gallery-heading {
    font-family: var(--font-display, inherit);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 4.4vw, 3.4rem);
    color: var(--c-ink);
    margin: 0 auto; max-width: 22ch;
    /* Light halo lifts the text off any still-fading photos underneath. */
    text-shadow: 0 2px 24px rgba(247, 245, 240, 0.85);
}

/* Mobile + reduced-motion: drop the pinning/zoom, show a calm responsive grid. */
@media (max-width: 899.98px), (prefers-reduced-motion: reduce) {
    .about-gallery { height: auto; padding: clamp(2.5rem, 6vw, 4rem) 0; }
    .about-gallery-stage {
        position: relative; height: auto;
        display: flex; flex-direction: column;
        padding: 0 clamp(1rem, 4vw, 2rem); gap: 1.5rem;
    }
    .about-gallery-scenes {
        position: relative; inset: auto;
        display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr);
    }
    .about-gallery-scene {
        position: relative; inset: auto; display: block;
        transform: none; opacity: 1;
    }
    .about-gallery-box[class*="about-gallery-pos-"] {
        width: 100%; height: auto; top: auto; left: auto;
        aspect-ratio: 4 / 3; border-radius: 12px;
    }
    .about-gallery-overlay {
        order: -1; opacity: 1; transform: none; margin: 0;
    }
}
@media (min-width: 720px) and (max-width: 899.98px) {
    .about-gallery-scenes { grid-template-columns: repeat(3, 1fr); }
}

/* ── Shared section primitives ──────────────────────────────────────────── */
.about-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-turquoise);
    margin: 0 0 0.6rem;
}
.about-section-title {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    color: var(--c-ink);
    margin: 0 0 1.25rem;
}

/* ── Story ──────────────────────────────────────────────────────────────── */
.about-story {
    background: var(--c-paper);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.about-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
@media (min-width: 900px) {
    .about-story-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}
.about-story-body p {
    font-size: 1.06rem;
    line-height: 1.78;
    color: var(--c-ink-soft);
    margin-bottom: 1.2rem;
}
.about-story-body p:first-child::first-line {
    font-weight: 500;
    color: var(--c-ink);
}

/* ── Stats band ────────────────────────────────────────────────────────── */
.about-stats {
    background: linear-gradient(135deg, var(--c-sea-deep) 0%, var(--c-sea) 100%);
    color: #fff;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
}
@media (min-width: 720px) {
    .about-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.about-stat {
    text-align: center;
    padding: 0.75rem 0.5rem;
}
.about-stat-value {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1;
    color: var(--c-turquoise-soft);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}
.about-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Mission + Vision ──────────────────────────────────────────────────── */
.about-mv {
    background: var(--c-paper-soft);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.about-mv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 780px) {
    .about-mv-grid { grid-template-columns: 1fr 1fr; }
}
.about-mv-card {
    background: var(--c-paper-elevated);
    border-radius: 1.25rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    height: 100%;
    box-shadow: var(--shadow-2);
    border: 1px solid color-mix(in oklch, var(--c-ink) 5%, transparent);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.about-mv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}
.about-mv-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.about-mv-card--mission .about-mv-icon {
    background: color-mix(in oklch, var(--c-turquoise) 14%, white);
    color: var(--c-turquoise);
}
.about-mv-card--vision .about-mv-icon {
    background: color-mix(in oklch, var(--c-sea) 14%, white);
    color: var(--c-sea);
}
.about-mv-card h3 {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--c-ink);
    margin: 0 0 0.75rem;
}
.about-mv-card p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ── Values ────────────────────────────────────────────────────────────── */
.about-values {
    background: var(--c-paper);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.about-values-head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.about-values-head .about-eyebrow { text-align: center; }
.about-eyebrow--center { text-align: center; }
.about-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 720px) {
    .about-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .about-values-grid { grid-template-columns: repeat(3, 1fr); }
}
.about-value-card {
    background: var(--c-paper-elevated);
    border-radius: 1.1rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    height: 100%;
    border: 1px solid color-mix(in oklch, var(--c-ink) 6%, transparent);
    box-shadow: var(--shadow-1);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.about-value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: color-mix(in oklch, var(--c-turquoise) 35%, transparent);
}
.about-value-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--c-turquoise);
    background: color-mix(in oklch, var(--c-turquoise) 12%, white);
    margin-bottom: 1rem;
}
.about-value-title {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-ink);
    margin: 0 0 0.55rem;
}
.about-value-body {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin: 0;
}

/* ── Certifications strip ──────────────────────────────────────────────── */
.about-certs {
    background: var(--c-paper-soft);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid color-mix(in oklch, var(--c-ink) 6%, transparent);
}
.about-cert-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}
.about-cert {
    opacity: 0.6;
    transition: opacity 0.22s ease, transform 0.22s ease;
    filter: grayscale(35%);
}
.about-cert:hover { opacity: 1; transform: translateY(-2px); filter: none; }
.about-cert img {
    max-height: clamp(2.5rem, 4.5vw, 3.5rem);
    width: auto;
    display: block;
}
.about-cert a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ── Loading / empty states ────────────────────────────────────────────── */
.about-loading,
.about-empty {
    background: var(--c-paper);
    min-height: 60vh;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.about-empty-inner {
    text-align: center;
}
.about-empty-inner h1 {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--c-ink);
    margin-bottom: 0.6rem;
}
.about-empty-inner p { color: var(--c-ink-soft); }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Sprint 13 K23 — SoEmptyState (public empty-state component).
   Designed for quiz/ozeltur/concierge "no result" states. Admin uses its own
   .empty-state pattern (Bootstrap-flavored). Keep these two systems separate so
   admin redesign in Sprint 14 doesn't drag public visuals. */
.so-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    text-align: center;
    padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
    color: var(--c-ink-muted);
}
.so-empty-icon {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: var(--c-ink-muted);
    opacity: 0.55;
    margin-bottom: var(--s-2);
}
.so-empty-title {
    font-family: var(--ff-display, inherit);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    margin: 0;
    color: var(--c-ink);
}
.so-empty-desc {
    max-width: 48ch;
    margin: 0;
    line-height: 1.5;
}
.so-empty-cta {
    margin-top: var(--s-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUR LISTING — 2026-05 redesign (gradient hero + quick presets + sidebar)
   Desktop: sidebar+main grid. Mobile: filters collapse to bottom-sheet.
   Always-visible quick-shortcut chip strip below hero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero compact band variant ─────────────────────────────────────────── */
.listing-hero.listing-hero--compact-band {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.listing-hero--compact-band .listing-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    margin-bottom: var(--s-2);
}
.listing-hero--compact-band .listing-hero-lede {
    margin-bottom: var(--s-4);
    font-size: var(--fs-sm);
}
.listing-hero--compact-band .listing-hero-search {
    padding: 4px;
}
.listing-hero--compact-band .lhs-input input { padding-block: 0.7rem; }
.listing-hero--compact-band .lhs-submit { padding-block: 0; min-height: 2.6rem; }

/* ── Quick-shortcut chip strip (below hero — static, not sticky) ───────── */
.quick-strip-wrap {
    background: white;
    border-bottom: 1px solid var(--c-line-soft);
}
.quick-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-3) 0;
}

.qc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1rem;
    /* These are the primary filter buttons — keep them tappable. */
    min-height: 2.5rem;
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}
.qc:hover {
    border-color: color-mix(in oklch, var(--c-turquoise) 50%, var(--c-line));
    background: color-mix(in oklch, var(--c-turquoise) 6%, white);
    transform: translateY(-1px);
}
.qc.is-active {
    background: linear-gradient(135deg, var(--c-sea) 0%, var(--c-turquoise) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--c-turquoise) 55%, transparent);
}
.qc.is-active:hover { transform: translateY(-2px); }
.qc-icon {
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: var(--c-turquoise);
    transition: color var(--t-fast) var(--ease-out);
}
.qc.is-active .qc-icon { color: white; }
.qc-label { letter-spacing: 0.01em; }
.qc-divider {
    width: 1px;
    height: 1.6rem;
    background: var(--c-line);
    flex-shrink: 0;
    margin: 0 var(--s-1);
}
.qc-strip-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--c-ink-muted);
    flex-shrink: 0;
}
/* Small screens: hide the inline group labels, let chips scroll horizontally. */
@media (max-width: 720px) {
    .qc-strip-label, .quick-strip .qc-divider { display: none; }
    .quick-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .quick-strip .qc { scroll-snap-align: start; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.listing-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            var(--c-sea-deep) 0%,
            var(--c-sea) 38%,
            var(--c-turquoise) 100%);
    color: white;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
    isolation: isolate;
}
.listing-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, transparent 70%, color-mix(in oklch, var(--c-night-deep) 30%, transparent) 100%);
    pointer-events: none;
    z-index: 0;
}
.listing-hero-wash {
    position: absolute;
    inset: auto -10% -25% -10%;
    height: 60%;
    background: radial-gradient(ellipse at 50% 100%,
        color-mix(in oklch, var(--c-sand) 55%, transparent) 0%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
}
.listing-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    opacity: 0.55;
}
.listing-hero-glow--a {
    top: -20%; left: -8%;
    width: 32rem; height: 32rem;
    background: radial-gradient(circle, var(--c-turquoise-soft) 0%, transparent 65%);
}
.listing-hero-glow--b {
    bottom: -30%; right: -10%;
    width: 36rem; height: 36rem;
    background: radial-gradient(circle, var(--c-sunset-gold) 0%, transparent 65%);
    opacity: 0.4;
}
.listing-hero-inner {
    position: relative;
    z-index: 1;
}
.listing-hero-eyebrow {
    color: color-mix(in oklch, var(--c-turquoise-soft) 80%, white);
    margin-bottom: var(--s-2);
}
.listing-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 500;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: white;
    text-shadow: 0 2px 24px color-mix(in oklch, var(--c-night-deep) 35%, transparent);
}
.listing-hero-lede {
    color: color-mix(in oklch, white 88%, var(--c-turquoise-soft));
    font-size: var(--fs-md);
    margin-bottom: var(--s-5);
}

.listing-hero-search {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
    background: color-mix(in oklch, white 96%, transparent);
    border: 1px solid color-mix(in oklch, white 30%, transparent);
    padding: var(--s-2);
    border-radius: var(--r-pill);
    max-width: 56rem;
    box-shadow: 0 18px 48px -16px color-mix(in oklch, var(--c-night-deep) 40%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.lhs-input {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.lhs-input i {
    position: absolute;
    left: 1rem;
    color: var(--c-ink-muted);
    font-size: 1.1rem;
    pointer-events: none;
}
.lhs-input input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    font: inherit;
    font-size: var(--fs-base);
    color: var(--c-ink);
    border-radius: var(--r-pill);
}
.lhs-input input:focus-visible { outline: none; }
.lhs-region {
    border: 0;
    background: var(--c-paper-soft);
    padding: 0 1.1rem;
    font: inherit;
    /* 16px — iOS zooms the viewport on focus below that. */
    font-size: 1rem;
    min-height: 2.75rem;
    color: var(--c-ink);
    border-radius: var(--r-pill);
    cursor: pointer;
    min-width: 9rem;
}
.lhs-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    border: 0;
    padding: 0 1.5rem;
    background: var(--c-accent);
    color: white;
    font: inherit;
    font-weight: 600;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.lhs-submit:hover { background: var(--c-accent-deep); transform: translateY(-1px); }
.lhs-submit i { font-size: 1rem; }
/* On one row the region select (max-content ~190px) + submit (~99px) eat the
   whole 320px inner width and leave the text box a 13px sliver. Give the input
   its own row below ~560px. */
@media (max-width: 560px) {
    .listing-hero-search { flex-wrap: wrap; border-radius: var(--r-lg); }
    .lhs-input { flex: 1 1 100%; }
    .lhs-input input { border-radius: var(--r-lg); }
    .lhs-region { flex: 1 1 auto; min-width: 0; }
    .lhs-submit { flex: 0 0 auto; }
}

/* ── Active filter chip primitives (used in toolbar-chips) ─────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    background: color-mix(in oklch, var(--c-turquoise) 14%, white);
    border: 1px solid color-mix(in oklch, var(--c-turquoise) 30%, transparent);
    color: var(--c-sea-deep);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover {
    background: color-mix(in oklch, var(--c-accent) 14%, white);
    border-color: color-mix(in oklch, var(--c-accent) 35%, transparent);
    color: var(--c-accent-deep);
}
.chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: color-mix(in oklch, currentColor 18%, transparent);
    font-size: 0.7rem;
}
.chip-clear-all {
    background: transparent;
    border-color: transparent;
    color: var(--c-ink-muted);
    margin-left: auto;
}
.chip-clear-all:hover {
    background: color-mix(in oklch, var(--c-danger) 8%, white);
    border-color: color-mix(in oklch, var(--c-danger) 25%, transparent);
    color: var(--c-danger);
}

/* ── Tour card refinements ──────────────────────────────────────────────── */
.tour-card { border: 1px solid var(--c-line-soft); }
.tour-card-media--placeholder {
    background: linear-gradient(135deg, var(--c-sea-deep) 0%, var(--c-turquoise) 100%);
}
.tour-card .tour-city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tour-card .tour-city i {
    color: var(--c-turquoise);
    font-size: 0.85rem;
}
.tour-card .tour-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tour-card .tour-meta-tag i {
    color: var(--c-ink-soft);
    font-size: 0.85rem;
}
.tour-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* 44px hit height. The footer row is already ~40px tall from the adjacent
       price block, so this costs no card height. */
    min-height: 2.75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-accent-deep);
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tour-card-cta:hover {
    color: var(--c-accent);
    transform: translateX(2px);
}

/* ── Tour card depth pass — premium feel, no bland edges ─────────────────── */
/* A soft placeholder gradient sits under every media so a slow-loading (or
   fallback) photo never flashes a flat grey rectangle at the top of the card. */
.tour-card-media {
    background-color: transparent;
    background-image: linear-gradient(150deg,
        color-mix(in oklch, var(--c-sea-deep) 22%, var(--c-paper-soft)) 0%,
        var(--c-paper-soft) 70%);
}
/* Bottom scrim gives the image grounding and keeps the theme/mode badges legible. */
.tour-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%,
        color-mix(in oklch, var(--c-ink) 28%, transparent) 100%);
    pointer-events: none;
}
.tour-card {
    border-color: color-mix(in oklch, var(--c-line-soft) 80%, transparent);
}
.tour-card:hover {
    box-shadow: var(--shadow-3);
    transform: translateY(-4px);
    border-color: color-mix(in oklch, var(--c-turquoise) 30%, var(--c-line-soft));
}
/* Footer no longer ends flush against the card edge. */
.tour-card-body { padding-bottom: var(--s-5); gap: var(--s-3); }
.tour-price-row { padding-top: var(--s-4); }

/* ── Kicker chip — premium section eyebrow (group-packages, reusable) ───────
   Upgrades a flat uppercase .eyebrow into a soft turquoise pill with a lead
   icon, so a homepage subsection reads as a deliberate "collection" label
   rather than plain small caps. Inline-flex + inline-level, so it stays
   centred inside the centred .section-head. */
.eyebrow-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.42rem 0.9rem;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--c-turquoise) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--c-turquoise) 22%, transparent);
    color: var(--c-sea-deep);
}
.eyebrow-chip i { font-size: 1.05em; color: var(--c-turquoise); line-height: 1; }

/* ── Rating row on tour cards — used on listing + home group cards ──────────
   Was previously emitted with no styling on the listing card; giving it a real
   spec lands the star/score/count as one clean, legible trust cue. */
.tour-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
}
.tour-rating .ph-star { font-size: 0.95em; color: #e6a817; }
.tour-rating strong { color: var(--c-ink); font-weight: 700; }
.tour-rating-count { color: var(--c-ink-muted); font-size: var(--fs-xs); }

/* ── Numbered pagination (replaces prev/page-of-x/next) ─────────────────── */
.page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line-soft);
    flex-wrap: wrap;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-ink);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.page-btn:hover:not(:disabled):not(.is-current) {
    border-color: var(--c-turquoise);
    background: color-mix(in oklch, var(--c-turquoise) 8%, white);
    color: var(--c-sea-deep);
}
.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.page-btn.is-current {
    background: linear-gradient(135deg, var(--c-sea) 0%, var(--c-turquoise) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--c-turquoise) 60%, transparent);
}
.page-btn--nav { color: var(--c-ink-soft); }
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--c-ink-muted);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUR LISTING v3 — sidebar position:static, grouped quick-strip, toolbar chips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Quick-strip eyebrow groups (Bölge | Tema | Süre | Özel) ───────────── */
.qc-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qc-group-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--c-ink-muted);
    padding-left: 4px;
}
.qc-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* ── Sidebar header compact + active-count badge ───────────────────────── */
.filter-card-head--compact {
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-line);
    gap: var(--s-2);
}
.filter-card-head--compact h2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
    margin: 0;
    flex: 1;
    color: var(--c-ink);
}
.filter-card-head--compact h2 i {
    color: var(--c-turquoise);
    font-size: 1.1rem;
}
.filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    background: linear-gradient(135deg, var(--c-sea) 0%, var(--c-turquoise) 100%);
    color: white;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* ── Booking-mode toggle rows ──────────────────────────────────────────
   Was `flex: 1 1 30%` — three chips per row inside a ~260px sidebar gave each
   ~70px to hold "Yapılandırılabilir Özel Tur", so the text burst its chip. These
   labels are phrases, not words: stack them full-width and let them wrap. */
.mode-chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-top: var(--s-2);
}
.mode-chip {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    padding: 0.6rem 0.75rem;
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    text-align: left;
    line-height: 1.25;
}
.mode-chip-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mode-chip-tick {
    flex-shrink: 0;
    font-size: 0.95rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.mode-chip.is-active .mode-chip-tick { opacity: 1; transform: none; }
.mode-chip:hover {
    border-color: var(--c-turquoise);
    background: color-mix(in oklch, var(--c-turquoise) 6%, white);
}
.mode-chip.is-active {
    background: linear-gradient(135deg, var(--c-sea) 0%, var(--c-turquoise) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--c-turquoise) 55%, transparent);
}

/* ── Tour-type buckets (day trip / weekend / short break / grand tour) ──
   Two columns of short labels; each carries its day-range so the chip and the
   duration slider below it visibly describe the same thing. */
.type-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: var(--s-2);
}
.type-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 0.6rem 0.65rem;
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    font: inherit;
    color: var(--c-ink);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.type-chip > i {
    font-size: 1.1rem;
    color: var(--c-turquoise);
    transition: color var(--t-fast) var(--ease-out);
}
.type-chip-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.type-chip-range {
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    transition: color var(--t-fast) var(--ease-out);
}
.type-chip:hover {
    border-color: var(--c-turquoise);
    background: color-mix(in oklch, var(--c-turquoise) 6%, white);
}
.type-chip.is-active {
    background: linear-gradient(135deg, var(--c-sea) 0%, var(--c-turquoise) 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--c-turquoise) 55%, transparent);
}
.type-chip.is-active > i,
.type-chip.is-active .type-chip-range { color: color-mix(in oklch, white 82%, transparent); }

/* ── Dual-thumb range slider (Shared/RangeSlider.razor) ────────────────
   Two native range inputs sit transparent on top of a painted rail: the natives
   keep keyboard + a11y + touch targets, we keep the pixels. --rs-lo/--rs-hi are
   written by range-slider.js during drag and by the server on release. */
.filter-slider { padding-top: var(--s-3); }
.filter-slider-label {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--c-ink-muted);
    margin-bottom: var(--s-1);
}
.filter-slider-note {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    line-height: 1.4;
}
.filter-slider + .filter-slider { padding-top: var(--s-4); }

.rs { --rs-lo: 0%; --rs-hi: 100%; }
.rs-readout {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.55rem;
}
.rs-val {
    font-variant-numeric: tabular-nums;      /* stops the label jittering mid-drag */
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--c-paper-soft);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rs.is-active .rs-val {
    background: color-mix(in oklch, var(--c-turquoise) 14%, white);
    color: var(--c-sea-deep);
}
.rs-dash { color: var(--c-ink-muted); font-size: var(--fs-xs); }

.rs-rail {
    position: relative;
    height: 1.75rem;
    display: flex;
    align-items: center;
}
.rs-rail::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--c-line);
}
.rs-fill {
    position: absolute;
    left: var(--rs-lo);
    right: calc(100% - var(--rs-hi));
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-sea), var(--c-turquoise));
}

/* The inputs are invisible hit-surfaces; only their thumbs paint and take pointers. */
.rs-thumb {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;   /* re-enabled on the thumbs, so the two stacked inputs
                               don't block each other's rail */
}
.rs-thumb:focus { outline: none; }
.rs-thumb::-webkit-slider-runnable-track { background: transparent; border: 0; height: 1.75rem; }
.rs-thumb::-moz-range-track { background: transparent; border: 0; height: 1.75rem; }

.rs-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--c-turquoise);
    box-shadow: 0 2px 8px -1px color-mix(in oklch, var(--c-night-deep) 30%, transparent);
    cursor: grab;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.rs-thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--c-turquoise);
    box-shadow: 0 2px 8px -1px color-mix(in oklch, var(--c-night-deep) 30%, transparent);
    cursor: grab;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.rs-thumb:hover::-webkit-slider-thumb { transform: scale(1.12); }
.rs-thumb:hover::-moz-range-thumb { transform: scale(1.12); }
.rs-thumb:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
.rs-thumb:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.18); }
.rs-thumb:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-turquoise) 28%, transparent);
}
.rs-thumb:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-turquoise) 28%, transparent);
}

/* ── Date-range picker (Shared/DateRangePicker.razor) ──────────────────── */
.drp { position: relative; }
.drp-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: white;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.drp-trigger:hover { border-color: color-mix(in oklch, var(--c-turquoise) 50%, var(--c-line)); }
.drp.is-open .drp-trigger,
.drp-trigger:focus-visible {
    outline: none;
    border-color: var(--c-turquoise);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-turquoise) 18%, transparent);
}
.drp-trigger.has-value { color: var(--c-ink); font-weight: 600; }
.drp-trigger-icon { color: var(--c-turquoise); font-size: 1rem; flex-shrink: 0; }
.drp-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drp-trigger-caret { color: var(--c-ink-muted); font-size: 0.8rem; flex-shrink: 0; }
.drp-trigger-clear {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 1.35rem; height: 1.35rem;
    border-radius: 50%;
    color: var(--c-ink-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.drp-trigger-clear:hover { background: var(--c-paper-soft); color: var(--c-accent-deep); }

.drp-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    /* The sidebar is narrower than a comfortable month grid — let the popover
       outgrow its column rather than crush the day cells. */
    min-width: 17.5rem;
    width: max-content;
    max-width: min(21rem, calc(100vw - 2rem));
    padding: var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-paper-elevated);
    box-shadow: var(--shadow-3);
    animation: drp-in 0.16s var(--ease-out);
}
@keyframes drp-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .drp-pop { animation: none; }
}
/* Near the viewport's right edge the popover would clip; anchor it to the trigger's
   trailing edge instead. */
@media (min-width: 961px) {
    .drp-pop { left: auto; right: 0; }
}

.drp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--c-line-soft);
}
.drp-preset {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: white;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.drp-preset:hover { border-color: var(--c-turquoise); color: var(--c-sea-deep); }
.drp-preset.is-active {
    background: var(--c-sea);
    border-color: transparent;
    color: white;
}

.drp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.drp-month { font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink); }
.drp-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: white;
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.drp-nav:hover:not(:disabled) { border-color: var(--c-turquoise); color: var(--c-sea-deep); }
.drp-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.drp-weekdays,
.drp-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.drp-weekdays {
    margin-bottom: 4px;
}
.drp-weekdays span {
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-ink-muted);
    text-transform: uppercase;
    padding: 2px 0;
}
.drp-day {
    position: relative;
    aspect-ratio: 1;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.drp-day--pad { cursor: default; }
.drp-day:hover:not(:disabled) { background: color-mix(in oklch, var(--c-turquoise) 14%, white); }
.drp-day:focus-visible {
    outline: 2px solid var(--c-turquoise);
    outline-offset: -2px;
}
.drp-day.is-past {
    color: var(--c-ink-muted);
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}
.drp-day.is-today { font-weight: 800; }
.drp-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--c-accent);
}
/* The span between the ends — square edges so consecutive days read as one bar. */
.drp-day.is-in-range {
    background: color-mix(in oklch, var(--c-turquoise) 16%, white);
    border-radius: 0;
    color: var(--c-sea-deep);
}
.drp-day.is-start,
.drp-day.is-end {
    background: linear-gradient(135deg, var(--c-sea), var(--c-turquoise));
    color: white;
    font-weight: 700;
}
.drp-day.is-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.drp-day.is-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.drp-day.is-single { border-radius: var(--r-sm); }
.drp-day.is-start:hover, .drp-day.is-end:hover { color: white; }
/* Hover-preview of the pending half of the range reads lighter than a committed one. */
.drp-day.is-preview.is-in-range { background: color-mix(in oklch, var(--c-turquoise) 9%, white); }
.drp-day.is-preview.is-end {
    background: color-mix(in oklch, var(--c-turquoise) 45%, white);
    color: var(--c-sea-deep);
}
.drp-day.is-today::after,
.drp-day.is-start::after,
.drp-day.is-end::after { background: currentColor; }

.drp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-line-soft);
}
.drp-hint { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.drp-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}
.drp-clear:hover { color: var(--c-accent-deep); }

/* ── Toolbar overhaul: result count + active chips on left, sort on right ─ */
.listing-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.toolbar-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-width: 0;
}
.toolbar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.toolbar-chips .chip {
    font-size: var(--fs-xs);
    padding: 0.22rem 0.35rem 0.22rem 0.65rem;
    /* Each chip is a tap-to-remove button; 28px was too small to hit reliably. */
    min-height: 2.25rem;
}
.toolbar-chips .chip-clear-all {
    margin-left: 4px;
}

/* ── Card grid: 3 cols for listing (with sidebar) ──────────────────────── */
.card-grid--listing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
}
@media (max-width: 1280px) {
    .card-grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .card-grid--listing { grid-template-columns: 1fr; }
}

/* ── Sort select polish ────────────────────────────────────────────────── */
.listing-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-ink-soft);
    flex-shrink: 0;
}
.listing-sort select {
    padding: 0.55rem 2rem 0.55rem 0.9rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: white;
    font: inherit;
    /* 16px + 44px — anything smaller triggers iOS focus-zoom and is a poor tap
       target. --fs-sm computes to 14px. */
    font-size: 1rem;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.listing-sort select:hover {
    border-color: var(--c-turquoise);
}

/* ── Consistent focus ring system (turquoise, outline-based so active shadows survive) ── */
.qc:focus-visible,
.chip:focus-visible,
.mode-chip:focus-visible,
.lhs-input input:focus-visible,
.lhs-region:focus-visible,
.lhs-submit:focus-visible,
.page-btn:focus-visible,
.tour-card-cta:focus-visible,
.filter-block input:focus-visible,
.filter-block select:focus-visible,
.listing-sort select:focus-visible,
.mobile-filter-toggle:focus-visible,
.filter-close-mobile:focus-visible,
.filter-daterange-clear:focus-visible,
.btn-tertiary:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--c-turquoise) 80%, transparent);
    outline-offset: 2px;
}

/* ── Mobile (≤960): un-sticky quick-strip + sticky toolbar ─────────────── */
@media (max-width: 960px) {
    .quick-strip-wrap {
        position: static;
        box-shadow: none;
    }
    .listing-toolbar {
        position: sticky;
        top: calc(var(--nav-h, 4rem) + 0.5rem);
        z-index: 20;
        background: color-mix(in oklch, white 95%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: var(--s-2) var(--s-3);
        margin-inline: calc(-1 * var(--s-3));
        border-bottom: 1px solid var(--c-line-soft);
    }
    /* Two explicit rows instead of flex-wrap:
         row 1:  "63 tur"            [Sırala ▾]
         row 2:  ‹ active filter chips, scrolled sideways ›
       flex-wrap gave .toolbar-info the full width, which pushed the sort onto its own
       second row — two tall rows inside a STICKY bar ate most of a phone screen. Grid
       with explicit placement keeps count + sort on one line and is deterministic:
       auto-placement would have bumped the sort to a third row once the chips claimed
       the full-width row 2. Rows only exist if their item renders, so with no active
       filters there is no empty chips row (and no stray gap). */
    .listing-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-2);
    }
    /* Dissolve the wrapper so count + chips become grid items of the toolbar itself. */
    .toolbar-info { display: contents; }
    .listing-result-count { grid-column: 1; grid-row: 1; min-width: 0; }
    .listing-sort { grid-column: 2; grid-row: 1; justify-self: end; }
    .toolbar-chips {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .toolbar-chips .chip { flex: 0 0 auto; scroll-snap-align: start; }

    /* Trim the row so it reads as one compact line, not a headline. */
    .listing-result-count { font-size: var(--fs-sm); }
    .listing-result-count strong { font-size: var(--fs-md); }
    .listing-sort { font-size: var(--fs-xs); gap: 0.35rem; }
    .listing-sort select { font-size: var(--fs-xs); padding: 0.35rem 0.5rem; min-height: 2.25rem; }
}
@media (max-width: 720px) {
    .quick-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: var(--s-3) 0;
        gap: var(--s-2);
        scroll-snap-type: x proximity;
    }
    .qc-group {
        flex-direction: row;
        align-items: center;
        gap: var(--s-2);
        scroll-snap-align: start;
    }
    .qc-group + .qc-group {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }
    .qc-group-label { display: none; }
    .qc-group-chips { flex-wrap: nowrap; }
}

/* ── Quiz budget slider — premium, currency-aware, "quality rises with budget" ──
   Tier (1→4) shifts the accent from calm teal to luxe gold and intensifies the
   glow, so dragging right literally feels richer. --budget-pct drives the fill. */
.quiz-budget {
    --budget-accent: #2dd4bf;
    --budget-glow: rgba(45, 212, 191, 0.22);
    margin-top: var(--s-4);
    padding: var(--s-5) var(--s-2) var(--s-2);
    border-radius: var(--r-lg);
    transition: box-shadow .35s ease;
}
.quiz-budget[data-tier="1"] { --budget-accent: #2dd4bf; --budget-glow: rgba(45,212,191,.22); }
.quiz-budget[data-tier="2"] { --budget-accent: #38bdf8; --budget-glow: rgba(56,189,248,.26); }
.quiz-budget[data-tier="3"] { --budget-accent: #a78bfa; --budget-glow: rgba(167,139,250,.30); }
.quiz-budget[data-tier="4"] { --budget-accent: #fbbf24; --budget-glow: rgba(251,191,36,.36); }
.quiz-budget[data-tier="3"] { box-shadow: 0 0 40px -18px var(--budget-glow); }
.quiz-budget[data-tier="4"] { box-shadow: 0 0 64px -16px var(--budget-glow); }

.quiz-budget-readout {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin-bottom: var(--s-5);
}
.quiz-budget-tier {
    text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 0.72rem; font-weight: 700;
    color: var(--budget-accent);
    transition: color .3s ease;
}
.quiz-budget-amount {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 6vw, 3.1rem);
    font-weight: 600; line-height: 1; color: #fff;
    text-shadow: 0 4px 26px var(--budget-glow);
    transition: text-shadow .3s ease;
}
.quiz-budget-sub { font-size: 0.8rem; color: rgba(255,255,255,0.55); }

.quiz-budget-track-wrap { padding: 6px 10px; }
/* The input's own box is the hit area, so it stays 44px tall and transparent;
   the visible 10px track is painted by ::-webkit-slider-runnable-track. At
   height:10px the 28px thumb was drawn outside the box and barely draggable. */
.quiz-budget-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 44px; border-radius: 999px; outline: none; cursor: pointer;
    background: transparent;
}
.quiz-budget-range::-webkit-slider-runnable-track {
    height: 10px; border-radius: 999px;
    background: linear-gradient(90deg,
        var(--budget-accent) 0%,
        var(--budget-accent) var(--budget-pct, 40%),
        rgba(255,255,255,0.12) var(--budget-pct, 40%),
        rgba(255,255,255,0.12) 100%);
    transition: background .12s linear;
}
.quiz-budget-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    /* Centre the 28px thumb on the 10px track: (10 - 28) / 2 = -9px. */
    margin-top: -9px;
    width: 28px; height: 28px; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fff 0%, var(--budget-accent) 75%);
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow: 0 0 0 7px var(--budget-glow), 0 8px 22px rgba(0,0,0,0.45);
    transition: transform .15s ease, box-shadow .3s ease;
}
.quiz-budget-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.quiz-budget-range::-webkit-slider-thumb:active { transform: scale(1.18); }
.quiz-budget-range::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.92);
    background: radial-gradient(circle at 35% 32%, #fff 0%, var(--budget-accent) 75%);
    box-shadow: 0 0 0 7px var(--budget-glow), 0 8px 22px rgba(0,0,0,0.45);
}
.quiz-budget-range::-moz-range-progress {
    height: 10px; border-radius: 999px; background: var(--budget-accent);
}
.quiz-budget-range::-moz-range-track {
    height: 10px; border-radius: 999px; background: rgba(255,255,255,0.12);
}
.quiz-budget.is-max .quiz-budget-range::-webkit-slider-thumb { box-shadow: 0 0 0 9px var(--budget-glow), 0 10px 26px rgba(0,0,0,0.5); }

.quiz-budget-scale {
    display: flex; justify-content: space-between;
    margin-top: var(--s-3); padding: 0 6px;
    font-size: 0.74rem; color: rgba(255,255,255,0.5);
}
.quiz-budget-scale-max { color: var(--budget-accent); font-weight: 600; transition: color .3s ease; }

/* ── Home: "Our Specialism" image-backed region cards + "Why Sore" trust band ──── */
.region-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-7);
}
.region-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 400px;
    border-radius: var(--r-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow-2);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.region-card-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 1.4s var(--ease-out);
}
.region-card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        color-mix(in oklch, var(--c-corporate) 94%, transparent) 0%,
        color-mix(in oklch, var(--c-corporate) 58%, transparent) 42%,
        color-mix(in oklch, var(--c-corporate) 6%, transparent) 100%);
}
.region-card-body { position: relative; padding: var(--s-7); }
.region-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.region-card:hover .region-card-media { transform: scale(1.06); }
.region-card-title { font-family: var(--font-display); font-size: var(--fs-xl); color: #fff; margin: 0 0 var(--s-3); text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.region-card-lede { color: rgba(255,255,255,0.92); line-height: 1.65; margin: 0 0 var(--s-4); max-width: 46ch; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.region-card-cta { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.01em; color: #fff; }
.region-card-cta i { transition: transform var(--t-fast) var(--ease-out); }
.region-card:hover .region-card-cta i { transform: translateX(5px); }

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-7);
}
.why-card {
    padding: var(--s-6);
    border-radius: var(--r-md);
    background: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--c-accent) 32%, var(--c-line)); }
.why-card-icon {
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: var(--r-md);
    background: color-mix(in oklch, var(--c-accent) 12%, white);
    color: var(--c-accent-deep);
    font-size: 1.6rem;
    margin-bottom: var(--s-4);
}
.why-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); margin: 0 0 var(--s-2); }
.why-card-lede { color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

@media (max-width: 860px) {
    .region-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .why-grid { grid-template-columns: 1fr; }
}

/* ── Featured-destinations showcase — staggered grayscale photo grid + name list ──
   Adapted from a compact "team showcase" pattern: hover a photo OR its name row and
   the pair lights up (grayscale → colour) while the rest dim. Pure-CSS handles the
   photo grid on its own; team-showcase.js adds the name↔photo cross-link. */
.dest-showcase { margin-top: var(--s-8, 3rem); }
.dest-showcase-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.dest-showcase-title { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }

.team-showcase { display: flex; flex-direction: column; gap: var(--s-6); align-items: flex-start; }
@media (min-width: 860px) {
    .team-showcase { flex-direction: row; gap: clamp(2rem, 4vw, 3.5rem); }
}

.ts-photos { display: flex; gap: var(--s-2); flex-shrink: 0; }
.ts-col { display: flex; flex-direction: column; gap: var(--s-2); }
.ts-col--2 { margin-top: 2.5rem; }   /* stagger the middle column down */
.ts-col--3 { margin-top: 1.25rem; }
.ts-photo {
    display: block; overflow: hidden; border-radius: var(--r-lg);
    flex-shrink: 0; box-shadow: var(--shadow-1);
    /* Background-image (not <img>) so a broken/blocked photo URL falls back to a branded
       tile instead of a white box + alt text. */
    background-color: color-mix(in oklch, var(--c-corporate, #17313f) 88%, black);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: grayscale(1) brightness(0.78);
    transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.ts-col--1 .ts-photo { width: clamp(104px, 12vw, 150px); aspect-ratio: 1 / 1.07; }
.ts-col--2 .ts-photo { width: clamp(116px, 13.2vw, 165px); aspect-ratio: 1 / 1.07; }
.ts-col--3 .ts-photo { width: clamp(110px, 12.6vw, 156px); aspect-ratio: 1 / 1.07; }
.ts-photo:hover { filter: grayscale(0) brightness(1); transform: scale(1.04); }
/* The three clamp() floors (104+116+110) + gaps set a 346px hard floor, and
   flex-shrink:0 forbids shrinking — so on a 360px screen the third column was
   clipped with no way to scroll to it. This is the sphere's mobile fallback,
   i.e. what every phone visitor sees. */
@media (max-width: 400px) {
    .ts-photos { flex-shrink: 1; }
    .ts-photo { flex-shrink: 1; min-width: 0; }
    .ts-col { min-width: 0; }
    .ts-col--1 .ts-photo,
    .ts-col--2 .ts-photo,
    .ts-col--3 .ts-photo { width: auto; }
}
/* Pure-CSS: dim the other photos while hovering the grid. */
.ts-photos:hover .ts-photo { opacity: 0.55; }
.ts-photos:hover .ts-photo:hover { opacity: 1; }
/* JS cross-link: a synced photo (its name hovered) lights up. */
.team-showcase.is-dim .ts-photo:not(.is-active) { opacity: 0.55; }
.team-showcase.is-dim .ts-photo.is-active { opacity: 1; filter: grayscale(0) brightness(1); }

.ts-list { display: flex; flex-direction: column; gap: var(--s-4); flex: 1; min-width: 0; padding-top: var(--s-1); }
@media (min-width: 520px) and (max-width: 859px) {
    .ts-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); }
}
.ts-row { display: block; transition: opacity var(--t-base) var(--ease-out); }
.ts-row-top { display: flex; align-items: center; gap: 0.65rem; }
.ts-bar {
    width: 16px; height: 11px; border-radius: 5px; flex-shrink: 0;
    background: color-mix(in oklch, var(--c-ink) 22%, transparent);
    transition: width var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.ts-name {
    font-size: var(--fs-md); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
    color: color-mix(in oklch, var(--c-ink) 78%, transparent);
    transition: color var(--t-base) var(--ease-out);
}
.ts-go {
    margin-left: auto; display: inline-flex; color: var(--c-accent);
    opacity: 0; transform: translateX(-0.4rem);
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ts-role {
    display: block; margin-top: 0.4rem; padding-left: 27px;
    font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--c-ink-muted);
}
/* Row active — self hover OR JS-synced from its photo. */
.ts-row:hover .ts-bar,
.team-showcase.is-dim .ts-row.is-active .ts-bar { width: 22px; background: var(--c-ink); }
.ts-row:hover .ts-name,
.team-showcase.is-dim .ts-row.is-active .ts-name { color: var(--c-ink); }
.ts-row:hover .ts-go,
.team-showcase.is-dim .ts-row.is-active .ts-go { opacity: 1; transform: translateX(0); }
.team-showcase.is-dim .ts-row:not(.is-active) { opacity: 0.5; }

/* ── Featured-destinations 3D image sphere (img-sphere.js) ─────────────────
   Alternative treatment for the destinations showcase, toggled from admin.
   The .img-sphere-fallback (the SSR photo+name showcase) is what visitors see
   until the script activates on capable desktops; then the stage takes over. */
.img-sphere { position: relative; margin-top: var(--s-8); }
.img-sphere-stage { display: none; }
.img-sphere--active { display: flex; justify-content: center; }
.img-sphere--active .img-sphere-fallback { display: none; }
.img-sphere--active .img-sphere-stage {
    display: block;
    position: relative;
    width: var(--sphere-size, 600px);
    height: var(--sphere-size, 600px);
    max-width: 100%;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.img-sphere--active .img-sphere-stage:active { cursor: grabbing; }
.img-sphere-tile {
    position: absolute;
    display: block;
    will-change: transform, opacity;
    transition: transform 0.18s var(--ease-out, ease-out);
    text-decoration: none;
}
.img-sphere-tile-inner {
    display: block; width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(14, 26, 43, 0.28);
    border: 2px solid rgba(255, 255, 255, 0.28);
    background: var(--c-paper-elevated, #fff);
}
.img-sphere-tile-inner img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Spotlight modal */
.img-sphere-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(14, 26, 43, 0.55);
    animation: imgSphereFade 0.25s var(--ease-out, ease-out);
}
.img-sphere-modal[hidden] { display: none; }
.img-sphere-modal-card {
    background: var(--c-paper-elevated, #fff);
    color: var(--c-ink);
    border-radius: var(--r-lg, 18px);
    max-width: 30rem; width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(14, 26, 43, 0.4);
    animation: imgSphereScale 0.25s var(--ease-out, ease-out);
}
.img-sphere-modal-media { position: relative; aspect-ratio: 1 / 1; }
.img-sphere-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-sphere-modal-close {
    position: absolute; top: 0.6rem; right: 0.6rem;
    width: 2.1rem; height: 2.1rem; border: none; border-radius: 50%;
    background: rgba(14, 26, 43, 0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.1rem;
    transition: background var(--t-fast, 0.15s) var(--ease-out, ease-out);
}
.img-sphere-modal-close:hover { background: rgba(14, 26, 43, 0.8); }
.img-sphere-modal-body { padding: 1.4rem 1.5rem; }
.img-sphere-modal-title { margin: 0 0 0.35rem; font-size: var(--fs-lg, 1.25rem); }
.img-sphere-modal-desc { margin: 0 0 0.9rem; color: var(--c-ink-soft, #556); font-size: var(--fs-sm, 0.9rem); }
.img-sphere-modal-cta { font-weight: 600; color: var(--c-accent); text-decoration: none; }
.img-sphere-modal-cta:hover { text-decoration: underline; }

@keyframes imgSphereFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes imgSphereScale { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .img-sphere-modal, .img-sphere-modal-card { animation: none; }
}

/* ── Professional form controls (public) — replaces bare browser-default look ── */
.app-shell .form-control {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    background-color: var(--c-paper-elevated);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    line-height: 1.4;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.app-shell .form-control:hover { border-color: color-mix(in oklch, var(--c-accent) 35%, var(--c-line)); }
.app-shell .form-control:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--shadow-glow); }
.app-shell select.form-control,
.app-shell select.filter-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23557' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
}

/* ── Modern styled <select> dropdowns (2025 customizable-select) ───────────
   The native <select> option list is OS-drawn and un-themeable — the dated
   "system menu" look. The CSS customizable-select model (`appearance:
   base-select`, shipped in Chromium 2025) opts the WHOLE control — closed
   button, chevron AND the popup with its <option>s — into full CSS styling
   while keeping the element's native semantics, keyboard handling, form value
   and a11y. Gated behind @supports: browsers that haven't shipped it keep the
   fully-functional native control (graceful fallback), Chromium (Edge/Chrome)
   gets the branded popup. Zero JS — the <select> stays a <select>, so Blazor's
   @bind is untouched. Scoped to public-site selects only (admin keeps its own
   [data-admin] styling). */
@supports (appearance: base-select) {
    /* The whole block is Chromium-only by construction (the @supports gate), so the
       styled-select group is hoisted into one complex :is() and each rule just appends
       its pseudo. Previously the group was spelled out per rule — six near-identical
       lists that drifted apart (the tour-listing region select was in none of them,
       which is why it alone kept the OS-drawn option list). */
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select,
        select.filter-select
    ) {
        appearance: base-select;
        display: inline-flex;
        align-items: center;
        gap: var(--s-2);
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        background: var(--c-paper-elevated);
        color: var(--c-ink);
        padding: 0.5rem 0.7rem;
        font: inherit;
        line-height: 1.2;
        cursor: pointer;
        transition: border-color var(--t-fast) var(--ease-out),
                    box-shadow var(--t-fast) var(--ease-out);
    }
    /* The hero search select sits inside a borderless field — keep it flush there. */
    .hero-search-field select {
        border: 0;
        background: transparent;
        padding: 0;
    }
    /* The listing hero's select is a pill riding on a translucent search bar, not a
       boxed field — restore its shape after the shared rule above squares it off. */
    select.lhs-region {
        border: 0;
        background: var(--c-paper-soft);
        border-radius: var(--r-pill);
        padding: 0 1.1rem;
        min-height: 2.75rem;
        min-width: 9rem;
    }
    :is(
        :is(.filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ):hover { border-color: color-mix(in oklch, var(--c-accent) 35%, var(--c-line)); }
    /* …but the pill has no border to tint; give it a ring instead. */
    select.lhs-region:hover { box-shadow: 0 0 0 2px color-mix(in oklch, var(--c-accent) 30%, transparent); }

    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ):focus-visible {
        outline: none;
        border-color: var(--c-accent);
        box-shadow: var(--shadow-glow);
    }

    /* ── chevron (built-in picker icon) ── */
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    )::picker-icon {
        color: var(--c-ink-muted);
        transition: transform var(--t-base) var(--ease-out);
    }
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ):open::picker-icon { transform: rotate(180deg); }

    /* ── the popup ── */
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    )::picker(select) {
        appearance: base-select;
        border: 1px solid var(--c-line);
        border-radius: var(--r-lg);
        background: var(--c-paper-elevated);
        box-shadow: var(--shadow-3);
        padding: 6px;
        margin-top: 6px;
        max-height: 20rem;
        overflow-y: auto;
        /* enter/exit animation (top-layer discrete props) */
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
        transition: opacity 0.16s var(--ease-out),
                    transform 0.16s var(--ease-out),
                    overlay 0.16s allow-discrete,
                    display 0.16s allow-discrete;
    }
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ):open::picker(select) { opacity: 1; transform: none; }
    @starting-style {
        :is(
            :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
            select.lhs-region,
            .app-shell select.filter-select
        ):open::picker(select) { opacity: 0; transform: translateY(-6px) scale(0.985); }
    }

    /* ── options ── */
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ) option {
        display: flex;
        align-items: center;
        gap: var(--s-2);
        padding: 0.55rem 0.65rem;
        border-radius: var(--r-sm);
        color: var(--c-ink);
        cursor: pointer;
        transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
    }
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ) option:is(:hover, :focus) {
        background: var(--c-accent-tint);
        outline: none;
    }
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ) option:checked { color: var(--c-accent-deep); font-weight: 600; }
    /* Move the built-in tick to the trailing edge and brand it. */
    :is(
        :is(.hero-search-field, .filter-block, .listing-sort, .account-field, .ck-field) select,
        select.lhs-region,
        .app-shell select.filter-select
    ) option::checkmark { order: 2; margin-left: auto; color: var(--c-accent); }
}

/* ── FAQ accordion (reusable FaqSection component) ────────────────────── */
.faq-list { max-width: 840px; margin: var(--s-7) auto 0; display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item {
    position: relative;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-paper-elevated);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.faq-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(var(--c-accent), var(--c-accent-deep));
    transform: scaleY(0); transform-origin: top;
    transition: transform var(--t-base) var(--ease-out);
}
.faq-item:hover { border-color: color-mix(in oklch, var(--c-accent) 25%, var(--c-line)); }
.faq-item[open] { border-color: color-mix(in oklch, var(--c-accent) 40%, var(--c-line)); box-shadow: var(--shadow-2); }
.faq-item[open]::before { transform: scaleY(1); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; color: var(--c-ink);
    cursor: pointer; list-style: none; user-select: none;
    transition: color var(--t-fast) var(--ease-out);
}
.faq-q:hover, .faq-item[open] .faq-q { color: var(--c-accent-deep); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: "+"; flex: none;
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--c-accent) 12%, white);
    color: var(--c-accent-deep);
    font-size: 1.25rem; line-height: 1; font-weight: 400;
    transition: transform var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); background: var(--c-accent-deep); color: #fff; }
.faq-a { padding: 0 var(--s-6) var(--s-5); color: var(--c-ink-soft); line-height: 1.75; max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════════
   HYBRID ICON SYSTEM — line UI chrome (Phosphor regular/fill) stays default;
   colourful per-category feature icons use Phosphor DUOTONE + an .ico-* hue.
   Introduced 2026-07-12 for the transfer feature; rolls out site-wide gradually.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --ico-teal:   #00A6A6;   /* transfer / route */
    --ico-coral:  #E07A5F;   /* destination / arrival */
    --ico-amber:  #E8A317;   /* time / duration */
    --ico-violet: #7C5CFC;   /* people / capacity (distinctive accent) */
    --ico-green:  #2F855A;   /* included / verified */
    --ico-blue:   #0E5A8A;   /* distance / flight */
}
.ico-teal   { color: var(--ico-teal); }
.ico-coral  { color: var(--ico-coral); }
.ico-amber  { color: var(--ico-amber); }
.ico-violet { color: var(--ico-violet); }
.ico-green  { color: var(--ico-green); }
.ico-blue   { color: var(--ico-blue); }

/* Feature-icon sizes. Duotone glyphs carry their own second layer at reduced
   opacity, so a single `color` reads as a two-tone, coloured icon. */
.tx-ico    { font-size: 1.5rem;  line-height: 1; flex: 0 0 auto; }
.tx-ico-s  { font-size: 1.05rem; line-height: 1; }
.tx-ico-h  { font-size: 1.4rem;  line-height: 1; vertical-align: -2px; margin-right: .35rem; }
.tx-ico-lg { font-size: 2.4rem;  line-height: 1; flex: 0 0 auto; }

/* 3D raster feature icons (<SoIcon>). Rendered as WebP; carry their own colour.
   STANDARD: size is set by CONTEXT class (.so-ic--<ctx>), never per call. Two
   different icons in the same context share one box, so the set reads as a system.
   The .so-ic-fb--<ctx> mirror sizes the Phosphor fallback to match. */
.so-ic, .so-ic-fb { display: inline-block; object-fit: contain; flex: 0 0 auto; line-height: 1; }
.so-ic-fb { display: inline-flex; align-items: center; justify-content: center; }

/* text-flow: scales with the surrounding font */
.so-ic--inline  { width: 1.15em; height: 1.15em; vertical-align: -0.18em; }
.so-ic-fb--inline { font-size: 1.15em; vertical-align: -0.05em; }

/* compact: dense horizontal filter strips / small pills — refined, not shouty */
.so-ic--compact { width: 20px; height: 20px; vertical-align: -0.28em; }
.so-ic-fb--compact { font-size: 18px; }

/* tile: icon-FORWARD selector tiles (icon stacked above a label). The tile is
   built around the icon, so it earns real size. */
.so-ic--tile { width: 46px; height: 46px; vertical-align: middle; }
.so-ic-fb--tile { font-size: 40px; }

/* fixed-px contexts (± baseline nudge so they sit on the text line) */
.so-ic--meta    { width: 32px;  height: 32px;  vertical-align: -0.32em; }
.so-ic--chip    { width: 35px;  height: 35px;  vertical-align: -0.34em; }
.so-ic--nav     { width: 33px;  height: 33px;  vertical-align: -0.34em; }
.so-ic--field   { width: 26px;  height: 26px;  vertical-align: -0.34em; }
.so-ic--trust   { width: 44px;  height: 44px;  vertical-align: middle; }
.so-ic--feature { width: 64px;  height: 64px;  vertical-align: middle; }
.so-ic--hero    { width: 88px;  height: 88px;  vertical-align: middle; }
.so-ic--empty   { width: 104px; height: 104px; vertical-align: middle; }
.so-ic--result  { width: 120px; height: 120px; vertical-align: middle; }

.so-ic-fb--meta   { font-size: 22px; } .so-ic-fb--chip   { font-size: 26px; }
.so-ic-fb--nav    { font-size: 24px; } .so-ic-fb--field  { font-size: 24px; }
.so-ic-fb--trust  { font-size: 40px; } .so-ic-fb--feature{ font-size: 58px; }
.so-ic-fb--hero   { font-size: 80px; } .so-ic-fb--empty  { font-size: 96px; }
.so-ic-fb--result { font-size: 108px; }

/* legacy helper kept so older call sites don't break mid-migration */
.so-ic--mid { vertical-align: middle; }

/* phones: rein in the big contexts a touch */
@media (max-width: 640px) {
    .so-ic--hero   { width: 72px;  height: 72px; }
    .so-ic--empty  { width: 88px;  height: 88px; }
    .so-ic--result { width: 100px; height: 100px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSFER DETAIL (.tx-*) — rich, photo-led detail page
   ═══════════════════════════════════════════════════════════════════════ */
.tx-hero .detail-meta i { color: var(--c-turquoise-soft); }

.tx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}
.tx-fact {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4);
    background: var(--c-paper-soft);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md);
}
.tx-fact > div { display: flex; flex-direction: column; min-width: 0; }
.tx-fact-k { font-size: var(--fs-xs); color: var(--c-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.tx-fact strong { font-size: var(--fs-base); color: var(--c-ink); }

.tx-prose { line-height: 1.8; }
.tx-prose :is(h2, h3) { font-family: var(--font-display); color: var(--c-ink); margin: var(--s-5) 0 var(--s-3); }
.tx-prose p { margin-bottom: var(--s-4); }

.tx-highlights { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-3); }
.tx-highlights li { display: flex; align-items: flex-start; gap: var(--s-3); line-height: 1.6; }
.tx-highlights li i { margin-top: .1rem; }

.tx-incl-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6);
    margin: 0 0 var(--s-6);
}
@media (max-width: 640px) { .tx-incl-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.tx-incl-h { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); color: var(--c-ink); margin-bottom: var(--s-3); }
.tx-incl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.tx-incl-list li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.55; color: var(--c-ink-soft); }
.tx-incl-list li i { margin-top: .2rem; color: var(--ico-green); font-weight: 700; }
.tx-incl-list--muted li i { color: var(--c-ink-muted); }
.tx-incl-list--muted li { text-decoration: none; }

.tx-meeting {
    display: flex; gap: var(--s-4); align-items: flex-start;
    padding: var(--s-5);
    background: color-mix(in oklch, var(--c-cta) 6%, white);
    border: 1px solid color-mix(in oklch, var(--c-cta) 20%, transparent);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-6);
}
.tx-meeting p { color: var(--c-ink-soft); line-height: 1.7; margin: 0; }

.tx-trust, .tx-list-trust {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--s-4);
    padding: var(--s-5);
    background: var(--c-paper-soft);
    border-radius: var(--r-lg);
    margin: var(--s-6) 0;
}
.tx-trust-item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: 500; }

.tx-form-lede { color: var(--c-ink-soft); margin-bottom: var(--s-4); }

/* Sticky summary polish */
.tx-summary { position: relative; overflow: hidden; }
.tx-summary-photo {
    height: 130px; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
    background-size: cover; background-position: center;
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.tx-summary .summary-row span { display: inline-flex; align-items: center; gap: .4rem; }
.tx-book-cta { margin-top: var(--s-4); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.tx-flat-note { display: flex; align-items: center; gap: .4rem; justify-content: center; font-size: var(--fs-xs); color: var(--ico-green); margin-top: var(--s-3); }
.tx-rate-note { font-size: var(--fs-xs); color: var(--c-warning); margin-top: var(--s-2); }

/* ── Fleet & prices comparison table ──────────────────────────────────── */
.tx-compare { overflow-x: auto; margin: 0 0 var(--s-6); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); }
.tx-compare-table { width: 100%; border-collapse: collapse; min-width: 26rem; }
.tx-compare-table th, .tx-compare-table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--c-line-soft); }
.tx-compare-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-muted); background: var(--c-paper-soft); }
.tx-compare-table tbody tr:last-child td { border-bottom: none; }
.tx-compare-table td i { margin-right: .4rem; }
.tx-compare-price { text-align: right !important; font-weight: 700; color: var(--c-ink); white-space: nowrap; }

/* ── Booking steps (party size → vehicle → details) ───────────────────── */
.tx-book-step { margin-bottom: var(--s-5); }
.tx-step-label { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--c-ink); margin-bottom: var(--s-3); }
.tx-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 999px;
    background: var(--c-cta); color: #fff; font-size: var(--fs-sm); font-weight: 700; flex: 0 0 auto;
}

/* Party-size stepper */
.tx-pax-stepper { display: flex; align-items: center; gap: var(--s-3); }
.tx-pax-btn {
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-md);
    border: 1px solid var(--c-line-soft); background: var(--c-paper);
    color: var(--c-ink); font-size: var(--fs-md); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.tx-pax-btn:hover:not(:disabled) { border-color: var(--c-cta); color: var(--c-cta); }
.tx-pax-btn:disabled { opacity: .4; cursor: not-allowed; }
.tx-pax-value { min-width: 2.5rem; text-align: center; font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); }
.tx-pax-hint { color: var(--c-ink-muted); font-size: var(--fs-sm); }

/* Vehicle picker cards */
.tx-veh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); }
.tx-veh-card {
    position: relative; display: flex; flex-direction: column; gap: .35rem;
    padding: var(--s-4); text-align: left; cursor: pointer;
    background: var(--c-paper); border: 2px solid var(--c-line-soft); border-radius: var(--r-lg);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tx-veh-card:hover { border-color: color-mix(in oklch, var(--c-cta) 45%, var(--c-line-soft)); transform: translateY(-2px); }
.tx-veh-card.is-selected { border-color: var(--c-cta); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-cta) 18%, transparent); }
.tx-veh-ico { font-size: 1.6rem; }
.tx-veh-name { font-weight: 700; color: var(--c-ink); }
.tx-veh-meta { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.tx-veh-meta i { color: var(--c-ink-muted); }
.tx-veh-price { margin-top: .35rem; font-size: var(--fs-md); font-weight: 800; color: var(--c-cta); }
.tx-veh-check { position: absolute; top: var(--s-3); right: var(--s-3); color: var(--c-cta); font-size: 1.25rem; opacity: 0; transition: opacity .15s ease; }
.tx-veh-card.is-selected .tx-veh-check { opacity: 1; }

/* No eligible vehicle (oversized party) */
.tx-no-vehicle {
    display: flex; gap: var(--s-4); align-items: flex-start;
    padding: var(--s-5);
    background: color-mix(in oklch, var(--ico-coral) 8%, white);
    border: 1px solid color-mix(in oklch, var(--ico-coral) 25%, transparent);
    border-radius: var(--r-lg);
}
.tx-no-vehicle > i { font-size: 1.75rem; flex: 0 0 auto; }
.tx-no-vehicle p { margin: 0 0 var(--s-3); color: var(--c-ink-soft); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   TRANSFER LIST (.tx-list-*) — hero + live filter + rich cards
   ═══════════════════════════════════════════════════════════════════════ */
.tx-list-hero {
    background: var(--grad-hero-standard);
    color: #fff;
    padding: var(--s-9) 0 var(--s-8);
}
.tx-list-hero-inner { max-width: 52rem; }
.tx-list-eyebrow { color: var(--c-turquoise-soft); display: inline-flex; align-items: center; gap: .5rem; }
.tx-list-title { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.05; margin: var(--s-3) 0; color: #fff; }
.tx-list-lede { color: color-mix(in oklch, white 82%, var(--c-support)); font-size: var(--fs-md); line-height: 1.7; max-width: 42rem; }

.tx-list-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s-4); margin-top: var(--s-6);
}
.tx-list-stat {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4);
    background: color-mix(in oklch, white 12%, transparent);
    border: 1px solid color-mix(in oklch, white 18%, transparent);
    border-radius: var(--r-md);
    backdrop-filter: blur(6px);
}
.tx-list-stat i { font-size: 1.8rem; }
.tx-list-stat > div { display: flex; flex-direction: column; }
.tx-list-stat strong { font-size: var(--fs-lg); color: #fff; line-height: 1.1; }
.tx-list-stat span { font-size: var(--fs-xs); color: color-mix(in oklch, white 78%, transparent); text-transform: uppercase; letter-spacing: .03em; }

.tx-list-body { padding: var(--s-7) 1rem var(--s-8); }

.tx-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-6);
}
.tx-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem var(--s-4);
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-pill);
    min-width: 15rem; flex: 1 1 15rem; max-width: 24rem;
}
.tx-search i { color: var(--c-ink-muted); }
/* The wrapping pill's padding is not clickable, so the input itself must carry
   a usable tap height. */
.tx-search input { border: 0; outline: 0; width: 100%; font: inherit; color: var(--c-ink); background: transparent; min-height: 2.75rem; }
.tx-chips { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; }
.tx-chip {
    padding: .45rem .9rem; border-radius: var(--r-pill);
    border: 1px solid var(--c-line); background: #fff; color: var(--c-ink-soft);
    font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
}
.tx-chip:hover { border-color: var(--c-turquoise); color: var(--c-turquoise); }
.tx-chip.is-active { background: var(--c-turquoise); border-color: var(--c-turquoise); color: #fff; }
.tx-count { margin-left: auto; font-size: var(--fs-sm); color: var(--c-ink-muted); white-space: nowrap; }

.tx-empty { text-align: center; padding: var(--s-8) var(--s-4); display: grid; gap: var(--s-3); justify-items: center; }

/* Rich transfer cards */
.tx-card .tour-card-media { position: relative; }
.tx-card-badge {
    position: absolute; top: .75rem; left: .75rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--c-corporate) 82%, transparent);
    color: #fff; font-size: var(--fs-xs); font-weight: 600; backdrop-filter: blur(4px);
}
.tx-card-media-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in oklch, var(--c-turquoise) 22%, white), color-mix(in oklch, var(--c-sea) 18%, white));
    position: relative;
}
.tx-card-fallback-ico { font-size: 3.2rem; color: color-mix(in oklch, var(--c-sea) 55%, white); }
.tx-card-route { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.tx-card-arrow { color: var(--c-ink-muted); }
.tour-meta-row .tour-meta-tag i { margin-right: .25rem; vertical-align: -1px; }