*{box-sizing:border-box}html{min-height:100%;background:#fff}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#302b3d;background:#fff}button,input{font:inherit}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.13fr) minmax(430px,.87fr);background:#fff}.intro-panel{position:relative;overflow:hidden;background:linear-gradient(145deg,#faf7ff 0%,#f2e8ff 55%,#eadcf9 100%);border-right:1px solid #eee5f7}.intro-panel:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;left:-290px;top:-270px;background:rgba(139,91,199,.11)}.intro-panel:after{content:"";position:absolute;width:390px;height:390px;border-radius:50%;right:-210px;bottom:-200px;background:rgba(128,80,190,.11)}.intro-inner{position:relative;z-index:2;min-height:100vh;max-width:760px;margin:0 auto;padding:40px 52px 25px;display:flex;flex-direction:column}.brand-row{display:flex;align-items:center;gap:13px}.brand-mark{width:54px;height:54px;border-radius:16px;box-shadow:0 9px 22px rgba(102,67,147,.14);overflow:hidden}.brand-mark img{display:block;width:100%;height:100%}.brand-text strong{display:block;font-size:17px;letter-spacing:-.25px;color:#3e3448}.brand-text span{display:block;margin-top:3px;font-size:8px;letter-spacing:1.8px;font-weight:800;color:#947ca8}.intro-copy{margin-top:48px;max-width:580px}.section-label{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #e8ddf3;color:#7b56a4;font-size:9px;font-weight:900;letter-spacing:1.15px;box-shadow:0 6px 18px rgba(94,57,137,.06)}.intro-copy h1{margin:17px 0 12px;font-size:43px;line-height:1.07;letter-spacing:-1.8px;color:#33283e}.intro-copy h1 em{font-style:normal;color:#7446a9}.intro-copy p{max-width:570px;margin:0;color:#82758e;font-size:13px;line-height:1.75}.hero-students{position:relative;flex:1;min-height:280px;margin-top:4px;display:flex;align-items:flex-end;justify-content:center}.hero-students img{position:relative;z-index:3;width:min(460px,76%);height:auto;max-height:405px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 25px rgba(75,47,103,.13))}.hero-glow{position:absolute;z-index:1;width:355px;height:355px;border-radius:50%;bottom:20px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(144,96,201,.23) 0%,rgba(144,96,201,.08) 53%,rgba(144,96,201,0) 72%)}.bubble{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:900;color:#fff;background:#8658bb;box-shadow:0 10px 20px rgba(101,61,145,.2)}.bubble-one{width:31px;height:31px;left:20%;top:28%;font-size:15px}.bubble-two{width:23px;height:23px;right:19%;top:35%;font-size:12px;background:#aa7bd2}.bubble-three{width:40px;height:40px;right:14%;bottom:19%;font-size:15px;background:#71449f}.habit-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:-1px}.habit-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(145,113,176,.18);font-size:9px;font-weight:700;color:#80678e}.school-info{display:grid;grid-template-columns:1fr auto;gap:22px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(126,94,157,.16);font-size:9px;color:#8e7d98}.school-info div{display:flex;flex-direction:column;gap:3px}.school-info small{font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#a08cae}.school-info strong{font-size:10px;color:#6e577c}.form-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:35px 54px;background:#fff}.form-inner{width:100%;max-width:455px}.kemenag-line{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:34px;color:#b0a5b7}.kemenag-line span{height:1px;flex:1;background:#eee8f2}.kemenag-line small{font-size:7px;font-weight:900;letter-spacing:1.25px;white-space:nowrap}.login-card{width:100%;max-width:405px;margin:0 auto}.card-brand{display:flex;align-items:center;gap:11px;margin-bottom:32px}.mini-logo{width:44px;height:44px;border-radius:13px;overflow:hidden;box-shadow:0 8px 19px rgba(111,68,165,.15)}.mini-logo img{width:100%;height:100%;display:block}.card-brand span{display:block;font-size:8px;font-weight:900;letter-spacing:1.7px;color:#a18aa9}.card-brand strong{display:block;margin-top:3px;font-size:12px;color:#604773}.heading{margin-bottom:26px}.heading-label{display:block;margin-bottom:7px;color:#8152ad;font-size:12px;font-weight:900}.heading h2{margin:0;font-size:30px;line-height:1.13;letter-spacing:-1.2px;color:#342b3a}.heading p{margin:10px 0 0;color:#968b9e;font-size:11px}.login-alert{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:18px;padding:10px 13px;border:1px solid #f6ccd8;border-radius:12px;background:#fff2f5;color:#93415a;font-size:11px}.login-alert b{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e98ba4;color:#fff;font-size:11px}.login-card form label{display:block;margin:0 0 8px;font-size:11px;font-weight:800;color:#5f5368}.input-wrap{position:relative;margin-bottom:18px}.input-wrap input{width:100%;height:53px;padding:0 45px;border:1px solid #e3d9eb;border-radius:12px;background:#fcfbfd;color:#352e3e;font-size:12px;outline:none;transition:.2s}.input-wrap input::placeholder{color:#b6acbd}.input-wrap input:hover{border-color:#d3c1e1}.input-wrap input:focus{border-color:#9362ca;background:#fff;box-shadow:0 0 0 4px rgba(145,91,211,.09)}.input-icon{position:absolute;top:50%;left:15px;transform:translateY(-50%);display:flex;pointer-events:none}.input-icon svg{width:18px;height:18px;fill:none;stroke:#a48aba;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.password-toggle{position:absolute;right:8px;top:50%;width:34px;height:34px;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.password-toggle:hover{background:#f1eafa}.password-toggle img{width:18px;height:18px}.login-button{width:100%;height:53px;margin-top:2px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(100deg,#9965d3,#7046a9);color:#fff;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 14px 25px rgba(107,65,166,.2);transition:transform .2s,box-shadow .2s,opacity .2s}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 30px rgba(107,65,166,.25)}.login-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.login-button:disabled{opacity:.8;cursor:wait}.login-button.is-loading:after{content:"";width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.login-button.is-loading svg{display:none}.security-note{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:18px;color:#aaa0b3;font-size:9px}.security-note img{width:13px;height:13px}.form-inner footer{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px;font-size:9px;color:#a195a8}.form-inner footer strong{color:#7851a9}@keyframes spin{to{transform:rotate(360deg)}}button:focus-visible,input:focus-visible{outline:3px solid rgba(137,84,202,.18);outline-offset:2px}@media(max-width:980px){.login-page{grid-template-columns:1fr}.intro-panel{min-height:680px;border-right:0;border-bottom:1px solid #eee5f7}.intro-inner{min-height:680px;max-width:820px}.form-panel{padding:55px 30px 40px}.form-inner{max-width:500px}.login-card{max-width:430px}.kemenag-line{margin-bottom:30px}}@media(max-width:620px){.intro-panel{min-height:590px}.intro-inner{min-height:590px;padding:25px 21px 20px}.brand-mark{width:47px;height:47px;border-radius:14px}.brand-text strong{font-size:15px}.brand-text span{font-size:7px;letter-spacing:1.35px}.intro-copy{margin-top:32px}.section-label{font-size:8px;letter-spacing:.8px}.intro-copy h1{font-size:31px;letter-spacing:-1.1px}.intro-copy p{font-size:11px;line-height:1.6}.hero-students{min-height:225px;margin-top:0}.hero-students img{width:min(355px,90%);max-height:290px}.hero-glow{width:260px;height:260px;bottom:8px}.bubble-one{left:8%;top:30%}.bubble-two{right:8%;top:35%}.bubble-three{right:5%;bottom:17%}.habit-tags{margin-top:0}.habit-tags span{font-size:8px;padding:6px 8px}.school-info{grid-template-columns:1fr;margin-top:16px;gap:8px}.school-info div:nth-child(2){display:none}.form-panel{padding:38px 21px 28px}.kemenag-line{margin-bottom:26px}.kemenag-line small{font-size:6.5px;letter-spacing:.8px}.login-card{max-width:none}.card-brand{margin-bottom:25px}.heading h2{font-size:26px}.heading p{font-size:10px}.form-inner footer{margin-top:25px}}@media(max-width:370px){.intro-copy h1{font-size:28px}.hero-students{min-height:205px}.hero-students img{max-height:260px}.habit-tags span:nth-child(n+4){display:none}.heading h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v1.9.3 — logo madrasah dan Kementerian Agama bersumber dari Identitas Madrasah */
.identity-logos{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.identity-logo{width:48px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.8);border:1px solid rgba(126,94,157,.13);border-radius:13px;overflow:hidden;box-shadow:0 8px 18px rgba(102,67,147,.08)}
.identity-logo img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.kemenag-logo{width:40px;height:48px;background:rgba(255,255,255,.65);border-radius:11px}
.madrasah-logo{width:54px;height:54px}
.brand-text{min-width:0}
.kemenag-line{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:27px}
.kemenag-badge{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid #eee5f4;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(80,45,110,.06);overflow:hidden}
.kemenag-badge img{max-width:88%;max-height:88%;object-fit:contain}
.kemenag-caption{display:flex;align-items:center;gap:12px;width:100%;color:#b0a5b7}
.kemenag-caption span{height:1px;flex:1;background:#eee8f2}
.kemenag-caption small{font-size:7px;font-weight:900;letter-spacing:1.25px;white-space:nowrap}
@media(max-width:620px){.identity-logo{width:42px;height:46px}.kemenag-logo{width:35px;height:42px}.madrasah-logo{width:47px;height:47px}.brand-row{gap:9px}.kemenag-line{gap:7px;margin-bottom:24px}.kemenag-badge{width:38px;height:38px}.kemenag-caption{gap:8px}.kemenag-caption small{font-size:6.5px;letter-spacing:.8px}}