/*
 * ============================================================
 * BANK PERATURAN LOKAPAJAK — TEMA GLOBAL
 * ============================================================
 * Theme CSS terpusat untuk seluruh halaman detail peraturan.
 * Sinkron dengan BRAND.md (tokens) dan BANK-PERATURAN-SCHEMA.md.
 *
 * Cara pakai di halaman peraturan baru:
 *   <link rel="stylesheet" href="../tema-bank-peraturan.css">
 *
 * JANGAN EDIT INLINE STYLE per halaman peraturan — kalau perlu
 * adjust visual, edit file ini supaya konsisten ke semua peraturan.
 * ============================================================
 */

    /* ============================================
       Tokens — sinkron dengan BRAND.md
       ============================================ */
    :root {
      --green-50: #F1F7F3;
      --green-100: #DCEBE3;
      --green-200: #B3D6C4;
      --green-500: #1F7A5E;
      --green-700: #104D3B;
      --green-900: #0A2A22;
      --ink-0: #FFFFFF;
      --ink-50: #FBF8F2;
      --ink-100: #F4EFE5;
      --ink-200: #E8E1D2;
      --ink-300: #D4C9B5;
      --ink-400: #A8998A;
      --ink-500: #7A756D;
      --ink-600: #4A443C;
      --ink-700: #2E2924;
      --ink-800: #1A1714;
      --gold-100: #FBF3D9;
      --gold-400: #D4A84B;
      --gold-600: #96751F;
      --success: #0F6E56;
      --warning: #B8740A;
      --danger: #C4403F;
      --info: #2E6FB8;
      --r-sm: 6px;
      --r-md: 10px;
      --r-lg: 14px;
      --r-xl: 20px;
      --r-pill: 999px;
      --shadow-xs: 0 1px 2px rgba(13,13,12,0.04), 0 1px 1px rgba(13,13,12,0.03);
      --shadow-sm: 0 2px 8px rgba(13,13,12,0.05), 0 1px 2px rgba(13,13,12,0.03);
      --shadow-md: 0 8px 24px rgba(13,13,12,0.08), 0 2px 6px rgba(13,13,12,0.04);
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
      --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    /* ============================================
       Reset & base
       ============================================ */
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: 15px;
      line-height: 1.65;
      color: var(--ink-700);
      background: var(--ink-50);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--green-500); text-decoration: none; transition: color 150ms; }
    a:hover { color: var(--green-700); }
    code { font-family: var(--font-mono); font-size: 0.9em; }

    /* ============================================
       Top nav
       ============================================ */
    .topnav {
      position: sticky; top: 0; z-index: 50;
      background: var(--ink-50);
      border-bottom: 1px solid var(--ink-200);
      padding: 14px 0;
    }
    .topnav-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 32px;
      display: flex; align-items: center; gap: 24px;
    }
    .brand {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-serif); font-weight: 700; font-size: 22px;
      color: var(--ink-800); letter-spacing: -0.01em;
      text-decoration: none;
    }
    .brand-seal { width: 32px; height: 32px; flex-shrink: 0; }
    .brand .accent { color: var(--green-500); font-style: italic; }
    .breadcrumb {
      flex: 1;
      font-size: 13px; color: var(--ink-500);
    }
    .breadcrumb a { color: var(--ink-500); }
    .breadcrumb a:hover { color: var(--green-500); }
    .breadcrumb .sep { margin: 0 8px; color: var(--ink-300); }
    .breadcrumb .current { color: var(--ink-700); font-weight: 500; }

    /* ============================================
       Layout — page
       ============================================ */
    .page-wrap {
      max-width: 1280px; margin: 0 auto; padding: 32px;
    }

    /* Header card */
    .peraturan-head {
      background: var(--ink-0);
      border: 1px solid var(--ink-200);
      border-radius: var(--r-xl);
      padding: 36px 44px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 32px;
    }
    .badges-row {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-bottom: 18px;
    }
    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11.5px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 5px 11px; border-radius: var(--r-pill);
    }
    .badge-jenis {
      background: var(--green-50); color: var(--green-700);
      border: 1px solid var(--green-100);
    }
    .badge-status {
      background: var(--green-500); color: var(--ink-0);
    }
    .badge-status.dicabut { background: var(--danger); }
    .badge-status.diubah { background: var(--gold-400); color: var(--ink-800); }
    .badge-pajak {
      background: var(--ink-100); color: var(--ink-700);
      border: 1px solid var(--ink-200);
      font-family: var(--font-mono); letter-spacing: 0.04em;
    }
    .nomor-line {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--ink-500);
      margin-bottom: 10px;
      letter-spacing: 0.02em;
    }
    .judul {
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: 38px;
      line-height: 1.18;
      color: var(--ink-800);
      letter-spacing: -0.02em;
      margin: 0 0 14px;
    }
    .judul .accent { color: var(--green-500); font-style: italic; }
    .subjudul {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 500;
      font-size: 19px;
      color: var(--ink-500);
      line-height: 1.45;
      margin: 0 0 24px;
    }
    .meta-row {
      display: flex; flex-wrap: wrap; gap: 28px;
      padding-top: 22px; border-top: 1px solid var(--ink-200);
      font-size: 13px; color: var(--ink-500);
    }
    .meta-item .meta-label {
      display: block; font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--ink-400); margin-bottom: 4px;
    }
    .meta-item .meta-value {
      color: var(--ink-700); font-weight: 500; font-size: 13.5px;
    }

    /* ============================================
       Two-column layout
       ============================================ */
    .grid {
      display: grid;
      grid-template-columns: 220px 1fr 280px;
      gap: 36px;
    }
    @media (max-width: 1100px) {
      .grid { grid-template-columns: 1fr 280px; }
      .toc-sidebar { display: none; }
    }
    @media (max-width: 820px) {
      .grid { grid-template-columns: 1fr; }
      .peraturan-head { padding: 28px 24px; }
      .judul { font-size: 28px; }
      .page-wrap { padding: 16px; }
      /* Di hape: content (Ringkasan + body) duluan, sidebar info di bawah */
      .content { order: 1; }
      .info-sidebar { order: 2; }
    }

    /* TOC sidebar — left */
    .toc-sidebar { position: sticky; top: 90px; align-self: start; height: fit-content; }
    .toc-title {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink-400); margin-bottom: 12px; padding-left: 12px;
    }
    .toc-list { list-style: none; padding: 0; margin: 0; }
    .toc-list li { margin-bottom: 2px; }
    .toc-list a {
      display: block;
      font-size: 13px;
      color: var(--ink-500);
      padding: 6px 12px;
      border-left: 2px solid var(--ink-200);
      transition: all 150ms;
      line-height: 1.4;
    }
    .toc-list a:hover {
      color: var(--green-700); border-left-color: var(--green-200);
      background: var(--green-50);
    }
    .toc-list a.active {
      color: var(--green-700); border-left-color: var(--green-500);
      font-weight: 600;
    }
    .toc-list .lvl-3 a { padding-left: 24px; font-size: 12.5px; }
    .toc-list .lvl-4 a { padding-left: 36px; font-size: 12px; color: var(--ink-400); }

    /* Info sidebar — right */
    .info-sidebar { display: flex; flex-direction: column; gap: 16px; }
    .info-card {
      background: var(--ink-0);
      border: 1px solid var(--ink-200);
      border-radius: var(--r-lg);
      padding: 20px 22px;
      box-shadow: var(--shadow-xs);
    }
    .info-card h4 {
      font-family: var(--font-sans);
      font-size: 11.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink-500);
      margin: 0 0 14px;
    }
    .info-row {
      display: flex; flex-direction: column;
      padding: 10px 0;
      border-bottom: 1px solid var(--ink-100);
    }
    .info-row:last-child { border-bottom: none; padding-bottom: 0; }
    .info-row:first-of-type { padding-top: 0; }
    .info-row .label {
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--ink-400); margin-bottom: 4px;
    }
    .info-row .value {
      font-size: 13.5px; color: var(--ink-700); font-weight: 500;
      line-height: 1.45;
    }
    .info-row .value.mono { font-family: var(--font-mono); font-size: 12.5px; }
    .pdf-link {
      display: inline-flex; align-items: center; gap: 8px;
      width: 100%;
      padding: 12px 16px;
      background: var(--green-500); color: var(--ink-0);
      border-radius: var(--r-md);
      font-size: 13.5px; font-weight: 600;
      transition: background 150ms;
    }
    .pdf-link:hover { background: var(--green-700); color: var(--ink-0); }
    .pdf-link svg { flex-shrink: 0; }
    .pdf-link-secondary {
      background: transparent;
      color: var(--green-700);
      border: 1px solid var(--green-200);
    }
    .pdf-link-secondary:hover {
      background: var(--green-50);
      color: var(--green-700);
      border-color: var(--green-500);
    }
    .pdf-link-disabled {
      background: var(--ink-100);
      color: var(--ink-400);
      border: 1px solid var(--ink-200);
      cursor: not-allowed;
    }
    .pdf-link-disabled:hover { background: var(--ink-100); color: var(--ink-400); }

    /* CTA card untuk konsultasi */
    .cta-card {
      background: linear-gradient(180deg, var(--green-500) 0%, var(--green-700) 100%);
      color: var(--ink-0);
      border: none;
      border-radius: var(--r-lg);
      padding: 22px 24px;
      box-shadow: var(--shadow-sm);
    }
    .cta-card h4 {
      color: var(--ink-0); font-size: 11.5px;
      margin-bottom: 8px;
    }
    .cta-card p {
      font-size: 13.5px; line-height: 1.55; margin: 0 0 14px;
      color: rgba(255,255,255,0.92);
    }
    .cta-card p strong { color: var(--ink-0); }
    .cta-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 16px;
      background: var(--ink-0); color: var(--green-700);
      border-radius: var(--r-md);
      font-size: 13px; font-weight: 600;
    }
    .cta-btn:hover { background: var(--green-50); color: var(--green-700); }

    /* ============================================
       Main content (Markdown rendered)
       ============================================ */
    .content {
      background: var(--ink-0);
      border: 1px solid var(--ink-200);
      border-radius: var(--r-lg);
      padding: 36px 44px;
      box-shadow: var(--shadow-sm);
    }
    .content h2 {
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: 28px;
      color: var(--green-700);
      letter-spacing: -0.02em;
      margin: 40px 0 18px;
      padding-top: 8px;
      scroll-margin-top: 90px;
    }
    .content h2:first-child { margin-top: 0; }
    .content h3 {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 14px;
      color: var(--green-700);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 28px 0 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--ink-200);
      scroll-margin-top: 90px;
    }
    .content h4 {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 14.5px;
      color: var(--green-700);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 24px 0 10px;
    }
    .content p {
      margin: 0 0 16px;
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-700);
    }
    .content strong { color: var(--ink-800); font-weight: 600; }
    .content em { font-family: var(--font-serif); color: var(--green-700); font-style: italic; font-size: 1.02em; }
    .content ul, .content ol {
      margin: 0 0 18px; padding-left: 22px;
    }
    .content ul li, .content ol li {
      margin-bottom: 6px; line-height: 1.65;
    }
    .content ol > li::marker { font-weight: 600; color: var(--green-700); }
    .content hr {
      border: none; border-top: 1px solid var(--ink-200);
      margin: 36px 0;
    }
    .content blockquote {
      border-left: 3px solid var(--green-500);
      background: var(--green-50);
      padding: 14px 20px;
      margin: 20px 0;
      border-radius: 0 var(--r-md) var(--r-md) 0;
      color: var(--ink-700);
      font-size: 14.5px;
      line-height: 1.6;
    }
    .content blockquote p:last-child { margin-bottom: 0; }
    .content table {
      width: 100%;
      border-collapse: collapse;
      margin: 18px 0 24px;
      font-size: 14px;
      overflow: hidden;
      border-radius: var(--r-md);
      box-shadow: var(--shadow-xs);
    }
    .content thead th {
      background: var(--ink-100);
      color: var(--ink-700);
      font-weight: 600;
      text-align: left;
      padding: 12px 16px;
      font-size: 13px;
      letter-spacing: 0.02em;
      border-bottom: 2px solid var(--ink-200);
    }
    .content tbody td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--ink-100);
      vertical-align: top;
    }
    .content tbody tr:hover td {
      background: var(--ink-50);
    }
    .content tbody tr:last-child td { border-bottom: none; }
    .content code {
      background: var(--ink-100);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--ink-700);
      font-size: 0.9em;
    }
    /* Special: ringkasan praktis box */
    .content h2:first-child + .editor-note + ul,
    .content h2[id^="ringkasan"] + .editor-note + ul {
      background: var(--green-50);
      border: 1px solid var(--green-100);
      border-radius: var(--r-md);
      padding: 18px 22px 18px 42px;
      list-style: disc;
    }
    .content h2[id^="ringkasan"] + .editor-note + ul li {
      color: var(--ink-700);
      font-size: 14.5px;
    }

    /* Editor note — penanda konten yang ditambahkan editor Lokapajak */
    .content .editor-note {
      font-size: 12.5px;
      font-style: italic;
      color: var(--ink-500);
      background: var(--ink-100);
      border-left: 3px solid var(--ink-300);
      padding: 10px 14px;
      margin: 4px 0 16px;
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      line-height: 1.5;
    }

    /* Formal block — judul + frasa formal ("DENGAN RAHMAT TUHAN..." dst).
       Minimal styling: centered serif bold, no background/border.
       Biar terbaca formal tapi gak terlihat seperti card-in-card. */
    .content .formal-block {
      text-align: center;
      margin: 28px auto;
      max-width: 620px;
    }
    .content .formal-block p {
      margin: 6px 0;
      font-family: var(--font-serif);
      font-weight: 600;
      color: var(--ink-800);
      font-size: 15.5px;
      letter-spacing: 0.01em;
      line-height: 1.5;
    }
    .content .formal-block p strong {
      font-weight: 600;
      color: var(--ink-800);
    }
    .content .formal-block.lampiran-head { margin-top: 12px; }
    .content .formal-block.lampiran-head p { font-size: 15px; }

    /* Signature block — minimalist: subtle separator atas, right-aligned. */
    .content .signature-block {
      text-align: right;
      margin: 36px 0 16px;
      padding: 22px 4px 0;
      border-top: 1px solid var(--ink-200);
    }
    .content .signature-block p {
      margin: 4px 0;
      font-size: 13.5px;
      color: var(--ink-600);
      line-height: 1.55;
    }
    .content .signature-block p strong {
      color: var(--ink-800);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.01em;
    }
    .content .signature-block p em {
      color: var(--ink-400);
      font-style: italic;
      font-size: 12.5px;
      font-family: var(--font-serif);
      display: inline-block;
      margin: 8px 0;
    }
    .content .signature-block.signature-lampiran { margin-top: 44px; }

    /* Status alert — banner di atas content kalau status != berlaku */
    .status-alert {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 14px 16px;
      border-radius: var(--r-md);
      font-size: 13.5px;
      line-height: 1.55;
      margin-bottom: 24px;
    }
    .status-alert.dicabut {
      background: rgba(196, 64, 63, 0.08);
      border: 1px solid rgba(196, 64, 63, 0.28);
      color: var(--danger);
    }
    .status-alert.diubah {
      background: var(--gold-100);
      border: 1px solid rgba(212, 168, 75, 0.4);
      color: var(--gold-600);
    }
    .status-alert strong { font-weight: 700; }
    .status-alert svg { flex-shrink: 0; margin-top: 2px; }

    /* Related card — peraturan sebelumnya & setelahnya */
    .related-card {
      background: var(--ink-0);
      border: 1px solid var(--ink-200);
      border-radius: var(--r-lg);
      padding: 18px 20px;
      box-shadow: var(--shadow-xs);
    }
    .related-card h4 {
      font-family: var(--font-sans);
      font-size: 11.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink-500);
      margin: 0 0 14px;
    }
    .related-item {
      display: block;
      padding: 12px 14px;
      margin: 0 0 8px;
      border-radius: var(--r-md);
      border: 1px solid var(--ink-100);
      background: var(--ink-50);
      text-decoration: none;
      transition: all 150ms;
    }
    .related-item:last-child { margin-bottom: 0; }
    .related-item:hover:not(.empty) {
      border-color: var(--green-200);
      background: var(--green-50);
      transform: translateX(2px);
    }
    .related-item .arrow {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--green-700);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .related-item .nomor {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--ink-500);
      margin-bottom: 2px;
    }
    .related-item .label {
      font-size: 13px;
      color: var(--ink-700);
      font-weight: 500;
      line-height: 1.4;
    }
    .related-item.empty {
      background: transparent;
      border-style: dashed;
      cursor: default;
    }
    .related-item.empty .arrow { color: var(--ink-400); }
    .related-item.empty .label {
      color: var(--ink-400);
      font-style: italic;
      font-weight: 400;
      font-size: 12.5px;
    }
    .related-relations {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--ink-100);
    }
    .related-relations .reltype {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 0;
      font-size: 12.5px;
    }
    .related-relations .reltype .key {
      color: var(--ink-500); font-weight: 500;
    }
    .related-relations .reltype .val {
      color: var(--ink-700); font-weight: 600;
    }
    .related-relations .reltype .val.muted {
      color: var(--ink-400); font-weight: 400; font-style: italic;
    }

    .content h3 + p,
    .content h3 + ul,
    .content h3 + ol { margin-top: 8px; }

    /* (Menimbang & Mengingat tetap align-left default — sesuai keputusan brand) */

    /* MEMUTUSKAN: line — pemisah inline kecil, bukan judul section.
       Tidak duplikasi dengan h2 "Diktum" yang ada di TOC. */
    .content .memutuskan-line {
      text-align: center;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.16em;
      color: var(--ink-600);
      margin: 18px 0 16px;
      padding: 6px 0;
      border-top: 1px solid var(--ink-200);
      border-bottom: 1px solid var(--ink-200);
    }

    /* ============================================
       Loading state
       ============================================ */
    .loading {
      text-align: center;
      padding: 80px 20px;
      color: var(--ink-500);
      font-size: 14px;
    }
    .spin {
      display: inline-block;
      width: 16px; height: 16px;
      border: 2px solid var(--ink-200);
      border-top-color: var(--green-500);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      vertical-align: -3px;
      margin-right: 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ============================================
       Footer
       ============================================ */
    .footer {
      max-width: 1280px; margin: 60px auto 0; padding: 32px 32px 60px;
      border-top: 1px solid var(--ink-200);
      font-size: 12.5px; color: var(--ink-500);
      text-align: center;
    }



/* Copy protection — applied to .content (peraturan body) */
.content, .content * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Allow selection on inline links/code so user can still grab URLs/code */
.content a, .content code {
  user-select: text;
  -webkit-user-select: text;
}
/* Print: hide content, show "see online" */
@media print {
  .content { display: none !important; }
  .toc-sidebar, .info-sidebar { display: none !important; }
  .print-notice {
    display: block !important;
    text-align: center;
    padding: 80px 20px;
    font-family: var(--font-serif);
  }
  .print-notice h1 { font-size: 22px; margin-bottom: 12px; color: var(--ink-800); }
  .print-notice p { font-size: 14px; color: var(--ink-600); }
}
.print-notice { display: none; }

/* Toast that flashes when user tries to copy */
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink-800);
  color: var(--ink-0);
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  opacity: 0;
  transition: transform 200ms, opacity 200ms;
  z-index: 200;
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}
.copy-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Watermark — visible footer in content */
.copyright-notice {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--ink-600);
  line-height: 1.6;
}
.copyright-notice strong { color: var(--ink-800); }
.copyright-notice a { color: var(--green-700); font-weight: 600; }



