@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap";:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;--navy:#102a43;--blue:#1769e0;--blue-dark:#0e4eae;--muted:#69758a;--border:#e4e9f1;--green:#11825b;background:#f5f7fb;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand{font-family:Manrope,sans-serif}.brand{color:var(--navy);letter-spacing:-.6px;align-items:center;gap:10px;font-size:22px;font-weight:800;display:flex}.brand-light{color:#fff}.brand-mark{color:#fff;background:linear-gradient(145deg,#2d7ef0,#0d4ca7);border-radius:10px;place-items:center;width:34px;height:34px;display:grid;box-shadow:0 8px 20px #071d3b45}.eyebrow{color:var(--blue);text-transform:uppercase;letter-spacing:1.6px;font-size:12px;font-weight:700}.eyebrow-light{color:#8fc4ff}.muted{color:var(--muted)}.button{border:0;border-radius:11px;justify-content:center;align-items:center;gap:9px;padding:11px 17px;font-weight:700;transition:all .2s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button.primary{background:var(--blue);color:#fff;box-shadow:0 9px 24px #1769e035}.button.primary:hover{background:var(--blue-dark)}.button.secondary{color:var(--navy);border:1px solid var(--border);background:#fff}.button.large{width:100%;min-height:48px}.button:disabled{opacity:.55;cursor:not-allowed;transform:none}.icon-button{color:#65728a;background:0 0;border:0;border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.icon-button:hover{color:var(--navy);background:#eff3f8}.avatar{color:#fff;background:linear-gradient(145deg,#315e8d,#172f4d);border-radius:50%;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.auth-page{background:#fff;grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr);min-height:100vh;display:grid}.auth-story{color:#fff;background:radial-gradient(circle at 80% 20%,#2469ad 0,#0000 32%),linear-gradient(145deg,#0b2845,#123d65 57%,#0c2c4d);flex-direction:column;justify-content:space-between;padding:42px clamp(42px,6vw,90px);display:flex;position:relative;overflow:hidden}.auth-story:before,.auth-story:after{content:"";border:1px solid #ffffff18;border-radius:50%;width:520px;height:520px;position:absolute;top:90px;right:-210px}.auth-story:after{width:350px;height:350px;top:175px;right:-120px}.story-copy{z-index:1;max-width:620px;position:relative}.story-copy h1{letter-spacing:-3px;margin:20px 0 24px;font-size:clamp(40px,5vw,68px);line-height:1.08}.story-copy>p{color:#c8d9e9;max-width:540px;font-size:18px;line-height:1.7}.story-points{gap:14px;margin-top:42px;display:grid}.story-points span{color:#eaf5ff;align-items:center;gap:12px;display:flex}.story-points svg{color:#71b8ff}.auth-story small{color:#8ea9c3}.auth-panel{background:linear-gradient(#fff,#f8fafc);place-items:center;padding:48px;display:grid}.auth-card{width:min(100%,420px)}.auth-card h2{letter-spacing:-1.2px;color:var(--navy);margin:10px 0 8px;font-size:34px}.auth-card>.muted{margin-bottom:30px}.login-form{gap:18px;display:grid}.login-form label>span{color:#38445a;margin-bottom:7px;font-size:13px;font-weight:700;display:block}.demo-hint{color:#8490a3;text-align:center;line-height:1.45}.mobile-brand{margin-bottom:40px;display:none}.security-note{color:#7c879a;justify-content:center;align-items:center;gap:7px;margin-top:20px;font-size:13px;display:flex}.portal-header{border-bottom:1px solid var(--border);background:#fff;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(24px,5vw,72px);display:flex}.user-compact{align-items:center;gap:11px;display:flex}.user-compact>div:not(.avatar){display:grid}.user-compact strong{font-size:14px}.user-compact small{color:var(--muted);font-size:12px}.company-page{background:#f7f9fc;min-height:100vh}.company-content{width:min(1120px,100% - 40px);margin:auto;padding:64px 0}.page-heading,.dashboard-heading{justify-content:space-between;align-items:flex-end;margin-bottom:30px;display:flex}.page-heading h1,.dashboard-heading h1{color:var(--navy);letter-spacing:-1.4px;margin:7px 0;font-size:36px}.page-heading p,.dashboard-heading p{color:var(--muted);margin:0}.secure-pill{color:var(--green);background:#e9f7f1;border-radius:99px;align-items:center;gap:7px;padding:9px 14px;font-size:13px;font-weight:700;display:flex}.search-box{border:1px solid var(--border);background:#fff;border-radius:12px;align-items:center;gap:10px;max-width:580px;height:50px;padding:0 16px;display:flex;box-shadow:0 5px 22px #1d36550a}.search-box:focus-within{border-color:#8ab9f5;box-shadow:0 0 0 3px #e7f1ff}.search-box svg{color:#8a95a8}.search-box input,.header-search input{width:100%;color:var(--navy);background:0 0;border:0;outline:0}.company-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;display:grid}.company-card{border:1px solid var(--border);text-align:left;background:#fff;border-radius:15px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:20px;transition:all .2s;display:grid;box-shadow:0 4px 18px #162d4a08}.company-card:hover{border-color:#9fc2ed;transform:translateY(-2px);box-shadow:0 14px 32px #1c4b8120}.company-icon{width:48px;height:48px;color:var(--blue);background:#edf5ff;border-radius:13px;place-items:center;display:grid}.company-icon.small{border-radius:10px;width:37px;height:37px}.company-icon.small svg{width:18px}.company-info{gap:2px;min-width:0;display:grid}.company-info strong{color:var(--navy);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.company-info small{color:#8b96a8;font-size:12px}.company-info em{color:#667389;margin-top:4px;font-size:12px;font-style:normal}.status{border-radius:99px;align-items:center;gap:5px;padding:6px 10px;font-size:12px;font-style:normal;font-weight:700;display:flex}.status.linked{color:#16815d;background:#eaf8f2}.status.unlinked{color:#a4680b;background:#fff4de}.company-arrow{color:#aab3c1}.state-card{border:1px solid var(--border);color:var(--muted);background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:10px;margin-top:28px;padding:34px;display:flex}.state-card.error,.form-error{color:#b42338;background:#fff1f2;border-color:#fecdd3}.company-empty{text-align:center;background:#fff;border:1px dashed #cbd7e6;border-radius:16px;justify-items:center;margin-top:28px;padding:52px 24px;display:grid}.company-empty .company-icon{margin-bottom:16px}.company-empty h2{color:var(--navy);margin:0 0 8px}.company-empty p{color:var(--muted);max-width:480px;margin:0 0 22px;line-height:1.6}.add-company{margin-top:22px}.link-page{background:radial-gradient(circle at 50% 0,#e7f1ff,#0000 40%),#f6f8fc;place-items:center;min-height:100vh;padding:40px 20px;display:grid}.link-card{border:1px solid var(--border);background:#fff;border-radius:20px;width:min(100%,530px);padding:34px;box-shadow:0 24px 70px #1634551c}.back-link{color:#647188;align-items:center;gap:7px;margin-bottom:30px;font-size:13px;display:inline-flex}.link-heading{text-align:center}.link-hero-icon{width:58px;height:58px;color:var(--blue);background:#eaf3ff;border-radius:17px;place-items:center;margin:0 auto 16px;display:grid}.link-heading h1{color:var(--navy);margin:8px 0;font-size:30px}.link-heading p{color:var(--muted);line-height:1.6}.link-form{gap:18px;margin-top:26px;display:grid}.link-form label>span{color:#38445a;margin-bottom:7px;font-size:13px;font-weight:700;display:block}.field-help{color:#8290a4;margin-top:6px;font-size:11px;display:block}.input-wrap{border:1px solid #dce2eb;border-radius:11px;align-items:center;gap:10px;height:49px;padding:0 13px;display:flex}.input-wrap:focus-within{border-color:#7eadeb;box-shadow:0 0 0 3px #e8f2ff}.input-wrap svg{color:#8290a4;flex:none}.input-wrap input{border:0;outline:0;width:100%;min-width:0}.input-wrap .reveal{background:0 0;border:0;place-items:center;padding:0;display:grid}.form-error{border:1px solid;border-radius:9px;padding:11px 13px;font-size:13px}.privacy-note{color:#69768a;background:#f7f9fc;border-radius:11px;gap:12px;margin-top:24px;padding:14px;display:flex}.privacy-note svg{color:#4d789f;flex:none}.privacy-note p{gap:2px;margin:0;font-size:12px;display:grid}.privacy-note strong{color:#45536a}.app-layout{background:#f5f7fb;min-height:100vh;display:flex}.sidebar{color:#fff;z-index:20;background:#102d49;flex-direction:column;width:240px;padding:26px 18px;display:flex;position:fixed;inset:0 auto 0 0}.sidebar .brand{padding:0 10px 28px}.sidebar nav{gap:5px;display:grid}.sidebar nav a,.sidebar-footer{color:#abc0d2;border-radius:10px;align-items:center;gap:12px;padding:12px 13px;font-size:14px;font-weight:600;display:flex}.sidebar nav a:hover,.sidebar nav a.active{color:#fff;background:#ffffff14}.sidebar nav a.active{box-shadow:inset 3px 0 #4d9bff}.sidebar-footer{border-top:1px solid #ffffff14;border-radius:0;margin-top:auto;padding-top:20px}.app-main{width:calc(100% - 240px);min-width:0;margin-left:240px}.app-header{border-bottom:1px solid var(--border);z-index:10;background:#fff;align-items:center;gap:18px;height:76px;padding:0 28px;display:flex;position:sticky;top:0}.company-switcher{text-align:left;background:0 0;border:0;border-radius:11px;align-items:center;gap:10px;padding:5px;display:flex}.company-switcher:hover{background:#f5f7fa}.company-switcher>span:not(.company-icon){min-width:0;display:grid}.company-switcher small{color:#8390a3;text-transform:uppercase;letter-spacing:.7px;font-size:10px}.company-switcher strong{color:var(--navy);text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:13px;overflow:hidden}.header-search{color:#8995a7;background:#f4f6f9;border-radius:10px;align-items:center;gap:8px;width:min(340px,30vw);height:40px;margin-left:auto;padding:0 12px;display:flex}.notification{position:relative}.notification i{background:#ef476f;border:1px solid #fff;border-radius:50%;width:7px;height:7px;position:absolute;top:8px;right:8px}.mobile-menu{display:none}.app-content{max-width:1500px;margin:auto;padding:34px}.dashboard-heading{align-items:center}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.metric-card{border:1px solid var(--border);background:#fff;border-radius:15px;margin:0;padding:20px;box-shadow:0 5px 18px #223b5908}.metric-icon{border-radius:11px;place-items:center;width:42px;height:42px;margin-bottom:17px;display:grid}.metric-icon svg{width:20px}.metric-icon.blue{color:#1769e0;background:#eaf3ff}.metric-icon.amber{color:#ae7113;background:#fff3dd}.metric-icon.violet{color:#7658c7;background:#f0ebff}.metric-icon.green{color:#13815e;background:#e9f8f1}.metric-card>p{color:#718095;margin-bottom:7px;font-size:13px}.metric-card>div{justify-content:space-between;align-items:end;display:flex}.metric-card strong{color:var(--navy);font:700 25px Manrope}.metric-card small{align-items:center;font-size:11px;font-weight:700;display:flex}.metric-card small svg{width:14px}.positive{color:#16815d}.negative{color:#bd6d20}.dashboard-grid{grid-template-columns:1.35fr .85fr;gap:18px;margin-top:20px;display:grid}.panel{border:1px solid var(--border);background:#fff;border-radius:15px;padding:22px}.panel-heading{justify-content:space-between;align-items:start;margin-bottom:18px;display:flex}.panel-heading h2{color:var(--navy);margin-bottom:3px;font-size:17px}.panel-heading p{color:#8792a4;margin:0;font-size:12px}.panel-heading button{color:var(--blue);background:0 0;border:0;font-size:12px;font-weight:700}.activity-list{display:grid}.activity-row{border-top:1px solid #eef1f5;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 0;display:grid}.activity-dot{background:#4a90e2;border-radius:50%;width:9px;height:9px;margin:0 4px;box-shadow:0 0 0 5px #eaf3ff}.activity-row>div{display:grid}.activity-row strong{color:#334057;font-size:13px}.activity-row small{color:#8b96a8;margin-top:3px;font-size:11px}.tag{color:#a36810;background:#fff2da;border-radius:99px;padding:5px 8px;font-size:10px;font-style:normal;font-weight:700}.tag.selesai{color:#167a58;background:#e8f8f1}.tag.periksa{color:#7257bd;background:#efebfb}.quick-grid{gap:10px;display:grid}.quick-grid button{text-align:left;color:#4b7dad;background:#fafbfd;border:1px solid #e8ecf2;border-radius:11px;align-items:center;gap:12px;padding:13px;display:flex}.quick-grid button:hover{background:#f4f8fd;border-color:#aac8ec}.quick-grid button>span{display:grid}.quick-grid strong{color:#344158;font-size:13px}.quick-grid small{color:#8b96a8;margin-top:2px;font-size:11px}.sidebar-overlay{display:none}.configuration-error,.full-page-loader{place-items:center;min-height:100vh;padding:24px;display:grid}.configuration-card{border:1px solid var(--border);background:#fff;border-radius:18px;width:min(520px,100%);padding:34px;box-shadow:0 20px 60px #18385918}.full-page-loader{color:var(--muted);grid-auto-flow:column;align-content:center;gap:10px}@media (width<=1000px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.company-grid{grid-template-columns:1fr}}@media (width<=780px){.auth-page{grid-template-columns:1fr}.auth-story{display:none}.auth-panel{min-height:100vh;padding:28px 20px}.mobile-brand{display:flex}.sidebar{transition:all .25s;transform:translate(-100%)}.sidebar.open{transform:none}.sidebar-overlay{z-index:15;background:#06172780;border:0;display:block;position:fixed;inset:0}.app-main{width:100%;margin:0}.mobile-menu{display:grid}.header-search{display:none}.app-header{gap:8px;padding:0 14px}.company-switcher{flex:1}.company-switcher strong{max-width:170px}.app-content{padding:24px 16px}.page-heading,.dashboard-heading{align-items:flex-start;gap:20px}.dashboard-heading{display:grid}.portal-header{padding:0 20px}.user-compact>div:not(.avatar){display:none}.company-content{padding:38px 0}.secure-pill{display:none}}@media (width<=520px){.metric-grid{grid-template-columns:1fr}.company-card{grid-template-columns:auto 1fr auto;padding:16px}.company-card .status{grid-column:2;width:max-content}.company-arrow{grid-area:1/3/3}.link-card{padding:24px 19px}.page-heading h1,.dashboard-heading h1{font-size:29px}.button.secondary{width:100%}.activity-row{grid-template-columns:auto 1fr}.activity-row .tag{grid-column:2;width:max-content;margin-top:5px}}