/* =========================================================================
   Situs Laporan — gaya dasar
   Seluruh warna diatur lewat custom property di :root.
   Untuk mengganti identitas warna, ubah blok :root saja.
   ========================================================================= */

:root {
  /* --- Warna korporat PHEI ---------------------------------------------
     Marun  rgba(144, 23, 42)  = #90172A   -> warna utama
     Emas   rgba(156,124, 56)  = #9C7C38   -> warna aksen
     Ubah blok ini untuk mengganti seluruh identitas warna situs. */
  --brand:            #90172A;   /* marun: header, tautan, tombol, menu aktif */
  --brand-dark:       #6E1120;   /* versi gelap untuk hover */
  --brand-mid:        #B01E36;
  --brand-light:      #FCF1F3;   /* latar item menu aktif */
  --brand-border:     #E6C3CA;
  --brand-tint:       #F7E4E8;

  --accent:           #9C7C38;   /* emas: angka kunci, label, garis sorot */
  --accent-dark:      #7A6029;
  --accent-mid:       #C0A05A;
  --accent-light:     #FBF6EC;
  --accent-border:    #E4D3AE;

  /* --- Nuansa biru: warna ketiga untuk kesan modern dan dinamis --------- */
  --blue:             #1F4E8C;
  --blue-dark:        #15396B;
  --blue-mid:         #2E6FBF;
  --blue-light:       #EAF1FA;
  --blue-border:      #BFD4EC;

  /* --- Palet pendukung: dipakai bergantian per bab, pada kotak angka,
         penanda judul tabel dan garis tepi kartu. --------------------- */
  --c1: #90172A;   /* marun */
  --c2: #1F4E8C;   /* biru */
  --c3: #9C7C38;   /* emas */
  --c4: #2E6FBF;   /* biru terang */
  --c5: #B5541F;   /* jingga bakar */
  --c6: #5B3A6E;   /* ungu plum */
  --c7: #0E6F84;   /* teal */
  --ch: var(--brand);        /* warna bab yang sedang aktif (disetel per bab) */

  /* --- Warna teks & permukaan --- */
  --ink:              #1c1f23;
  --ink-soft:         #4a5058;
  --ink-muted:        #6b7280;
  --surface:          #ffffff;
  --surface-alt:      #f6f8fb;   /* abu kebiruan */
  --surface-sunken:   #edf1f7;
  --line:             #e2e7ef;
  --line-soft:        #edf1f6;

  /* --- Ukuran tata letak --- */
  --nav-width:        340px;
  --content-max:      760px;
  --header-h:         84px;
  --gutter:           40px;

  /* --- Tipografi --- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  /* Aptos ikut Microsoft 365; di komputer tanpa Aptos, cadangannya dipakai. */
  --font-title: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(21, 40, 70, .08);
  --shadow-md: 0 6px 22px rgba(21, 40, 70, .12);
  --shadow-lg: 0 16px 44px rgba(21, 40, 70, .18);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--blue-mid); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  border-top: 3px solid var(--accent);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.site-header__logo {
  font-weight: 700; font-size: 17px; letter-spacing: .02em;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.site-header__logo:hover { text-decoration: none; }
.site-header__divider { color: var(--line); }
.site-header__title {
  font-size: 14px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; line-height: 1;
  padding: 9px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------------- hero */

.hero {
  padding: 44px var(--gutter) 36px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.hero__inner { max-width: 1320px; margin: 0 auto; }
.hero__eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.18; margin: 0 0 10px; font-weight: 700;
}
.hero__subtitle { font-size: 18px; color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--ink-muted); }
.hero__meta strong { color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------------------------------ tata letak */

.layout {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}

.layout__nav {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  background: var(--surface);
}

.layout__content { min-width: 0; padding: 36px var(--gutter) 96px; }
.content-inner { max-width: var(--content-max); }

/* -------------------------------------------------------------- tree menu */

.toc { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.toc__head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line-soft); }
.toc__title {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
}

.toc__search { position: relative; }
.toc__search input {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 30px 8px 32px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-alt); color: var(--ink);
}
.toc__search input:focus { background: var(--surface); border-color: var(--blue-mid); box-shadow: 0 0 0 3px var(--blue-light); outline: none; }
.toc__search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-muted); pointer-events: none;
}
.toc__search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--ink-muted);
  padding: 4px; line-height: 0; border-radius: 3px; display: none;
}
.toc__search-clear.is-visible { display: block; }
.toc__search-clear:hover { color: var(--ink); background: var(--surface-sunken); }

.toc__tools {
  display: flex; gap: 14px; padding: 8px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.toc__tool {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-muted); font: inherit; font-size: 12.5px;
}
.toc__tool:hover { color: var(--brand); text-decoration: underline; }

.toc__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 40px; }
.toc__empty { display: none; padding: 20px; font-size: 13.5px; color: var(--ink-muted); }
.toc__empty.is-visible { display: block; }

.toc ul, .toc ol { list-style: none; margin: 0; padding: 0; }

/* satu baris menu = header + tombol buka/tutup */
.toc-item__header { display: flex; align-items: flex-start; gap: 2px; }

.toc-item__link {
  flex: 1 1 auto; min-width: 0;
  display: block; padding: 7px 8px 7px 20px;
  color: var(--ink-soft); text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 14px; line-height: 1.4;
}
.toc-item__link { transition: background .15s ease, color .15s ease, transform .15s ease; }
.toc-item__link:hover { background: var(--blue-light); color: var(--blue-dark); text-decoration: none; transform: translateX(2px); }

