/* ==========================================================================
   TravelAI — Design system & components
   Renkler logodan türetildi: graphite zemin + turuncu "AI" rozeti.
   Responsive kurallar: css/responsive.css
   ========================================================================== */

:root {
    /* Brand */
    --brand-orange: #F47A0E;
    --brand-orange-dark: #E2560F;
    --brand-orange-light: #FF9F3A;
    --brand-orange-ink: #C9490A;          /* küçük turuncu metin (AA kontrast) */
    --brand-orange-tint: #FFF3E8;
    --brand-gradient: linear-gradient(45deg, #EB5611 0%, #F47A0E 55%, #F9920C 100%);

    /* Text */
    --text-primary: #141518;
    --text-secondary: #53565E;
    --text-muted: #6E7179;
    --text-faint: #8E9097;

    /* Surfaces */
    --surface: #FFFFFF;
    --surface-muted: #F6F6F3;
    --surface-sunken: #EEEEEA;
    --graphite: #1B1C20;
    --graphite-900: #111214;
    --graphite-700: #2A2B30;
    --graphite-600: #3A3B41;
    --on-dark: #F4F4F1;
    --on-dark-muted: #9A9CA3;

    /* Lines */
    --border: #E7E7E3;
    --border-strong: #D3D3CE;
    --border-dark: #2C2D33;
    --grid-dot: #D9D9D3;
    --grid-line: #ECECE8;

    /* Operational status */
    --status-ok: #138A5A;
    --status-signal: #1597B3;

    /* Type */
    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-display: clamp(2.5rem, 1.4rem + 4.2vw, 5.25rem);
    --fs-h1: clamp(2.5rem, 1.4rem + 2.8vw, 4rem);
    --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
    --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-mono: .75rem;
    --fs-mono-sm: .6875rem;
    --tracking-tight: -.035em;
    --tracking-mono: .06em;

    /* Layout */
    --container: 1320px;
    --gutter: clamp(16px, 4vw, 48px);
    --header-height: 84px;
    --header-height-compact: 64px;
    --section-y: clamp(88px, 10vw, 148px);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Radius — logodaki rozet gibi: küçük, kontrollü */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --transition-fast: .2s var(--ease-out);
    --transition-base: .45s var(--ease-out);
    --transition-slow: .9s var(--ease-out);
    --ease-plus: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height-compact) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

html.is-locked, html.is-locked body { overflow: hidden; }

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

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
mark { background: none; color: inherit; }
q { quotes: none; }
address { font-style: normal; }

::selection { background: var(--brand-orange); color: #fff; }

:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

.nowrap { white-space: nowrap; }

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

.skip-link {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--graphite-900);
    color: #fff;
    font-size: var(--fs-small);
    border-radius: var(--radius-sm);
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}
.skip-link:focus-visible { transform: none; }

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* ---------- Typography primitives ---------- */

.display {
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.display__muted { color: var(--text-faint); }
.display--dark { color: var(--on-dark); }
.display--dark .display__muted { color: #6C6E75; }

.h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
}

/* Logodaki "AI" rozetinden türetilen imza nokta */
.brand-dot {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin-left: .06em;
    border-radius: .045em;
    background: var(--brand-gradient);
    vertical-align: baseline;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.eyebrow__mark {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--brand-gradient);
}

/* Bölüm etiketi: 02 ——— ONE ECOSYSTEM */
.sec-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.sec-label__num { color: var(--brand-orange-ink); font-weight: 500; }
.sec-label__line {
    position: relative;
    width: 56px;
    height: 1px;
    background: var(--border-strong);
}
.sec-label__line::after {
    content: '';
    position: absolute;
    right: -3px; top: -3px;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: var(--brand-orange);
}
.sec-label--dark { color: var(--on-dark-muted); }
.sec-label--dark .sec-label__num { color: var(--brand-orange); }
.sec-label--dark .sec-label__line { background: var(--graphite-600); }

/* ---------- Buttons & links ---------- */

.btn {
    --btn-bg: var(--graphite-900);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 6px 6px 6px 20px;
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { --btn-bg: var(--graphite-700); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding-left: 24px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: space-between; }

.btn__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 7px;
    background: var(--brand-gradient);
    color: var(--graphite-900);
    overflow: hidden;
}
.btn--lg .btn__icon { width: 44px; height: 44px; border-radius: 9px; }
.btn__icon svg,
.link-cta__icon svg {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition-base);
}
.btn:hover .btn__icon svg,
.link-cta:hover .link-cta__icon svg { transform: translateX(3px); }

.link-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    padding-bottom: 2px;
    transition: background-size var(--transition-base);
}
.link-cta:hover { background-size: calc(100% - 42px) 1px; }
.link-cta__icon {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    color: var(--brand-orange-ink);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.link-cta:hover .link-cta__icon {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--graphite-900);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--header-height);
    transition: height var(--transition-base);
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: var(--border);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-height-compact); }

