/* ============================================================
   MODE APLIKASI MOBILE - Kiki Suzuki Tangerang
   Karakter mobile: DOCK PIL MELAYANG (floating pill dock)
   Semua aturan DIKUNCI di dalam media query.
   Di desktop file ini tidak berefek apa pun.
   ============================================================ */

.kw-appbar { display: none; }

@media (max-width: 900px) {

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

    /* float WA lama disembunyikan - tombol emas di dock menggantikan */
    .kw-wa-float { display: none; }

    /* --- dock pil melayang, lepas dari tepi layar --- */
    .kw-appbar {
        display: flex;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        z-index: 90;
        width: min(430px, 94vw);
        height: 64px;
        padding: 6px;
        background: rgba(19, 78, 74, .96);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid rgba(251, 191, 36, .28);
        border-radius: 999px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .38);
        align-items: center;
        gap: 2px;
    }
    .kw-appbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        height: 100%;
        text-decoration: none;
        color: rgba(255, 255, 255, .65);
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .02em;
        border-radius: 999px;
        transition: background .2s ease, color .2s ease;
    }
    .kw-appbar a i.bx { font-size: 1.3rem; line-height: 1; }
    .kw-appbar a:active { background: rgba(255, 255, 255, .14); }
    .kw-appbar a.kw-on {
        color: var(--kw-gold);
        background: rgba(251, 191, 36, .17);
    }

    /* slot WA: pil emag gelap-kontras di ujung kanan dock */
    .kw-appbar a.kw-wa {
        flex: 1.15;
        background: linear-gradient(135deg, #fbbf24, #d97706);
        color: #14241c;
        box-shadow: 0 10px 22px rgba(251, 191, 36, .42);
    }
    .kw-appbar a.kw-wa span { color: #14241c; }
}