.toc-item__toggle {
  flex: none; width: 30px; align-self: stretch;
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--ink-muted); display: flex; align-items: center; justify-content: center;
}
.toc-item__toggle:hover { color: var(--brand); }
.toc-item__toggle svg { width: 11px; height: 11px; transition: transform .18s ease; }
.toc-item__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* tingkat 1 */
.toc-level-1 > .toc-item > .toc-item__header > .toc-item__link { font-weight: 600; color: var(--ink); }

/* tingkat 2 */
.toc-level-2 .toc-item__link { padding-left: 34px; font-size: 13.5px; }
/* tingkat 3 */
.toc-level-3 .toc-item__link { padding-left: 48px; font-size: 13px; color: var(--ink-muted); }

.toc-item__children[hidden] { display: none; }

/* keadaan aktif */
.toc-item__link.is-active {
  background: var(--brand-light);
  border-left-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}
.toc-item__link.is-ancestor { color: var(--ink); font-weight: 600; }

/* hasil pencarian */
.toc-item.is-filtered-out { display: none; }
.toc-item__link mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }

/* --------------------------------------------------------- menu mobile */

.toc-mobile {
  display: none;
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px var(--gutter);
}
.toc-mobile__btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 14px; cursor: pointer;
}
.toc-mobile__btn svg { width: 16px; height: 16px; color: var(--brand); }

.toc-drawer {
  position: fixed; inset: 0; z-index: 100;
  display: none;
}
.toc-drawer.is-open { display: block; }
.toc-drawer__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.toc-drawer__panel {
  position: absolute; inset: 0 20% 0 0; max-width: 420px; min-width: 300px;
  background: var(--surface); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.toc-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.toc-drawer__title { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.toc-drawer__close {
  border: 0; background: none; cursor: pointer; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 6px;
}
.toc-drawer__close:hover { color: var(--ink); }
.toc-drawer__close svg { width: 14px; height: 14px; }
.toc-drawer__body { flex: 1 1 auto; min-height: 0; display: flex; }
.toc-drawer__body .toc { flex: 1 1 auto; }
/* judul sudah ada di header drawer — jangan tampilkan dua kali */
.toc-drawer__body .toc__title { display: none; }
.toc-drawer__body .toc__head { padding-top: 14px; }

/* ------------------------------------------------------------- konten */

.breadcrumb {
  font-size: 13px; color: var(--ink-muted); margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb__sep { opacity: .5; }

.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.content h1 { font-size: 34px; line-height: 1.2; margin: 0 0 20px; }
.content h2 {
  font-size: 27px; line-height: 1.25; margin: 52px 0 16px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.content h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.content h3 { font-size: 21px; line-height: 1.3; margin: 36px 0 12px; }
.content h4 { font-size: 17.5px; line-height: 1.35; margin: 28px 0 10px; color: var(--ink-soft); }

.content p { margin: 0 0 16px; }
.content .lead { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); }
.content ul, .content ol { margin: 0 0 18px; padding-left: 22px; }
.content li { margin-bottom: 7px; }

/* judul dengan tombol salin tautan */
.heading-row { display: flex; align-items: baseline; gap: 8px; }
.heading-row .copy-link {
  border: 0; background: none; cursor: pointer; color: var(--ink-muted);
  opacity: 0; transition: opacity .15s; padding: 2px; line-height: 0; flex: none;
}
.heading-row:hover .copy-link, .copy-link:focus-visible { opacity: 1; }
.heading-row .copy-link svg { width: 15px; height: 15px; }
.heading-row .copy-link:hover { color: var(--brand); }

/* blok khusus */
.callout {
  background: var(--brand-light); border-left: 4px solid var(--brand);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 22px;
}
.callout__title { font-weight: 700; margin: 0 0 6px; font-size: 15px; color: var(--brand-dark); }
.callout p:last-child { margin-bottom: 0; }

.keyfindings {
  background: var(--surface-alt); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 20px 24px; margin: 0 0 24px;
}
.keyfindings__title {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.keyfindings ul { margin: 0; padding-left: 20px; }
.keyfindings li { margin-bottom: 9px; }
.keyfindings li:last-child { margin-bottom: 0; }

blockquote.quote {
  margin: 0 0 22px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand-border);
  font-family: var(--font-serif); font-size: 19px; font-style: italic; color: var(--ink-soft);
}
blockquote.quote cite { display: block; margin-top: 8px; font: inherit; font-size: 14px; font-style: normal; color: var(--ink-muted); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 26px;
}
.stats__item { background: var(--surface); padding: 16px 16px 18px; transition: transform .18s ease, box-shadow .18s ease; }
.stats__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); position: relative; z-index: 1; }
.stats__item { border-top: 3px solid var(--accent); }
.stats__value { font-family: var(--font-serif); font-size: 25px; font-weight: 700; color: var(--accent); line-height: 1.15; }
.stats__label { font-size: 12.5px; color: var(--ink-muted); margin-top: 5px; line-height: 1.4; }

.table-block { margin: 0 0 26px; }
.table-block__caption { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 9px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table-block table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-block th, .table-block td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table-block thead th { background: var(--surface-alt); font-weight: 600; color: var(--ink); white-space: nowrap; }
.table-block tbody tr:last-child td { border-bottom: 0; }
.table-block tbody tr:hover { background: var(--surface-alt); }
.table-block td + td, .table-block th + th { text-align: right; }
.block-note code { font-family: ui-monospace, Consolas, monospace; font-size: .92em;
  background: var(--blue-light); color: var(--blue-dark); padding: 1px 5px; border-radius: 4px; }
.block-note { font-size: 12.5px; color: var(--ink-muted); margin: 8px 0 0; line-height: 1.5; }

.figure-block { margin: 0 0 26px; }
.figure-block__caption { font-size: 14px; font-weight: 600; margin-bottom: 8px;
  border-left: 3px solid var(--accent); padding-left: 9px; }
.figure-block__frame {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-alt); overflow: hidden;
}
.figure-block__placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 24px; text-align: center;
  color: var(--ink-muted); font-size: 13.5px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.02) 10px, rgba(0,0,0,.02) 20px);
}

