:root{--teal-700: #00524b;--teal-600: #00645c;--teal-500: #00796f;--teal-400: #00a99d;--teal-100: #ccefeb;--teal-50: #e6f7f5;--teal-25: #f2fbfa;--slate-800: #1e293b;--slate-600: #475569;--slate-500: #64748b;--slate-200: #e2e8f0;--slate-100: #f1f5f9;--slate-50: #f8fafc;--white: #ffffff;--green-700: #15803d;--green-50: #f0fdf4;--amber-700: #b45309;--amber-50: #fffbeb;--red-700: #b91c1c;--red-50: #fef2f2;--blue-700: #1d4ed8;--blue-50: #eff6ff;--krem: #f8f6f1;--krem-dalam: #f0ece4;--color-bg-canvas: var(--slate-50);--color-bg-surface: var(--white);--color-bg-subtle: var(--slate-100);--color-bg-selected: var(--teal-50);--color-bg-selected-hover: var(--teal-100);--color-bg-disabled: var(--slate-100);--color-bg-hover: var(--teal-25);--color-text-primary: var(--slate-800);--color-text-secondary: var(--slate-600);--color-text-placeholder: var(--slate-500);--color-text-on-color: var(--white);--color-text-disabled: var(--slate-500);--color-text-on-color-accent: var(--teal-100);--color-icon-primary: var(--slate-800);--color-icon-secondary: var(--slate-600);--color-icon-on-color: var(--white);--color-icon-disabled: var(--slate-500);--color-border-subtle: var(--slate-200);--color-border-input: var(--slate-500);--color-border-strong: var(--slate-600);--color-focus-ring: var(--teal-500);--color-action-primary-default: var(--teal-500);--color-action-primary-hover: var(--teal-600);--color-action-primary-pressed: var(--teal-700);--color-link-default: var(--teal-500);--color-link-hover: var(--teal-600);--color-link-pressed: var(--teal-700);--color-status-success-fg: var(--green-700);--color-status-success-bg: var(--green-50);--color-status-warning-fg: var(--amber-700);--color-status-warning-bg: var(--amber-50);--color-status-danger-fg: var(--red-700);--color-status-danger-bg: var(--red-50);--color-status-info-fg: var(--blue-700);--color-status-info-bg: var(--blue-50);--color-brand-main: var(--teal-400);--landing-color-on-color-bg-hover: rgba(15, 23, 42, .12);--landing-color-on-color-bg-pressed: rgba(15, 23, 42, .24);--landing-color-on-color-border: rgba(255, 255, 255, .72);--landing-color-on-color-border-strong: rgba(255, 255, 255, .9);--landing-color-on-color-border-disabled: rgba(255, 255, 255, .3);--landing-color-on-color-content-disabled: rgba(255, 255, 255, .5);--landing-color-on-color-text-muted: rgba(255, 255, 255, .92);--landing-color-on-color-bg-subtle: rgba(255, 255, 255, .08);--landing-color-on-color-bg-card: rgba(255, 255, 255, .14);--landing-color-on-color-border-card: rgba(255, 255, 255, .25);--landing-color-footer-text: #d4ede8;--landing-footer-text-opacity: .78;--space-4: 4px;--space-8: 8px;--space-10: 10px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--landing-space-72: 72px;--landing-space-80: 80px;--landing-space-96: 96px;--landing-space-120: 120px;--radius-small: 4px;--radius-control: 6px;--radius-surface: 8px;--radius-overlay: 12px;--radius-full: 9999px;--border-default: 1px;--border-focus: 2px;--landing-radius-card: 16px;--landing-radius-panel: 24px;--landing-radius-panel-lg: 28px;--landing-border-thin: 1.5px;--dimension-control-default: 40px;--dimension-control-touch: 44px;--dimension-tag-md: 24px;--elevation-float: 0 2px 8px rgba(15, 23, 42, .12);--elevation-raised: 0 8px 24px rgba(15, 23, 42, .14);--elevation-modal: 0 16px 40px rgba(15, 23, 42, .18);--landing-lembut: 0 6px 20px rgba(15, 23, 42, .06);--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ts-display-angka: 400 28px/36px var(--font-sans);--ts-heading-page: 600 24px/32px var(--font-sans);--ts-heading-section: 500 20px/28px var(--font-sans);--ts-heading-card: 600 16px/24px var(--font-sans);--ts-heading-group: 600 14px/20px var(--font-sans);--ts-heading-panel: 500 12px/18px var(--font-sans);--ts-body-default: 400 14px/20px var(--font-sans);--ts-body-emphasis: 600 14px/20px var(--font-sans);--ts-body-large: 400 16px/24px var(--font-sans);--ts-label-field: 400 12px/16px var(--font-sans);--ts-label-control: 400 14px/20px var(--font-sans);--ts-label-control-selected: 600 14px/20px var(--font-sans);--ts-support-default: 400 12px/16px var(--font-sans);--ts-landing-hero: 600 44px/52px var(--font-sans);--ls-landing-hero: -.02em;--ts-landing-hero-mobile: 600 28px/32px var(--font-sans);--ts-landing-section: 600 32px/40px var(--font-sans);--ts-landing-lead: 400 18px/28px var(--font-sans);--ts-landing-eyebrow: 600 13px/20px var(--font-sans);--ts-landing-stat: 600 64px/64px var(--font-sans);--ls-landing-stat: -.03em;--ts-landing-hero-kecil: 600 36px/40px var(--font-sans);--ls-landing-hero-kecil: -.025em;--ts-landing-section-kecil: 600 28px/36px var(--font-sans);--ls-landing-section-kecil: -.02em;--ts-eyebrow-text: 500 12px/16px var(--font-sans)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);height:var(--dimension-control-default);padding:0 calc(var(--space-16) - var(--border-default));border:var(--border-default) solid transparent;border-radius:var(--radius-control);background:transparent;font:var(--ts-label-control);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}.btn:focus-visible,.tab:focus-visible,.faq-q:focus-visible,.link:focus-visible{outline:var(--border-focus) solid var(--color-focus-ring);outline-offset:2px}.btn[aria-disabled=true],.btn:disabled{cursor:not-allowed;pointer-events:none}.btn--touch{height:var(--dimension-control-touch)}.btn--blok{width:100%}.btn--ikon{width:var(--dimension-control-default);padding:0;color:var(--color-action-primary-default)}.btn--primary{background:var(--color-action-primary-default);border-color:var(--color-action-primary-default);color:var(--color-text-on-color)}.btn--primary:hover{background:var(--color-action-primary-hover);border-color:var(--color-action-primary-hover)}.btn--primary:active{background:var(--color-action-primary-pressed);border-color:var(--color-action-primary-pressed)}.btn--primary[aria-disabled=true],.btn--primary:disabled{background:var(--color-bg-disabled);border-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.btn--tertiary{border-color:var(--color-action-primary-default);color:var(--color-action-primary-default)}.btn--tertiary:hover{background:var(--color-bg-selected);border-color:var(--color-action-primary-hover)}.btn--tertiary:active{background:var(--color-bg-selected-hover);border-color:var(--color-action-primary-hover);color:var(--color-action-primary-hover)}.btn--tertiary[aria-disabled=true],.btn--tertiary:disabled{border-color:var(--color-border-subtle);color:var(--color-text-disabled)}.btn--ghost{color:var(--color-text-primary)}.btn--ghost:hover{background:var(--color-bg-hover)}.btn--ghost:active{background:var(--color-bg-selected)}.btn--on-color{background:var(--color-bg-surface);border-color:var(--color-bg-surface);color:var(--color-action-primary-default)}.btn--on-color:hover{background:var(--color-bg-selected);border-color:var(--color-bg-selected)}.btn--on-color:active{background:var(--color-bg-selected-hover);border-color:var(--color-bg-selected-hover);color:var(--color-action-primary-hover)}.btn--on-color[aria-disabled=true],.btn--on-color:disabled{background:var(--color-bg-disabled);border-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.btn--on-color-outline{border-color:var(--landing-color-on-color-border);color:var(--color-text-on-color)}.btn--on-color-outline:hover{background:var(--landing-color-on-color-bg-hover);border-color:var(--landing-color-on-color-border-strong)}.btn--on-color-outline:active{background:var(--landing-color-on-color-bg-pressed);border-color:var(--landing-color-on-color-border-strong)}.btn--on-color-outline[aria-disabled=true],.btn--on-color-outline:disabled{border-color:var(--landing-color-on-color-border-disabled);color:var(--landing-color-on-color-content-disabled)}.link{position:relative;display:inline-flex;align-items:center;gap:var(--space-4);color:var(--color-link-default);font:var(--ts-body-default);text-decoration:none}.link:after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}.link:hover{color:var(--color-link-hover);text-decoration:underline}.link:active{color:var(--color-link-pressed);text-decoration:underline}.link--on-color,.link--on-color:hover,.link--on-color:active{color:var(--color-text-on-color-accent)}.badge{display:inline-flex;align-items:center;gap:var(--space-4);height:var(--dimension-tag-md);padding:var(--space-4) var(--space-8);border-radius:var(--radius-small);font:var(--ts-support-default);white-space:nowrap;flex:none}.badge--success{background:var(--color-status-success-bg);color:var(--color-status-success-fg)}.badge--warning{background:var(--color-status-warning-bg);color:var(--color-status-warning-fg)}.badge--danger{background:var(--color-status-danger-bg);color:var(--color-status-danger-fg)}.badge--info{background:var(--color-status-info-bg);color:var(--color-status-info-fg)}.badge--neutral{background:var(--color-bg-subtle);color:var(--color-text-secondary)}.badge--turquoise{background:var(--color-bg-selected);color:var(--color-action-primary-default)}.tag{display:inline-flex;align-items:center;gap:var(--space-4);height:var(--dimension-tag-md);padding:0 var(--space-8);border-radius:var(--radius-full);font:var(--ts-support-default);white-space:nowrap;flex:none}.tag--turquoise{background:var(--color-bg-selected);color:var(--color-action-primary-default)}.tag--neutral{background:var(--color-bg-subtle);color:var(--color-text-secondary)}.eyebrow{display:flex;width:fit-content;align-items:center;height:var(--dimension-tag-md);padding:var(--space-4) var(--space-8);border-radius:var(--radius-small);background:var(--color-bg-subtle);color:var(--color-text-secondary);font:var(--ts-eyebrow-text)}.eyebrow--primary{height:28px;background:var(--color-bg-surface);color:var(--color-action-primary-default);line-height:20px}.tab{box-sizing:border-box;height:var(--dimension-control-default);padding:0 var(--space-16);display:inline-flex;align-items:center;justify-content:center;text-align:center;border-radius:var(--radius-control);border:var(--border-default) solid transparent;background:var(--landing-color-on-color-bg-card);color:var(--color-text-on-color);font:var(--ts-label-control);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s,border-radius .3s}.tab:hover{background:var(--landing-color-on-color-bg-hover)}.tab:active{background:var(--landing-color-on-color-bg-pressed)}.tab[aria-selected=true]{background:var(--color-bg-surface);border-color:var(--color-bg-surface);color:var(--color-text-primary);font:var(--ts-label-control-selected)}.tab[aria-selected=true]:hover{background:var(--color-bg-hover)}.tab[aria-selected=true]:active{background:var(--color-bg-selected)}.tabs{display:flex;flex-wrap:wrap;gap:var(--space-4);border-bottom:var(--border-default) solid var(--color-border-subtle)}.tab-h{position:relative;display:inline-flex;align-items:center;height:calc(var(--dimension-control-default) + var(--border-focus));padding:var(--space-8) var(--space-16);margin-bottom:calc(-1 * var(--border-default));border:0;border-bottom:var(--border-focus) solid transparent;border-radius:var(--radius-control) var(--radius-control) 0 0;background:transparent;font:var(--ts-label-control);color:var(--color-text-primary);text-decoration:none;cursor:pointer}.tab-h:hover{background:var(--color-bg-hover)}.tab-h:active{background:var(--color-bg-selected)}.tab-h[aria-selected=true]{border-bottom-color:var(--color-action-primary-default);color:var(--color-action-primary-hover);font:var(--ts-label-control-selected)}.faq{border:var(--border-default) solid var(--color-border-subtle);border-radius:var(--landing-radius-panel-lg);background:var(--color-bg-surface);transition:box-shadow .3s,background-color .15s}.faq:hover{background:var(--color-bg-hover)}.faq:active{background:var(--color-bg-selected)}.faq.open{box-shadow:var(--landing-lembut)}.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-12) var(--space-24);min-height:68px;border:0;background:transparent;font:var(--ts-heading-card);color:var(--color-text-primary);text-align:left;cursor:pointer;border-radius:var(--landing-radius-panel-lg)}.faq-i{flex:none;width:28px;height:28px;border-radius:var(--radius-overlay);background:var(--color-bg-selected);color:var(--color-action-primary-default);display:flex;align-items:center;justify-content:center;transition:transform .3s}.faq.open .faq-i{transform:rotate(180deg)}.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s,visibility 0s .3s}.faq.open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s,visibility 0s}.faq-a>div{overflow:hidden}.faq-a p{max-width:calc(620px + 2 * var(--space-24));padding:0 var(--space-24) var(--space-24);font:var(--ts-body-large);color:var(--color-text-secondary)}.field{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}.field>label,.field>.etiket{font:var(--ts-label-field);color:var(--color-text-secondary)}.kotak{position:relative;display:flex;align-items:center;gap:var(--space-8);height:var(--dimension-control-default);padding:0 calc(var(--space-12) - var(--border-default));border:var(--border-default) solid var(--color-border-input);border-radius:var(--radius-control);background:var(--color-bg-surface);transition:border-color .15s,background-color .15s}.kotak:hover{border-color:var(--color-border-strong)}.kotak:focus-within{outline:var(--border-focus) solid var(--color-focus-ring);outline-offset:var(--border-focus)}.kotak input,.kotak select,.kotak textarea{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:var(--ts-body-default);color:var(--color-text-primary);outline:0}.kotak input::placeholder,.kotak textarea::placeholder{color:var(--color-text-placeholder)}.kotak--area{align-items:stretch;height:auto;min-height:120px;padding:calc(var(--space-8) - var(--border-default)) calc(var(--space-12) - var(--border-default))}.kotak--area textarea{height:auto;resize:vertical}.kotak--pilih select{-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--space-24)}.field--galat .kotak{border-color:var(--color-status-danger-fg)}.field .pesan{font:var(--ts-support-default);color:var(--color-status-danger-fg)}.catatan-field{font:var(--ts-support-default);color:var(--color-text-secondary)}.toggle{position:relative;flex:none;width:40px;height:var(--dimension-tag-md);padding:0;border:0;border-radius:var(--radius-full);background:var(--color-border-input);cursor:pointer;transition:background-color .15s}.toggle:after{content:"";position:absolute;left:var(--space-4);top:var(--space-4);width:16px;height:16px;border-radius:var(--radius-full);background:var(--color-bg-surface);transition:transform .15s}.toggle[aria-checked=true]{background:var(--color-action-primary-default)}.toggle[aria-checked=true]:after{transform:translate(16px)}.toggle:hover{background:var(--color-border-strong)}.toggle[aria-checked=true]:hover{background:var(--color-action-primary-hover)}.card{background:var(--color-bg-surface);border-radius:var(--landing-radius-card);padding:var(--space-24);box-shadow:var(--elevation-float);border:var(--border-default) solid var(--color-border-subtle)}.card--panel{border-radius:var(--landing-radius-panel);padding:var(--space-32)}.lencana{display:inline-flex;align-items:center;gap:var(--space-8);height:38px;padding:var(--space-8) var(--space-16) var(--space-8) var(--space-12);border-radius:var(--radius-full);background:var(--color-bg-surface);box-shadow:inset 0 0 0 var(--border-default) var(--color-border-subtle),var(--elevation-float);font:var(--ts-body-emphasis)}.lencana i{width:8px;height:8px;border-radius:50%;background:var(--color-action-primary-default)}.tabel-kartu{border:var(--border-default) solid var(--color-border-subtle);border-radius:var(--landing-radius-card);background:var(--color-bg-surface);overflow:hidden;contain:paint}.tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}.tabel-gulir:focus-visible{outline:var(--border-focus) solid var(--color-focus-ring);outline-offset:calc(-1 * var(--border-focus))}.tabel{width:100%;border-collapse:collapse}.tabel th{padding:var(--space-12) var(--space-24);background:var(--color-bg-subtle);font:var(--ts-label-field);color:var(--color-text-secondary);text-align:left}.tabel td{padding:var(--space-12) var(--space-24);border-bottom:var(--border-default) solid var(--color-border-subtle);font:var(--ts-body-default);vertical-align:middle}.tabel tbody tr:hover{background:var(--color-bg-hover)}