@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#082f49;--blue:#006f9f;--cyan:#12a9c7;--ice:#f4fbfe;--ink:#0b2638;--muted:#6b7f8d;--line:#dce8ee;--white:#fff;--green:#16824d;--red:#c53535;--shadow:0 24px 70px rgba(4,38,58,.22)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}body{background:var(--ice)}button,input{font:inherit}.page{min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(120deg,#052f49 0%,#075f86 38%,#09a4c2 100%)}.page:before{content:"";position:absolute;width:680px;height:680px;right:-230px;top:-270px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018)}.page:after{content:"";position:absolute;left:-220px;bottom:-300px;width:700px;height:700px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.header{position:relative;z-index:2;max-width:1400px;margin:auto;padding:28px 5vw;display:flex;align-items:center;justify-content:space-between;color:#fff}.danantara,.pln-wordmark,.unit-wordmark,.card-brand{display:flex;align-items:center;gap:11px}.danantara-symbol{width:40px;height:40px;border:1px solid rgba(255,255,255,.55);border-radius:12px;display:grid;place-items:center;font-weight:800}.danantara-name b,.pln-wordmark b,.unit-wordmark b,.card-brand b{display:block}.danantara-name span,.pln-wordmark span,.unit-wordmark span,.card-brand span{display:block;font-size:10px;opacity:.7;margin-top:3px}.header-right{display:flex;align-items:center;gap:24px}.pln-symbol,.card-pln-symbol{font-size:24px}.header-separator{width:1px;height:34px;background:rgba(255,255,255,.25)}.unit-wordmark span{letter-spacing:.08em}
.main{position:relative;z-index:1;max-width:1400px;margin:auto;min-height:calc(100vh - 125px);padding:55px 5vw 80px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:80px;align-items:center}.hero-copy{color:#fff;max-width:720px}.micro-label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#c9f6ff}.micro-label span{width:28px;height:2px;background:#83e8f8}.hero-copy h1{font-size:clamp(64px,8vw,112px);line-height:.86;letter-spacing:-.07em;margin:22px 0 12px;font-weight:800}.hero-copy h1 em{font-style:normal;color:#a7f2ff}.unit-title{font-size:15px;letter-spacing:.34em;font-weight:800}.hero-text{font-size:16px;line-height:1.8;color:rgba(255,255,255,.84);max-width:650px;margin:28px 0}.hero-rule{width:100%;max-width:610px;height:1px;background:rgba(255,255,255,.2);margin:30px 0}.quick-points{display:flex;gap:30px;flex-wrap:wrap}.quick-points>div{display:flex;gap:10px}.point-number{font-size:10px;color:#8be7f5;font-weight:800}.quick-points b{font-size:13px}.quick-points small{display:block;margin-top:4px;font-size:11px;color:rgba(255,255,255,.58)}.location-chip{display:inline-flex;align-items:center;gap:9px;margin-top:32px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);border-radius:999px;padding:10px 14px;font-size:10px;font-weight:800;letter-spacing:.12em}.pulse{width:7px;height:7px;background:#9cf4ff;border-radius:50%;box-shadow:0 0 0 5px rgba(156,244,255,.1)}
.login-card{width:100%;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-radius:26px;padding:30px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.card-top{display:flex;align-items:center;justify-content:space-between}.online-status{font-size:10px;font-weight:800;color:var(--green);display:flex;gap:7px;align-items:center}.online-status span{width:7px;height:7px;background:#20a862;border-radius:50%;box-shadow:0 0 0 4px #e5f7ed}.card-heading h2{font-size:30px;letter-spacing:-.04em;margin:28px 0 5px}.card-heading p{margin:0;color:var(--muted);font-size:13px}.card-divider{height:1px;background:var(--line);margin:22px 0}.field{margin:16px 0}.field label{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;margin-bottom:7px;color:#466170}.field-box{position:relative}.field-box>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#7b919d;font-size:13px}.field input{width:100%;height:48px;border:1px solid var(--line);border-radius:12px;padding:0 44px 0 38px;outline:none;background:#fbfdfe;color:var(--ink)}.field input:focus{border-color:#1aa9c7;box-shadow:0 0 0 4px rgba(18,169,199,.1)}.field-box button{position:absolute;right:7px;top:7px;height:34px;border:0;background:#edf7fa;color:#17627a;border-radius:8px;padding:0 8px;font-size:9px;font-weight:800;cursor:pointer}.form-options{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px;font-size:11px}.form-options label{display:flex;align-items:center;gap:6px;color:var(--muted)}.form-options button{border:0;background:none;color:var(--blue);cursor:pointer;font-weight:700;font-size:11px}.submit{width:100%;height:50px;border:0;border-radius:13px;background:linear-gradient(100deg,#006f9f,#0aa9c7);color:#fff;font-weight:800;display:flex;justify-content:center;align-items:center;gap:20px;cursor:pointer;box-shadow:0 10px 24px rgba(0,111,159,.2)}.submit:hover{transform:translateY(-1px)}.submit:disabled{opacity:.6}.card-security{display:flex;gap:10px;align-items:center;margin-top:20px;padding:11px 12px;background:#f2faf6;border:1px solid #d8eee1;border-radius:12px;color:var(--green)}.card-security b,.card-security small{display:block}.card-security b{font-size:10px}.card-security small{font-size:9px;margin-top:3px;color:#557468}.shield{font-size:13px}.card-footer{margin-top:18px;text-align:center;font-size:9px;color:#82939d;line-height:1.5}.card-footer b{color:#496371}.footer{position:relative;z-index:2;max-width:1400px;margin:auto;padding:0 5vw 24px;display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:9px;letter-spacing:.04em}.footer-right{font-weight:700}.success,.error{margin:12px 0;padding:10px 12px;border-radius:10px;font-size:11px}.success{background:#eaf8f0;color:var(--green)}.error{background:#fff0f0;color:var(--red)}.auth-simple{min-height:100vh;display:grid;place-items:center;padding:25px;background:linear-gradient(135deg,#06334e,#08a7c7)}.simple-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:34px;box-shadow:var(--shadow)}.brand-mark{font-size:30px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--blue);margin-top:10px}.simple-card h1{margin:10px 0 6px}.simple-card p{color:var(--muted);font-size:13px}.simple-card input{display:block;width:100%;height:48px;margin:12px 0;border:1px solid var(--line);border-radius:10px;padding:0 14px}.simple-card button{width:100%;height:48px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:800}.simple-card a{display:block;margin-top:16px;text-align:center;color:var(--blue);font-size:12px}
@media(max-width:1000px){.main{grid-template-columns:1fr;gap:35px;padding-top:35px}.login-card{max-width:560px;justify-self:center}.hero-copy{max-width:850px}.header-right{display:none}}@media(max-width:620px){.header{padding:20px 22px}.main{padding:30px 22px 50px}.hero-copy h1{font-size:62px}.quick-points{gap:16px}.footer{padding:0 22px 18px;display:block}.footer-right{margin-top:5px}}