/* =========================================================
   IKETAN.ID
   Global Responsive Stylesheet
   ---------------------------------------------------------
   Scope:
   - Global layout responsiveness
   - Global typography responsiveness
   - Navbar / mobile navigation
   - Buttons
   - Footer
   - Forms
   - Global reusable primitives

   Base styles:
   /assets/css/global.css

   IMPORTANT:
   Page-specific responsive rules DO NOT belong here.
   ========================================================= */


/* =========================================================
   BREAKPOINT SYSTEM
   ---------------------------------------------------------
   > 1180px  : Desktop
   <= 1180px : Small desktop / laptop
   <= 1024px : Tablet landscape
   <= 900px  : Mobile navigation starts
   <= 768px  : Tablet portrait
   <= 576px  : Mobile
   <= 380px  : Small mobile
   ========================================================= */


/* =========================================================
   01. SMALL DESKTOP / LAPTOP
   <= 1180px
   ========================================================= */

@media (max-width: 1180px) {

    /* -----------------------------------------------------
       Root Tokens
       ----------------------------------------------------- */

    :root {
        --container-padding: 22px;
    }


    /* -----------------------------------------------------
       Navbar
       Sedikit rapat supaya menu tetap muat.
       ----------------------------------------------------- */

    .navbar-menu {
        gap: 2px;
    }


    .navbar-link {
        padding-inline: 12px;
    }


    .navbar-actions {
        gap: 10px;
    }


    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(0, 0.7fr)
            minmax(0, 0.8fr)
            minmax(0, 0.8fr);

        gap: 36px;
    }
}


