:root{
  --canvas:#f9fafb;
  --surface:#ffffff;
  --surface-mist:#eef2f6;
  --surface-sunk:#f3f5f7;
  --border:#dde4ea;
  --border-heavy:#1d2d3b;
  --ink:#0c1722;
  --ink-soft:#1d2d3b;
  --muted:#4c5b69;
  --slate:#667684;
  --ash:#8795a1;
  --brand:#0a1c2b;
  --brand-mid:#25506f;
  --brand-light:#6f96b5;
  --brand-deep:#050f18;
  --accent-gold:#9a6d1c;
  --good:#237a4c;
  --warn:#9c6a1e;
  --bad:#a83e50;
  --shadow-card:rgba(10,28,43,0.10) 0 0 0 1px, rgba(10,28,43,0.07) 0 16px 36px -18px;
  --shadow-pop:rgba(10,28,43,0.18) 0 0 0 1px, rgba(10,28,43,0.16) 0 24px 56px -16px;
  --font-display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0;text-wrap:balance;}
a{color:inherit;}
.tabular{font-variant-numeric:tabular-nums;}
::selection{background:var(--brand-light);color:var(--ink);}

.wrap{max-width:1280px;margin:0 auto;padding-inline:20px;}
@media (min-width:900px){.wrap{padding-inline:32px;}}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--canvas);border-bottom:1px solid var(--border);}
.topbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-block:12px;}
.topbar .brand-logo{width:38px;height:38px;object-fit:contain;flex:none;}
.topbar .brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden;}
.topbar .brand-text strong{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .brand-text span{font-size:10.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.pagenav{display:flex;gap:4px;margin-left:auto;flex:none;}
.pagenav a{font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:99px;white-space:nowrap;border:1px solid transparent;}
.pagenav a:hover{color:var(--ink);background:var(--surface-mist);}
.pagenav a.active{color:var(--brand);background:color-mix(in srgb, var(--brand-light) 22%, transparent);border-color:color-mix(in srgb, var(--brand) 25%, transparent);}
.nav-group{position:relative;}
.nav-parent{font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--muted);background:none;padding:8px 12px;border-radius:99px;white-space:nowrap;border:1px solid transparent;cursor:pointer;}
.nav-parent i{font-style:normal;font-size:9px;margin-left:3px;opacity:.7;}
.nav-parent:hover,.nav-group.open .nav-parent{color:var(--ink);background:var(--surface-mist);}
.nav-parent.active{color:var(--brand);background:color-mix(in srgb, var(--brand-light) 22%, transparent);border-color:color-mix(in srgb, var(--brand) 25%, transparent);}
.nav-parent:focus-visible{outline:2px solid var(--brand-light);outline-offset:1px;}
.nav-menu{display:none;position:absolute;left:0;top:100%;min-width:200px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);z-index:80;flex-direction:column;gap:2px;}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;}
.nav-group.open .nav-menu{display:flex;}
@media (hover:hover){.nav-group:hover .nav-menu{display:flex;}}
.nav-menu a{border-radius:7px;padding:9px 12px;}

