/* ==========================================================================
   Eksper.com — responsive
   ========================================================================== */

/* ---------- Geniş tablet / küçük masaüstü ---------- */
@media (max-width: 1180px) {
    :root { --header-h: 148px; }
    .panel--auto .panel__content   { width: min(40vw, 440px); }
    .panel--estate .panel__content { width: min(38vw, 420px); }
    .visual-car    { width: 36vw; bottom: 4%; }
    .visual-estate { width: 24vw; right: var(--gutter); }
    .panel__desc { font-size: .9375rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
    :root { --header-h: 72px; --nav-h: 72px; }

    /* Header: kompakt, sticky, hamburger */
    .site-header {
        position: sticky; top: 0; z-index: 60;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--line);
    }
    .site-header__brand { justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); }
    .logo { font-size: 1.6rem; }
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-right: -10px; padding: 0;
        background: none; border: 0; cursor: pointer;
    }
    .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
        display: block; width: 22px; height: 2px; background: var(--ink);
        transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease;
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle__bars::before { transform: translateY(-7px); }
    .nav-toggle__bars::after { transform: translateY(7px); width: 14px; }
    .nav-toggle.open .nav-toggle__bars { background: transparent; }
    .nav-toggle.open .nav-toggle__bars::before { transform: rotate(45deg); }
    .nav-toggle.open .nav-toggle__bars::after { transform: rotate(-45deg); width: 22px; }

    .nav {
        position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 55;
        background: var(--background); border: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        opacity: 0; visibility: hidden; transform: translate3d(0, -8px, 0);
        transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
    }
    .nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .nav.is-stuck { box-shadow: none; }
    .nav__inner { display: block; height: auto; padding: 24px var(--gutter); }
    .nav__mini { display: none; }
    .nav__list { flex-direction: column; gap: 0; }
    .nav__link {
        display: block; padding: 20px 0; border-bottom: 1px solid var(--line);
        font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
    }
    .nav__link::after { bottom: -1px; }
    body.nav-open { overflow: hidden; }

    /* Vitrin: iki güçlü blok, üst üste */
    .showcase { height: auto; max-height: none; display: flex; flex-direction: column; border-bottom: 0; }
    .showcase__divider { display: none; }
    .panel, .showcase[data-focus] .panel { position: relative; inset: auto; }
    .panel--auto, .showcase[data-focus] .panel--auto {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
        padding-bottom: 48px;
    }
    .panel--estate, .showcase[data-focus] .panel--estate {
        clip-path: none; margin-top: -48px; padding-top: 48px;
    }
    .panel { display: flex; flex-direction: column; }
    .panel__bg { inset: 0; }
    .showcase[data-focus] .panel .panel__bg { transform: none; }
    .panel__content, .panel--auto .panel__content, .panel--estate .panel__content {
        position: relative; inset: auto; width: auto; max-width: 560px;
        padding: 56px var(--gutter) 0;
    }
    .panel--estate .panel__content { align-self: flex-end; padding-bottom: 64px; }
    .panel__visual, .visual-car, .visual-estate {
        position: relative; inset: auto; width: min(86%, 520px); margin: 40px var(--gutter) 24px;
    }
    .panel--auto .panel__visual { order: 1; margin-top: 8px; margin-bottom: 40px; }
    .panel--estate .panel__visual { order: -1; align-self: flex-end; width: min(70%, 380px); margin-top: 48px; margin-bottom: 0; }
    .panel.is-collapsed .panel__more { opacity: 1; visibility: visible; transform: none; }
    .panel.is-collapsed .panel__title,
    .panel.is-active .panel__title { transform: none; }
    .panel.is-collapsed .panel__visual { opacity: 1; }
    .panel.is-collapsed .v-callouts { opacity: 1; }

    /* Bölümler */
    .platform__head { display: flex; flex-direction: column; align-items: flex-start; }
    .platform__head .lead { justify-self: auto; max-width: 620px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
    .steps::before, .steps::after { display: none; }
    .step { border-top: 2px solid var(--line); }
    .step::after {
        content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 40%; background: var(--step-color);
    }
    .principles { grid-template-columns: 1fr; border-top: 0; margin-top: 56px; }
    .principle, .principle + .principle { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
    :root { --header-h: 64px; --nav-h: 64px; }
    .logo { font-size: 1.4rem; }
    .panel__content, .panel--auto .panel__content, .panel--estate .panel__content { padding-top: 44px; }
    .panel--estate .panel__content { text-align: left; align-self: stretch; }
    .panel--estate .panel__eyebrow, .panel--estate .panel__tags { justify-content: flex-start; }
    .panel__title { font-size: clamp(2.5rem, 12vw, 3.25rem); }
    .panel__visual, .visual-car { width: calc(100% - var(--gutter) * 2); }
    .panel--estate .panel__visual { width: 74%; align-self: flex-start; }
    .panel__visual text { font-size: 15px; }
    .cta { width: 100%; justify-content: space-between; }

    .ledger thead { display: none; }
    .ledger table, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: 100%; }
    .ledger tbody tr { padding: 22px 0; border-bottom: 1px solid var(--line); }
    .ledger tbody th, .ledger tbody td { padding: 0; border: 0; }
    .ledger tbody th { margin-bottom: 12px; }
    .ledger tbody td:nth-of-type(1), .ledger tbody td:nth-of-type(2) { position: relative; padding: 4px 0 4px 20px; font-size: 1rem; }
    .ledger tbody td:nth-of-type(1)::before, .ledger tbody td:nth-of-type(2)::before {
        content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 8px;
    }
    .ledger tbody td:nth-of-type(1)::before { background: var(--accent-auto); }
    .ledger tbody td:nth-of-type(2)::before { background: var(--accent-estate); }
    .ledger tbody td.ledger__shared { padding-left: 0; }
    .ledger tbody td.ledger__shared::before { display: none; }
    .ledger tbody tr:hover { background: none; }

    .steps { grid-template-columns: 1fr; row-gap: 40px; }

    .crossover__split { grid-template-columns: 1fr; }
    .crossover__slash { width: auto; height: 2px; margin: 8px 0; transform: none; background: linear-gradient(90deg, var(--brand-green), var(--brand-yellow), var(--brand-orange), var(--brand-blue)); }
    .crossover__link--estate { align-items: flex-start; text-align: left; }
    .crossover__link--estate .crossover__go::after { transform-origin: left; }

    .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .site-footer__bottom { flex-direction: column; gap: 4px; }
}