.site-header__logo { flex: none; display: block; }
.site-header__logo img {
    width: auto;
    height: 38px;
    transition: height var(--transition-base);
}
.site-header.is-scrolled .site-header__logo img { height: 32px; }

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav__list { display: flex; gap: clamp(20px, 3vw, 44px); }
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding-block: 8px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}
.site-nav__num {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: var(--text-faint);
    transition: color var(--transition-fast);
}
.site-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}
.site-nav__link:hover { color: var(--text-primary); }
.site-nav__link:hover::after { transform: scaleX(.35); }
.site-nav__link.is-active { color: var(--text-primary); }
.site-nav__link.is-active .site-nav__num { color: var(--brand-orange-ink); }
.site-nav__link.is-active::after { transform: scaleX(1); }

.site-nav__drawer { display: none; }
.site-header__cta { flex: none; }
.nav-toggle { display: none; }

/* ==========================================================================
   01 · SHOWCASE (ürün vitrini — hareketli + ekosistemi)
   Temel kurallar dokunmatik/dar ekranlar içindir; hover ile hareket eden
   iki eksenli + düzeni css/responsive.css içinde tanımlıdır.
   ========================================================================== */

/* + merkezinin konumu: grid, çizgiler ve AI çekirdeği aynı değişkeni okur */
@property --sx {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}
@property --sy {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 50%;
}

.showcase {
    padding-top: calc(var(--header-height) + clamp(24px, 2.6vw, 40px));
    padding-bottom: clamp(64px, 8vw, 120px);
}

.showcase__intro {
    display: grid;
    gap: var(--space-5);
    margin-bottom: clamp(28px, 3vw, 44px);
}
.showcase__title {
    margin-top: var(--space-5);
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.showcase__lede {
    max-width: 46ch;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ---------- + düzeni (temel: dikey liste) ---------- */

.plus {
    --sx: 50%;
    --sy: 50%;
    --q-pad: clamp(24px, 2.6vw, 40px);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.plus__line,
.plus__core { display: none; }

.plus__line {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    background: var(--border-strong);
}
.plus__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-orange);
    transition: transform .7s var(--ease-plus);
}
.plus__line--top,
.plus__line--bottom {
    left: var(--sx);
    width: 1px;
    margin-left: -.5px;
}
.plus__line--top {
    top: 0;
    height: var(--sy);
    -webkit-mask-image: linear-gradient(transparent, #000 72px);
    mask-image: linear-gradient(transparent, #000 72px);
}
.plus__line--bottom {
    top: var(--sy);
    bottom: 0;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 72px), transparent);
}
.plus__line--left,
.plus__line--right {
    top: var(--sy);
    height: 1px;
    margin-top: -.5px;
}
.plus__line--left {
    left: 0;
    width: var(--sx);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px);
    mask-image: linear-gradient(90deg, transparent, #000 72px);
}
.plus__line--right {
    left: var(--sx);
    right: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent);
}
.plus__line--top::after { transform: scaleY(0); transform-origin: bottom; }
.plus__line--bottom::after { transform: scaleY(0); transform-origin: top; }
.plus__line--left::after { transform: scaleX(0); transform-origin: right; }
.plus__line--right::after { transform: scaleX(0); transform-origin: left; }