/* =========================================================
   02. TABLET LANDSCAPE
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

    /* -----------------------------------------------------
       Root Tokens
       ----------------------------------------------------- */

    :root {
        --container-padding: 22px;

        --navbar-height: 80px;

        --space-4xl: 84px;
        --space-5xl: 112px;
    }


    /* -----------------------------------------------------
       Global Typography

       Oleo Script secara visual cukup besar.
       Kita turunkan sedikit sebelum masuk mobile.
       ----------------------------------------------------- */

    h1 {
        font-size: clamp(
            3.5rem,
            7vw,
            5rem
        );
    }


    h2 {
        font-size: clamp(
            2.8rem,
            5vw,
            3.75rem
        );
    }


    h3 {
        font-size: clamp(
            2rem,
            3.5vw,
            2.75rem
        );
    }


    /* -----------------------------------------------------
       Section
       ----------------------------------------------------- */

    .section {
        padding-block: 84px;
    }


    .section-sm {
        padding-block: 60px;
    }


    .section-lg {
        padding-block: 112px;
    }


    /* -----------------------------------------------------
       Section Heading
       ----------------------------------------------------- */

    .section-heading {
        margin-bottom: 42px;
    }


    /* -----------------------------------------------------
       Navbar Logo
       ----------------------------------------------------- */

    .navbar-logo {
        height: 49px;
    }


    /* -----------------------------------------------------
       Footer

       Brand mengambil baris penuh.
       Link groups jadi 3 kolom di bawahnya.
       ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            44px
            32px;
    }


    .footer-brand {
        grid-column: 1 / -1;

        max-width: 520px;
    }


    .footer-description {
        max-width: 480px;
    }
}


/* =========================================================
   03. MOBILE NAVIGATION BREAKPOINT
   <= 900px
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       Navbar

       Di breakpoint ini:
       - Desktop CTA hilang
       - Hamburger muncul
       - Menu berubah menjadi full viewport panel
       ----------------------------------------------------- */

    .navbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /*
       CTA desktop tidak perlu muncul karena
       CTA akan tersedia di dalam mobile menu.
    */

    .navbar-actions > .btn {
        display: none;
    }


    /*
       Mobile menu memakai fixed positioning supaya
       tidak tergantung flow navbar.

       Top mengikuti tinggi navbar global.
    */

    .navbar-menu {
        position: fixed;

        top: var(--navbar-height);
        left: 0;

        z-index: var(--z-menu);

        width: 100%;

        height:
            calc(
                100dvh -
                var(--navbar-height)
            );

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        overflow-y: auto;

        padding:
            30px
            var(--container-padding)
            38px;

        border-top:
            1px solid
            var(--maroon-08);

        background-color:
            var(--iketan-cream);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translate3d(
                0,
                -14px,
                0
            );

        transition:
            opacity var(--duration-normal)
            var(--ease-smooth),
            visibility var(--duration-normal)
            var(--ease-smooth),
            transform var(--duration-normal)
            var(--ease-smooth);
    }


    /*
       State dibuka oleh main.js
    */

    .navbar-menu.is-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }


    /*
       Mobile navigation sengaja menggunakan
       Oleo Script supaya menu terasa lebih brand-oriented.

       UI kecil lainnya tetap pakai Mulish.
    */

    .navbar-link {
        position: relative;

        width: 100%;

        min-height: auto;

        justify-content: flex-start;

        padding:
            12px
            2px;

        border-radius: 0;

        color: var(--iketan-maroon);

        font-family: var(--font-heading);

        font-size:
            clamp(
                2.15rem,
                6vw,
                3.2rem
            );

        font-weight: 400;

        line-height: 1.1;

        background-color: transparent;
    }


    .navbar-link:hover {
        color: var(--iketan-red);

        background-color: transparent;
    }


    /*
       Active state tidak pakai pill lagi.
       Kita kasih indicator kecil di kanan.
    */

    .navbar-link.active,
    .navbar-link[aria-current="page"] {
        color: var(--iketan-maroon);

        font-weight: 400;
    }


    .navbar-link.active::after,
    .navbar-link[aria-current="page"]::after {
        content: "";

        width: 8px;
        height: 8px;

        margin-left: auto;

        flex-shrink: 0;

        border-radius: 50%;

        background-color:
            var(--iketan-yellow);
    }


    /* -----------------------------------------------------
       Mobile CTA
       ----------------------------------------------------- */

    .navbar-mobile-cta {
        display: block;

        margin-top: 28px;

        padding-top: 28px;

        border-top:
            1px solid
            var(--iketan-border);
    }


    .navbar-mobile-cta .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       Hamburger Interaction
       ----------------------------------------------------- */

    .navbar-toggle:hover {
        background-color:
            var(--maroon-06);
    }


    /*
       Sedikit larger hit-area sudah didapat dari
       width/height 46px.
    */


    /* -----------------------------------------------------
       Prevent menu flash when closed
       ----------------------------------------------------- */

    .navbar-menu:not(.is-open) {
        overscroll-behavior: none;
    }
}


