/* ============================================================
   MODE APLIKASI MOBILE - Salsa Suzuki
   Karakter mobile: BOTTOM BAR GELAP MATERIAL (navy + pill oranye)
   Semua aturan DIKUNCI di dalam media query.
   Di desktop file ini tidak berefek apa pun.
   ============================================================ */

.cs-appbar { display: none; }

@media (max-width: 920px) {

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

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

    /* CTA hero full-width ala app */
    .cs-hero .cs-actions { width: 100%; }
    .cs-hero .cs-actions .cs-btn {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* float WA lama disembunyikan - tombol squircle oranye menggantikan */
    .cs-wa-float { display: none; }

    /* --- bottom bar gelap ala Material You --- */
    .cs-appbar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        padding: 8px 10px env(safe-area-inset-bottom, 0px);
        background: var(--cs-navy-deep);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 32px rgba(23, 37, 84, .38);
        align-items: stretch;
        gap: 4px;
    }
    .cs-appbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: rgba(219, 234, 254, .62);
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .02em;
        border-radius: 999px;
        transition: background .2s ease, color .2s ease;
    }
    .cs-appbar a i.bx { font-size: 1.3rem; line-height: 1; transition: transform .15s ease; }
    .cs-appbar a:active i.bx { transform: scale(.88); }

    /* aktif = pill oranye penuh di belakang item */
    .cs-appbar a.cs-on {
        background: var(--cs-orange);
        color: var(--cs-navy-deep);
        box-shadow: 0 6px 18px rgba(251, 146, 60, .42);
    }
    .cs-appbar a.cs-on span { color: var(--cs-navy-deep); }

    /* slot Salsa (WA): squircle oranye mengambang dari bar */
    .cs-appbar a.cs-wa span { color: rgba(219, 234, 254, .85); }
    .cs-appbar a.cs-wa i.bx {
        width: 46px; height: 46px;
        margin-top: -30px;
        background: linear-gradient(135deg, #fb923c, #ea580c);
        border-radius: 16px;
        display: grid; place-items: center;
        font-size: 1.5rem; color: #fff;
        box-shadow: 0 10px 24px rgba(234, 88, 12, .5), 0 0 0 5px var(--cs-navy-deep);
    }
}