/* public/xv-polish.css — [NEW 2026-09-30] pasangan /xv-polish.js. Mengikuti token warna web utama (--vio/--cy/--glass/--line). */
:root{--xp-ease:cubic-bezier(.2,.8,.2,1);--xp-spring:cubic-bezier(.2,.9,.25,1.3)}

/* ---------- Nokos: hitung mundur auto-refund ---------- */
.xv-nkcd{display:flex;gap:12px;align-items:center;margin:10px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--cy) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--cy) 9%,transparent),color-mix(in srgb,var(--vio) 7%,transparent));animation:xpIn .45s var(--xp-ease)}
.xv-nkcd b.xv-cd-t{display:block;font-family:var(--font-d);font-size:1.25rem;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.xv-nkcd .xv-cd-msg{display:block;color:var(--mut);font-size:.8rem;line-height:1.5}
.xv-ring{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.xv-ring-bg{fill:none;stroke:var(--line);stroke-width:4}
.xv-ring-fg{fill:none;stroke:var(--cy);stroke-width:4;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cy) 60%,transparent))}
.xv-nkcd.done{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));background:color-mix(in srgb,var(--amber) 8%,transparent)}.xv-nkcd.done .xv-ring-fg{stroke:var(--amber)}
.xv-nkcd.ok{border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:color-mix(in srgb,var(--green) 8%,transparent)}.xv-nkcd.ok .xv-ring-fg{stroke:var(--green);stroke-dashoffset:0!important}
/* ---------- pengingat anti-banned WhatsApp ---------- */
.xv-wa-ov{position:fixed;inset:0;z-index:2147482000;background:rgba(3,4,12,.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .3s}
.xv-wa-ov.on{opacity:1}
.xv-wa-card{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;border-radius:26px;padding:24px 22px;background:var(--bg2,#0a0c1c);border:1px solid color-mix(in srgb,#25d366 35%,var(--line));box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(37,211,102,.08);transform:translateY(24px) scale(.95);transition:transform .5s var(--xp-spring)}
.xv-wa-ov.on .xv-wa-card{transform:none}
.xv-wa-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;margin-bottom:12px;animation:xpWobble 2.6s ease-in-out infinite}
.xv-wa-ic svg{width:30px;height:30px}
.xv-wa-card h3{font-family:var(--font-d);font-size:1.3rem;margin:0 0 6px}
.xv-wa-card p{color:var(--mut);font-size:.88rem;line-height:1.6;margin:0 0 12px}
.xv-wa-timer{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(37,211,102,.08);border:1px dashed rgba(37,211,102,.45);margin-bottom:12px}
.xv-wa-timer span{font-size:.74rem;color:var(--mut);font-weight:700}.xv-wa-timer b{font-size:1rem}.xv-wa-timer small{color:var(--mut);font-size:.72rem}
.xv-wa-card ul{margin:0 0 14px 18px;padding:0;font-size:.84rem;line-height:1.7}
.xv-wa-ok{display:flex;gap:10px;align-items:center;font-size:.86rem;margin-bottom:12px;cursor:pointer}.xv-wa-ok input{width:18px;height:18px;accent-color:#25d366}
.xv-wa-card .btn{width:100%}
/* ---------- SMM: refill terkunci ---------- */
.xv-rfl{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:8px;font-size:.8rem;color:var(--mut)}
.xv-rfl b{color:var(--amber);font-variant-numeric:tabular-nums}.xv-rfl small{flex-basis:100%;font-size:.72rem;opacity:.85}

/* ---------- tombol telepon hidup + KABEL ke headset maskot ---------- [UPDATE 2026-09-30 v2] */
#fabCluster.xv-alive{overflow:visible}
#fabCluster.xv-alive #fabMenuToggle{position:relative;width:42px;height:42px;border:0;color:#fff;isolation:isolate;
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.55),transparent 42%),linear-gradient(140deg,var(--cy,#22d3ee),var(--vio,#2563eb) 55%,var(--vio2,#4338ca));
  box-shadow:0 8px 18px -10px var(--vio,#2563eb),0 0 0 3px color-mix(in srgb,var(--bg,#fff) 70%,transparent),inset 0 -4px 8px rgba(0,0,0,.16);
  transition:transform .4s var(--xp-spring),box-shadow .35s}
#fabCluster.xv-alive #fabMenuToggle svg{width:17px;height:17px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
#fabCluster.xv-alive #fabMenuToggle:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 24px -12px var(--vio,#2563eb),0 0 0 5px color-mix(in srgb,var(--cy,#22d3ee) 18%,transparent)}
#fabCluster.xv-alive #fabMenuToggle:active{transform:scale(.94)}
#fabCluster.xv-alive #fabMenuToggle.open{transform:scale(1.04)}
#fabCluster.xv-alive #fabMenuToggle.open svg{transform:rotate(-12deg)}
.xv-fab-waves{position:absolute;inset:0;z-index:-1;pointer-events:none}
.xv-fab-waves i{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cy,#22d3ee) 70%,transparent);opacity:0}
#fabMenuToggle.ring .xv-fab-waves i{animation:xpWave 1.6s ease-out 1 both}#fabMenuToggle.ring .xv-fab-waves i:nth-child(2){animation-delay:.3s}#fabMenuToggle.ring .xv-fab-waves i:nth-child(3){display:none}
#fabMenuToggle.open .xv-fab-waves{display:none}
#fabMenuToggle.ring svg{animation:xpRing 1.1s var(--xp-ease)}
#fabMenuToggle.ring{animation:xpBuzz 1.1s var(--xp-ease)}
@keyframes xpRing{0%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-18deg)}20%,40%,60%{transform:rotate(18deg)}70%{transform:rotate(0)}}
@keyframes xpBuzz{0%,70%,100%{box-shadow:0 8px 18px -10px var(--vio,#2563eb),0 0 0 3px color-mix(in srgb,var(--bg,#fff) 70%,transparent)}25%{box-shadow:0 8px 18px -10px var(--vio,#2563eb),0 0 0 6px color-mix(in srgb,var(--cy,#22d3ee) 25%,transparent)}}
@keyframes xpWave{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.xv-fab-dot{position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--bg2,#fff);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:xpLive 2s ease-out infinite;z-index:2}
@keyframes xpLive{70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.xv-fab-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(10px,-50%) scale(.96);white-space:nowrap;padding:8px 12px;border-radius:12px;background:var(--bg2,#fff);border:1px solid var(--line);color:var(--txt);font-size:.78rem;font-weight:800;box-shadow:0 12px 26px -16px #0f172a;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--xp-spring)}
.xv-fab-tip::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;background:inherit;border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
#fabMenuToggle:hover .xv-fab-tip,#fabMenuToggle:focus-visible .xv-fab-tip{opacity:1;transform:translate(0,-50%) scale(1)}
#fabMenuToggle.open .xv-fab-tip,#fabMenuToggle.open .xv-fab-dot{display:none}
#fabCluster.xv-linked #fabMenuToggle{box-shadow:0 0 0 4px color-mix(in srgb,var(--bg,#fff) 70%,transparent),0 0 30px -2px color-mix(in srgb,var(--cy,#22d3ee) 80%,transparent)}
/* kabel */
.xv-cord{position:fixed;inset:0;width:100vw;height:100vh;z-index:89;pointer-events:none;overflow:visible;opacity:0;transition:opacity .4s}
.xv-cord.on{opacity:1}
.xv-cord .s1{stop-color:var(--cy,#22d3ee)}.xv-cord .s2{stop-color:var(--vio,#2563eb)}
.xv-cord path{fill:none;stroke-linecap:round}
.xv-cord .glow{stroke:url(#xvCordG);stroke-width:5;opacity:.12;filter:url(#xvCordF)}
.xv-cord .base{stroke:url(#xvCordG);stroke-width:2;opacity:.45}
.xv-cord .flow{stroke:#fff;stroke-width:1.4;stroke-dasharray:2 10;opacity:.7;animation:xpFlowCord 1.4s linear infinite}
.xv-cord .spark{fill:#fff;filter:drop-shadow(0 0 4px var(--cy,#22d3ee)) drop-shadow(0 0 8px var(--vio,#2563eb))}
.xv-cord .plug{fill:var(--bg2,#fff);stroke:url(#xvCordG);stroke-width:2}
.xv-cord.zap .base{animation:xpZap 1.2s ease-out}
.xv-cord.zap .glow{animation:xpZapGlow 1.2s ease-out}
.xv-cord.linked .base{opacity:.95;stroke-width:3.5}.xv-cord.linked .glow{opacity:.45}.xv-cord.linked .flow{animation-duration:.5s}
@keyframes xpFlowCord{to{stroke-dashoffset:-22}}
@keyframes xpZap{0%{opacity:.55;stroke-width:3}30%{opacity:1;stroke-width:5}100%{opacity:.55;stroke-width:3}}
@keyframes xpZapGlow{0%{opacity:.18}30%{opacity:.7}100%{opacity:.18}}
/* satelit muncul memantul + label */
#fabCluster.xv-alive #fabSatellites .fab-sat{position:relative;transition:transform .45s var(--xp-spring),opacity .3s;transition-delay:calc(var(--i,0) * 60ms)}
.xv-sat-l{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 10px;border-radius:10px;background:var(--bg2,#fff);border:1px solid var(--line);color:var(--txt);font-size:.74rem;font-weight:800;box-shadow:0 10px 22px -16px #0f172a;pointer-events:none}

/* ---------- keluar akun ---------- */
.xv-bye{position:fixed;inset:0;z-index:2147481000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,4,12,.7);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.xv-bye.on{opacity:1}
.xv-bye-card{width:100%;max-width:360px;text-align:center;border-radius:28px;padding:28px 22px 22px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--vio) 22%,transparent),transparent 60%),var(--bg2,#0a0c1c);border:1px solid var(--line);box-shadow:0 40px 80px -40px #000;transform:translateY(20px) scale(.94);transition:transform .5s var(--xp-spring)}
.xv-bye.on .xv-bye-card{transform:none}
.xv-bye-orb{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--vio2,#6d28ff),var(--cy));box-shadow:0 0 0 10px color-mix(in srgb,var(--vio) 14%,transparent),0 18px 40px -16px var(--vio);animation:xpFloat 3s ease-in-out infinite}
.xv-bye-orb svg{width:30px;height:30px}
.xv-bye-card h3{font-family:var(--font-d);font-size:1.35rem;margin:0 0 6px}
.xv-bye-card p{color:var(--mut);font-size:.88rem;line-height:1.6;margin:0 0 18px}
.xv-bye-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xv-bye-card.bye{animation:xpPop .5s var(--xp-spring)}
.xv-bye-wave{font-size:3rem;line-height:1;margin-bottom:10px;display:inline-block;transform-origin:70% 80%;animation:xpWave2 1.2s ease-in-out 2}
.xv-bye-bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}.xv-bye-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--vio),var(--cy));transform-origin:left;animation:xpBar 1.6s linear forwards}
@keyframes xpWave2{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(14deg)}}
@keyframes xpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- modal produk ("lihat produk") — lebih mewah ---------- */
#buyModal.open .back{animation:xpFadeBlur .45s var(--xp-ease) both}
#buyModal.open .box{animation:xpModal .6s var(--xp-spring) both;border-radius:26px;border:1px solid color-mix(in srgb,var(--vio) 30%,var(--line));
  background:radial-gradient(140% 60% at 0% 0%,color-mix(in srgb,var(--vio) 22%,transparent),transparent 55%),radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--cy) 14%,transparent),transparent 55%),var(--bg2,#0a0c1c);
  box-shadow:0 40px 90px -40px #000,inset 0 1px 0 rgba(255,255,255,.06)}
#buyModal.open .box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--xp-a,0deg),transparent 0 70%,color-mix(in srgb,var(--cy) 70%,transparent) 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:xpBorder 6s linear infinite;pointer-events:none}
@property --xp-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes xpBorder{to{--xp-a:360deg}}
#buyModal.open #bIc{position:relative;width:64px!important;height:64px!important;border-radius:20px!important;animation:xpPop .7s var(--xp-spring) .08s both,xpFloat 4s ease-in-out 1s infinite;box-shadow:0 14px 30px -16px var(--vio)}
#buyModal.open #bIc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:xpSheen 2.8s ease-in-out 1s infinite}
#buyModal.open #bName{font-family:var(--font-d);font-size:1.3rem;letter-spacing:-.3px;animation:xpIn .5s var(--xp-ease) .12s both}
#buyModal.open #bCat,#buyModal.open #bDesc{animation:xpIn .5s var(--xp-ease) .18s both}
#buyModal.open .prices{animation:xpIn .5s var(--xp-ease) .24s both}
#buyModal.open #bPrice{background:linear-gradient(100deg,var(--txt) 20%,var(--cy) 50%,var(--txt) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xpShine 3.2s linear infinite}
#buyModal.open .box>.field,#buyModal.open .box>div:not(:first-of-type){animation:xpIn .5s var(--xp-ease) both}
#buyModal.open .box>*:nth-child(5){animation-delay:.28s}#buyModal.open .box>*:nth-child(6){animation-delay:.32s}#buyModal.open .box>*:nth-child(7){animation-delay:.36s}#buyModal.open .box>*:nth-child(n+8){animation-delay:.4s}
#buyModal.open #buyGo{position:relative;overflow:hidden;border-radius:16px;padding:14px;font-size:1rem;box-shadow:0 16px 34px -16px var(--vio);animation:xpIn .5s var(--xp-ease) .42s both}
#buyModal.open #buyGo::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:xpSweep 2.6s ease-in-out 1.2s infinite}
#buyModal.open #buyGo:hover{transform:translateY(-2px)}
@keyframes xpModal{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes xpFadeBlur{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
@keyframes xpSheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes xpShine{to{background-position:-220% 0}}
@keyframes xpSweep{0%,55%{left:-60%}100%{left:130%}}

/* ---------- animasi umum ---------- */
@keyframes xpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes xpPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes xpFloat{50%{transform:translateY(-5px)}}
@keyframes xpWobble{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@media (max-width:520px){.xv-fab-tip{display:none}.xv-sat-l{display:none}#fabCluster.xv-alive #fabMenuToggle{width:36px;height:36px}#fabCluster.xv-alive #fabMenuToggle svg{width:15px;height:15px}.xv-fab-dot{width:9px;height:9px}}
@media (prefers-reduced-motion:reduce){
  .xv-nkcd,.xv-wa-card,.xv-wa-ic,#fabMenuToggle.ring svg,#fabMenuToggle.ring::before,#fabMenuToggle.ring::after,.xv-fab-dot,.xv-fab-waves i,.xv-cord .flow,.xv-cord .spark,.xv-bye-card,.xv-bye-orb,.xv-bye-wave,.xv-bye-bar i,
  #buyModal.open .box,#buyModal.open .box *,#buyModal.open .box::before,#buyModal.open .box::after,#buyModal.open #bIc::after,#buyModal.open #buyGo::after{animation:none!important;transition:none!important}
}
@media (prefers-reduced-motion:reduce){.xv-cord .spark{display:none}.xv-cord .flow{stroke-dasharray:none;opacity:.3}}