:root {--ink:var(--theme-text);--muted:var(--theme-muted);--navy:var(--theme-header);--navy-2:var(--theme-header);--teal:var(--theme-primary);--mint:var(--theme-secondary);--cream:var(--theme-success-soft);--paper:var(--theme-page);--line:var(--theme-line);--amber:var(--theme-accent);--red:var(--theme-danger);--purple:var(--theme-special);--blue:var(--theme-primary);--shadow:0 16px 40px color-mix(in srgb,var(--theme-shadow-colour) 8.0%,transparent);--radius:18px;
}
* {box-sizing:border-box; }
html {scroll-behavior:smooth; }
body {margin:0;background:var(--cream);color:var(--ink);font-family:Inter, Aptos, "Segoe UI", sans-serif;font-size:16px;line-height:1.5; }
button, input, select {font:inherit; }
button, select, input {min-height:44px; }
.skip-link {position:fixed;left:1rem;top:-4rem;z-index:99;background:var(--theme-panel);padding:.75rem 1rem;border-radius:8px;color:var(--ink); }
.skip-link:focus {top:1rem; }
.topbar {min-height:108px;padding:1.35rem clamp(1rem, 4vw, 4rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--navy);color:var(--theme-inverse); }
.brand-block {display:flex;align-items:center;gap:1rem; }
.brand-mark {width:52px;height:52px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--theme-line) 35.0%,transparent);border-radius:15px;color:var(--mint);font-weight:850;letter-spacing:-.04em; }
h1, h2, h3, p {margin-top:0; }
h1 {margin-bottom:0;font-size:clamp(1.35rem, 2.6vw, 2.1rem);line-height:1.12;letter-spacing:-.035em; }
h2 {margin-bottom:.4rem;font-size:clamp(1.25rem, 2.2vw, 1.7rem);line-height:1.2;letter-spacing:-.025em; }
h3 {margin-bottom:.35rem;font-size:1rem; }
.overline, .section-kicker {margin-bottom:.25rem;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal); }
.topbar .overline, .light {color:var(--mint); }
.top-actions {display:flex;gap:.65rem;flex-wrap:wrap; }
.button {border:0;border-radius:12px;padding:.65rem .95rem;cursor:pointer;font-weight:750;transition:transform .18s ease, background .18s ease; }
.button:hover {transform:translateY(-1px); }
.button.primary {background:var(--mint);color:var(--navy); }
.button.secondary {background:color-mix(in srgb,var(--theme-panel) 8.0%,transparent);color:var(--theme-inverse);border:1px solid color-mix(in srgb,var(--theme-line) 25.0%,transparent); }
.button.quiet {align-self:end;background:var(--theme-subtle);color:var(--navy); }
.filter-shell {position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--theme-panel) 96.0%,transparent);border-bottom:1px solid var(--line);box-shadow:0 6px 20px color-mix(in srgb,var(--theme-shadow-colour) 5.0%,transparent);backdrop-filter:blur(12px); }
.filter-grid {padding:.85rem clamp(1rem, 4vw, 4rem) .65rem;display:grid;grid-template-columns:.7fr 1.15fr 1.15fr 1fr 1.2fr auto;gap:.65rem;align-items:end; }
label {display:grid;gap:.25rem;color:var(--muted);font-size:.82rem;font-weight:700; }
select, input {width:100%;border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;background:var(--theme-panel);color:var(--ink); }
select:focus, input:focus, button:focus-visible, a:focus-visible {outline:3px solid color-mix(in srgb,var(--theme-focus) 28.0%,transparent);outline-offset:2px; }
.metadata-row {padding:.55rem clamp(1rem, 4vw, 4rem);display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;background:var(--theme-subtle);color:var(--theme-muted);font-size:.8rem; }
.meta-item strong {color:var(--ink); }
.verification-flag {color:var(--theme-text);font-weight:800; }
main {width:min(1500px, 100%);margin:auto;padding:1.2rem clamp(1rem, 4vw, 4rem) 3rem; }
.executive-strip {display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:.35rem 0 .85rem; }
.scope-note {margin:0;color:var(--muted);font-size:.9rem;text-align:right; }
.kpi-grid {display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:.8rem; }
.kpi-card {position:relative;min-height:136px;padding:1rem;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 24px color-mix(in srgb,var(--theme-shadow-colour) 4.0%,transparent);overflow:hidden; }
.kpi-card::after {content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--accent, var(--teal)); }
.kpi-label {display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;color:var(--muted);font-size:.82rem;font-weight:720; }
.info-button {width:25px;min-height:25px;height:25px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);cursor:help; }
.kpi-value {margin-bottom:.15rem;font-size:clamp(1.5rem, 2.6vw, 2.25rem);font-weight:850;line-height:1;letter-spacing:-.045em; }
.kpi-detail {margin:0;color:var(--muted);font-size:.78rem; }
.content-grid {display:grid;gap:1rem; }
.status-layout {grid-template-columns:1.65fr 1fr;margin-top:1rem; }
.panel {margin-top:1rem;padding:clamp(1rem, 2vw, 1.35rem);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); }
.panel-heading {display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1rem; }
.panel-heading h2 {margin-bottom:0; }
.split-heading {align-items:end; }
.panel-note {color:var(--muted);font-size:.8rem;margin-bottom:0; }
.method-chip, .warning-chip {display:inline-flex;align-items:center;min-height:32px;padding:.3rem .65rem;border-radius:999px;background:var(--theme-warning-soft);color:var(--theme-warning);font-size:.75rem;font-weight:800;white-space:nowrap; }
.warning-chip {background:var(--theme-warning-soft);color:var(--theme-warning); }
.status-rail {display:grid;grid-template-columns:repeat(5, 1fr);min-height:10px;border-radius:99px;overflow:hidden;background:var(--theme-subtle); }
.status-rail button {min-height:12px;padding:0;border:0;cursor:pointer;transition:filter .2s; }
.status-rail button:hover {filter:brightness(.88); }
.status-bars {margin-top:1rem;display:grid;grid-template-columns:repeat(5, 1fr);gap:.55rem; }
.status-card {padding:.7rem;border:1px solid var(--line);border-radius:12px;background:var(--theme-subtle);cursor:pointer;text-align:left; }
.status-card strong {display:block;font-size:1.35rem; }
.status-card span {color:var(--muted);font-size:.74rem; }
.mini-ranking {display:grid;gap:.7rem; }
.rank-row {display:grid;grid-template-columns:30px 1fr auto;gap:.6rem;align-items:center; }
.rank-number {width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--navy);color:var(--theme-inverse);font-size:.75rem;font-weight:800; }
.rank-row button {min-height:0;border:0;background:transparent;color:var(--ink);padding:0;text-align:left;cursor:pointer;font-weight:760; }
.rank-value {color:var(--red);font-weight:820; }
.text-button, .text-link {display:inline-block;margin-top:1rem;border:0;background:transparent;color:var(--theme-text);padding:0;min-height:0;font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer; }
.dimension-layout {display:grid;grid-template-columns:minmax(300px, .9fr) 1.35fr;gap:1.2rem;align-items:center; }
.radar-wrap {min-height:340px; }
.radar-wrap svg {width:100%;height:100%; }
.dimension-bars {display:grid;gap:.75rem; }
.dimension-bar-row button {display:grid;grid-template-columns:minmax(180px, 1fr) 3fr 54px;align-items:center;gap:.7rem;width:100%;padding:.15rem;min-height:36px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left; }
.bar-track {height:12px;border-radius:99px;background:var(--theme-subtle);overflow:hidden; }
.bar-fill {height:100%;background:linear-gradient(90deg, var(--teal), var(--mint));border-radius:inherit; }
.dimension-value {text-align:right;font-weight:850; }
.table-wrap {width:100%;overflow-x:auto;margin-top:1rem;border:1px solid var(--line);border-radius:14px; }
.table-link {min-height:0;padding:0;border:0;background:none;color:var(--theme-text);font-weight:800;cursor:pointer;text-align:left; }
.status-inline {display:inline-flex;gap:.2rem;flex-wrap:wrap; }
.status-dot {width:8px;height:8px;border-radius:50%;display:inline-block; }
.compact-label {min-width:260px; }
.priority-panel {border-top:5px solid var(--amber); }
.priority-explainer {max-width:1000px;color:var(--muted); }
.priority-list {display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:.75rem; }
.priority-item {padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--theme-subtle);cursor:pointer;text-align:left;min-height:190px; }
.priority-item:hover {border-color:var(--teal);box-shadow:0 8px 25px color-mix(in srgb,var(--theme-shadow-colour) 8.0%,transparent); }
.priority-topline {display:flex;justify-content:space-between;gap:.5rem;color:var(--muted);font-size:.75rem; }
.priority-score {font-weight:850;color:var(--amber); }
.priority-item h3 {margin:.6rem 0 .1rem;font-size:1.05rem; }
.priority-reasons {margin:.7rem 0 0;padding-left:1rem;color:var(--muted);font-size:.78rem; }
.quality-tag {display:inline-block;margin-top:.6rem;padding:.18rem .45rem;border-radius:7px;background:var(--theme-subtle);color:var(--theme-text);font-size:.7rem;font-weight:800; }
.insight-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:1rem; }
.insight-card {min-height:320px; }
.insight-list {display:grid;gap:.7rem;margin-top:1rem; }
.insight-row {display:grid;grid-template-columns:1fr auto;gap:.65rem;padding-bottom:.65rem;border-bottom:1px solid var(--line); }
.insight-row:last-child {border-bottom:0; }
.insight-row strong {display:block; }
.insight-row small {color:var(--muted); }
.count-pill {align-self:start;padding:.25rem .48rem;border-radius:8px;background:var(--theme-subtle);color:var(--navy);font-weight:850;font-size:.75rem; }
.narrative-panel {display:grid;grid-template-columns:auto 1fr;gap:1.2rem;margin-top:1rem;padding:clamp(1.4rem, 3vw, 2.2rem);background:var(--navy);color:var(--theme-inverse);border-radius:20px;box-shadow:var(--shadow); }
.narrative-index {width:54px;height:54px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--theme-line) 28.0%,transparent);border-radius:15px;color:var(--mint);font-weight:850; }
.narrative-panel p {max-width:1050px;color:var(--theme-muted); }
footer {display:flex;justify-content:space-between;gap:1rem;padding:1.3rem clamp(1rem, 4vw, 4rem);background:var(--theme-footer);color:var(--theme-text);font-size:.8rem; }
footer p {margin:0; }
dialog {width:min(820px, calc(100% - 2rem));max-height:calc(100vh - 2rem);padding:0;border:0;border-radius:18px;color:var(--ink);box-shadow:0 30px 80px color-mix(in srgb,var(--theme-shadow-colour) 30.0%,transparent); }
dialog::backdrop {background:color-mix(in srgb,var(--theme-overlay) 72.0%,transparent);backdrop-filter:blur(4px); }
.dialog-close {position:sticky;float:right;top:1rem;right:1rem;width:42px;min-height:42px;border:0;border-radius:50%;background:var(--theme-subtle);font-size:1.5rem;cursor:pointer; }
.dialog-body {padding:1.5rem 1.6rem 1.8rem; }
.dialog-grid {display:grid;grid-template-columns:repeat(2, 1fr);gap:.7rem; }
.dialog-stat {padding:.8rem;border-radius:12px;background:var(--theme-subtle); }
.dialog-stat small {color:var(--muted); }
.dialog-stat strong {display:block;font-size:1.2rem; }
.toast {position:fixed;right:1rem;bottom:1rem;z-index:50;max-width:360px;padding:.8rem 1rem;border-radius:12px;background:var(--navy);color:var(--theme-inverse);box-shadow:var(--shadow);opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s ease; }
.toast.show {opacity:1;transform:translateY(0); }
.empty-state {padding:2.5rem 1rem;text-align:center;color:var(--muted); }

