/* Latar bergerak (perak gelap + hitam, minimalis) dan animasi muncul saat scroll */
html{background:#050507}
body:not(:has(#bgVideo)){background-color:transparent!important;position:relative;isolation:isolate}
body:not(:has(#bgVideo))::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;will-change:transform;
background:radial-gradient(40% 35% at 25% 20%,rgba(150,158,172,.15),transparent 70%),radial-gradient(45% 40% at 78% 75%,rgba(112,120,134,.13),transparent 70%),radial-gradient(35% 30% at 70% 15%,rgba(90,98,112,.10),transparent 70%),linear-gradient(135deg,#040406 0%,#0a0c11 50%,#040406 100%);
animation:zvxdrift 28s ease-in-out infinite alternate}
@keyframes zvxdrift{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-2%,3%,0) scale(1.03)}}
body:not(:has(#bgVideo)) .bg{background:transparent!important}
body:not(:has(#bgVideo)) .bg::after{display:none!important}
.zvx-r{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.zvx-r.zvx-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){body::before{animation:none!important}.zvx-r{opacity:1;transform:none;filter:none;transition:none}}

/* ===== Layar loading: logo ZX.png di tengah + cincin berputar + garis progres ===== */
html{--zvx-d:3s}html.zvx-fast{--zvx-d:1s}
html:not(.zvx-ready){overflow:hidden!important}
html::before,html::after{content:"";position:fixed;z-index:2147483647}
html::before{inset:0;background-color:#050507;
background-image:url("zavinix-logo.png"),linear-gradient(90deg,#8b6a2c,#F5C065,#fff3cf),radial-gradient(60% 50% at 50% 46%,#141722 0%,#08090d 62%,#030304 100%);
background-repeat:no-repeat;background-position:center,center calc(50% + 150px),center;background-size:min(40vw,160px) auto,0 3px,cover;
animation:zvxbar var(--zvx-d) cubic-bezier(.3,.6,.3,1) forwards,zvxhide .4s calc(var(--zvx-d) + 3s) forwards}
html::after{left:50%;top:50%;width:min(58vw,230px);height:min(58vw,230px);border-radius:50%;border:2px solid rgba(245,192,101,.14);border-top-color:#F5C065;border-right-color:rgba(245,192,101,.5);box-shadow:0 0 34px rgba(245,192,101,.12);
animation:zvxspin 1.1s linear infinite,zvxhide .4s calc(var(--zvx-d) + 3s) forwards}
html.zvx-ready::before,html.zvx-ready::after{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s}
html.zvx-leave::before,html.zvx-leave::after{transition:opacity .18s ease}
html.zvx-leave::before{animation:zvxbar2 .7s linear forwards}
@keyframes zvxspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes zvxbar{to{background-size:min(40vw,160px) auto,min(40vw,160px) 3px,cover}}
@keyframes zvxbar2{from{background-size:min(40vw,160px) auto,0 3px,cover}to{background-size:min(40vw,160px) auto,min(40vw,160px) 3px,cover}}
@keyframes zvxhide{to{opacity:0;visibility:hidden}}

/* ===== Stok paket ===== */
.zvx-stk{margin:8px auto 4px;text-align:center;font-size:.78rem;font-weight:700;color:#34d399;letter-spacing:.2px}
.zvx-stk.out{color:#f87171}
.zvx-out{opacity:.6;filter:grayscale(1)}
.zvx-out .buy,.zvx-out .mc-buy{pointer-events:none;background:#3a3d45!important;color:#a6a9b2!important;box-shadow:none!important;border-color:#4a4d57!important}