/* ---------- filter bar ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:12px;border-top:1px solid var(--border);}
.filterbar .fb-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ash);margin-right:2px;flex:none;}
.tf{font-family:var(--font-body);font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 10px;}
.filterbar select.tf{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (min-width:640px){.filterbar select.tf{max-width:210px;}}
.tf:focus{outline:2px solid var(--brand-light);outline-offset:-1px;}
.fb-reset{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--brand);background:none;border:1px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;}
.fb-reset:hover{background:var(--surface-mist);}
.fb-count{margin-left:auto;font-size:11.5px;color:var(--ash);font-family:var(--font-mono);white-space:nowrap;}

.kbli-combo{position:relative;flex:0 1 220px;min-width:160px;}
.kbli-combo input.tf{width:100%;max-width:none;padding-right:26px;}
.kbli-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;line-height:16px;text-align:center;border:none;background:var(--surface-mist);color:var(--ash);border-radius:99px;font-size:13px;cursor:pointer;padding:0;}
.kbli-clear:hover{color:var(--ink);background:var(--border);}
.kbli-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-pop);max-height:280px;overflow-y:auto;z-index:60;}
.kbli-suggest-item{display:flex;align-items:baseline;gap:8px;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--border);}
.kbli-suggest-item:last-child{border-bottom:none;}
.kbli-suggest-item:hover{background:var(--surface-sunk);}
.kbli-suggest-item .ks-code{font-family:var(--font-mono);font-size:11px;color:var(--brand);flex:none;}
.kbli-suggest-item .ks-title{font-size:12px;color:var(--ink-soft);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kbli-suggest-item .ks-count{font-family:var(--font-mono);font-size:11px;color:var(--ash);flex:none;}

/* ---------- hero ---------- */
.hero{padding-block:36px 30px;border-bottom:1px solid var(--border);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:5px 13px 5px 11px;}
.eyebrow .dot{width:6px;height:6px;border-radius:99px;background:var(--brand);}
.hero h1{font-size:32px;font-weight:900;letter-spacing:-0.02em;line-height:1.08;margin-top:16px;max-width:18ch;}
@media (min-width:640px){.hero h1{font-size:42px;}}
.hero p.lede{font-size:15px;color:var(--muted);max-width:64ch;margin-top:14px;}
.hero .lede b{color:var(--ink-soft);}

.data-alert{margin-top:16px;max-width:74ch;font-size:12.5px;line-height:1.5;color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, var(--surface));border:1px solid color-mix(in srgb, var(--warn) 35%, var(--border));border-radius:8px;padding:12px 14px;}
.data-alert b{color:var(--ink-soft);}

.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:26px;box-shadow:var(--shadow-card);}
@media (min-width:640px){.kpi-grid{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1080px){.kpi-grid{grid-template-columns:repeat(8,1fr);}}
.kpi-tile{background:var(--surface);padding:15px 15px 14px;position:relative;}
.kpi-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tile-accent,var(--brand));}
.kpi-tile .k-label{font-size:10.5px;font-weight:600;letter-spacing:0.04em;color:var(--slate);text-transform:uppercase;}
.kpi-tile .k-value{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.01em;margin-top:7px;color:var(--ink);}
.kpi-tile .k-sub{font-size:11.5px;color:var(--ash);margin-top:4px;}

/* ---------- sections ---------- */
.section{padding-block:44px;border-bottom:1px solid var(--border);}
.section:last-of-type{border-bottom:none;}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;}
.section-head .eyebrow-sm{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--brand);font-weight:600;}
.section-head h2{font-size:22px;font-weight:800;letter-spacing:-0.01em;margin-top:6px;}
.section-head p{font-size:13.5px;color:var(--muted);max-width:62ch;margin-top:6px;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:var(--shadow-card);}
.card-title{font-size:13px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.card-title .hint{font-size:11px;font-weight:500;color:var(--ash);}

.btn-group{display:inline-flex;border:1px solid var(--border);border-radius:5px;overflow:hidden;}
.btn-group button{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--muted);background:var(--surface);border:none;padding:6px 12px;cursor:pointer;border-right:1px solid var(--border);}
.btn-group button:last-child{border-right:none;}
.btn-group button.is-active{background:var(--brand);color:#fff;}

.chart-box{position:relative;height:280px;}
.chart-note{margin-top:14px;font-size:12px;color:var(--ash);border-top:1px dashed var(--border);padding-top:12px;}
.chart-note b{color:var(--muted);}

.comp-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:800px){.comp-grid{grid-template-columns:1fr 1fr;}}