/* Listing page (Bank Peraturan index) */
.listing-body { background: var(--ink-50); }
.listing-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.listing-hero {
  text-align: center;
  margin-bottom: 36px;
}
.listing-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.listing-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  color: var(--ink-800);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.listing-hero h1 em {
  color: var(--green-500);
  font-style: italic;
}
.listing-sub {
  font-size: 16px;
  color: var(--ink-500);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}
.listing-search {
  max-width: 720px;
  margin: 0 auto 48px;
}
.listing-section-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink-700);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.peraturan-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.peraturan-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-200);
}
.peraturan-card .card-header {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.peraturan-card .card-nomor {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-500);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.peraturan-card .card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-800);
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.peraturan-card .card-tags code {
  display: inline-block;
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-right: 4px;
  font-family: var(--font-mono);
}

/* Pagefind UI override — match Lokapajak styling */
:root {
  --pagefind-ui-primary: var(--green-700);
  --pagefind-ui-text: var(--ink-700);
  --pagefind-ui-background: #fff;
  --pagefind-ui-border: var(--ink-200);
  --pagefind-ui-tag: var(--ink-100);
  --pagefind-ui-border-radius: 12px;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-sans);
}
.pagefind-ui__search-input { font-size: 15px !important; padding: 14px 18px !important; }
.pagefind-ui__result-link { font-family: var(--font-serif) !important; }

