/* ==========================================================================
   08 — RESPONSIVE
   Semua media query dikumpulkan di file terakhir supaya urutan cascade
   selalu menang dan mudah dilacak. Breakpoint: 1080 / 940 / 780 / 600 / 420.
   ========================================================================== */

/* ------------------------------------------------------------- <= 1080px */
@media (max-width: 1080px) {
    :root { --kn-header-h: 76px; }

    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    }

    .site-footer__col--social {
        grid-column: 2 / -1;
    }

    .social { justify-content: flex-start; }
}

/* -------------------------------------------------------------- <= 940px */
@media (max-width: 940px) {
    /* Hero jadi satu kolom: teks di atas, mockup di bawah dan dipusatkan. */
    .hero { padding-block-start: 1.25rem; }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2rem, 6vw, 3rem);
        text-align: center;
    }

    .hero__body { margin-inline: auto; }
    .hero__rule { margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__visual { min-height: 0; }
    .mockup { width: min(100%, 540px); }
    .mockup__device { --tilt-y: -9deg; }

    /* Feature strip 2 kolom; divider vertikal hanya di kolom kedua. */
    .feature-strip__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: clamp(1.5rem, 4vw, 2rem);
    }

    .feature + .feature::before { display: none; }

    .feature:nth-child(even)::before {
        display: block;
        inset-block: 10%;
    }

    /* Process 2x2, konektor horizontal disembunyikan. */
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .process__link { display: none; }
}

/* -------------------------------------------------------------- <= 780px */
@media (max-width: 780px) {
    .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Satu testimonial per slide. */
    .slider__slide { flex-basis: 100%; }

    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__col--social { grid-column: auto; }

    .cta-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kn-space-4);
        text-align: start;
    }

    .cta-banner .btn { align-self: stretch; }
}

/* -------------------------------------------------------------- <= 600px */
@media (max-width: 600px) {
    :root {
        --kn-section-y: 2.75rem;
        --kn-header-h: 70px;
    }

    .hero__title { font-size: clamp(2rem, 9.5vw, 2.75rem); }
    .hero__body { font-size: var(--kn-fs-base); }

    /* Feature strip jadi daftar horizontal (ikon di kiri, teks di kanan). */
    .feature-strip__list { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }

    .feature {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding-inline: 4px;
        text-align: start;
    }

    .feature:nth-child(even)::before { display: none; }

    .feature + .feature { padding-block-start: 20px; }

    .feature + .feature::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(20, 60, 130, 0.14), transparent);
    }

    .feature__title br { display: none; }
    .feature__text { max-width: none; }
    .icon-tile { width: 46px; height: 46px; }

    /* Paket ditumpuk; kartu unggulan tidak lagi digeser. */
    .packages { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
    .package--featured {
        margin-block: 0;
        padding-block: clamp(1.5rem, 2.5vw, 2rem);
    }

    .process { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }

    .slider__controls { gap: var(--kn-space-3); }

    .to-top { inset-block-end: 16px; inset-inline-end: 16px; }
    body.has-kn-widget .to-top { inset-block-end: 82px; } /* 16px + 54px trigger + 12px jarak */
}

/* -------------------------------------------------------------- <= 420px */
@media (max-width: 420px) {
    .work-grid { grid-template-columns: minmax(0, 1fr); }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }

    /* Ruang di header dihemat dengan menyembunyikan wordmark (mark saja —
       lazim di phone), BUKAN dengan menghilangkan tombol CTA. Tombol itu
       jalur konversi utama, jadi justru harus tetap terlihat. */
    .site-header .logo__type { display: none; }
    .logo__mark { width: 38px; height: 38px; }

    .site-header__actions .btn {
        --btn-px: 14px;
        letter-spacing: 0.04em;
    }

    /* Wordmark tetap tampil di dalam drawer dan footer. */
    .drawer .logo__type,
    .site-footer .logo__type { display: flex; }
}