/* Merkez: logodaki "AI" rozeti — ekosistemin çekirdeği */
.plus__core {
    position: absolute;
    z-index: 3;
    left: var(--sx);
    top: var(--sy);
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    place-items: center;
    border-radius: 14px;
    background: var(--brand-gradient);
    box-shadow: 0 0 0 10px var(--surface), 0 0 0 11px var(--border);
    pointer-events: none;
}
.plus__core span {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ---------- Ürün alanı ---------- */

.q {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-7) 0;
    border-top: 1px solid var(--border-strong);
}
.q::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #F9F9F6;
    opacity: 0;
    transition: opacity .6s var(--ease-out);
}
.q > * { position: relative; }

.q__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.q__num {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    color: var(--brand-orange-ink);
}
.q__cat {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.q__name {
    margin: 10px 0 8px;
    font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
    transition: transform .6s var(--ease-plus), color .4s var(--ease-out);
}
.q__line {
    max-width: 36ch;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--text-secondary);
    transition: opacity .4s var(--ease-out);
}
.q__more {
    display: grid;
    grid-template-rows: 1fr;
}
.q__more-inner { min-height: 0; overflow: hidden; }
.q__desc {
    max-width: 42ch;
    margin-top: var(--space-4);
    font-size: .9688rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.q .link-cta { margin: var(--space-5) 0 4px; }

.q__visual {
    height: clamp(220px, 52vw, 300px);
    transition: opacity .5s var(--ease-out), transform .7s var(--ease-plus);
}

/* ---------- Ürün görselleri (sade line-art) ---------- */

.v {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.v text {
    font-family: var(--font-sans);
    font-size: 13px;
    fill: var(--text-secondary);
}
.v .v-t-strong { font-size: 14px; font-weight: 600; fill: var(--text-primary); }
.v .v-t-sm { font-size: 12.5px; fill: var(--text-muted); }
.v .v-t-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--text-muted); }
.v .v-t-accent { font-size: 13px; font-weight: 500; fill: var(--brand-orange-ink); }
.v .v-t-msg { font-size: 14.5px; fill: var(--text-primary); letter-spacing: -.01em; }
.v .v-t-badge { font-size: 11px; font-weight: 700; fill: #fff; }
.v .v-t-score { font-size: 36px; font-weight: 600; letter-spacing: -.04em; fill: var(--text-primary); }
.v .v-t-stars { font-size: 14px; letter-spacing: 2px; fill: var(--brand-orange); }

.v-soft { fill: none; stroke: var(--border-strong); stroke-width: 1.2; }
.v-faint { fill: none; stroke: var(--border); stroke-width: 1; }
.v-dash { stroke-dasharray: 3 6; }
.v-leader { fill: none; stroke: var(--brand-orange); stroke-width: 1.2; }
.v-ring { fill: var(--surface); stroke: var(--text-primary); stroke-width: 1.4; }
.v-fill-ink { fill: var(--text-primary); }
.v-fill-orange { fill: var(--brand-orange); }
.v-chip { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.v-chip--accent { stroke: var(--brand-orange); }
.v-card { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; }
.v-card--widget { stroke: var(--text-primary); stroke-width: 1.5; }
.v-dot { fill: var(--surface); stroke: var(--text-faint); stroke-width: 1.2; }
.v-dot--accent { fill: var(--brand-orange); stroke: var(--brand-orange); }
.v-bubble { fill: var(--surface); stroke: var(--text-primary); stroke-width: 1.4; }
.v-bubble--agent { fill: var(--brand-orange-tint); stroke: var(--brand-orange); }
.v-node-run { fill: var(--brand-orange); }
.v-node-next { fill: var(--surface); stroke: var(--text-faint); stroke-width: 1.4; stroke-dasharray: 3 3; }

.v-body { fill: var(--surface); stroke: var(--text-primary); stroke-width: 1.8; stroke-linejoin: round; }
.v-glass { fill: var(--surface-muted); stroke: var(--text-primary); stroke-width: 1.5; stroke-linejoin: round; }
.v-hair { fill: none; stroke: var(--text-faint); stroke-width: 1; stroke-linecap: round; }
.v-livery { fill: none; stroke: var(--brand-orange); stroke-width: 3.5; stroke-linecap: round; }
.v-wheel { fill: var(--surface); stroke: var(--text-primary); stroke-width: 1.8; }
.v-hub { fill: var(--surface-muted); stroke: var(--text-primary); stroke-width: 1.2; }

.v-plane { fill: var(--brand-orange); stroke: var(--graphite-900); stroke-width: 1; stroke-linejoin: round; }
.v-plane--muted { fill: var(--surface); stroke: var(--text-muted); }

.v-progress {
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p1));
    transition: stroke-dashoffset 1.1s var(--ease-out);
}
.v-flow {
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 1.6;
    stroke-dasharray: 6 18;
    opacity: 0;
}
.v-pulse {
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.v-detail { transition: opacity .45s var(--ease-out); }

@keyframes vPulse {
    0% { opacity: .6; transform: scale(.3); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes vNodePulse {
    0% { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.4); }
}
@keyframes vFlow { to { stroke-dashoffset: -24; } }

/* ==========================================================================
   02 · ONE ECOSYSTEM
   ========================================================================== */

.eco { border-top: 1px solid var(--border); }
.eco__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.eco .display { margin-bottom: var(--space-7); }
.eco__statement {
    max-width: 30ch;
    font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
    line-height: 1.35;
    letter-spacing: -.025em;
    color: var(--text-secondary);
}
.eco__statement b { font-weight: 600; color: var(--text-primary); }
.eco__statement sup {
    margin-left: 2px;
    font-family: var(--font-mono);
    font-size: .45em;
    letter-spacing: 0;
    color: var(--brand-orange-ink);
    vertical-align: super;
    line-height: 0;
}
.eco__note {
    max-width: 52ch;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.eco__stack { position: relative; }
.stack { width: 100%; height: auto; overflow: visible; }
.stack__guide { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 5; }
.stack__plate { fill: var(--surface); stroke: var(--text-primary); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--transition-base), stroke var(--transition-base); }
.stack__side { fill: var(--surface-sunken); stroke: var(--text-primary); stroke-width: 1.2; stroke-linejoin: round; }
.stack__leader { fill: none; stroke: var(--text-faint); stroke-width: 1; }
.stack__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--text-muted); }
.stack__v { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -.02em; fill: var(--text-primary); }
.stack__layer--core .stack__plate { stroke: var(--brand-orange); }
.stack__layer--core .stack__side { fill: var(--brand-orange-tint); stroke: var(--brand-orange); }
.stack__badge { fill: var(--brand-orange); }
.stack__ai { font-family: var(--font-sans); font-size: 26px; font-weight: 700; fill: #fff; }
.stack__layer:not(.stack__layer--core):hover .stack__plate { fill: var(--brand-orange-tint); stroke: var(--brand-orange); }

.js .eco__stack .stack__layer { opacity: 0; transform: translateY(-14px); }
.eco__stack.is-in .stack__layer {
    animation: stepIn .7s var(--ease-out) calc(.15s + (4 - var(--i)) * .12s) forwards;
}

.eco__caption {
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ==========================================================================
   03 · HOW TRAVELAI CONNECTS
   ========================================================================== */

.journey-sec {
    background-color: var(--surface-muted);
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.3px);
    background-size: 24px 24px;
    border-block: 1px solid var(--border);
}
.journey-sec__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-7);
    align-items: end;
    margin-bottom: clamp(56px, 7vw, 96px);
}
.journey-sec__lede { color: var(--text-secondary); max-width: 48ch; }
.journey-sec__disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-4);
    padding: 4px 8px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