@media (max-width: 600px) {
  .listing-wrap { padding: 24px 16px 48px; }
  .listing-hero h1 { font-size: 26px; }
  .listing-sub { font-size: 14.5px; }
  .cards-grid { grid-template-columns: 1fr; }
}



/* === Related card — chain navigation === */
.related-card .reltype-list { display: flex; flex-direction: column; gap: 0; }

/* Single-row relation (1 item, empty state, or inline) */
.reltype-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: wrap;
}
.reltype-row:last-child { border-bottom: none; padding-bottom: 0; }
.reltype-row .key {
  color: var(--ink-500);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 12px;
}
.reltype-row .val {
  color: var(--ink-700);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}
.reltype-row .val.muted {
  color: var(--ink-400);
  font-weight: 400;
  font-style: italic;
  font-family: var(--font-sans);
}
.reltype-row .val.val-na { color: var(--ink-500); }
.reltype-row .val-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 150ms;
}
.reltype-row .val-link:hover {
  background: var(--green-100);
  border-color: var(--green-300);
  transform: translateY(-1px);
}

/* Collapsible block for multi-item relations */
.reltype-block {
  border-bottom: 1px solid var(--ink-100);
}
.reltype-block:last-child { border-bottom: none; }

/* Hide native marker — multiple selectors for cross-browser */
details > summary { list-style: none !important; list-style-type: none !important; }
details > summary::-webkit-details-marker { display: none !important; }
details > summary::marker { content: "" !important; display: none !important; }
details > summary::before { display: none !important; }