/* prev / next */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
}
.pager__link {
  display: block; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.pager__link:hover { border-color: var(--brand); background: var(--surface-alt); text-decoration: none; }
.pager__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.pager__title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.pager__link--next { text-align: right; }
.pager__link--placeholder { visibility: hidden; }

/* footer */
.site-footer {
  border-top: 1px solid var(--line); background: var(--surface-alt);
  padding: 30px var(--gutter); margin-top: 0;
}
.site-footer__inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 13px; color: var(--ink-muted);
}
.site-footer__cite { max-width: 70ch; }

/* tombol kembali ke atas */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  box-shadow: var(--shadow-md); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { color: var(--brand); border-color: var(--brand-border); }
.to-top svg { width: 16px; height: 16px; }

/* toast salin tautan */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 150;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- halaman muka */

.cover-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px;
  max-width: 1320px; margin: 0 auto; padding: 48px var(--gutter) 80px;
}
.cover-toc { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cover-toc__head { background: var(--surface-alt); padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.cover-toc ol { list-style: none; margin: 0; padding: 8px 0; }
.cover-toc li a { display: block; padding: 8px 18px; font-size: 14px; color: var(--ink); }
.cover-toc li a:hover { background: var(--surface-alt); text-decoration: none; color: var(--brand); }


/* =========================================================================
   LOGO, SLIDESHOW SPONSOR DAN PENEGASAN WARNA
   Ditambahkan setelah blok dasar agar mudah dilepas kembali bila perlu.
   ========================================================================= */

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky; border-top: 0;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line), 0 4px 18px rgba(21, 40, 70, .06);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-mid) 28%, var(--blue-mid) 60%, var(--accent) 100%);
}