.journey {
    --node: 13px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.journey::before,
.journey::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--node) / 2);
    height: 1px;
    background: var(--border-strong);
}
.journey::after {
    height: 2px;
    margin-top: -.5px;
    background: var(--brand-orange);
    transform-origin: left;
}
.js .journey::after { transform: scaleX(0); }
.journey.is-in::after { transform: scaleX(1); transition: transform 2.6s var(--ease-in-out) .2s; }

.journey__stop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: clamp(12px, 2vw, 28px);
}
.journey__node {
    position: relative;
    z-index: 1;
    width: var(--node); height: var(--node);
    margin-bottom: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--text-primary);
    background: var(--surface);
    transition: background-color .3s, border-color .3s;
}
.journey.is-in .journey__node {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    transition-delay: calc(.35s + var(--i) * .42s);
}
.journey__stop:last-child .journey__node { transform: scale(1.3); }
.journey__time {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    color: var(--text-muted);
}
.journey__label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
}
.journey__stop p {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.journey__product {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-primary);
}
.journey__product--core { border-color: var(--brand-orange); color: var(--brand-orange-ink); }

.js .journey__stop > :not(.journey__node) { opacity: 0; transform: translateY(8px); }
.journey.is-in .journey__stop > :not(.journey__node) {
    animation: stepIn .6s var(--ease-out) calc(.45s + var(--i) * .42s) forwards;
}

