/* Background global (gelap + emas), sama seperti beranda. Dipakai semua halaman yang memakai template.ejs.
   Mengalahkan gradient tema biru (.bg-gradient-theme) supaya dashboard, topup, riwayat, dll konsisten. */
html{background:#030303 !important;min-height:100%}
body,
body.bg-background,
.bg-gradient-theme{
    background-color:transparent !important;
    background-image:none !important;
}
body{position:relative;min-height:100vh}
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(ellipse 70% 35% at 50% -5%, rgba(250,204,21,.20), transparent 68%),
        radial-gradient(circle at 8% 35%, rgba(245,158,11,.08), transparent 30%),
        radial-gradient(circle at 92% 68%, rgba(234,179,8,.07), transparent 32%),
        linear-gradient(180deg, #100d04 0%, #090806 34%, #050505 68%, #020202 100%);
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.45;
    background-image:
        linear-gradient(rgba(250,204,21,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250,204,21,.035) 1px, transparent 1px),
        repeating-linear-gradient(135deg, transparent 0 118px, rgba(250,204,21,.025) 118px 119px);
    background-size:80px 80px, 80px 80px, auto;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.28) 62%, transparent 100%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.28) 62%, transparent 100%);
}
@media(max-width:768px){
    body::after{background-size:52px 52px, 52px 52px, auto;opacity:.32}
}

/* ===== animasi latar (elemen dibuat oleh /js/vexa-fx.js) ===== */
.kj-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kj-fx i,.kj-fx b,.kj-fx span{position:absolute;display:block;pointer-events:none}
.kj-orb{border-radius:50%;filter:blur(60px);will-change:transform}
.kj-o1{width:380px;height:380px;left:-90px;top:12%;background:rgba(250,204,21,.15);animation:kjf1 18s ease-in-out infinite}
.kj-o2{width:340px;height:340px;right:-80px;top:48%;background:rgba(245,158,11,.13);animation:kjf2 22s ease-in-out infinite}
.kj-o3{width:460px;height:260px;left:30%;bottom:-120px;background:rgba(234,179,8,.11);animation:kjf3 26s ease-in-out infinite}
@keyframes kjf1{50%{transform:translate(90px,70px) scale(1.15)}}
@keyframes kjf2{50%{transform:translate(-80px,-90px) scale(1.2)}}
@keyframes kjf3{50%{transform:translate(-120px,-30px) scale(1.1)}}
.kj-frame{border:1px solid rgba(250,204,21,.2);border-radius:70px;will-change:transform}
.kj-fr1{width:300px;height:300px;left:-150px;top:150px;transform:rotate(45deg);animation:kjr1 30s ease-in-out infinite}
.kj-fr2{width:260px;height:260px;right:-130px;top:340px;transform:rotate(45deg);animation:kjr2 34s ease-in-out infinite}
@keyframes kjr1{50%{transform:rotate(60deg) translateY(30px)}}
@keyframes kjr2{50%{transform:rotate(30deg) translateY(-30px)}}
.kj-line{top:72px;left:50%;width:min(1100px,92vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(250,204,21,.6),transparent);overflow:hidden}
.kj-line::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,#fff7cf,transparent);animation:kjshine 5s ease-in-out infinite}
@keyframes kjshine{to{left:110%}}
.kj-p{bottom:-10px;border-radius:50%;background:rgba(250,204,21,.85);box-shadow:0 0 8px rgba(250,204,21,.8);opacity:0;animation:kjup linear infinite;will-change:transform}
@keyframes kjup{0%{opacity:0;transform:translateY(0)}10%{opacity:.9}100%{opacity:0;transform:translateY(-105vh)}}
/* grid ikut bergeser pelan */
body::after{animation:kjpan 26s linear infinite}
@keyframes kjpan{to{background-position:80px 80px,80px 80px,0 0}}
@media(prefers-reduced-motion:reduce){.kj-fx *,body::after{animation:none !important}}

/* logo metode QRIS: selalu latar putih biar kebaca di tema gelap */
.kj-qris-bg{background:#fff!important;border-radius:8px;padding:3px 8px;box-sizing:content-box}