.brand-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; }
.brand-lockup__logos { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-lockup__logos img { display: block; width: auto; }
.brand-lockup__logos img.logo--phei { height: 32px; }
.brand-lockup__logos img.logo--idx  { height: 54px; }
.brand-lockup__rule { width: 1px; height: 42px; background: var(--line); flex: none; }
.brand-lockup__title {
  min-width: 0; flex: 1 1 auto;
  font-family: var(--font-title);
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.015em;
  color: var(--brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@supports (-webkit-background-clip: text) {
  .brand-lockup__title {
    background: linear-gradient(95deg, var(--brand) 0%, var(--brand-mid) 45%, var(--blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
a.brand-lockup:hover { text-decoration: none; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 420px at 88% -20%, rgba(156, 124, 56, .38), transparent 60%),
    linear-gradient(135deg, #6E1120 0%, #90172A 46%, #7C2233 100%);
  border-bottom: 0;
  color: #fff;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-mid), var(--accent) 45%, var(--brand-mid));
}
.hero__inner { position: relative; }
.hero__eyebrow { color: #E8CF9A; }
.hero__title { color: #fff; }
.hero__subtitle { color: rgba(255, 255, 255, .84); }
.hero__meta { color: rgba(255, 255, 255, .72); }
.hero__meta strong { color: #E8CF9A; }

.hero__logos { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.hero__plate {
  background: #fff; border-radius: 8px; padding: 10px 16px;
  display: flex; align-items: center; box-shadow: 0 6px 18px rgba(40, 8, 14, .28);
}
.hero__plate img { display: block; width: auto; }
.hero__plate img.logo--phei { height: 38px; }
.hero__plate img.logo--idx  { height: 58px; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero__badge {
  font-size: 12px; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
}

/* --------------------------------------------------- slideshow sponsor */

.sponsors {
  background: linear-gradient(180deg, var(--surface-alt), var(--surface));
  border-bottom: 1px solid var(--line);
  padding: 20px var(--gutter) 24px;
}
.sponsors__inner { max-width: 1200px; margin: 0 auto; }  /* sepadan lebar gambar 1200 px */
.sponsors__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sponsors__label {
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.sponsors__label::before {
  content: ""; display: inline-block; width: 22px; height: 2px; vertical-align: middle;
  margin-right: 9px; background: linear-gradient(90deg, var(--brand), var(--accent));
}
.sponsors__note { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

.slideshow { position: relative; }
.slideshow__viewport {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
}
.slideshow__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.slideshow__slide { flex: 0 0 100%; min-width: 0; }
.slideshow__frame {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 1; padding: 16px 22px; background: #fff;
}
.slideshow__frame img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.slideshow__empty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; border: 1px dashed var(--brand-border); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--brand-light) 0 10px, #fff 10px 20px);
  color: var(--brand); font-size: 13px; letter-spacing: .04em;
}
.slideshow__caption {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 11.5px; color: var(--ink-muted); background: rgba(255, 255, 255, .9);
  padding: 2px 8px; border-radius: 999px;
}

.slideshow__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--brand);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .18s;
}
.slideshow:hover .slideshow__nav, .slideshow__nav:focus-visible { opacity: 1; }
.slideshow__nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.slideshow__nav svg { width: 14px; height: 14px; }
.slideshow__nav--prev { left: 10px; }
.slideshow__nav--next { right: 10px; }

.slideshow__dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.slideshow__dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--brand-border); transition: background .18s, width .18s;
}
.slideshow__dot.is-active { background: var(--brand); width: 20px; border-radius: 999px; }

/* sponsor kecil di dalam sidebar daftar isi */
.toc__sponsor { border-top: 1px solid var(--line-soft); padding: 14px 20px 18px; flex: none; }
.toc__sponsor .sponsors__label { font-size: 10.5px; margin-bottom: 8px; display: block; }
.toc__sponsor .slideshow__frame { aspect-ratio: 3 / 1; padding: 10px 12px; }
.toc__sponsor .slideshow__nav { display: none; }
.toc__sponsor .slideshow__dots { margin-top: 8px; }

/* --------------------------------------------------- penegasan warna bab */

.toc-level-1 > .toc-item { --ch: var(--brand); }
.toc-level-1 > .toc-item > .toc-item__header > .toc-item__link {
  border-left: 3px solid transparent;
}
.toc-level-1 > .toc-item > .toc-item__header > .toc-item__link::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  background: var(--ch); margin-right: 9px; vertical-align: 1px; flex: none;
}
.toc-item__link.is-active { border-left-color: var(--ch); background: var(--brand-light); color: var(--brand-dark); }
.toc-level-1 > .toc-item > .toc-item__header > .toc-item__link.is-ancestor { color: var(--ch); }
.toc-item__toggle:hover { color: var(--ch); }

.toc__title { color: var(--brand); }
.toc__title::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: 7px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--blue-mid), var(--accent));
}
.toc__tool:hover { color: var(--brand); }
.toc-item__link mark { background: var(--accent-light); box-shadow: inset 0 -2px 0 var(--accent-mid); }

/* jumlah halaman cetak yang dicadangkan, dari field `pages` */
.toc-pages {
  margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-light); border: 1px solid var(--accent-border);
  border-radius: 999px; padding: 0 6px; white-space: nowrap;
}

/* ------------------------------------------------------- konten berwarna */

.content h2 {
  border-top: 0; padding-top: 0; margin-top: 46px;
  position: relative; padding-left: 16px;
}
.content h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px;
  border-radius: 3px; background: linear-gradient(180deg, var(--ch), var(--accent));
}
.content h3 { color: var(--brand-dark); }
.content h4 { color: var(--accent-dark); }

.chapter-band {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 20px; padding: 10px 14px; border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ch) 10%, #fff), #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ch);
}
.chapter-band__num {
  font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--ch);
}
.chapter-band__meta { font-size: 12.5px; color: var(--ink-muted); }
.chapter-band__pages {
  font-size: 11.5px; font-weight: 600; color: var(--accent-dark);
  background: var(--accent-light); border: 1px solid var(--accent-border);
  border-radius: 999px; padding: 2px 9px;
}

.callout { background: var(--brand-light); border-left-color: var(--ch); border-radius: 0 var(--radius) var(--radius) 0; }
.callout__title { color: var(--brand-dark); }

