/* ==========================================================================
   TravelAI — Responsive
   ≥1024 + hover : hareketli + vitrini (iki eksenli genişleme)
   ≥768          : statik 2x2 vitrin (tablet / dokunmatik)
   <960          : mobil header + menü
   <768          : tek kolon düzenler
   ========================================================================== */

/* ---------- Mobil ürün geçiş listesi ---------- */

.sc-jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-4);
    border-top: 1px solid var(--border);
}
.sc-jump a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 52px;
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.sc-jump a:nth-child(odd) { border-right: 1px solid var(--border); }
.sc-jump a:nth-child(even) { padding-left: 14px; }
.sc-jump span {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    font-weight: 400;
    color: var(--brand-orange-ink);
}

/* ==========================================================================
   ≥768 — Statik 2x2 + düzeni
   ========================================================================== */

@media (min-width: 768px) {
    .sc-jump { display: none; }

    .showcase__intro {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        column-gap: var(--space-7);
    }

    .plus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
    }
    .plus__line { display: block; }
    .plus__core { display: grid; }
    .q { padding: var(--q-pad); border-top: 0; }
    .q__visual { height: clamp(220px, 28vw, 300px); }
}

/* ==========================================================================
   ≥1024 + hover — Hareketli + vitrini
   Hover / klavye odağı :has() ile merkezi (--sx, --sy) kaydırır; grid
   izleri, + çizgileri ve AI çekirdeği aynı değerle birlikte hareket eder.
   ========================================================================== */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .plus {
        --q-content-w: 290px;
        height: clamp(520px, calc(100vh - 330px), 700px);
        height: clamp(520px, calc(100svh - 330px), 700px);
        grid-template-columns: var(--sx) minmax(0, 1fr);
        grid-template-rows: var(--sy) minmax(0, 1fr);
        transition: --sx .72s var(--ease-plus), --sy .72s var(--ease-plus);
    }
    .plus:has(.q--1:is(:hover, :focus-within)) { --sx: 64%; --sy: 64%; }
    .plus:has(.q--2:is(:hover, :focus-within)) { --sx: 36%; --sy: 64%; }
    .plus:has(.q--3:is(:hover, :focus-within)) { --sx: 64%; --sy: 36%; }
    .plus:has(.q--4:is(:hover, :focus-within)) { --sx: 36%; --sy: 36%; }

    /* Aktif ürüne komşu + kolları turuncuya döner */
    .plus:has(.q--1:is(:hover, :focus-within)) :is(.plus__line--top, .plus__line--left)::after,
    .plus:has(.q--2:is(:hover, :focus-within)) :is(.plus__line--top, .plus__line--right)::after,
    .plus:has(.q--3:is(:hover, :focus-within)) :is(.plus__line--bottom, .plus__line--left)::after,
    .plus:has(.q--4:is(:hover, :focus-within)) :is(.plus__line--bottom, .plus__line--right)::after {
        transform: none;
        transition-delay: .12s;
    }

    .plus__core { transition: transform .6s var(--ease-plus); }
    .plus:has(.q:is(:hover, :focus-within)) .plus__core { transform: scale(1.1); }

    .q {
        display: block;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    /* İçerik dış köşeye, görsel merkeze (+'ya) yaslanır */
    .q__content {
        position: absolute;
        z-index: 1;
        width: var(--q-content-w);
    }
    .q--1 .q__content { top: var(--q-pad); left: var(--q-pad); }
    .q--2 .q__content { top: var(--q-pad); right: var(--q-pad); text-align: right; }
    .q--3 .q__content { bottom: var(--q-pad); left: var(--q-pad); }
    .q--4 .q__content { bottom: var(--q-pad); right: var(--q-pad); text-align: right; }
    :is(.q--2, .q--4) .q__meta { justify-content: flex-end; }
    :is(.q--2, .q--4) :is(.q__line, .q__desc) { margin-left: auto; }

    .q__name { transform-origin: 0 0; }
    .q--2 .q__name { transform-origin: 100% 0; }
    .q--3 .q__name { transform-origin: 0 100%; }
    .q--4 .q__name { transform-origin: 100% 100%; }

    .q__visual {
        position: absolute;
        top: var(--q-pad);
        bottom: var(--q-pad);
        width: max(44%, calc(100% - var(--q-content-w) - var(--q-pad) * 3));
        height: auto;
    }
    :is(.q--1, .q--3) .q__visual { right: calc(var(--q-pad) + 8px); }
    :is(.q--2, .q--4) .q__visual { left: calc(var(--q-pad) + 8px); }
    .q--1 .q__visual { transform-origin: 100% 100%; }
    .q--2 .q__visual { transform-origin: 0 100%; }
    .q--3 .q__visual { transform-origin: 100% 0; }
    .q--4 .q__visual { transform-origin: 0 0; }

    .q__more {
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows .6s var(--ease-plus), opacity .3s var(--ease-out);
    }

    .v-detail { opacity: 0; }
    .v-progress { stroke-dashoffset: calc(100 - var(--p0)); }

    /* ----- Aktif ürün ----- */
    .q:is(:hover, :focus-within)::before { opacity: 1; }
    .q:is(:hover, :focus-within) .q__name { transform: scale(1.08); }
    .q:is(:hover, :focus-within) .q__more {
        grid-template-rows: 1fr;
        opacity: 1;
        transition: grid-template-rows .6s var(--ease-plus) .08s, opacity .5s var(--ease-out) .22s;
    }
    .q:is(:hover, :focus-within) .v-detail { opacity: 1; transition-delay: .3s; }
    .q:is(:hover, :focus-within) .v-detail--late { transition-delay: .55s; }
    .q:is(:hover, :focus-within) .v-progress { stroke-dashoffset: calc(100 - var(--p1)); transition-delay: .2s; }
    .q:is(:hover, :focus-within) .v-pulse { animation: vPulse 2.6s var(--ease-out) .3s infinite; }
    .q:is(:hover, :focus-within) .v-pulse--node { animation-name: vNodePulse; animation-duration: 1.8s; }
    .q:is(:hover, :focus-within) .v-flow { opacity: 1; animation: vFlow 1.4s linear infinite; }

    /* ----- Geri çekilen ürünler: ad okunur kalır, detay sadeleşir ----- */
    .plus:has(.q:is(:hover, :focus-within)) .q:not(:hover, :focus-within) .q__name { color: var(--text-secondary); }
    .plus:has(.q:is(:hover, :focus-within)) .q:not(:hover, :focus-within) .q__line { opacity: .5; }
    .plus:has(.q:is(:hover, :focus-within)) .q:not(:hover, :focus-within) .q__visual { opacity: .16; transform: scale(.82); }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    .plus { --q-content-w: 350px; }
}

