/* JK ADISTORE — tampilan login "glassy" + animasi OTP. Hanya tampilan; semua id & fungsi login tetap sama. */
@keyframes agStreak{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes agRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes agPop{0%{transform:scale(.55) translateY(8px);opacity:.2}55%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes agShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes agBlink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes agSpin{to{transform:rotate(360deg)}}
@keyframes agGlow{0%,100%{box-shadow:0 0 0 0 rgba(80,170,255,.0)}50%{box-shadow:0 0 22px 2px rgba(80,170,255,.35)}}

/* latar modal: garis cahaya biru bergerak */
#authModal .modal-box.kAuth{
  background:
    linear-gradient(115deg,transparent 30%,rgba(60,150,255,.16) 42%,transparent 54%) 0 0/220% 100%,
    linear-gradient(60deg,transparent 55%,rgba(120,200,255,.10) 66%,transparent 76%) 0 0/220% 100%,
    radial-gradient(120% 60% at 50% 0%,#0f2a63 0%,#07142f 48%,#030914 100%)!important;
  animation:agStreak 14s linear infinite}

/* kartu form kaca dengan sudut miring (kiri-atas & kanan-bawah) */
#authModal .kAuthPanel{
  position:relative;overflow:visible;padding:18px 0 20px;border-radius:0;
  background:linear-gradient(150deg,rgba(40,95,170,.42),rgba(10,28,64,.62) 55%,rgba(8,20,48,.72))!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  box-shadow:inset 0 0 0 1px rgba(130,200,255,.28),0 14px 40px rgba(0,0,0,.45)!important;
  animation:agRise .45s ease both}
#authModal .kAuthPanel::before,#authModal .kAuthPanel::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;background:linear-gradient(135deg,rgba(150,215,255,.55),rgba(80,150,230,.15))}
#authModal .kAuthPanel::before{left:0;top:0;clip-path:polygon(0 0,100% 0,0 100%)}
#authModal .kAuthPanel::after{right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
#authModal .kAuthPanel h3{font-size:24px;letter-spacing:.2px;text-shadow:0 2px 14px rgba(80,170,255,.35)}
#authModal .kAuthPanel .kSub{color:#bcd3f5;font-size:13.5px}
#authModal .kAuthPanel .kLbl{font-size:13px;font-weight:700;color:#dce9ff;margin-top:12px}

/* input kaca */
#authModal .kAuthPanel .kField{background:rgba(255,255,255,.07)!important;border:1px solid rgba(150,200,255,.2)!important;border-radius:12px!important;
  transition:border-color .2s,box-shadow .2s,background .2s}
#authModal .kAuthPanel .kField:focus-within{border-color:#4cb4ff!important;background:rgba(255,255,255,.11)!important;box-shadow:0 0 0 3px rgba(76,180,255,.18),0 0 18px rgba(76,180,255,.22)}
#authModal .kAuthPanel .kField input{color:#f1f6ff!important}
#authModal .kAuthPanel .kField input::placeholder{color:rgba(190,210,245,.45)!important}
#authModal .kAuthPanel .kField svg{color:#7fb8ee!important;stroke:#7fb8ee}
#authModal .kAuthPanel .kEye svg{stroke:#9cc8f5}

/* tombol utama: biru terang + panah */
#authModal .kAuthPanel .kBtn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;min-height:48px;font-weight:800;
  background:linear-gradient(90deg,#1f9bff,#4cc6ff)!important;color:#04152e!important;
  box-shadow:0 8px 22px rgba(40,150,255,.42),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .15s,box-shadow .2s,filter .2s}
#authModal .kAuthPanel .kBtn::after{content:"→";font-size:18px;transition:transform .2s}
#authModal .kAuthPanel .kBtn:hover{filter:brightness(1.08);box-shadow:0 10px 28px rgba(40,150,255,.55),inset 0 1px 0 rgba(255,255,255,.5)}
#authModal .kAuthPanel .kBtn:hover::after{transform:translateX(4px)}
#authModal .kAuthPanel .kBtn:active{transform:scale(.98)}
#authModal .kAuthPanel .kBtn:disabled{filter:saturate(.7);opacity:.85;cursor:wait}
#authModal .kAuthPanel .kBtn:disabled::after{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(4,21,46,.25);border-top-color:#04152e;animation:agSpin .7s linear infinite}