/* UI/UX Tahap 4 — Beranda sebagai ringkasan keputusan. */
.decision-heading {align-items:start;margin-top:.75rem; }
.decision-lead {max-width:760px;margin:.45rem 0 0;color:var(--muted); }
.decision-findings {display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:.85rem; }
.decision-card {display:flex;flex-direction:column;min-height:270px;padding:1.1rem;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:16px;box-shadow:0 10px 28px color-mix(in srgb,var(--theme-shadow-colour) 6.0%,transparent); }
.decision-card[data-information-type="official"] {border-top-color:var(--teal); }
.decision-card[data-information-type="attention"] {border-top-color:var(--red); }
.decision-card[data-information-type="cause"] {border-top-color:var(--blue); }
.decision-card[data-information-type="analytical"] {border-top-color:var(--amber); }
.decision-card-top {display:flex;align-items:start;justify-content:space-between;gap:.5rem;min-height:33px; }
.decision-type {display:inline-flex;width:fit-content;padding:.25rem .5rem;border-radius:999px;background:var(--theme-subtle);color:var(--theme-text);font-size:.68rem;line-height:1.3;font-weight:850;letter-spacing:.025em;text-transform:uppercase; }
.decision-type.attention {background:var(--theme-subtle);color:var(--theme-text); }
.decision-type.cause {background:var(--theme-subtle);color:var(--theme-text); }
.decision-type.analytical {background:var(--theme-subtle);color:var(--theme-text); }
.decision-arrow {color:var(--muted);font-size:1.2rem; }
.decision-card h3 {margin:.85rem 0 .4rem;font-size:1.05rem; }
.decision-value {margin:0 0 .65rem;color:var(--navy);font-size:1.28rem;line-height:1.25;font-weight:850; }
.decision-reason {margin:0 0 1rem;color:var(--muted);font-size:.82rem; }
.decision-card a {margin-top:auto;color:var(--theme-text);font-weight:850;text-underline-offset:4px; }
.decision-context-grid {grid-template-columns:1.65fr 1fr;margin-top:.15rem; }
.attention-panel {border-top:4px solid var(--red); }
.cause-overview {display:grid;grid-template-columns:minmax(0, 1.5fr) auto;align-items:center;gap:1.5rem;border-left:5px solid var(--blue); }
.cause-summary {max-width:820px;margin-bottom:0;color:var(--muted); }
.cause-actions {display:flex;align-items:center;justify-content:end;gap:.85rem;flex-wrap:wrap; }
.decision-primary {display:inline-flex;align-items:center;text-decoration:none; }
.next-decision {display:grid;grid-template-columns:minmax(260px, .8fr) 1.5fr;gap:1.5rem;margin-top:1rem;padding:clamp(1.25rem, 2.5vw, 2rem);border-radius:20px;background:var(--navy);color:var(--theme-inverse); }
.next-decision-copy p:last-child {margin-bottom:0;color:var(--theme-muted); }
.next-decision-actions {display:grid;grid-template-columns:repeat(3, 1fr);gap:.75rem; }
.next-decision-actions a {display:flex;flex-direction:column;justify-content:center;gap:.35rem;min-height:126px;padding:1rem;border:1px solid color-mix(in srgb,var(--theme-line) 20.0%,transparent);border-radius:14px;background:color-mix(in srgb,var(--theme-panel) 7.0%,transparent);color:var(--theme-inverse);text-decoration:none; }
.next-decision-actions a:hover, .next-decision-actions a:focus-visible {background:color-mix(in srgb,var(--theme-panel) 13.0%,transparent); }
.next-decision-actions span {color:var(--theme-text);font-size:.78rem; }
.advanced-analysis {margin-top:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--theme-subtle); }
.advanced-analysis > summary {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none;color:var(--navy); }
.advanced-analysis > summary::-webkit-details-marker {display:none; }
.advanced-analysis > summary span:first-child {display:grid; }
.advanced-analysis > summary small {margin-top:.15rem;color:var(--muted);font-weight:500; }
.advanced-action {display:inline-flex;padding:.4rem .7rem;border-radius:9px;background:var(--navy);color:var(--theme-inverse);font-size:.78rem;font-weight:800; }
.advanced-content {padding:0 1rem 1rem; }
.advanced-content > .panel:first-child {margin-top:0; }
@media (max-width: 1120px) {
  .filter-grid {grid-template-columns:repeat(3, 1fr); }
  .kpi-grid {grid-template-columns:repeat(3, 1fr); }
  .priority-list {grid-template-columns:repeat(2, 1fr); }
  .decision-findings {grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .next-decision {grid-template-columns:1fr; }
}
@media (max-width: 780px) {
  .topbar, .executive-strip, .panel-heading, footer {align-items:stretch;flex-direction:column; }
  .filter-shell {position:static; }
  .filter-grid, .status-layout, .dimension-layout, .insight-grid {grid-template-columns:1fr; }
  .kpi-grid {grid-template-columns:repeat(2, 1fr); }
  .priority-list {grid-template-columns:1fr; }
  .status-bars {grid-template-columns:repeat(2, 1fr); }
  .status-rail {grid-template-columns:repeat(5, minmax(30px,1fr)); }
  .scope-note {text-align:left; }
  .compact-label {min-width:0; }
  .decision-context-grid, .cause-overview, .next-decision-actions {grid-template-columns:1fr; }
  .cause-actions {justify-content:start; }
}
@media (max-width: 480px) {
  .kpi-grid {grid-template-columns:1fr; }
  .top-actions {display:grid;grid-template-columns:1fr 1fr; }
  .brand-mark {display:none; }
  .dialog-grid {grid-template-columns:1fr; }
  .decision-findings {grid-template-columns:1fr; }
  .decision-card {min-height:0; }
  .advanced-analysis > summary {align-items:start; }
}
@media print {
  .filter-shell, .top-actions, .text-button, .text-link, footer {display:none !important; }
  body {background:var(--theme-panel); }
  .panel, .kpi-card {box-shadow:none;break-inside:avoid; }
  main {max-width:none;padding:0; }
}