:root{--ug-brand:#1e3a8a;--ug-blue:#60a5fa;--ug-ink:#0f1115;--ug-muted:#475569;--ug-bg:#f5f7fb;--ug-surface:#fff;--ug-soft:#eef3fa;--ug-border:#e2e8f0;--ug-link:#1e3a8a;color-scheme:light}
[data-theme=dark]{--ug-ink:#f1f5f9;--ug-muted:#bac8da;--ug-bg:#0e1728;--ug-surface:#142138;--ug-soft:#1d2e48;--ug-border:#354762;--ug-link:#93c5fd;color-scheme:dark}
*{box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ug-bg);color:var(--ug-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.65}a{color:var(--ug-link);text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}button{cursor:pointer}button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ug-blue);outline-offset:3px}[hidden]{display:none!important}.ug-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.ug-skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--ug-surface);padding:12px}.ug-skip:focus{top:12px}.ug-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px max(24px,calc((100vw - 1320px)/2));background:var(--ug-surface);border-bottom:1px solid var(--ug-border)}.ug-brand{display:flex;align-items:center;gap:11px;color:var(--ug-ink);white-space:nowrap}.ug-brand span{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ug-brand);color:#fff;font-weight:800}.ug-header nav{display:flex;align-items:center;gap:20px;font-size:14px}.ug-header button,.ug-login{border:1px solid var(--ug-border);border-radius:8px;padding:9px 13px;background:var(--ug-surface);color:var(--ug-ink);min-height:44px}.ug-main{max-width:1320px;margin:auto;padding:0 24px}.ug-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:50px;padding:56px 0 34px}.ug-eyebrow{font-size:12px;font-weight:750;letter-spacing:.075em;color:var(--ug-link);margin:0 0 12px}.ug-hero h1{font-size:42px;line-height:1.15;letter-spacing:-.035em;margin:0 0 20px}.ug-hero p{max-width:660px}.ug-hero-links{display:flex;align-items:center;gap:22px;margin-top:24px}.ug-primary{display:inline-block;background:var(--ug-brand);color:#fff;padding:11px 19px;border-radius:9px;font-weight:700}.ug-intro-note{padding:25px;background:var(--ug-surface);border:1px solid var(--ug-border);border-radius:13px;align-self:start;font-size:14px;color:var(--ug-muted)}.ug-intro-note strong{color:var(--ug-ink);font-size:16px}.ug-tools{background:var(--ug-surface);border:1px solid var(--ug-border);border-radius:13px;padding:22px}.ug-search label{display:block;font-weight:700;margin-bottom:9px}.ug-search>div{display:flex;gap:10px}.ug-search input{min-width:0;flex:1;min-height:48px;padding:11px 14px;border-radius:9px;border:1px solid var(--ug-border);background:var(--ug-bg);color:var(--ug-ink)}.ug-search input::placeholder{color:var(--ug-muted)}.ug-search button{border:1px solid var(--ug-border);background:var(--ug-surface);color:var(--ug-ink);border-radius:9px;padding:0 15px}.ug-role-picker{border:0;padding:0;margin:18px 0 0}.ug-role-picker legend{font-size:14px;color:var(--ug-muted);margin-bottom:9px}.ug-role-picker>div{display:flex;gap:8px;flex-wrap:wrap}.ug-role-picker button{font-size:14px;min-height:44px;border:1px solid var(--ug-border);border-radius:8px;padding:8px 12px;background:var(--ug-surface);color:var(--ug-ink)}.ug-role-picker button[aria-pressed=true]{background:var(--ug-brand);color:#fff;border-color:var(--ug-brand)}.ug-results{font-size:14px;color:var(--ug-muted);margin:14px 0 0}.ug-role-map,.ug-process{margin-top:36px}.ug-role-map h2,.ug-process h2{font-size:25px;margin-bottom:12px}.ug-table-scroll{overflow:auto;border:1px solid var(--ug-border);border-radius:10px;background:var(--ug-surface)}.ug-table-scroll table{border-collapse:collapse;width:100%;min-width:740px;font-size:14px}.ug-table-scroll caption{text-align:left;padding:14px;font-size:13px;color:var(--ug-muted)}.ug-table-scroll th,.ug-table-scroll td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--ug-border)}.ug-table-scroll th{font-size:13px;background:var(--ug-soft)}.ug-table-scroll tbody th{min-width:180px}.ug-flow{margin:12px 0;border:1px solid var(--ug-border);border-radius:10px;background:var(--ug-surface);overflow:hidden}.ug-flow summary{font-weight:700;padding:16px 20px;cursor:pointer}.ug-flow ol{display:flex;gap:12px;list-style:none;padding:8px 20px 0;margin:0;counter-reset:flow;flex-wrap:wrap}.ug-flow li{flex:1 1 170px;min-width:0}.ug-flow li a{display:block;border:1px solid var(--ug-border);border-radius:9px;padding:15px;min-height:157px;background:var(--ug-soft);color:var(--ug-ink)}.ug-flow li span{display:grid;place-items:center;width:27px;height:27px;background:var(--ug-brand);color:#fff;border-radius:50%;font-size:13px;font-weight:700;margin-bottom:10px}.ug-flow li strong{display:block;font-size:14px}.ug-flow li p{font-size:13px;margin:7px 0 0;color:var(--ug-muted)}.ug-flow-note{margin:0;padding:16px 20px;font-size:14px;color:var(--ug-muted)}.ug-layout{display:grid;grid-template-columns:265px minmax(0,1fr);gap:28px;margin-top:44px;align-items:start}.ug-index{position:sticky;top:94px;max-height:calc(100dvh - 110px);overflow:auto;background:var(--ug-surface);border:1px solid var(--ug-border);border-radius:11px}.ug-index summary{font-weight:700;padding:16px;cursor:pointer}.ug-index nav{padding:0 10px 16px}.ug-index a{display:block;padding:7px 9px;font-size:13px;line-height:1.5;border-radius:6px;color:var(--ug-muted);overflow-wrap:anywhere}.ug-index a:hover{background:var(--ug-soft);color:var(--ug-link);text-decoration:none}.ug-index-group{margin:18px 9px 5px;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;color:var(--ug-link)}.ug-index .ug-index-special{font-weight:700;color:var(--ug-link);margin-top:9px}.ug-content{min-width:0;outline:none}.ug-topic{background:var(--ug-surface);border:1px solid var(--ug-border);border-radius:12px;padding:26px;margin-bottom:24px;scroll-margin-top:95px}.ug-topic h2{font-size:25px;line-height:1.3;margin:0 0 12px;letter-spacing:-.02em}.ug-topic h2 a{color:var(--ug-ink)}.ug-topic-summary{font-size:16px;color:var(--ug-muted)}.ug-role-labels{display:flex;gap:6px;flex-wrap:wrap}.ug-role-labels span{font-size:11px;padding:3px 8px;border:1px solid var(--ug-border);border-radius:5px;background:var(--ug-soft);color:var(--ug-muted)}.ug-menu{font-size:13px;color:var(--ug-muted)}.ug-steps{padding-left:27px;margin:24px 0}.ug-steps li{padding-left:9px;margin:0 0 16px;line-height:1.8;font-size:16px}.ug-steps li::marker{font-weight:750;color:var(--ug-link)}.ug-note{padding:16px 18px;background:var(--ug-soft);border-left:3px solid var(--ug-blue);border-radius:6px;font-size:14px;margin:22px 0}.ug-note p{margin:5px 0 0}.ug-shots figure{margin:24px 0}.ug-shots button{display:block;width:100%;padding:0;border:1px solid var(--ug-border);border-radius:8px;overflow:hidden;background:var(--ug-bg);cursor:zoom-in}.ug-shots img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}.ug-shots figcaption{font-size:13px;color:var(--ug-muted);padding-top:9px}.ug-shots figcaption span{display:block;font-size:12px;margin-top:3px}.ug-top{font-size:13px}.ug-empty{padding:20px;background:var(--ug-soft);border-radius:9px}.ug-faq details{border-bottom:1px solid var(--ug-border);padding:12px 0}.ug-faq summary{font-size:16px;font-weight:650;cursor:pointer}.ug-faq p{margin:12px 0;font-size:15px;color:var(--ug-muted)}.ug-glossary>div{padding:12px 0;border-bottom:1px solid var(--ug-border)}.ug-glossary dt{font-weight:700}.ug-glossary dd{margin:5px 0 0;color:var(--ug-muted);font-size:15px}.ug-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;padding:26px 0 38px;color:var(--ug-muted)}.ug-footer button{padding:9px 13px;background:var(--ug-surface);color:var(--ug-ink);border:1px solid var(--ug-border);border-radius:7px}.ug-lightbox{width:min(1500px,calc(100vw - 30px));height:fit-content;max-height:94dvh;padding:0;margin:auto;border:1px solid var(--ug-border);border-radius:12px;background:var(--ug-surface);color:var(--ug-ink)}.ug-lightbox::backdrop{background:#081123bb}.ug-lightbox header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 18px;position:sticky;top:0;background:var(--ug-surface)}.ug-lightbox h2{font-size:16px;margin:0}.ug-lightbox button{width:44px;height:44px;border:1px solid var(--ug-border);border-radius:8px;background:var(--ug-surface);color:var(--ug-ink);font-size:22px;flex-shrink:0}.ug-lightbox>div{overflow:auto;max-height:calc(94dvh - 75px)}.ug-lightbox img{display:block;width:100%;height:auto}
@media(max-width:900px){.ug-header{padding:12px 18px}.ug-header nav{gap:10px}.ug-main{padding:0 18px}.ug-hero{gap:24px;grid-template-columns:1fr;padding-top:30px}.ug-intro-note{max-width:none}.ug-layout{grid-template-columns:1fr;gap:20px}.ug-index{position:static;max-height:350px}.ug-hero h1{font-size:36px}.ug-index nav{columns:2}.ug-index-group{break-after:avoid}.ug-topic{padding:22px}}
@media(max-width:520px){.ug-header{flex-wrap:wrap;gap:10px}.ug-header nav{width:100%;justify-content:space-between}.ug-main{padding:0 12px}.ug-hero h1{font-size:32px}.ug-tools{padding:16px}.ug-topic{padding:18px}.ug-topic h2{font-size:22px}.ug-index nav{columns:1}.ug-flow ol{padding:4px 14px 0;display:block}.ug-flow li{margin-bottom:10px}.ug-flow li a{min-height:0}.ug-flow li span{float:left;margin:0 10px 0 0}.ug-flow li p{margin-left:37px}.ug-hero-links{gap:16px;flex-wrap:wrap}.ug-role-picker button{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Explicit A4 controls; scoped to this public documentation page. */
.ug-print-tools{display:flex;align-items:end;flex-wrap:wrap;gap:14px;padding:18px 0 26px}
.ug-print-tools>div{display:grid;gap:6px;min-width:220px}
.ug-print-tools label{font-size:14px;font-weight:650}
.ug-print-tools select,.ug-print-tools button{font:inherit;min-height:44px;padding:9px 13px;border:1px solid var(--ug-border);border-radius:7px;background:var(--ug-surface);color:var(--ug-ink);max-width:100%}
.ug-print-tools button{background:var(--ug-brand);color:white;border-color:var(--ug-brand);cursor:pointer}
.ug-print-tools select:focus-visible{outline:3px solid var(--ug-blue);outline-offset:3px}
.ug-print-tools p{margin:0;font-size:13px;color:var(--ug-muted)}
.ug-print-heading{display:none}
.ug-print-toc{display:none}
@media print{html{font-size:11pt;scroll-behavior:auto}body{background:white;color:black}.ug-header,.ug-tools,.ug-index,.ug-role-map,.ug-process,.ug-hero,.ug-footer,.ug-top,.ug-lightbox{display:none!important}.ug-main{padding:0;max-width:none}.ug-layout{display:block;margin:0}.ug-topic{padding:0;border:0;border-radius:0;break-before:auto}.ug-topic header{break-after:avoid}.ug-shots figure{break-inside:avoid}.ug-topic h2{font-size:17pt}.ug-role-labels span{color:#334155;background:white;border-color:#cbd5e1}.ug-steps li{font-size:11pt}.ug-content{width:100%}.ug-faq details>p{display:block!important}}
@page{size:A4 portrait;margin:14mm 12mm 15mm;
 @bottom-left{content:"SIKA · Panduan Pengguna";font:8pt sans-serif;color:#475569}
 @bottom-right{content:"Halaman " counter(page) " / " counter(pages);font:8pt sans-serif;color:#475569}
}
@media print{
 :root,[data-theme=dark]{--ug-bg:#fff;--ug-surface:#fff;--ug-soft:#f5f5f5;--ug-ink:#111;--ug-muted:#333;--ug-border:#bbb;--ug-link:#111;color-scheme:light}
 html,body{width:auto!important;min-width:0!important;background:#fff!important;color:#111!important}
 .ug-print-tools,.ug-hero,.ug-header,.ug-tools,.ug-index,.ug-footer,.ug-top,.ug-lightbox,.ug-skip{display:none!important}
 .ug-print-heading,.ug-role-map,.ug-process{display:block!important}
 .ug-print-heading{border-bottom:2px solid #111;padding-bottom:5mm;margin-bottom:7mm;overflow-wrap:anywhere}
 .ug-print-heading h1{font-size:22pt;margin:0 0 3mm}.ug-print-heading p{font-size:10pt;margin:2mm 0}
 .ug-print-toc{display:block;break-before:page;page-break-before:always;break-after:page;page-break-after:always;margin:0}
 .ug-print-toc h2{font-size:18pt;margin:0 0 4mm;break-after:avoid}
 .ug-print-toc p{font-size:9pt;margin:0 0 4mm}
 .ug-print-toc ol,.ug-print-toc ul{padding-left:7mm;margin:3mm 0;font-size:10pt;line-height:1.45}
 .ug-print-toc li{padding-left:1mm;margin:0 0 1.5mm;break-inside:avoid}
 .ug-main,.ug-layout,.ug-content{max-width:none!important;width:auto!important;padding:0;margin:0;display:block}
 .ug-role-map,.ug-process{margin:0 0 7mm;padding:0;border:0;box-shadow:none}
 .ug-table-scroll{overflow:visible}.ug-role-map table{width:100%;min-width:0;table-layout:fixed;font-size:9pt}
 .ug-role-map th,.ug-role-map td{padding:2mm;overflow-wrap:anywhere}
 /* Keep the complete business-flow card together, including its closing note. */
 .ug-flow{border:1px solid #bbb;margin:3mm 0;padding:3mm;page-break-inside:avoid;break-inside:avoid-page;overflow:visible}
 .ug-flow summary{font-size:12pt;break-after:avoid}.ug-flow ol{display:block;padding:0 0 0 5mm}
 .ug-flow li{break-inside:avoid;margin-bottom:3mm}.ug-flow li a{min-height:0;padding:0;display:block}
 .ug-flow li span{display:inline-block;float:none;margin:0 2mm 0 0}.ug-flow li p{margin:1mm 0;font-size:10pt}
 .ug-flow-note{font-size:10pt;margin:2mm 0}.ug-flow::details-content,.ug-faq details::details-content{content-visibility:visible!important;display:block!important}
 /* Start each topic on fresh paper; long topics may continue naturally. */
 .ug-topic{margin:0 0 8mm;padding:0;box-shadow:none;page-break-before:always;break-before:page;break-inside:auto;overflow:visible}
 .ug-topic h2,.ug-process h2,.ug-role-map h2{font-size:16pt;break-after:avoid}.ug-topic header{break-inside:avoid;break-after:avoid}
 .ug-steps{margin:4mm 0;padding-left:7mm}.ug-steps li{font-size:11pt;line-height:1.5;break-inside:avoid;margin-bottom:3mm}
 .ug-note{font-size:10pt;break-inside:avoid;margin:3mm 0;padding:3mm}
 /* Keep each bounded screenshot and its caption in one printable block. */
 .ug-shots figure{display:block;page-break-inside:avoid;break-inside:avoid-page;margin:4mm 0;max-width:100%}
 .ug-shots img{max-width:100%;max-height:112mm;width:100%;height:auto;object-fit:contain}
 .ug-shots figcaption{font-size:9pt}.ug-shots figcaption span{display:none}.ug-shots button{border-radius:0}
 .ug-faq details,.ug-glossary>div{break-inside:avoid}.ug-faq p,.ug-glossary dd{font-size:10pt}
 [hidden]{display:none!important}a{color:#111;text-decoration:none}
}