.bar-list{display:flex;flex-direction:column;gap:11px;}
.bar-row{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:10px;}
.bar-row .b-label{font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-row .b-track{height:9px;background:var(--surface-mist);border-radius:99px;overflow:hidden;}
.bar-row .b-fill{height:100%;border-radius:99px;background:var(--brand-mid);}
.bar-row .b-val{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap;text-align:right;}

.split-stat{display:flex;flex-direction:column;gap:16px;}
.split-row{border:1px solid var(--border);border-radius:8px;padding:14px 16px;background:var(--surface-sunk);}
.split-row .sr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.split-row .sr-name{font-size:13px;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
.split-row .sr-name .swatch{width:9px;height:9px;border-radius:3px;}
.split-row .sr-count{font-family:var(--font-mono);font-size:11.5px;color:var(--ash);}
.split-row .sr-track{height:8px;background:var(--surface-mist);border-radius:99px;overflow:hidden;margin-top:10px;}
.split-row .sr-fill{height:100%;border-radius:99px;}
.split-row .sr-bottom{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;color:var(--muted);}
.split-row .sr-bottom b{color:var(--ink);font-family:var(--font-mono);font-weight:600;}

.risk-list{display:flex;flex-direction:column;gap:10px;}
.risk-row{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;}
.risk-row .r-label{font-size:12px;font-weight:600;color:var(--ink-soft);}
.risk-row .r-track{height:9px;background:var(--surface-mist);border-radius:99px;overflow:hidden;}
.risk-row .r-fill{height:100%;border-radius:99px;}
.risk-row .r-val{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);text-align:right;}

.sektor-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:960px){.sektor-grid{grid-template-columns:1.4fr 1fr;}}
.chip-list{display:flex;flex-direction:column;}
.chip-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.chip-row:last-child{border-bottom:none;}
.chip-row .c-rank{font-family:var(--font-mono);font-size:11px;color:var(--ash);width:18px;flex:none;}
.chip-row .c-code{font-family:var(--font-mono);font-size:10.5px;color:var(--brand);background:color-mix(in srgb, var(--brand-light) 20%, transparent);border-radius:4px;padding:2px 5px;flex:none;}
.chip-row .c-name{font-size:12.5px;font-weight:600;color:var(--ink-soft);flex:1;min-width:0;}
.chip-row .c-count{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);flex:none;}

.kbli-detail-list{display:flex;flex-direction:column;max-height:560px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;}
.kbli-detail-row{display:grid;grid-template-columns:26px 56px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;background:var(--surface);}
.kbli-detail-row:last-child{border-bottom:none;}
.kbli-detail-row:hover{background:var(--surface-sunk);}
.kbli-detail-row .kd-rank{font-family:var(--font-mono);font-size:11px;color:var(--ash);}
.kbli-detail-row .kd-code{font-family:var(--font-mono);font-size:11px;color:var(--brand);background:color-mix(in srgb, var(--brand-light) 20%, transparent);border-radius:4px;padding:3px 6px;text-align:center;}
.kbli-detail-row .kd-main{min-width:0;}
.kbli-detail-row .kd-title{font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kbli-detail-row .kd-track{height:5px;background:var(--surface-mist);border-radius:99px;overflow:hidden;margin-top:6px;}
.kbli-detail-row .kd-fill{height:100%;border-radius:99px;background:var(--brand-mid);}
.kbli-detail-row .kd-stats{text-align:right;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.kbli-detail-row .kd-stats b{display:block;color:var(--ink-soft);font-size:12.5px;}
.kbli-empty{padding:20px;text-align:center;color:var(--ash);font-size:12.5px;}
#nibList .kbli-detail-row{grid-template-columns:26px 112px 1fr auto;cursor:default;}
#nibList .kd-code{font-size:10.5px;letter-spacing:0.01em;}

.rank-list{display:flex;flex-direction:column;gap:8px;}
.rank-row{display:grid;grid-template-columns:22px 84px 1fr auto;align-items:center;gap:10px;padding:6px 0;}
.rank-row .rk-n{font-family:var(--font-mono);font-size:11px;color:var(--ash);}
.rank-row .rk-name{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-row .rk-track{height:8px;background:var(--surface-mist);border-radius:99px;overflow:hidden;}
.rank-row .rk-fill{height:100%;border-radius:99px;background:var(--brand-mid);}
.rank-row .rk-val{font-family:var(--font-mono);font-size:11px;color:var(--muted);white-space:nowrap;text-align:right;}

.cta-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(120deg, color-mix(in srgb, var(--brand-light) 20%, var(--surface)), var(--surface));border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin-top:16px;}
.cta-card .cta-text strong{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:3px;}
.cta-card .cta-text span{font-size:12.5px;color:var(--muted);}
.cta-btn{font-family:var(--font-body);font-size:13px;font-weight:700;color:#fff;background:var(--brand);border:none;border-radius:6px;padding:10px 18px;text-decoration:none;white-space:nowrap;}
.cta-btn:hover{background:var(--brand-deep);}

/* ---------- table ---------- */
.table-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.table-toolbar input[type="search"]{flex:1 1 260px;min-width:0;}
.table-scroll{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:8px;}
table.data-table{border-collapse:collapse;width:100%;min-width:880px;font-size:12.5px;}
table.data-table thead th{position:sticky;top:0;background:var(--surface-mist);text-align:left;font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none;}
table.data-table thead th.num{text-align:right;}
table.data-table thead th .arrow{opacity:0.35;margin-left:3px;}
table.data-table thead th.sorted .arrow{opacity:1;color:var(--brand);}
table.data-table tbody td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink-soft);}
table.data-table tbody tr:last-child td{border-bottom:none;}
table.data-table tbody tr:hover{background:var(--surface-sunk);}
table.data-table td.num{text-align:right;font-family:var(--font-mono);white-space:nowrap;}
.cell-title{font-weight:700;color:var(--ink);}
.cell-sub{font-size:11px;color:var(--ash);margin-top:1px;}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;}
.badge.pmdn{background:color-mix(in srgb, var(--brand-mid) 16%, transparent);color:var(--brand);}
.badge.pma{background:color-mix(in srgb, var(--accent-gold) 20%, transparent);color:var(--accent-gold);}
.risk-dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
.risk-dot i{width:7px;height:7px;border-radius:99px;flex:none;}
.table-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.table-foot .t-count{font-size:12px;color:var(--muted);}
.pager{display:flex;align-items:center;gap:8px;}
.pager button{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:6px 11px;cursor:pointer;}
.pager button:disabled{opacity:0.4;cursor:default;}
.pager .p-info{font-family:var(--font-mono);font-size:12px;color:var(--muted);}