/* ==========================================================================
   <1200
   ========================================================================== */

@media (max-width: 1199px) {
    .site-header__inner { gap: var(--space-5); }
}

/* ==========================================================================
   <1024
   ========================================================================== */

@media (max-width: 1023px) {
    .eco__grid { grid-template-columns: 1fr; }
    .eco__stack { max-width: 560px; }

    .journey-sec__head,
    .tech__head { grid-template-columns: 1fr; gap: var(--space-5); }

    .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); }
    .journey::before,
    .journey::after { display: none; }
    .journey__stop { border-top: 1px solid var(--border-strong); padding-top: 0; }
    .journey__node { margin-top: -7px; }

    .cta__grid { grid-template-columns: 1fr; align-items: start; }
    .arrival { max-width: 420px; }

    .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   <960 — Mobil header
   ========================================================================== */

@media (max-width: 959px) {
    :root {
        --header-height: 64px;
        --header-height-compact: 64px;
    }
    .site-header__logo img,
    .site-header.is-scrolled .site-header__logo img { height: 30px; }
    .site-header__cta { display: none; }

    .nav-toggle {
        display: grid;
        place-content: center;
        gap: 6px;
        width: 44px; height: 44px;
        margin-left: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        transition: border-color var(--transition-fast);
    }
    .nav-toggle:hover { border-color: var(--border-strong); }
    .nav-toggle__bar {
        display: block;
        width: 18px; height: 1.5px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform var(--transition-base);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        flex-direction: column;
        justify-content: space-between;
        gap: var(--space-7);
        padding: var(--space-5) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
    }
    .site-header.is-nav-open { background: var(--surface); border-bottom-color: var(--border); }
    .site-header.is-nav-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s;
    }

    .site-nav__list { flex-direction: column; gap: 0; }
    .site-nav__list li { border-bottom: 1px solid var(--border); }
    .site-nav__link {
        display: flex;
        gap: 14px;
        padding: 18px 0;
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: -.035em;
        color: var(--text-primary);
    }
    .site-nav__num { font-size: var(--fs-mono-sm); }
    .site-nav__link::after { display: none; }

    .site-nav__drawer { display: block; }
    .site-nav__label {
        margin-bottom: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: var(--tracking-mono);
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .site-nav__products {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
        margin-bottom: var(--space-6);
    }
    .site-nav__products a {
        display: flex;
        gap: 8px;
        align-items: baseline;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        font-weight: 500;
    }
    .site-nav__products span {
        font-family: var(--font-mono);
        font-size: var(--fs-mono-sm);
        color: var(--brand-orange-ink);
    }
}

