:root{color-scheme:light;--ink:#1b2d45;--muted:#718096;--blue:#087bc7;--line:#e7edf4}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}a{color:inherit;text-underline-offset:4px}.shell{max-width:1680px;margin:auto;padding:0 42px}header{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.institution{font-size:10px;letter-spacing:1.6px;font-weight:650;color:#64768c}.legacy{font-size:11px;text-decoration:none;color:#576b82}.legacy span{margin-left:12px}main{display:grid;grid-template-columns:1fr 1fr;min-height:730px}.story{position:relative;overflow:hidden;border-radius:24px;isolation:isolate;min-width:0;background:#3284b3;grid-column:2;grid-row:1}.hero-photo{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:48% center}.photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,#09294c36 0%,transparent 35%,#082c52a6 67%,#06264eee 100%)}.photo-top{position:absolute;top:29px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff}.photo-tag{font-size:8px;letter-spacing:1px;padding:10px 12px;border:1px solid #ffffff66;border-radius:40px;background:#12384f33;backdrop-filter:blur(8px)}.photo-tag>span{color:#ffdc68;margin-right:7px}.photo-number{font-size:11px}.photo-copy{position:absolute;bottom:30px;left:40px;right:40px;color:white}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#c9ecff}h1{font-size:clamp(44px,4.5vw,70px);letter-spacing:-2.5px;line-height:1.08;font-weight:600;margin:21px 0 20px}h1 em{font-style:normal;color:#ffde70}.photo-copy>p{font-size:13px;line-height:1.8;max-width:330px;color:#e0edf8;margin-bottom:30px}.photo-footer{border-top:1px solid #ffffff40;padding-top:19px;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.4px}.photo-footer b{color:#ffdc68;margin:0 10px}.photo-footer>span:last-child{font-size:26px}.panel{grid-column:1;grid-row:1;display:flex;justify-content:center;align-items:center;padding:25px 55px 38px 15px}.form-wrap{width:100%;max-width:365px}.brand{display:inline-block;margin-bottom:26px;line-height:0}.brand img{display:block;width:192px;height:auto}.welcome-label{font-size:9px;letter-spacing:1.4px;font-weight:600;color:#6d7c91;display:flex;align-items:center;gap:8px}.welcome-label>span{width:7px;height:7px;background:#25b9be;border-radius:50%;box-shadow:0 0 0 4px #25b9be12}h2{font-size:44px;line-height:1.12;letter-spacing:-1.8px;font-weight:650;margin:18px 0 13px}.intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 27px}label{display:block;font-size:11px;font-weight:600;margin:21px 0 9px}input:not([type=hidden]):not([type=checkbox]){width:100%;min-height:53px;border:1px solid #dfe7f0;border-radius:10px;background:#f8fafd;padding:15px 16px;color:var(--ink);font-size:12px;outline:none;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#94a0b1}input:focus{border-color:#1685d4;box-shadow:0 0 0 3px #1685d414;background:#fff}.password-wrap{position:relative}.password-wrap input{padding-right:65px}#reveal{position:absolute;right:6px;top:6px;min-height:41px;padding:0 10px;border:0;background:none;color:#687d95;font-size:10px;cursor:pointer}.submit{width:100%;min-height:53px;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;margin-top:26px;background:linear-gradient(105deg,#087dce,#16a5cf);box-shadow:0 7px 17px #1685d425;border:0;border-radius:10px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:box-shadow .2s,transform .2s}.submit>span:last-child{font-size:23px;font-weight:400}.submit:hover:not(:disabled){box-shadow:0 9px 22px #1685d442;transform:translateY(-1px)}.submit:disabled{opacity:.5;cursor:not-allowed}.security{font-size:9px;line-height:1.8;color:#8793a5;margin:17px 0 0}.security a{text-decoration-color:#c5ced9}.help{padding-top:19px;margin-top:25px;border-top:1px solid var(--line);font-size:10px}.help strong{font-weight:600}.help p{margin:7px 0 0;font-size:10px;color:var(--muted);line-height:1.7}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:65px;font-size:9px;color:#7d8a9c}footer a{text-decoration:none}.shell::before{content:"";display:block;height:4px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,#ee665b 0% 16.6%,#ffa744 16.6% 33.2%,#f5d14c 33.2% 49.8%,#9bce65 49.8% 66.4%,#63c7cc 66.4% 83%,#598fdf 83% 100%)}.alert,.notice{font-size:12px;line-height:1.7;border:1px solid #f1d4c3;border-radius:9px;padding:12px 14px;background:#fff5ed;color:#8a4926;margin:16px 0}.notice{background:#eef8ff;border-color:#cce9fb;color:#296087}a:focus-visible,button:focus-visible{outline:3px solid #efb137;outline-offset:4px}.grecaptcha-badge{z-index:5}@media(min-width:1500px){main{min-height:820px}.panel{padding-right:90px}.form-wrap{max-width:390px}}@media(max-width:1100px){.shell{padding:0 26px}.panel{padding:25px 35px 30px 5px}.photo-copy{left:28px;right:28px}.photo-top{left:23px;right:23px}.photo-tag{font-size:7px;letter-spacing:.5px}h1{font-size:50px}h2{font-size:40px}}@media(max-width:760px){.shell{padding:0 22px}header{height:64px}.institution{font-size:8px;letter-spacing:.6px}.legacy{font-size:10px}.legacy span{margin-left:4px}main{display:flex;flex-direction:column;min-height:0}.panel{order:0;padding:24px 10px 34px}.form-wrap{max-width:410px}.brand{margin-bottom:25px}.brand img{width:177px}h2{font-size:38px;margin-top:17px}h2 br{display:none}.intro{font-size:12px}.story{order:1;min-height:310px;border-radius:18px}.hero-photo{object-position:center 49%}.photo-shade{background:linear-gradient(180deg,#07264d10,#07264dbd)}.photo-top{top:19px;left:20px;right:20px}.photo-copy{bottom:22px;left:24px;right:24px}.photo-copy .eyebrow,.photo-copy>p,.photo-footer{display:none}h1{font-size:36px;margin:0;letter-spacing:-1.2px}footer{padding:22px 0 76px;align-items:flex-start;font-size:8px;line-height:1.7}.security{font-size:9px}}@media(max-width:360px){.shell{padding:0 16px}.panel{padding-left:0;padding-right:0}h2{font-size:34px}.institution{max-width:140px;line-height:1.6}.story{min-height:285px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Layout login ringkas */
.shell{max-width:1100px;padding:0 32px}header{height:61px}main{min-height:0;grid-template-columns:1fr 1fr;max-width:960px;margin:20px auto 0;border:1px solid #e7edf4;border-radius:20px;box-shadow:0 18px 65px #28466a0a;overflow:hidden}.panel{padding:32px 38px}.form-wrap{max-width:330px}.brand{margin-bottom:17px}.brand img{width:154px}.welcome-label{font-size:8px;letter-spacing:1px}h2{font-size:27px;line-height:1.25;letter-spacing:-.8px;margin:14px 0 8px}.intro{font-size:11px;margin-bottom:20px}label{margin:17px 0 7px}input:not([type=hidden]):not([type=checkbox]){min-height:46px;padding:12px 14px}.password-wrap input{padding-right:65px}#reveal{top:3px;min-height:40px}.submit{min-height:47px;margin-top:21px;padding:11px 15px}.help{margin-top:21px;padding-top:16px}.help p{margin-top:5px}.story{border-radius:0;min-height:520px}.photo-top{top:23px;left:22px;right:22px}.photo-tag{font-size:7px;letter-spacing:.5px;padding:9px 10px}.photo-number{display:none}.photo-copy{left:28px;right:28px;bottom:27px}h1{font-size:44px;letter-spacing:-1.7px;margin:15px 0}.eyebrow{font-size:8px;letter-spacing:1.3px}.photo-copy>p{font-size:11px;line-height:1.75;margin-bottom:22px;max-width:290px}.photo-footer{font-size:10px;padding-top:15px}footer{max-width:960px;margin:auto;min-height:57px;font-size:9px;padding-bottom:55px}@media(min-width:1500px){main{min-height:0}.panel{padding:36px 42px}.form-wrap{max-width:330px}.story{min-height:540px}}@media(max-width:1050px){.shell{padding:0 25px}.panel{padding:30px}.photo-copy{left:25px;right:25px}h1{font-size:40px}}@media(max-width:760px){.shell{max-width:520px;padding:0 20px}header{height:56px}main{display:block;margin:14px auto 0;border-radius:17px}.panel{padding:27px 28px 25px}.form-wrap{max-width:100%}.brand{margin-bottom:17px}.brand img{width:148px}h2{font-size:26px}.intro{font-size:11px}.story{display:none}footer{padding:19px 0 76px;min-height:0;font-size:8px}.institution{font-size:8px}.legacy{font-size:10px}}@media(max-width:360px){.shell{padding:0 14px}.panel{padding:24px 20px}h2{font-size:24px}}
/* Kartu lebih lapang dan terpusat di layar. */
.shell{max-width:1280px;min-height:100svh;display:flex;flex-direction:column;padding:0 36px 40px}header{flex-shrink:0}main{width:100%;max-width:1120px;margin:auto;flex-shrink:0}.panel{padding:45px 54px}.form-wrap{max-width:380px}.brand img{width:184px}.brand{margin-bottom:24px}.welcome-label{font-size:9px}h2{font-size:33px;margin-top:19px}.intro{font-size:13px;margin-bottom:26px}label{font-size:12px;margin-top:22px}input:not([type=hidden]):not([type=checkbox]){min-height:53px;font-size:13px;padding:15px 16px}.password-wrap input{padding-right:65px}#reveal{top:6px;font-size:11px}.submit{min-height:54px;font-size:13px;margin-top:26px}.story{min-height:620px}.photo-copy{left:36px;right:36px;bottom:34px}h1{font-size:53px}.photo-copy>p{font-size:13px;max-width:340px}.photo-top{top:28px;left:28px;right:28px}.photo-tag{font-size:8px}.account-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;margin-top:28px;padding-top:21px;color:#7d8a9c}.account-footer a{color:#56728e;text-decoration:none}.account-footer a:hover{text-decoration:underline}@media(min-width:1500px){main{max-width:1160px}.panel{padding:48px 58px}.form-wrap{max-width:390px}.story{min-height:650px}}@media(max-width:1050px){.shell{padding:0 26px 30px}.panel{padding:36px}.brand img{width:170px}h2{font-size:29px}.story{min-height:590px}h1{font-size:45px}.photo-copy{left:27px;right:27px}}@media(max-width:760px){.shell{max-width:560px;padding:0 22px 35px}.panel{padding:35px}.form-wrap{max-width:100%}.brand img{width:178px}h2{font-size:31px}.intro{font-size:12px}.account-footer{font-size:10px}.story{display:none}main{margin:auto;max-width:480px}}@media(max-width:380px){.shell{padding:0 16px 25px}.panel{padding:28px 23px}h2{font-size:27px}.account-footer{font-size:9px;gap:10px}}@media(max-height:740px) and (min-width:761px){.shell{padding-bottom:24px}main{margin:12px auto}.story{min-height:570px}.panel{padding-top:30px;padding-bottom:30px}.brand{margin-bottom:18px}}
/* Label tombol terpusat, terlepas dari ikon arah. */
.submit{position:relative;justify-content:center;padding-left:44px;padding-right:44px}.submit>span:last-child{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
/* Banner foto pada ponsel tetap memberi konteks tanpa mendominasi form. */
@media(max-width:760px){main{display:flex;flex-direction:column}.story{display:block;order:0;min-height:0;height:190px;flex-shrink:0;border-radius:0}.hero-photo{object-position:center 47%}.photo-shade{background:linear-gradient(180deg,#082c5225 0%,#082c5245 35%,#082c52dd 100%)}.photo-top{top:16px;left:21px;right:21px}.photo-tag{font-size:7px;padding:7px 10px;letter-spacing:.5px}.photo-copy{left:23px;right:23px;bottom:19px}.photo-copy h1{font-size:30px;line-height:1.1;letter-spacing:-.9px;margin:0}.photo-copy h1 br{display:none}.photo-copy h1 em{display:block}.photo-copy .eyebrow,.photo-copy>p,.photo-footer{display:none}.panel{order:1;padding:27px 30px 30px}.brand{margin-bottom:19px}.brand img{width:158px}.welcome-label{font-size:8px}h2{font-size:28px;margin-top:15px}.intro{margin-bottom:21px}label{margin-top:19px}.account-footer{margin-top:24px}main{margin:12px auto 0}.shell{padding-bottom:32px}}@media(max-width:380px){.story{height:165px}.photo-copy h1{font-size:27px}.photo-top{left:19px}.photo-copy{left:21px}.panel{padding:25px 23px 27px}.brand img{width:147px}h2{font-size:25px}}
/* Pada HP, foto memenuhi latar dan kartu login mengambang di atasnya. */
@media(max-width:760px){body{background:#143a50 url('/login/img/pos-hidrologi.jpg') center center/cover fixed no-repeat}body::before{content:"";position:fixed;inset:0;background:linear-gradient(165deg,#092e4d4d 0%,#123b5066 40%,#092e4dbd 100%);pointer-events:none}.shell{position:relative;max-width:560px;min-height:100svh;padding:0 22px 40px}.shell::before{position:fixed;z-index:2}header{height:66px;position:relative}.institution{color:#fff;text-shadow:0 1px 8px #092e4d70}.legacy{color:#fff}.legacy span{color:#ffe49c}main{position:relative;isolation:isolate;display:flex;flex-direction:column;margin:auto;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;max-width:440px;padding-top:102px}.story{position:absolute;top:0;left:0;right:0;height:102px;min-height:0;background:none;border-radius:0;overflow:visible;pointer-events:none}.hero-photo,.photo-shade,.photo-top{display:none}.photo-copy{left:5px;right:5px;bottom:22px;color:#fff;text-shadow:0 2px 16px #092e4d55}.photo-copy h1{font-size:32px;line-height:1.1;letter-spacing:-.9px;margin:0}.photo-copy h1 em{display:block;color:#ffde70}.panel{position:relative;z-index:1;background:#fff;border:1px solid #ffffffd9;border-radius:23px;padding:29px 30px 28px;box-shadow:0 22px 65px #041c4266,0 4px 14px #041c4226}.brand{margin-bottom:18px}.brand img{width:158px}.form-wrap{max-width:100%}.welcome-label{font-size:8px}h2{font-size:28px;margin-top:15px}.intro{font-size:12px;margin-bottom:20px}.account-footer{margin-top:23px}.grecaptcha-badge{z-index:5}}@media(max-width:380px){.shell{padding:0 17px 35px}header{height:61px}main{padding-top:94px}.story{height:94px}.photo-copy{bottom:21px}.photo-copy h1{font-size:29px}.panel{padding:26px 23px;border-radius:20px}.brand img{width:147px}h2{font-size:25px}}@media(max-width:760px) and (prefers-reduced-motion:reduce){body{background-attachment:scroll}}

.remember-option{display:flex;align-items:center;gap:10px;width:fit-content;min-height:32px;margin:15px 0 0;color:#526b84;font-size:12px;font-weight:400;cursor:pointer}.remember-option input[type=checkbox]{appearance:auto;flex:0 0 17px;width:17px;height:17px;margin:0;padding:0;accent-color:#087dce;cursor:pointer}.remember-option input:focus-visible{outline:3px solid #efb137;outline-offset:3px;box-shadow:none}.remember-option+.submit{margin-top:18px}