/* =========================================================
   04. TABLET PORTRAIT
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       Root
       ----------------------------------------------------- */

    :root {
        --container-padding: 20px;

        --navbar-height: 76px;
    }


    /* -----------------------------------------------------
       Body
       ----------------------------------------------------- */

    body {
        font-size: 15px;
    }


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

    h1 {
        font-size:
            clamp(
                3.25rem,
                10vw,
                4.6rem
            );
    }


    h2 {
        font-size:
            clamp(
                2.7rem,
                8vw,
                3.7rem
            );
    }


    h3 {
        font-size:
            clamp(
                2rem,
                6vw,
                2.65rem
            );
    }


    h4 {
        font-size: 2rem;
    }


    h5 {
        font-size: 1.6rem;
    }


    /* -----------------------------------------------------
       Paragraph
       ----------------------------------------------------- */

    p {
        line-height: 1.72;
    }


    /* -----------------------------------------------------
       Sections
       ----------------------------------------------------- */

    .section {
        padding-block: 72px;
    }


    .section-sm {
        padding-block: 52px;
    }


    .section-lg {
        padding-block: 92px;
    }


    /* -----------------------------------------------------
       Section Heading
       ----------------------------------------------------- */

    .section-heading {
        max-width: 680px;

        margin-bottom: 36px;
    }


    .section-eyebrow {
        margin-bottom: 14px;
    }


    .section-title {
        margin-bottom: 14px;
    }


    .section-description {
        max-width: 580px;
    }


    /* -----------------------------------------------------
       Buttons
       ----------------------------------------------------- */

    .btn {
        min-height: 48px;

        padding:
            12px
            19px;

        font-size: 0.84rem;
    }


    /* -----------------------------------------------------
       Navbar
       ----------------------------------------------------- */

    .navbar-logo {
        height: 46px;
    }


    /* -----------------------------------------------------
       Generic Cards
       Kurangi radius sedikit untuk viewport kecil.
       ----------------------------------------------------- */

    .card {
        border-radius: 20px;
    }


    /* -----------------------------------------------------
       Forms
       ----------------------------------------------------- */

    .form-grid {
        gap: 20px;
    }


    .form-control {
        min-height: 50px;

        padding:
            12px
            14px;
    }


    textarea.form-control {
        min-height: 140px;
    }


    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .site-footer {
        padding-top: 64px;
    }


    .footer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            40px
            30px;

        padding-bottom: 52px;
    }


    .footer-brand {
        grid-column: 1 / -1;
    }


    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }
}


/* =========================================================
   05. MOBILE
   <= 576px
   ========================================================= */