/* ==========================================================================
   MENU — 3 tingkat
   --------------------------------------------------------------------------
   Phone dan tablet punya kebutuhan berbeda, jadi tidak dipukul rata:

   >= 1000px  desktop  nav horizontal penuh (lihat 03-layout.css)
   640–999px  tablet   panel turun dari header, grid 2 kolom, tidak menutup
                       seluruh layar — tablet punya ruang lebar yang sia-sia
                       kalau dipakai drawer samping 360px
   < 640px    phone    drawer samping full-height, 1 kolom, tap target besar
   ========================================================================== */

/* -------------------------------------------------- TABLET: panel dropdown */
@media (min-width: 640px) and (max-width: 999px) {
    .drawer {
        /* panel menggantung di bawah header, bukan menempel ke tepi layar */
        display: block;
        padding: calc(var(--kn-header-h) + 6px) var(--kn-gutter) var(--kn-gutter);
    }

    .drawer__panel {
        width: 100%;
        max-width: 620px;
        height: auto;
        max-height: calc(100vh - var(--kn-header-h) - 32px);
        max-height: calc(100dvh - var(--kn-header-h) - 32px);
        margin-inline: auto;
        padding: 20px;
        border-radius: var(--kn-r-xl);
        /* muncul dengan turun + skala, bukan meluncur dari samping */
        transform: translateY(-16px) scale(0.97);
        opacity: 0;
        transform-origin: top center;
    }

    .drawer.is-open .drawer__panel {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Dua kolom: 6 item jadi 3 baris, panel tetap pendek. */
    .drawer__nav ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .drawer__nav a { padding: 14px 16px; }

    /* Logo tidak perlu diulang — sudah terlihat di header di belakang panel. */
    .drawer__head { justify-content: flex-end; }
    .drawer__head .logo { display: none; }

    .drawer .btn--block { max-width: 260px; margin-inline: auto; }
}

/* ------------------------------------------------- PHONE: drawer samping */
@media (max-width: 639px) {
    .drawer__panel {
        width: min(340px, 92vw);
        gap: var(--kn-space-4);
    }

    /* Tap target minimal 48px + tipografi sedikit lebih besar agar
       nyaman dijangkau jempol. */
    .drawer__nav a {
        padding: 15px 16px;
        font-size: var(--kn-fs-sm);
    }

    .drawer__nav ul { gap: 2px; }

    /* Tombol CTA didorong ke bawah panel — zona paling mudah dijangkau. */
    .drawer .btn--block { margin-block-start: auto; }
}

/* ==========================================================================
   TOUCH — perbesar semua target sentuh ke minimal 44px
   ========================================================================== */

@media (pointer: coarse) {
    .nav-toggle { width: 46px; height: 46px; }
    .drawer__close { width: 44px; height: 44px; }
    .slider__arrow { width: 46px; height: 46px; }
    .social__link { width: 44px; height: 44px; }
    /* Dot diperbesar & dijarakkan, bukan diberi padding-trick yang rapuh.
       Navigasi utama di sentuh tetap swipe + panah 46px. */
    .slider__dots { gap: 15px; }
    .slider__dot { width: 12px; height: 12px; }
    .slider__dot.is-active { width: 28px; }
    .to-top { width: 48px; height: 48px; }
    .site-footer__links a { padding-block: 4px; }
}

/* ==========================================================================
   LANDSCAPE PENDEK — phone diputar (tinggi <= 500px)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .drawer__panel {
        padding-block: 14px;
        gap: var(--kn-space-3);
    }

    .drawer__nav a { padding-block: 10px; }
    .drawer__head .logo__mark { width: 34px; height: 34px; }

    /* Mockup laptop memakan seluruh layar saat landscape — dipendekkan. */
    .mockup { width: min(100%, 400px); }
}

/* --------------------------------------------------- pointer kasar (touch) */
/* Efek hover/tilt tidak berguna di perangkat sentuh: overlay portofolio
   ditampilkan permanen dengan intensitas rendah. */
@media (hover: none) {
    .work-card__overlay { opacity: 1; background: linear-gradient(0deg, rgba(7, 24, 56, 0.55), transparent 60%); }
    .work-card__view { transform: none; }
    .glass-lift:hover { transform: none; }
}

/* ------------------------------------------------------------ layar besar */
@media (min-width: 1400px) {
    :root { --kn-container: 1200px; }
    .hero__visual { margin-inline-end: -2vw; }
}