/* JK ADISTORE - ANIMASI LOGIN / DAFTAR / OTP (v123): aurora bergerak, partikel naik, maskot melayang, tombol berkilau */
#authModal .aaBg{position:sticky;top:0;height:0;overflow:visible;z-index:0;pointer-events:none}
#authModal .aaBg i{position:absolute;border-radius:50%;filter:blur(38px);opacity:.55;will-change:transform}
#authModal .aaBg i:nth-child(1){width:240px;height:240px;left:-70px;top:60px;background:#2f7bff;animation:aaD1 9s ease-in-out infinite}
#authModal .aaBg i:nth-child(2){width:220px;height:220px;right:-80px;top:240px;background:#00d4ff;opacity:.38;animation:aaD2 11s ease-in-out infinite}
#authModal .aaBg i:nth-child(3){width:200px;height:200px;left:20%;top:520px;background:#7a5cff;opacity:.4;animation:aaD3 13s ease-in-out infinite}
#authModal .aaBg b{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:#bfe6ff;box-shadow:0 0 10px 2px rgba(120,200,255,.8);opacity:0;animation:aaUp 7s linear infinite}
#authModal .aaBg b:nth-of-type(1){left:12%;animation-delay:0s}#authModal .aaBg b:nth-of-type(2){left:30%;animation-delay:1.6s;width:4px;height:4px}
#authModal .aaBg b:nth-of-type(3){left:52%;animation-delay:3.1s}#authModal .aaBg b:nth-of-type(4){left:71%;animation-delay:4.4s;width:4px;height:4px}
#authModal .aaBg b:nth-of-type(5){left:88%;animation-delay:2.2s}
#authModal .aaBg b{top:var(--aaH,760px);bottom:auto}
#authModal .modal-box.kAuth>*:not(.aaBg):not(.kAuthX){position:relative;z-index:1}
/* maskot & banner */
#authModal .kAuthBanner{overflow:visible}
#authModal .kAuthBanner>img{animation:aaFloat 3.6s ease-in-out infinite;transform-origin:50% 100%}
#authModal .jkRibbon{animation:aaSway 5s ease-in-out infinite;transform-origin:50% 100%}
#authModal .kbIc{position:relative}
#authModal .kbIc::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(160,215,255,.7);animation:aaRing 2.4s ease-out infinite}
/* tab aktif berkilau */
#authModal .kAuthTabs button.on{position:relative;overflow:hidden}
#authModal .kAuthTabs button.on::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%);animation:aaShine 3.4s ease-in-out infinite}
/* judul kartu: cahaya berdenyut */
#authModal .kAuthPanel h3{animation:aaTitle 3.2s ease-in-out infinite}
/* input fokus: denyut cahaya */
#authModal .kField:focus-within{animation:aaFocus 1.8s ease-in-out infinite}
#authModal .kField:focus-within svg{color:#7fd0ff;transform:scale(1.12);transition:transform .2s}
/* tombol utama: kilau + panah bergerak */
#authModal .kBtn:not(:disabled){position:relative;overflow:hidden}
#authModal .kBtn:not(:disabled)::before{content:"";position:absolute;top:0;bottom:0;width:60%;left:-70%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:aaBtn 3.2s ease-in-out infinite}
#authModal .kBtn:active{transform:scale(.98)}
/* pembuka modal */
#authModal.show .modal-box.kAuth{animation:aaOpen .55s cubic-bezier(.2,.9,.25,1.1) both}
/* kotak OTP: gelombang saat muncul + kunci berdenyut */
.otpBoxes.enter .otpCell:nth-child(n) .otpBox{animation:aaWave 1.6s ease-in-out .5s 1}
.otpLock,.otpRing{animation-duration:1.6s}
@keyframes aaD1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,40px) scale(1.25)}}
@keyframes aaD2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-60px) scale(1.2)}}
@keyframes aaD3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-70px) scale(1.3)}}
@keyframes aaUp{0%{transform:translateY(0);opacity:0}12%{opacity:.9}80%{opacity:.7}100%{transform:translateY(calc(var(--aaH,760px)*-.95));opacity:0}}
@keyframes aaFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes aaSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes aaRing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes aaShine{0%,40%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes aaTitle{0%,100%{text-shadow:0 2px 14px rgba(80,170,255,.35)}50%{text-shadow:0 0 22px rgba(120,210,255,.95),0 2px 10px rgba(80,170,255,.6)}}
@keyframes aaFocus{0%,100%{box-shadow:0 0 0 2px rgba(80,170,255,.35),0 0 12px rgba(80,170,255,.25)}50%{box-shadow:0 0 0 3px rgba(80,200,255,.6),0 0 26px rgba(80,200,255,.5)}}
@keyframes aaBtn{0%,45%{left:-70%}100%{left:130%}}
@keyframes aaOpen{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}
@keyframes aaWave{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px)}}
/* hemat gerak: loop dimatikan, animasi masuk singkat tetap */
@media (prefers-reduced-motion:reduce){
  #authModal .aaBg i,#authModal .aaBg b,#authModal .kAuthBanner>img,#authModal .jkRibbon,#authModal .kbIc::after,#authModal .kAuthTabs button.on::after,#authModal .kAuthPanel h3,#authModal .kField:focus-within,#authModal .kBtn::before{animation:none!important}
  #authModal .aaBg b{display:none}
}

/* v198: LOGIN/DAFTAR RINGAN DI HP.
   Yang bikin patah-patah: blur 38px pada 3 bola yang bergerak, garis cahaya yang menganimasikan background (repaint tiap frame),
   dan backdrop-filter di atas semua itu. Di layar sentuh/kecil dimatikan; partikel kecil & kilau tombol (murah) tetap jalan.
   Mau tampilan lama di HP? Hapus blok ini saja. */
@media (max-width:820px),(pointer:coarse){
  #authModal .modal-box.kAuth{animation:none!important}
  #authModal .aaBg i{filter:none!important;animation:none!important;will-change:auto;opacity:1!important}
  #authModal .aaBg i:nth-child(1){background:radial-gradient(circle,rgba(47,123,255,.42) 0%,rgba(47,123,255,0) 68%)!important}
  #authModal .aaBg i:nth-child(2){background:radial-gradient(circle,rgba(0,212,255,.30) 0%,rgba(0,212,255,0) 68%)!important}
  #authModal .aaBg i:nth-child(3){background:radial-gradient(circle,rgba(122,92,255,.32) 0%,rgba(122,92,255,0) 68%)!important}
  #authModal .kAuthPanel{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #authModal .kAuthPanel h3,#authModal .kField:focus-within{animation:none!important}
}