/* ===== Halaman Login 31 Tools (Admin Web) =====
   Layout responsif: latar memakai kanvas 1672x941 yang diskalakan "cover" (js/login.js), isi tengah diskalakan lewat --k.
   Hanya UI: belum ada OAuth / API Discord. Selama body.locked aktif, seluruh halaman admin disembunyikan dan tidak bisa difokus. */
body.locked>*:not(#login):not(script){visibility:hidden}
body.locked{overflow:hidden}

#login{--ease:cubic-bezier(.22,.7,.2,1);--vi:#9a6bff;--gold:#e9b949;--gold-hi:#ffe29a;--k:1;
  position:fixed;inset:0;z-index:1000;overflow:hidden;color:#f4f2fa;font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.2;
  background:
    radial-gradient(46% 52% at 50% 44%,rgba(78,52,150,.30),transparent 72%),
    radial-gradient(40% 50% at 8% 92%,rgba(92,54,190,.30),transparent 70%),
    radial-gradient(34% 44% at 96% 64%,rgba(60,42,120,.26),transparent 70%),
    linear-gradient(160deg,#0c0a16 0%,#0a0912 48%,#0d0a18 100%);
  transition:opacity .5s ease .05s}
#login[hidden]{display:none}
#login.done{opacity:0;pointer-events:none}
#login *{box-sizing:border-box}
#login h1{margin:0}
.lg-bg{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;pointer-events:none}
.lg-bg>*{position:absolute}

/* ---------- Latar ---------- */
.lg-geo{left:0;top:0;width:1672px;height:941px;pointer-events:none}
.lg-pad{left:-84px;top:496px;width:700px;height:490px;transform:rotate(-13deg);transform-origin:30% 70%;pointer-events:none;
  filter:drop-shadow(0 0 46px rgba(124,80,240,.32));animation:lgPadIn 1.5s var(--ease) .2s both,lgBob 7s ease-in-out 1.8s infinite alternate}
.lg-fog{pointer-events:none;border-radius:50%;filter:blur(34px)}
.lg-fog.a{left:-260px;top:560px;width:980px;height:640px;background:radial-gradient(closest-side,rgba(112,72,230,.42),transparent);animation:lgDrift 16s ease-in-out infinite alternate}
.lg-fog.b{left:1000px;top:640px;width:900px;height:560px;background:radial-gradient(closest-side,rgba(84,62,184,.26),transparent);animation:lgDrift 20s ease-in-out -9s infinite alternate-reverse}
.lg-glow{left:486px;top:120px;width:700px;height:520px;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side at 46% 50%,rgba(132,96,255,.42),rgba(132,96,255,.12) 55%,transparent 80%),
             radial-gradient(closest-side at 62% 58%,rgba(233,185,73,.20),transparent 70%);
  filter:blur(18px);animation:lgBreathe 7s ease-in-out infinite alternate}
.lg-grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lg-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 80% at 50% 46%,transparent 55%,rgba(4,3,10,.62) 100%)}

/* ---------- Brand kiri atas (sama dengan header admin) ---------- */
.lg-app{position:absolute;left:40px;top:16px;z-index:5;display:flex;align-items:center;gap:14px;font-size:24px;font-weight:700;color:inherit;text-decoration:none}
.lg-app .chip{font-size:12px;font-weight:600;color:var(--gold);border:1px solid rgba(246,185,59,.5);border-radius:12px;padding:2px 10px}

/* ---------- Inti: logo, nama, tagline, tombol ---------- */
.lg-core{position:absolute;left:50%;top:46%;width:640px;z-index:3;translate:-50% -50%;scale:var(--k);transform-origin:50% 50%}
.lg-inner{display:flex;flex-direction:column;align-items:center;transform-origin:50% 60%}
.lg-logo{position:relative;width:168px;height:168px;margin-bottom:15px}
.lg-logo img{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 30px rgba(150,110,255,.5)) drop-shadow(0 0 14px rgba(233,185,73,.16))}
.lg-logo:after{content:"";position:absolute;inset:0;
  -webkit-mask:url(../assets/logo.svg) center/100% 100% no-repeat;mask:url(../assets/logo.svg) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 140% 0/260% 100% no-repeat;
  animation:lgShine 1.4s cubic-bezier(.3,.6,.3,1) 1.15s both}