/* ==========================================================================
   04 · AI + HUMAN OPERATIONS (koyu bölüm)
   ========================================================================== */

.ops {
    position: relative;
    background: var(--graphite-900);
    color: var(--on-dark);
    overflow: hidden;
}
.ops::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-dark) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-dark) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: center top;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
    pointer-events: none;
}
.ops .container { position: relative; }
.ops__head { max-width: 980px; }
.ops .display { margin-bottom: var(--space-6); }
.ops__lede {
    max-width: 56ch;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--on-dark-muted);
}

.ledger { margin-top: clamp(56px, 7vw, 96px); }
.ledger__header,
.ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(96px, 12vw, 180px) minmax(0, 1fr);
    align-items: center;
}
.ledger__header {
    padding-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}
.ledger__header > :first-child { text-align: right; }
.ledger__handoff { text-align: center; color: var(--brand-orange); }

.ledger__rows { position: relative; }
.ledger__rows::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--graphite-600);
}
.ledger__row { border-top: 1px solid var(--border-dark); }
.ledger__row:last-child { border-bottom: 1px solid var(--border-dark); }
.ledger__sys,
.ledger__team {
    padding: clamp(18px, 2.2vw, 28px) 0;
    font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem);
    line-height: 1.35;
    letter-spacing: -.02em;
}
.ledger__sys { text-align: right; color: var(--on-dark-muted); }
.ledger__team { color: var(--on-dark); }
.ledger__axis {
    position: relative;
    height: 1px;
    margin-inline: 12px;
    background: repeating-linear-gradient(90deg, var(--graphite-600) 0 4px, transparent 4px 8px);
}
.ledger__axis::before,
.ledger__axis::after {
    content: '';
    position: absolute;
    top: 50%;
    border-radius: 3px;
}
.ledger__axis::before {
    left: 50%;
    width: 11px; height: 11px;
    margin: -5.5px 0 0 -5.5px;
    background: var(--graphite-900);
    border: 1.5px solid var(--brand-orange);
}
.ledger__axis::after {
    left: 0;
    width: 5px; height: 5px;
    margin-top: -2.5px;
    background: var(--on-dark-muted);
}
.ledger__row:hover .ledger__sys { color: var(--on-dark); }
.ledger__row:hover .ledger__axis::before { background: var(--brand-orange); }

.js .ledger__row { opacity: 0; transform: translateY(10px); }
.ledger.is-in .ledger__row { animation: stepIn .7s var(--ease-out) calc(.1s + var(--i) * .12s) forwards; }

/* ==========================================================================
   05 · TRAVEL TECHNOLOGY (wiring diagram)
   ========================================================================== */

.tech__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-7);
    align-items: end;
}
.tech__head .sec-label { grid-column: 1 / -1; }
.tech__lede { color: var(--text-secondary); max-width: 48ch; }

.wiring {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 320px) minmax(0, 1fr);
    margin-top: clamp(56px, 7vw, 104px);
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.3px);
    background-size: 24px 24px;
}
.wiring__col { display: grid; grid-template-rows: repeat(3, 1fr); }
.wire {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: clamp(110px, 11vw, 150px);
}
.wire__word {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: clamp(1.75rem, .9rem + 2.6vw, 3.75rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
    background: var(--surface);
    padding: 4px 6px;
    transition: color var(--transition-base);
}
.wiring__col--left .wire__word { align-items: flex-end; text-align: right; }
.wire__word small {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-mono);
    color: var(--text-muted);
}
.wire__word--muted { color: var(--text-faint); }
.wire:hover .wire__word--muted { color: var(--text-primary); }
.wire__lead {
    position: relative;
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: var(--border-strong);
}
.wire__lead::after {
    content: '';
    position: absolute;
    top: -3.5px;
    width: 8px; height: 8px;
    border-radius: 2px;
    border: 1.5px solid var(--text-primary);
    background: var(--surface);
}
.wiring__col--left .wire__lead::after { right: -4px; }
.wiring__col--right .wire__lead::after { left: -4px; }
.wire:hover .wire__lead { background: var(--brand-orange); }
.wire:hover .wire__lead::after { background: var(--brand-orange); border-color: var(--brand-orange); }