@media (max-width: 576px) {

    /* -----------------------------------------------------
       Root
       ----------------------------------------------------- */

    :root {
        --container-padding: 18px;

        --navbar-height: 72px;

        --radius-lg: 18px;
        --radius-xl: 24px;
        --radius-2xl: 30px;
    }


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

       Karena Oleo punya karakter lebar,
       heading mobile jangan terlalu gigantic.
       ----------------------------------------------------- */

    h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            );

        line-height: 0.98;
    }


    h2 {
        font-size:
            clamp(
                2.55rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.6rem
            );
    }


    h4 {
        font-size: 1.85rem;
    }


    h5 {
        font-size: 1.5rem;
    }


    /* -----------------------------------------------------
       Sections
       ----------------------------------------------------- */

    .section {
        padding-block: 64px;
    }


    .section-sm {
        padding-block: 46px;
    }


    .section-lg {
        padding-block: 78px;
    }


    /* -----------------------------------------------------
       Section Heading
       ----------------------------------------------------- */

    .section-heading {
        margin-bottom: 32px;
    }


    .section-eyebrow {
        gap: 6px;

        margin-bottom: 12px;

        font-size: 0.68rem;

        letter-spacing: 0.1em;
    }


    .section-title {
        margin-bottom: 13px;
    }


    .section-description {
        font-size: 0.94rem;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       Navbar
       ----------------------------------------------------- */

    .navbar-logo {
        height: 43px;
    }


    .navbar-toggle {
        width: 44px;
        height: 44px;
    }


    .navbar-menu {
        padding:
            24px
            var(--container-padding)
            30px;
    }


    .navbar-link {
        padding-block: 10px;

        font-size:
            clamp(
                2.1rem,
                10vw,
                2.75rem
            );
    }


    .navbar-mobile-cta {
        margin-top: 22px;

        padding-top: 22px;
    }


    /* -----------------------------------------------------
       Buttons
       ----------------------------------------------------- */

    .btn {
        min-height: 47px;

        padding:
            11px
            18px;
    }


    /*
       Jangan otomatis full-width semua button.
       Hanya class .btn-block yang full width.

       Ini penting supaya CTA horizontal
       masih bisa dipakai di halaman tertentu.
    */


    /* -----------------------------------------------------
       Badge
       ----------------------------------------------------- */

    .badge {
        min-height: 26px;

        padding:
            5px
            10px;

        font-size: 0.68rem;
    }


    /* -----------------------------------------------------
       Forms
       ----------------------------------------------------- */

    .form-grid {
        gap: 18px;
    }


    .form-group {
        gap: 7px;
    }


    .form-label {
        font-size: 0.8rem;
    }


    .form-control {
        min-height: 49px;

        padding:
            12px
            14px;

        border-radius: 14px;

        font-size: 0.88rem;
    }


    textarea.form-control {
        min-height: 130px;
    }


    /* -----------------------------------------------------
       Footer
       ----------------------------------------------------- */

    .site-footer {
        padding-top: 56px;
    }


    .footer-grid {
        grid-template-columns: 1fr;

        gap: 34px;

        padding-bottom: 44px;
    }


    .footer-brand {
        grid-column: auto;

        max-width: none;
    }


    .footer-logo {
        max-width: 145px;

        margin-bottom: 18px;
    }


    .footer-description {
        max-width: 360px;
    }


    .footer-title {
        margin-bottom: 14px;
    }


    .footer-links {
        gap: 10px;
    }


    .footer-bottom {
        padding-block: 20px;
    }


    /* -----------------------------------------------------
       Social
       ----------------------------------------------------- */

    .social-link {
        width: 40px;
        height: 40px;
    }


    .social-link img,
    .social-link svg {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   06. SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

    /* -----------------------------------------------------
       Root
       ----------------------------------------------------- */

    :root {
        --container-padding: 15px;
    }


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

    h1 {
        font-size:
            clamp(
                2.75rem,
                14vw,
                3.55rem
            );
    }


    h2 {
        font-size:
            clamp(
                2.4rem,
                12vw,
                3.1rem
            );
    }


    /* -----------------------------------------------------
       Navbar
       ----------------------------------------------------- */

    .navbar-logo {
        height: 40px;
    }


    .navbar-toggle {
        width: 42px;
        height: 42px;
    }


    .navbar-toggle-line,
    .navbar-toggle-line::before,
    .navbar-toggle-line::after {
        width: 20px;
    }


    .navbar-link {
        font-size:
            clamp(
                2rem,
                10vw,
                2.45rem
            );
    }


    /* -----------------------------------------------------
       Buttons
       ----------------------------------------------------- */

    .btn {
        min-height: 46px;

        padding-inline: 16px;

        font-size: 0.8rem;
    }


    /* -----------------------------------------------------
       Section
       ----------------------------------------------------- */

    .section {
        padding-block: 58px;
    }


    .section-lg {
        padding-block: 70px;
    }
}


/* =========================================================
   07. TOUCH DEVICES
   ========================================================= */

/*
   Desktop hover effect kadang terasa aneh
   pada device touchscreen.

   Kita hanya disable transform hover,
   bukan warna/button feedback.
*/

@media (hover: none) and (pointer: coarse) {

    .btn:hover {
        transform: none;
    }


    .card-hover:hover {
        transform: none;

        box-shadow: none;
    }


    .social-link:hover {
        transform: none;
    }


    .link-arrow:hover
    .link-arrow-icon {
        transform: none;
    }
}


/* =========================================================
   08. LANDSCAPE MOBILE
   ========================================================= */

/*
   Kalau user buka mobile landscape,
   mobile navigation bisa jadi terlalu pendek.

   Karena menu punya overflow-y:auto,
   CTA tetap bisa dicapai.
*/

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 500px
) {

    .navbar-menu {
        padding-top: 18px;

        padding-bottom: 24px;
    }


    .navbar-link {
        padding-block: 6px;

        font-size: 2rem;
    }


    .navbar-mobile-cta {
        margin-top: 16px;

        padding-top: 16px;
    }
}


/* =========================================================
   09. REDUCED TRANSPARENCY FALLBACK
   ========================================================= */

/*
   Browser/device tertentu bisa punya keterbatasan
   backdrop-filter.

   Ini fallback kalau blur navbar tidak tersedia.
*/

@supports not (
    backdrop-filter: blur(14px)
) {

    .navbar {
        background-color:
            rgba(
                255,
                248,
                241,
                0.98
            );
    }
}