/* login.css — login: kartu, layout terbelah, keyframes lg* */
/* ---- login ---- */
.loginbg{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--sat)) 20px calc(20px + var(--sab));overflow:hidden;background:linear-gradient(160deg,#FFF4EC 0%,#FCE0CF 50%,#F6D6C6 100%);background-size:220% 220%;animation:lgBg 22s ease-in-out infinite}
.loginbg::before,.loginbg::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.55}
.loginbg::before{width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle,#FFB27A 0%,rgba(255,178,122,0) 70%);animation:lgDrift1 24s ease-in-out infinite alternate}
.loginbg::after{width:46vmax;height:46vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(circle,#F2705A 0%,rgba(242,112,90,0) 70%);animation:lgDrift2 28s ease-in-out infinite alternate}
.lfx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lfx span{position:absolute;bottom:-12%;left:var(--x);font-size:var(--s,26px);opacity:0;filter:saturate(1.1);animation:lgFloat var(--d,18s) linear var(--w,0s) infinite}
.loginbox{position:relative;z-index:1;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:26px;padding:28px 26px 24px;width:100%;max-width:392px;box-shadow:0 30px 70px rgba(126,3,6,.20),0 2px 0 rgba(255,255,255,.9) inset}
.loginbox.intro{animation:lgIn .75s cubic-bezier(.2,.8,.2,1) both}
.loginbox .lgo{width:76px;height:76px;object-fit:contain;margin:0 auto 2px;display:block}
.loginbox .lword{height:34px;object-fit:contain;display:block;margin:0 auto 8px}
.loginbox h2{text-align:center;font-size:21px;font-weight:800;margin-bottom:2px}
.loginbox .lsub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:18px}
.ltabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:16px}
.ltabs button{flex:1;border:none;background:none;padding:9px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.ltabs button.on{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.lfield{margin-bottom:12px}
.lfield label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.lerr{background:#fbe7e5;color:var(--red);font-size:12px;padding:9px 11px;border-radius:9px;margin-bottom:12px;display:none}
.lremember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:2px 0 12px;cursor:pointer}
.lremember input{width:auto;min-width:0;margin:0;flex-shrink:0}
.loginbox .lgo{filter:drop-shadow(0 8px 14px rgba(194,58,11,.28));animation:lgBob 4.6s ease-in-out infinite}
.loginbox.intro .lgo{animation:lgPop .85s .1s cubic-bezier(.3,1.5,.5,1) both,lgBob 4.6s 1s ease-in-out infinite}
.loginbox.intro .lword{animation:lgUp .6s .35s both}
.loginbox.intro .lsub{animation:lgUp .6s .45s both}
.ltabs{position:relative}
.ltabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ltabs[data-m="reg"]::before{transform:translateX(100%)}
.ltabs.slide[data-m="reg"]::before{animation:lgSlideR .35s cubic-bezier(.4,0,.2,1)}
.ltabs.slide[data-m="login"]::before{animation:lgSlideL .35s cubic-bezier(.4,0,.2,1)}
.ltabs button{position:relative;z-index:1;background:none!important;box-shadow:none!important;transition:color .25s}
.lform>*{animation:lgUp .45s cubic-bezier(.2,.8,.2,1) both}
.lform>*:nth-child(1){animation-delay:.02s}.lform>*:nth-child(2){animation-delay:.07s}.lform>*:nth-child(3){animation-delay:.12s}.lform>*:nth-child(4){animation-delay:.17s}.lform>*:nth-child(5){animation-delay:.22s}.lform>*:nth-child(6){animation-delay:.27s}.lform>*:nth-child(7){animation-delay:.32s}.lform>*:nth-child(8){animation-delay:.37s}.lform>*:nth-child(9){animation-delay:.42s}
.loginbox .lfield input{padding:11px 13px;border-radius:12px;border-color:#e3e1e0;background:#fdfcfb;transition:border-color .2s,box-shadow .2s,background .2s}
.loginbox .lfield input:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 4px rgba(213,62,15,.12)}
.lfield label{transition:color .2s}
.lfield:focus-within label{color:var(--red)}
.pwwrap{position:relative}
.pwwrap input{padding-right:44px!important}
.pwtog{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:16px;line-height:1;padding:7px 8px;opacity:.55;transition:opacity .2s,transform .2s}
.pwtog:hover{opacity:1;transform:translateY(-50%) scale(1.12)}
.lsubmit{position:relative;overflow:hidden;background:linear-gradient(135deg,#E5561F 0%,#C23A0B 100%);padding:13px;border-radius:13px;font-size:14px;letter-spacing:.01em;box-shadow:0 10px 22px rgba(213,62,15,.30);transition:transform .15s,box-shadow .2s,filter .2s}
.lsubmit:hover{background:linear-gradient(135deg,#E5561F 0%,#C23A0B 100%);transform:translateY(-2px);box-shadow:0 14px 28px rgba(213,62,15,.36);filter:brightness(1.04)}
.lsubmit:active{transform:translateY(0) scale(.985)}
.lsubmit::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s}
.lsubmit:hover::after{left:130%}
.lsubmit.busy{pointer-events:none;filter:saturate(.85) brightness(.97)}
.lsubmit.busy::before{content:"";display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;margin-right:9px;vertical-align:-2px;animation:lgSpin .7s linear infinite}
.lerr{animation:lgShake .45s}
.lfoot{text-align:center;font-size:11px;color:var(--muted);margin-top:16px;opacity:.85}
.lcopy{text-align:center;font-size:10.5px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);letter-spacing:.02em}
@keyframes lgBg{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
@keyframes lgDrift1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes lgDrift2{to{transform:translate(-8vmax,-6vmax) scale(1.1)}}
@keyframes lgFloat{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.26}85%{opacity:.2}100%{transform:translateY(-118vh) rotate(40deg);opacity:0}}
@keyframes lgIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lgPop{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes lgBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes lgUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lgSlideR{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes lgSlideL{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
/* ---- login: layout terbelah (hero + form) ---- */
.loginbg.lsplit{align-items:stretch;justify-content:stretch;padding:0;background:#FFF8F3;animation:none}
.lsplit::before,.lsplit::after{opacity:.3}
.lhero{position:relative;flex:0 0 52%;overflow:hidden;color:#fff;z-index:1;display:flex;background:linear-gradient(150deg,#F26A2E 0%,#D53E0F 46%,#8F1208 100%)}
.lhero::before{content:"";position:absolute;width:60vmin;height:60vmin;border-radius:50%;left:-16vmin;top:-18vmin;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);animation:lgDrift1 20s ease-in-out infinite alternate}
.lhero::after{content:"";position:absolute;width:70vmin;height:70vmin;border-radius:50%;right:-10vmin;bottom:-26vmin;background:radial-gradient(circle,rgba(255,196,120,.30),rgba(255,196,120,0) 70%);animation:lgDrift2 24s ease-in-out infinite alternate}
.lhero .lfx span{opacity:0;filter:none}
.lhero-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(28px,5vw,64px) clamp(28px,5vw,72px) clamp(28px,5vw,64px) clamp(28px,5vw,64px);width:100%}
.lh-word{height:38px;width:auto;align-self:flex-start;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));animation:lgUp .7s .05s both}
.lh-copy h1{font-size:clamp(30px,3.6vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;animation:lgUp .7s .15s both}
.lh-copy h1 span{background:linear-gradient(90deg,#FFE3B0,#FFC470);-webkit-background-clip:text;background-clip:text;color:transparent}
.lh-copy p{font-size:clamp(13px,1.15vw,16px);line-height:1.55;max-width:420px;opacity:.9;animation:lgUp .7s .25s both}
.lh-tag{display:none}
.lstage{position:relative;height:clamp(240px,34vh,330px);margin-top:6px}
.lplate{position:absolute;right:2%;top:50%;width:clamp(170px,17vw,230px);aspect-ratio:1;transform:translateY(-50%);animation:lgPop .9s .4s cubic-bezier(.3,1.4,.5,1) both}
.ldisc{position:absolute;inset:12%;border-radius:50%;background:#fff;box-shadow:0 22px 50px rgba(80,10,0,.35),0 0 0 10px rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;animation:lgBob 5s ease-in-out infinite}
.ldisc img{width:74%;height:auto;object-fit:contain}
.lorbit{position:absolute;inset:0;animation:lgSpin 26s linear infinite}
.lorbit i{position:absolute;font-style:normal;font-size:clamp(20px,2vw,28px);left:50%;top:50%;margin:-.6em 0 0 -.6em;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.lorbit i:nth-child(1){transform:rotate(0deg) translateY(calc(-1 * clamp(85px,8.6vw,116px)))}
.lorbit i:nth-child(2){transform:rotate(90deg) translateY(calc(-1 * clamp(85px,8.6vw,116px)))}
.lorbit i:nth-child(3){transform:rotate(180deg) translateY(calc(-1 * clamp(85px,8.6vw,116px)))}
.lorbit i:nth-child(4){transform:rotate(270deg) translateY(calc(-1 * clamp(85px,8.6vw,116px)))}
.lfc{position:absolute;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.96);color:var(--ink);border-radius:18px;padding:11px 16px 11px 12px;box-shadow:0 16px 34px rgba(80,10,0,.28);animation:lgUp .7s both,lgFloatY 6s ease-in-out infinite}
.lfc b{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#FFE9D8,#FFD0B0);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.lfc strong{display:block;font-size:13px;font-weight:800}
.lfc span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.lfc1{left:0;top:2%;transform:rotate(-5deg);animation-delay:.55s,0s}
.lfc2{left:12%;top:38%;transform:rotate(4deg);animation-delay:.7s,-2s}
.lfc3{left:2%;top:73%;transform:rotate(-3deg);animation-delay:.85s,-4s}
.lwave{position:absolute;right:-20px;top:0;height:100%;width:calc(clamp(70px,8vw,120px) + 20px);z-index:2;animation:lgSway 7s ease-in-out infinite alternate}
.lwave-b{display:none}
.lpanel{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;overflow-y:auto;position:relative;z-index:1}
.lsplit .loginbox{margin:auto;max-width:408px;border-radius:30px;padding:30px 28px 24px;background:#fff;box-shadow:0 26px 64px rgba(126,3,6,.16),0 0 0 1px rgba(213,62,15,.05)}
.lsplit .loginbox .lgo,.lsplit .loginbox .lword,.lsplit .loginbox .ltag{display:none}
.lhead{margin-bottom:18px;animation:lgUp .5s both}
.lhead h2{font-size:23px;font-weight:800;letter-spacing:-.01em;text-align:left;margin:0 0 4px}
.lhead p{font-size:13px;color:var(--muted);line-height:1.5}
/* input pil + ikon */
.lsplit .loginbox .lfield input:not([type=checkbox]){border-radius:999px;padding:13px 16px 13px 46px;background-repeat:no-repeat;background-position:16px center;background-size:18px 18px;border:1.5px solid #ece5e0;background-color:#fdfaf8}
.lsplit .loginbox .lfield input:focus{background-color:#fff}
.lsplit .loginbox .pwwrap input{padding-right:46px}
.lsplit .ltabs{border-radius:999px;padding:5px}
.lsplit .ltabs::before{border-radius:999px;top:5px;bottom:5px;left:5px;width:calc(50% - 5px)}
.lsplit .ltabs button{border-radius:999px}
.lsplit .lsubmit{border-radius:999px;padding:14px}
#lCode,#rCode,#fCode,#rName{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v11h16V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E")}
#lEmail,#rEmail,#fEmail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
#rUser{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E")}
#lPass,#rPass,#rpNew,#rpNew2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E")}
@keyframes lgFloatY{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes lgSway{from{transform:translateX(0)}to{transform:translateX(-12px)}}
@media (max-width:899px){
  .loginbg.lsplit{flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .lhero{flex:none;height:clamp(190px,30vh,250px);align-items:center;justify-content:center;padding-top:var(--sat)}
  .lhero-in{align-items:center;justify-content:center;gap:8px;padding:16px}
  .lh-copy,.lstage{display:none}
  .lh-word{height:44px;align-self:center}
  .lh-tag{display:block;font-size:12.5px;opacity:.92;text-align:center;animation:lgUp .7s .2s both}
  .lwave{display:none}
  .lwave-b{display:block;position:absolute;left:0;right:0;bottom:-1px;width:100%;height:46px;z-index:2;animation:lgSway 7s ease-in-out infinite alternate}
  .lpanel{flex:none;margin-top:-6px;padding:0 16px calc(28px + var(--sab));align-items:flex-start;overflow:visible}
  .lsplit .loginbox{padding:24px 20px 20px;border-radius:26px}
}
#rWa{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9a999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.4 1.8.7 2.7a2 2 0 01-.5 2.1L8.1 9.7a16 16 0 006 6l1.2-1.2a2 2 0 012.1-.4c.9.3 1.8.6 2.7.7a2 2 0 011.7 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:16px center;background-size:18px 18px}
.lhelp{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}
.lhelp a{color:var(--red);font-weight:700;text-decoration:none}
.lhelp a:hover{text-decoration:underline}