.reltype-summary {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  transition: color 150ms;
  list-style: none;
}
.reltype-summary:hover { color: var(--green-700); }
.reltype-summary .key {
  color: var(--ink-500);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 12px;
}
.reltype-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.reltype-summary-right .val {
  color: var(--green-700);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.reltype-summary .chevron {
  color: var(--ink-400);
  flex-shrink: 0;
  transition: transform 220ms ease;
}
.reltype-block[open] > .reltype-summary .chevron {
  transform: rotate(90deg);
  color: var(--green-700);
}

.reltype-body {
  padding: 4px 0 16px;
  animation: relExpand 220ms ease-out;
}
@keyframes relExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rel-availability {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  background: var(--green-50);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
  border: 1px solid var(--green-100);
}

/* List of related items */
.rel-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rel-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0;
}

/* Each rel-item — bullet + content + indicator */
.rel-item {
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.45;
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.rel-item.available {
  background: #fff;
  border: 1px solid var(--green-100);
}
.rel-item.available:hover {
  border-color: var(--green-300);
  background: var(--green-50);
  transform: translateX(2px);
  box-shadow: var(--shadow-xs);
}
.rel-item.available a {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.rel-item.na {
  padding: 10px 12px;
  background: var(--ink-50);
  border: 1px dashed var(--ink-300);
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

/* Bullet — green dot for available, gray for NA */
.rel-bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  margin-top: 6px;
  box-shadow: 0 0 0 3px var(--green-100);
}
.rel-bullet-na {
  background: transparent;
  border: 1.5px solid var(--ink-300);
  box-shadow: none;
}

.rel-content {
  flex: 1;
  min-width: 0;  /* Allow truncation if needed */
}
.rel-item .rel-nomor {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--green-700);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.rel-item.na .rel-nomor { color: var(--ink-500); }
.rel-item .rel-judul {
  display: block;
  color: var(--ink-700);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
}
.rel-item.na .rel-judul { color: var(--ink-500); font-style: italic; }
.rel-item .rel-pasal {
  display: block;
  font-size: 10.5px;
  color: var(--ink-500);
  margin-top: 3px;
  font-style: italic;
}
.rel-status-tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--ink-500);
}
.rel-status-tag.rel-status-dicabut {
  background: rgba(196, 64, 63, 0.08);
  color: var(--danger);
}
.rel-status-tag.rel-status-diubah {
  background: var(--gold-100);
  color: var(--gold-600);
}
.rel-na-tag {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  background: #fff;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-200);
  margin-top: 2px;
  white-space: nowrap;
}