.keyfindings {
  background: linear-gradient(180deg, var(--accent-light), #fff);
  border-color: var(--accent-border); border-left-color: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.keyfindings__title { color: var(--accent-dark); }
.keyfindings li::marker { color: var(--accent); }

.stats { gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.stats__item { border-top: 3px solid var(--c1); }
.stats__item:nth-child(2) { border-top-color: var(--c2); }
.stats__item:nth-child(3) { border-top-color: var(--c3); }
.stats__item:nth-child(4) { border-top-color: var(--c4); }
.stats__item:nth-child(5) { border-top-color: var(--c5); }
.stats__item:nth-child(6) { border-top-color: var(--c6); }
.stats__value { color: var(--c1); }
.stats__item:nth-child(2) .stats__value { color: var(--c2); }
.stats__item:nth-child(3) .stats__value { color: var(--c3); }
.stats__item:nth-child(4) .stats__value { color: var(--c4); }
.stats__item:nth-child(5) .stats__value { color: var(--c5); }
.stats__item:nth-child(6) .stats__value { color: var(--c6); }

.table-block__caption, .figure-block__caption { border-left-color: var(--ch); }
.table-block thead th {
  background: var(--brand-light); color: var(--brand-dark);
  border-bottom: 2px solid var(--brand-border);
}
.table-block tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-alt) 55%, #fff); }
.table-block tbody tr { transition: background .12s ease; }
.table-block tbody tr:hover { background: var(--blue-light); }
.table-block th[scope="row"] { color: var(--ink); font-weight: 600; }

.figure-block__placeholder {
  border: 1px dashed var(--brand-border); color: var(--brand);
  background: repeating-linear-gradient(135deg, var(--brand-light) 0 12px, #fff 12px 24px);
}

.quote { border-left-color: var(--accent); }

.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-color: transparent;
}
.btn--primary:hover { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn:hover { border-color: var(--blue-border); color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.pager__link:hover { border-color: var(--ch); background: var(--brand-light); }

/* penanda kode emiten pada daftar isi dan judul */
.code {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: .86em; font-weight: 700; letter-spacing: .04em;
  color: var(--brand); background: var(--brand-light);
  border: 1px solid var(--brand-border); border-radius: 3px;
  padding: 0 5px; margin-right: 7px;
}
.content h3 .code, .content h4 .code { font-size: .72em; vertical-align: 2px; }
.idx-suffix { color: var(--accent-dark); }

.issuer-stub {
  border: 1px dashed var(--brand-border); border-radius: var(--radius);
  background: var(--brand-light); padding: 14px 16px; margin: 0 0 22px;
}
.issuer-stub__note { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand), var(--accent)) 1; }
.site-footer__logos { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.site-footer__logos img { display: block; width: auto; }
.site-footer__logos img.logo--phei { height: 30px; }
.site-footer__logos img.logo--idx  { height: 46px; }

.cover-toc__head { background: linear-gradient(90deg, var(--brand-light), #fff); color: var(--brand); border-bottom-color: var(--brand-border); }
.cover-toc li a:hover { background: var(--brand-light); color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .slideshow__track { transition: none; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .brand-lockup__logos img.logo--idx { height: 42px; }
  .brand-lockup__logos img.logo--phei { height: 24px; }
}
@media (max-width: 560px) {
  :root { --header-h: 64px; }
  .brand-lockup__rule { display: none; }
  .brand-lockup__logos img.logo--phei { display: none; }
  .brand-lockup__title { font-size: 16px; white-space: normal; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}


.cover-toc li a { display: flex; align-items: baseline; gap: 10px; }
.cover-toc__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; position: relative; top: -1px; }
.cover-toc__label { min-width: 0; }
.cover-toc__meta { color: var(--ink-muted); font-size: 12.5px; }


/* daftar tautan anak pada bab yang dipecah per berkas (split) */
.child-index { margin: 6px 0 30px; }
.child-index ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px;
}
.child-index li a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: 14px; line-height: 1.35;
}
.child-index li a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.child-index li a:hover {
  border-color: var(--blue-border); background: linear-gradient(135deg, var(--blue-light), #fff);
  color: var(--blue-dark); text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.child-index li a .toc-pages { margin-left: auto; }


/* ---------------------------------------------------- sentuhan dinamis */

/* bilah kemajuan baca di tepi atas layar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--brand), var(--blue-mid), var(--accent));
  pointer-events: none;
}

/* elemen muncul perlahan saat masuk layar (dinonaktifkan oleh site.js
   bila pengguna menyalakan "kurangi animasi") */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* kartu video YouTube */
.video-card {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 26px; padding: 18px 20px;
  border-radius: var(--radius); border: 0;
  background: linear-gradient(135deg, #101E33 0%, var(--blue-dark) 55%, var(--blue) 100%);
  color: #fff; text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; text-decoration: none; }
.video-card__play {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #FF0033; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 0, 51, .45);
}
.video-card__play svg { width: 20px; height: 20px; color: #fff; margin-left: 2px; }
.video-card__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.video-card__title { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.video-card__caption { font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.video-card__url { font-size: 12px; color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-card .ext-badge {
  margin-left: auto; flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 4px 10px; color: rgba(255, 255, 255, .85);
}

/* tombol video di header */
.btn--video svg { color: #FF0033; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .child-index li a, .stats__item, .toc-item__link, .video-card { transition: none; }
}


/* ------------------------------------------------- halaman gambar penuh */

.page-image { margin: 0 0 30px; }
.page-image__frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-alt); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-image__frame:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--blue-border); text-decoration: none;
}
.page-image__frame img { display: block; width: 100%; height: auto; }
.page-image__zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(16, 24, 40, .72); color: #fff; font-size: 12.5px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.page-image__frame:hover .page-image__zoom,
.page-image__frame:focus-visible .page-image__zoom { opacity: 1; transform: none; }
.page-image__zoom svg { width: 14px; height: 14px; }
.page-image__caption {
  margin-top: 9px; font-size: 13px; color: var(--ink-muted);
  border-left: 3px solid var(--ch); padding-left: 9px;
}

/* ------------------------------------------------------------ lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 14, 22, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%; max-height: calc(100vh - 96px);
  border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: lb-in .25s ease;
}
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox__bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  color: rgba(255, 255, 255, .9); font-size: 13.5px;
}
.lightbox__close {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .24); }
.lightbox__close svg { width: 13px; height: 13px; }

/* banner sponsor mengisi bingkai sepenuhnya */
.sponsors .slideshow__frame { padding: 0; }
.sponsors .slideshow__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .page-image__frame { transition: none; }
  .page-image__zoom { opacity: 1; transform: none; transition: none; }
  .lightbox__img { animation: none; }
}


/* ----------------------------------------------------- sampul halaman muka */

.cover-hero {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px;
  align-items: start;
}
.cover-hero__art {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cover-hero__art:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.cover-hero__art img { display: block; width: 100%; height: auto; }
.cover-hero__art .page-image__zoom { right: 10px; bottom: 10px; padding: 6px 11px; font-size: 12px; }
.cover-hero__art:hover .page-image__zoom { opacity: 1; transform: none; }
.cover-hero__text > h2:first-child { margin-top: 0; }

@media (max-width: 780px) {
  .cover-hero { grid-template-columns: 1fr; gap: 24px; }
  .cover-hero__art { max-width: 300px; }
}


/* ------------------------------- kartu dokumen HTML siap pakai (href:) */

.doc-card {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 26px; padding: 16px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--blue-border);
  background: linear-gradient(135deg, var(--blue-light) 0%, #fff 70%);
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--blue-mid); text-decoration: none; color: var(--ink);
}
.doc-card__ic {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.doc-card__ic svg { width: 20px; height: 20px; }
.doc-card__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-card__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-dark);
}
.doc-card__caption { font-weight: 600; font-size: 16px; line-height: 1.3; }
.doc-card__url {
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-card .ext-badge {
  margin-left: auto; flex: none; font-size: 11px; letter-spacing: .08em;
  border: 1px solid var(--blue-border); border-radius: 999px; padding: 4px 10px;
  color: var(--blue-dark); background: #fff;
}

/* Penanda kecil pada item daftar isi yang membuka berkas siap pakai. Berkas
   itu kini terbuka di tab yang sama, jadi panahnya lurus ke kanan (pindah
   halaman), bukan serong ke atas (buka jendela baru). */
.toc-item__link--ext::after {
  content: "\2192"; margin-left: 6px; font-size: 11px; color: var(--blue-mid); opacity: .8;
}

@media (prefers-reduced-motion: reduce) { .doc-card { transition: none; } }

/* --------------------------------------------------------------- responsif */

@media (max-width: 1024px) {
  :root { --gutter: 24px; --nav-width: 300px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .layout__nav { display: none; }
  .toc-mobile { display: block; }
  .cover-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .content h1 { font-size: 27px; }
  .content h2 { font-size: 22px; }
  .content h3 { font-size: 18.5px; }
  .pager { grid-template-columns: 1fr; }
  .toc-drawer__panel { inset: 0; max-width: none; min-width: 0; }
  .site-header__actions .btn span { display: none; }
}

/* ------------------------------------------------------------------ cetak */

@media print {
  .site-header, .layout__nav, .toc-mobile, .to-top, .pager, .site-footer__nav,
  .copy-link, .toc-drawer, .sponsors, .slideshow__nav, .lightbox, .page-image__zoom { display: none !important; }
  .layout { display: block; }
  .layout__content { padding: 0; }
  .content-inner { max-width: none; }
  body { font-size: 11pt; }
  .content h2 { page-break-after: avoid; }
  .table-block, .figure-block, .keyfindings, .callout { page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* ------------------------------------- hasil pencarian isi di daftar isi */

.toc-hits { padding: 4px 8px 14px; }
.toc-hits:empty { display: none; }
.toc-hits__head {
  margin: 10px 4px 6px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
.toc-hits__head span {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--brand-light); color: var(--brand); letter-spacing: 0;
}
.toc-hits__note { margin: 10px 4px; font-size: 12px; color: var(--ink-muted); }
.toc-hits__list { list-style: none; margin: 0; padding: 0; }
.toc-hits__list li { margin: 0; }

.toc-hit {
  display: block; padding: 8px 9px; border-radius: 8px; color: inherit;
  border-left: 3px solid transparent;
}
.toc-hit:hover, .toc-hit:focus-visible {
  background: var(--blue-light); border-left-color: var(--brand); text-decoration: none;
}
.toc-hit__title {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35;
}
.toc-hit__chapter {
  display: block; margin-top: 1px; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted);
}
.toc-hit__snip {
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-soft);
}
.toc-hit__snip mark, .toc-hit__title mark {
  background: #FFF2A8; color: inherit; padding: 0 1px; border-radius: 2px;
}

@media print { .toc-hits { display: none; } }

/* --------------------------------------------------- slide video sponsor */

/* Pita sponsor berbanding 3:1, video 16:9 — videonya dipasang di tengah
   dengan latar gelap supaya kotak sisa di kiri-kanan terlihat disengaja. */
.slideshow__frame--video {
  position: relative; padding: 0; background: #0d1117; overflow: hidden;
}
.slideshow__frame--video::after {
  content: attr(data-idle-label);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55); font-size: 13px; letter-spacing: .04em;
  pointer-events: none;
}
.slideshow__frame--video.is-playing::after { content: none; }
.slideshow__frame--video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100%; width: calc(100% * 16 / 9 / 3);   /* 16:9 di dalam kotak 3:1 */
  max-width: 100%; aspect-ratio: 16 / 9; border: 0;
}
@supports not (aspect-ratio: 16 / 9) {
  .slideshow__frame--video iframe { width: 100%; height: 100%; }
}

/* Berkas video lokal yang diputar berulang. Berbeda dengan pemutar YouTube,
   videonya sudah disiapkan 3:1 (1200 x 400) sehingga mengisi penuh bingkai
   pita sponsor — sama seperti gambar sponsor lain, tanpa kotak gelap. */
.slideshow__frame--video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  object-fit: fill; background: #0d1117;
}
/* bingkai berkas lokal tidak perlu tulisan "Video" — gambarnya sudah tampil */
.slideshow__frame--file::after { content: none; }

.slideshow__videolink {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600;
}

@media print { .slideshow__frame--video { display: none; } }

/* ------------------------------------- pemutar video di dalam isi laporan */

.video-figure { margin: 26px 0; }
.video-embed {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0d1117; border-radius: var(--radius); overflow: hidden; padding: 0;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-embed__play {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  width: 100%; border: 0; cursor: pointer; padding: 24px;
  background: radial-gradient(circle at 50% 45%, #1d2735 0%, #0d1117 70%);
  color: #fff; font-family: inherit;
}
.video-embed.is-playing .video-embed__play { display: none; }
.video-embed__icon {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .6);
  transition: transform .18s, background .18s;
}
.video-embed__icon svg { width: 24px; height: 24px; margin-left: 3px; color: #fff; }
.video-embed__play:hover .video-embed__icon { transform: scale(1.08); background: var(--brand-mid); }
.video-embed__label {
  font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center;
  max-width: 34ch; text-wrap: balance;
}
.video-embed__play:focus-visible { outline: 3px solid var(--blue-border); outline-offset: -3px; }

@media (max-width: 600px) {
  .video-embed__icon { width: 48px; height: 48px; }
  .video-embed__icon svg { width: 19px; height: 19px; }
  .video-embed__label { font-size: 14px; }
}
@media print { .video-embed { display: none; } }

/* ========================================================================== */
/*  IKLAN — VIP (banner), PRIME (kotak mengambang), REGULER (grid)            */
/* ========================================================================== */

/* ------------------------------------------------------- VIP: banner 1200x400
   Memakai komponen .slideshow, jadi hanya perlu penyesuaian kecil. Rasio
   bingkainya sudah 3 / 1 — persis 1200 x 400.                               */

.sponsors--vip {
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.adband--vip .slideshow__frame { padding: 0; }
.adband--vip .slideshow__frame img {
  width: 100%; height: 100%; max-height: none; object-fit: cover;
}

/* -------------------------------------------- PRIME: kotak mengambang 200x600
   Menempel di kanan bawah layar dan tetap di sana saat halaman digulir.
   Isi kotak (zona) mengikuti area yang sedang dibuka pengunjung — lihat
   AD_PRIME_ZONES di build.js dan initAdRail() di assets/js/site.js.
   Ubah ukuran di .ad-float__box, samakan AD_FLOAT_W/H di build.js.          */

.ad-float {
  position: fixed;
  right: 16px;
  bottom: 0;
  z-index: 54;                 /* di bawah tombol .to-top (55) dan header */
  width: 200px;
  max-width: calc(100vw - 24px);
}
.ad-float__box {
  position: relative;
  width: 200px;
  height: 600px;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .10);
  border-bottom: 0;
  box-shadow: var(--shadow-md);
}
.ad-float__zone { position: absolute; inset: 0; display: none; }
.ad-float__zone.is-current { display: block; }
.ad-float__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.ad-float__slide.is-active { opacity: 1; pointer-events: auto; }
.ad-float__slide .ad-link { display: block; width: 100%; height: 100%; }
.ad-float__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-float .ad-link:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 2px; }

/* Tombol tutup — dipasang oleh initAdRail() di assets/js/site.js dan baru
   terlihat setelah 30 detik (kelas .is-closable). Ukurannya cukup besar
   untuk disentuh di layar kecil, tetapi tidak menutupi isi iklan. */
.ad-float__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(.75);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s,
              background .15s, color .15s, border-color .15s;
}
.ad-float__close svg { width: 12px; height: 12px; }
.ad-float.is-closable .ad-float__close {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s,
              background .15s, color .15s, border-color .15s;
}
.ad-float__close:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ad-float__close:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 2px; }

/* Sesaat sesudah diklik: kotak meluncur turun lalu dibuang dari halaman. */
.ad-float.is-dismissed {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

/* Tombol "ke atas" digeser ke kiri kotak iklan supaya tidak bertumpuk. */
body.has-ad-float .to-top { right: 232px; }
@media (max-width: 760px) {
  body.has-ad-float .to-top { right: auto; left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-float__slide, .ad-float__close, .ad-float.is-dismissed { transition: none; }
}

@media print { .ad-float__close { display: none; } }

/* ------------------------------------------- REGULER: grid di halaman akhir */

.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin: 26px 0 8px;
}
.ad-grid__cell { margin: 0; }
.ad-grid__link {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.ad-grid__link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ad-grid__link img { display: block; width: 100%; height: auto; }
.ad-grid__link:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 2px; }

@media print {
  .ad-float, .sponsors--vip { display: none; }
  .ad-grid { grid-template-columns: repeat(2, 1fr); }
  .ad-grid__link { box-shadow: none; }
}

/* ========================================================================== */
/*  DUA BAHASA: pemilih bahasa di kepala halaman + kotak pesan               */
/* ========================================================================== */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
}
.lang-switch__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.lang-switch__select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235A6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lang-switch__select:hover { border-color: var(--brand-border); }
.lang-switch__select:focus-visible {
  outline: 3px solid var(--blue-border);
  outline-offset: 1px;
}
.lang-switch__links a { margin-right: 10px; font-size: 13px; }

@media (max-width: 720px) {
  .lang-switch__label { display: none; }
  .lang-switch { margin-right: 6px; }
  .lang-switch__select { padding: 7px 26px 7px 9px; font-size: 13px; }
}
@media print { .lang-switch { display: none; } }

/* ----------------------------------------------------------- kotak pesan */

.msgbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .18s ease;
}
.msgbox.is-open { opacity: 1; }
.msgbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 28, .55);
}
.msgbox__panel {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5);
  padding: 26px 26px 22px;
  text-align: center;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}
.msgbox.is-open .msgbox__panel { transform: none; }
.msgbox__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.msgbox__ok { min-width: 108px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .msgbox, .msgbox__panel { transition: none; }
}
@media print { .msgbox { display: none; } }


/* ==========================================================================
   Video berkas sendiri

   Berbeda dari sematan YouTube yang selalu 16:9, berkas video bisa tegak
   maupun mendatar. Bingkai di bawah membiarkan rasio asli video menentukan
   bentuknya dan hanya membatasi tingginya, sehingga rekaman tegak — misalnya
   tangkapan layar halaman A4 — tampil utuh tanpa pita hitam di kiri kanan.
   ========================================================================== */

.video-local {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #10161f;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.video-local__player {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
}
@media (max-width: 640px) {
  .video-local__player { max-height: 70vh; }
}

/* ==========================================================================
   Daftar isi cetak

   Dibangkitkan build.js dari pohon nav, jadi panjangnya mengikuti isi
   publikasi. Daftar emiten bisa memuat ratusan baris; dua kolom di layar
   lebar menahan halaman agar tidak memanjang berlebihan.
   ========================================================================== */

.print-toc { margin: 6px 0 0; }
.print-toc__chapter { margin: 0 0 26px; break-inside: avoid; }
.print-toc__title {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; font-size: 17px; line-height: 1.35;
}
.print-toc__num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #fff;
  transform: translateY(2px);
}
.print-toc__title a { color: var(--ink); text-decoration: none; }
.print-toc__title a:hover, .print-toc__title a:focus-visible { text-decoration: underline; }
.print-toc__list {
  margin: 0 0 0 34px; padding: 0; list-style: none;
  font-size: 14.5px; line-height: 1.75;
}
.print-toc__list li { break-inside: avoid; }
.print-toc__list a { color: var(--ink-muted); text-decoration: none; }
.print-toc__list a:hover, .print-toc__list a:focus-visible {
  color: var(--brand); text-decoration: underline;
}
@media (min-width: 900px) {
  .print-toc__list { columns: 2; column-gap: 36px; }
}