/* tombol Google / Discord / sekunder: kaca */
#authModal .kAuthPanel .kBtnOut{background:rgba(255,255,255,.07)!important;border:1px solid rgba(150,200,255,.22)!important;color:#e8f1ff!important;border-radius:12px;
  transition:background .2s,border-color .2s,transform .15s}
#authModal .kAuthPanel .kBtnOut:hover{background:rgba(255,255,255,.13)!important;border-color:rgba(150,210,255,.45)!important}
#authModal .kAuthPanel .kBtnOut:active{transform:scale(.98)}
#authModal .kAuthPanel .kOr span{color:#8fb0dd}

/* field muncul berurutan */
#authModal .kAuthPanel>div:not(.hidden)>*{animation:agRise .4s ease both}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(2){animation-delay:.05s}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(3){animation-delay:.1s}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(4){animation-delay:.15s}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(5){animation-delay:.2s}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(6){animation-delay:.25s}
#authModal .kAuthPanel>div:not(.hidden)>*:nth-child(n+7){animation-delay:.3s}

/* ===== OTP: kotak 6 digit beranimasi ===== */
#authModal .otpHidden{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.otpHero{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px}
.otpLock{position:relative;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(120,190,255,.35),rgba(40,90,180,.18));box-shadow:0 8px 26px rgba(40,130,255,.3),inset 0 0 0 1px rgba(150,210,255,.3)}
.otpLock svg{width:32px;height:32px;stroke:#bfe2ff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.otpRing{position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:#5fd0ff;border-left-color:rgba(95,208,255,.35);animation:agSpin 2.4s linear infinite}
.otpMask{margin:10px 0 2px;font-weight:800;color:#fff;font-size:15px;letter-spacing:.2px;word-break:break-all;text-align:center}
.otpBoxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 8px}
.otpBoxes.shake{animation:agShake .45s ease}
.otpCell{position:relative}
.otpCell::after{content:"";position:absolute;left:50%;bottom:9px;width:16px;height:3px;border-radius:3px;background:#4cb4ff;transform:translateX(-50%);opacity:.0;transition:opacity .2s}
.otpCell.active::after{opacity:1;animation:agBlink 1s step-end infinite}
.otpCell.filled::after{opacity:.55;animation:none}
.otpBox{width:100%;height:58px;box-sizing:border-box;text-align:center;font-size:26px;font-weight:800;color:#fff;caret-color:transparent;padding:0 0 8px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(150,200,255,.28);border-radius:14px;outline:0;
  transition:border-color .2s,box-shadow .2s,background .2s,transform .15s;-webkit-appearance:none;appearance:none}
.otpBox:focus{border-color:#7a6bff;background:rgba(255,255,255,.13);box-shadow:0 0 0 3px rgba(122,107,255,.22),0 0 20px rgba(76,180,255,.3);transform:translateY(-2px)}
.otpCell.filled .otpBox{border-color:#4cb4ff;animation:agPop .28s ease}
.otpBoxes.err .otpBox{border-color:#ff6b81;box-shadow:0 0 0 3px rgba(255,107,129,.2);color:#ffd3da}
.otpBoxes.enter .otpCell{animation:agRise .4s ease both}
.otpBoxes.enter .otpCell:nth-child(2){animation-delay:.05s}.otpBoxes.enter .otpCell:nth-child(3){animation-delay:.1s}
.otpBoxes.enter .otpCell:nth-child(4){animation-delay:.15s}.otpBoxes.enter .otpCell:nth-child(5){animation-delay:.2s}.otpBoxes.enter .otpCell:nth-child(6){animation-delay:.25s}
.otpAsk{text-align:center;color:#9fb9e0;font-size:12.5px;margin:10px 0 4px}
@media (max-width:380px){.otpBox{height:52px;font-size:23px}.otpBoxes{gap:6px}}
@media (prefers-reduced-motion:reduce){#authModal .modal-box.kAuth,.otpBox,.otpCell{animation:none!important}}