@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('login-assets/plus-jakarta-sans-400.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('login-assets/plus-jakarta-sans-500.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('login-assets/plus-jakarta-sans-600.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('login-assets/plus-jakarta-sans-700.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('login-assets/plus-jakarta-sans-800.ttf') format('truetype')}
*{box-sizing:border-box}body{margin:0;padding:0;background:#f4f7ff;font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;line-height:1.5;color:#1e3a8a}button,input{font:inherit}.login-container{display:flex;min-height:100vh;min-height:100dvh}.left-side{width:45%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,rgba(30,58,138,.92) 0%,rgba(23,37,84,.85) 100%),url('login-assets/kampus.jpg');background-size:cover;background-position:center;padding:32px 24px}.shape{position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.1);animation:float 6s ease-in-out infinite}.shape-1{width:150px;height:150px;top:10%;left:10%}.shape-2{width:250px;height:250px;bottom:5%;right:-50px;background:rgba(249,115,22,.2);animation-delay:2s}.shape-3{width:100px;height:100px;top:50%;left:20%;animation-delay:4s}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(10deg)}}.brand-logo{width:100px;height:auto;max-height:120px;object-fit:contain;margin-bottom:25px;background:#fff;padding:10px;border-radius:15px;box-shadow:0 0 15px rgba(249,115,22,.6)}.left-side h1{font-weight:800;font-size:22px;line-height:1.2;text-align:center;margin:0 0 10px;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.3)}.left-side p{text-align:center;opacity:.9;font-size:16px;margin:0 0 16px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.right-side{width:55%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;position:relative;padding:40px 0}.form-wrapper{width:100%;max-width:380px;padding:20px;animation:slideIn .7s ease}@keyframes slideIn{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:translateX(0)}}.form-wrapper h2{color:#1e3a8a;font-weight:800;font-size:28px;line-height:1.2;margin:0 0 5px}.subtitle{color:#64748b;margin:0 0 35px;font-size:15px;line-height:1.5}.form-group{position:relative;margin-bottom:25px}.form-group input{width:100%;padding:15px 15px 15px 50px;border:2px solid #e2e8f0;border-radius:12px;font-size:15px;line-height:1.5;transition:border-color .2s,box-shadow .2s,background .2s;background:#f8fafc;color:#334155;outline-offset:3px}.form-group input::placeholder{color:#64748b;opacity:1}.form-group input:focus{outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.form-group svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#94a3b8;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.form-group input:focus+svg{color:#2563eb}.btn-login{display:block;background:linear-gradient(90deg,#2563eb 0%,#1e3a8a 100%);color:#fff;font-weight:700;padding:15px;border:0;border-radius:12px;width:100%;font-size:16px;line-height:1.5;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 15px rgba(37,99,235,.3)}.btn-login:hover{background:linear-gradient(90deg,#f97316 0%,#ea580c 100%);transform:translateY(-3px);box-shadow:0 8px 20px rgba(249,115,22,.4)}.btn-login:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:4px}.copyright{margin:24px 0 0;text-align:center;color:#64748b;font-size:14px}.alert{font-size:14px;border-radius:10px;margin-bottom:20px;padding:10px 15px}.alert-error{color:#842029;background:#f8d7da;border:1px solid #f5c2c7}.alert-success{color:#0f5132;background:#d1e7dd;border:1px solid #badbcc}.login-help{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:380px;color:#64748b;text-align:center;font-size:12px;z-index:2}.login-help summary{cursor:pointer;list-style-position:inside}.login-help>div{position:absolute;bottom:28px;background:#fff;padding:16px;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 30px #0f172a15;text-align:left}.login-help p{margin:0 0 10px}.login-help a{color:#1e3a8a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:768px){.left-side{display:none}.right-side{width:100%}.form-wrapper{max-width:400px;padding:24px}.form-wrapper h2{font-size:27px}}@media(max-height:600px){.right-side{padding-top:20px;padding-bottom:20px}.login-help{position:relative;bottom:auto;left:auto;transform:none;margin-bottom:10px}.login-help>div{position:static;margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}