/* ---------------------------------------------------------------------
   GRAFIK SVG  (blok { t: 'chart' } di report.js)
   Digambar saat build, tanpa pustaka luar dan tanpa berkas gambar.
   --------------------------------------------------------------------- */
.chart-block { margin: 0 0 30px; }
.chart-block__title { font-size: 15.5px; font-weight: 700; color: var(--brand-dark);
  margin: 0 0 8px; }
.chart-block__legend { list-style: none; display: flex; flex-wrap: wrap;
  gap: 4px 18px; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--ink-soft); }
.chart-block__legend li { display: flex; align-items: center; gap: 7px; }
.chart-block__key { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.chart-block__frame { overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; padding: 12px 10px; }
.chart-block__frame svg { display: block; width: 100%; min-width: 460px; height: auto;
  font-family: inherit; }
.chart-block__data { margin: 12px 0 0; font-size: 14px; }
.chart-block__data summary { cursor: pointer; color: var(--brand-dark); font-weight: 600;
  font-size: 13.5px; }
.chart-block__data summary:hover { color: var(--brand); }
.chart-block__data .table-scroll { margin-top: 10px; }
.chart-block__data table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.chart-block__data th, .chart-block__data td { padding: 7px 12px; text-align: left;
  border-bottom: 1px solid var(--line-soft); }
.chart-block__data thead th { background: var(--surface-alt); font-weight: 600;
  white-space: nowrap; }
.chart-block__data tbody tr:last-child td { border-bottom: 0; }
.chart-block__data td + td, .chart-block__data th + th { text-align: right; }
.chart-block__when { display: block; font-size: 11px; color: var(--ink-muted); }
@media (max-width: 640px) {
  .chart-block__frame { padding: 8px 4px; }
}
.chart-block__frame svg.spark { min-width: 0; width: 108px; height: 26px; display: inline-block;
  vertical-align: middle; }
.table-block td svg.spark, .table-block th svg.spark { width: 108px; height: 26px;
  display: inline-block; vertical-align: middle; }

/* Logo lembaga di kepala kata sambutan. */
.inst-logo { margin: 0 0 20px; }
.inst-logo img { height: 54px; width: auto; max-width: 100%; display: block; }
@media (max-width: 640px) { .inst-logo img { height: 42px; } }

/* Rujukan ke halaman lain — dipakai pada halaman penerbit yang masih dipesan. */
.seealso { margin: 0 0 26px; padding: 16px 20px; background: var(--blue-light);
  border: 1px solid var(--blue-border); border-radius: var(--radius); }
.seealso__title { margin: 0 0 6px; font-weight: 700; color: var(--blue-dark); }
.seealso p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-soft); }
.seealso ul { margin: 0; padding: 0; list-style: none; display: flex;
  flex-wrap: wrap; gap: 8px 10px; }
.seealso li a { display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; background: #fff; border: 1px solid var(--blue-border);
  border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--blue-dark); }
.seealso li a:hover, .seealso li a:focus { border-color: var(--blue);
  background: #fff; text-decoration: underline; }
.seealso .code { font-weight: 700; letter-spacing: .03em; }