.wiring__core { position: relative; display: grid; place-items: center; }
.wiring__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.wiring__base,
.wiring__pulse {
    fill: none;
    vector-effect: non-scaling-stroke;
}
.wiring__base { stroke: var(--border-strong); stroke-width: 1; }
.wiring__pulse {
    stroke: var(--brand-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8 92;
    stroke-dashoffset: 8;
    opacity: 0;
}
.wiring.is-in .wiring__pulse {
    animation: wirePulse 3.2s var(--ease-in-out) calc(var(--i) * .55s) infinite;
}
@keyframes wirePulse {
    0% { stroke-dashoffset: 8; opacity: 0; }
    10% { opacity: 1; }
    70% { stroke-dashoffset: -92; opacity: 1; }
    75%, 100% { stroke-dashoffset: -92; opacity: 0; }
}

.wiring__plate {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(100%, 220px);
    padding: 22px 18px 16px;
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: 0 0 0 8px var(--surface), 0 0 0 9px var(--border);
}
.wiring__plate img { width: 150px; }
.wiring__plate span {
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ==========================================================================
   06 · CTA
   ========================================================================== */

.cta { border-top: 1px solid var(--border); }
.cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: end;
}
.cta .display { max-width: 15ch; }
.cta__lede {
    max-width: 50ch;
    margin-top: var(--space-6);
    font-size: var(--fs-lead);
    color: var(--text-secondary);
}
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5) var(--space-6);
    margin-top: var(--space-7);
}
.link-cta--plain .link-cta__icon { color: var(--text-primary); }

.arrival {
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.3px);
    background-size: 16px 16px;
}
.arrival__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}
.arrival__route {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: var(--space-5) 0;
    padding: var(--space-5) 0;
    border-block: 1px solid var(--border);
}
.arrival__route::before {
    content: '';
    position: absolute;
    left: 5px; top: 34px; bottom: 36px;
    width: 1px;
    background: linear-gradient(var(--border-strong), var(--brand-orange));
}
.arrival__route li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.arrival__route i {
    width: 11px; height: 11px;
    border-radius: 3px;
    border: 1.5px solid var(--text-primary);
    background: var(--surface);
}
.arrival__end { color: var(--text-primary) !important; font-weight: 500; }
.arrival__end i {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    margin-left: -8px;
    margin-right: -6px;
    border: 0;
    border-radius: 7px;
    background: var(--brand-gradient);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
    color: #fff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--graphite-900);
    color: var(--on-dark-muted);
    font-size: var(--fs-small);
}
.site-footer__ruler {
    height: 8px;
    background:
        linear-gradient(90deg, var(--brand-orange) 0 48px, transparent 48px) top / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--graphite-600) 0 1px, transparent 1px 16px) top / 100% 6px no-repeat;
}
.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
    padding: clamp(56px, 6vw, 80px) 0 var(--space-7);
}
.site-footer__logo img { height: 34px; width: auto; }
.site-footer__brand p { max-width: 34ch; margin-top: var(--space-5); line-height: 1.6; }
.site-footer__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    font-weight: 400;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: #75777E;
}
.site-footer__col ul,
.site-footer__col address { display: grid; gap: 10px; }
.site-footer__col a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--on-dark);
    transition: color var(--transition-fast);
}
.site-footer__col a span {
    font-family: var(--font-mono);
    font-size: .625rem;
    color: #75777E;
    transition: color var(--transition-fast);
}
.site-footer__col a:hover { color: var(--brand-orange); }
.site-footer__col a:hover span { color: var(--brand-orange); }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border-dark);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: .04em;
    color: #75777E;
}
.site-footer__meta { display: flex; gap: 10px; }
.site-footer__meta a:hover { color: var(--brand-orange); }
.site-footer :focus-visible { outline-color: var(--brand-orange); }

/* ==========================================================================
   Reveal
   ========================================================================== */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes stepIn { to { opacity: 1; transform: none; } }


.mw-unset {
    max-width: unset !important;
}