@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";:root{--kanan-green: #1E5A42;--kanan-green-dark: #163F2E;--kanan-green-soft: #E9F1EC;--kanan-green-line: #CFE3D6;--old-gold: #C7A24A;--gold-soft: #FAF6EC;--gold-soft-2: #F3EADB;--gold-ink: #8A6A23;--warm-ivory: #F6F3EC;--ink: #1A2420;--text: #1D2722;--muted: #586259;--subtle: #717D76;--faint: #9AA39C;--line: #E4E9E4;--line-soft: #EEF1EE;--field-border: #D2DAD3;--surface: #FFFFFF;--surface-2: #FAFBFA;--surface-3: #F3F5F2;--canvas: #F6F3EC;--success-bg: #E4F2E9;--success-fg: #237A47;--warning-bg: #FDF1E0;--warning-fg: #B5751B;--warning-surface: #FFFAF1;--warning-line: #F0D9B5;--danger-bg: #FBEAE6;--danger-fg: #C0492F;--danger-strong: #A3331C;--neutral-bg: #EEF0EE;--neutral-fg: #7B857E;--tag-bg: #F1F4F1;--tag-fg: #586259;--att-hadir-bg: #E4F2E9;--att-hadir-fg: #237A47;--att-telat-bg: #FCEEDA;--att-telat-fg: #A0691A;--att-izin-bg: var(--ops-blue-soft);--att-izin-fg: var(--ops-blue);--att-tk-bg: #FBEAE6;--att-tk-fg: #C0492F;--att-belum-bg: #E9ECEA;--att-belum-fg: #6C766F;--att-libur-bg: #F0F2F0;--att-libur-fg: #869089;--att-depan-bg: #F7F8F7;--att-depan-fg: #AEB6AF;--kanan-green-surface: #F2F8F4;--kanan-green-ink: #40614E;--kanan-green-fg-soft: #BCD6C7;--gold-bg: #FAF0D8;--gold-line: #ECDCB4;--success-surface: #F3FAF5;--success-line: #BFE0CC;--danger-surface: #FDF4F1;--danger-line: #E9C9BF;--danger-muted: #A1524A;--notif-dot: #E0654A;--ops-blue: #35617F;--ops-blue-soft: #E5EDF3;--hover-surface: #F4F8F5;--skeleton-strong: #E4E9E4;--skeleton: #ECEFEC;--skeleton-soft: #F1F3F0;--ink-2: #3A443D;--info: #2B6CB0;--info-bg: #E8F0FB;--info-line: #5A8AD0;--note-bg: #EEF3EE;--note-line: #D9E6DD;--note-fg: #3B5D49;--success-dot: #3BA06A;--inactive-dot: #B9BEB7;--gold-ink-strong: #A06A1A;--danger-faint: #D3A89E;--shift-malam: #3C4A63;--shift-malam-soft: #E5EDF3;--dash-border: #B8C6BC;--desk: #E7E9E5;--scanner-bg: #141E16;--bg-app: var(--canvas);--text-heading: var(--ink);--text-body: var(--text);--text-label: var(--muted);--surface-card: var(--surface);--accent-primary: var(--kanan-green);--accent-brand: var(--old-gold);--focus-ring: var(--kanan-green-soft)}:root{--font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;--fs-page-title: 24px;--fs-panel-title: 15px;--fs-body: 14px;--fs-label: 13px;--fs-table-head: 11px;--fs-caption: 12px;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extrabold: 800;--ls-tight: -.02em;--ls-wide: .05em;--lh-tight: 1.2;--lh-body: 1.5}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--radius-action: 7px;--radius-input: 8px;--radius-button: 9px;--radius-card: 14px;--radius-modal: 16px;--radius-pill: 999px;--shadow-card: 0 1px 3px rgba(18, 24, 20, .05);--shadow-dropdown: 0 12px 30px rgba(10, 20, 14, .16);--shadow-modal: 0 24px 60px rgba(10, 20, 14, .35);--shadow-drawer: -12px 0 40px rgba(10, 20, 14, .25);--sidebar-w: 248px;--topbar-h: 62px;--tap-min: 44px;--appbar-h: 56px;--bottomnav-h: 60px;--fab-size: 56px;--phone-w: 390px;--radius-sheet: 20px;--scrim: rgba(20, 28, 22, .5)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-sans);background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased}input,select,button,textarea{font:inherit}input:focus,select:focus{outline:none;border-color:var(--kanan-green);box-shadow:0 0 0 3px var(--focus-ring)}::placeholder{color:var(--faint)}.app{height:100vh;display:flex;overflow:hidden}aside{width:var(--sidebar-w);flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;height:100%;overflow-y:auto}.app.sidebar-collapsed aside{display:none}.brand{padding:20px 22px 16px}.bn{font-family:var(--font-display);font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--kanan-green)}.tag{display:flex;align-items:center;gap:7px;margin-top:8px}.tag i{width:18px;height:2px;background:var(--old-gold);border-radius:2px;display:inline-block}.tag span{font-size:11px;font-weight:700;letter-spacing:.16em;color:#8a9389}.sec{padding:14px 20px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--faint)}.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;margin:2px 8px;color:var(--muted);cursor:pointer}.nav:hover{background:#f4f8f5}.nav.on{background:var(--kanan-green-soft);color:var(--kanan-green)}.side-foot{margin-top:auto;padding:14px 8px 16px;border-top:1px solid var(--line-soft)}.sec.sec-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.sec.sec-toggle:hover span{color:var(--muted)}.nav-static{cursor:default}.nav-static:hover{background:transparent}.chev{color:var(--faint);transition:transform .15s}.chev-collapsed{transform:rotate(-90deg)}.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}header.top{height:var(--topbar-h);flex:none;background:var(--kanan-green);display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff}.top-l{display:flex;align-items:center;gap:16px}.top-title{font-size:17px;font-weight:700}.top-r{display:flex;align-items:center;gap:14px}.top-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.top-ic:hover{background:#ffffff1f}.avatar{width:36px;height:36px;border-radius:50%;background:var(--old-gold);display:grid;place-items:center;font-size:13px;font-weight:700}main.body{flex:1;overflow-y:auto;padding:28px 32px 48px}.wrap{max-width:1180px;margin:0 auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}.page-head p{margin:6px 0 0;color:var(--subtle);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--radius-button);font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent}.btn-pri{background:var(--kanan-green);color:#fff}.btn-pri:hover{background:var(--kanan-green-dark)}.btn-sec{background:var(--surface);color:var(--muted);border-color:var(--field-border)}.btn-gold{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--old-gold)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}.card-title{font-size:15px;font-weight:700}.card-title span{color:var(--faint);font-weight:600}.tools{display:flex;gap:8px}.tool{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--field-border);border-radius:var(--radius-button);background:var(--surface);color:var(--muted);cursor:pointer}.tool:hover{background:#f4f8f5}table{width:100%;border-collapse:collapse}th.h{text-align:left;padding:12px 18px 10px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--subtle);font-weight:700}.frow th{padding:0 18px 12px;background:var(--surface-2)}.frow input,.frow select{width:100%;height:36px;border:1px solid var(--field-border);border-radius:7px;padding:0 10px;font-size:13px;background:var(--surface)}.frow-inp{width:100%;height:36px;border:1px solid var(--field-border);border-radius:7px;padding:0 10px;font-size:13px;background:var(--surface);font-family:var(--font-sans);box-sizing:border-box;outline:none}td{padding:14px 18px;font-size:14px;border-top:1px solid var(--line-soft)}tr.row:hover{background:#f6faf7}.mono{font-family:var(--font-mono);font-size:13px;color:var(--subtle)}.badge{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700}.b-ok{background:var(--success-bg);color:var(--success-fg)}.b-warn{background:var(--warning-bg);color:var(--warning-fg)}.b-rev{background:var(--danger-bg);color:var(--danger-fg)}.b-off{background:var(--neutral-bg);color:var(--neutral-fg)}.b-tag{background:var(--tag-bg);color:var(--tag-fg)}.acts{display:flex;justify-content:flex-end;gap:6px}.act{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:var(--subtle);cursor:pointer}.act:hover{background:var(--kanan-green-soft);color:var(--kanan-green)}.act.del:hover{background:var(--danger-bg);color:var(--danger-fg)}.accent{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--old-gold);border-radius:12px;box-shadow:var(--shadow-card);padding:15px 17px;margin-bottom:18px}.accent .t{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}label.l{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}.req{color:var(--danger-fg)}.hint{font-weight:500;color:var(--faint)}.inp{width:100%;height:42px;border:1px solid var(--field-border);border-radius:var(--radius-input);padding:0 12px;font-size:14px;background:var(--surface);box-sizing:border-box}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.modal{width:430px;max-width:100%;max-height:92vh;overflow-y:auto;background:var(--surface);border-radius:var(--radius-modal);box-shadow:var(--shadow-modal)}.cred{background:var(--warm-ivory);border-radius:16px 16px 0 0;padding:24px 26px;border-bottom:3px solid var(--old-gold)}.cred-green{background:var(--kanan-green);border-radius:11px;padding:15px 17px;color:#fff}.cred-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#141c1673;display:flex;justify-content:flex-end;z-index:55}.drawer{width:430px;max-width:100%;height:100%;background:var(--surface);box-shadow:var(--shadow-drawer);display:flex;flex-direction:column}.hidden{display:none!important}.x{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--subtle);cursor:pointer}.x:hover{background:var(--tag-bg)}.split{height:100vh;display:flex}.brandside{width:46%;flex:none;background:var(--kanan-green);color:#fff;padding:52px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}.brandside .sym{position:absolute;right:-120px;bottom:-110px;width:560px;opacity:.07}.brandside .wm{height:32px}.brandside .mid{margin-top:auto}.brandside h1{margin:0;font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-.025em;max-width:15ch}.brandside p{margin:22px 0 0;font-size:18px;color:var(--kanan-green-fg-soft);line-height:1.55;max-width:34ch}.pts{display:flex;flex-direction:column;gap:14px;margin-top:38px}.pt{display:flex;align-items:center;gap:12px;font-size:15px;color:#eaf3ed;font-weight:600}.pt .d{width:30px;height:30px;border-radius:8px;background:#ffffff1f;display:grid;place-items:center;color:var(--old-gold);flex:none}.brandside .foot{margin-top:44px;display:flex;align-items:center;gap:8px;font-size:13px;color:#9dbba8}.formside{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}.formcard{width:100%;max-width:380px}.formcard .eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--old-gold);margin-bottom:14px}.formcard h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}.formcard .sub{margin:8px 0 30px;font-size:15px;color:var(--subtle)}.field{margin-bottom:18px}.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}.ifield{display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--field-border);border-radius:var(--radius-input);padding:0 13px;background:var(--surface);transition:border-color .15s,box-shadow .15s}.ifield:focus-within{border-color:var(--kanan-green);box-shadow:0 0 0 3px var(--focus-ring)}.ifield i,.ifield svg{color:var(--faint);flex:none}.ifield input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:14.5px;color:var(--text);height:100%}.ifield .toggle{cursor:pointer;color:var(--faint);display:grid;place-items:center}.row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 24px}.remember{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.box{width:18px;height:18px;border-radius:5px;border:1.5px solid #C9D2CB;display:grid;place-items:center;background:var(--surface);color:#fff}.box i,.box svg{display:block;width:13px;height:13px}.remember.on .box{background:var(--kanan-green);border-color:var(--kanan-green)}.link{font-size:13.5px;font-weight:600;color:var(--kanan-green);cursor:pointer}.link:hover{text-decoration:underline}.submit{width:100%;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--kanan-green);color:#fff;border:none;border-radius:var(--radius-button);font-size:15px;font-weight:700;cursor:pointer;transition:background .15s}.submit:hover{background:var(--kanan-green-dark)}.help{margin-top:22px;text-align:center;font-size:13px;color:var(--subtle)}.copy{margin-top:36px;text-align:center;font-size:12px;color:var(--faint)}@keyframes sinkaPulse{0%,to{opacity:1}50%{opacity:.45}}.skel{background:var(--line-soft, #ecefec);border-radius:8px;animation:sinkaPulse 1.4s ease-in-out infinite}