/* ==========================================================================
   AgenWebsite — High-End Mobile Menu Revamp
   --------------------------------------------------------------------------
   Scope   : <= 991px slide-in navigation panel only. Desktop nav untouched.
   Archetype: Soft Structuralism — airy white, soft diffused depth, brand accents.
   Motion  : spring cubic-bezier, staggered mask reveals, button press physics.
   Brand   : NO gradients (project rule) — solid/flat colors only.
   Loads   : after style.css + ask-ai.css so it overrides base nav styling.
   ========================================================================== */

/* Account name label — hidden on desktop compact pill, shown inside the panel. */
.btn-myaccount__label {
    display: none;
}

@media (max-width: 991px) {

    /* --- Local motion / color tokens ------------------------------------ */
    :root {
        --mm-spring: cubic-bezier(0.32, 0.72, 0, 1);
        --mm-tint: rgba(255, 102, 0, 0.08);
        --mm-ink: #0a1628;
        --mm-hairline: rgba(10, 22, 40, 0.06);
        --mm-recess: rgba(10, 22, 40, 0.035);
    }

    /* ====================================================================
       1. Hamburger → clean centered X, with a soft circular hit-target
       ==================================================================== */
    .mobile-toggle {
        position: relative;
        z-index: 1002;
    }

    .mobile-toggle::before {
        content: '';
        position: absolute;
        inset: -11px -12px;
        border-radius: 50%;
        background: rgba(10, 22, 40, 0.05);
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.35s var(--mm-spring), transform 0.35s var(--mm-spring);
        z-index: 1;
    }

    .mobile-toggle.active::before {
        opacity: 1;
        transform: scale(1);
    }

    .mobile-toggle span {
        position: relative;
        z-index: 2;
        transform-origin: center;
        transition: transform 0.45s var(--mm-spring), opacity 0.25s ease;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* ====================================================================
       2. Scrim — heavy-glass defocus (blur only on this fixed overlay)
       ==================================================================== */
    body.menu-open::before {
        background: rgba(10, 22, 40, 0.32);
        -webkit-backdrop-filter: blur(6px) saturate(120%);
        backdrop-filter: blur(6px) saturate(120%);
        transition: opacity 0.5s var(--mm-spring);
    }

    /* ====================================================================
       3. The panel — floating white island, GPU transform slide
       ==================================================================== */
    .nav-menu {
        width: min(360px, 88%);
        max-width: none;
        height: 100vh;
        height: 100dvh;
        right: 0;
        transform: translateX(100%);
        padding: 92px 14px calc(env(safe-area-inset-bottom, 0px) + 26px);
        background: #ffffff;
        border: none;
        border-radius: 28px 0 0 28px;
        box-shadow: -32px 0 80px -24px rgba(10, 22, 40, 0.28),
                    inset 1px 0 0 rgba(10, 22, 40, 0.04);
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        will-change: transform;
        transition: transform 0.55s var(--mm-spring);
    }

    .nav-menu.active {
        right: 0;
        transform: translateX(0);
    }

    /* ---- Panel header (rendered via ::before "Menu" label) ------------- */
    .nav-menu::before {
        content: 'Menu';
        padding: calc(env(safe-area-inset-top, 0px) + 28px) 60px 20px 30px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--mm-ink);
        background: #ffffff;
        border-bottom: 1px solid var(--mm-hairline);
        z-index: 2;
    }

    /* ====================================================================
       4. Nav rows — island cards, no divider lines (whitespace rhythm)
       ==================================================================== */
    .nav-list {
        padding: 0;
        gap: 4px;
    }

    .nav-item {
        width: 100%;
        border-bottom: none;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 15px 16px;
        font-size: 16.5px;
        font-weight: 600;
        letter-spacing: -0.005em;
        color: var(--mm-ink);
        border-radius: 16px;
        transition: background-color 0.35s var(--mm-spring),
                    color 0.35s var(--mm-spring),
                    transform 0.2s var(--mm-spring);
    }

    .nav-link:hover,
    .nav-link:active {
        color: var(--primary-color);
        background-color: var(--mm-tint);
    }

    .nav-link:active {
        transform: scale(0.98);
    }

    /* ---- Dropdown chevron → nested circular badge (button-in-button) --- */
    .has-dropdown > .nav-link::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        font-size: 12px;
        color: var(--mm-ink);
        background: var(--mm-recess);
        border-radius: 50%;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
        transition: transform 0.4s var(--mm-spring),
                    background-color 0.35s ease,
                    color 0.35s ease;
    }

    .has-dropdown.active > .nav-link {
        color: var(--primary-color);
        background: var(--mm-tint);
    }

    .has-dropdown.active > .nav-link::after {
        transform: rotate(180deg);
        background: var(--primary-color);
        color: #ffffff;
    }

    /* ====================================================================
       5. Sub-menu — recessed inset tray (nested architecture)
       ==================================================================== */
    .dropdown-menu {
        background: var(--mm-recess);
        border-radius: 16px;
        padding: 0 6px;
        margin: 0;
        box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.05);
        transition: max-height 0.45s var(--mm-spring),
                    opacity 0.35s ease,
                    padding 0.35s var(--mm-spring),
                    margin 0.35s var(--mm-spring);
    }

    .has-dropdown.active .dropdown-menu {
        max-height: 640px;
        padding: 8px 6px;
        margin: 6px 0 8px;
    }

    .dropdown-item {
        padding: 11px 14px;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-muted);
        border-radius: 12px;
        transition: background-color 0.3s ease,
                    color 0.3s ease,
                    box-shadow 0.3s ease,
                    transform 0.2s ease;
    }

    .dropdown-item:hover,
    .dropdown-item:active {
        background: #ffffff;
        color: var(--primary-color);
        box-shadow: 0 6px 18px -8px rgba(10, 22, 40, 0.18);
    }

    .dropdown-item:active {
        transform: scale(0.985);
    }

    /* ====================================================================
       6. Action block — search field + primary CTA
       ==================================================================== */
    .nav-menu > .search-btn {
        margin: 26px 0 0;
        width: 100%;
    }

    .nav-menu > .ask-ai-btn,
    .nav-menu > .btn-get-started,
    .nav-menu > .user-account-dropdown {
        margin: 14px 0 0;
        width: 100%;
    }

    /* ---- Search presented as a premium field --------------------------- */
    .search-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 8px;
        background: var(--mm-recess);
        border: none;
        border-radius: 16px;
        box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.04);
        color: var(--text-muted);
        font-size: 15px;
        font-weight: 500;
        transition: background-color 0.3s ease, transform 0.2s var(--mm-spring);
    }

    .search-btn:hover {
        background: rgba(10, 22, 40, 0.05);
        color: var(--text-muted);
    }

    .search-btn:active {
        transform: scale(0.99);
    }

    .search-btn i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        font-size: 15px;
        color: var(--mm-ink);
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px -6px rgba(10, 22, 40, 0.25);
    }

    .search-btn::after {
        content: 'Cari produk & dokumentasi\2026';
        color: var(--text-muted);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- Primary CTA (logged out) — soft glow + trailing icon circle --- */
    .btn-get-started {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 8px 8px 22px;
        background-color: var(--primary-color);
        border: none;
        border-radius: 18px;
        font-size: 15.5px;
        font-weight: 600;
        text-align: left;
        box-shadow: 0 14px 30px -12px rgba(255, 102, 0, 0.6),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25);
        transition: transform 0.2s var(--mm-spring), box-shadow 0.35s ease;
    }

    .btn-get-started:hover {
        background-color: var(--primary-color);
        transform: none;
        box-shadow: 0 18px 38px -12px rgba(255, 102, 0, 0.7),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25);
    }

    .btn-get-started:active {
        transform: scale(0.97);
    }

    .btn-get-started::after {
        content: '\f061';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        font-size: 13px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        transition: transform 0.35s var(--mm-spring);
    }

    .btn-get-started:hover::after,
    .btn-get-started:active::after {
        transform: translate(2px, -1px) scale(1.06);
    }

    /* ---- Account button (logged in) — button-in-button avatar + caret -- */
    .user-account-dropdown {
        border-top: none;
        padding-top: 0;
        margin-top: 14px;
    }

    .btn-myaccount {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 8px;
        background-color: var(--primary-color);
        border: none;
        border-radius: 18px;
        box-shadow: 0 14px 30px -12px rgba(255, 102, 0, 0.6),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25);
        transition: transform 0.2s var(--mm-spring), box-shadow 0.35s ease;
    }

    .btn-myaccount:hover {
        background-color: var(--primary-color);
        border: none;
        box-shadow: 0 18px 38px -12px rgba(255, 102, 0, 0.7),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25);
    }

    .btn-myaccount:active {
        transform: scale(0.97);
    }

    .btn-myaccount .user-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #ffffff;
        padding: 2px;
        box-shadow: 0 2px 8px rgba(10, 22, 40, 0.2);
    }

    .btn-myaccount__label {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-myaccount i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        font-size: 12px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 50%;
    }

    /* User account submenu — recessed tray, matching main dropdowns */
    .user-dropdown-menu {
        background: var(--mm-recess);
        border-radius: 16px;
        margin-top: 10px;
        box-shadow: inset 0 1px 2px rgba(10, 22, 40, 0.05);
    }

    .user-account-dropdown.active .user-dropdown-menu {
        padding: 8px 6px;
    }

    .user-menu-link {
        border-radius: 12px;
        margin: 0;
    }

    .user-menu-link:hover {
        background: #ffffff;
        color: var(--primary-color);
    }

    /* ====================================================================
       7. Staggered mask reveal — items fade/blur up on open
       ==================================================================== */
    .nav-menu .nav-item,
    .nav-menu > .search-btn,
    .nav-menu > .ask-ai-btn,
    .nav-menu > .btn-get-started,
    .nav-menu > .user-account-dropdown {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
        transition: opacity 0.6s var(--mm-spring),
                    transform 0.6s var(--mm-spring),
                    filter 0.6s var(--mm-spring);
    }

    .nav-menu.active .nav-item,
    .nav-menu.active > .search-btn,
    .nav-menu.active > .ask-ai-btn,
    .nav-menu.active > .btn-get-started,
    .nav-menu.active > .user-account-dropdown {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    .nav-menu.active .nav-list .nav-item:nth-child(1) { transition-delay: 0.12s; }
    .nav-menu.active .nav-list .nav-item:nth-child(2) { transition-delay: 0.17s; }
    .nav-menu.active .nav-list .nav-item:nth-child(3) { transition-delay: 0.22s; }
    .nav-menu.active .nav-list .nav-item:nth-child(4) { transition-delay: 0.27s; }
    .nav-menu.active .nav-list .nav-item:nth-child(5) { transition-delay: 0.32s; }
    .nav-menu.active .nav-list .nav-item:nth-child(6) { transition-delay: 0.37s; }
    .nav-menu.active .nav-list .nav-item:nth-child(7) { transition-delay: 0.42s; }
    .nav-menu.active .nav-list .nav-item:nth-child(8) { transition-delay: 0.47s; }

    .nav-menu.active > .search-btn { transition-delay: 0.5s; }
    .nav-menu.active > .ask-ai-btn { transition-delay: 0.55s; }
    .nav-menu.active > .btn-get-started { transition-delay: 0.58s; }
    .nav-menu.active > .user-account-dropdown { transition-delay: 0.58s; }
}

/* ========================================================================
   Reduced motion — respect the user's OS preference
   ======================================================================== */
@media (prefers-reduced-motion: reduce) and (max-width: 991px) {

    .nav-menu {
        transition: transform 0.2s ease;
    }

    .nav-menu .nav-item,
    .nav-menu > .search-btn,
    .nav-menu > .ask-ai-btn,
    .nav-menu > .btn-get-started,
    .nav-menu > .user-account-dropdown {
        transform: none !important;
        filter: none !important;
        transition: opacity 0.2s ease !important;
        transition-delay: 0s !important;
    }

    .mobile-toggle span,
    .mobile-toggle::before,
    .has-dropdown > .nav-link::after,
    .btn-get-started::after {
        transition-duration: 0.15s;
    }
}