.rel-item.available .rel-go {
  flex-shrink: 0;
  color: var(--green-500);
  font-weight: 700;
  font-size: 16px;
  transition: transform 150ms;
  align-self: center;
}
.rel-item.available a:hover .rel-go {
  transform: translateX(4px);
  color: var(--green-700);
}



/* === Mobile fixes — peraturan detail === */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 820px) {
  .topnav { padding: 10px 0; }
  .topnav-inner { padding: 0 16px; gap: 12px; }
  .breadcrumb {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .breadcrumb .sep { margin: 0 4px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand-seal { width: 28px; height: 28px; }
}

@media (max-width: 600px) {
  .breadcrumb { font-size: 11.5px; }
  /* Tampilkan cuma Bank Peraturan kalau viewport tiny */
  .breadcrumb a:first-of-type, .breadcrumb .sep:first-of-type { display: none; }

  .page-wrap { padding: 14px 12px; overflow-x: hidden; }
  .peraturan-head { padding: 22px 18px; margin-bottom: 18px; border-radius: var(--r-lg); }
  .badges-row { gap: 6px; margin-bottom: 14px; }
  .badge { font-size: 10.5px; padding: 4px 9px; letter-spacing: 0.06em; }
  .nomor-line { font-size: 12px; margin-bottom: 8px; }
  .judul { font-size: 22px; line-height: 1.18; margin-bottom: 10px; word-break: break-word; }
  .subjudul { font-size: 14.5px; margin-bottom: 16px; line-height: 1.4; }
  .meta-row { gap: 14px 18px; padding-top: 16px; }
  .meta-item { min-width: 100px; }
  .meta-item .meta-label { font-size: 10px; }
  .meta-item .meta-value { font-size: 12.5px; }

  /* Content card */
  .content { padding: 20px 18px; border-radius: var(--r-md); overflow-wrap: break-word; word-break: break-word; }
  .content h2 { font-size: 22px; margin: 26px 0 14px; }
  .content h3 { font-size: 12.5px; margin: 20px 0 10px; }
  .content p, .content li { font-size: 14px; line-height: 1.65; }
  .content table { font-size: 12px; display: block; overflow-x: auto; }
  .content thead th, .content tbody td { padding: 8px 10px; }
  .content .formal-block p { font-size: 14px; }
  .content .formal-block { margin: 20px auto; }

  /* Info sidebar */
  .info-card, .related-card, .cta-card { padding: 16px 18px; border-radius: var(--r-md); }
  .info-card h4, .related-card h4 { font-size: 11px; }

  /* Copyright notice */
  .copyright-notice { padding: 14px 16px; font-size: 11.5px; }

  /* Footer */
  .footer { padding: 24px 16px 40px; font-size: 11.5px; }
}

@media (max-width: 380px) {
  .judul { font-size: 19px; }
  .subjudul { font-size: 13.5px; }
  .meta-row { gap: 12px; }
  .meta-item { min-width: 88px; }
}