/* ============================================================
   MODE APLIKASI MOBILE - Singgih Suzuki BSD & Serpong
   Karakter mobile: BOTTOM BAR "TOMBOL PIANO" (key aktif terangkat)
   Semua aturan DIKUNCI di dalam media query.
   Di desktop file ini tidak berefek apa pun.
   ============================================================ */

.sg-appbar { display: none; }

@media (max-width: 900px) {

    /* --- dasar rasa aplikasi --- */
    html { -webkit-text-size-adjust: 100%; }
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        overscroll-behavior-y: none;
        -webkit-tap-highlight-color: transparent;
    }
    a, button, select, input, .sg-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 */
    .sg-actions { width: 100%; }
    .sg-actions .sg-btn {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* float WA lama disembunyikan - bulatan hijau di rail menggantikan */
    .sg-wa-float { display: none; }

    /* --- bottom bar "tombol piano": key aktif terangkat ke atas --- */
    .sg-appbar {
        display: flex;
        align-items: flex-end;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding: 8px 10px env(safe-area-inset-bottom, 0px);
        background: var(--sg-sand);
        border-top: 4px solid var(--sg-sun);
        box-shadow: 0 -10px 28px rgba(20, 36, 28, .16);
    }
    .sg-appbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 100%;
        border-radius: 14px 14px 0 0;
        color: var(--sg-mute);
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .02em;
        text-decoration: none;
        transition: transform .2s ease, background .2s ease;
    }
    .sg-appbar a i.bx {
        font-size: 1.35rem;
        line-height: 1;
        pointer-events: none;
    }
    .sg-appbar a:active { background: var(--sg-mist); }

    /* aktif = key pine gelap yang mengangkat diri dari bar */
    .sg-appbar a.sg-on {
        background: var(--sg-pine-deep);
        color: var(--sg-sun);
        height: calc(100% + 14px);
        padding-bottom: 14px;
        transform: translateY(-2px);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 20px rgba(8, 37, 29, .35);
    }
    .sg-appbar a.sg-on span { color: var(--sg-sun); }

    /* slot WA: key hijau yang juga sedikit timbul */
    .sg-appbar a.sg-wa {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #fff;
        height: calc(100% + 8px);
        padding-bottom: 8px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -5px 14px rgba(37, 211, 102, .45);
    }
    .sg-appbar a.sg-wa span { color: #fff; }
}