@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--ink:#172033;--muted:#6d7890;--blue:#1597ff;--blue2:#5baeff;--violet:#8e7bff;--pink:#f4a3e4;--gold:#ffcc62;--line:rgba(20,35,60,.10);--glass:rgba(255,255,255,.64);--shadow:0 24px 70px rgba(37,71,114,.18);--radius:24px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,#ecf6ff 0%,#fff8fb 48%,#eef7ff 100%)}body:before{content:"";position:fixed;inset:-20vh -10vw auto;height:50vh;background:radial-gradient(circle at 15% 10%,rgba(93,173,255,.32),transparent 46%),radial-gradient(circle at 80% 5%,rgba(215,196,255,.32),transparent 50%);pointer-events:none;z-index:-2}.app-shell{display:flex;min-height:100vh}.glass{background:var(--glass);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.sidebar{width:260px;padding:20px;position:fixed;inset:0 auto 0 0;z-index:40;display:flex;flex-direction:column}.sidebar-inner{height:100%;border-radius:28px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(241,248,255,.56));border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 80px rgba(47,88,132,.16);backdrop-filter:blur(24px)}.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;border-bottom:1px solid var(--line)}.brand img{width:46px;height:46px;object-fit:contain}.brand b{font-family:'Space Grotesk';font-size:14px;line-height:1.12}.nav{padding:18px 4px}.nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;margin:5px 0;border-radius:16px;color:#516078;text-decoration:none;font-weight:600;font-size:13px;transition:.2s}.nav a:hover,.nav a.active{color:#10223e;background:rgba(255,255,255,.8);box-shadow:0 10px 22px rgba(35,75,124,.08);transform:translateX(2px)}.nav .group-title{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#9aa6b7;margin:18px 12px 7px}.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}.main{margin-left:260px;width:calc(100% - 260px);padding:20px 28px 34px}.topbar{height:62px;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.crumb{font-size:13px;color:var(--muted)}.top-user{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d6efff,#f9d6eb);font-weight:800}.content{max-width:1500px;margin:0 auto}.page-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:20px}.page-head h1{font-family:'Space Grotesk';font-size:32px;margin:0 0 6px;letter-spacing:-.03em}.page-head p{margin:0;color:var(--muted);font-size:13px}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{border-radius:var(--radius);padding:20px}.stat{min-height:140px;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.72),transparent 70%);right:-35px;top:-40px}.stat small{color:#7c899c;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stat .num{font-family:'Space Grotesk';font-size:42px;font-weight:700;margin:9px 0 3px}.stat .sub{font-size:12px;color:var(--muted)}.icon-badge{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#e9f4ff);border:1px solid rgba(255,255,255,.8)}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-title h3{margin:0;font-family:'Space Grotesk';font-size:17px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:11px 15px;font-weight:700;font-size:12px;text-decoration:none;cursor:pointer;transition:.2s}.btn-primary{color:white;background:linear-gradient(135deg,#167ff0,#47b2ff);box-shadow:0 12px 28px rgba(22,127,240,.22)}.btn-soft{color:#22405f;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95)}.btn-danger{color:#fff;background:linear-gradient(135deg,#ff637b,#ef4a72)}.btn:hover{transform:translateY(-1px)}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700}.pill-hadir{background:#e8f9f0;color:#147a45}.pill-sakit{background:#fff0df;color:#9a6500}.pill-izin{background:#eaf2ff;color:#3568ab}.pill-tanpa-keterangan{background:#ffe9ec;color:#b33b50}.table-wrap{overflow:auto;border-radius:18px}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(30,55,80,.08);white-space:nowrap;text-align:left}.table th{color:#7b8799;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.table td strong{font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field label{display:block;font-size:11px;font-weight:700;color:#718098;margin:0 0 7px}.field input,.field select,.field textarea{width:100%;padding:12px 13px;border-radius:14px;border:1px solid rgba(45,69,99,.13);background:rgba(255,255,255,.74);outline:none;color:var(--ink);font:inherit;font-size:12px}.field textarea{min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(21,151,255,.5);box-shadow:0 0 0 4px rgba(21,151,255,.09)}.full{grid-column:1/-1}.flash{padding:12px 14px;border-radius:14px;font-size:12px;margin-bottom:16px}.flash-success{background:#eaf9f0;color:#1a7443}.flash-error{background:#ffecef;color:#a8334b}.flash-info{background:#ecf5ff;color:#245e98}.empty{padding:32px;text-align:center;color:#8995a5;font-size:12px}.hero{border-radius:30px;padding:30px;position:relative;overflow:hidden;background:linear-gradient(120deg,rgba(255,255,255,.78),rgba(227,242,255,.64));}.hero:before{content:"";position:absolute;inset:-35% auto -35% 58%;width:55%;background:radial-gradient(circle,rgba(81,169,255,.34),transparent 62%);filter:blur(12px)}.hero h2{font:700 28px 'Space Grotesk';margin:0 0 8px}.hero p{max-width:670px;color:#687a94;font-size:13px;line-height:1.7}.hero .mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.glass-chip{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8);font-size:11px;font-weight:700}.scanner-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.scanner-box{min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.scanner-frame{width:min(520px,90%);aspect-ratio:1.9/1;border:2px solid rgba(22,127,240,.22);border-radius:24px;position:relative;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 30px 50px rgba(66,120,177,.10)}.scanner-frame:before,.scanner-frame:after{content:"";position:absolute;width:40px;height:40px;border-color:#1b91f9;border-style:solid}.scanner-frame:before{left:-2px;top:-2px;border-width:4px 0 0 4px;border-radius:12px 0 0 0}.scanner-frame:after{right:-2px;bottom:-2px;border-width:0 4px 4px 0;border-radius:0 0 12px 0}.scan-line{position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#22a7ff,transparent);box-shadow:0 0 18px #3ab1ff;animation:scan 2.1s infinite}.scanner-input{margin-top:22px;width:min(520px,90%);display:flex;gap:10px}.scanner-input input{flex:1;padding:14px 16px;border-radius:14px;border:1px solid rgba(35,65,100,.12);background:#fff;font-size:15px;font-weight:700;letter-spacing:.05em}.scanner-input button{min-width:120px}.scan-result{margin-top:12px;font-size:12px;min-height:20px}.person{display:flex;align-items:center;gap:12px}.person-logo{width:44px;height:44px;border-radius:14px;padding:5px;background:#fff;border:1px solid rgba(255,255,255,.9)}.progress{height:9px;border-radius:999px;background:#edf2f7;overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1c8df7,#8a78ff);animation:shimmer 2s infinite}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:linear-gradient(rgba(242,247,255,.47),rgba(255,245,253,.64)),url('../img/bg-login.jpg') center/cover}.login-page:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.6),rgba(255,255,255,.18));pointer-events:none}.login-card{width:min(1080px,100%);display:grid;grid-template-columns:1.2fr .8fr;min-height:650px;border-radius:34px;overflow:hidden;position:relative;z-index:1;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.85);box-shadow:0 35px 100px rgba(41,81,127,.2);backdrop-filter:blur(24px)}.login-visual{padding:54px;background:linear-gradient(145deg,rgba(228,245,255,.78),rgba(255,232,248,.48));position:relative;overflow:hidden}.login-visual:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-150px;background:radial-gradient(circle,rgba(44,158,255,.28),transparent 68%)}.login-visual .logo{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 22px 35px rgba(27,94,150,.17));margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4f85bc;font-weight:800}.login-visual h1{font:700 44px 'Space Grotesk';line-height:1.02;margin:10px 0 14px;max-width:600px}.login-visual p{max-width:540px;color:#667c98;line-height:1.8;font-size:13px}.login-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}.login-feature{padding:13px;border-radius:18px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.86);font-size:10px;color:#5a6e8c}.login-side{padding:54px;background:rgba(255,255,255,.68);display:flex;align-items:center}.login-form{width:100%}.login-form h2{font:700 30px 'Space Grotesk';margin:0 0 8px}.login-form .muted{font-size:12px;color:#7b8798;margin-bottom:26px}.form-stack{display:grid;gap:14px}.login-foot{margin-top:18px;font-size:10px;color:#8a95a5;line-height:1.5}.mobile-nav{display:none}.badge-live{display:inline-flex;align-items:center;gap:6px;color:#147a45;font-size:11px;font-weight:800}.dot{width:7px;height:7px;border-radius:50%;background:#2ecf72;box-shadow:0 0 0 4px rgba(46,207,114,.14)}
@keyframes scan{0%{transform:translateY(-150px);opacity:.15}50%{opacity:1}100%{transform:translateY(150px);opacity:.15}}@keyframes shimmer{0%{opacity:.7}50%{opacity:1}100%{opacity:.7}}
@media(max-width:1050px){.sidebar{width:225px}.main{margin-left:225px;width:calc(100% - 225px)}.grid-4{grid-template-columns:repeat(2,1fr)}.scanner-shell{grid-template-columns:1fr}.login-card{grid-template-columns:1fr}.login-visual{min-height:420px}}
@media(max-width:760px){.sidebar{display:none}.main{margin-left:0;width:100%;padding:14px 14px 80px}.mobile-nav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;gap:6px;padding:7px;border-radius:18px;background:rgba(255,255,255,.78);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.88);box-shadow:0 20px 45px rgba(40,73,116,.16)}.mobile-nav a{flex:1;text-align:center;padding:10px 6px;border-radius:13px;color:#6e7c90;text-decoration:none;font-size:9px;font-weight:800}.mobile-nav a.active{color:#107ee9;background:#edf7ff}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.hero{padding:22px}.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:27px}.topbar{height:52px}.login-page{padding:12px}.login-card{min-height:auto;border-radius:26px}.login-visual,.login-side{padding:28px}.login-visual h1{font-size:34px}.login-features{grid-template-columns:1fr}.login-visual .logo{width:130px;height:130px}.scanner-frame{aspect-ratio:1.5/1}.scanner-input{flex-direction:column}.scanner-input button{width:100%}}

.bridge-motif{position:absolute;right:5%;top:14px;width:220px;height:82px;opacity:.58;transform:skewX(-8deg)}.bridge-motif:before{content:"";position:absolute;left:18px;right:18px;bottom:16px;height:32px;border-top:2px solid rgba(255,126,112,.5);border-radius:50%}.bridge-motif:after{content:"";position:absolute;left:10px;right:10px;bottom:16px;height:1px;background:rgba(255,255,255,.85);box-shadow:0 0 16px rgba(255,133,120,.35)}.bridge-motif span{position:absolute;bottom:15px;width:4px;height:56px;border-radius:5px;background:linear-gradient(#ff8b7f,#ffc56a);box-shadow:0 0 12px rgba(255,126,112,.3)}.bridge-motif span:first-child{left:30px}.bridge-motif span:last-child{right:30px}.bridge-motif i{position:absolute;bottom:16px;width:2px;height:49px;background:rgba(255,255,255,.8);transform:rotate(18deg);transform-origin:bottom}.bridge-motif i:nth-of-type(1){left:62px}.bridge-motif i:nth-of-type(2){right:62px}.bridge-motif b{position:absolute;left:30px;right:30px;bottom:15px;border-bottom:2px solid rgba(255,147,125,.45);border-radius:0 0 50% 50%;height:33px}.bridge-motif~h2{position:relative}@media(max-width:760px){.bridge-motif{display:none}}