/* ---------- methodology ---------- */
.meth-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:800px){.meth-grid{grid-template-columns:repeat(3,1fr);}}
.meth-card{border:1px solid var(--border);border-radius:8px;padding:16px;background:var(--surface-sunk);}
.meth-card h3{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.meth-card p{font-size:12px;color:var(--muted);margin:0;}
.meth-card code{font-family:var(--font-mono);font-size:11px;background:var(--surface-mist);color:var(--ink-soft);border-radius:4px;padding:1px 5px;}

/* ---------- footer ---------- */
footer{padding-block:38px 30px;}
.foot-grid{display:flex;flex-direction:column;gap:26px;}
@media (min-width:760px){.foot-grid{flex-direction:row;justify-content:space-between;align-items:flex-start;}}
.foot-col{display:flex;align-items:flex-start;gap:12px;max-width:420px;}
.foot-col img{width:44px;height:44px;object-fit:contain;flex:none;margin-top:2px;}
.foot-col .ft-name{font-size:13px;font-weight:700;color:var(--ink-soft);}
.foot-col .ft-desc{font-size:11.5px;color:var(--ash);margin-top:3px;line-height:1.5;}
.foot-col.foot-bp{padding-left:16px;border-left:2px solid var(--border);}
.foot-col.foot-its{flex-direction:row-reverse;text-align:right;}
@media (max-width:759px){.foot-col.foot-its{flex-direction:row;text-align:left;}}
.foot-bottom{border-top:1px solid var(--border);margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:11px;color:var(--ash);}

[hidden]{display:none!important;}

/* ---------- keterangan cakupan data ---------- */
.cutoff-note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;max-width:78ch;font-size:13px;line-height:1.5;color:var(--ink-soft);background:color-mix(in srgb, var(--accent-gold) 9%, var(--surface));border:1px solid color-mix(in srgb, var(--accent-gold) 32%, var(--border));border-left:3px solid var(--accent-gold);border-radius:8px;padding:10px 14px;}
.cutoff-note[hidden]{display:none;}
.cutoff-note .cn-ic{font-size:15px;line-height:1.4;color:var(--accent-gold);flex:none;}