:root {
  --navy: #082c63;
  --navy-deep: #031b3f;
  --ink: #10233f;
  --muted: #667085;
  --line: #263d5d;
  --header-height: 50px;
  /* Tinggi bilah iklan di dasar layar (assets/js/iklan.js). 0 selama tidak
     ada iklan; diisi di <html> oleh iklan.js, jadi ikut terbaca di rumus
     tinggi baris di bawah ini. */
  --iklan-h: 0px;
  --scrollbar-clearance: 26px;
  /* Tinggi viewport: dvh (tinggi nyata setelah URL bar browser mobile)
     dengan fallback vh untuk browser lama — kunci agar baris IDEAL Composite
     Score tepat di dasar layar tanpa terpotong. */
  --vph: 100vh;
  --matrix-head-height: clamp(86px, calc(var(--vph) * .11), 108px);
  --matrix-score-height: clamp(40px, calc(var(--vph) * .05), 52px);
  /* Jumlah baris. TIDAK PERLU disunting manual lagi: laporan.js menghitungnya
     dari DOM tiap render (lihat fitBankColumns) supaya tidak pernah basi saat
     indikator ditambah atau dipindah. Nilai di sini cuma cadangan sebelum
     skrip sempat jalan. */
  --matrix-rows: 15;
  --supplement-rows: 22;
  /* Ruang untuk tombol "Ruang Periksa" di bawah baris skor. Ikut dikurangkan
     dari jatah tinggi baris supaya tombolnya selalu utuh, berapa pun tinggi
     layarnya. */
  --ideal-button-zone: 62px;
  /* border-collapse:separate + .metric-row.dimension-start { border-top:3px }
     menambah tinggi NYATA di luar --matrix-row-height per baris (5 dimensi
     I/D/E/A/L = 5 sekat 3px = 15px). Sinkronkan bila jumlah dimensi berubah. */
  --dimension-border-slack: 15px;
  --matrix-row-height: clamp(24px, calc((var(--vph) - var(--header-height) - var(--iklan-h) - var(--terbaik-legend-h, 0px) - var(--matrix-head-height) - var(--matrix-score-height) - var(--scrollbar-clearance) - var(--dimension-border-slack) - var(--ideal-button-zone)) / var(--matrix-rows)), 74px);
  --supplement-border-slack: 15px;
  --supplement-bottom-slack: 18px;
  /* Dua suku terakhir dulu tidak ada di sini, dan itulah sebabnya baris
     terakhir Ruang Periksa selalu terpotong: sekat antar-kelompok dan
     margin bawah tabel memakan tinggi tapi tidak ikut dipotong dari jatah. */
  --supplement-row-height: clamp(30px, calc((var(--vph) - var(--header-height) - var(--iklan-h) - var(--terbaik-legend-h, 0px) - var(--matrix-head-height) - var(--scrollbar-clearance) - var(--supplement-border-slack) - var(--supplement-bottom-slack)) / var(--supplement-rows)), 58px);
  --sticky-dimension: 76px;
  --sticky-indicator: 144px;
  --bank-column: 130px;
}
@supports (height: 100dvh) {
  :root { --vph: 100dvh; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body {
  overflow: hidden;
  /* Halaman sendiri tidak pernah menggulir; tanpa ini gestur usap vertikal di
     ponsel diteruskan ke browser (bilah alamat bergerak, tarik-untuk-muat-ulang)
     sehingga terasa seolah laporannya ikut bergulir. */
  overscroll-behavior: none;
  background: #eef2f7;
  color: var(--ink);
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button { font: inherit; }

.report-header {
  position: relative;
  width: 100%;
  height: var(--header-height);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid #d7dee8;
  color: var(--ink);
}
.report-header-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.report-header-nav > :not(#method-toggle) {
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.report-header.period-open .report-header-nav > :not(#method-toggle) { transform: translateX(-145px); }
/* Tombol Metodologi dipatok ke tepi kiri header (di atas logo IDEAL pada
   matriks), lepas dari rombongan tombol yang terpusat — mirror dari
   .report-period yang dipatok ke kanan. Di mobile ia kembali mengalir sebagai
   tombol pertama di baris nav.
   Desktop dua-tahap: klik 1 → label "Metodologi IDEAL" meluncur ke kanan
   (max-width label yang dianimasikan, sehingga lebar tombol tumbuh mulus);
   klik 2 / klik di luar → label masuk lagi. Lihat bindMethodology(). */
#method-toggle {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: auto; overflow: hidden; white-space: nowrap;
}
#method-toggle svg { flex: none; margin: 0 8px; }
.method-label {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden;
  color: var(--navy-deep); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  transition: max-width .32s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, padding-right .32s ease;
}
#method-toggle.is-expanded { background: #fff; border-color: #c7d2e4; color: var(--navy); }
#method-toggle.is-expanded .method-label { max-width: 180px; opacity: 1; padding-right: 12px; }
@media (prefers-reduced-motion: reduce) { .method-label { transition: none; } }

.color-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #98a2b3;
  background: #f9fafb;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.color-toggle:hover,
.color-toggle:focus-visible {
  background: #f2f4f7;
  border-color: #d0d5dd;
  outline: none;
}
/* Gradien tombol ini = pratinjau skala warna yang dinyalakannya. Versi lama
   memakai warna permen (merah muda → kuning → biru langit → tosca) yang tidak
   ada di matriks mana pun, sehingga tombolnya menonjol seperti tempelan di
   antara ikon garis monokrom. Sekarang mengambil ujung & tengah ramp "lembut"
   (RUNG_PALETTES di laporan.js): maroon → amber → hijau. */
.color-toggle[aria-checked="true"] {
  color: #fff;
  background: linear-gradient(135deg, #8c2f39 0%, #d99a55 45%, #8fbf79 75%, #3d8a55 100%);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.color-toggle[aria-checked="true"]:hover,
.color-toggle[aria-checked="true"]:focus-visible {
  opacity: .92;
}
.color-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.watch-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.watch-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #98a2b3;
  background: #f9fafb;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.watch-toggle:hover,
.watch-toggle:focus-visible {
  background: #f2f4f7;
  border-color: #d0d5dd;
  outline: none;
}
.watch-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}
.watch-toggle.is-active {
  color: #fff;
  background: #16844b;
  border-color: #16844b;
}
.watch-toggle.is-active:hover,
.watch-toggle.is-active:focus-visible {
  background: #116b3b;
}
.watch-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.watch-field { position: relative; display: flex; align-items: center; gap: 6px; }
.watch-field[hidden] { display: none; }
.watch-input-wrap { position: relative; display: flex; align-items: center; }
.watch-input { width: 180px; padding: 6px 28px 6px 9px; border: 1px solid #cbd6e4; border-radius: 6px; font-size: 12px; }
.watch-input:focus { outline: 2px solid rgba(8,44,99,.25); border-color: var(--navy); }
.watch-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; padding: 0; color: #fff; background: #d21f32; border: 0; border-radius: 4px; font-size: 14px; font-weight: 800; line-height: 1; cursor: pointer; }
.watch-clear:hover,
.watch-clear:focus-visible { background: #b51b2a; outline: none; }
.watch-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; max-height: var(--watch-drop-max, 220px); overflow: auto; list-style: none; background: #fff; border: 1px solid #cbd6e4; border-radius: 6px; box-shadow: 0 10px 25px rgba(3,27,63,.14); z-index: 500; }
.watch-suggestions[hidden] { display: none; }
.watch-suggestions li { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; color: #344054; }
.watch-suggestions li:hover,
.watch-suggestions li[aria-selected="true"] { background: #edf3fa; }
.watch-suggestions li strong { color: var(--navy-deep); }
.watch-suggestions li[data-row] { display: flex; align-items: center; gap: 7px; }
.watch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-head { padding: 5px 8px 3px; color: #98a2b3; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: default; }
.watch-head:hover { background: transparent; }
.watch-recent-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #16844b; }
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Multi-select dropdown */
.ms { position: relative; }
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(3,27,63,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-btn:hover { border-color: #b9c6d8; }
.ms-btn:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(8,44,99,.15); }
.ms-btn-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ms-btn-value { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--navy-deep); }
.ms-chevron { flex: none; color: #98a2b3; transition: transform .15s ease; }
.ms.is-open .ms-chevron { transform: rotate(180deg); }
.ms.is-active .ms-btn { border-color: var(--navy); background: #f5f8fd; box-shadow: inset 0 0 0 1px var(--navy); }
.ms.is-active .ms-btn-value { color: var(--navy); }
.ms-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 520;
  width: 264px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(3,27,63,.18), 0 4px 12px rgba(3,27,63,.08);
}
.ms-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 7px 9px;
  border: 1px solid #d7dee8;
  border-radius: 7px;
  font-size: 12px;
}
.ms-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(8,44,99,.12); }
.ms-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin-bottom: 4px;
  padding: 0 2px;
}
.ms-actions button {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.ms-actions button:hover { background: #edf3fa; }
.ms-icon-act {
  width: 26px;
  height: 26px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
}
.ms-icon-act svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sort aset: menempel kanan dan sejajar dengan kolom badge aset. */
.ms-actions .ms-sort { margin-left: auto; min-width: 58px; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d7dee8; }
.ms-actions .ms-sort b { min-width: 10px; font-size: 12px; line-height: 1; }
.ms-actions .ms-sort.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ms-actions .ms-x { margin-left: auto; }
.ms-actions .ms-sort + .ms-x { margin-left: 8px; }
.ms-x {
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #5c6c86;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.ms-x:hover,
.ms-x:focus-visible { background: #d21f32; color: #fff; outline: none; }
.ms-list {
  margin: 0;
  padding: 0;
  max-height: 264px;
  overflow: auto;
  list-style: none;
  overscroll-behavior: contain;
}
.ms-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  color: #344054;
  cursor: pointer;
}
.ms-list label:hover { background: #edf3fa; }
.ms-list input[type="checkbox"] { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.ms-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-opt-count { flex: none; padding: 1px 7px; background: #eef2f7; border-radius: 999px; color: #667085; font-size: 10.5px; font-style: normal; font-weight: 700; }
.ms-list li:has(input:checked) label { background: #eaf1fb; }
.ms-list li:has(input:checked) .ms-opt-label { color: var(--navy-deep); font-weight: 700; }

/* Tombol toggle kepemilikan: Pemda | Swasta (bisa aktif salah satu atau off semua). */
.ownership-toggle {
  display: inline-flex;
  align-items: center;
  height: 34px;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(3,27,63,.05);
}
.ownership-btn {
  height: 100%;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid #e4e7ec;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.ownership-btn:last-child { border-right: 0; }
.ownership-btn:hover { background: #f9fafb; color: var(--ink); }
.ownership-btn:focus-visible { outline: none; background: #f5f8fd; }
.ownership-btn.is-active { background: var(--navy); color: #fff; }
.ownership-btn.is-active:hover { background: #06264f; }

.filter-count {
  padding: 4px 9px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.matrix-empty { padding: 48px 24px; color: var(--muted); text-align: center; font-size: 14px; }

.report-period {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--navy-deep);
  white-space: nowrap;
}
.report-period .period-kicker { display: none; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.report-period strong { color: var(--navy-deep); font-size: 13px; font-weight: 800; }
.period-timeline {
  position: relative;
  width: 76px;
  height: 44px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border: 1px solid #d7e0ec;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(8,44,99,.14), inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  transition: width .34s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease;
  will-change: width;
}
.period-timeline.is-open {
  width: 352px;
  border-color: #c4d2e4;
  box-shadow: 0 14px 34px rgba(8,44,99,.18), inset 0 1px 0 rgba(255,255,255,.92);
}
.period-timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  right: 23px;
  top: 15px;
  height: 2px;
  background: #dbe5f0;
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: right center;
  transition: opacity .2s ease, transform .34s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.period-timeline.is-open::before { opacity: 1; transform: scaleX(1); }
.period-tick {
  position: relative;
  z-index: 1;
  width: 67px;
  min-width: 67px;
  height: 36px;
  padding: 4px 12px 5px 18px;
  display: grid;
  grid-template-rows: 11px 13px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #667085;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px) scale(.96);
  pointer-events: none;
  /* Lebar & padding ikut ditransisikan: saat sibling melebar/menyempit, tick
     aktif ikut meluncur mulus ke slot kronologisnya (bukan meloncat). */
  transition: opacity .24s ease, transform .32s cubic-bezier(.22,.68,.16,1), width .34s cubic-bezier(.22,.68,.16,1), min-width .34s cubic-bezier(.22,.68,.16,1), padding .34s cubic-bezier(.22,.68,.16,1), background .16s ease, color .16s ease, box-shadow .16s ease;
}
.period-tick.is-active,
.period-timeline.is-open .period-tick {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.period-timeline:not(.is-open) .period-tick:not(.is-active) {
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.period-dot {
  width: 9px;
  height: 9px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #b8c4d4;
  box-shadow: 0 0 0 3px #fff;
}
.period-year {
  color: #98a2b3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.period-tick strong {
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
}
.period-tick:hover,
.period-tick:focus-visible {
  background: #eef4fb;
  color: var(--navy-deep);
  outline: none;
}
.period-tick.is-active {
  color: #fff;
  background: linear-gradient(180deg, #0f3f78 0%, var(--navy) 100%);
  box-shadow: 0 7px 16px rgba(8,44,99,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.period-tick.is-active .period-dot {
  background: #36d47a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.24), 0 0 0 5px rgba(54,212,122,.18);
}
.period-tick.is-active .period-year { color: rgba(255,255,255,.72); }
.period-timeline.is-loading { opacity: .68; cursor: progress; }
.period-timeline.is-loading .period-tick { cursor: progress; }
.period-select {
  display: none;
  min-width: 92px;
  padding: 7px 30px 7px 11px;
  border: 1px solid rgba(207,217,232,.9);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,253,.92));
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(8,44,99,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition: all .15s ease;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,253,.92));
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}
.period-select:hover { border-color: #bcc9dc; background-color: #fff; }
.period-select:focus { outline: 2px solid rgba(8,44,99,.25); border-color: var(--navy); }
.period-select:disabled { opacity: .5; cursor: progress; }

.nav-divider { width: 1px; height: 22px; background: #e4e7ec; }

/* Layar sedang: sembunyikan label "Laporan Publikasi" agar tidak menabrak filter. */
@media (max-width: 1720px) {
  .report-period .period-kicker { display: none; }
}

.score-tooltip {
  position: fixed;
  z-index: 700;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 20px));
  max-height: calc(var(--vph) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 12px;
  background: #ffffff;
  color: var(--ink);
  border: 1px solid #cfd9e8;
  border-radius: 12px;
  box-shadow: 0 24px 54px rgba(8,44,99,.26), 0 3px 10px rgba(8,44,99,.12);
  font-size: 11px;
  line-height: 1.45;
}
.score-tooltip[hidden] { display: none; }
/* Header full-width menempel atas kartu, dengan aksen garis navy tipis supaya
   popup jelas terpisah dari konten putih di belakang/bawahnya. */
.score-tooltip h4 { position: sticky; top: 0; z-index: 1; margin: 0 -14px 8px; padding: 12px 14px 9px; background: linear-gradient(180deg,#ffffff,#f5f9ff); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid #e6edf6; border-radius: 12px 12px 0 0; }
.score-tooltip ul { margin: 0; padding: 0; list-style: none; }
.score-tooltip li { padding: 4px 0; display: flex; align-items: center; gap: 8px; border-top: 1px solid #eef2f8; }
.score-tooltip li:first-child { border-top: 0; }
.score-tooltip li.is-active { margin: 0 -7px; padding: 5px 8px; background: #eaf1ff; border-radius: 6px; box-shadow: inset 3px 0 var(--navy); }
.score-tooltip li .tt-icon { flex: none; min-width: 18px; display: flex; gap: 1px; align-items: center; }
.score-tooltip li .tt-icon svg { width: 13px; height: 13px; display: block; }
.score-tooltip li .tt-range { flex: 1; color: #26374f; font-weight: 600; font-variant-numeric: tabular-nums; }
.score-tooltip li .tt-label { flex: none; color: #6a7b93; font-size: 10px; }
.score-tooltip li.is-active .tt-range,
.score-tooltip li.is-active .tt-label { color: var(--navy); font-weight: 800; }

.report-main { width: 100%; height: calc(var(--vph) - var(--header-height) - var(--iklan-h)); }
/* Versi gratis punya bilah ajakan melayang di dasar layar. Tanpa memotong
   tinggi area laporan, bilah itu MENIMPA bagian bawah matriks — dan yang
   tepat tertimpa adalah tombol "Ruang Periksa", yang memang diposisikan
   sejajar baris skor di dasar tabel. Akibatnya blok indikator tanpa bobot
   tidak pernah bisa dibuka sama sekali dari versi gratis. Tingginya diukur
   runtime (syncFreeBarHeight di laporan.js), bukan ditebak: bilahnya
   membungkus jadi dua baris di ponsel dan menghilang di mode intip. */
body.free-mode .report-main { height: calc(var(--vph) - var(--header-height) - var(--iklan-h) - var(--free-bar-h, 0px)); }
.report-main > section { width: 100%; height: 100%; position: relative; }

/* ── Dua tampilan: matriks IDEAL vs Ruang Periksa ────────────────────────────
   Papan Skor HANYA memuat indikator berskor. Baris tanpa bobot disembunyikan
   dan baru muncul di Ruang Periksa, yang digulir vertikal secara mandiri.
   Keduanya berbagi satu <table> supaya lebar kolom bank, sticky header, dan
   posisi gulir mendatar tetap sinkron.

   BARIS SKOR SENGAJA TIDAK IKUT ke Ruang Periksa. Sempat dicoba menggantung
   di dasar layar supaya angkanya tidak hilang saat membaca konteks, tapi
   keputusannya dibalik: Ruang Periksa adalah ruang untuk membaca hal yang
   TIDAK menghitung skor, dan menempelkan skornya di situ justru mengaburkan
   pemisahan yang jadi alasan kedua ruang ini dipisah sejak awal. */
.supplement-row { display: none; }
html.view-lainnya .supplement-row { display: table-row; }
html.view-lainnya .ideal-matrix tbody .metric-row:not(.supplement-row),
html.view-lainnya .ideal-matrix .score-row { display: none; }

/* Pengganjal di ujung tabel. Sakelar ruang melayang menutupi pita terbawah,
   jadi tanpa ini baris konteks TERAKHIR selalu berakhir di baliknya dan tidak
   pernah bisa dibaca utuh. Ruang disediakan lewat baris di dalam tabel, bukan
   padding di penggulir: padding penggulir bertumpuk dengan offset elemen
   lengket di dalamnya dan menggeser perhitungan lain. */
/* ── Tanda sibuk saat berpindah ruang ────────────────────────────────────────
   Menata ulang 14-20 ribu sel makan sekitar satu detik, dan selama itu layar
   diam sepenuhnya. Tanpa tanda apa pun, satu-satunya kesimpulan yang masuk akal
   bagi pembaca adalah tombolnya tidak berfungsi -- lalu ia menekannya lagi,
   yang justru menggandakan pekerjaannya. Pita tipis berjalan di kepala matriks
   sudah cukup; sesuatu yang menutupi layar akan terasa jauh lebih lambat
   daripada yang sebenarnya. */
html.ruang-sibuk .room-btn { cursor: progress; }
html.ruang-sibuk #matrix-container { position: relative; }
html.ruang-sibuk #matrix-container::before {
  content: ''; position: sticky; top: 0; left: 0; z-index: 90;
  display: block; height: 3px; margin-bottom: -3px;
  background: linear-gradient(90deg, transparent, #2a78d6 45%, #6fb0ff 55%, transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: ruangSibukJalan .85s linear infinite;
  pointer-events: none;
}
@keyframes ruangSibukJalan {
  from { background-position: -45% 0; }
  to   { background-position: 145% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.ruang-sibuk #matrix-container::before { animation: none; background: #2a78d6; background-size: 100% 100%; }
}

.ruang-spacer { display: none; }
html.view-lainnya .ruang-spacer { display: table-row; }
html.view-lainnya .ruang-spacer > td {
  height: calc(var(--ideal-button-zone) + var(--scrollbar-clearance, 0px) + 8px);
  padding: 0;
  border: 0;
  background: transparent;
}

/* Judul kelompok menempel selama kelompoknya masih di layar. Sel ini
   ber-rowspan sepanjang grupnya, jadi sticky dua sumbu (kiri untuk kolom
   label, atas untuk kepala kolom bank) membuatnya berhenti persis di bawah
   kepala tabel dan lepas sendiri saat grup berikutnya naik. Tanpa ini, setelah
   menggulir sedikit dari 1.330px isi Ruang Periksa, pembaca kehilangan
   satu-satunya penanda ia sedang membaca kelompok yang mana. */
html.view-lainnya .dimension-cell.supplement-dim { top: calc(var(--matrix-head-height) + 3px); }
/* Baris suplemen pertama jadi baris teratas di tampilan ini — hilangkan garis
   pemisah tebal yang tadinya memisahkannya dari blok skor di atasnya. */
html.view-lainnya .supplement-row.dimension-start:first-of-type > th,
html.view-lainnya .supplement-row.dimension-start:first-of-type > td { border-top: 0; }

/* ── Sakelar dua ruang: Papan Skor / Ruang Periksa ──────────────────────────
   Satu objek, satu tempat, dua arah. Sebelumnya dua tombol di dua sudut yang
   berbeda (tengah-bawah untuk berangkat, kiri-atas untuk pulang), sehingga
   pintunya berpindah dan sudut logo IDEAL ikut tertutup.

   Sakelar duduk di dalam --ideal-button-zone: pita 62px yang memang sudah
   dicadangkan di bawah tabel (ikut dikurangkan dari jatah tinggi baris), DI
   ATAS scrollbar mendatar. Tanpa memperhitungkan scrollbar-nya tombol ini
   menindih batang gulir, sehingga matriks tidak bisa lagi digeser ke samping
   dari tengah layar — dan tingginya berbeda-beda: ~15px di desktop, 0 di
   ponsel (scrollbar overlay). --scrollbar-clearance diisi refitColumns() dari
   selisih offsetHeight vs clientHeight yang SEBENARNYA, bukan angka tetap. */
/* Versi gratis, daftar peringkat: sakelar ruang tidak melakukan apa-apa di
   sana (kolom detailnya terkunci semua), jadi disembunyikan — tombol yang
   tidak berguna lebih buruk daripada tidak ada. Muncul lagi di mode intip
   (.preview-mode), tempat kedua ruangnya benar-benar bisa dibuka. */
body.free-mode:not(.preview-mode) .room-switch { display: none; }
.room-switch {
  position: absolute;
  left: 50%;
  /* 17px = separuh sisa pita setelah dikurangi tinggi tombol, diukur bukan
     dikira: pita bebas antara dasar tabel dan batang gulir 75px, tombol 42px,
     jadi 16,5px di atas dan di bawahnya. Ponsel punya angkanya sendiri karena
     tombolnya lebih tinggi dan tidak ada scrollbar yang memakan tempat. */
  bottom: calc(var(--scrollbar-clearance, 0px) + 17px);
  transform: translateX(-50%);
  z-index: 90;                      /* di atas sel sudut sticky (z-index 70) */
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid #2c4a72;
  background: var(--navy, #10233f);
  box-shadow: 0 8px 24px rgba(16, 35, 63, .34);
}
.room-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.room-btn:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.room-btn:focus-visible { outline: 3px solid #8fb4ea; outline-offset: 2px; }
/* Ruang yang sedang ditempati: pelat terang, bukan sekadar teks lebih putih.
   Pembaca harus tahu ia ADA DI MANA, bukan menebak dari mana yang lebih pucat. */
.room-btn.is-active {
  background: #fff;
  color: var(--navy-deep, #031b3f);
  box-shadow: 0 2px 6px rgba(3, 27, 63, .3);
}
.room-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Jumlah baris ditulis di pelat ruang yang SEDANG TIDAK ditempati: itu yang
   menjawab "ada apa di sebelah sana" sebelum pembaca menyeberang. Di ruang yang
   sedang ditempati angkanya mubazir — barisnya kelihatan. */
.room-sub { font-size: 10.5px; font-weight: 600; opacity: .72; letter-spacing: 0; }
.room-btn.is-active .room-sub { display: none; }

@media (max-width: 720px) {
  .room-switch { bottom: calc(var(--scrollbar-clearance, 0px) + 11px); padding: 3px; }
  .room-btn { padding: 6px 11px; font-size: 11.5px; gap: 6px; min-height: 38px; }
  /* Di layar sempit dua nama penuh + dua angka tidak muat; angkanya yang
     dikorbankan lebih dulu, namanya tidak pernah. */
  .room-sub { display: none; }
}
@media (max-width: 374px) {
  .room-btn { padding: 6px 9px; font-size: 11px; gap: 4px; }
  .room-btn svg { width: 13px; height: 13px; }
}

.matrix-shell {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Gulir berhenti di dalam kotak ini. Di tampilan IDEAL tidak ada yang bisa
     digulir vertikal sama sekali, dan di Ruang Periksa gulirnya berhenti di
     baris terakhir — tidak merembet ke halaman atau ke browser. Inilah yang
     membuat kedua tampilan benar-benar terpisah di layar sentuh, bukan cuma
     di desktop. */
  overscroll-behavior: contain;
  background: #fff;
  scrollbar-color: #8fa1b8 #eef2f7;
}

.ideal-matrix {
  width: max-content;
  min-width: 100%;
  height: auto;
  /* Ruang snap halaman 2 dihitung dinamis oleh fitBankColumns (marginBottom). */
  margin-bottom: 56px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  font-size: 11px;
}
.ideal-matrix th,
.ideal-matrix td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ideal-matrix thead th { position: sticky; top: 0; z-index: 40; }

.framework-head {
  left: 0;
  z-index: 70 !important;
  width: calc(var(--sticky-dimension) + var(--sticky-indicator));
  min-width: calc(var(--sticky-dimension) + var(--sticky-indicator));
  height: var(--matrix-head-height);
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 34%, rgba(255,255,255,0) 58%),
    linear-gradient(145deg, #fff 0%, #f6f9fc 55%, #e8eef6 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset -1px 0 0 rgba(8,44,99,.12),
    inset 0 -3px 0 var(--navy),
    0 6px 13px rgba(3,27,63,.16);
  isolation: isolate;
}
.bank-logo-trigger,
.metric-trigger,
.indicator-cell button,
.score-cell button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.framework-logo { position: relative; z-index: 1; width: 100%; height: 100%; padding: 4px 6px 8px; display: grid; place-items: center; }
.framework-logo img { display: block; width: 100%; max-width: 182px; max-height: 64px; object-fit: contain; filter: contrast(1.15) saturate(1.2) drop-shadow(0 2px 3px rgba(3,27,63,.12)); }

.bank-head {
  width: var(--bank-column);
  min-width: var(--bank-column);
  height: var(--matrix-head-height);
  padding: 0;
  border-bottom: 3px solid var(--navy-deep) !important;
  background: #fff;
  color: var(--ink);
  text-align: center;
  vertical-align: top;
}
.rank-label { height: 20px; padding: 3px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; background: var(--navy-deep); }
/* Nomor rank besar per kolom; konteks "/ total" tampil sekali di footer kiri. */
.rank-num { font-size: clamp(12px, 1.5vh, 15px); font-weight: 800; letter-spacing: .2px; line-height: 1; }
/* Badge ⚑ red-flag & badge kelengkapan data di header kolom bank. */
.bank-flag { color: #ffb4ad; font-size: 12px; line-height: 1; cursor: pointer; background: none; border: 0; padding: 0 1px; font-family: inherit; transition: color 0.15s ease, transform 0.15s ease; }
.bank-flag:hover { color: #fff; transform: scale(1.15); }
.bank-flag:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 3px; }
.bank-dataqty { padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.16); color: #ffe08a; font-size: 9.5px; font-weight: 800; line-height: 1.3; cursor: help; }
/* Ekspansi panas (aset tumbuh >= 50% setahun): penanda kecil di kepala kolom. */
.bank-hot { color: #ffd28a; font-size: 11px; font-weight: 800; line-height: 1; padding: 0 1px; cursor: help; }
.bank-logo-trigger { width: 100%; height: calc(var(--matrix-head-height) - 42px); padding: 4px 6px; display: grid; place-items: center; }
/* Normalisasi logo: semua logo dibatasi tinggi seragam & tak menyentuh tepi,
   supaya deretan header terlihat rata meski aspek rasio logo berbeda-beda. */
.bank-logo-trigger img { display: block; width: auto; max-width: 100%; max-height: min(46px, calc(var(--matrix-head-height) - 48px)); object-fit: contain; }
/* Fallback rapi bila logo gagal dimuat: chip teks nama pendek BPR. */
.bank-logo-fallback { display: none; }
.bank-logo-trigger.logo-broken img { display: none; }
.bank-logo-trigger.logo-broken .bank-logo-fallback {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  max-width: 100%; padding: 5px 7px; border-radius: 7px;
  background: #eef3fa; border: 1px solid #d6e0ee; color: var(--navy-deep);
  font-size: clamp(9px, 1.1vh, 11px); font-weight: 800; line-height: 1.25; text-align: center;
}
.bank-logo-trigger:hover,
.bank-logo-trigger:focus-visible { background: #edf3fa; outline: none; }
.asset-line { width: 100%; height: 22px; padding: 0; display: grid; grid-template-columns: 1fr 53px; border: 0; border-top: 1px solid #6f819b; background: #fff; font: inherit; cursor: pointer; }
.asset-line:hover b,
.asset-line:focus-visible b { background: #edf3fa; outline: none; }
.asset-line b,
.asset-line em { padding: 2px; font-size: clamp(10.5px, 1.2vh, 13px); font-style: normal; font-weight: 600; }
.asset-line em { border-left: 1px solid #6f819b; }

.dimension-cell {
  position: sticky;
  left: 0;
  z-index: 32;
  width: var(--sticky-dimension);
  min-width: var(--sticky-dimension);
  padding: 5px 3px;
  color: #fff;
  background: var(--navy);
  text-align: center;
  vertical-align: middle;
  background-clip: border-box;
  backface-visibility: hidden;
  transform: translateZ(0);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.dimension-cell:hover,
.dimension-cell:focus-visible {
  background: var(--navy-deep);
  outline: none;
}
.dimension-cell span { display: block; color: #ffb000; font-size: clamp(23px, 2.6vh, 28px); font-weight: 900; line-height: 1; }
.dimension-cell b { display: block; margin: 4px 0 2px; font-size: clamp(9.5px, 1.1vh, 12px); line-height: 1.12; }
.dimension-cell small { color: #d5dfed; font-size: clamp(8px, .9vh, 10px); }

.indicator-cell {
  position: sticky;
  left: var(--sticky-dimension);
  z-index: 31;
  width: var(--sticky-indicator);
  min-width: var(--sticky-indicator);
  height: var(--matrix-row-height);
  padding: 0;
  background: #9ca3ad;
  color: #fff;
  text-align: left;
  font-weight: 500;
  background-clip: border-box;
  backface-visibility: hidden;
  transform: translateZ(0);
  box-shadow: 1px 0 0 var(--line);
}
.indicator-cell button { width: 100%; height: 100%; padding: 4px 8px; color: #fff; text-align: left; font-size: clamp(10px, 1.25vh, 14px); line-height: 1.15; }
.indicator-cell button:hover,
.indicator-cell button:focus-visible { background: #7f8996; outline: none; }

.metric-cell { width: var(--bank-column); min-width: var(--bank-column); height: var(--matrix-row-height); padding: 0; color: #111827; text-align: center; }
.metric-trigger { position: relative; width: 100%; height: 100%; padding: 2px 42px 2px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: inherit; }
.metric-trigger b { font-size: clamp(12.5px, 1.55vh, 17px); font-weight: 600; line-height: 1.1; }
.cell-note { display: block; font-size: clamp(8px, .95vh, 10px); line-height: 1; opacity: .78; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric-trigger:hover,
.metric-trigger:focus-visible { box-shadow: inset 0 0 0 2px rgba(3,27,63,.55); outline: none; }
/* Sel/tombol sumber popover: ring dua-warna (putih+navy) supaya jelas terlihat
   di atas warna sel apa pun selagi popover-nya terbuka. Popover diposisikan
   tidak menutupi sel ini, jadi kaitan sel↔popover tetap terbaca. */
.is-popover-source { position: relative; z-index: 4; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--navy); }
/* Kolom sticky (dimensi/indikator) yang kebetulan jadi sumber popover HARUS
   tetap sticky dengan z-index aslinya — tanpa ini, `position:relative` di atas
   membatalkan sticky-nya sehingga label dimensi (mis. huruf "I") ikut tergeser
   dan tertutup sel warna saat matriks digeser horizontal. */
.dimension-cell.is-popover-source { position: sticky; z-index: 32; }
.indicator-cell.is-popover-source { position: sticky; z-index: 31; }
/* Baris aspek milik sel yang popover-nya sedang terbuka: warnanya DIBALIK,
   bahasa visual yang sama dengan sorotan magnify (.mag-focus), bukan cincin —
   cincin dipakai khusus untuk sel yang benar-benar diklik. */
/* ── Sorot silang saat kursor menyapu matriks ───────────────────────────────
   Sel yang ditunjuk, nama indikatornya di kiri, dan logo banknya di atas
   menyala bersamaan — supaya pembaca tahu sedang berada di baris dan kolom
   mana tanpa harus menggulir balik mencari keduanya.

   Sengaja lebih redup daripada .is-popover-source (sorotan sel yang DIKLIK):
   yang ini cuma menunjukkan posisi kursor, sedangkan yang itu menandai sel
   yang isinya sedang dibuka. Dua hal berbeda, jadi tidak boleh setara
   tegasnya. */
@media (hover: hover) and (pointer: fine) {
  /* JANGAN memaksa position:relative secara borongan. Sel nama indikator dan
     sel dimensi berposisi STICKY supaya tetap menempel di kiri saat matriks
     digulir mendatar; menimpanya dengan relative membuat keduanya lepas dari
     kolom lengketnya dan melompat ke tengah tabel. Pelajaran yang sama sudah
     tercatat pada .is-popover-source di atas — ia pun harus menegaskan ulang
     position:sticky. Di sini cukup sel datanya yang diangkat. */
  td.metric-cell.is-silang,
  td.supplement-cell.is-silang { position: relative; z-index: 3; }
  td.metric-cell.is-silang,
  td.supplement-cell.is-silang { box-shadow: inset 0 0 0 2px rgba(16, 35, 63, .55); }
  .indicator-cell.is-silang,
  .dimension-cell.is-silang { box-shadow: inset 0 0 0 2px rgba(16, 35, 63, .55); }
  /* Kepala baris & kolom ikut dicerahkan sedikit supaya terbaca sebagai
     pasangan sel yang ditunjuk, bukan sekadar kotak bergaris. */
  .indicator-cell.is-silang { background: #eef2f8 !important; }
  .indicator-cell.is-silang button { color: var(--navy-deep) !important; font-weight: 700; }
  /* Kepala kolom TIDAK memakai garis. Isinya logo bank dengan warna dan bentuk
     yang berbeda-beda, dan sebuah kotak bergaris di sekelilingnya terbaca
     sebagai bingkai logo itu sendiri, bukan sebagai penanda kolom. Yang dipakai
     lapisan warna tipis DI ATAS seluruh isinya — logo tetap terbaca, tetapi
     seluruh kepala kolomnya jelas sedang ditunjuk.
     `sticky` sudah membentuk containing block, jadi ::after berposisi absolut
     tidak perlu mengubah position dan stickiness kolomnya tetap utuh. */
  .bank-head.is-silang::after {
    content: '';
    position: absolute;
    /* 1px masuk ke dalam supaya keempat sisi garisnya utuh terlihat dan tidak
       tertelan garis batas sel di sebelahnya. */
    inset: 1px;
    /* GARIS, bukan lapisan warna. Versi sebelumnya memakai tinta biru tipis di
       atas seluruh kepala kolom — hasilnya kolom itu tampak MENGGELAP, yang
       terbaca sebagai "dinonaktifkan", kebalikan dari maksudnya. */
    border: 3px solid #1a73e8;
    border-radius: 3px;
    background: transparent;
    /* Cincin putih tipis di dalam memisahkan garis dari logo bank yang
       warnanya bermacam-macam, plus pendar tipis supaya terbaca menyala di
       atas latar putih. */
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), 0 0 9px rgba(26, 115, 232, .5);
    pointer-events: none;
    /* Di atas seluruh isi kepala kolom: peringkat, logo, dan baris aset. */
    z-index: 9;
  }
  /* Sel dimensi berlatar navy pekat; garis gelap tak terlihat di atasnya. */
  .dimension-cell.is-silang { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
  /* Sel yang popovernya sedang terbuka tetap menang: sorotan silang hanya
     lewat, sorotan sumber menandai apa yang sedang dibaca. */
  .is-popover-source.is-silang { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--navy); }
}
.dimension-cell.is-popover-aspect,
.indicator-cell.is-popover-aspect { background: #fff !important; }
.dimension-cell.is-popover-aspect { color: var(--navy) !important; }
.dimension-cell.is-popover-aspect span { color: var(--navy) !important; }
.dimension-cell.is-popover-aspect b,
.dimension-cell.is-popover-aspect small { color: var(--navy-deep) !important; }
.indicator-cell.is-popover-aspect button { color: var(--navy-deep) !important; font-weight: 700; }
.metric-icon { position: absolute; top: 4px; right: 4px; font-size: clamp(20px, 2.8vh, 30px); line-height: 1; }
.metric-icon.is-skull { padding: 1px 3px; background: #111; }
body.colors-off .metric-icon.is-warning { color: #d97706; }

/* Ikon SVG skala absolut 12-rung: mengikuti warna teks sel (kontras otomatis,
   putih di sel gelap / gelap di sel terang). Saat warna dimatikan, ikon memakai
   warna keluarga agar tetap terlihat di sel putih. */
.metric-rung-icon { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: flex; gap: 1px; align-items: center; color: inherit; line-height: 0; pointer-events: none; }
.metric-rung-icon svg { width: clamp(10px, 1.4vh, 13px); height: clamp(10px, 1.4vh, 13px); display: block; }
/* Badge rung lebar-tetap berisi 1-3 ikon. Di sel: gaya PUCAT (latar warna tipis
   + ikon warna gelap) supaya kalem & angka tetap jadi fokus. Border hairline dari
   --bd-bd untuk definisi. Popup pakai gaya solid (--bd-bg = warna penuh). */
.rung-badge { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 18px; border-radius: 5px; background: var(--bd-bg); border: 1px solid var(--bd-bd, var(--bd-bg)); color: var(--bd-ink); flex: none; line-height: 0; }
.rung-badge svg { width: 11px; height: 11px; display: block; flex: none; }
/* Tengkorak = emoji ☠️ asli (bukan svg) — ukuran lewat font-size, warna
   bawaan emoji TIDAK disentuh (tanpa color/fill override). */
.rung-emoji { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; font-size: 11px; font-style: normal; }
.metric-cell .rung-badge { position: absolute; top: 4px; right: 4px; transform: none; width: 48px; height: clamp(22px, 2.6vh, 24px); pointer-events: none; }
.metric-cell .rung-badge svg { width: 16px; height: 16px; }
/* Keempat keluarga ikon (bintang/centang/warning/tengkorak) ukuran SAMA —
   regular, tidak ada yang dibesarkan lebih dari yang lain. */
.rung-badge .rung-emoji { font-size: 11px; }
.metric-cell .rung-badge .rung-emoji { font-size: 16px; }
/* Badge popup saat mode Warna Penuh: 1 ikon besar & tegas (bukan 1-3 kecil),
   warna solid mengikuti tingkat rentang — selaras dgn sel yg juga 1-ikon. */
.rung-badge-single { width: 30px; height: 22px; border-radius: 6px; }
.rung-badge-single svg { width: 16px; height: 16px; }
.rung-badge-single .rung-emoji { font-size: 16px; }
/* Badge baris tanpa ikon: bentuk sama, isi titik warna. */
.rung-badge.cond-badge { gap: 0; }
.rung-badge.cond-badge i { width: 7px; height: 7px; border-radius: 999px; background: var(--dot); display: block; }
body.colors-off .rung-badge { background: #eef1f5 !important; border-color: #dfe4ec !important; color: #64748b !important; }
body.colors-off .rung-badge.cond-badge i { background: #94a3b8 !important; }
/* Baris/dimensi yang di-highlight (row-color-inverted) TETAP tampilkan warna
   badge asli walau colors-off aktif — sel-nya sudah dikecualikan (lihat aturan
   row-color-inverted di bawah), badge menyusul supaya keduanya menyatu, bukan
   kotak abu yang tak nyambung dengan warna sel yang sudah kembali berwarna. */
body.colors-off .metric-row.row-color-inverted .rung-badge {
  background: var(--bd-bg) !important;
  border-color: var(--bd-bd, var(--bd-bg)) !important;
  color: var(--bd-ink) !important;
}
body.colors-off .metric-row.row-color-inverted .rung-badge.cond-badge i { background: var(--dot) !important; }
/* Di mode Warna Penuh, badge tetap transparan menyatu ke sel (bukan kotak solid). */
body.colors-off.view-full .metric-row.row-color-inverted .metric-cell .rung-badge {
  background: transparent !important;
  border: 0 !important;
  color: var(--analysis-ink) !important;
}
/* Gridline lembut untuk sel putih (spesifisitas > .ideal-matrix td). */
.ideal-matrix td.metric-cell { border-right-color: #e7ebf2; border-bottom-color: #e7ebf2; }

/* ── MODE "WARNA PENUH" (switch) ──────────────────────────────────────────
   Sel diwarnai penuh + teks/ikon kontras, badge sel jadi transparan dengan 1
   ikon, chip titik disembunyikan. Diskop ke `.metric-cell .rung-badge` saja
   (bukan `.rung-badge` global) supaya TIDAK ikut membungkam badge di popup
   rentang (yang harus tetap tampil solid berwarna via rungBadge(..,..,single)). */
body.view-full .metric-cell { background: var(--analysis-bg); color: var(--analysis-ink); }
body.view-full .metric-cell .metric-trigger { color: inherit; }
body.view-full .metric-cell .rung-badge { background: transparent; border: 0; color: var(--analysis-ink); }
body.view-full .metric-cell .rung-badge svg { width: clamp(12px, 1.7vh, 15px); height: clamp(12px, 1.7vh, 15px); }
body.view-full .metric-cell .rung-badge .rung-emoji { font-size: clamp(12px, 1.7vh, 15px); }
body.view-full .metric-cell .rung-badge svg:nth-child(n+2),
body.view-full .metric-cell .rung-badge .rung-emoji:nth-child(n+2) { display: none; }
body.view-full .metric-cell .cond-badge { display: none; }
.view-toggle[aria-pressed="true"] { color: #fff; background: var(--navy); border-color: var(--navy); }
.view-toggle[aria-pressed="true"]:hover, .view-toggle[aria-pressed="true"]:focus-visible { background: var(--navy-deep); }
/* Tombol pemilih palet: ikon swatch + nama palet aktif (bisa kembali ke Klasik). */
.palette-toggle { width: auto; padding: 0 11px; gap: 7px; display: inline-flex; align-items: center; color: var(--navy-deep); }
.palette-toggle svg { flex: none; }
.palette-label { font-size: 12px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.palette-toggle:hover, .palette-toggle:focus-visible { background: #f2f4f7; border-color: #d0d5dd; }
body.colors-off .metric-rung-icon.rung-fam-skull { color: #b42318; }
body.colors-off .metric-rung-icon.rung-fam-warn  { color: #c2410c; }
body.colors-off .metric-rung-icon.rung-fam-check { color: #4d7c0f; }
body.colors-off .metric-rung-icon.rung-fam-star  { color: #15803d; }

.metric-row.dimension-start > th,
.metric-row.dimension-start > td { border-top: 3px solid var(--navy-deep); }
.ideal-matrix tbody .metric-row:first-child > th,
.ideal-matrix tbody .metric-row:first-child > td { border-top: 0; }

.footer-label {
  position: sticky;
  left: 0;
  z-index: 50 !important;
  height: var(--matrix-score-height);
  padding: 7px 10px;
  color: #fff;
  background: var(--navy-deep);
  font-size: 11px;
}
/* display:flex TIDAK boleh langsung di <th colspan="2"> — mengganti display sel
   tabel membatalkan colspan (browser membungkusnya jadi sel anonim colspan=1),
   sehingga seluruh baris skor tergeser 1 kolom ke kiri. Flex dipindah ke wrapper. */
.footer-label-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Jumlah BPR terfilter: teks emas mepet kiri (senada logo IDEAL). */
.score-count { flex: none; color: #eebe4d; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
/* Label composite score: boleh membungkus ke 2 baris saat kolom IDEAL menyempit
   (digeser ke kanan) agar tidak "menembus" keluar sel. */
.score-title { flex: 1 1 auto; min-width: 0; text-align: right; white-space: normal; line-height: 1.12; }
.score-cell { height: var(--matrix-score-height); padding: 0; background: #8f969f; text-align: center; }
.score-cell button { width: 100%; height: 100%; color: #fff; font-size: clamp(20px, 2.5vh, 26px); font-weight: 900; }
.score-cell button:hover,
.score-cell button:focus-visible { background: #6d7682; outline: none; }

/* Kolom bank yang di-highlight (klik logo): background skor komposit ikut
   warna tema good/bad/ugly, teks tetap putih (bukan cuma warna font yang ganti). */
.score-cell.bank-col.col-theme-good button { background: #16a34a !important; color: #fff !important; }
.score-cell.bank-col.col-theme-bad button { background: #d97706 !important; color: #fff !important; }
.score-cell.bank-col.col-theme-ugly button { background: #dc2626 !important; color: #fff !important; }

/* Tombol chart tren di header. */
.trend-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #98a2b3;
  background: #f9fafb;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.trend-toggle:hover,
.trend-toggle:focus-visible { background: #f2f4f7; border-color: #d0d5dd; outline: none; }
.trend-toggle.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }

/* Panel chart tren. */
.trend-panel {
  position: fixed;
  top: calc(var(--header-height) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 560;
  width: min(880px, calc(100vw - 24px));
  max-height: calc(var(--vph) - var(--header-height) - 22px);
  overflow: auto;
  padding: 14px 18px 12px;
  background: #fff;
  border: 1px solid #cbd6e4;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(3,27,63,.30), 0 8px 24px rgba(3,27,63,.14);
}
/* Popup chart tren: lebar sama untuk mode garis & batang (butuh ruang bank ×
   triwulan). Panel screener red-flag tetap memakai lebar dasar .trend-panel. */
#trend-panel { width: min(1480px, calc(100vw - 32px)); }
.trend-head { display: flex; align-items: center; gap: 12px; }
.trend-title { flex: 1; min-width: 0; }
.trend-title strong { display: block; color: var(--navy-deep); font-size: 15px; }
.trend-note { color: var(--muted); font-size: 11px; }
.popover-close.trend-close { position: static; margin: 0; }

/* Dropdown pilih indikator (chart tren): custom, bukan <select> native, supaya
   bisa ditata penuh (pemisah grup dimensi, highlight posisi aktif, auto-scroll
   ke situ saat dibuka). */
.ind-select { position: relative; flex: none; }
.ind-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 7px 10px;
  border: 1px solid #cbd6e4;
  border-radius: 8px;
  background: #f9fafb;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ind-select-btn:hover { border-color: #b9c6d8; }
.ind-select-btn:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(8,44,99,.15); }
.ind-select.is-open .ind-select-btn { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(8,44,99,.12); }
.ind-select.is-open .ms-chevron { transform: rotate(180deg); }
.ind-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 540;
  width: 268px;
  max-height: min(60vh, 440px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(3,27,63,.18), 0 4px 12px rgba(3,27,63,.08);
}
.ind-select-list { margin: 0; padding: 0; list-style: none; }
/* Header grup dimensi: sticky supaya tetap terlihat selama scroll dalam
   grupnya — judul dimensi harus jelas menaungi, isinya diindentasi dengan
   garis vertikal supaya kelihatan satu kesatuan grup, bukan rata sejajar. */
.ind-group + .ind-group { margin-top: 8px; }
.ind-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 9px 5px;
  background: #fff;
  color: var(--navy-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.ind-group-items {
  margin: 2px 0 0 15px;
  padding: 2px 0 2px 12px;
  list-style: none;
  border-left: 2px solid #dbe3ee;
}
.ind-option {
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 12.5px;
  cursor: pointer;
}
.ind-option:hover,
.ind-option.is-active { background: #eef3fa; }
.ind-option.is-selected { background: var(--navy); color: #fff; font-weight: 700; }
.ind-option.is-selected:hover,
.ind-option.is-selected.is-active { background: var(--navy-deep); }

/* Segmented controls (Garis/Batang, %/Rp) di kepala panel tren. */
.trend-controls { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.trend-seg { display: inline-flex; padding: 2px; background: #eef2f7; border: 1px solid #dbe3ee; border-radius: 8px; }
.trend-seg[hidden] { display: none; }
.trend-seg button { padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; color: #5c6c86; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .12s ease, color .12s ease; }
.trend-seg button:hover { color: var(--navy-deep); }
.trend-seg button.is-on { background: var(--navy); color: #fff; box-shadow: 0 1px 3px rgba(3,27,63,.25); }

.trend-chart { position: relative; margin-top: 10px; }
.trend-chart svg { display: block; max-width: 100%; }
.tr-grid { stroke: #e8edf4; stroke-width: 1; }
.tr-vguide { stroke: #f0f3f8; stroke-width: 1; }
.tr-tick { fill: #8a97ab; font-size: 10px; font-variant-numeric: tabular-nums; }
.tr-label { fill: #344054; font-size: 10.5px; font-weight: 600; }
.tr-label-val { fill: #98a2b3; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-line { stroke-opacity: .95; }
/* Label sumbu-x chart batang: logo dulu, baru nama (boleh berbaris ke bawah,
   tidak dipotong "…"). Pakai foreignObject supaya teks bisa word-wrap di SVG. */
.tr-xbank-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: inherit; }
.tr-xbank-wrap img { display: block; max-width: 100px; max-height: 46px; object-fit: contain; flex: none; }
.tr-xbank-name { color: #475569; font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; word-break: break-word; }
.tr-baseline { stroke: #33415580; stroke-width: 1.1; }
.tr-bar { cursor: pointer; stroke: rgba(3,27,63,.18); stroke-width: .6; transition: opacity .12s ease; }
.tr-bar:hover { opacity: .8; }
.tr-bar-latest { stroke: var(--navy); stroke-width: 1.4; }
.tr-legend-grad { width: 34px !important; height: 9px !important; border-radius: 3px !important; background: linear-gradient(90deg, #ff3526, #ffeb00, #28e13a); }
.tr-legend-latest { width: 12px !important; height: 9px !important; border-radius: 2px !important; background: #ffeb00; border: 1.6px solid var(--navy); }
.tr-hit { cursor: pointer; }
.trend-empty { margin: 26px 0; color: var(--muted); text-align: center; font-size: 13px; }
.trend-tooltip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: #0f1f3a;
  color: #fff;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(3,27,63,.3);
}
.trend-tooltip i { width: 8px; height: 8px; border-radius: 50%; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; }
.trend-chip { display: inline-flex; align-items: center; gap: 5px; color: #344054; font-size: 11px; font-weight: 600; }
.trend-chip i { width: 9px; height: 9px; border-radius: 50%; }
.trend-hint { margin: 8px 0 0; color: #98a2b3; font-size: 10.5px; }

/* Screener sinyal — panel diberi aksen merah tipis di puncak supaya beda
   nuansa dari panel tren (biru navy), tetap dalam bahasa desain yang sama. */
.signal-toggle.is-active { background: #b42318; border-color: #b42318; }
.signal-panel { border-top: 3px solid #d92d20; }
.signalinfo-title-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fee4e2;
  color: #d92d20;
  font-size: 15px;
}
.signal-info-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 11px;
  border: 1px solid #c3d0e4;
  border-radius: 999px;
  background: #eff4fb;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(8,44,99,.06);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.signal-info-btn:hover,
.signal-info-btn:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(8,44,99,.22);
  outline: none;
}
.signal-info-btn svg { flex: none; color: currentColor; }

.signal-list { margin: 12px 0 0; padding: 0; list-style: none; max-height: min(58vh, 520px); overflow: auto; overscroll-behavior: contain; }
.signal-list > li + li { margin-top: 6px; }
/* Kartu baris: [logo] [nama/alamat/aset] [kolom tombol sinyal].
   Logo + teks = satu tombol identitas (klik → lompat ke tabel); tombol
   sinyal di ujung kanan berlebar SERAGAM & ringkas (klik → popup). */
.signal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-left: 3px solid #d5990a;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(3,27,63,.04);
}
.signal-item.is-critical { border-left-color: #d92d20; }
.signal-bank-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.signal-bank-btn:hover,
.signal-bank-btn:focus-visible {
  background: #eef3fa;
  outline: none;
}
/* Logo tanpa bingkai/latar kotak — cukup gambar polos, dibesarkan banyak
   di desktop karena ruang horizontal masih lega (teks di sebelahnya
   boleh ikut bergeser kanan). Mobile diperkecil lagi lewat media query
   di bawah — di sana logo pindah ke atas teks, bukan di sampingnya. */
.signal-logo {
  flex: none;
  width: 112px;
  height: 112px;
  display: block;
  object-fit: contain;
}
.signal-logo-empty { background: #eef2f7; border-radius: 6px; }
.signal-bank { min-width: 0; flex: 1 1 auto; }
.signal-bank b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--navy-deep);
  font-size: 13px;
  line-height: 1.3;
}
/* Alamat · aset: dibiarkan membungkus (bukan dipotong ellipsis) supaya
   angka asetnya tidak pernah hilang dari tampilan. */
.signal-bank small { display: block; white-space: normal; color: var(--muted); font-size: 11px; line-height: 1.3; margin-top: 2px; }
/* Kolom tombol sinyal: menumpuk ke bawah, lebar tetap & seragam —
   tidak melar mengisi sisa baris. 320px cukup untuk label terpanjang
   ("Ketebalan CKPN 10,3% — bawah kuartil peer") tanpa terpotong. */
.signal-chip-col {
  flex: 0 0 auto;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.signal-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.signal-chip:hover,
.signal-chip:focus-visible {
  filter: brightness(.95);
  transform: translateY(-1px);
  outline: none;
}
.signal-chip i { font-style: normal; font-size: 10px; flex: none; }
.signal-chip.sev-2 { background: #fee4e2; color: #b42318; }
.signal-chip.sev-1 { background: #fef0c7; color: #93540a; }
/* Peringatan rasio yang terangkat penyusutan, di bawah pil skor. */
.assess-caveat {
  flex-basis: 100%;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 3px solid #d5990a;
  border-radius: 0 6px 6px 0;
  background: #fffaeb;
  color: #7a5b0b;
  font-size: 11.5px;
  line-height: 1.5;
}
.metric-assessment.is-terangkat { flex-wrap: wrap; }
/* Posisi relatif terhadap peer, di samping label absolutnya. */
.gbu-peer { color: #64748b; font-variant-numeric: tabular-nums; }
/* Lintasan skor di profil bank — arah lebih penting daripada level. */
.lintasan {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "head head" "plot teks";
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #e3e9f2;
  border-left: 3px solid #94a3b8;
  border-radius: 10px;
  background: #f8fafc;
}
.lintasan.is-naik { border-left-color: #16a34a; }
.lintasan.is-turun { border-left-color: #d92d20; }
.lintasan-head { grid-area: head; display: flex; align-items: baseline; gap: 8px; }
.lintasan-head b { font-size: 12.5px; }
.lintasan-head span { color: var(--muted); font-size: 11px; }
.lintasan-plot { grid-area: plot; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.lintasan-bar { width: 9px; border-radius: 2px 2px 0 0; background: #94a3b8; }
.lintasan.is-naik .lintasan-bar { background: #16a34a; }
.lintasan.is-turun .lintasan-bar { background: #d92d20; }
.lintasan-bar:last-child { outline: 2px solid rgba(8, 44, 99, .28); outline-offset: 1px; }
.lintasan-teks { grid-area: teks; margin: 0; color: #475467; font-size: 11.5px; line-height: 1.5; }
@media (max-width: 720px) {
  .lintasan { grid-template-columns: 1fr; grid-template-areas: "head" "plot" "teks"; gap: 8px; }
}
/* Penanda tautan yang membuka tab baru, supaya pembaca tahu sebelum menekan
   dan tidak mengira laporannya akan ditinggalkan. */
.terbaik-note a[target="_blank"]::after,
.method-cta[target="_blank"]::after {
  content: " ↗";
  font-weight: 700;
}
/* Pemisah dua kelompok di panel sinyal: yang predikatnya masih baik di atas
   (temuan sesungguhnya), yang sudah rendah di bawah (sinyal memperkuat). */
/* Judul kelompok MENEMPEL saat digulir. Sejak batas 40 baris dicabut, daftar
   ini bisa berisi 160-an bank, dan kedua kelompoknya menyampaikan hal yang
   sangat berbeda: yang atas "masih berpredikat baik tapi bersinyal", yang bawah
   "predikatnya memang sudah rendah". Begitu judulnya tergulir hilang, pembaca
   kehilangan satu-satunya penanda ia sedang membaca kelompok yang mana. */
.signal-group {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 14px 0 6px;
  padding: 7px 0 6px;
  /* Latar PEKAT, bukan gradasi. Tiap judul adalah <li> tersendiri sehingga blok
     penampung sticky-nya seluruh daftar, artinya judul pertama tetap menempel
     walau kelompoknya sudah lewat. Dengan latar pekat plus z-index lebih tinggi
     di judul kedua, yang lewat tertutup rapi alih-alih membayang di baliknya. */
  background: #fff;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.signal-list > li.signal-group:first-child { margin-top: 0; }
.signal-group.is-lanjutan { z-index: 3; padding-top: 12px; border-top: 1px solid #e8edf4; }
.signal-empty { padding: 32px 20px; color: var(--muted); text-align: center; font-size: 13px; }

/* Popup penjelasan sinyal (klik tombol chip) */
.popover-signal .signal-pop-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 12px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.popover-signal .signal-pop-value i { font-style: normal; font-size: 11px; }
.popover-signal .signal-pop-value.sev-2 { background: #fee4e2; color: #b42318; }
.popover-signal .signal-pop-value.sev-1 { background: #fef0c7; color: #93540a; }
/* "Angka BPR Ini" ditonjolkan sedikit — ini yang paling penting dibaca dulu. */
.popover-signal .signal-pop-real {
  margin-top: 12px;
  padding: 9px 11px;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-top: none;
  border-radius: 8px;
}
.popover-signal .signal-pop-real p b { color: var(--navy-deep); }

/* Popover "Cara Kerja Sinyal Red-Flag" (tombol info di panel screener). */
.detail-popover.is-signalinfo { width: min(560px, calc(100vw - 24px)); max-height: calc(var(--vph) - 24px); }
.signalinfo-intro { margin: 4px 0 14px; color: #475569; font-size: 12.5px; line-height: 1.55; }
.signalinfo-intro strong { color: var(--navy-deep); }
.signalinfo-rules { display: flex; flex-direction: column; gap: 10px; }
.signalinfo-rule {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-radius: 10px;
}
.signalinfo-icon { flex: none; font-size: 18px; line-height: 1.3; }
.signalinfo-icon svg { width: 20px; height: 20px; display: block; }
.signal-chip i svg { width: 12px; height: 12px; display: block; }
.gbu-item-icon svg { width: 14px; height: 14px; display: block; }
.gbu-item-icon { gap: 1px; }

/* Sorot sesaat baris panel sinyal saat dibuka dari badge ⚑ header kolom */
.signal-hilite {
  animation: signal-hilite-pulse 2.6s ease;
  border-radius: 10px;
}
@keyframes signal-hilite-pulse {
  0% { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.55); background: #fef3f2; }
  60% { box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.25); background: #fef8f7; }
  100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); background: transparent; }
}

/* ── Diagnosa Silang (popup per-bank) ── */
.diag-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e6ebf2; text-align: left; }
.diag-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.diag-head h3 { margin: 0; font-size: 13px; color: var(--navy-deep); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.diag-head h3 small { font-size: 10.5px; font-weight: 600; color: #667085; }
.diag-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.diag-count { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .01em; }
.dc-bad { background: #fee4e2; color: #b42318; }
.dc-warn { background: #fef0c7; color: #93540a; }
.dc-good { background: #d9f2e5; color: #15803d; }
.diag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diag-item { display: grid; grid-template-columns: 17px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.55; color: #344054; border-left: 3px solid transparent; }
.diag-ic { display: grid; place-items: center; margin-top: 2px; line-height: 0; }
.diag-ic svg { width: 13px; height: 13px; display: block; }
.diag-warn .diag-ic { color: #c2410c; }
.diag-item b { color: var(--navy-deep); }
.diag-good { background: #f2faf5; border-left-color: #15803d; }
.diag-warn { background: #fffaf0; border-left-color: #d5990a; }
.diag-bad  { background: #fef5f4; border-left-color: #d92d20; }
.diag-note { margin: 8px 0 0; font-size: 10px; color: #98a2b3; }

/* Badge "Terbaik" (★) di header kolom matriks */
.bank-terbaik { color: #ffd769; font-size: 12px; line-height: 1; cursor: pointer; background: none; border: 0; padding: 0 1px; font-family: inherit; transition: color .15s ease, transform .15s ease; }
.bank-terbaik:hover { color: #fff; transform: scale(1.18); }
.bank-terbaik:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 3px; }

/* Blok status "BPR IDEAL Terbaik" di bawah Diagnosa Silang (popover bank) */
.terbaik-block { margin-top: 12px; padding: 11px 12px; border-radius: 10px; text-align: left; border: 1px solid; }
.terbaik-block.is-ok { background: #f2faf6; border-color: #b7e4cd; }
.terbaik-block.is-fail { background: #fff8f0; border-color: #f4d9b0; }
/* Sorotan saat popover digulir ke sini dari bintang ★ di kepala kolom. Denyut
   dua kali lalu padam: cukup untuk menunjukkan "ini yang kamu klik", tidak
   cukup lama untuk mengganggu saat membaca. */
.terbaik-block.is-disorot { animation: terbaik-sorot 1.6s ease-out 2; }
@keyframes terbaik-sorot {
  0%   { box-shadow: 0 0 0 0 rgba(21,127,49,.42); }
  55%  { box-shadow: 0 0 0 7px rgba(21,127,49,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,127,49,0); }
}
@media (prefers-reduced-motion: reduce) {
  .terbaik-block.is-disorot { animation: none; box-shadow: 0 0 0 3px rgba(21,127,49,.35); }
}
.terbaik-head { display: flex; align-items: baseline; gap: 8px; }
.terbaik-head h3 { margin: 0; font-size: 12.5px; color: var(--navy-deep); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.terbaik-head h3 small { font-size: 10px; font-weight: 600; color: #667085; }
.terbaik-ic { font-size: 13px; line-height: 1; }
.terbaik-block.is-ok .terbaik-ic { color: #d4a418; }
.terbaik-block.is-fail .terbaik-ic { color: #c2410c; }
.terbaik-fails { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.terbaik-fails li { font-size: 11.5px; line-height: 1.5; color: #7a3a12; padding: 6px 9px 6px 24px; position: relative; background: #fff; border: 1px solid #f0ddc0; border-radius: 7px; }
.terbaik-fails li::before { content: "✕"; position: absolute; left: 9px; top: 6px; color: #c2410c; font-weight: 800; font-size: 10px; }
.terbaik-note { margin: 8px 0 0; font-size: 10.5px; line-height: 1.5; color: #667085; }
.terbaik-note a { color: var(--navy); font-weight: 700; }
.terbaik-note a:hover { text-decoration: underline; }
.terbaik-block.is-ok .terbaik-note b { color: #147d58; }
.signalinfo-body { min-width: 0; }
.signalinfo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.signalinfo-head b { color: var(--navy-deep); font-size: 12.5px; }
.signalinfo-body p { margin: 0; color: #475569; font-size: 11.5px; line-height: 1.5; }

/* Tombol tutup di semua pop up. */
.popover-close {
  position: sticky;
  top: 8px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 8px 8px -34px auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0f1f3a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(3,27,63,.25);
}
.popover-close:hover,
.popover-close:focus-visible { background: #d21f32; outline: none; }
.popover-close.tooltip-close { background: #0f1f3a; margin-bottom: -30px; }
.popover-close.tooltip-close:hover,
.popover-close.tooltip-close:focus-visible { background: #d21f32; }
/* Popup rentang parameter tidak punya padding atas, jadi tombolnya diberi
   jaraknya sendiri; -30px menariknya kembali supaya daftar rentang tetap
   dimulai di tempat yang sama seperti sebelum tombol ini ada. */
.popover-close.score-tooltip-close { margin: 10px 0 -30px auto; }

/* Di layar sentuh tombol tutup dibesarkan ke 40px. 26px pas untuk kursor,
   tetapi tombol ini satu-satunya jalan keluar yang terlihat dari popup —
   Escape tidak ada di ponsel, dan "ketuk di luar" tidak pernah tampak sebagai
   pilihan. Ikonnya ikut membesar supaya proporsinya tetap. */
@media (hover: none), (pointer: coarse) {
  .popover-close { width: 40px; height: 40px; font-size: 20px; margin-bottom: -48px; }
  .popover-close.tooltip-close,
  .popover-close.score-tooltip-close { margin-bottom: -44px; }
  .popover-close.trend-close { margin: 0; }
}

/* Sel info tambahan bisa diklik seperti sel IDEAL. */
.supp-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.supp-trigger:hover,
.supp-trigger:focus-visible { box-shadow: inset 0 0 0 2px rgba(3,27,63,.55); outline: none; }

/* Blok pelengkap & monitoring CKPN: display-only di bawah composite score. */
.dimension-cell.supplement-dim { background: #475569; }
.dimension-cell.supplement-dim:hover,
.dimension-cell.supplement-dim:focus-visible { background: #334155; }
.dimension-cell.supplement-dim b { margin: 0 0 3px; font-size: clamp(9.5px, 1.1vh, 12px); line-height: 1.15; }
.dimension-cell.supplement-dim small { color: #cbd5e1; }
.supplement-row.dimension-start > th,
.supplement-row.dimension-start > td { border-top: 3px solid #334155; }
.indicator-cell.supplement-ind { padding: 0; }

/* Penanda SKALA WARNA. Blok ini memakai empat penggaris yang berbeda dalam satu
   tabel — band absolut 12 tingkat, gradasi relatif terhadap peer, gradasi
   netral, dan ambang resmi — dan tanpa penanda, dua sel yang sama merahnya
   terbaca sama padahal diukur berbeda.

   Wujudnya batang 3px di dalam kolom nama, BUKAN garis tepi. Percobaan pertama
   memakai border-left dan hasilnya praktis tak terlihat: tepi kiri kolom nama
   menempel persis pada kolom kelompok yang berlatar #475569 gelap, jadi
   apa pun yang ditaruh di sana melebur. Ditarik masuk 3px, ia berdiri di atas
   latar #9ca3ad kolomnya sendiri dan bisa diberi kontras yang cukup.

   Bedanya tidak hanya warna tetapi juga BENTUK (padat, putih, putus-putus,
   terbelah), supaya tetap terbaca pada layar monokrom dan bagi pembaca yang
   sulit membedakan warna. Kuncinya ada di popover tiap baris & tiap kelompok. */
.indicator-cell.supplement-ind::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 62%;
  border-radius: 2px;
  pointer-events: none;
}
.indicator-cell.supplement-ind[data-scale="baku"]::before   { background: #111827; }
.indicator-cell.supplement-ind[data-scale="peer"]::before   { background: #ffffff; }
.indicator-cell.supplement-ind[data-scale="netral"]::before { background: repeating-linear-gradient(180deg, #fff 0 2px, rgba(255,255,255,0) 2px 5px); }
.indicator-cell.supplement-ind[data-scale="ambang"]::before { background: linear-gradient(180deg, #111827 0 38%, rgba(255,255,255,0) 38% 62%, #111827 62% 100%); }
/* Beri jalan buat batangnya supaya tidak menyentuh huruf pertama. */
.indicator-cell.supplement-ind button { padding-left: 11px; }

/* Dua baris konten (persen + nominal) butuh napas lebih dari baris IDEAL. */
.supplement-row .metric-cell,
.indicator-cell.supplement-ind { height: var(--supplement-row-height); }
.supplement-value { width: 100%; height: 100%; padding: 2px 4px; display: grid; place-items: center; align-content: center; row-gap: 1px; }
.supplement-value b { font-size: clamp(12px, 1.5vh, 16px); font-weight: 800; line-height: 1.1; }
.supplement-value small { font-size: clamp(9px, 1.05vh, 11px); line-height: 1; opacity: .78; }

body.colors-off .metric-row:not(.row-color-inverted) .metric-cell { background: #fff !important; color: #111827 !important; }

/* Baris/grup yang sedang di-highlight: tetap tampilkan warna conditional
   formatting-nya (jangan dipaksa putih) — beri aksen "shiny" supaya jelas
   ini yang sedang dipilih, lepas dari status toggle warna analisis. */
.metric-row.row-color-inverted .metric-cell {
  position: relative;
  z-index: 3;
  background: var(--analysis-bg) !important;
  color: var(--analysis-ink) !important;
  filter: saturate(1.35) brightness(1.07);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 2px var(--navy), 0 0 14px 2px rgba(255,255,255,.65);
  /* Dua denyut, lalu diam — alasannya sama dengan col-shiny di atas. */
  animation: shiny-pulse 1.7s ease-in-out 2;
}
@keyframes shiny-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 2px var(--navy), 0 0 9px 1px rgba(255,255,255,.5); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 2px var(--navy), 0 0 18px 4px rgba(255,255,255,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .metric-row.row-color-inverted .metric-cell { animation: none; }
}

.detail-popover {
  position: fixed;
  z-index: 600;
  width: min(400px, calc(100vw - 24px));
  max-height: min(560px, calc(var(--vph) - 24px));
  overflow: auto;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
  border: 1px solid #cbd6e4;
  border-radius: 12px;
  box-shadow: 0 25px 70px rgba(3,27,63,.28), 0 10px 30px rgba(3,27,63,.14), 0 3px 8px rgba(3,27,63,.10);
}
.detail-popover.is-bank { width: min(860px, calc(100vw - 24px)); max-height: calc(var(--vph) - 24px); }
.detail-popover.is-indicator { width: min(420px, calc(100vw - 24px)); max-height: calc(var(--vph) - 24px); }
.detail-popover.is-dimension { width: min(360px, calc(100vw - 24px)); max-height: calc(var(--vph) - 24px); }
.detail-popover.is-metric { width: min(390px, calc(100vw - 24px)); max-height: calc(var(--vph) - 24px); background: #fff; border-color: #d8e0ea; border-radius: 10px; box-shadow: 0 14px 36px rgba(3,27,63,.16), 0 2px 8px rgba(3,27,63,.08); }
.detail-popover.is-metric::before { height: 2px; background: #cbd5e1; }
/* Popover yang memuat daftar NAMA (pemegang saham, BPR se-klaster) diberi
   lebar sendiri. Nama orang dan nama BPR Indonesia jauh lebih panjang daripada
   angka rasio, dan pada 390px hampir seluruhnya terpotong. Ditulis SESUDAH
   .is-metric supaya menang tanpa !important. */
.detail-popover.is-metric.is-lebar { width: min(560px, calc(100vw - 24px)); }
.detail-popover::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; height: 4px; background: var(--navy); }
.popover-body { padding: 18px 20px 20px; }
/* padding-right menyisakan jalur untuk tombol × yang melayang di kanan atas.
   Kicker popover skor memuat rank + kelas aset dan mudah panjang ("Rank 126 /
   259 · #20/26 di Aset Rp500 M – <Rp1 T"); tanpa jalur ini baris pertamanya
   lewat di bawah tombol dan huruf terakhirnya tak terbaca. */
/* Jalur untuk tombol × diberikan di KEDUA sisi, bukan cuma kanan. Dengan
   padding sebelah, teks yang seharusnya terpusat bergeser ke kiri sejauh
   setengah paddingnya — dan karena judul di bawahnya tetap terpusat penuh,
   keduanya jadi tidak segaris. Jalur simetris menjaga sumbu tengahnya sambil
   tetap mengosongkan sudut tempat tombol × melayang. */
.popover-kicker { margin: 0 0 5px; padding-left: 46px; padding-right: 46px; color: #d21f32; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.detail-popover h2 { margin: 0; color: var(--navy-deep); font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }
.popover-address { margin: 8px 0 0; padding-top: 8px; color: #5d6b7d; border-top: 1px solid #e5eaf0; font-size: 11px; }
.popover-bank { text-align: left; }
.popover-bank-intro {
  margin-bottom: 18px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid #e2e8f1;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px rgba(3,27,63,.12), 0 4px 10px rgba(3,27,63,.06);
}
.theme-good .popover-bank-intro { background: linear-gradient(180deg, #f6fef9 0%, #e8f5ee 100%); border-color: #b7e1cd; }
.theme-bad .popover-bank-intro { background: linear-gradient(180deg, #fffefb 0%, #fff8e7 100%); border-color: #fae1a3; }
.theme-ugly .popover-bank-intro { background: linear-gradient(180deg, #fffafa 0%, #fdecec 100%); border-color: #f4bfbf; }
.popover-bank-logo { width: 200px; height: 140px; display: grid; place-items: center; justify-self: center; }
.popover-bank-logo img { display: block; max-width: 190px; max-height: 130px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(3,27,63,.14)); }
.popover-bank-identity { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.popover-bank h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.popover-bank .popover-address { margin: 6px 0 0; color: #4a5568; font-size: 12.5px; line-height: 1.45; }
.popover-bank-meta { display: flex; align-items: center; gap: 6px; }
.popover-bank-meta span { padding: 5px 8px; background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.08); border-radius: 6px; text-align: center; }
.popover-bank-meta small { display: block; margin-bottom: 1px; color: #64748b; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.popover-bank-meta strong { display: block; color: var(--navy-deep); font-size: 11.5px; }

.gbu-grid { display: flex; align-items: stretch; text-align: left; background: #fff; border: 1px solid #dbe3ed; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(3,27,63,.10), 0 3px 6px rgba(3,27,63,.05); }
/* min-width menjamin kolom sepi item tetap terbaca (tidak menyusut jadi kurus). */
.gbu-column { min-width: 172px; flex: var(--group-share) 1 0; padding: 14px; }
.gbu-column + .gbu-column { border-left: 1px solid #dbe3ed; }
.gbu-column h3 { margin: 0 0 12px; padding-bottom: 8px; text-align: center; font-size: 15px; letter-spacing: .02em; border-bottom: 2px solid currentColor; }
.gbu-good { background: #f6fef9; }
.gbu-good h3 { color: #166534; border-color: #86efac; }
.gbu-bad { background: #fffbf5; }
.gbu-bad h3 { color: #92400e; border-color: #fdba74; }
.gbu-ugly { background: #fff6f6; }
.gbu-ugly h3 { color: #991b1b; border-color: #fca5a5; }
.gbu-column ul { margin: 0; padding: 0; list-style: none; }
.gbu-column.is-dense ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.gbu-column li { min-width: 0; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.06); }
.gbu-column li:first-child { border-top: 0; }
.gbu-item-main { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.gbu-item-icon { display: grid; place-items: center; font-size: 16px; line-height: 1; }
.gbu-bad .gbu-item-icon { color: #e8590c; }
.gbu-item-icon.is-skull { padding: 2px; color: #fff; background: #111; border-radius: 2px; }
/* Nama indikator boleh wrap 2 baris — jangan pernah terpotong jadi "NPL...". */
.gbu-column li b { color: #334155; font-size: 12px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.gbu-column li strong { flex: none; color: var(--navy-deep); font-size: 12px; }
.gbu-column li small { margin: 4px 0 0 30px; display: block; color: #64748b; font-size: 10.5px; line-height: 1.35; }
.gbu-column .gbu-empty { display: grid; place-items: center; min-height: 90px; color: #94a3b8; font-size: 12px; text-align: center; }
/* Kalimat kondisi di atas kolom Kekuatan untuk bank IK-5: rasio "baik" pada
   bank yang kolaps sering efek samping kondisinya, bukan kekuatan. */
.gbu-caveat { margin: -4px 0 10px; padding: 7px 9px; border-radius: 6px; background: rgba(180,35,24,.08); color: #7f1d1d; font-size: 11.5px; line-height: 1.45; text-align: left; }

.popover-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.popover-indicator { padding: 18px 20px 20px; }
.popover-indicator .popover-kicker { margin-bottom: 6px; font-size: 9px; }
.popover-indicator h2 { font-size: 19px; }
.weight-badge { flex: none; padding: 6px 9px; color: #fff; background: var(--navy); border-radius: 5px; font-size: 10px; font-weight: 750; }
.indicator-story { margin: 12px 0 0; color: #344054; font-size: 13px; line-height: 1.55; }
.indicator-weight-reason { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #e3e9f0; color: #667085; font-size: 11.5px; line-height: 1.5; }
.indicator-weight-reason strong { color: var(--navy); }

.popover-dimension { padding: 16px 18px 18px; }
.popover-dimension .popover-kicker { margin-bottom: 6px; font-size: 9px; }
.popover-dimension h2 { font-size: 19px; }
.popover-dimension .weight-badge { padding: 5px 8px; font-size: 10px; }
.dimension-description { margin: 10px 0 0; color: #344054; font-size: 12px; line-height: 1.5; }
.dimension-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dim-tag { padding: 5px 8px; display: inline-flex; align-items: baseline; gap: 5px; background: #f2f6fb; border: 1px solid #dce4ee; border-radius: 5px; color: #344054; font-size: 11px; }
.dim-tag b { font-weight: 600; }
.dim-tag small { color: var(--navy); font-weight: 700; font-size: 10px; }

.popover-metric { padding: 18px 20px 20px; text-align: center; }
.popover-metric .popover-kicker { margin-bottom: 4px; color: #7b8798; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.popover-metric h2 { color: #172b4d; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.metric-detail-value { margin: 13px 0 0; padding: 12px 14px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 8px; }
.metric-detail-value strong { color: #10233f; font-size: 30px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.metric-detail-value span { font-size: 21px; }
.metric-detail-value .rung-badge { width: 54px; height: 26px; border-radius: 7px; }
.metric-detail-value .rung-badge svg { width: 15px; height: 15px; }
/* Ikon rung di sebelah angka besar (ratioHero, metricPopover). Tanpa ukuran
   eksplisit di sini svg-nya (viewBox saja, tanpa width/height) dirender 0x0 —
   bukan raksasa seperti dugaan pertama, malah lenyap total, jadi bintang/ikon
   ✓ yang mestinya menegaskan level tak pernah terlihat pemakai. */
.detail-value-icon { display: inline-flex; align-items: center; }
.detail-value-icon svg { width: 26px; height: 26px; }
.nominal-callout { margin-top: 12px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: #fbfcfe; border: 1px solid #e3e8ef; border-radius: 7px; }
.nominal-callout span,
.nominal-callout strong { display: block; }
.nominal-callout span { color: var(--muted); font-size: 10px; }
.nominal-callout strong { color: var(--navy); font-size: 15px; text-align: center; }
.metric-assessment { margin: 0; padding: 10px 6px 0; color: var(--muted); font-size: 10px; }
.metric-assessment b { color: var(--navy); }
.metric-assessment p { margin: 0 0 2px; color: #344054; font-size: 13px; font-weight: 650; }
.metric-assessment-trigger { margin: 0 auto 2px; padding: 0; display: block; background: transparent; border: 0; color: #344054; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.metric-assessment-trigger:hover,
.metric-assessment-trigger:focus-visible { color: var(--navy); outline: none; }
/* Label penilaian sebagai pil berwarna sesuai level rung — begitu popover
   dibuka langsung terlihat parameternya ada di level mana. Klik = buka rentang. */
.metric-assessment-trigger.is-level {
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 6px;
  margin: 3px auto 5px; padding: 5px 14px; border-radius: 999px;
  background: var(--lv-bg); color: var(--lv-ink);
  font-size: 13px; font-weight: 750; line-height: 1.15;
  box-shadow: 0 1px 3px rgba(8,44,99,.22);
}
.metric-assessment-trigger.is-level .assess-ic { display: flex; gap: 2px; align-items: center; flex: none; }
.metric-assessment-trigger.is-level .assess-ic svg { width: 14px; height: 14px; display: block; }
.metric-assessment-trigger.is-level:hover,
.metric-assessment-trigger.is-level:focus-visible { filter: brightness(1.05) saturate(1.08); box-shadow: 0 0 0 2px var(--navy), 0 1px 4px rgba(8,44,99,.25); outline: none; }
.metric-logic { margin-top: 13px; padding-top: 11px; border-top: 1px solid #e2e7ee; }
.metric-logic strong { color: #52647a; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.metric-logic p { margin: 5px 0 0; color: #475467; font-size: 11.5px; line-height: 1.5; }

.metric-trend { margin-top: 12px; padding: 10px 12px 8px; background: #fbfcfe; border: 1px solid #e3e8ef; border-radius: 7px; }
.metric-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-trend-head span { color: var(--muted); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.metric-trend-head b { font-size: 12px; font-weight: 750; }
/* Sakelar %/Rp: sepasang pil kecil di kepala chart. Sengaja tidak menonjol —
   ia mengganti SATUAN chart, bukan menambah tindakan baru, dan bawaannya
   (persen) sudah benar untuk sebagian besar pembaca. */
.mt-sakelar { display: inline-flex; gap: 2px; margin-left: auto; margin-right: 8px; padding: 2px; background: #eef1f6; border-radius: 999px; }
.mt-sw {
  padding: 2px 9px; border: 0; border-radius: 999px;
  background: transparent; color: #7c8798;
  font: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.mt-sw:hover { color: var(--navy-deep); }
.mt-sw.is-on { background: #fff; color: var(--navy-deep); box-shadow: 0 1px 3px rgba(3,27,63,.12); }
@media (hover: none) and (pointer: coarse) {
  .mt-sw { padding: 4px 11px; font-size: 10.5px; }
}
/* Plot tren: bentuknya disamakan dengan chart hero — area gradien, titik di
   tiap triwulan, dan garis yang tersibak dari kiri saat popover dibuka.
   .mt-plot jadi wadah berposisi supaya titik HTML bisa ditumpuk di atas svg. */
.mt-plot { position: relative; margin: 8px 0 2px; height: 56px; }
/* Waktunya lebih rapat daripada chart hero. Hero adalah pusat perhatian dan
   boleh menggambar dirinya selama 1,15 detik; sparkline ini duduk di KEPALA
   popover dan pembaca sudah menatapnya sejak frame pertama, jadi animasi
   sepanjang itu terasa seperti chart yang belum selesai dimuat. */
.metric-trend-spark { display: block; width: 100%; height: 100%; animation: ah-sibak .62s cubic-bezier(.65,0,.35,1) .05s both; }
.mt-area { opacity: 0; animation: ah-fill .34s ease-out .45s forwards; }
.mt-dots { position: absolute; inset: 0; pointer-events: none; }
.mt-dot {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff; border: 1.8px solid var(--dot, #94a3b8);
  pointer-events: auto; opacity: 0;
  animation: ah-pop .22s ease-out .58s both;
}
.mt-dot.is-first { animation-delay: .5s; }
.mt-dot.is-last { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--dot, #94a3b8); animation-delay: .66s; }
@media (prefers-reduced-motion: reduce) {
  .mt-dot { animation: none; opacity: 1; }
  .mt-area { animation: none; opacity: 1; }
  .metric-trend-spark { animation: none; clip-path: none; }
}
/* ── Lintasan IDEAL Composite Score ────────────────────────────────────────
   Chart di kepala popover skor. Latarnya pita predikat (IK-1..IK-5), jadi
   posisi garis terhadap ambang terbaca langsung — bukan cuma naik-turunnya. */
.skor-lintasan { margin: 13px 0 0; padding: 10px 12px 9px; background: #fbfcfe; border: 1px solid #e3e8ef; border-radius: 9px; }
.sl-plot { position: relative; height: 92px; margin: 8px 0 2px; border-radius: 6px; overflow: hidden; }
.sl-plot svg { display: block; width: 100%; height: 100%; }
/* Garis skor tersibak dari kiri; pita latar TIDAK ikut disibak supaya konteks
   predikatnya sudah hadir sejak frame pertama. */
.sl-line { animation: ah-sibak .7s cubic-bezier(.65,0,.35,1) .06s both; }
.sl-lapis { position: absolute; inset: 0; pointer-events: none; }
.sl-dot {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #fff; border: 2px solid var(--dot, #94a3b8);
  pointer-events: auto; opacity: 0; animation: ah-pop .24s ease-out .62s both;
}
.sl-dot.is-last { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--dot, #94a3b8); animation-delay: .74s; }
/* Label ambang menempel di kanan, tepat di garis putus-putusnya. */
.sl-ambang {
  position: absolute; right: 4px; transform: translateY(-50%);
  padding: 0 4px; border-radius: 3px;
  background: rgba(255,255,255,.78); color: #667085;
  font-size: 8.5px; font-weight: 750; letter-spacing: .02em; white-space: nowrap;
}
.sl-nilai-baris { display: flex; justify-content: space-between; gap: 2px; margin-top: 4px; }
.sl-nilai { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sl-nilai em { font-style: normal; color: #94a3b8; font-size: 8px; letter-spacing: .02em; }
.sl-nilai b { margin-top: 1px; color: #475467; font-size: 11px; font-weight: 750; }
.sl-nilai.is-last em { color: #64748b; font-weight: 700; }
.sl-nilai.is-last b { font-size: 12.5px; }
.sl-teks { margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed #e3e8ef; color: #667085; font-size: 10.5px; line-height: 1.55; }
.sl-teks b { color: var(--navy-deep); }
@media (prefers-reduced-motion: reduce) {
  .sl-line { animation: none; clip-path: none; }
  .sl-dot { animation: none; opacity: 1; }
}
.metric-trend-points { display: flex; justify-content: space-between; gap: 2px; margin-top: 3px; }
.metric-trend-points span { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.metric-trend-points em { font-style: normal; color: #94a3b8; font-size: 7.5px; letter-spacing: .02em; }
.metric-trend-points b { margin-top: 1px; color: #475467; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.metric-trend-points span.is-last em { color: #64748b; font-weight: 700; }

.score-hero { margin: 15px 0; padding: 13px; display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 10px; background: #f5f8fc; border: 1px solid #dbe4ef; border-radius: 7px; }
.score-hero > strong { color: var(--navy-deep); font-size: 42px; line-height: 1; }
.score-hero > span { padding: 8px 10px; border-radius: 7px; font-size: 14px; font-weight: 900; text-align: center; }
.score-hero small { display: block; margin-top: 2px; font-size: 9px; font-weight: 650; }
.pk1 { background: #b7e1cd; color: #174d37; }
.pk2 { background: #d9ead3; color: #275627; }
.pk3 { background: #fff2cc; color: #665214; }
.pk4 { background: #fce5cd; color: #7d4216; }
.pk5 { background: #f4cccc; color: #7f1d1d; }
/* Jembatan aset (bridge YoY) di popover Total Aset. Popover-nya sengaja
   dilebarkan agar dua kolom (ke mana asetnya / dari mana dananya) tampil
   berdampingan dan mudah dibandingkan kiri-kanan. */
.detail-popover.is-metric.is-asset { width: min(720px, calc(100vw - 24px)); }
/* Header popover aset: logo bank menggantikan nama + label "Ukuran Bank". */
.asset-pop-logo { display: grid; place-items: center; margin-bottom: 4px; }
.asset-pop-logo img { display: block; max-width: 150px; max-height: 46px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(3,27,63,.14)); }
/* Hero "jembatan setahun": panah dari aset setahun lalu ke aset sekarang.
   Panahnya penunjuk arah (bukan chart berskala) — nilai dibawa angka di kedua
   ujung dan chip delta di tengah. */
.asset-hero { margin: 13px 0 0; padding: 14px 16px 12px; display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; align-items: stretch; background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 10px; overflow: hidden; }
.asset-hero.is-up { background: linear-gradient(135deg, #f0faf2 0%, #f8fafc 60%); border-color: #cde8d5; }
.asset-hero.is-down { background: linear-gradient(135deg, #fdf2f0 0%, #f8fafc 60%); border-color: #f2d3ce; }
.ah-node { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 66px; }
.asset-hero.is-up .ah-from, .asset-hero.is-down .ah-to { justify-content: flex-end; }
.asset-hero.is-up .ah-to, .asset-hero.is-down .ah-from { justify-content: flex-start; }
.ah-node-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ah-from b { color: #47536b; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ah-big { position: relative; display: inline-block; color: #10233f; font-size: 30px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.asset-hero.is-up .ah-big { color: #157f31; }
.asset-hero.is-down .ah-big { color: #b42318; }
.ah-mid { position: relative; min-height: 88px; }
.ah-mid svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); }
/* Garis "muncul dari angka kiri → tengah → angka kanan", dikerjakan dengan
   MENYIBAK kotaknya dari kiri ke kanan, bukan dengan stroke-dasharray.
   Dasharray dipakai sampai 22 Agustus 2026 dan diam-diam memotong garisnya:
   `pathLength="1"` menormalkan panjang di ruang viewBox, sedangkan
   `vector-effect: non-scaling-stroke` membuat pola putus-sambungnya dihitung di
   ruang LAYAR. Dua ruang itu tidak sebanding karena viewBox 200x100 diregang
   tak seragam (mendatar ~2,3x, tegak ~0,7x), jadi dash sepanjang "seluruh
   jalur" versi viewBox cuma menutup 52% jalur versi layar — 48% sisanya tak
   pernah tergambar, permanen, bukan cuma selama animasi. Menyibak kotak tidak
   bergantung pada panjang jalur sama sekali, jadi bentuk lintasan apa pun
   selesai utuh. */
.ah-mid svg { animation: ah-sibak 1.15s cubic-bezier(.65,0,.35,1) .1s both; }
@keyframes ah-sibak {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -4% 0 0); }
}
.ah-area { opacity: 0; animation: ah-fill .55s ease-out .8s forwards; }
@keyframes ah-fill { to { opacity: 1; } }
/* Titik triwulanan di atas garis hero. Dibuat elemen HTML, bukan <circle>:
   SVG-nya dipeta dengan preserveAspectRatio="none" supaya garisnya mengisi
   penuh lebar berapa pun, dan peregangan itu akan memipihkan lingkaran SVG
   jadi lonjong. Elemen HTML berposisi persen tetap bulat di lebar mana pun.
   Kotaknya di-inset sama persis dengan svg-nya (8px atas-bawah) supaya titik
   duduk tepat di garis. */
.ah-dots { position: absolute; inset: 8px 0; pointer-events: none; }
.ah-dot {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #fff; border: 2px solid var(--dot, #94a3b8);
  pointer-events: auto; opacity: 0;
  animation: ah-pop .28s ease-out both;
}
/* Titik menyusul setelah garisnya selesai digambar, urutannya dari kiri. */
.ah-dot { animation-delay: 1.2s; }
.ah-dot.is-first { animation-delay: 1.05s; }
.ah-dot.is-last { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--dot, #94a3b8); animation-delay: 1.35s; }
/* Angka tiap triwulan di sebelah titiknya. Sengaja jauh lebih kecil daripada
   dua angka ujung: yang ujung adalah pokok ceritanya (dari X jadi Y), yang
   tengah cuma lintasannya. Sisi atas/bawah dipilih dari bentuk lintasan di
   heroSeriesGeometry() supaya label tak pernah jatuh menimpa garisnya. */
.ah-lab {
  position: absolute; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  color: #64748b; pointer-events: auto; opacity: 0;
  /* Alas putih tipis: pada titik yang cuma DILEWATI garis naik/turun, tidak
     ada sisi yang benar-benar bebas — garisnya lewat di atas dan di bawah.
     Alas ini membuat angkanya tetap terbaca alih-alih tertimpa garis. */
  padding: 1px 3px; border-radius: 4px; background: rgba(255,255,255,.82);
  animation: ah-pop .28s ease-out 1.28s both;
}
.ah-lab.is-atas { margin-top: -14px; }
.ah-lab.is-bawah { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ah-dot, .ah-lab { animation: none; opacity: 1; }
  .ah-mid svg { animation: none; clip-path: none; }
}
.ah-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 13px; background: #fff; border: 1px solid #e1e7ef; border-radius: 999px; box-shadow: 0 4px 12px rgba(3,27,63,.10); white-space: nowrap; }
/* Chip delta hanya muncul pada hero TANPA deret (bank baru / hasil merger yang
   riwayatnya belum genap). Di situ ia satu-satunya angka di dalam kotak, jadi
   posisi tengah aman. Begitu ada deret nyata, tiap titik sudah bertuliskan
   angkanya sendiri dan chip dilepas — lihat heroSeriesGeometry(). */
/* Hero ringkas (popover selain Total Aset) hanya 62px — kurang untuk memuat
   titik beserta label angkanya. Diberi tinggi seperti hero aset begitu ada
   deret nyata yang digambar. */
.detail-popover:not(.is-asset) .asset-hero.has-series .ah-mid { min-height: 92px; }
.ah-chip b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.asset-hero.is-up .ah-chip b { color: #157f31; }
.asset-hero.is-down .ah-chip b { color: #b42318; }
.asset-hero.is-flat .ah-chip b { color: #475467; }
.ah-chip small { color: var(--muted); font-size: 10px; font-weight: 700; }
.ah-pulse { position: absolute; top: -3px; right: -11px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; animation: ah-pop .3s ease-out 1.15s forwards; }
.ah-pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; animation: ah-ring 1.6s ease-out 1.3s infinite; }
@keyframes ah-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes ah-ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
/* Delta setahun sebagai pil ter-highlight. Ia dulu melayang DI ATAS chart dan
   menutupi titik triwulan; sekarang duduk di barisnya sendiri di bawah plot,
   jadi tetap menonjol tanpa pernah menimpa data. Warnanya ikut arah lewat
   .is-up / .is-down pada .asset-hero. */
.ah-delta { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 10px; }
.ah-delta-pil {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 14px; border-radius: 999px;
  background: #eef1f6; border: 1px solid #dde4ee; color: #475467;
}
.ah-delta-pil b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.ah-delta-pil i { font-size: 12px; font-weight: 750; font-style: normal; opacity: .9; }
.ah-delta-pil small { font-size: 10px; font-weight: 700; color: var(--muted); }
.asset-hero.is-up .ah-delta-pil { background: #e7f6ec; border-color: #cde8d5; color: #157f31; }
.asset-hero.is-down .ah-delta-pil { background: #fdeceb; border-color: #f2d3ce; color: #b42318; }
.ah-read { grid-column: 1 / -1; margin: 11px 0 0; padding-top: 9px; border-top: 1px dashed #dde4ee; color: #344054; font-size: 11.5px; line-height: 1.55; text-align: center; }
.ah-read b { color: var(--navy-deep); font-weight: 750; }
.asset-hero.is-loss .ah-big { color: #b42318; }
.asset-hero-simple { grid-template-columns: 1fr; text-align: center; }
/* Versi RAMPING: hero dipakai juga di popover sempit (laba, ROA/ROE, DPK) yang
   kini 390px. Ukuran desktop penuh berdesakan di sana, jadi diperkecil & diberi
   ruang. Popover ASET (lebar 720px) tak terpengaruh karena bukan :not(.is-asset). */
.detail-popover:not(.is-asset) .asset-hero { padding: 12px 13px 11px; column-gap: 8px; align-items: center; }
.detail-popover:not(.is-asset) .ah-node { min-width: 0; gap: 2px; }
.detail-popover:not(.is-asset) .ah-node-label { font-size: 8px; letter-spacing: .04em; }
.detail-popover:not(.is-asset) .ah-from b { font-size: 15px; }
.detail-popover:not(.is-asset) .ah-big { font-size: 22px; }
.detail-popover:not(.is-asset) .ah-mid { min-height: 62px; }
.detail-popover:not(.is-asset) .ah-chip { padding: 3px 9px; gap: 0; }
.detail-popover:not(.is-asset) .ah-chip b { font-size: 12px; }
.detail-popover:not(.is-asset) .ah-chip small { font-size: 8.5px; }
.detail-popover:not(.is-asset) .ah-pulse { display: none; }
.detail-popover:not(.is-asset) .ah-read { font-size: 11px; margin-top: 10px; padding-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ah-line { animation: none; stroke-dashoffset: 0; }
  .ah-area { animation: none; opacity: 1; }
  .ah-pulse { animation: none; opacity: 1; }
  .ah-pulse::after { animation: none; opacity: 0; }
}

/* Judul popover dengan subjudul (BOPO, Laba). */
.pop-title2 { text-align: center; }
.pop-title2 h2 { margin: 0; }
.pop-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 600; }

/* Hero BOPO: angka rasio + batang aliran biaya vs laba. */
.bopo-hero { margin: 13px 0 0; padding: 15px 16px 14px; background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 10px; }
.bopo-figure { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 13px; }
.bopo-figure strong { font-size: 34px; font-weight: 780; line-height: 1; letter-spacing: -.02em; color: #10233f; }
.bopo-figure span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.bopo-figure.good strong { color: #157f31; } .bopo-figure.good span { background: #e7f6ec; color: #157f31; }
.bopo-figure.mid strong { color: #1f6f43; } .bopo-figure.mid span { background: #eef6f0; color: #2b7a4b; }
.bopo-figure.warn strong { color: #b7791f; } .bopo-figure.warn span { background: #fdf3e0; color: #b7791f; }
.bopo-figure.bad strong { color: #b42318; } .bopo-figure.bad span { background: #fdeceb; color: #b42318; }
.bopo-yoy { margin: 11px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.5; font-weight: 600; }
.bopo-yoy.good { background: #eef8f1; color: #1a7f43; }
.bopo-yoy.bad { background: #fdeeec; color: #b42318; }
.bopo-yoy.flat { background: #f1f4f8; color: #475467; }

/* Batang aliran pendapatan → biaya + laba operasional. */
.flow-bar-wrap { margin: 0; }
.flow-bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(3,27,63,.05); }
.flow-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.flow-seg span { padding: 0 6px; font-size: 10.5px; font-weight: 750; color: #fff; white-space: nowrap; }
.flow-beban { background: #e0523f; }
.flow-laba { background: #22aa40; }
.flow-beban + .flow-laba { box-shadow: inset 2px 0 0 #fff; }
.flow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 9px; font-size: 11px; color: #475467; }
.flow-legend b { color: var(--navy-deep); font-weight: 750; }
.flow-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.flow-legend .dot.beban { background: #e0523f; }
.flow-legend .dot.laba { background: #22aa40; }
.flow-legend .dot.rugi { background: #b42318; }
.flow-caption { margin: 9px 0 0; color: #667085; font-size: 10.5px; line-height: 1.5; text-align: center; }
.flow-caption b { color: var(--navy-deep); }

/* Waterfall laba: pendapatan − beban = laba operasional ± non-ops − pajak. */
.wf-head { margin: 14px 0 8px; display: flex; align-items: baseline; gap: 6px; color: var(--navy-deep); font-size: 12.5px; font-weight: 750; }
.wf-head small { color: #8a94a6; font-size: 9.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.wf { margin-top: 10px; padding: 11px 13px; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 10px; }
.wf-row { display: grid; grid-template-columns: minmax(0, 1.15fr) 1fr auto; align-items: center; gap: 10px; padding: 4px 0; }
.wf-label { color: #475467; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-track { position: relative; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.wf-bar { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; }
.wf-bar.pos { background: #22aa40; }
.wf-bar.neg { background: #e0523f; }
.wf-val { min-width: 74px; text-align: right; font-size: 11px; font-weight: 700; }
.wf-val.pos { color: #157f31; }
.wf-val.neg { color: #b42318; }
.wf-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 0; padding: 7px 0; border-top: 1.5px solid #dde4ee; font-size: 11.5px; font-weight: 800; color: var(--navy-deep); }
.wf-sum b.pos { color: #157f31; } .wf-sum b.neg { color: #b42318; }
.wf-sum.wf-final { margin-bottom: 0; padding-bottom: 0; border-top-width: 2px; border-top-color: #cbd5e1; font-size: 13px; }
.wf-narrative { margin: 11px 0 0; padding: 10px 12px; background: #f0f6ff; border: 1px solid #d5e4f7; border-radius: 8px; color: #1e3a5f; font-size: 11.5px; line-height: 1.55; }
.wf-narrative b { color: var(--navy-deep); font-weight: 750; }

/* Segmen batang aliran tambahan (NPL, LDR, DPK). */
.flow-macet, .flow-kredit { background: #e0523f; }
.flow-lancar { background: #22aa40; }
.flow-sisa { background: #cbd7e6; }
.flow-tabungan { background: #22aa40; }
.flow-deposito { background: #2a78d6; }
.flow-kredit + .flow-sisa, .flow-tabungan + .flow-deposito { box-shadow: inset 2px 0 0 #fff; }
.flow-legend .dot.macet, .flow-legend .dot.kredit { background: #e0523f; }
.flow-legend .dot.lancar { background: #22aa40; }
.flow-legend .dot.dpk { background: #cbd7e6; }

/* Panel profitabilitas ROA/ROE. */
.rt-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.rt-tile { padding: 12px 13px; background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 10px; text-align: center; container-type: inline-size; }
.rt-tile.is-focus { background: #eef6ff; border-color: #b9d5f5; box-shadow: 0 0 0 1px #b9d5f5; }
.rt-name { display: block; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
/* Ukurannya ikut lebar petaknya, bukan dipatok. Dipatok 26px, nominal panjang
   seperti "Rp 609,38 M" tidak muat di petak setengah-lebar pada layar ponsel
   dan pecah jadi dua baris di tengah angkanya sendiri — "Rp 609,38" lalu "M".
   Memperkecil semuanya bukan jawabannya: angka pendek ikut kehilangan bobot.
   13cqi memberi ~21px di petak 160px (ponsel) dan tetap mentok 26px begitu
   petaknya cukup lebar. nowrap memastikan sisa kasus ekstrem melebar keluar
   dan tertangkap uji, bukan pecah diam-diam. */
.rt-pct { display: block; margin: 4px 0 2px; color: #10233f; font-size: clamp(15px, 18cqi, 26px); font-weight: 780; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
/* Nominal rupiah panjang ("Rp 490,75 M") butuh ruang lebih; kelasnya
   dipasang di JS berdasarkan panjang teksnya, karena CSS tidak bisa
   mengukur panjang isi. Tanpa pembedaan ini pilihannya cuma dua-duanya
   kecil atau yang panjang pecah dua baris. */
.rt-pct.is-panjang { font-size: clamp(13px, 13cqi, 20px); }
.rt-tile.is-focus .rt-pct { color: #1257a8; }
.rt-calc { display: block; color: #8a94a6; font-size: 9.5px; }
.rt-note { margin: 9px 0 0; color: #667085; font-size: 10.5px; line-height: 1.5; text-align: center; }
.rt-note b { color: var(--navy-deep); }
/* Catatan pendamping: keterangan teknis yang hanya muncul saat memang berlaku
   (lihat catatanRasioResmi). Sengaja lebih redup daripada .rt-note biasa —
   ia menjaga pembaca dari salah paham, bukan bagian dari ceritanya. */
.rt-note-kecil { font-size: 9.8px; color: #7c8798; font-style: italic; }
.rt-note-kecil b { font-style: normal; }
/* Blok "Apa itu X?" — penjelasan istilah sebelum angkanya ditimbang. Dibedakan
   tipis dari narasi biasa: latar biru sangat muda, supaya terbaca sebagai
   sisipan yang boleh dilewati pembaca yang sudah paham istilahnya. */
/* ── Popup istilah ──────────────────────────────────────────────────────────
   Menumpuk di atas popover sel (z-index di atasnya), jadi angka yang sedang
   dibaca tetap terlihat di belakangnya. */
.istilah-popup {
  /* 730, bukan 720: .saham-mini sudah memakai 720, dan dua lapisan melayang
     ber-z-index sama akan diurutkan oleh urutan DOM belaka — tumpukan yang
     benar hari ini bisa terbalik besok hanya karena markup dipindah. */
  position: fixed; z-index: 730; box-sizing: border-box;
  width: max-content; max-width: min(330px, calc(100vw - 20px));
  max-height: calc(var(--vph) - 20px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 15px 14px;
  background: #fff; border: 1px solid #d8e2f0; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(3, 27, 63, .22);
  animation: istilah-muncul .16s ease-out both;
}
@keyframes istilah-muncul { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.istilah-popup-close { top: 8px; }
/* ── Penjelasan gerbang di popover skor ─────────────────────────────────────
   Menurunkan predikat adalah tindakan yang berakibat, jadi alasannya diberi
   ruang sendiri: apa yang menentukan dipisah dari apa yang sekadar menyala. */
.gerbang-blok { margin: 13px 0 0; padding: 12px 14px; border-radius: 10px; border-left: 4px solid; }
.gerbang-blok.is-turun { background: #fdf3f2; border-color: #d92d20; }
.gerbang-blok.is-keringanan { background: #fffaf0; border-color: #d99e0b; }
.gerbang-blok.is-tahan { background: #f8fafc; border-color: #98a2b3; }
.gerbang-judul { margin: 0; color: var(--navy-deep); font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.gerbang-teks { margin: 7px 0 0; color: #475467; font-size: 11.5px; line-height: 1.6; }
.gerbang-sub { margin: 10px 0 4px; color: #667085; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.gerbang-daftar { margin: 0; padding-left: 17px; color: #344054; font-size: 11.5px; line-height: 1.6; }
.gerbang-daftar li { margin-top: 3px; }
.gerbang-daftar.is-penentu li { font-weight: 650; color: #7a271a; }
.gerbang-blok.is-keringanan .gerbang-daftar li { color: #7d4216; }
.gerbang-kaki { margin: 9px 0 0; padding-top: 7px; border-top: 1px dashed #e6d5d2; color: #8a94a6; font-size: 10px; line-height: 1.5; }
.istilah-nama { margin: 0; padding-right: 34px; color: var(--navy-deep); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.istilah-panjang { margin: 3px 0 0; color: #1257a8; font-size: 10.5px; font-weight: 700; font-style: italic; }
.istilah-teks { margin: 9px 0 0; color: #344054; font-size: 12px; line-height: 1.62; }
.istilah-teks b { color: var(--navy-deep); }
@media (prefers-reduced-motion: reduce) { .istilah-popup { animation: none; } }

/* Tombol "Apa itu X?" di popover sel. Sengaja tidak menonjol: ia jalan keluar
   untuk pembaca yang belum kenal istilahnya, bukan bagian dari ceritanya. */
.istilah-tombol {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: #f4f8fd; border: 1px solid #c7dcf4; border-radius: 999px;
  color: #1257a8; font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.istilah-tombol:hover { background: #e6f0fb; border-color: #a9c9ec; }
.istilah-tombol span {
  display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: #1257a8; color: #fff; font-size: 10px; font-weight: 800;
}
/* Baris tombol: beberapa istilah bisa disinggung sekaligus di satu popover. */
.istilah-baris { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 11px; }
.istilah-tombol.is-aktif { background: #1257a8; border-color: #1257a8; color: #fff; }
.istilah-tombol.is-aktif span { background: #fff; color: #1257a8; }
@media (hover: none) and (pointer: coarse) {
  .istilah-tombol { padding: 9px 15px; font-size: 11.5px; }
}
/* Tiga petak berjajar: dipakai identitas ROE = ROA × pengungkit, supaya
   perkaliannya terbaca sebagai satu kalimat, bukan tiga angka terpisah. */
.rt-panel-3 { grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.rt-panel-3 .rt-op { background: transparent; border: 0; padding: 6px 2px; }
.rt-panel-3 .rt-op .rt-pct { font-size: 18px; color: #667085; }
/* Baris penggerak laba (YoY). Selisihnya diwarnai menurut ARTI, bukan tanda:
   beban & pajak yang naik itu memberatkan, jadi tidak boleh tampil hijau. */
.lb-row b { font-variant-numeric: tabular-nums; }
.lb-row.naik-baik b { color: #157f31; }
.lb-row.naik-buruk b { color: #b42318; }

/* Baris rincian (CKPN, NPL nett, AYDA, tabungan/deposito). */
.cq-rows { margin-top: 11px; padding: 4px 13px; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 10px; }
.cq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 10px; padding: 8px 0; }
.cq-row + .cq-row { border-top: 1px dashed #e6ebf2; }
.cq-row > span { color: #344054; font-size: 11.5px; font-weight: 600; }
.cq-row > b { color: var(--navy-deep); font-size: 12.5px; font-weight: 750; text-align: right; }
.cq-row > small { grid-column: 1 / -1; color: #8a94a6; font-size: 10px; line-height: 1.45; }
.cq-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cq-row .dot.tabungan { background: #22aa40; }
.cq-row .dot.deposito { background: #2a78d6; }
/* Kunci skala warna di popover kelompok Ruang Periksa. Contoh garisnya dibuat
   dari properti yang sama persis dengan penanda di tabel, jadi keduanya tidak
   bisa berbeda diam-diam. */
.cq-rows-kunci .cq-row > span { display: flex; align-items: center; gap: 9px; }
/* Contoh batangnya digambar dengan properti yang sama persis dengan penanda di
   tabel, cuma di atas latar abu supaya batang putih tetap terlihat di popover
   yang berlatar terang. */
.skala-kunci { flex: none; width: 9px; height: 17px; border-radius: 3px; background: #9ca3ad; position: relative; }
.skala-kunci::before { content: ""; position: absolute; left: 3px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; }
.skala-kunci[data-scale="baku"]::before   { background: #111827; }
.skala-kunci[data-scale="peer"]::before   { background: #ffffff; }
.skala-kunci[data-scale="netral"]::before { background: repeating-linear-gradient(180deg, #fff 0 2px, rgba(255,255,255,0) 2px 5px); }
.skala-kunci[data-scale="ambang"]::before { background: linear-gradient(180deg, #111827 0 38%, rgba(255,255,255,0) 38% 62%, #111827 62% 100%); }
.cq-warn > b { color: #b7791f; }
.cq-warn { background: #fdf7ec; margin: 0 -13px; padding: 8px 13px; border-radius: 0; }
.bridge-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 2px; align-items: start; }
.bridge-narrative { grid-column: 1 / -1; margin: 0; padding: 9px 11px; background: #f0f6ff; border: 1px solid #d5e4f7; border-radius: 8px; color: #1e3a5f; font-size: 11.5px; line-height: 1.55; text-align: left; }
.bridge-lead { margin: 0 0 6px; font-weight: 750; color: var(--navy-deep); }
.bridge-takeaway { text-align: left; }
.bridge-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.bridge-points li { position: relative; padding-left: 15px; }
.bridge-points li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #2a78d6; }
.bridge-takeaway { grid-column: 1 / -1; margin: 0; padding: 8px 11px; background: #fffdf4; border: 1px solid #f0e6c8; border-left: 3px solid #d5990a; border-radius: 8px; color: #5c4a12; font-size: 11.5px; line-height: 1.55; }
.bridge-takeaway b { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #d5990a; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.bridge-footnote { grid-column: 1 / -1; margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.bridge-footnote strong { color: var(--navy-deep); }
.bridge-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 7px; padding-top: 7px; border-top: 2px solid #d7dee8; color: var(--navy-deep); font-size: 10.5px; font-weight: 800; cursor: help; }
.bridge-col { margin-bottom: 0; padding: 9px 11px; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 10px; }
.bridge-col h4 { margin: 0 0 7px; display: flex; align-items: baseline; gap: 6px; color: var(--navy-deep); font-size: 11.5px; cursor: help; }
.bridge-col h4 small { color: #8a94a6; font-size: 9px; font-weight: 650; }
.bridge-row { display: grid; grid-template-columns: minmax(0, 1.35fr) 1fr auto; align-items: center; gap: 8px; padding: 3px 0; cursor: help; }
.bridge-row + .bridge-row { border-top: 1px dashed #eef2f7; }
.bridge-label { color: #475467; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bridge-track { position: relative; height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.bridge-bar { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; }
.bridge-bar.pos { background: #22aa40; }
.bridge-bar.neg { background: #d63a2a; }
.bridge-delta { min-width: 64px; text-align: right; font-size: 10.5px; }
.bridge-delta.pos { color: #157f31; }
.bridge-delta.neg { color: #b42318; }
.bridge-empty { margin: 12px 0; padding: 9px 11px; background: #f8fafc; border: 1px dashed #d7dee8; border-radius: 8px; color: #667085; font-size: 11px; line-height: 1.5; }
@media (max-width: 640px) {
  .bridge-wrap { grid-template-columns: 1fr; }
  .asset-hero { padding: 12px 12px 10px; column-gap: 8px; }
  .ah-big { font-size: 24px; }
  .ah-from b { font-size: 14px; }
  .ah-mid { min-height: 72px; }
  .ah-chip { padding: 4px 10px; }
  .ah-chip b { font-size: 12px; }
}

/* Caveat & disclaimer di popover skor komposit. */
.score-caveat { margin: 10px 0 0; padding: 8px 10px; background: #fef0c7; border: 1px solid #f5dc90; border-radius: 7px; color: #93540a; font-size: 10.5px; line-height: 1.5; }
.score-caveat-flag { background: #fee4e2; border-color: #f6c6c2; color: #b42318; }
.score-disclaimer { margin: 12px 0 0; padding-top: 9px; border-top: 1px dashed #dbe4ef; color: #8a94a6; font-size: 9.5px; line-height: 1.5; }

/* Penanda ⚑ pada sel Ruang Periksa yang memicu Sinyal Kewaspadaan. Dibuat
   mencolok tetapi tidak menutupi angka: sudut kiri-atas sel, di seberang
   lencana level yang duduk di kanan. */
.supplement-cell.is-signal { box-shadow: inset 0 0 0 2px #b42318; }
.supp-flag {
  position: absolute; top: 2px; left: 3px; z-index: 2;
  font-size: 10px; line-height: 1; color: #b42318;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
  pointer-events: none;
}
.supplement-cell { position: relative; }

/* Lensa TKS — peringkat kuantitatif faktor Rentabilitas & Permodalan sesuai
   SEOJK 11/2022, ditampilkan berdampingan dengan skor IDEAL. Ditutup secara
   default (details) supaya tidak menyaingi skor utama. */
.tks-lens { margin: 12px 0 0; padding: 9px 11px; background: #f4f7fb; border: 1px solid #dbe4ef; border-radius: 8px; }
.tks-lens > summary { cursor: pointer; font-size: 10.5px; font-weight: 700; color: #33415c; list-style: none; }
.tks-lens > summary::-webkit-details-marker { display: none; }
.tks-lens > summary::before { content: '▸ '; color: #7b8aa3; }
.tks-lens[open] > summary::before { content: '▾ '; }
.tks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 9px 0 0; }
.tks-grid h4 { margin: 0 0 5px; font-size: 10px; color: #33415c; font-weight: 700; }
.tks-grid h4 small { font-weight: 500; color: #8a94a6; }
.tks-grid h4 b { float: right; font-size: 11px; color: #1b2a41; }
.tks-grid ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.tks-grid li { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; color: #4a5568; }
.tks-p { display: inline-block; min-width: 21px; padding: 1px 5px; border-radius: 4px; text-align: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.tks-p1 { background: #1a7f5a; } .tks-p2 { background: #4a9d5f; } .tks-p3 { background: #c99a1e; }
.tks-p4 { background: #d9750a; } .tks-p5 { background: #b42318; }
.tks-komposit { margin: 9px 0 0; font-size: 10.5px; color: #33415c; }
.tks-note { margin: 7px 0 0; color: #8a94a6; font-size: 9.5px; line-height: 1.5; }
@media (max-width: 520px) { .tks-grid { grid-template-columns: 1fr; } }

/* Popover metodologi (tombol buku di header). */
.detail-popover.is-signalinfo .popover-method h2 { margin: 0; }
.method-dims { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 14px; }
.method-dim { padding: 9px 11px; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 10px; }
.method-dim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.method-dim-head b { color: var(--navy-deep); font-size: 12.5px; }
.method-dim-head strong { color: #d21f32; font-size: 12.5px; }
.method-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.method-chip { padding: 2px 7px; border-radius: 999px; background: #eef2f7; color: #344054; font-size: 10px; font-style: normal; font-weight: 650; }
.method-chip.is-info { background: #f1f5f9; color: #8a94a6; }
.method-h3 { margin: 14px 0 6px; color: var(--navy-deep); font-size: 12px; }
.method-notes { margin: 0; padding-left: 17px; color: #475569; font-size: 11.5px; line-height: 1.55; }
.method-notes li { margin-bottom: 5px; }
/* Ajakan ke halaman metodologi lengkap — popup hanya kulit ringkasnya. */
.method-cta {
  display: block; margin: 14px 0 4px; padding: 10px 14px; border-radius: 10px; text-align: center;
  background: var(--navy, #0b2f66); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 20px rgba(9, 35, 74, .18); transition: transform .15s ease, box-shadow .15s ease;
}
.method-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(9, 35, 74, .26); color: #fff; }
.signalinfo-note { margin-top: -6px; font-size: 11px; color: #64748b; }

.popover-score ul { margin: 0; padding: 0; border-top: 1px solid #e2e8f0; list-style: none; }
.popover-score li { padding: 7px 2px; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf1f5; color: #475467; font-size: 10px; }
.popover-score li strong { color: var(--navy-deep); }

@keyframes col-shiny {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Highlight kolom bank terpilih: warna conditional formatting DIPERTAHANKAN.
   Penandanya ring tebal sesuai tema + kilau menyapu yang agresif.
   PENTING: th header TIDAK boleh diberi position:relative — itu mematikan
   position:sticky-nya (logo hilang saat scroll); sticky sudah positioned,
   jadi ::after tetap bekerja. */
td.bank-col.col-theme-good,
td.bank-col.col-theme-bad,
td.bank-col.col-theme-ugly {
  position: relative;
}
.bank-col.col-theme-good,
.bank-col.col-theme-bad,
.bank-col.col-theme-ugly {
  overflow: hidden;
}
.bank-col.col-theme-good { box-shadow: inset 3px 0 0 #16a34a, inset -3px 0 0 #16a34a; }
.bank-col.col-theme-bad { box-shadow: inset 3px 0 0 #d97706, inset -3px 0 0 #d97706; }
.bank-col.col-theme-ugly { box-shadow: inset 3px 0 0 #dc2626, inset -3px 0 0 #dc2626; }
th.bank-head.col-theme-good { box-shadow: inset 3px 3px 0 #16a34a, inset -3px 0 0 #16a34a; }
th.bank-head.col-theme-bad { box-shadow: inset 3px 3px 0 #d97706, inset -3px 0 0 #d97706; }
th.bank-head.col-theme-ugly { box-shadow: inset 3px 3px 0 #dc2626, inset -3px 0 0 #dc2626; }

.bank-col.col-theme-good::after,
.bank-col.col-theme-bad::after,
.bank-col.col-theme-ugly::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.85) 50%, transparent 68%);
  transform: translateX(-100%);
  /* Menyapu tiga kali lalu diam. Versi `infinite` membuat kolom terpilih
     berkilau tanpa henti, dan di layar penuh itu terbaca sebagai halaman
     yang bergetar terus — penanda kolomnya sendiri sudah cukup dari ring
     tebal yang permanen. */
  animation: col-shiny 1.4s ease-in-out 3;
  pointer-events: none;
  z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
  .bank-col.col-theme-good::after,
  .bank-col.col-theme-bad::after,
  .bank-col.col-theme-ugly::after { animation: none; }
}

/* Mode kaca pembesar: sel yang di-hover membesar dengan warna & proporsi
   sama; angka nominal kecil (cell-note) hanya muncul saat diperbesar. */
.cell-note { display: none; }
.magnify-toggle.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }
body.magnify-on .metric-cell:hover,
body.magnify-on .supplement-cell:hover { position: relative; z-index: 70; overflow: visible; }
body.magnify-on .metric-trigger,
body.magnify-on .supp-trigger { transition: transform .12s ease, box-shadow .12s ease; }
body.magnify-on .metric-cell:hover .metric-trigger,
body.magnify-on .supplement-cell:hover .supp-trigger {
  position: relative;
  z-index: 71;
  transform: scale(1.85);
  background: var(--analysis-bg);
  color: var(--analysis-ink);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(3,27,63,.4), 0 0 0 1.5px rgba(3,27,63,.45);
}
body.magnify-on .metric-cell:hover .cell-note { display: block; }
body.colors-off.magnify-on .metric-row:not(.row-color-inverted) .metric-cell:hover .metric-trigger { background: #fff; color: #111827; }
@media (prefers-reduced-motion: reduce) {
  body.magnify-on .metric-trigger, body.magnify-on .supp-trigger { transition: none; }
}

/* Sorotan konteks saat magnify. Dimensi & indikator milik sel hover ditandai
   dengan MEMBALIK warna (bukan outline kuning). */
.dimension-cell.mag-focus {
  background: #fff !important;
  color: var(--navy) !important;
}
.dimension-cell.mag-focus span { color: var(--navy) !important; }
.dimension-cell.mag-focus b,
.dimension-cell.mag-focus small { color: var(--navy-deep) !important; }
.indicator-cell.mag-focus { background: #fff !important; }
.indicator-cell.mag-focus button { color: var(--navy-deep) !important; font-weight: 700; }

.bank-logo-trigger { transition: transform .15s ease; transform-origin: center; }
.bank-logo-trigger img { transition: opacity .15s ease, filter .15s ease; }
th.bank-head.mag-focus .bank-logo-trigger { overflow: visible; }
/* Logo tersorot naik ke layer teratas (bukan cuma <img>-nya — seluruh tombol,
   termasuk alas putihnya, ikut membesar sebagai satu unit solid; kalau cuma
   <img> yang di-scale, sisi kiri-kanan logo transparan akan tembus ke logo
   redup di belakangnya dan terlihat seperti "ketutup"). */
th.bank-head.mag-focus {
  z-index: 65 !important;
  isolation: isolate;
}
th.bank-head.mag-focus .bank-logo-trigger {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(3,27,63,.4);
  transform: scale(1.4);
}
/* Hanya LOGO tetangga kiri-kanan yang diredup (rank & baris aset tetap jelas).
   Sangat samar — masih bisa dikenali bentuknya, tapi jelas bukan fokus. */
.bank-head.mag-neighbor .bank-logo-trigger img { opacity: .08; filter: grayscale(.85); }

@media (max-width: 720px) {
  :root {
    --header-height: 96px;
    /* Default (ujung kiri): kolom IDEAL penuh seperti desktop. */
    --sticky-dimension: 62px;
    --sticky-indicator: 138px;
    --scrollbar-clearance: 10px;
    /* Batas minimum lebih kecil dari desktop supaya baris IDEAL Composite
       Score tetap muat di layar pendek (mis. 360×740) tanpa terpotong. */
    --matrix-head-height: clamp(76px, calc(var(--vph) * .11), 108px);
    --matrix-score-height: clamp(34px, calc(var(--vph) * .05), 52px);
    --matrix-row-height: clamp(19px, calc((var(--vph) - var(--header-height) - var(--iklan-h) - var(--terbaik-legend-h, 0px) - var(--matrix-head-height) - var(--matrix-score-height) - var(--scrollbar-clearance) - var(--dimension-border-slack) - var(--ideal-button-zone)) / var(--matrix-rows)), 64px);
    --supplement-row-height: clamp(28px, calc((var(--vph) - var(--header-height) - var(--iklan-h) - var(--terbaik-legend-h, 0px) - var(--matrix-head-height) - var(--scrollbar-clearance) - var(--supplement-border-slack) - var(--supplement-bottom-slack)) / var(--supplement-rows)), 58px);
  }
  /* Saat menggeser masuk ke deretan bank, kolom IDEAL menyempit. */
  html.ideal-collapsed {
    --sticky-dimension: 30px;
    --sticky-indicator: 104px;
  }
  /* Tap logo IDEAL menyembunyikan header → matriks memakai seluruh layar.
     Tap lagi untuk memunculkan kembali. Kelas di <html> (bukan <body>) karena
     --matrix-row-height didefinisikan di :root — override --header-height harus
     terjadi di elemen yang sama agar tinggi baris ikut membesar. */
  html.chrome-hidden { --header-height: 0px; }
  html.chrome-hidden .report-header { display: none; }
  .framework-logo[data-action="chrome"] { cursor: pointer; }
  .framework-head, .dimension-cell, .indicator-cell {
    transition: width .25s ease, min-width .25s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .framework-head, .dimension-cell, .indicator-cell { transition: none; }
  }

  /* Header dua baris: ikon + periode kanan-atas, lalu baris filter geser. */
  .report-header { height: var(--header-height); padding: 8px 10px 6px; align-items: flex-start; justify-content: flex-start; }
  .report-header-nav { width: 100%; flex-wrap: wrap; row-gap: 8px; }
  /* 6px, bukan 8px: selisih 8px lintas 4 celah itu yang menentukan kelima
     tombol muat satu baris di 390px atau tidak. */
  .report-header-nav { column-gap: 6px; }
  /* Baris filter dipaksa memulai barisnya sendiri. Sebelumnya ia kebetulan
     saja turun karena kelebaran; begitu jumlah/ukuran ikon berubah, ia bisa
     naik ke baris ikon dan ikut tertimbun pil periode. */
  /* 46px disisakan untuk tombol akun, yang position:absolute melayang di atas
     baris ini. Cadangan lama ditulis sebagai `flex: 1 1 calc(100% - 70px)` di
     aturan .filter-group dan TIDAK PERNAH BEKERJA — aturan ber-ID ini menang
     spesifisitas, jadi baris filter memakai seluruh lebar dan ujungnya masuk ke
     bawah tombol akun. Terukur di 360px: tombol Filter berakhir di x=324
     sementara tombol akun mulai di x=310, jadi 14px terakhirnya beserta tanda
     panahnya tertimbun, dan ketukan di situ membuka menu akun alih-alih filter.
     Basisnya tetap jauh lebih besar daripada sisa ruang di baris ikon, jadi
     jaminan "baris filter selalu memulai barisnya sendiri" tidak berubah. */
  .report-header-nav #filter-group { flex: 0 0 calc(100% - 46px); }
  /* Zona kanan diberi BATAS KERAS. Tanpa ini lebarnya ikut isi: di mode
     Terbaik label tombol KR jadi "Terbaik K1" dan zonanya membengkak dari
     185px ke 225px, cukup untuk menimbun tombol Sinyal lagi. Baris ikon di
     kiri tidak bisa tahu itu, jadi yang dibatasi zonanya.
     Zona ini juga DIRAMPINGKAN (dulu ~185px) supaya kelima tombol ikon muat
     tanpa perlu ada yang dihapus: di 390px ruang tersisa jadi ~230px,
     sementara 5 ikon 40px + jarak 6px butuh 224px. */
  .report-period { right: 10px; top: 26px; gap: 0; max-width: 152px; }
  .kr-switch-label { max-width: 92px; }
  /* Pin peta pada tombol KR: hiasan, dan di ponsel harganya ~20px yang lebih
     berguna untuk tombol yang benar-benar dipakai. */
  .kr-switch svg { display: none; }
  .report-header .kr-switch { padding: 0 11px; margin-left: 6px; }
  /* Satu periode saja (mode Terbaik) — pemilih periode sudah pointer-events:
     none, jadi di ponsel ia cuma memakan ~124px tanpa guna. Disembunyikan
     supaya label KR yang panjang dapat ruang tanpa melebarkan zona. */
  .report-period.period-single .period-select { display: none; }
  .report-period .period-kicker,
  .period-timeline { display: none; }
  .period-select { display: block; min-width: 0; padding: 6px 21px 6px 7px; font-size: 12.5px; background-position: right 5px center; }
  .nav-divider { display: none; }
  /* Di mobile tombol Metodologi kembali mengalir sebagai tombol pertama nav
     (ikon 36px, label tetap tersembunyi — perilaku dua-tahap khusus desktop). */
  #method-toggle { position: static; transform: none; }
  #method-toggle svg { margin: 0 9px; }
  /* 40px, bukan 36px: di bawah 40px tombol ikon ini meleset saat disentuh.
     Sengaja TIDAK dinaikkan ke 44px — .report-header-nav memakai flex-wrap
     dan tinggi header dipatok --header-height, jadi baris ikon yang terlalu
     lebar akan membungkus dan menabrak batas header. Pada 390px: 5 tombol
     x 40px + jarak 32px + spacer periode 96px = 328px, masih muat satu baris. */
  .color-toggle, .watch-toggle, .trend-toggle { width: 40px; height: 40px; }
  /* Field "Pantau BPR" jadi OVERLAY, bukan anggota baris ikon. Selama ia masih
     mengalir di dalam .report-header-nav, membukanya menambah ~190px ke baris
     itu: kelima ikon membungkus, #filter-group (flex 0 0 100%) terdorong ke
     baris ketiga, dan karena tinggi header dipatok --header-height baris filter
     itu jatuh DI LUAR header lalu tertimbun matriks. Terukur di 390px: baris
     filter bergeser dari y56–94 ke y104–142 sementara header tetap 96px.
     Akibatnya Kelas Aset / Kota-Kab / Filter tak bisa disentuh sama sekali —
     dan tombol × milik field ini ikut tertimbun, jadi pencariannya tidak bisa
     ditutup tanpa memuat ulang halaman.
     .watch-group dikembalikan ke position:static supaya blok penampungnya
     .report-header (position:relative), bukan tombol matanya yang cuma 40px —
     kalau dianchor ke tombol itu, overlay selebar 300px meluber ke kiri layar. */
  .watch-group { position: static; }
  .watch-field {
    position: absolute;
    top: 52px;
    left: 10px;
    right: 10px;
    z-index: 560;                     /* di atas sel matriks (maks. z-index 70) */
    padding: 7px;
    background: #fff;
    border: 1px solid #cbd6e4;
    border-radius: 9px;
    box-shadow: 0 14px 32px rgba(3, 27, 63, .2);
  }
  .watch-field .watch-input-wrap { flex: 1 1 auto; min-width: 0; }
  .watch-field .watch-input { width: 100%; }
  /* Tombol ganti KR juga 32px. Selector berinduk dipakai SENGAJA: .kr-switch
     dasarnya ditulis jauh di bawah file ini, jadi aturan polos di dalam media
     query ini akan kalah pada spesifisitas yang sama (pola yang sama dengan
     .report-header .pick-group di atas). */
  .report-header .kr-switch { height: 40px; }
  /* Tombol palet cukup ikon di mobile — label "Lembut/Klasik" paling rakus
     tempat di baris ikon; mode aktif tetap terlihat dari state ikon. */
  .palette-toggle { width: 36px; height: 36px; padding: 0; }
  .palette-label { display: none; }
  /* Dirampingkan untuk layar sempit:
     - Kaca pembesar: interaksi hover, tidak relevan di sentuh.
     - Warna on/off & mode Bersih/Badge: preferensi desktop/cetak — di layar
       kecil warna justru satu-satunya pembacaan cepat.
     - Mode ✋ Pilih: tap kolom konflik dengan scroll; fungsi pilih BPR
       tersedia lewat dropdown Filter.
     - Filter Pemda/Swasta: sekunder, jarang dipakai — Kelas Aset & Filter
       sudah cukup untuk mempersempit peer group di layar sempit.
     (.pick-group & .ownership-toggle pakai selector berinduk agar menang
      atas aturan dasarnya yang ditulis lebih bawah di file ini.)
     CATATAN: Pantau BPR (tombol mata) DITAMPILKAN di mobile — pengguna
     memakainya untuk melacak BPR tertentu langsung dari HP. */
  .magnify-toggle,
  #color-toggle,
  #view-toggle,
  .report-header .pick-group,
  .report-header .ownership-toggle,
  /* Palet Lembut/Klasik disembunyikan di ponsel — preferensi tampilan murni,
     sekelas #color-toggle & #view-toggle di atas. TETAP ADA di desktop.
     Tombol Layar penuh SENGAJA TIDAK ikut disembunyikan: di ponsel matriks
     19 baris paling butuh tinggi layar, dan sejak auto-fullscreen dihapus
     tombol inilah SATU-SATUNYA cara masuk maupun keluar layar penuh. */
  .palette-toggle { display: none; }
  /* Spacer 96px lama DIHAPUS: zona periode sebenarnya ~185px, jadi cadangan
     ini selalu kurang dan tetap membiarkan tombol tertimbun. Digantikan
     max-width pada .report-header-nav di atas, yang membatasi barisnya secara
     struktural sehingga tak bisa lagi menjorok ke bawah pil periode. */
  /* Layar sempit: susunan tetap [logo][teks][tombol]; kolom tombol
     dipersempit (tetap seragam), logo dibesarkan sama seperti desktop
     sejauh masih muat. Ditulis SEBELUM blok ≤374px di bawah supaya
     override layar ekstra sempit itu benar-benar menang cascade-nya. */
  /* Mobile: identitas kembali ke logo DI ATAS teks (bukan di samping)
     supaya kolom tombol sinyal di kanan tetap dapat lebar layak. */
  .signal-item { padding: 7px; gap: 8px; align-items: flex-start; }
  .signal-bank-btn {
    flex-direction: column;
    align-items: center;
    flex: 0 0 132px;
    width: 132px;
    gap: 6px;
    padding: 4px 2px;
    text-align: center;
  }
  .signal-logo { width: 86px; height: 86px; }
  .signal-bank { width: 100%; }
  .signal-bank b { font-size: 12.5px; -webkit-line-clamp: 3; }
  .signal-bank small { font-size: 10.5px; }
  /* Kolom sinyal mengisi sisa lebar (bukan fixed 210px); label panjang boleh
     membungkus 2 baris — jangan pernah terpotong. */
  .signal-chip-col { width: auto; flex: 1 1 0; min-width: 0; }
  .signal-chip { padding: 5px 9px; font-size: 10.5px; white-space: normal; line-height: 1.35; align-items: flex-start; }
  .signal-chip i { flex: none; margin-top: 1px; }
  /* Layar ekstra sempit: rapatkan ikon supaya tidak menabrak pemilih periode,
     dan turunkan batas minimum tinggi baris agar composite score tetap muat. */
  @media (max-width: 374px) {
    :root {
      --matrix-head-height: clamp(72px, calc(var(--vph) * .11), 108px);
      --matrix-score-height: clamp(32px, calc(var(--vph) * .05), 52px);
      --matrix-row-height: clamp(18px, calc((var(--vph) - var(--header-height) - var(--iklan-h) - var(--terbaik-legend-h, 0px) - var(--matrix-head-height) - var(--matrix-score-height) - var(--scrollbar-clearance) - var(--dimension-border-slack) - 16px - var(--ideal-button-zone)) / var(--matrix-rows)), 64px);
    }
    .report-header-nav { column-gap: 6px; }
    .color-toggle, .watch-toggle, .trend-toggle { width: 32px; height: 32px; }
    .palette-toggle { width: 32px; height: 32px; padding: 0; }
    /* Lebar select dikunci: 6 ikon 32px berakhir di x≈232, select mulai x≈236. */
    /* Padding dirampingkan, bukan kotaknya dilebarkan: "2026 Q2" butuh 55px
       sementara ruang teksnya cuma 52px, jadi periode — konteks paling dasar
       di halaman ini — tampil terpotong jadi "2026 Q". Melebarkan kotaknya
       akan menabrak tombol KR yang mulai di x=299. */
    .period-select { width: 82px; min-width: 0; padding-left: 6px; padding-right: 19px; font-size: 12px; }
    .signal-bank-btn { flex-basis: 108px; width: 108px; gap: 4px; }
    .signal-logo { width: 64px; height: 64px; }
  }
  .trend-panel {
    top: var(--header-height);
    left: 0;
    transform: none;
    width: 100%;
    max-height: calc(var(--vph) - var(--header-height));
    border-radius: 0;
    padding: 12px 12px 14px;
  }
  #trend-panel { width: 100%; }
  .trend-head { flex-wrap: wrap; }
  /* Tombol tutup melayang di kanan atas, jadi judul boleh selebar panel asal
     menyisakan ruang tombol — tanpa itu catatan periode tersembunyi di
     baliknya. */
  .trend-title { flex-basis: 100%; padding-right: 46px; order: 0; }
  /* Dua hal sekaligus. Pertama, 26px terlalu kecil untuk jempol — 40px ambang
     yang nyaman disentuh. Kedua, tombol ini dikeluarkan dari aliran flex:
     begitu kepala panel membungkus (dan di panel Sinyal ada ikon ⚑ yang ikut
     memakan lebar), tombol yang ikut mengalir selalu terlempar ke barisnya
     sendiri dan meninggalkan lubang kosong di bawah judul. */
  .popover-close.trend-close {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    width: 40px;
    height: 40px;
    font-size: 19px;
  }
  .trend-controls { order: 2; }
  #trend-type { display: none; }   /* mode batang khusus desktop */
  .ind-select { order: 3; flex: 1 1 100%; }
  .ind-select-btn { max-width: none; width: 100%; min-height: 40px; justify-content: space-between; }
  /* Label sumbu 10px terlalu kecil di layar sempit. Margin kiri chart sudah
     dipersempit di JS untuk mengganti lebar yang dipakai huruf lebih besar. */
  .tr-tick { font-size: 11px; }
  .trend-hint { font-size: 11px; }
  .ind-select-panel { left: 0; right: 0; width: auto; }
  .signalinfo-title-icon { order: -1; }
  .signal-info-btn { order: 2; flex: 1 1 100%; justify-content: center; margin-top: 2px; }
  .filter-group {
    order: 10;
    /* Sisakan slot badge jumlah BPR di ujung kanan baris kedua. */
    flex: 1 1 calc(100% - 70px);
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-right: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filter-group::-webkit-scrollbar { display: none; }
  /* Badge jumlah BPR: item statis di ujung baris filter — tidak lagi absolute
     (dulu menutupi tombol fullscreen di baris ikon). */
  .filter-count {
    order: 11;
    flex: none;
    margin-left: auto;
    align-self: center;
    font-size: 10px;
  }
  .ms { flex: none; position: static; }
  /* 36px, SENGAJA tidak dinaikkan ke 40px. Dicoba dan diukur: pada 40px baris
     filter berakhir tepat di y=96, yaitu garis bawah header, melewati kotak
     isinya (padding bawah 6px) dan menempel ke garis batas. Tombol ini lebar
     83-114px, jadi 36px sudah nyaman disentuh — berbeda dari tombol ikon
     persegi di baris atas yang memang perlu 40px. */
  .ms-btn { height: 36px; }
  .ms-btn-label { font-size: 10px; }   /* 9px kelewat kecil untuk kata yang menerangkan isi tombolnya */
  .ms-btn-value { max-width: 86px; font-size: 12px; }
  .seg { flex: none; height: 36px; }
  .seg-btn { padding: 0 10px; font-size: 11px; }

  /* Panel filter jadi bottom sheet. */
  .ms-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    max-height: 68vh;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    box-shadow: 0 -18px 45px rgba(3,27,63,.28);
    display: flex;
    flex-direction: column;
  }
  .ms-panel::before {
    content: "";
    align-self: center;
    width: 40px;
    height: 4px;
    margin-bottom: 10px;
    background: #cbd6e4;
    border-radius: 999px;
  }
  .ms-list { max-height: none; flex: 1; }
  .ms-list label { padding: 11px 8px; font-size: 14px; }
  .ms-list input[type="checkbox"] { width: 18px; height: 18px; }
  .ms-search { padding: 10px; font-size: 14px; }
  .ms-actions button { padding: 6px 10px; font-size: 13px; }

  /* Matriks: kolom IDEAL penuh di ujung kiri, menyempit saat digeser. */
  .framework-head { width: calc(var(--sticky-dimension) + var(--sticky-indicator)); min-width: calc(var(--sticky-dimension) + var(--sticky-indicator)); }
  .framework-logo { padding: 4px; }
  .framework-logo img { max-width: 100%; }
  .dimension-cell { padding: 4px 2px; overflow: hidden; }
  .dimension-cell span { font-size: 16px; }
  /* 9px & 8,5px, bukan 7,5/7. Di bawah 11px teks berubah jadi tekstur, dan
     dua baris ini menyebutkan NAMA pilar beserta bobotnya — justru yang
     ditanya pembaca saat pertama membuka matriks. Ruangnya ada: tiap grup
     dimensi setinggi 3-4 baris (~90px), sementara isinya cuma huruf besar
     16px + nama + persen. */
  .dimension-cell b { font-size: 9px; }
  .dimension-cell small { font-size: 8.5px; }
  html.ideal-collapsed .dimension-cell b,
  html.ideal-collapsed .dimension-cell small { display: none; }
  html.ideal-collapsed .dimension-cell.supplement-dim b {
    display: block;
    font-size: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
  }
  .indicator-cell { overflow: hidden; }
  .indicator-cell button, .indicator-cell.supplement-ind { padding: 3px 5px; font-size: 9.5px; line-height: 1.15; }
  /* Kiri disisakan buat batang penanda skala (lihat .supplement-ind::before);
     tanpa ini batangnya menindih huruf pertama nama baris di ponsel. */
  .indicator-cell.supplement-ind { padding-left: 9px; }
  .indicator-cell.supplement-ind button { padding: 0; font-size: inherit; }
  .indicator-cell.supplement-ind::before { left: 2px; width: 2.5px; }
  .rank-num { font-size: 12px; }
  .metric-trigger { padding: 3px 34px 3px 3px; }
  .metric-trigger b { font-size: clamp(11px, 1.4vh, 14px); font-weight: 600; }
  .metric-icon { top: 2px; right: 2px; font-size: 18px; }
  .metric-cell .rung-badge { top: 2px; right: 2px; transform: none; width: 44px; height: 20px; gap: 1px; border-radius: 4px; }
  .metric-cell .rung-badge svg { width: 14px; height: 14px; }
  .asset-line { grid-template-columns: 1fr 44px; }
  .asset-line b, .asset-line em { font-size: 10px; }
  .supplement-value b { font-size: clamp(11px, 1.4vh, 14px); }
  .supplement-value small { font-size: 8.5px; }
  .score-cell button { font-size: 17px; }
  .footer-label { padding: 5px 8px; font-size: 9px; }

  .detail-popover.is-bank { width: min(520px, calc(100vw - 24px)); }
  .popover-bank-intro { grid-template-columns: 1fr; gap: 14px; }
  .popover-bank-logo { width: auto; min-height: 90px; }
  .popover-bank h2 { font-size: 18px; }
  .popover-bank-meta { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .gbu-grid { flex-direction: column; gap: 0; }
  .gbu-column + .gbu-column { margin: 0; padding-left: 14px; border-left: 0; border-top: 1px solid #cbd5e1; }
}

/* Mode pilih BPR dari kolom matriks */
.pick-group {
  display: inline-flex;
  align-items: center;
}

/* Comot: kontrol tersegmen [✋ Comot · N] + [✓]. Kontainer .pick-toggle dapat
   permukaan floating-chip dari blok DNA toolbar; di sini strukturnya. */
.pick-toggle {
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid #e4e7ec;
}
.pick-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 11px;
  background: transparent;
  border: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .22s cubic-bezier(.4,0,.2,1), color .18s ease;
}
.pick-main:hover { color: var(--navy-deep); }
.pick-toggle.is-active .pick-main {
  background: linear-gradient(180deg, #174c8a 0%, var(--navy) 100%);
  color: #fff;
}
.pick-toggle svg { display: block; flex: none; }
.pick-hand { width: 18px; height: 18px; transition: transform .25s ease; }
.pick-toggle.is-active .pick-hand { transform: scale(1.08) rotate(-6deg); }
.pick-label { white-space: nowrap; }
.pick-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; max-width: 0; padding: 0; margin-left: -6px;
  opacity: 0; transform: scale(.7);
  background: rgba(255,255,255,.22); color: inherit;
  font-size: 11px; font-weight: 800; border-radius: 999px; overflow: hidden;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.pick-toggle.is-active .pick-count {
  min-width: 18px; max-width: 40px; padding: 1px 6px; margin-left: 0; opacity: 1; transform: scale(1);
}
/* Segmen centang: muncul (melebar) saat mode aktif; hijau bila ada pilihan,
   abu-abu (disabled) bila belum ada yang dipilih. */
.pick-apply {
  flex: none;
  width: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #aeb7c6; color: #fff; border: 0;
  cursor: pointer; overflow: hidden;
  transition: width .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.pick-apply svg { width: 16px; height: 16px; }
.pick-toggle.is-active .pick-apply { width: 36px; border-left: 1px solid rgba(255,255,255,.28); }
.pick-apply:disabled { background: #c2cad6; cursor: not-allowed; }
.pick-apply.has-picks { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); }
.pick-apply.has-picks:hover { background: linear-gradient(180deg, #16a34a 0%, #128a3d 100%); }
.pick-apply:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

.ideal-matrix .col-picked {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 100vmax rgba(8, 44, 99, .08);
  position: relative;
  z-index: 1;
}

.app-toast {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 600;
  padding: 9px 16px;
  color: #fff;
  background: #b42318;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(3, 27, 63, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
}

.app-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
  .pick-toggle { height: 36px; padding: 3px; }
  .pick-toggle .pick-label { display: none; }
  .app-toast { top: 58px; left: 12px; right: 12px; transform: translateY(-8px); text-align: center; }
  .app-toast.is-visible { transform: translateY(0); }
  .ownership-toggle { height: 36px; }
  .ownership-btn { padding: 0 10px; font-size: 12px; }
}

@media print {
  @page { size: A4 landscape; margin: 7mm; }
  body { overflow: visible; background: #fff; }
  .report-header { display: none; }
  .report-main,
  .report-main > section,
  .matrix-shell { height: auto; overflow: visible; }
  .detail-popover { display: none !important; }
  .ideal-matrix thead th,
  .dimension-cell,
  .indicator-cell,
  .footer-label { position: static; }
  .bank-head,
  .metric-cell { width: 91px; min-width: 91px; }
  .framework-head { width: 164px; min-width: 164px; }
}

/* ===================== Toolbar redesign — DESKTOP ======================
   Satu "DNA" untuk semua tombol toolbar (permukaan floating-chip + gerak
   senada selektor periode): kotak membulat 10px, hover angkat, press mengecil,
   aktif = navy-gradient. Tombol Warna saat ON pakai spektrum warna parameter.
   Di-scope ke desktop; mobile ditangani terpisah nanti. */
/* ── Header pita menengah (tablet & laptop kecil) ───────────────────────────
   Deretan tombol di header lebarnya TETAP 939px, sementara tombol Metodologi
   dipatok ke kiri dan blok periode/KR/akun (196px) dipatok ke kanan. Karena
   deretan itu dipusatkan terhadap LEBAR PENUH header — bukan terhadap ruang
   yang tersisa di antara kedua patokan — ia mulai menabrak blok kanan di bawah
   1367px dan tombol Metodologi di bawah 1047px. Di 768px akibatnya paling
   parah: tombol paling kiri terdorong ke koordinat negatif, tombol paling
   kanan terpotong, dan halaman ikut menggulir mendatar.

   Diselesaikan dengan membungkus ke baris kedua, pola yang sama dengan header
   ponsel dan sudah teruji di sana. TIDAK dipakai overflow-x pada nav: panel
   filter (.ms-panel) adalah anak nav yang berposisi absolut, dan memberi
   overflow pada induknya akan memotong panel itu secara tegak — menukar satu
   cacat dengan cacat yang lebih buruk. */
@media (min-width: 721px) and (max-width: 1366px) {
  :root { --header-height: 92px; }
  .report-header {
    height: var(--header-height);
    align-items: flex-start;
    justify-content: flex-start;
    padding: 9px 18px 6px;
  }
  /* Ikut mengalir seperti di ponsel; dipatok absolut ia akan melayang di
     tengah dua baris nav. */
  #method-toggle { position: static; transform: none; }
  .report-header-nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
    /* Jalur untuk blok periode/KR/akun yang tetap dipatok ke kanan. */
    padding-right: 206px;
  }
  /* transform: none WAJIB: aturan dasarnya top:50% + translateY(-50%), dan
     translate itu tetap ikut bila hanya top-nya diganti. Akibatnya pil
     periode, tombol KR, dan ikon akun terpotong di tepi atas (top −10px,
     terukur di 1366, 1280, 1024, dan iPad 768). */
  .report-period { top: 9px; transform: none; }
}

@media (min-width: 721px) {
  .report-header-nav .color-toggle,
  .report-header-nav .watch-toggle,
  .report-header-nav .trend-toggle {
    border-radius: 10px;
    color: #55647c;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
    border: 1px solid #d7e0ec;
    box-shadow: 0 1px 2px rgba(8,44,99,.10), inset 0 1px 0 rgba(255,255,255,.85);
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease, border-color .18s ease, color .15s ease;
  }
  /* Hover/press: angkat & mengecil (kecuali Metodologi yang transform-nya dipakai
     untuk centering vertikal — ditangani di bawah). */
  .report-header-nav .color-toggle:hover,
  .report-header-nav .watch-toggle:hover,
  .report-header-nav .trend-toggle:not(#method-toggle):hover,
  .report-header-nav .color-toggle:focus-visible,
  .report-header-nav .watch-toggle:focus-visible,
  .report-header-nav .trend-toggle:not(#method-toggle):focus-visible {
    transform: translateY(-1px);
    color: var(--navy-deep);
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
    border-color: #c1cfe2;
    box-shadow: 0 7px 16px rgba(8,44,99,.15), inset 0 1px 0 rgba(255,255,255,.95);
  }
  .report-header-nav .color-toggle:active,
  .report-header-nav .watch-toggle:active,
  .report-header-nav .trend-toggle:not(#method-toggle):active {
    transform: translateY(0) scale(.93);
    box-shadow: 0 2px 5px rgba(8,44,99,.14);
    transition-duration: .09s;
  }
  .report-header-nav .color-toggle:focus-visible,
  .report-header-nav .watch-toggle:focus-visible,
  .report-header-nav .trend-toggle:not(#method-toggle):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8,44,99,.20), 0 7px 16px rgba(8,44,99,.15);
  }
  /* Aktif seragam = navy-gradient (Tren, Sinyal, Kaca pembesar, Layar penuh, Pantau). */
  .report-header-nav .trend-toggle.is-active,
  .report-header-nav .watch-toggle[aria-expanded="true"],
  .report-header-nav .watch-toggle.is-active {
    color: #fff;
    background: linear-gradient(180deg, #174c8a 0%, var(--navy) 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(8,44,99,.28), inset 0 1px 0 rgba(255,255,255,.20);
  }
  .report-header-nav .trend-toggle.is-active:hover,
  .report-header-nav .watch-toggle[aria-expanded="true"]:hover,
  .report-header-nav .watch-toggle.is-active:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(8,44,99,.32), inset 0 1px 0 rgba(255,255,255,.24);
    color: #fff;
  }
  /* Tombol Warna ON = spektrum warna parameter (maroon→merah→oranye→kuning→hijau). */
  .report-header-nav .color-toggle[aria-checked="true"] {
    color: #fff;
    background: linear-gradient(120deg, #7c1d12 0%, #d63a2a 24%, #ef9f1a 50%, #f2d13a 68%, #22aa40 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(8,44,99,.20), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .report-header-nav .color-toggle[aria-checked="true"]:hover {
    transform: translateY(-1px);
    opacity: 1;
    box-shadow: 0 10px 22px rgba(124,29,18,.24), inset 0 1px 0 rgba(255,255,255,.3);
  }
  /* Metodologi: DNA sama; transform tetap untuk centering (-50%). */
  #method-toggle:hover { transform: translateY(calc(-50% - 1px)); border-color: #c1cfe2; box-shadow: 0 7px 16px rgba(8,44,99,.15), inset 0 1px 0 rgba(255,255,255,.95); }
  #method-toggle:active { transform: translateY(-50%) scale(.96); transition-duration: .09s; }
  #method-toggle.is-expanded { background: linear-gradient(180deg,#ffffff,#eef3f9); border-color: #b9cbe4; }

  /* Sinyal Red-Flag: ikon bendera MERAH saat off, tombol MERAH saat aktif. */
  .report-header-nav .signal-toggle { color: #d63a2a; }
  .report-header-nav .signal-toggle:hover,
  .report-header-nav .signal-toggle:focus-visible { color: #b42318; }
  .report-header-nav .signal-toggle.is-active,
  .report-header-nav .signal-toggle.is-active:hover {
    color: #fff;
    background: linear-gradient(180deg, #e5484d 0%, #d21f32 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(210,31,50,.32), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .report-header-nav .signal-toggle.is-active:hover {
    box-shadow: 0 10px 22px rgba(210,31,50,.38), inset 0 1px 0 rgba(255,255,255,.26);
  }
  .report-header-nav .signal-toggle.is-active:focus-visible {
    box-shadow: 0 0 0 3px rgba(210,31,50,.28), 0 7px 16px rgba(210,31,50,.32);
  }

  /* Kontrol filter senada: permukaan floating-chip + hover angkat. */
  .filter-group .ms-btn,
  .filter-group .ownership-toggle,
  .filter-group .pick-toggle {
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
    border: 1px solid #d7e0ec;
    box-shadow: 0 1px 2px rgba(8,44,99,.08), inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  .filter-group .ms-btn:hover,
  .filter-group .ownership-toggle:hover,
  .filter-group .pick-toggle:not(.is-active):not(.is-oke):hover {
    transform: translateY(-1px);
    border-color: #bfcde0;
    box-shadow: 0 7px 16px rgba(8,44,99,.14), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .filter-group .ms-btn:active,
  .filter-group .pick-toggle:active { transform: translateY(0) scale(.98); transition-duration: .09s; }
  .filter-group .ms.is-active .ms-btn {
    background: linear-gradient(180deg,#eef5ff 0%,#e2ecfb 100%);
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy), 0 6px 14px rgba(8,44,99,.14);
  }

  /* Divider antar grup: garis lembut (fade atas-bawah). */
  .report-header-nav .nav-divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: linear-gradient(180deg, transparent, #d3dcea 22%, #d3dcea 78%, transparent);
  }
}

/* ── Petunjuk navigasi sekali tampil (desktop) ── */
.nav-hint { position: fixed; left: 50%; bottom: calc(26px + var(--iklan-h)); transform: translateX(-50%); z-index: 420; display: flex; align-items: center; gap: 16px; max-width: min(92vw, 660px); padding: 13px 17px; background: var(--navy-deep, #031b3f); color: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(3, 27, 63, .45); animation: nav-hint-in .45s cubic-bezier(.2, .9, .3, 1.2); }
/* pointer-events: none WAJIB di sini. Kartunya baru benar-benar dibuang 380ms
   sesudah "Mengerti" ditekan (menunggu animasi pergi selesai), dan selama
   jeda itu ia sudah tak terlihat tetapi MASIH menelan ketukan di pita
   selebar ~198px di dasar layar. Gejalanya: baru menutup tips, ketukan
   berikutnya ke matriks tidak bereaksi sama sekali — dan tidak ada yang
   menghubungkannya dengan tips yang barusan ditutup. */
.nav-hint.is-leaving { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(14px); transition: opacity .35s ease, transform .35s ease; }
.nav-hint-body { display: grid; gap: 3px; font-size: 12px; line-height: 1.5; text-align: left; }
.nav-hint-body b { font-size: 12.5px; }
.nav-hint-body em { font-style: normal; color: rgba(255, 255, 255, .6); }
.nav-hint kbd { display: inline-block; padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); border-bottom-width: 2px; font-family: inherit; font-size: 11px; font-weight: 700; }
.nav-hint-ok { flex: none; padding: 8px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--navy-deep, #031b3f); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .15s ease; }
.nav-hint-ok:hover { background: #e8eef7; }
@keyframes nav-hint-in { from { opacity: 0; transform: translateX(-50%) translateY(18px); } }
/* Di ponsel tips ini melebar penuh dan isinya bertumpuk. Versi desktop yang
   sebaris menjepit teksnya jadi kolom selebar dua kata sampai menutupi matriks.
   Animasinya juga dipisah karena versi desktop memakai translateX(-50%) untuk
   memusatkan diri, yang tidak berlaku begitu kiri/kanan dipatok. */
@media (max-width: 720px) {
  .nav-hint {
    left: 12px;
    right: 12px;
    /* Ditaruh di ATAS, bukan di bawah: isinya menunjuk tombol "Ruang Periksa"
       yang duduk di dasar layar, dan menutupi tombol yang sedang dijelaskan
       adalah cara tercepat membuat petunjuk jadi membingungkan. */
    top: calc(var(--header-height) + 10px);
    bottom: auto;
    transform: none;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 14px 16px;
    animation-name: nav-hint-in-mobile;
  }
  .nav-hint.is-leaving { transform: translateY(14px); }
  .nav-hint-body { font-size: 12.5px; }
  .nav-hint-ok { width: 100%; padding: 11px 16px; font-size: 13px; }
}
@keyframes nav-hint-in-mobile { from { opacity: 0; transform: translateY(18px); } }

/* ── Pemilihan Kantor Regional (KR) ──────────────────────────────────────── */
.kr-switch {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; margin-left: 10px;
  border: 1px solid var(--navy); border-radius: 999px;
  background: linear-gradient(180deg, #0a367a, var(--navy-deep));
  color: #fff; box-shadow: 0 2px 8px rgba(6,24,58,.22);
  font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kr-switch:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(6,24,58,.3); }
.kr-switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.kr-switch svg { flex: 0 0 auto; opacity: .95; }
.kr-switch-label { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
/* Mode Terbaik: aksen emas supaya beda dari mode wilayah. */
body.mode-terbaik .kr-switch { border-color: #d4a418; background: linear-gradient(180deg, #12457f, var(--navy-deep)); }
body.mode-terbaik .kr-switch-label { color: #ffd769; }

.kr-picker {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px; padding-top: 84px;
  background:
    radial-gradient(120% 120% at 50% 0%, #0a327099 0%, #031b3f 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/26px 26px,
    #031b3f;
  backdrop-filter: blur(3px);
  overflow: hidden;
}
.kr-picker[hidden] { display: none; }
.kr-picker::before, .kr-picker::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.kr-picker::before { width: 420px; height: 420px; background: #2f66c4; opacity: .32; top: -120px; left: -110px; }
.kr-picker::after { width: 380px; height: 380px; background: #1f8f66; opacity: .2; bottom: -140px; right: -110px; }
.kr-picker-box {
  position: relative; overflow: hidden; z-index: 1;
  width: min(780px, 100%); text-align: center; color: #eaf1fb;
  background: linear-gradient(180deg, #0c2f66, #071f45);
  border: 1px solid #1c3b64; border-radius: 20px; padding: 30px 28px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.kr-picker-map { position: absolute; top: 0; left: 0; width: 100%; height: 130px; opacity: .16; z-index: 0; pointer-events: none; }
.kr-picker-inner { position: relative; z-index: 1; }
.kr-picker-logo { height: 36px; margin-bottom: 12px; filter: brightness(0) invert(1); }
.kr-picker-box h1 { margin: 0 0 7px; font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.kr-picker-lead { margin: 0 auto 18px; max-width: 50ch; font-size: 13px; line-height: 1.5; color: #a9bfe0; }
.kr-picker-lead .n { color: #eaf1fb; font-weight: 800; }
.kr-picker-error { color: #ffb4a8; font-size: 13px; margin: -6px 0 16px; }
.kr-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.kr-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 14px 15px 12px; border-radius: 14px; color: #eaf1fb;
  border: 1px solid #244a7d; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .2s ease;
  animation: krCardIn .38s cubic-bezier(.16,.84,.44,1) both;
}
button.kr-card { cursor: pointer; }
button.kr-card:hover, button.kr-card:focus-visible {
  transform: translateY(-3px); border-color: #4f83d6;
  box-shadow: 0 14px 30px rgba(3,16,40,.5), 0 0 22px rgba(79,131,214,.35);
  background: linear-gradient(180deg, rgba(79,131,214,.16), rgba(255,255,255,.02));
}
.kr-cardnum { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7fa6df; }
.kr-cardcity { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-top: 1px; min-width: 0; overflow-wrap: break-word; }
.kr-cardsub { font-size: 11.5px; color: #a9bfe0; line-height: 1.35; margin-top: 3px; min-height: 30px; }
.kr-cardfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.kr-pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(53,210,154,.16); color: #35d29a; border: 1px solid rgba(53,210,154,.32); }
.kr-pill.is-soon { background: rgba(255,255,255,.06); color: #9fb4d6; border-color: #244a7d; }
.kr-go { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #244a7d; color: #bcd2f4; font-size: 13px;
  transition: transform .2s, background .2s, border-color .2s, color .2s; }
button.kr-card:hover .kr-go { background: #2f66c4; border-color: #2f66c4; color: #fff; transform: translateX(2px); }
.kr-card.is-soon { opacity: .5; cursor: not-allowed; }
.kr-card.is-current { outline: 2px solid #4f8ff0; outline-offset: 1px; }
.kr-card.is-loading { pointer-events: none; }
.kr-card.is-loading .kr-go { color: transparent; }
.kr-card.is-loading .kr-go::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: krSpin .7s linear infinite;
}
.kr-picker-grid.is-busy .kr-card:not(.is-loading) { opacity: .4; pointer-events: none; }
.kr-card-top {
  position: relative; overflow: hidden;
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px;
  padding: 14px 20px; border-color: rgba(242,195,78,.5);
  background: linear-gradient(100deg, rgba(242,195,78,.15), rgba(255,255,255,.02) 62%);
}
.kr-card-top::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80px; width: 60px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: krShine 4.5s ease-in-out infinite; pointer-events: none;
}
.kr-card-top .kt-badge { font-size: 21px; display: inline-block; animation: krTopPulse 2.6s ease-in-out infinite; }
.kr-card-top .kt-text { flex: 1; display: flex; flex-direction: column; }
.kr-card-top .kr-cardcity { color: #ffd769; font-size: 16px; }
.kr-card-top .kr-cardsub { min-height: 0; margin-top: 1px; }
.kr-card-top .kr-go { border-color: rgba(242,195,78,.5); color: #f2c34e; }
button.kr-card-top:hover { transform: translateY(-3px); border-color: #f2c34e; }
button.kr-card-top:hover .kr-go { background: #f2c34e; border-color: #f2c34e; color: #3a2c05; }
@keyframes krCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes krSpin { to { transform: rotate(360deg); } }
@keyframes krTopPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes krShine { 0% { left: -80px; } 35%, 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .kr-card { animation: none; }
  .kr-card-top .kt-badge, .kr-card-top::after { animation: none; }
}
@media (max-width: 640px) {
  .kr-picker-grid { grid-template-columns: 1fr 1fr; }
  .kr-card-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kr-cardsub { min-height: 0; }
}
body.kr-loading { cursor: progress; }
.report-period.period-single .period-select,
.report-period.period-single .period-timeline { opacity: .55; pointer-events: none; }

/* ── Mode "BPR IDEAL Terbaik" ─────────────────────────────────────────────── */
/* Toolbar switcher kelas — selalu highlight (bukan filter biasa). */
.ms-classswitch .ms-btn {
  border-color: var(--navy);
  background: linear-gradient(180deg, #f2f7ff, #e9f1fd);
  box-shadow: inset 0 0 0 1px var(--navy), 0 1px 2px rgba(3,27,63,.06);
}
.ms-classswitch .ms-btn-label { color: var(--navy); }
.ms-classswitch .ms-btn-value { color: var(--navy-deep); }
.ms-classswitch .ms-btn::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green, #147d58); box-shadow: 0 0 0 3px rgba(20,125,88,.16);
}
.ms-classswitch .ms-btn:hover { background: #e2eefc; }

.kr-picker-doclink {
  display: inline-block; margin-top: 2px; color: #7fb3ff; font-weight: 700;
  border-bottom: 1px solid rgba(127,179,255,.4);
}
.kr-picker-doclink:hover { color: #a9ccff; border-bottom-color: currentColor; }
.kr-picker-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.kr-picker-alt {
  background: none; border: 1px solid #2a4c7e; color: #bcd2f4; cursor: pointer;
  font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kr-picker-alt:hover { border-color: #4f83d6; color: #eaf1fb; background: rgba(79,131,214,.12); }

/* ── Picker kelas (mode Terbaik) — NAVIGASI murni ──────────────────────────
   7 baris ala leaderboard: nomor kelas | rentang aset | jumlah lolos | panah.
   Satu kolom = urutan kelas terbaca sekali pindai; tanpa intro/marketing
   (konteksnya sudah dibaca di halaman sebelumnya). Kelas 1 beraksen emas
   tipis. Watermark TERBAIK samar menjaga rasa premium. */
/* Header picker = SALINAN PERSIS nav landing dalam state on-dark (Section 2
   "Siapa juaranya?"): bar #071f45 setinggi 60px, logo IDEALBPR negatif
   220x38, tombol outline "Pelajari IDEAL" dgn metrik .btn yang sama —
   supaya perpindahan halaman terasa seamless (header seolah tak berpindah,
   dikunci pula oleh view-transition-name yang sama: site-nav). */
.kc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  background: #071f45; border-bottom: 1px solid rgba(255,255,255,.08);
}
.kc-nav-inner {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.kc-brand { display: block; width: 220px; height: 38px; flex: 0 0 auto; }
.kc-brand img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform: translateY(3px); filter: brightness(0) invert(1);
}
.kc-navlink {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 10px 15px; border-radius: 999px; font-size: 13px; line-height: 1.6; font-weight: 750;
  color: #fff; text-decoration: none; background: transparent; border: 1px solid rgba(255,255,255,.4);
  transition: .2s ease;
}
.kc-navlink:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
@media (max-width: 640px) {
  .kc-brand { width: 175px; height: 30px; }
  .kc-navlink { padding: 10px 16px; font-size: 13px; }
}

/* Sambungan transisi geser-kiri dari landing: box picker masuk dari kanan
   di atas latar navy yang sama, header fixed diam — terbaca satu gerakan
   menerus. (Cross-document View Transitions sengaja tidak dipakai — di
   Chrome tertentu render halaman baru tersuppress permanen.) */
.kr-picker-box { animation: kcBoxIn .34s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes kcBoxIn { from { transform: translateX(52px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kr-picker-box { animation: none; } }

.kr-picker-box-class { width: min(560px, 100%); padding: 28px 30px 24px; }
.kc-wm {
  position: absolute; right: -22px; bottom: -30px; z-index: 0; pointer-events: none; user-select: none;
  font-size: 120px; font-weight: 900; letter-spacing: -.05em; line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(242,195,78,.08); transform: rotate(-8deg);
}
.kc-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #f2c34e;
  background: rgba(242,195,78,.1); border: 1px solid rgba(242,195,78,.35); margin-bottom: 10px;
}
.kc-title { margin: 0 0 16px; font-size: 23px; font-weight: 900; letter-spacing: -.01em; }
.kc-list { display: flex; flex-direction: column; gap: 8px; }
.kc-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 26px;
  align-items: center; gap: 12px; padding: 11px 13px; text-align: left;
}
.kc-rownum {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  font-size: 15px; font-weight: 900; color: #9fc0f2;
  background: rgba(79,131,214,.14); border: 1px solid rgba(79,131,214,.3);
}
.kc-rowlabel { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-row .kr-pill { justify-self: end; }
/* Aksen emas HANYA saat hover/fokus (tak ada baris yang "permanen terpilih"). */
button.kc-row:hover, button.kc-row:focus-visible {
  transform: translateX(4px); border-color: rgba(242,195,78,.5);
  background: linear-gradient(100deg, rgba(242,195,78,.13), rgba(255,255,255,.02) 65%);
}
button.kc-row:hover .kc-rownum, button.kc-row:focus-visible .kc-rownum { color: #ffd769; background: rgba(242,195,78,.14); border-color: rgba(242,195,78,.4); }
button.kc-row:hover .kc-rowlabel, button.kc-row:focus-visible .kc-rowlabel { color: #ffd769; }
button.kc-row:hover .kr-go, button.kc-row:focus-visible .kr-go { background: #f2c34e; border-color: #f2c34e; color: #3a2c05; }
@media (max-width: 640px) {
  .kr-picker-box-class { padding: 22px 18px 18px; }
  .kc-row { gap: 9px; padding: 10px 11px; }
  .kc-rowlabel { font-size: 13.5px; white-space: normal; }
}

/* --- Paywall (Tahap 1: gating berlangganan) ----------------------------- */
.paywall {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; padding: 24px;
  overflow-y: auto;
  /* Latar: cuplikan matriks IDEAL asli (sudah diburamkan+digelapkan saat
     dibuat, lihat _dev/screenshots) — kasih rasa "ini yang ada di baliknya",
     tanpa membocorkan angka/nama bank yang terbaca. */
  background:
    radial-gradient(120% 120% at 50% 0%, #0a327099 0%, #031b3fcc 60%, #031b3fee 100%),
    url("../matrix-preview-bg.jpg?v=2") center / cover no-repeat,
    #031b3f;
  backdrop-filter: blur(3px);
}
.paywall[hidden] { display: none; }
.paywall-box {
  width: min(560px, 100%); margin: auto; text-align: center; color: #eaf1fb;
  background: linear-gradient(180deg, #0c2f66, #071f45);
  border: 1px solid #1c3b64; border-radius: 20px; padding: 28px 26px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.paywall-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #f2c34e;
  background: rgba(242,195,78,.1); border: 1px solid rgba(242,195,78,.35); margin-bottom: 12px;
}
.paywall-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; }
.paywall-teaser-table {
  width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; margin-bottom: 18px;
  background: rgba(255,255,255,.03); border-radius: 10px; overflow: hidden;
}
.paywall-teaser-table th, .paywall-teaser-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.paywall-teaser-table th { color: #9fc0f2; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.paywall-cta { display: inline-flex; }
.paywall-google-btn { display: flex; justify-content: center; min-height: 44px; }
.paywall-google-btn.is-busy { opacity: .5; pointer-events: none; }

/* Pane upgrade (setelah login): benefit + pilih paket + beli langsung */
.paywall-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-bottom: 14px; font-size: 11.5px; color: #cddcf2; }
.paywall-benefits span::before { content: "\2713\00a0"; color: #f2c34e; font-weight: 800; }
.paywall-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; text-align: left; }
.paywall-plan {
  position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: 13px 14px 11px; border-radius: 12px; color: #eaf1fb;
  border: 2px solid #244a7d; background: rgba(255,255,255,.04);
  transition: border-color .15s ease, background .15s ease;
}
.paywall-plan:hover { border-color: #3c6aa8; }
.paywall-plan.is-picked { border-color: #f2c34e; background: rgba(242,195,78,.09); }
.paywall-plan-badge { position: absolute; top: -10px; left: 10px; background: #f2c34e; color: #3a2c05; font-size: 9.5px; font-weight: 900; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.paywall-plan-name { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #9fc0f2; margin-top: 2px; }
.paywall-plan-price { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.paywall-plan-price i { font-style: normal; font-size: 11px; font-weight: 600; color: #a9bfe0; }
.paywall-plan-sub { font-size: 10.5px; color: #8fa7cc; }
.paywall-buy {
  width: 100%; border: none; cursor: pointer; border-radius: 12px;
  background: #e51f2f; color: #fff; font-weight: 800; font-size: 14.5px; font-family: inherit;
  padding: 13px 18px; box-shadow: 0 12px 26px -8px rgba(229,31,47,.55);
  transition: transform .12s ease, background .18s ease;
}
.paywall-buy:hover { background: #c81726; }
.paywall-buy:active { transform: scale(.98); }
.paywall-buy[disabled] { opacity: .6; cursor: default; }
.paywall-error { color: #ffb4a8; font-size: 12px; margin: 8px 0 0; }
.paywall-note { font-size: 11px; color: #8fa7cc; margin: 8px 0 0; }
/* Tutup & "jelajahi dulu" adalah satu-satunya jalan keluar dari sheet beli —
   dulu masing-masing hanya setinggi 30px dan 19px, di bawah ambang sentuh 40px,
   sehingga di ponsel orang menekan berkali-kali untuk keluar. */
.paywall-close {
  position: absolute; top: 6px; right: 8px; border: none; background: transparent;
  color: #8fa7cc; font-size: 22px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
}
.paywall-close:hover { color: #fff; }
.paywall-box { position: relative; }
.paywall-context { margin: -6px 0 12px; font-size: 12.5px; font-weight: 700; color: #f2c34e; }
.paywall-later {
  margin-top: 10px; border: none; background: transparent; cursor: pointer;
  min-height: 44px; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: #8fa7cc; text-decoration: underline; text-underline-offset: 3px;
}
.paywall-later:hover { color: #cddcf2; }

/* --- Matriks versi gratis (teaser hidup, sel rincian terkunci) ---------- */
.free-matrix { max-width: 1080px; margin: 18px auto 84px; padding: 0 16px; }
.fm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.fm-title { display: flex; flex-direction: column; }
.fm-title strong { font-size: 17px; font-weight: 900; color: var(--navy); letter-spacing: -.01em; }
.fm-title span { font-size: 12px; color: var(--muted); }
/* Nama KR memakai kota kedudukan kantor OJK, bukan cakupan wilayahnya — tanpa
   baris ini "KR1 · Jakarta" terbaca janggal saat isinya BPR Lampung/Kalimantan. */
.fm-prov { font-weight: 600; color: #5a6d88; }
.fm-search {
  margin-left: auto; width: min(300px, 100%); padding: 9px 13px; font: inherit; font-size: 13.5px;
  border: 1.5px solid #cbd6e4; border-radius: 10px; background: #fff; color: var(--ink);
}
.fm-search:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(8,44,99,.12); }
.fm-scroll { overflow: auto; max-height: calc(100dvh - 200px); border: 1px solid #dde4ee; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(9,35,74,.08); }
.fm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.fm-table thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 10px 12px;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.fm-table tbody td { padding: 9px 12px; border-bottom: 1px solid #eef2f8; }
.fm-table tbody tr:nth-child(even) td { background: #f8fafd; }
.fm-rank { color: var(--muted); font-weight: 700; width: 40px; }
.fm-bank strong { display: block; font-weight: 700; color: var(--ink); }
.fm-bank span { display: block; font-size: 11px; color: var(--muted); }
.fm-score { font-weight: 900; font-size: 14.5px; color: var(--navy); }
/* Enam kolom terkunci x ratusan baris = ~900 sel placeholder. Versi lama
   mengisinya dengan pil abu bergaris yang cukup gelap, sehingga separuh kanan
   tabel terbaca seperti konten yang gagal dimuat, bukan konten yang sengaja
   dikunci. Pilnya dibuat jauh lebih tenang dan kolomnya diberi rona tipis
   supaya terbaca sebagai satu blok "bagian langganan" yang utuh. */
.fm-lock, .fm-th-lock { cursor: pointer; }
.fm-th-lock { user-select: none; }
.fm-th-lock::after { content: " \1F512"; font-size: 9px; }
.fm-table tbody td.fm-lock { background: #fbfcfe; }
.fm-table tbody tr:nth-child(even) td.fm-lock { background: #f4f7fb; }
.fm-lockbar {
  display: inline-block; width: 34px; height: 6px; border-radius: 4px; vertical-align: middle;
  background: #e3eaf3;
}
.fm-lock:hover { background: rgba(242,195,78,.16) !important; }
.fm-lock:hover .fm-lockbar { background: #e3b84a; }
/* Mode gratis: sembunyikan kontrol periode (riwayat = fitur langganan);
   tombol KR tetap tampil & berfungsi. */
body.free-mode #period-timeline, body.free-mode #period-select { display: none; }

.free-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #0c2f66, #071f45);
  border-top: 1px solid #1c3b64; box-shadow: 0 -12px 30px rgba(3,27,63,.35);
}
.free-bar-text { font-size: 12.5px; color: #cddcf2; text-align: center; }
.free-bar-text strong { color: #f2c34e; }
.free-bar-btn {
  border: none; cursor: pointer; border-radius: 999px; padding: 0 18px; min-height: 44px;
  background: #e51f2f; color: #fff; font-weight: 800; font-size: 13px; font-family: inherit;
  box-shadow: 0 8px 20px -6px rgba(229,31,47,.6); transition: transform .12s ease, background .18s ease;
}
.free-bar-btn:hover { background: #c81726; }
.free-bar-btn:active { transform: scale(.97); }

/* Di ponsel bilah ini membungkus jadi dua baris dan tumbuh sampai 104px —
   bersama header tabel yang lengket, 18% layar hilang permanen padahal isi
   utamanya justru tabel. Kalimat ajakan diringkas ke satu baris pendek dan
   harga dipindah ke tombol, sehingga tinggi bilah kembali ~60px. */
.free-bar-price { display: none; }   /* di desktop harga sudah ada di kalimat */
@media (max-width: 640px) {
  .free-bar { flex-wrap: nowrap; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .free-bar-text { font-size: 12px; text-align: left; line-height: 1.3; }
  .free-bar-long { display: none; }
  .free-bar-price { display: inline; font-weight: 700; opacity: .9; }
  .free-bar-btn { flex: none; padding: 0 14px; min-height: 40px; font-size: 12.5px; }

  /* Tabel gratis dipatok min-width 760px, jadi di layar 390px enam kolom
     terkunci berada jauh di luar layar — tidak pernah terlihat, tapi tetap
     merebut lebar sehingga kolom Skor IDEAL ikut terdorong keluar dan
     angkanya terpotong. Kolom terkunci disembunyikan dan patokan lebar
     dilepas supaya tiga kolom yang memang berguna (#, BPR, Skor) muat utuh
     tanpa geser mendatar. Ajakan berlangganan tetap ada lewat .free-bar yang
     selalu tampak, bukan lewat kolom yang tak terjangkau. */
  .fm-table { min-width: 0; }
  .fm-table .fm-th-lock, .fm-table td.fm-lock { display: none; }
  .fm-table tbody td, .fm-table thead th { padding-left: 10px; padding-right: 10px; }
}


/* ═══ Badge predikat di baris skor (C2) ═══════════════════════════════════
   Matriks diurutkan predikat-dulu-baru-skor, tapi predikatnya sendiri dulu
   tidak tampil — pembaca melihat #5 = 91,2 di atas bank berskor 93,0 di #20
   dan menyangka urutannya rusak. Chip menempel di samping angka komposit;
   bank yang di-cap gerbang diberi tepi putus-putus + ⚑. */
.score-cell button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.score-pk {
  flex: none; font-size: 9.5px; font-weight: 900; letter-spacing: .02em;
  padding: 3px 5px; border-radius: 5px; line-height: 1; white-space: nowrap;
}
.score-pk i { font-style: normal; margin-left: 2px; font-size: 8px; }
.score-pk.is-gated { outline: 1.5px dashed rgba(11,37,69,.55); outline-offset: 1px; }
@media (max-width: 720px) {
  .score-cell button { gap: 4px; }
  /* 10px, bukan 8,5px. Predikat adalah kesimpulan seluruh matriks; ia sempat
     jadi teks terkecil di layar padahal paling dicari. Baris skor setinggi
     42px, jadi tambahan 1,5px tidak menggeser tinggi baris indikator. */
  .score-pk { font-size: 10px; padding: 2px 5px; }
  .score-pk i { font-size: 9.5px; }
}

/* ═══ Kolom predikat di tabel gratis (C1) ═════════════════════════════════ */
.fm-pk { width: 86px; }
.fm-pk-badge {
  /* 11px adalah lantai keterbacaan; di bawah itu lencana predikat berubah jadi
     tekstur, dan di versi gratis lencana inilah satu-satunya vonis yang dibawa
     pulang pembaca. */
  display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .02em;
  padding: 4px 7px; border-radius: 6px; line-height: 1; white-space: nowrap;
}
.fm-pk-badge i { font-style: normal; margin-left: 3px; font-size: 11px; }
.fm-pk-badge.is-gated { outline: 1.5px dashed rgba(11,37,69,.45); outline-offset: 1px; }
.fm-legend { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.fm-legend-flag { font-weight: 800; color: #9a6b13; }

/* ═══ Tombol ekspor CSV (B5) ══════════════════════════════════════════════
   Ponsel: baris ikon sudah penuh (lihat memori header ponsel rapuh), dan
   mengunduh CSV memang pekerjaan meja. Dulu disembunyikan sampai 1560px
   karena di 1366×768 tombol filter "Swasta" tertutup timeline periode; sejak
   header 721–1366px pecah dua baris (blok di atas), ruangnya ada lagi, dan
   menyembunyikan fitur langganan dari hampir semua laptop terlalu mahal.
   Diverifikasi hit-test di 1280, 1366, 1440, 1536. */
@media (max-width: 720px) { .export-toggle { display: none; } }


/* ═══ Menu akun (B6) ══════════════════════════════════════════════════════ */
.akun-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 6px; border-radius: 9px;
  border: 1px solid #cbd6e4; background: #fff; color: var(--navy); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.akun-btn:hover, .akun-btn[aria-expanded="true"] { background: #eef3fa; border-color: #9fb4d1; color: var(--navy-deep); }
@media (max-width: 720px) {
  /* Ponsel: zona kanan baris atas (periode + KR) sudah dirampingkan pas 152px
     — menyisipkan akun di sana memotong pill periode jadi "20". Tombol akun
     turun ke ujung kanan BARIS KEDUA (baris filter), yang di paid masih
     menyisakan ~70px dan di free kosong sama sekali. Hit-test 390px: filter
     row 56–94, tombol 52–92 — sejajar, tidak menimpa dropdown FILTER. */
  /* Offset parent = .report-period (absolute, tinggi 40 di t=6) — maka top:48
     mendaratkan tombol di 54..94, persis sejajar baris filter (56..94) dan
     tetap di dalam header (b=96). Diverifikasi hit-test 390px. */
  .akun-btn { position: absolute; top: 48px; right: 0; width: 40px; height: 40px; margin: 0; z-index: 5; border-color: #cbd6e4; background: #fff; color: var(--navy); }
  .akun-btn:hover, .akun-btn[aria-expanded="true"] { background: #eef3fa; border-color: #9fb4d1; color: var(--navy-deep); }
}
.akun-error { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #b42318; }
.akun-menu {
  position: fixed; top: calc(var(--header-height, 56px) + 6px); right: 10px; z-index: 1200;
  width: min(320px, calc(100vw - 20px)); padding: 14px 16px 12px;
  background: #fff; border: 1px solid #d8e1ee; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(3,27,63,.28);
}
.akun-kicker { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.akun-email { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--navy-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun-line { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: #3c4c63; }
.akun-line b { color: var(--navy-deep); }
.akun-note { margin: 6px 0 10px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.akun-act {
  display: block; width: 100%; margin: 0 0 8px; padding: 9px 12px; font: inherit; font-size: 12.5px;
  font-weight: 700; text-align: center; border-radius: 9px; cursor: pointer;
  border: 1.5px solid #cbd6e4; background: #fff; color: var(--navy-deep);
  transition: background .15s ease, border-color .15s ease;
}
.akun-act:hover { background: #f2f6fc; border-color: #9fb4d1; }
.akun-act:disabled { opacity: .6; cursor: default; }
.akun-act-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.akun-act-primary:hover { background: #0a3271; border-color: #0a3271; }
.akun-act-danger { border-color: #e5b9b9; color: #8c2f2f; }
.akun-act-danger:hover { background: #fdf4f4; border-color: #d99a9a; }
.akun-google { display: grid; place-items: center; min-height: 44px; margin-bottom: 6px; }

/* Tautan silang ke laporan sekali-jadi di sheet paywall (D2) — kotak
   paywall berlatar navy gelap, jadi warnanya dari palet terang. */
.paywall-once { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: #8fa7cc; text-align: center; }
.paywall-once a { color: #f2c34e; font-weight: 700; }

/* Perampingan header laptop sempit — HARUS di ujung file: rule-rule dasarnya
   ada di atas dengan spesifisitas sama, yang terakhir yang menang.
   Di 1366×768, tombol akun (baru) membuat 40% kanan tombol filter "Swasta"
   tertutup zona periode. Tiga reclaim kecil (diverifikasi hit-test 5 titik):
   akun 28px, gap filter 8→5, padding tombol filter dipangkas 2-3px. */
@media (max-width: 1500px) and (min-width: 721px) {
  .akun-btn { width: 28px; height: 28px; margin-left: 4px; border-radius: 7px; }
  .akun-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 1420px) and (min-width: 721px) {
  .filter-group { gap: 5px; }
  .filter-group .ms-btn { padding: 0 8px; gap: 5px; }
  .filter-group .ownership-btn { padding: 0 9px; }
}

/* ── Gelembung chat (chat.js) di halaman laporan ─────────────────────────
   chat.js memasang gayanya sendiri lewat <style> yang disisipkan belakangan,
   jadi aturan di sini dinaikkan spesifisitasnya (html .ic-fab).
   Ponsel: gelembung berlabel "Tanya kami" selebar 136px menimpa sakelar
   Ruang Periksa yang dipatok di tengah dasar layar (terukur di 360–430px);
   labelnya dibuang, tinggal ikon 46px yang duduk di kanan sakelar. Ruang di
   kanan tabel selebar gelembung ditambahkan lewat fitBankColumns (marginRight)
   supaya kolom terakhir bisa digulir lepas darinya di semua ukuran layar. */
@media (max-width: 720px) {
  html .ic-fab { padding: 13px; gap: 0; }
  html .ic-fab > span:not(.ic-dot) { display: none; }
}

/* ── Mode intip ──────────────────────────────────────────────────────────────
   Matriks penuh dengan tiga kolom teratas terbuka dan sisanya diburamkan.
   Lihat enterPreview() di laporan.js untuk alasan tiap keputusannya.

   Yang penting dari blok ini: yang diburamkan adalah ISI sel (.ip-fake),
   BUKAN selnya. Latar warna sel tetap tajam, karena warnalah yang membawa
   tekstur matriks aslinya — sebaran merah-ke-hijau yang jadi tanda pengenal
   produk ini. Memburamkan seluruh sel akan mencampur warna antar-kolom dan
   yang tersisa cuma bubur abu-abu.
   Dan yang diburamkan itu batang kosong, bukan angka: tidak ada satu pun
   angka palsu di DOM, jadi blur yang gagal render pun tidak pernah bisa
   menampilkan angka keliru tentang bank sungguhan. */
.free-bar-peek {
  border: 1px solid rgba(255,255,255,.34); cursor: pointer; border-radius: 999px;
  padding: 0 16px; min-height: 44px; background: transparent; color: #fff;
  font-weight: 700; font-size: 13px; font-family: inherit;
  transition: background .18s ease, border-color .18s ease;
}
.free-bar-peek:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }

.ip-lock { cursor: pointer; background: #fff; }
/* Bentuknya meniru sel asli: angka di kiri, lencana 12-rung di kanan. */
.ip-fake {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; width: 100%; padding: 7px 9px;
  filter: blur(3.2px); opacity: .9; pointer-events: none;
  /* Tanpa ini Safari kadang melewatkan filter pada anak elemen tabel. */
  will-change: filter;
}
.ip-fake .ip-num { display: block; height: 10px; border-radius: 3px; background: #26374f; opacity: .55; }
.ip-fake .ip-badge { display: block; height: 17px; border-radius: 5px; opacity: .92; background: var(--analysis-bg, #dfe7f1); }
/* Mode "warna penuh": seluruh sel berwarna dan lencananya lebur, sama seperti
   sel asli (lihat body.view-full .metric-cell di atas). Batang angkanya pakai
   tinta kontras supaya tetap terbaca sebagai teks yang tidak fokus. */
body.view-full .ip-lock { background: var(--analysis-bg); }
body.view-full .ip-lock .ip-badge { display: none; }
body.view-full .ip-lock .ip-num { background: var(--analysis-ink, #1b2c44); opacity: .5; width: 62% !important; }
body.view-full .ip-lock .ip-fake { justify-content: center; }
.score-cell.ip-lock .ip-fake-score .ip-num { height: 15px; opacity: .6; }
.score-cell.ip-lock .ip-fake-score .ip-badge { height: 15px; width: 30%; }

.ip-head .ip-fake { flex-direction: column; align-items: stretch; gap: 5px; }
.ip-head .ip-fake-head { padding: 8px 10px 2px; }
.ip-head .ip-fake-head i { display: block; height: 11px; border-radius: 3px; background: #26374f; opacity: .45; margin: 0 auto; }
.ip-head .ip-fake-head i.ip-sm { height: 7px; opacity: .3; }
.ip-head .ip-fake-asset {
  margin: 4px 6px 7px; border-radius: 5px; padding: 6px 7px;
  background: var(--analysis-bg, #eef3fa); filter: blur(2.4px);
}
.ip-head .ip-fake-asset i { display: block; height: 8px; border-radius: 2px; background: #10233f; opacity: .45; }

/* Popover sel terkunci: bentuknya sama dengan popover asli, isinya buram.
   Padding-nya harus ditulis sendiri. Popover berbayar membungkus isinya dengan
   .popover-body yang sudah punya padding; kartu-kartu di bawah ini tidak, jadi
   tanpa aturan ini teksnya menempel ke tepi dan hasilnya terbaca murahan —
   justru di kartu yang tugasnya meyakinkan orang untuk membayar.
   Padding atas 34px menyisakan tempat untuk tombol × yang melayang di pojok
   kanan atas (.popover-close, margin-bottom negatif). */
.ip-pop { min-width: 250px; padding: 34px 20px 20px; }
.ip-pop-blur { filter: blur(4px); opacity: .7; pointer-events: none; padding: 2px 0 12px; }
.ip-pop-blur i { display: block; height: 10px; border-radius: 3px; background: #33506f; opacity: .5; margin: 7px 0; }
.ip-pop-title i { height: 13px; opacity: .75; }
.ip-pop-hero i { height: 26px; margin: 12px 0; opacity: .6; }
.ip-pop-cta { border-top: 1px solid var(--line, #e3eaf3); padding-top: 14px; }
.ip-pop-cta strong { display: block; font-size: 14px; line-height: 1.35; color: #0b2a55; }
.ip-pop-cta p { margin: 6px 0 13px; font-size: 12.5px; color: #5b6f8a; line-height: 1.55; }
.ip-pop-cta button {
  width: 100%; border: none; cursor: pointer; border-radius: 9px; min-height: 40px;
  background: #e51f2f; color: #fff; font-weight: 800; font-size: 13px; font-family: inherit;
}
.ip-pop-cta button:hover { background: #c81726; }

/* Kartu ajakan buka kunci. position:fixed supaya ia tetap terlihat sambil
   matriksnya digulir ke samping — justru saat menggulir ke kanan itulah
   pembaca sedang menatap kolom-kolom buram. */
.ip-unlock {
  position: fixed; right: 18px; z-index: 880; width: min(370px, calc(100vw - 36px));
  bottom: calc(var(--free-bar-h, 64px) + 14px);
  background: #fff; border: 1px solid #dbe4f0; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(6,32,72,.22);
}
.ip-unlock-in { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; flex-wrap: wrap; }
.ip-unlock-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, #e51f2f, #a8121f); color: #fff;
}
.ip-unlock-ico svg { width: 17px; height: 17px; }
.ip-unlock-txt { flex: 1 1 190px; min-width: 0; }
.ip-unlock-txt strong { display: block; font-size: 13.5px; color: #0b2a55; line-height: 1.35; }
.ip-unlock-txt span { display: block; margin-top: 4px; font-size: 12px; color: #5b6f8a; line-height: 1.5; }
.ip-unlock-btn {
  flex: 1 1 100%; border: none; cursor: pointer; border-radius: 999px; min-height: 42px;
  background: #e51f2f; color: #fff; font-weight: 800; font-size: 13px; font-family: inherit;
}
.ip-unlock-btn:hover { background: #c81726; }

@media (max-width: 900px) {
  /* Di ponsel kartu mengambang di kanan menutupi kolom yang justru sedang
     dilihat. Ia dipindah jadi bilah selebar layar tepat di atas free-bar. */
  .ip-unlock { right: 10px; left: 10px; width: auto; bottom: calc(var(--free-bar-h, 64px) + 10px); }
  .ip-unlock-in { padding: 12px 13px; gap: 10px; }
  .ip-unlock-txt span { display: none; }
  .ip-fake { filter: blur(2.6px); }
}

/* Tombol kembali di kartu: cadangan untuk ponsel, tempat free-bar dilipat. */
.ip-unlock-back { display: none; }
@media (max-width: 640px) {
  /* Tiga tombol dalam satu free-bar membuatnya membungkus jadi empat baris
     dan memotong "Buka Akses Penuh" di tepi layar. Selama mode intip, seluruh
     ajakan dipusatkan di kartu buka-kunci saja. */
  body.preview-mode .free-bar { display: none; }
  /* Di ponsel INI SATU-SATUNYA jalan keluar dari mode intip: free-bar yang
     memuat tombolnya di desktop sedang disembunyikan. Bentuk lamanya tautan
     teks abu 12,5px setinggi 22px, menempel di tepi bawah kartu — separuh
     ambang sentuh 44px, pucat di sebelah tombol merah, dan yang pertama
     terpotong begitu jendelanya sedikit lebih pendek. Dilaporkan sebagai
     "tombolnya hilang di mobile", dan memang begitu rasanya.
     Sekarang tombol bergaris penuh: tetap sekunder terhadap ajakan merah
     (garis, bukan isian), tapi terbaca sebagai sesuatu yang bisa ditekan. */
  .ip-unlock-back {
    display: block; flex: 1 1 100%; cursor: pointer;
    margin-top: 8px; min-height: 44px; padding: 0 14px;
    border: 1.5px solid #c3d0e2; border-radius: 999px; background: #fff;
    color: #0b2a55; font-family: inherit; font-size: 13px; font-weight: 700;
  }
  .ip-unlock-back:active { background: #eef3fa; }
  .ip-unlock { bottom: calc(var(--free-bar-h, 0px) + 10px); }
}

/* Kartu penjelas fitur toolbar (mode gratis). Tiap ikon di bilah atas membuka
   kartu ini alih-alih satu sheet beli yang seragam: deretan ikon tanpa
   keterangan membaca seperti tombol rusak, bukan seperti fitur berbayar. */
/* Tanpa max-width, kartu mengisi lebar popover (400px) — versi sebelumnya
   dipatok 310px sehingga menyisakan pita kosong di sisi kanan dan barisnya
   pecah terlalu pendek. */
.ip-feat { min-width: 250px; padding: 34px 20px 20px; }
.ip-feat-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #a8121f; background: #fdf0f1;
  border-radius: 999px; padding: 3px 9px; margin-bottom: 9px;
}
.ip-feat strong { display: block; font-size: 15px; color: #0b2a55; line-height: 1.3; }
.ip-feat p { margin: 7px 0 12px; font-size: 13px; color: #4a5d78; line-height: 1.58; }
.ip-feat button {
  width: 100%; border: none; cursor: pointer; border-radius: 9px; min-height: 40px;
  background: #e51f2f; color: #fff; font-weight: 800; font-size: 13px; font-family: inherit;
}
.ip-feat button:hover { background: #c81726; }

/* Ajakan menekan "Ruang Periksa".
   Tombolnya duduk di dasar matriks dan mudah terlewat: pengunjung mengira
   tabelnya berakhir di baris skor, padahal ada 24 baris indikator lagi di
   baliknya. Denyutnya berhenti sendiri sesudah beberapa putaran — animasi
   tanpa ujung berubah jadi gangguan, dan yang dicari cuma satu kali sadar.
   Kelasnya dilepas begitu tombolnya ditekan, jadi ia tidak pernah menegur
   orang yang sudah tahu. */
@keyframes ip-denyut {
  0%, 100% { box-shadow: 0 6px 20px rgba(16, 35, 63, .28), 0 0 0 0 rgba(229, 31, 47, .45); }
  50%      { box-shadow: 0 6px 20px rgba(16, 35, 63, .28), 0 0 0 9px rgba(229, 31, 47, 0); }
}
@keyframes ip-angguk {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
/* Denyut + anggukan pada pelat ruang yang belum ditempati. Sejak kedua pintu
   jadi satu sakelar di satu tempat, varian "tombol kembali" tidak diperlukan
   lagi — arah tuntunannya selalu sama: dari atas, turun ke sakelar. */
@keyframes ip-angguk {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
.room-btn { position: relative; }
.room-btn.ip-nudge { animation: ip-denyut 1.6s ease-out 6, ip-angguk 1.6s ease-in-out 6; }

/* Denyut + anggukan ternyata masih terlewat: keduanya terjadi PADA tombolnya
   sendiri, jadi mata yang belum menyadari tombol itu ada tidak punya apa pun
   untuk menuntunnya ke sana. Panah terpisah di luar tombol menyelesaikan itu —
   ia menunjuk, bukan sekadar berkedip. Ikut berhenti bersama denyutnya
   (kelas .ip-nudge dilepas begitu tombol ditekan). */
.room-btn.ip-nudge::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 13px);
  width: 13px;
  height: 13px;
  border-right: 3px solid #e51f2f;
  border-bottom: 3px solid #e51f2f;
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
  filter: drop-shadow(0 2px 4px rgba(16, 35, 63, .35));
  animation: ip-panah-turun 1.6s ease-in-out 6;
  pointer-events: none;
}
@keyframes ip-panah-turun {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: .6; }
  50%      { transform: translateX(-50%) rotate(45deg) translate(4px, 4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .room-btn.ip-nudge { animation: none; }
  /* Panahnya tetap ditampilkan — ia penunjuk arah, bukan hiasan gerak. */
  .room-btn.ip-nudge::after { animation: none; opacity: 1; }
}
}

/* Tinggi maksimum popover di versi gratis harus ikut memperhitungkan bilah
   ajakan yang melayang di dasar layar. Tanpa ini popover tertinggi (NPL, ROA,
   Growth Laba — yang isinya waterfall laba dan blok kualitas kredit) tumbuh
   sampai batas viewport penuh, lebih tinggi daripada ruang yang benar-benar
   tersisa, lalu ujung bawahnya berakhir di balik bilah. Yang hilang justru
   bagian penjelasan, dan tidak ada gulir yang muncul karena menurut CSS
   isinya masih muat. Selektornya dibuat sespesifik varian .is-metric dkk
   supaya tidak kalah oleh aturan di atasnya. */
body.free-mode .detail-popover,
body.free-mode .detail-popover.is-bank,
body.free-mode .detail-popover.is-indicator,
body.free-mode .detail-popover.is-dimension,
body.free-mode .detail-popover.is-metric {
  max-height: calc(var(--vph) - var(--free-bar-h, 0px) - 24px);
}

/* ── Legenda mode Terbaik ──────────────────────────────────────────────────
   Saudara .matrix-shell, bukan bagian isinya. Section-nya dijadikan kolom
   flex HANYA saat legenda ada, sehingga tinggi legenda mengurangi jatah
   shell alih-alih memunculkan gulir vertikal di tampilan yang sengaja
   dirancang tanpa gulir. Di luar mode Terbaik, tata letaknya tidak
   tersentuh sama sekali. */
body.has-terbaik-legend .report-main > section {
  display: flex;
  flex-direction: column;
}
body.has-terbaik-legend .matrix-shell {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.terbaik-legend {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 14px 7px;
  font-size: 12px;
  line-height: 1.45;
  color: #40536e;
  background: #f5f8fc;
  border-bottom: 1px solid #dfe7f1;
}
.terbaik-legend b { color: #10233f; font-weight: 800; }
.terbaik-legend i { color: #9a6b13; font-weight: 800; font-style: normal; }

/* Ponsel: tiap baris legenda memakan tinggi baris matriks, dan di lebar ini
   kalimatnya membungkus jadi lima baris. Kalimat penutup dibuang — isinya
   ajakan mengklik lencana, yang di layar sentuh sudah jelas dengan
   sendirinya. Dua kalimat pertama yang menjelaskan ARTI ⚑ tetap tampil. */
@media (max-width: 900px) {
  .terbaik-legend { font-size: 11px; line-height: 1.4; padding: 5px 10px 6px; }
  .terbaik-legend .legend-lanjut { display: none; }
}

@media print { .terbaik-legend { background: transparent; } }

/* ── Sasaran sentuh lencana kepala kolom ───────────────────────────────────
   ⚑ dan ★ dirender 12x12px. Di tetikus itu cukup; di jempol tidak, dan
   keduanya bukan hiasan — ⚑ membuka panel Sinyal Kewaspadaan, ★ membuka
   rincian status Terbaik. Kotak sentuhnya dilebarkan lewat pseudo-element
   supaya rupa lencananya tidak berubah sedikit pun.

   Melebarnya ke ATAS dan ke samping, bukan ke bawah: tepat di bawah baris ini
   ada tombol logo bank setinggi penuh, dan kotak sentuh yang menjorok ke sana
   akan mencuri ketukan yang dimaksudkan untuk logo. */
@media (hover: none), (pointer: coarse) {
  .bank-flag, .bank-terbaik { position: relative; }
  .bank-flag::after, .bank-terbaik::after {
    content: "";
    position: absolute;
    inset: -11px -7px -2px;
  }
}

/* ── Kepemilikan: roster pemegang saham & klaster lintas-BPR ─────────────── */
/* Blok terpanjang di seluruh popover, jadi kepadatannya dijaga: satu baris per
   pemegang saham, garis mungil untuk BENTUK pergerakannya, dan angkanya di
   kanan. Nama dipotong dengan ellipsis, bukan dibungkus, supaya tinggi tiap
   baris tetap sama dan matanya bisa menyusuri kolom persen. */
.sh-panel { margin-top: 12px; padding: 4px 12px 8px; background: #f8fafc; border: 1px solid #e8edf4; border-radius: 10px; }
.sh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0 6px; color: var(--navy-deep); font-size: 11.5px; font-weight: 750; }
.sh-head em { color: #8a94a6; font-size: 10px; font-style: normal; font-weight: 600; }
/* Kolom persen dipatok 46px, TIDAK `auto`. Dengan auto ia melebar mengikuti
   isinya -- "100,0%" lebih lebar daripada "2,0%" dan jauh lebih lebar daripada
   "—" -- sehingga kolom nama di kirinya ikut menyempit berbeda-beda tiap baris.
   Akibatnya titik potong nama dan tepi kiri grafiknya bergeser turun-naik
   (terukur 294 / 293,6 / 299,2 px), dan mata tidak punya garis lurus untuk
   disusuri. Sekarang keempat kolomnya pasti, persis seperti daftar anggota
   klaster yang memang sudah rapi. */
.sh-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 46px 62px; align-items: center; gap: 9px; padding: 5px 0; border-top: 1px dashed #e6ebf2; }
.sh-nama { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; font-size: 11px; font-weight: 400; }
.sh-row > b { color: var(--navy-deep); font-size: 12px; font-weight: 750; text-align: right; }
.sh-row > small { font-size: 9.6px; text-align: right; color: #8a94a6; }
.sh-spark { display: block; width: 54px; height: 16px; }
.sh-spark-kosong { display: block; width: 54px; height: 16px; }
.sh-naik { color: #157f31; font-weight: 700; }
.sh-turun { color: #b42318; font-weight: 700; }
.sh-baru { color: #2a78d6; font-weight: 700; }
.sh-keluar { color: #b42318; font-weight: 700; }
.sh-sisa { margin: 7px 0 0; color: #8a94a6; font-size: 9.8px; line-height: 1.45; }

.gr-judul { margin: 15px 0 0; color: var(--navy-deep); font-size: 12.5px; font-weight: 750; }
.gr-panel { margin-top: 8px; padding: 4px 12px 10px; background: #f4f7fc; border: 1px solid #dde6f3; border-radius: 10px; }
.gr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0 7px; }
.gr-head strong { color: var(--navy-deep); font-size: 12px; font-weight: 800; }
.gr-jumlah { margin-left: 8px; color: #667085; font-size: 10.5px; font-weight: 650; }
.gr-badge { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 750; letter-spacing: .02em; }
.gr-lembaga { background: #e3f0e7; color: #1f6b39; }
.gr-terkonfirmasi { background: #e2ecfa; color: #1e4f8f; }
.gr-dugaan { background: #fbf0dd; color: #8d6a15; }
.gr-list { max-height: 236px; overflow-y: auto; overflow-x: hidden; }
/* Tiga kolom RATA KIRI semuanya. Persennya dulu rata kanan dan provinsinya
   ikut mengambang mengikuti panjang nama, sehingga tak satu pun kolom punya
   tepi yang sama -- mata tidak bisa menyusurinya ke bawah. Lebar kolom kedua
   dan ketiga dipatok supaya tepinya sejajar berapa pun panjang nama banknya. */
.gr-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px dashed #dde6f3; text-align: left; }
/* Di layar sempit popover sudah mentok lebar layar, jadi satu-satunya lebar
   yang masih bisa diberikan kepada nama BPR adalah lebar yang dipakai kolom
   provinsi. Provinsi turun ke barisnya sendiri; nama mendapat seluruh baris. */
@media (max-width: 560px) {
  .gr-row { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .gr-prov { font-size: 9.4px; }
  .bk-saham { grid-template-columns: minmax(0, 1fr) 48px; }
}
.gr-row.is-ini { background: #fff; margin: 0 -8px; padding: 6px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #c9dcf5; }
.gr-row.is-ini .gr-nama { color: var(--navy-deep); font-weight: 750; }
/* Anggota lain = tautan ke halaman BPR itu di tab baru. */
a.gr-row { color: inherit; text-decoration: none; cursor: pointer; }
a.gr-row:hover, a.gr-row:focus-visible { background: #fff; margin: 0 -8px; padding: 6px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #c9dcf5; outline: none; }
a.gr-row:hover .nama-geser-teks { color: #1e4f8f; }
a.gr-row::after { content: "↗"; position: absolute; opacity: 0; }
a.gr-row:hover::after { opacity: 0; }
.gr-nama { color: #344054; font-size: 11px; }
/* ── Nama bergulir, dipakai dua daftar sekaligus ─────────────────────────────
   Nama pemegang saham dan nama BPR anggota klaster sama-sama kepanjangan untuk
   kolomnya. Keduanya dipotong ellipsis sampai disentuh tetikus, lalu digulir
   ke kiri sampai ujungnya terbaca dan kembali. Jarak & durasinya dihitung dari
   luapan SUNGGUHAN saat disentuh (lihat penangan .nama-geser), jadi nama
   pendek tidak bergerak sama sekali.
   Menggantikan tooltip bawaan peramban: teks yang bisa dibaca di tempatnya
   lebih baik daripada kotak kuning yang menutupi baris di sebelahnya. */
.nama-geser { position: relative; min-width: 0; overflow: hidden; white-space: nowrap; }
.nama-geser-teks { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.nama-geser.is-geser .nama-geser-teks { max-width: none; overflow: visible; text-overflow: clip; animation: nama-runtext var(--durasi, 3s) linear infinite alternate; }
@keyframes nama-runtext { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--geser, 0)); } }
@media (prefers-reduced-motion: reduce) { .nama-geser.is-geser .nama-geser-teks { animation: none; } }
.gr-nama em { color: #2a78d6; font-style: normal; font-weight: 700; }
.gr-prov { color: #8a94a6; font-size: 9.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
/* ── Kartu ringkas satu anggota klaster ──────────────────────────────────── */
/* Setingkat dengan .saham-mini (720): sama-sama melayang DI ATAS popover utama
   (600) tanpa menutupnya, karena pembaca sedang membandingkan satu BPR dengan
   daftar di belakangnya. */
.bpr-kartu {
  position: fixed; z-index: 720;
  width: min(348px, calc(100vw - 16px));
  padding: 13px 15px 13px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(16, 35, 63, .22);
  font-family: inherit;
}
.bk-tutup { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; background: none; color: #98a2b3; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 6px; }
.bk-tutup:hover { background: #f1f5f9; color: #344054; }
.bk-head { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.bk-logo { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; border-radius: 7px; background: #f6f8fb; }
.bk-logo-kosong { display: block; box-shadow: inset 0 0 0 1px #e5eaf0; }
.bk-judul h3 { margin: 0; color: var(--navy-deep); font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.bk-judul p { margin: 2px 0 0; color: #8a94a6; font-size: 9.8px; }
.bk-fakta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 11px 0 0; }
.bk-fakta div { padding: 7px 9px; background: #f6f8fb; border-radius: 8px; }
.bk-fakta span { display: block; color: #8a94a6; font-size: 8.8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.bk-fakta b { color: var(--navy-deep); font-size: 12.5px; font-weight: 800; }
.bk-kicker { margin: 12px 0 3px; color: #8a94a6; font-size: 9.2px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.bk-saham-list { max-height: 190px; overflow-y: auto; overflow-x: hidden; }
.bk-saham { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px dashed #dde6f3; }
.bk-saham-nama { color: #344054; font-size: 10.6px; }
.bk-saham > b { color: var(--navy-deep); font-size: 11px; font-weight: 750; text-align: right; }
/* Nama klaster yang sedang ditelusuri pembaca -- justru itu yang membawanya ke
   kartu ini, jadi ia harus langsung ketemu tanpa dibaca satu per satu. */
.bk-saham.is-sorot { margin: 0 -7px; padding: 5px 7px; background: #fff8e6; border-radius: 6px; box-shadow: inset 0 0 0 1px #f0d69a; }
.bk-saham.is-sorot .bk-saham-nama, .bk-saham.is-sorot > b { color: #7a4c00; font-weight: 800; }
/* Ejaan berbeda yang kata-katanya bersesuaian: disorot lebih pucat daripada
   kecocokan huruf demi huruf, karena ia dugaan dan bukan kepastian. */
.bk-saham.is-mirip { margin: 0 -7px; padding: 5px 7px; background: #fbfaf3; border-radius: 6px; box-shadow: inset 0 0 0 1px #e6e0c8; }
.bk-saham.is-mirip .bk-saham-nama { color: #6b5f3a; }
.bk-ejaan { display: block; color: #98917a; font-size: 8.8px; font-style: normal; }
.bk-kosong, .bk-nota { margin: 8px 0 0; color: #667085; font-size: 9.9px; line-height: 1.5; }
.bk-buka {
  display: block; margin-top: 12px; padding: 9px 10px;
  background: var(--navy-deep); color: #fff; border-radius: 8px;
  font-size: 11px; font-weight: 750; text-align: center; text-decoration: none;
}
.bk-buka:hover { background: #10305c; }

.gr-alias, .gr-nota { margin: 8px 0 0; color: #667085; font-size: 9.9px; line-height: 1.5; }
.gr-nota { padding-top: 7px; border-top: 1px solid #dde6f3; }

/* ── Popup kecil: riwayat porsi satu pemegang saham ──────────────────────── */
/* Melayang DI ATAS popover utama dan sengaja tidak menutupnya: pembaca sedang
   membandingkan satu nama dengan daftar di sekitarnya, jadi daftarnya harus
   tetap terlihat. z-index di atas popover (yang memakai lapisan popup). */
.saham-mini {
  position: fixed;
  /* HARUS di atas .detail-popover (z-index 600). Sempat diberi 240 dengan
     komentar "di atas popover" -- angkanya ditebak, tidak dibaca dari
     popovernya, jadi popup ini terbuat tetapi tertimbun di belakang dan
     kliknya terlihat seperti tidak berfungsi sama sekali. Uji peramban pun
     meloloskannya karena cuma memeriksa KEBERADAAN elemennya. Sejajar dengan
     .istilah-popup (720), yang menumpuk untuk alasan yang sama. */
  z-index: 720;
  width: min(330px, calc(100vw - 16px));
  padding: 13px 15px 12px;
  background: #fff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(16, 35, 63, .22);
  font-family: inherit;
}
.sm-tutup { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: 0; background: none; color: #98a2b3; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 6px; }
.sm-tutup:hover { background: #f1f5f9; color: #344054; }
.sm-kicker { margin: 0; color: #8a94a6; font-size: 9.2px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.sm-nama { margin: 3px 30px 2px 0; color: var(--navy-deep); font-size: 14px; font-weight: 800; line-height: 1.25; }
.sm-ringkas { margin: 0 0 9px; color: #667085; font-size: 10.5px; }
.sm-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; align-items: end; padding: 6px 0 2px; }
.sm-kol { display: grid; grid-template-rows: auto 62px auto; justify-items: center; gap: 4px; }
.sm-nilai { color: #475467; font-size: 9.6px; font-weight: 700; white-space: nowrap; }
.sm-kol.is-akhir .sm-nilai { color: var(--navy-deep); font-size: 10.4px; font-weight: 800; }
.sm-batang { position: relative; width: 100%; height: 62px; display: flex; align-items: flex-end; background: linear-gradient(#f6f8fb, #f1f5f9); border-radius: 4px; overflow: hidden; }
.sm-batang i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.sm-periode { color: #98a2b3; font-size: 9px; font-style: normal; white-space: nowrap; }
.sm-kol.is-akhir .sm-periode { color: #475467; font-weight: 700; }
.sm-kosong { margin: 8px 0; color: #8a94a6; font-size: 10.5px; }
.sm-nota { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #eef2f7; color: #8a94a6; font-size: 9.4px; line-height: 1.5; }
/* Nama pemegang saham di daftar: sekarang tombol, jadi harus tetap terbaca
   seperti teks biasa sampai disentuh. */
/* `font: inherit` TIDAK dipakai di sini. Shorthand itu ikut menyetel ulang
   font-size & font-weight ke nilai warisan, dan karena selektornya lebih
   spesifik daripada `.sh-nama` ia menimpa ukuran yang sudah ditetapkan di atas
   -- namanya jadi 14px, dua tingkat lebih besar daripada nama BPR di daftar
   klaster yang 11px. Yang benar-benar perlu di-inherit dari tombol cuma
   keluarga font & tinggi barisnya, supaya lepas dari font bawaan peramban. */
button.sh-nama { display: block; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; font-size: 11px; font-weight: 400; line-height: inherit; text-align: left; cursor: pointer; }
button.sh-nama:hover, button.sh-nama:focus-visible { color: #1e4f8f; outline: none; }
/* Garis bawahnya menempel pada TEKS-nya, bukan pada tombol selebar kolom --
   kalau tidak, garisnya membentang sampai ke ruang kosong di kanan nama. */
button.sh-nama:hover .nama-geser-teks,
button.sh-nama:focus-visible .nama-geser-teks { text-decoration: underline; text-underline-offset: 2px; }

/* ═══ Penyisiran pengalaman pengunjung, 18 September 2026 ═══════════════════
   Semua blok di bawah sengaja ditaruh di UJUNG berkas: aturan dasarnya ada di
   atas dengan spesifisitas sama, dan yang terakhir yang menang. */

/* Header versi gratis. Baris filter tidak pernah ada di versi gratis, tapi
   header tetap dipatok setinggi dua baris (92–96 px): di tablet dan laptop
   tersisa pita putih kosong ±40 px di bawah ikon, dan di ponsel tombol akun
   duduk sendirian di baris kedua. Isi header versi gratis statis (kolom Pantau
   dan pemilih filter tidak pernah muncul), jadi jebakan flex-wrap header ponsel
   tidak berlaku di sini. Kelasnya di <html> karena --header-height dibaca
   variabel tinggi baris matriks yang dideklarasikan di :root. */
@media (max-width: 720px) {
  html.mode-gratis { --header-height: 56px; }
  html.mode-gratis .akun-btn { position: static; margin-left: 6px; }
}
@media (min-width: 721px) and (max-width: 1366px) {
  html.mode-gratis { --header-height: 52px; }
}

/* Bilah ajakan versi gratis di ponsel. Tiga anaknya (kalimat, "Lihat tampilan
   langganan", tombol harga) dipaksa satu baris tanpa bungkus, dan di 390 px
   jumlah lebarnya melewati layar: bilah yang dipusatkan meluap ke DUA sisi,
   "Versi gratis" terpenggal di kiri dan harga di kanan. Sekarang dua baris
   tetap: kalimat di atas, dua tombol berbagi lebar di bawah. */
@media (max-width: 640px) {
  .free-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; padding: 8px 10px calc(9px + env(safe-area-inset-bottom, 0px)); }
  .free-bar-text { grid-column: 1 / -1; text-align: center; font-size: 12.5px; }
  .free-bar-peek, .free-bar-btn { min-height: 44px; padding: 4px 10px; font-size: 13px; line-height: 1.2; white-space: normal; }
  /* Teaser lama tanpa bank terbuka: tombol intip dicabut, tombol harga
     mengambil seluruh lebar. */
  .free-bar > .free-bar-btn:nth-child(2) { grid-column: 1 / -1; }
  .free-bar-price { display: block; font-size: 12px; font-weight: 700; opacity: .92; }
  .free-bar-price .fbp-sep { display: none; }

  /* Tabel gratis: lokasi, lencana predikat, dan keterangan di bawah tabel
     turun ke 11 px, padahal lencana itu satu-satunya vonis yang dibawa pulang
     pembaca versi gratis. */
  .fm-table thead th { font-size: 12px; letter-spacing: .02em; }
  .fm-bank span { font-size: 12px; }
  .fm-pk-badge, .fm-pk-badge i { font-size: 12px; }
  .fm-legend { font-size: 12.5px; }
  /* Kotak cari selebar kolom, bukan 300 px yang menggantung di kanan. */
  .fm-search { margin-left: 0; width: 100%; }
}

/* HP mendatar (844x390) dan jendela laptop yang pendek: bilah ajakan versi
   desktop membungkus jadi dua baris setinggi ±107 px, lebih dari seperempat
   layar, sehingga daftar peringkat cuma tersisa satu-dua baris. Di layar
   pendek kalimat panjangnya disembunyikan dan bilahnya dipaksa satu baris. */
@media (min-width: 641px) and (max-height: 520px) {
  .free-bar { flex-wrap: nowrap; gap: 12px; padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .free-bar-long { display: none; }
  .free-bar-peek, .free-bar-btn { min-height: 40px; white-space: nowrap; }
}

/* Safari iOS memperbesar halaman begitu kotak isian di bawah 16 px disentuh,
   lalu tidak mengecilkannya lagi: matriks dan tabel tergeser ke samping dan
   pembaca harus mencubit untuk kembali. Hanya di layar sentuh. */
@media (hover: none) and (pointer: coarse) {
  .fm-search, .watch-input, .ms-search { font-size: 16px; }
}

/* Baris filter matriks di layar 360. Ketiga tombol (Kelas Aset, Kota/Kab,
   Filter) butuh 315 px sementara jalurnya cuma 294 px sebelum tombol akun,
   jadi tombol Filter terpotong di dalam wadah gulirnya: tanda panahnya hilang
   dan separuh tombolnya hanya bisa dicapai dengan menggeser baris itu — yang
   tidak pernah terpikir oleh siapa pun. Dirapatkan 22 px supaya ketiganya
   utuh tanpa mengecilkan hurufnya. */
@media (max-width: 374px) {
  .report-header-nav .filter-group { gap: 4px; }
  .report-header-nav .filter-group .ms-btn { padding: 0 7px; gap: 4px; }
}

/* Pemilih kelas Terbaik & kantor regional di ponsel: lencana kepala dan
   jumlah BPR per baris masih 11 px, dan tombol kembali "← Pilih Kantor
   Regional" cuma 36 px padahal itu satu-satunya jalan keluar dari layar ini. */
@media (max-width: 640px) {
  .kc-eyebrow, .kr-pill { font-size: 12px; }
  .kr-picker-alt { min-height: 44px; font-size: 13px; }
}

/* Bank yang dibuka lewat ?pantau= (kotak "Cari BPR" di beranda) di daftar
   versi gratis: pita emas di kiri, baris berwarna hangat. */
.fm-table tbody tr.fm-sorot td { background: #fff4d6 !important; }
.fm-table tbody tr.fm-sorot td:first-child { box-shadow: inset 4px 0 0 #e8b33a; }
.fm-table tbody tr.fm-sorot .fm-bank strong { color: var(--navy-deep); }

/* ── Bilah iklan (assets/js/iklan.js) ──────────────────────────────────────
   Menempel di dasar layar, di BAWAH area laporan, bukan menimpanya: tinggi
   .report-main dan rumus tinggi baris sudah dikurangi --iklan-h, jadi baris
   skor dan sakelar ruang tetap utuh di atasnya. z-index di bawah semua panel
   dan popover (560 ke atas) yang dibuka pembaca, di atas matriks. */
.iklan-bilah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  height: var(--iklan-h);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 12px;
  background: #f4f6fa;
  border-top: 1px solid #dde3ec;
}
.iklan-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8793a5;
}
.iklan-kotak { flex: none; overflow: hidden; }
.iklan-uji {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #9aa8bd; background: #fff; color: #8793a5; font-size: 11px;
}
/* Label (±36px) + jarak 10 + iklan 320 + tepi 2×12 baru muat mulai 390px.
   Di bawahnya label terpotong di tepi kiri (terlihat di 360); labelnya yang
   mengalah, iklannya tidak. */
@media (max-width: 389px) { .iklan-label { display: none; } }
@media print { .iklan-bilah { display: none; } }