/* PWA UI - animasi lembut, modern */
:root{--pwa-ease:cubic-bezier(.22,.9,.28,1)}
.pwa-sheet{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:99990;max-width:460px;margin:0 auto;background:#fff;border-radius:22px;padding:16px;box-shadow:0 18px 48px -12px rgba(30,27,90,.45),0 0 0 1px rgba(64,67,210,.08);display:flex;gap:14px;align-items:center;transform:translateY(140%);opacity:0;transition:transform .55s var(--pwa-ease),opacity .4s ease}
.pwa-sheet.show{transform:none;opacity:1}
.pwa-sheet .pwa-ic{flex:0 0 56px;height:56px;border-radius:15px;background:#f2f2ff;padding:6px;box-shadow:inset 0 0 0 1px rgba(64,67,210,.12)}
.pwa-sheet .pwa-ic img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.pwa-sheet .pwa-tx{flex:1;min-width:0}
.pwa-sheet .pwa-tx b{display:block;font-size:15px;color:#1f1d4d;margin-bottom:2px}
.pwa-sheet .pwa-tx span{font-size:12.5px;color:#6b6a8f;line-height:1.35;display:block}
.pwa-sheet .pwa-act{display:flex;flex-direction:column;gap:6px}
.pwa-btn{border:0;border-radius:12px;padding:9px 16px;font-size:13px;font-weight:700;background:linear-gradient(135deg,#4043D2,#6a5cf0);color:#fff;transition:transform .15s,box-shadow .2s;box-shadow:0 8px 16px -8px rgba(64,67,210,.8)}
.pwa-btn:active{transform:scale(.95)}
.pwa-btn.ghost{background:transparent;color:#8a89ab;box-shadow:none;font-weight:600;padding:4px 8px}
.pwa-toast{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));z-index:99991;transform:translate(-50%,-160%);background:#1f1d4d;color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;display:flex;gap:10px;align-items:center;box-shadow:0 12px 28px -10px rgba(0,0,0,.5);transition:transform .5s var(--pwa-ease);max-width:92vw}
.pwa-toast.show{transform:translate(-50%,0)}
.pwa-toast i{width:8px;height:8px;border-radius:50%;background:#f59e0b;animation:pwaPulse 1.4s ease-in-out infinite}
.pwa-toast.ok i{background:#22c55e;animation:none}
.pwa-toast button{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
@keyframes pwaPulse{50%{opacity:.35;transform:scale(.7)}}
/* splash saat dibuka sebagai aplikasi */
#pwa-splash{position:fixed;inset:0;z-index:100000;background:linear-gradient(160deg,#4043D2,#311851);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s ease,visibility .5s}
#pwa-splash.hide{opacity:0;visibility:hidden}
#pwa-splash .lg{width:96px;height:96px;border-radius:26px;background:#fff;padding:12px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5);animation:pwaPop .7s var(--pwa-ease) both,pwaFloat 2.6s ease-in-out .7s infinite}
#pwa-splash .lg img{width:100%;height:100%;object-fit:contain}
#pwa-splash .bar{width:110px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
#pwa-splash .bar:after{content:"";display:block;height:100%;width:40%;border-radius:4px;background:#fff;animation:pwaBar 1.1s ease-in-out infinite}
@keyframes pwaPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes pwaFloat{50%{transform:translateY(-6px)}}
@keyframes pwaBar{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
/* transisi halaman lembut */
/* PENTING: jangan pakai transform/filter pada <body> - membuat navbar position:fixed ikut ter-scroll. Cukup opacity. */
body.pwa-standalone{animation:pwaFade .35s ease;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
body.pwa-standalone .appBottomMenu{position:fixed!important;left:0;right:0;bottom:0;z-index:1030;padding-bottom:env(safe-area-inset-bottom);min-height:calc(56px + env(safe-area-inset-bottom));transform:translateZ(0)}
body.pwa-standalone #appCapsule{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.pwa-leaving{opacity:0;transition:opacity .18s ease}
@keyframes pwaFade{from{opacity:0}to{opacity:1}}
body.pwa-standalone .appBottomMenu .item{transition:transform .2s var(--pwa-ease)}
body.pwa-standalone .appBottomMenu .item:active{transform:scale(.92)}
.pwa-ios-steps{display:none}
@media (min-width:768px){.pwa-sheet{bottom:24px}}
@media (prefers-reduced-motion:reduce){.pwa-sheet,.pwa-toast,#pwa-splash,body.pwa-standalone,body.pwa-leaving{transition:none!important;animation:none!important}#pwa-splash .lg,#pwa-splash .bar:after{animation:none!important}}

/* latar saat transisi halaman (hindari layar hitam) */
html.pwa-standalone-root{background:#f3f4f8}