:root{--navy:#061d35;--blue:#1489d8;--blue2:#0a4f84;--sky:#4a91c9;--red:#d9002b;--bg:#f3f7fb;--card:#fff;--line:#dbe7f1;--text:#17324d;--muted:#6d8294}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.top{background:radial-gradient(circle at 82% 18%,#177ebc55 0,transparent 24%),linear-gradient(115deg,#061d35,#073d67 55%,#0a5d91);color:white;min-height:205px;padding:32px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;overflow:hidden}
.top:after{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(#54a7d61c 1px,transparent 1px),linear-gradient(90deg,#54a7d61c 1px,transparent 1px),radial-gradient(circle at 15% 20%,#fff 0 1px,transparent 1px);background-size:32px 32px,32px 32px,26px 26px}
.identity,.actions{position:relative;z-index:1}.identity{display:flex;align-items:center;gap:22px}.logo{width:116px;height:116px;border-radius:25px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px #7fc5ee55,0 8px 30px #001b303f,0 0 28px #27a6ee22;overflow:hidden}.logo img{width:82px;height:82px;object-fit:contain}.logo-fallback{font-size:30px;font-weight:900;color:#4a91c9}.logo-fallback em{font-style:normal;color:#d9002b}.identity small{font-size:18px}.identity h1{font-size:25px;margin:7px 0 0;letter-spacing:.2px}.actions{display:flex;gap:12px}.action{border:0;background:linear-gradient(135deg,#0b5487,#0a3154);color:white;border:1px solid #3d8fc055;box-shadow:0 0 18px #188fd322;padding:15px 20px;border-radius:7px;font-size:15px;cursor:pointer}.wrap{max-width:1240px;margin:auto;padding:38px 5% 55px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.heading h2{font-size:29px;margin:0}.heading p{color:var(--muted);margin:5px 0 0;font-size:13px}.search{border:1px solid #dce2e7;border-radius:9px;background:#fff;padding:11px 14px;width:310px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.module{background:#fff;border-radius:13px;min-height:205px;box-shadow:0 8px 24px #0c39530d;border:1px solid #dce9f3;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;cursor:pointer;transition:.18s}.module:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#38a8ea,transparent);opacity:.15}.module:hover{transform:translateY(-4px);box-shadow:0 14px 34px #0a41631d,0 0 22px #1496df12;border-color:#92c9e8}.module:hover:before{opacity:1}.icon{width:62px;height:62px;border-radius:16px;margin:0 auto 15px;display:grid;place-items:center;color:#fff;font-size:27px;font-weight:800}.module h3{margin:0;font-size:16px;font-weight:600}.module p{font-size:11px;color:var(--muted);max-width:260px;line-height:1.45;margin:8px auto 0}.status{display:inline-block;margin-top:10px;font-size:9px;padding:4px 7px;border-radius:999px;background:#edf6ff;color:#0870bd;font-weight:700}
.group-title{font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:#607486;margin:36px 0 13px;font-weight:800}.footer{background:white;border-top:1px solid var(--line);padding:18px 5%;font-size:11px;display:flex;justify-content:space-between;color:#667786}
.overlay{display:none;position:fixed;inset:0;background:#eef5fb;z-index:20;overflow:auto}.overlay.show{display:block}.bar{background:linear-gradient(90deg,#0a5793,#07518a);color:white;padding:13px 20px;display:flex;align-items:center;justify-content:space-between}.back{background:#ffffff1d;border:1px solid #ffffff33;color:white;border-radius:7px;padding:8px 12px;cursor:pointer}.dash{padding:22px;max-width:1400px;margin:auto}.dash h2{margin:0}.dash p{color:#71849a}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}.kpi,.panel{background:#fff;border:1px solid #dce7f0;border-radius:13px;padding:16px}.kpi b{display:block;font-size:25px;margin-top:5px;color:#15395b}.kpi small{color:#6d8194}.panels{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:12px}.panel{min-height:260px}.bars{margin-top:18px}.r{display:grid;grid-template-columns:90px 1fr 38px;gap:8px;align-items:center;margin:13px 0;font-size:11px}.track{height:13px;background:#edf2f6}.track i{display:block;height:100%}.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.q{background:white;border:1px solid #dce7f0;border-radius:10px;padding:12px;font-size:11px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.top{min-height:180px}.logo{width:90px;height:90px}.identity h1{font-size:20px}.actions{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.panels{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.top{padding:24px 18px}.identity{gap:14px}.logo{width:72px;height:72px;border-radius:18px}.logo b{font-size:23px}.identity small{font-size:13px}.identity h1{font-size:17px}.wrap{padding:28px 18px}.heading{display:block}.search{width:100%;margin-top:15px}.grid{grid-template-columns:1fr;gap:15px}.module{min-height:165px}.footer{display:block;line-height:1.8}.kpis,.quick{grid-template-columns:1fr}}

body:before{content:"";position:fixed;width:420px;height:420px;border-radius:50%;background:#149be60a;filter:blur(45px);right:-180px;top:240px;pointer-events:none}
.heading h2{color:#102f4b;letter-spacing:-.5px}.group-title{color:#0a568c}.status{background:linear-gradient(90deg,#eaf6ff,#f7fbff);border:1px solid #d8eaf7}
.icon{box-shadow:0 8px 20px #0c365825, inset 0 1px #ffffff55}
.search:focus{outline:none;border-color:#4ca7db;box-shadow:0 0 0 3px #4ca7db18}

body.locked{overflow:hidden}#portal{opacity:0;pointer-events:none}#portal.ready{opacity:1;pointer-events:auto;animation:portalIn .8s ease}
.splash{position:fixed;z-index:1000;inset:0;background:radial-gradient(circle at 50% 45%,#0b5683 0,#061d35 38%,#020b14 100%);display:grid;place-items:center;color:white;overflow:hidden;transition:opacity .65s,visibility .65s}.splash.leave{opacity:0;visibility:hidden}.gridfx{position:absolute;inset:-30%;background-image:linear-gradient(#35a8e018 1px,transparent 1px),linear-gradient(90deg,#35a8e018 1px,transparent 1px);background-size:48px 48px;transform:perspective(500px) rotateX(58deg) translateY(32%);animation:gridmove 4s linear infinite}.beam{position:absolute;width:2px;height:80vh;background:linear-gradient(transparent,#45c6ff,transparent);box-shadow:0 0 28px #45c6ff;animation:beam 2.2s ease-in-out infinite}.splash-core{text-align:center;z-index:2}.sjp-mark{font-size:72px;font-weight:900;letter-spacing:-6px;text-shadow:0 0 28px #1c9ee755}.sjp-mark .red{color:#d9002b}.sjp-mark b{font-size:28px;color:#54bdf5;margin-left:12px;letter-spacing:0}.scanline{height:1px;width:280px;margin:16px auto;background:linear-gradient(90deg,transparent,#58c7ff,transparent);box-shadow:0 0 15px #58c7ff}.splash-title{font-size:17px;letter-spacing:5px;font-weight:700}.splash-sub{font-size:9px;letter-spacing:3px;color:#8bc7e8;margin-top:10px}.loader{width:240px;height:3px;background:#ffffff15;margin:32px auto 12px;overflow:hidden}.loader i{display:block;height:100%;background:linear-gradient(90deg,#1a8ed0,#5ad2ff);animation:load 2.5s ease forwards}.boot{font-size:10px;color:#8fbdd5;letter-spacing:1px}
.login-screen{position:fixed;z-index:900;inset:0;background:#f4f8fb;display:grid;grid-template-columns:1.15fr .85fr;opacity:0;visibility:hidden;transition:.5s}.login-screen.show{opacity:1;visibility:visible}.login-visual{background:radial-gradient(circle at 25% 25%,#1378ae88,transparent 27%),linear-gradient(145deg,#061d35,#073d67 62%,#0a628f);color:white;display:flex;align-items:center;padding:9%;position:relative;overflow:hidden}.login-visual:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#54b5e518 1px,transparent 1px),linear-gradient(90deg,#54b5e518 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,#000,transparent)}.visual-inner{z-index:2;max-width:620px}.mini{font-size:11px;letter-spacing:4px;color:#67c9ff}.visual-inner h2{font-size:48px;line-height:1.08;margin:18px 0}.visual-inner p{font-size:14px;line-height:1.7;color:#c3dfef;max-width:530px}.techrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:30px}.techrow span{font-size:8px;letter-spacing:1px;border:1px solid #6bc7f24d;padding:7px 10px;border-radius:999px;background:#ffffff0a}.login-box{display:grid;place-items:center;padding:30px}.login-card{width:min(390px,90%)}.login-logo{font-size:30px;font-weight:900;color:#173c5c}.login-logo span{color:#d9002b}.login-logo b{color:#188ed0;font-size:17px}.login-card h1{font-size:31px;margin:35px 0 7px;color:#102f4b}.login-card>p{color:#7a8d9d;margin-bottom:32px}.login-card>label{font-size:11px;font-weight:700;display:block;margin:15px 0 7px}.login-card input:not([type=checkbox]){width:100%;padding:13px 14px;border:1px solid #d4e1ea;border-radius:8px;background:white;color:#17324d;outline:none}.login-card input:focus{border-color:#3d9dd3;box-shadow:0 0 0 3px #3d9dd317}.pw{display:flex}.pw input{border-radius:8px 0 0 8px!important}.pw button{border:1px solid #d4e1ea;border-left:0;background:white;border-radius:0 8px 8px 0;width:45px;color:#6b8193}.loginopt{display:flex;justify-content:space-between;font-size:10px;margin:15px 0 22px;color:#6b8193}.loginopt label{display:flex;gap:5px}.loginopt a{color:#0879b9;text-decoration:none}.signin{width:100%;padding:14px;border:0;border-radius:8px;color:white;font-weight:800;font-size:11px;letter-spacing:.7px;background:linear-gradient(90deg,#0a5688,#128ecb);box-shadow:0 8px 22px #0b75aa2b;cursor:pointer}.signin span{float:right}.secure{text-align:center;color:#8a9aa7;font-size:8px;margin-top:20px;letter-spacing:.5px}.transition{position:fixed;z-index:1100;inset:0;background:#061d35ee;backdrop-filter:blur(10px);display:grid;place-items:center;text-align:center;color:white;opacity:0;visibility:hidden;transition:.3s}.transition.show{opacity:1;visibility:visible}.ring{width:92px;height:92px;border-radius:50%;border:1px solid #42b9ee55;border-top:3px solid #42b9ee;margin:auto;display:grid;place-items:center;animation:spin 1s linear infinite}.ring b{animation:spin 1s linear infinite reverse;color:#54c7fa}.transition h2{font-size:22px;margin:18px 0 5px}.transition p{font-size:10px;color:#9bc8de}
@keyframes load{from{width:0}to{width:100%}}@keyframes gridmove{to{transform:perspective(500px) rotateX(58deg) translateY(42%)}}@keyframes beam{0%,100%{opacity:.15;transform:translateX(-180px)}50%{opacity:.8;transform:translateX(180px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes portalIn{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}}
@media(max-width:760px){.login-screen{grid-template-columns:1fr}.login-visual{display:none}.login-box{background:radial-gradient(circle at 50% 0,#dff4ff,#f7fafc 35%)}.sjp-mark{font-size:55px}.splash-title{font-size:12px;letter-spacing:3px}}

/* ===== Tambahan untuk versi PHP ===== */
.login-alert{display:none;background:#fdecee;border:1px solid #f3b8c0;color:#a3122a;border-radius:8px;padding:10px 12px;font-size:12px;margin:0 0 14px}
.login-alert.show{display:block}
.login-card.shake{animation:sjpShake .4s}
@keyframes sjpShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.signin[disabled]{opacity:.65;cursor:wait}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;margin-right:6px;line-height:1.2}
.user-chip b{font-size:12px}.user-chip small{font-size:10px;opacity:.75;text-transform:uppercase;letter-spacing:.5px}
a.action{text-decoration:none;display:inline-flex;align-items:center}
a.module{color:inherit;text-decoration:none}
.status.online{background:#e7f8ef;border-color:#bfe8d1;color:#0f8a4c}
.status.offline{background:#fdecee;border-color:#f3c0c7;color:#b3182f}
.status.checking{color:#7a8c9c}
.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
.module .open-hint{display:block;margin-top:8px;font-size:9px;color:#8aa0b2;letter-spacing:.3px}