/* ==========================================================================
   <768 — Tek kolon
   ========================================================================== */

@media (max-width: 767px) {
    .showcase { padding-top: calc(var(--header-height) + 24px); }
    .q:first-of-type { border-top: 0; padding-top: var(--space-5); }

    .journey { grid-template-columns: 1fr; row-gap: 0; padding-left: 4px; }
    .journey::before,
    .journey::after {
        display: block;
        left: 10px; right: auto;
        top: 6px; bottom: 6px;
        width: 1px; height: auto;
    }
    .journey::after { width: 2px; margin: 0 0 0 -.5px; transform-origin: top; }
    .js .journey::after { transform: scaleY(0); }
    .journey.is-in::after { transform: scaleY(1); }
    .journey__stop {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 6px;
        padding: 0 0 var(--space-6);
        border-top: 0;
    }
    .journey__stop > * { grid-column: 2; }
    .journey__product { justify-self: start; }
    .journey__node { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; }
    .journey__stop:last-child .journey__node { transform: none; }

    .ledger__header { display: none; }
    .ledger__rows::before { display: none; }
    .ledger__row {
        grid-template-columns: 1fr;
        padding: 20px 0 20px 18px;
        position: relative;
    }
    .ledger__row::before {
        content: '';
        position: absolute;
        left: 0; top: 26px; bottom: 26px;
        width: 1px;
        background: linear-gradient(var(--on-dark-muted), var(--brand-orange));
    }
    .ledger__sys, .ledger__team { padding: 0; text-align: left; }
    .ledger__sys::before,
    .ledger__team::before {
        display: block;
        margin-bottom: 4px;
        font-family: var(--font-mono);
        font-size: .625rem;
        letter-spacing: var(--tracking-mono);
        text-transform: uppercase;
    }
    .ledger__sys::before { content: 'SYSTEM HANDLES'; color: var(--on-dark-muted); }
    .ledger__team::before { content: 'YOUR TEAM DECIDES'; color: var(--brand-orange); }
    .ledger__axis { display: none; }
    .ledger__team { margin-top: 14px; }

    .wiring {
        grid-template-columns: 1fr;
        background: none;
    }
    .wiring__core { order: -1; padding-bottom: var(--space-6); }
    .wiring__svg { display: none; }
    .wiring__plate { width: 100%; max-width: none; flex-direction: row; justify-content: space-between; box-shadow: none; padding: 16px 18px; }
    .wiring__plate img { width: 120px; }
    .wiring__col { grid-template-rows: none; }
    .wire { min-height: 0; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .wiring__col--left .wire { flex-direction: row-reverse; justify-content: flex-end; }
    .wiring__col--left .wire__word { align-items: flex-start; text-align: left; }
    .wire__word { padding: 0; font-size: clamp(1.75rem, 8vw, 2.5rem); background: none; }
    .wire__lead { flex: 0 0 24px; order: -1; }
    .wiring__col--left .wire__lead { order: 0; }
    .wiring__col--left .wire__lead::after { right: auto; left: -4px; }

    .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
    .site-footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   <480
   ========================================================================== */

@media (max-width: 479px) {
    .sc-jump a { font-size: .9688rem; }
    .cta__actions { flex-direction: column; align-items: flex-start; }
    .site-footer__top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .v-pulse, .v-flow, .wiring__pulse { display: none; }
}