.lg-title{font-size:86px;line-height:88px;font-weight:700;letter-spacing:-1.6px;white-space:nowrap;color:#f6f4fc;text-shadow:0 6px 34px rgba(110,80,230,.45)}
.lg-tag{display:flex;align-items:center;justify-content:center;gap:36px;height:22px;margin:18px 0 54px;font-size:17px;font-weight:500;letter-spacing:.32em;color:#706b8a;white-space:nowrap}
.lg-tag span{margin-right:-.32em}
.lg-tag i,.lg-foot i{display:block;height:1px;transform-origin:center}
.lg-tag i{width:72px;background:linear-gradient(90deg,transparent,rgba(190,170,255,.4))}
.lg-tag i:last-child{background:linear-gradient(270deg,transparent,rgba(190,170,255,.4))}

.lg-btn{position:relative;display:block;width:582px;height:88px;margin:0;z-index:4;border-radius:18px;cursor:pointer;overflow:hidden;isolation:isolate;text-align:left;
  background:linear-gradient(180deg,#463a80 0%,#352c66 56%,#2b2355 100%);
  border:1.5px solid rgba(166,146,255,.5);
  box-shadow:0 14px 44px -8px rgba(86,58,210,.5),0 2px 0 rgba(255,255,255,.1) inset,0 0 0 1px rgba(10,8,22,.4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,background .35s}
.lg-btn:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 140% at 22% 0,rgba(190,170,255,.22),transparent 70%);opacity:.7;transition:opacity .35s}
.lg-sheen{position:absolute;top:0;bottom:0;left:-40%;width:34%;z-index:-1;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:0}
.lg-ico{position:absolute;left:96px;top:50%;width:54px;height:54px;margin-top:-27px;display:grid;place-items:center;color:#fff;transition:transform .4s var(--ease)}
.lg-ico svg{width:54px;height:54px;display:block}
.lg-dv{position:absolute;left:185px;top:22px;bottom:22px;width:1px;background:rgba(255,255,255,.2)}
.lg-lbl{position:absolute;left:220px;top:50%;transform:translateY(-50%);font-size:25px;font-weight:600;letter-spacing:.1px;color:#f3f0fd;white-space:nowrap}
.lg-chev{position:absolute;right:30px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;color:#e5dfff;transition:transform .4s var(--ease)}
.lg-chev svg{width:26px;height:26px;display:block}
.lg-btn:hover{transform:translateY(-3px);border-color:rgba(200,184,255,.85);
  background:linear-gradient(180deg,#5144a0 0%,#3d3278 56%,#31285f 100%);
  box-shadow:0 20px 56px -8px rgba(112,78,240,.62),0 0 34px rgba(150,112,255,.28),0 2px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(10,8,22,.4)}
.lg-btn:hover:before{opacity:1}
.lg-btn:hover .lg-sheen{animation:lgSheen .9s ease-out}
.lg-btn:hover .lg-ico{transform:scale(1.07)}
.lg-btn:hover .lg-chev{transform:translateX(6px)}
.lg-btn:active{transform:translateY(0) scale(.992);transition-duration:.12s}
.lg-btn:focus-visible{outline:2px solid #d9ccff;outline-offset:5px}

.lg-foot{position:absolute;left:0;right:0;bottom:calc(5vh + 4px);z-index:3;display:flex;justify-content:center;pointer-events:none}
.lg-foot-in{display:flex;align-items:center;justify-content:center;gap:28px;font-size:21px;font-weight:500;color:#8d89a7;scale:var(--kf,1);transform-origin:50% 100%;white-space:nowrap}
.lg-foot i{width:170px;background:linear-gradient(90deg,transparent,rgba(190,170,255,.28))}
.lg-foot i:last-child{background:linear-gradient(270deg,transparent,rgba(190,170,255,.28))}
.lg-sec{display:flex;align-items:center;gap:14px}
.lg-sec svg{width:27px;height:27px;color:#b9a6ff}

/* ---------- Latar hidup: parallax, sinar, garis cahaya, partikel ---------- */
.lg-par{left:0;top:0;width:1672px;height:941px;pointer-events:none;will-change:transform}
.lg-par>*{position:absolute}
.lg-rays{left:336px;top:-80px;width:1000px;height:1000px;border-radius:50%;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(170,140,255,.13) 0 5deg,transparent 5deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 6%,transparent 70%);mask:radial-gradient(closest-side,#000 6%,transparent 70%);
  animation:lgFade 2s ease .4s both,lgSpin 120s linear infinite}
.lg-hex{left:1170px;top:150px;width:560px;height:560px;overflow:visible;opacity:.9;animation:lgFade 1.8s ease .3s both,lgFloat 16s ease-in-out 2s infinite alternate}
.lg-trace{stroke-dasharray:16 84;animation:lgTrace 7s linear infinite;filter:drop-shadow(0 0 1.4px rgba(255,214,130,.95)) drop-shadow(0 0 4px rgba(233,185,73,.7))}
.lg-beam{width:2px;height:460px;z-index:1;rotate:43deg;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,226,154,.9) 50%,transparent);filter:drop-shadow(0 0 6px rgba(233,185,73,.7));
  animation:lgBeam var(--t,12s) ease-in-out var(--w,0s) infinite}
.lg-beam.v{background:linear-gradient(180deg,transparent,rgba(190,160,255,.9) 50%,transparent);filter:drop-shadow(0 0 6px rgba(150,110,255,.8))}
.lg-fx{left:0;top:0;width:1672px;height:941px;pointer-events:none;mix-blend-mode:screen;animation:lgFade 1.6s ease .6s both}
.lg-lb{filter:drop-shadow(0 0 5px rgba(160,120,255,.9));animation:lgLight 3.4s ease-in-out infinite alternate}
.lg-geo polygon[fill^="url(#lgGold"]{animation:lgPulse 5s ease-in-out infinite alternate}
.lg-geo line{animation:lgPulse 6s ease-in-out -2s infinite alternate}

/* ---------- Animasi kemunculan (satu urutan, dipandu --d) ---------- */
.lg-in{animation:lgIn .9s var(--ease) var(--d,0s) backwards}
.lg-logo.lg-in{animation-name:lgLogoIn;animation-duration:1.1s}
.lg-tag i.lg-in,.lg-foot i.lg-in{animation-name:lgLine;animation-duration:.9s}
.lg-geo{animation:lgFade 1.4s ease .0s both}
.lg-glow{animation:lgFade 1.4s ease .1s both,lgBreathe 7s ease-in-out 1.5s infinite alternate}

/* ---------- Transisi klik: masuk ke aplikasi ---------- */
#login .lg-flash{position:absolute;left:50%;top:60%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;z-index:6;opacity:0;
  background:radial-gradient(closest-side,rgba(255,236,190,.95),rgba(233,185,73,.55) 38%,rgba(124,80,240,.35) 66%,transparent);mix-blend-mode:screen}
#login.leaving .lg-btn{pointer-events:none;border-color:rgba(255,226,154,.9);
  box-shadow:0 0 0 6px rgba(233,185,73,.16),0 0 60px rgba(233,185,73,.45),0 14px 44px -8px rgba(86,58,210,.5);animation:lgPress .5s var(--ease) both}
#login.leaving .lg-chev{transform:translateX(14px);opacity:0;transition:transform .4s var(--ease),opacity .3s}
#login.leaving .lg-logo img{filter:drop-shadow(0 0 38px rgba(255,214,130,.8))}
#login.leaving .lg-inner,#login.leaving .lg-foot-in,#login.leaving .lg-app{animation:lgLeave .62s cubic-bezier(.5,0,.8,.4) .12s both}
#login.leaving .lg-flash{animation:lgFlash .72s ease-out .06s both}
body.app-in>*:not(#login):not(script){animation:lgAppIn .75s cubic-bezier(.22,.7,.2,1) both}

@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgFloat{from{transform:rotate(-2.5deg) translateY(-8px)}to{transform:rotate(2deg) translateY(10px)}}
@keyframes lgTrace{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes lgBeam{0%{opacity:0;translate:0 0}6%{opacity:.85}34%{opacity:0;translate:-1000px 1000px}100%{opacity:0;translate:-1000px 1000px}}
@keyframes lgBob{from{translate:0 0}to{translate:10px -16px}}
@keyframes lgLight{from{opacity:.35}to{opacity:1}}
@keyframes lgPulse{from{opacity:.62}to{opacity:1}}
@keyframes lgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lgLogoIn{from{opacity:0;transform:scale(.88);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes lgLine{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
@keyframes lgPadIn{from{opacity:0;transform:rotate(-13deg) translate(-40px,40px)}to{opacity:1;transform:rotate(-13deg)}}
@keyframes lgShine{from{background-position:140% 0}to{background-position:-40% 0}}
@keyframes lgSheen{0%{left:-40%;opacity:0}20%{opacity:1}100%{left:110%;opacity:0}}
@keyframes lgBreathe{from{opacity:1;transform:scale(1)}to{opacity:.78;transform:scale(1.07)}}
@keyframes lgDrift{from{transform:translate(0,0)}to{transform:translate(46px,-26px)}}
@keyframes lgPress{0%{transform:scale(1)}35%{transform:scale(.985)}100%{transform:scale(1.02)}}
@keyframes lgFlash{0%{opacity:0;transform:scale(.4)}25%{opacity:1}100%{opacity:0;transform:scale(11)}}
@keyframes lgLeave{from{opacity:1;filter:none}to{opacity:0;transform:scale(1.045);filter:blur(5px)}}
@keyframes lgAppIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .lg-in,.lg-geo,.lg-pad,.lg-glow,.lg-fog,.lg-logo:after,.lg-rays,.lg-hex,.lg-trace,.lg-beam,.lg-lb,.lg-geo polygon{animation:none!important}
  .lg-beam,.lg-fx{display:none}
  #login.leaving .lg-inner,#login.leaving .lg-foot-in,#login.leaving .lg-app,#login.leaving .lg-flash,#login.leaving .lg-btn{animation:none!important}
  #login.leaving .lg-inner,#login.leaving .lg-foot-in,#login.leaving .lg-app{opacity:0}
  body.app-in>*:not(#login):not(script){animation:none}
  #login{transition-duration:.2s}
}

@media (max-width:700px){
  .lg-app{left:20px;top:14px;font-size:20px}.lg-app img{width:34px;height:34px}
  .lg-foot-in{font-size:17px;gap:18px}.lg-foot i{width:60px}
}