/* ============================================================
   MODE APLIKASI MOBILE - Vira Suzuki Gading Serpong
   Semua aturan DIKUNCI di dalam media query.
   Di desktop file ini tidak berefek apa pun.
   ============================================================ */

.v-appbar { display: none; }

/* tombol menu "more" + dropdown nav: hanya mobile */
.nav__more, .nav__drop { display: none; }

@media (max-width: 768px) {

    /* --- dasar rasa aplikasi --- */
    html { -webkit-text-size-adjust: 100%; }
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        overscroll-behavior-y: none;
        -webkit-tap-highlight-color: transparent;
    }
    a, button, select, input, .filter__item, .slide-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    img { -webkit-user-drag: none; user-select: none; }

    /* cegah iOS zoom saat fokus form */
    input, select, textarea { font-size: 16px !important; }

    /* tombol hero jadi full-width ala app */
    .home .button {
        display: flex !important;
        width: 100%;
        margin: 0 0 12px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .home__title { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.25; }

    /* kartu promo lebih app-like */
    .promo__card { border-radius: 22px; }
    .btn-whatsapp { padding: 15px 24px; font-size: 1rem; }

    /* quiz & popup naik di atas appbar */
    .qz-btn { padding: 15px 24px; font-size: 1rem; }
    .promo-popup { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: 66vh; }
    .promo-trigger { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

    /* float WA lama disembunyikan - sudah ada tab WA di appbar */
    .wa-float { display: none; }

    /* --- header: nav list diganti tombol more + dropdown --- */
    .nav__list { display: none; }
    .nav__more {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-right: -8px;
        padding: 0;
        border: none;
        background: rgba(255,255,255,.14);
        color: #fff;
        font-size: 1.7rem;
        border-radius: 12px;
        cursor: pointer;
        transition: background .2s ease;
    }
    .nav__more i { pointer-events: none; }
    .nav__more:active { background: rgba(255,255,255,.28); }
    .nav__drop {
        display: none;
        position: fixed;
        top: calc(66px + env(safe-area-inset-top, 0px));
        left: 10px;
        right: 10px;
        z-index: 999;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 18px 44px rgba(0,0,0,.22);
        padding: 10px;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .18s ease, transform .18s ease;
        pointer-events: none;
    }
    .nav__drop.open {
        display: grid;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .nav__drop a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 4px;
        text-decoration: none;
        color: var(--dark);
        font-size: .68rem;
        font-weight: 600;
        border-radius: 12px;
        text-align: center;
    }
    .nav__drop a i.bx { font-size: 1.4rem; line-height: 1; color: var(--primary); }
    .nav__drop a.v-on { background: var(--light); color: var(--primary); }

    /* --- tombol promo jadi FAB kado bulat (icon only) --- */
    .promo-trigger {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        right: 14px;
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        gap: 0; /* label teks jadi flex item kosong - tanpa ini icon bergeser kiri */
        line-height: 1;
        font-size: 0; /* sembunyikan label teks */
        box-shadow: 0 10px 26px rgba(199,67,67,.5);
    }
    .promo-trigger i.bx {
        font-size: 1.75rem;
        margin: 0;
        line-height: 1;
        pointer-events: none;
    }

    /* --- bottom app bar ala native --- */
    .v-appbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9995;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 0 6px env(safe-area-inset-bottom, 0px);
        background: rgba(255,255,255,.92);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 -8px 24px rgba(0,0,0,.08);
        align-items: stretch;
    }
    .v-appbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #9aa0a6;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .02em;
        position: relative;
        min-height: 44px;
    }
    .v-appbar a i.bx { font-size: 1.35rem; line-height: 1; transition: transform .15s ease; }
    .v-appbar a:active i.bx { transform: scale(.88); }
    .v-appbar a.v-on { color: var(--primary); }
    .v-appbar a.v-on::before {
        content: "";
        position: absolute;
        top: 0; width: 34px; height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--primary);
    }

    /* slot WA tengah menonjol */
    .v-appbar a.v-wa span { color: #128c7e; }
    .v-appbar a.v-wa i.bx {
        width: 46px; height: 46px;
        margin-top: -26px;
        background: linear-gradient(135deg,#25d366,#128c7e);
        border-radius: 50%;
        display: grid; place-items: center;
        font-size: 1.5rem; color: #fff;
        box-shadow: 0 8px 18px rgba(37,211,102,.45), 0 0 0 5px rgba(255,255,255,.92);
    }
}