:root{color-scheme:light;--navy:#172d53;--gold:#ebc573;--ink:#1a2d49;--muted:#65758c}
*{box-sizing:border-box}
html{min-height:100%;background:#142d47}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;font-family:"Segoe UI",Arial,sans-serif;color:white;isolation:isolate;position:relative}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait}
.landscape,.landscape-shade{position:fixed;inset:0;z-index:-3;pointer-events:none}
.landscape{background:url("/operasi/img/login/bendungan.jpg") center 51%/cover no-repeat}
.landscape-shade{z-index:-2;background:linear-gradient(90deg,rgba(10,31,53,.87) 0%,rgba(12,35,54,.64) 35%,rgba(16,42,61,.14) 70%,rgba(15,35,56,.42)),linear-gradient(0deg,rgba(8,28,47,.65),transparent 60%,rgba(10,30,51,.2))}
.landscape-wave{position:absolute;bottom:0;left:0;width:100%;height:145px;z-index:-1;pointer-events:none}
.masthead{width:100%;max-width:1560px;align-self:center;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 64px}
.institution{display:flex;gap:13px;align-items:center}.institution-mark{width:43px;height:46px;border:1px solid #ebc57380;border-radius:9px;display:grid;place-items:center;background:#132c4e8a}.institution-mark svg{width:29px;height:29px;fill:none;stroke:var(--gold);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.institution strong{display:block;font-size:12px;letter-spacing:1.15px;font-weight:700}.institution small{display:block;font-size:12px;color:#d4e0ea;margin-top:6px}.masthead-note{font-size:12px;color:#e1e9f1;letter-spacing:.25px}
.login-layout{width:min(1200px,calc(100% - 128px));margin:22px auto 30px;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 426px;gap:80px;align-items:center}
.welcome{padding:12px 0 0}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.2px;margin:0 0 22px;display:flex;align-items:center;gap:10px;color:#e5edf4}.eyebrow span{height:7px;width:7px;background:var(--gold);border-radius:50%}
h1{font-size:clamp(48px,5.4vw,76px);letter-spacing:-3.8px;line-height:1.06;margin:0 0 17px;font-weight:750}h1 span{color:var(--gold)}.app-name{font-size:22px;line-height:1.55;font-weight:400;margin:0;color:#f1f4f8}.gold-rule{width:44px;height:3px;background:var(--gold);margin:27px 0 23px;border-radius:2px}
.welcome h2{font-size:clamp(26px,2.6vw,35px);line-height:1.3;letter-spacing:-.7px;font-weight:600;margin:0 0 16px}.welcome h2 span{color:var(--gold)}.welcome-copy{max-width:390px;font-size:14px;line-height:1.8;color:#e0e8ef;margin:0}
.mascot-welcome{display:flex;align-items:center;gap:15px;margin-top:28px}.mascot{height:147px;width:132px;object-fit:contain;filter:drop-shadow(0 10px 12px #06172655)}.welcome-kicker{color:var(--gold);font-size:9px;letter-spacing:1.25px;font-weight:700}.mascot-welcome p{font-size:13px;line-height:1.75;margin:7px 0;color:#edf3f8}
.login-card{background:#fff;color:var(--ink);border-radius:22px;box-shadow:0 24px 80px #07162955;position:relative;padding:27px 36px 0;overflow:hidden;border:1px solid #ffffffa1;width:100%;}
.card-topline{height:4px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,#233d68 0%,#233d68 70%,var(--gold) 70%)}
.brand-logo{width:220px;height:136px;margin:0 auto 2px;overflow:hidden}.brand-logo img{display:block;width:220px;height:220px;max-width:none;transform:translateY(-40px)}
.card-eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:700;color:#778397;text-align:center;margin:2px 0 9px}.login-card h2{font-size:27px;letter-spacing:-.65px;margin:0 0 9px;text-align:center;font-weight:700}.card-description{font-size:12px;line-height:1.7;color:var(--muted);text-align:center;margin:0 0 26px}
.field{margin-bottom:19px}.field label{display:block;font-size:12px;font-weight:650;margin-bottom:8px}.input-wrap{display:flex;align-items:center;border:1px solid #dce3ec;border-radius:9px;background:#f9fbfd;transition:border-color .15s,box-shadow .15s;position:relative}
.input-wrap:focus-within{border-color:#375c93;box-shadow:0 0 0 3px #31568d18;background:#fff}.input-wrap>svg{position:absolute;left:14px;width:17px;height:17px;fill:none;stroke:#8190a4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.input-wrap input{min-width:0;width:100%;height:49px;border:0;background:transparent;outline:0;border-radius:9px;font-size:13px;color:var(--ink);padding:0 42px}.input-wrap input::placeholder{color:#8893a4}.password-toggle{border:0;background:transparent;color:#73849b;display:grid;place-items:center;width:44px;height:47px;position:absolute;right:0;border-radius:8px}.password-toggle:hover{color:var(--navy);background:#eaf0f6}.password-toggle svg{height:19px;width:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.eye-slash{display:none}.password-toggle[aria-pressed=true] .eye-slash{display:block}
button:focus-visible,a:focus-visible{outline:3px solid #d3a744;outline-offset:4px}
.submit-button{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:49px;margin-top:25px;border:0;border-radius:9px;background:var(--navy);color:#fff;font-size:13px;font-weight:650;box-shadow:0 5px 12px #172d5315;transition:background .18s,transform .18s}.submit-button svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.submit-button:hover:not(:disabled){background:#244574;transform:translateY(-1px)}.submit-button:disabled{opacity:.7}.account-help{font-size:10px;line-height:1.65;text-align:center;color:#77869a;margin:16px 0 23px}
.login-error{font-size:12px;line-height:1.6;color:#8d332b;background:#fff2ef;border:1px solid #f1d5cf;border-radius:8px;padding:11px 13px;margin:4px 0 0}.login-error[hidden]{display:none}
.card-bottom{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;color:#718097;border-top:1px solid #edf0f4;margin:0 -36px;padding:15px 20px;background:#fcfdff}.card-bottom svg{width:14px;height:14px;stroke:#79899c;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login-footer{width:min(1312px,calc(100% - 128px));align-self:center;display:flex;justify-content:space-between;gap:16px;padding:22px 0 26px;color:#ced8e5;z-index:1}.login-footer p{font-size:10px;margin:0;letter-spacing:.3px}.login-footer span{color:var(--gold);padding:0 7px}
@media(min-width:1600px){.login-layout{margin-top:36px;margin-bottom:48px;gap:120px;grid-template-columns:minmax(0,1fr) 450px}.login-card{padding-top:33px}.landscape-wave{height:180px}}
@media(max-width:1100px){.masthead{padding:25px 36px}.login-layout{width:calc(100% - 72px);gap:36px;grid-template-columns:minmax(0,1fr) 396px}.login-footer{width:calc(100% - 72px)}.app-name{font-size:19px}.mascot{height:124px;width:112px}.welcome-kicker{font-size:8px}.mascot-welcome{gap:8px}.mascot-welcome p{font-size:12px}}
@media(max-width:800px){.masthead{padding:24px;justify-content:center}.masthead-note{display:none}.institution strong{font-size:10px;letter-spacing:.65px}.institution small{font-size:11px}.login-layout{width:min(440px,calc(100% - 36px));display:flex;flex-direction:column;gap:24px;margin:15px auto 20px}.welcome{position:relative;text-align:center;width:100%;padding:0 84px 0 0;min-height:115px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:12px;gap:6px}h1{font-size:43px;letter-spacing:-2px;margin-bottom:8px}.app-name{font-size:12px;line-height:1.6;text-align:left}.gold-rule,.welcome h2,.welcome-copy,.mascot-welcome>div{display:none}.mascot-welcome{position:absolute;right:-5px;bottom:0;margin:0;display:block}.mascot{height:123px;width:111px}.login-card{padding-top:20px}.brand-logo{height:121px;width:200px}.brand-logo img{width:200px;height:200px;transform:translateY(-38px)}.card-description{margin-bottom:23px}.login-card h2{font-size:25px}.login-footer{width:calc(100% - 40px);display:block;text-align:center;padding:18px 0 23px}.login-footer p+p{margin-top:10px}.landscape{background-position:39% center}.landscape-shade{background:linear-gradient(180deg,#102d4bd4,#16354e75 50%,#102b48e8)}.landscape-wave{height:90px}}
@media(max-width:380px){.institution{gap:9px}.institution strong{font-size:9px}.institution small{font-size:10px}.institution-mark{width:36px;height:40px}.login-card{padding-left:23px;padding-right:23px}.card-bottom{margin-left:-23px;margin-right:-23px}.welcome{padding-right:78px}h1{font-size:38px}.eyebrow{font-size:7px}.mascot{width:92px;height:110px}.app-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:800px){.input-wrap input{font-size:16px}.landscape-wave{display:none}.login-footer{width:100%;background:#112943;border-top:1px solid #ebc57365;padding:18px 20px 23px}}