/* ============================================================
       Tata kelola — halaman, tab, bagan organisasi, kebijakan, FAQ
       ============================================================ */

    html.page-governance { scroll-padding-top: 190px; }

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

    .page-hero {
      position: relative;
      padding: 52px 0 22px;
      isolation: isolate;
      overflow: clip;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image:
        linear-gradient(rgba(146, 202, 238, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(146, 202, 238, .045) 1px, transparent 1px);
      background-size: 74px 74px;
      -webkit-mask-image: radial-gradient(ellipse 74% 80% at 60% 20%, #000 0%, transparent 76%);
      mask-image: radial-gradient(ellipse 74% 80% at 60% 20%, #000 0%, transparent 76%);
      pointer-events: none;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px;
      margin-bottom: 24px;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .breadcrumb a { transition: color .2s ease; }
    .breadcrumb a:hover { color: var(--brand-light); }
    .breadcrumb span[aria-current="page"] { color: var(--brand-pale); }

    .page-hero h1 {
      max-width: 20ch;
      margin-top: 22px;
      font-size: clamp(2.35rem, 5.4vw, 4.35rem);
      font-weight: 600;
      line-height: 1.01;
      letter-spacing: -.052em;
    }

    .page-hero h1 em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -.015em;
      color: var(--brand-light);
    }

    .page-lead {
      max-width: 68ch;
      margin-top: 22px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }

    .page-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 22px;
      margin-top: 28px;
      color: var(--muted-2);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .05em;
    }

    .page-meta span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .page-meta svg {
      width: 13px;
      height: 13px;
      color: var(--brand-light);
    }

    .page-meta a {
      color: var(--brand-light);
      border-bottom: 1px solid rgba(142, 216, 255, .3);
      transition: border-color .2s ease;
    }

    .page-meta a:hover { border-bottom-color: var(--brand-light); }

    /* ---------- Tabs ---------- */

    .tab-bar {
      position: sticky;
      top: 82px;
      z-index: 60;
      padding: 12px 0;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    }

    .tab-bar.is-stuck {
      border-top-color: var(--line);
      border-bottom-color: var(--line);
      background: rgba(4, 20, 38, .9);
      box-shadow: 0 18px 38px rgba(0, 7, 15, .28);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
    }

    .tab-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(7, 30, 54, .68);
    }

    .tab-link {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 13px 15px 14px;
      border: 1px solid transparent;
      border-radius: 12px;
      color: var(--muted);
      transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s var(--ease);
    }

    .tab-link:hover {
      background: rgba(255, 255, 255, .035);
      color: var(--text-soft);
    }

    .tab-link.is-active {
      border-color: rgba(142, 216, 255, .34);
      background:
        linear-gradient(135deg, rgba(142, 216, 255, .15), rgba(47, 134, 190, .1));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .tab-num {
      color: var(--muted-2);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .18em;
    }

    .tab-link.is-active .tab-num { color: var(--brand-light); }

    .tab-label {
      color: inherit;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -.01em;
    }

    .tab-link.is-active .tab-label { color: #fff; }

    .tab-panel { padding-top: 58px; }

    .js .tab-panel { display: none; }

    .js .tab-panel.is-active {
      display: block;
      animation: panel-in .4s var(--ease) both;
    }

    @keyframes panel-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }

    /* ---------- Panel heading ---------- */

    .panel-head {
      max-width: 780px;
      margin-bottom: 38px;
    }

    .panel-head h2 {
      max-width: 21ch;
      margin-top: 16px;
      font-size: clamp(1.85rem, 3.6vw, 2.9rem);
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    .panel-head h2 em {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -.01em;
      color: var(--brand-light);
    }

    .panel-head p {
      max-width: 66ch;
      margin-top: 16px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }

    .panel-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .panel-meta span {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .025);
      color: var(--muted-2);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .subhead {
      margin: 46px 0 20px;
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    /* ---------- Organisation chart ---------- */

    .org-chart {
      position: relative;
      padding: 34px 28px 38px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 50% 0%, rgba(47, 134, 190, .16), transparent 55%),
        linear-gradient(180deg, rgba(10, 43, 75, .48) 0%, rgba(5, 24, 44, .36) 100%);
      overflow: hidden;
    }

    .org-tier {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .org-tier + .org-tier { margin-top: 34px; }

    .org-tier + .org-tier::before {
      content: "";
      position: absolute;
      top: -34px;
      left: 50%;
      width: 1px;
      height: 34px;
      background: linear-gradient(180deg, rgba(158, 207, 241, .12), var(--brand-light));
    }

    .org-node {
      position: relative;
      width: min(100%, 330px);
      padding: 17px 22px 18px;
      border: 1px solid var(--line-strong);
      border-radius: 15px;
      background: linear-gradient(155deg, rgba(19, 61, 97, .95), rgba(7, 30, 54, .98));
      text-align: center;
      box-shadow: 0 14px 34px rgba(0, 8, 18, .22);
    }

    .org-node--lead {
      border-color: rgba(142, 216, 255, .46);
      background: linear-gradient(150deg, #17547f 0%, #0b3153 70%, #082744 100%);
      box-shadow: 0 20px 44px rgba(0, 8, 18, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .org-role {
      display: block;
      color: var(--brand-light);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .18em;
      line-height: 1.45;
      text-transform: uppercase;
    }

    .org-name {
      display: block;
      margin-top: 7px;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -.01em;
    }

    .org-note {
      display: block;
      margin-top: 4px;
      color: var(--muted-2);
      font-size: 9.5px;
      line-height: 1.45;
    }

    .org-tier--split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 38px;
      width: 100%;
      max-width: 880px;
      margin-inline: auto;
    }

    .org-support {
      position: relative;
      width: 100%;
      max-width: 230px;
      padding: 13px 16px 14px;
      border: 1px dashed rgba(158, 207, 241, .34);
      border-radius: 12px;
      background: rgba(255, 255, 255, .022);
      text-align: center;
    }

    .org-tier--split .org-support:first-child { justify-self: end; }
    .org-tier--split .org-support:last-child { justify-self: start; }

    .org-support .org-role { color: var(--muted); font-size: 8px; }
    .org-support .org-name { font-size: 12px; }

    .org-tier--split .org-support:first-child::after,
    .org-tier--split .org-support:last-child::before {
      content: "";
      position: absolute;
      top: 50%;
      width: 38px;
      border-top: 1px dashed rgba(158, 207, 241, .45);
    }

    .org-tier--split .org-support:first-child::after { right: -39px; }
    .org-tier--split .org-support:last-child::before { left: -39px; }

    .org-divisions {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 48px;
    }

    .org-divisions::before {
      content: "";
      position: absolute;
      top: -24px;
      left: 16.666%;
      right: 16.666%;
      height: 1px;
      background: var(--line-strong);
    }

    .org-divisions::after {
      content: "";
      position: absolute;
      top: -48px;
      left: 50%;
      width: 1px;
      height: 48px;
      background: linear-gradient(180deg, var(--brand-light), var(--line-strong));
    }

    .org-division {
      position: relative;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(13, 52, 89, .6) 0%, rgba(6, 27, 49, .55) 100%);
    }

    .org-division::before {
      content: "";
      position: absolute;
      top: -24px;
      left: 50%;
      width: 1px;
      height: 24px;
      background: var(--line-strong);
    }

    .org-division-head {
      padding-bottom: 13px;
      border-bottom: 1px solid var(--line);
    }

    .org-division-head h3 {
      margin-top: 7px;
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -.01em;
    }

    .org-division-head strong {
      display: block;
      margin-top: 6px;
      color: var(--brand-pale);
      font-size: 10.5px;
      font-weight: 500;
    }

    .org-units {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .org-unit {
      padding: 10px 12px;
      border: 1px solid rgba(158, 207, 241, .13);
      border-radius: 10px;
      background: rgba(255, 255, 255, .025);
    }

    .org-unit > span {
      display: block;
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .org-unit > strong {
      display: block;
      margin-top: 3px;
      color: var(--text-soft);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
    }

    .org-subunits {
      display: grid;
      gap: 5px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed rgba(158, 207, 241, .16);
    }

    .org-subunits li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.45;
    }

    .org-subunits strong {
      color: var(--text-soft);
      font-size: 9.5px;
      font-weight: 600;
      text-align: right;
    }

    .org-note-box {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      margin-top: 20px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .022);
    }

    .org-note-box svg {
      width: 16px;
      height: 16px;
      margin-top: 2px;
      color: var(--brand-light);
    }

    .org-note-box p {
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.7;
    }

    .org-note-box strong { color: var(--text-soft); font-weight: 600; }

    .org-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 26px;
    }

    .org-fact {
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(10, 43, 75, .28);
    }

    .org-fact strong {
      display: block;
      color: var(--brand-pale);
      font-family: var(--serif);
      font-size: 1.7rem;
      font-weight: 400;
      line-height: 1;
    }

    .org-fact span {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    /* ---------- Code of ethics ---------- */

    .tirta-intro {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
      padding: 22px 24px;
      border: 1px solid rgba(142, 216, 255, .24);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(142, 216, 255, .09), rgba(47, 134, 190, .05));
    }

    .tirta-acronym {
      display: block;
      color: var(--brand-light);
      font-family: var(--serif);
      font-size: 2.1rem;
      font-style: italic;
      line-height: 1;
      letter-spacing: .02em;
    }

    .tirta-intro p {
      max-width: 58ch;
      color: var(--text-soft);
      font-size: 12.5px;
      line-height: 1.7;
    }

    .tirta-intro p strong { color: var(--brand-pale); }

    .tirta-grid {
      display: grid;
      gap: 12px;
    }

    .tirta-card {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
      gap: 24px;
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(10, 43, 75, .26);
      transition: border-color .2s ease, background .2s ease;
    }

    .tirta-card:hover {
      border-color: var(--line-strong);
      background: rgba(10, 43, 75, .38);
    }

    .tirta-name {
      display: flex;
      align-items: flex-start;
      gap: 11px;
    }

    .tirta-letter {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border: 1px solid rgba(142, 216, 255, .28);
      border-radius: 9px;
      background: rgba(142, 216, 255, .08);
      color: var(--brand-light);
      font-family: var(--serif);
      font-size: 1.05rem;
      font-style: italic;
    }

    .tirta-name h3 {
      padding-top: 4px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
    }

    .tirta-col h4 {
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .tirta-col ul {
      display: grid;
      gap: 6px;
      margin-top: 9px;
    }

    .tirta-col li {
      position: relative;
      padding-left: 14px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.55;
    }

    .tirta-col li::before {
      content: "";
      position: absolute;
      top: .55em;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .tirta-col--do li::before { background: var(--mint); }
    .tirta-col--dont li::before { background: #f4a3a3; }

    .tirta-col--dont h4 { color: #e6b1b1; }

    .ethics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }

    .ethics-card {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, .022);
    }

    .ethics-card svg {
      width: 19px;
      height: 19px;
      color: var(--brand-light);
    }

    .ethics-card h4 {
      margin-top: 12px;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    .ethics-card p {
      margin-top: 7px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.65;
    }

    .split-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 24px;
    }

    .info-card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(10, 43, 75, .28);
    }

    .info-card h3 {
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.01em;
    }

    .info-card > p {
      margin-top: 9px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.7;
    }

    .check-list {
      display: grid;
      gap: 9px;
      margin-top: 15px;
    }

    .check-list li {
      position: relative;
      padding-left: 22px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.65;
    }

    .check-list li::before {
      content: "";
      position: absolute;
      top: .48em;
      left: 0;
      width: 10px;
      height: 6px;
      border-left: 1.5px solid var(--mint);
      border-bottom: 1.5px solid var(--mint);
      transform: rotate(-45deg);
    }

    .callout {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      margin-top: 24px;
      padding: 24px;
      border: 1px solid rgba(143, 240, 213, .24);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(143, 240, 213, .07), rgba(47, 134, 190, .05));
    }

    .callout svg {
      width: 24px;
      height: 24px;
      color: var(--mint);
    }

    .callout h3 {
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
    }

    .callout p {
      margin-top: 8px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.75;
    }

    .callout a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 13px;
      color: var(--brand-light);
      font-size: 11.5px;
      font-weight: 600;
      border-bottom: 1px solid rgba(142, 216, 255, .3);
    }

    .callout a:hover { border-bottom-color: var(--brand-light); }

    .callout a svg {
      width: 13px;
      height: 13px;
      color: currentColor;
    }

    /* ---------- Policies ---------- */

    .policy-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .policy-card {
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: linear-gradient(180deg, rgba(10, 43, 75, .36), rgba(6, 27, 49, .28));
    }

    .policy-card--wide { grid-column: 1 / -1; }

    .policy-top {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .policy-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      border: 1px solid rgba(142, 216, 255, .26);
      border-radius: 11px;
      background: rgba(142, 216, 255, .07);
      color: var(--brand-light);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .policy-tag {
      display: block;
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .policy-top h3 {
      margin-top: 3px;
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: -.015em;
    }

    .policy-card > p {
      margin-top: 15px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.75;
    }

    .principle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      gap: 9px;
      margin-top: 18px;
    }

    .principle-grid div {
      padding: 13px 14px;
      border: 1px solid rgba(158, 207, 241, .13);
      border-radius: 10px;
      background: rgba(255, 255, 255, .022);
    }

    .principle-grid strong {
      display: block;
      color: var(--brand-pale);
      font-size: 10.5px;
      font-weight: 600;
    }

    .principle-grid span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.55;
    }

    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 18px;
    }

    .pillar {
      padding: 14px;
      border: 1px solid rgba(158, 207, 241, .13);
      border-radius: 10px;
      background: rgba(255, 255, 255, .022);
    }

    .pillar strong {
      display: block;
      color: var(--brand-pale);
      font-size: 10.5px;
      font-weight: 600;
    }

    .pillar span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.55;
    }

    .policy-list {
      display: grid;
      gap: 7px;
      margin-top: 16px;
    }

    .policy-list li {
      position: relative;
      padding-left: 14px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.6;
    }

    .policy-list li::before {
      content: "";
      position: absolute;
      top: .6em;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brand-light);
    }

    .policy-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .mini-head {
      margin-top: 18px;
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .iso-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 16px;
    }

    .iso-grid div {
      padding: 12px;
      border: 1px solid rgba(158, 207, 241, .13);
      border-radius: 9px;
      background: rgba(255, 255, 255, .022);
    }

    .iso-grid strong {
      display: block;
      color: var(--brand-pale);
      font-size: 10.5px;
      font-weight: 700;
    }

    .iso-grid span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 9px;
    }

    .csr-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .csr-card {
      display: flex;
      flex-direction: column;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(10, 43, 75, .28);
    }

    .csr-tag {
      width: fit-content;
      padding: 5px 9px;
      border: 1px solid rgba(143, 240, 213, .22);
      border-radius: 999px;
      background: rgba(143, 240, 213, .06);
      color: var(--mint);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .csr-card h4 {
      margin-top: 13px;
      color: var(--text);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.45;
    }

    .csr-card p {
      margin-top: 9px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.65;
    }

    /* ---------- FAQ ---------- */

    .faq-list {
      display: grid;
      gap: 10px;
      max-width: 900px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(10, 43, 75, .28);
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
    }

    .faq-item:hover { border-color: var(--line-strong); }
    .faq-item[open] { background: rgba(10, 43, 75, .42); border-color: rgba(142, 216, 255, .3); }

    .faq-item summary {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 18px 20px;
      cursor: pointer;
      list-style: none;
      color: var(--text-soft);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
    }

    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: #fff; }

    .faq-index {
      flex-shrink: 0;
      color: var(--brand-light);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
    }

    .faq-item summary::after {
      content: "+";
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      margin-left: auto;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 7px;
      color: var(--brand-light);
      font-size: 15px;
      font-weight: 400;
      line-height: 1;
      transition: background .2s ease, border-color .2s ease;
    }

    .faq-item[open] summary::after {
      content: "−";
      border-color: rgba(142, 216, 255, .4);
      background: rgba(142, 216, 255, .1);
    }

    .faq-body {
      padding: 0 20px 20px 44px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.8;
    }

    .faq-body p + p { margin-top: 9px; }

    .faq-body ul {
      display: grid;
      gap: 5px;
      margin-top: 9px;
    }

    .faq-body li {
      position: relative;
      padding-left: 14px;
    }

    .faq-body li::before {
      content: "";
      position: absolute;
      top: .65em;
      left: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--brand-light);
    }

    .faq-body strong { color: var(--text-soft); font-weight: 600; }
    .faq-body a { color: var(--brand-light); border-bottom: 1px solid rgba(142, 216, 255, .3); }
    .faq-body a:hover { border-bottom-color: var(--brand-light); }

    .faq-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 28px;
      padding: 24px 26px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(47, 134, 190, .12), rgba(10, 43, 75, .22));
    }

    .faq-cta h3 {
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.01em;
    }

    .faq-cta p {
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.6;
    }

    .faq-cta .btn { flex-shrink: 0; }

    /* ---------- Homepage governance teaser ---------- */

    .gov-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .gov-card {
      display: flex;
      flex-direction: column;
      min-height: 200px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(180deg, rgba(10, 43, 75, .38), rgba(6, 27, 49, .3));
      transition: transform .25s var(--ease), border-color .25s ease, background .25s ease;
    }

    .gov-card:hover {
      transform: translateY(-4px);
      border-color: var(--line-strong);
      background: linear-gradient(180deg, rgba(13, 52, 89, .5), rgba(6, 27, 49, .34));
    }

    .gov-num {
      color: var(--brand-light);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .17em;
    }

    .gov-card h3 {
      margin-top: 12px;
      color: var(--text);
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -.01em;
    }

    .gov-card p {
      margin-top: 8px;
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.6;
    }

    .gov-arrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: auto;
      padding-top: 16px;
      color: var(--brand-light);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .04em;
    }

    .gov-arrow svg {
      width: 13px;
      height: 13px;
      transition: transform .25s var(--ease);
    }

    .gov-card:hover .gov-arrow svg { transform: translateX(3px); }

    /* ---------- Footer webmail ---------- */

    .footer-webmail {
      display: grid;
      gap: 5px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .footer-webmail span {
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .footer-webmail a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--brand-light);
      font-size: 10.5px;
      font-weight: 600;
    }

    .footer-webmail a:hover { text-decoration: underline; }

    .footer-webmail svg {
      width: 11px;
      height: 11px;
    }

    /* ---------- Responsive ---------- */

    @media (max-width: 1080px) {
      .org-chart { padding: 28px 22px 32px; }
      .org-tier--split { gap: 28px; }
      .org-tier--split .org-support:first-child::after,
      .org-tier--split .org-support:last-child::before { width: 28px; }
      .org-tier--split .org-support:first-child::after { right: -29px; }
      .org-tier--split .org-support:last-child::before { left: -29px; }
      .tirta-card { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
      .gov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 980px) {
      html.page-governance { scroll-padding-top: 180px; }

      .tab-bar { top: 74px; padding: 10px 0; }
      .tab-list {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .tab-list::-webkit-scrollbar { display: none; }
      .tab-link { flex: 0 0 auto; min-width: 150px; }
      .tab-label { white-space: nowrap; }
      .tab-panel { padding-top: 46px; }

      .org-tier--split {
        grid-template-columns: 1fr;
        gap: 10px;
        width: min(100%, 360px);
      }

      .org-tier--split .org-support {
        max-width: none;
        justify-self: stretch;
        border-style: solid;
      }

      .org-tier--split .org-support:first-child::after,
      .org-tier--split .org-support:last-child::before { display: none; }

      .org-tier--split .org-node { width: 100%; }

      .org-divisions {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 30px;
      }

      .org-divisions::before,
      .org-divisions::after,
      .org-division::before { display: none; }

      .org-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      .tirta-card {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .tirta-name { align-items: center; }
      .tirta-col { padding-top: 12px; border-top: 1px solid rgba(158, 207, 241, .12); }

      .split-grid { grid-template-columns: 1fr; }
      .policy-grid { grid-template-columns: 1fr; }
      .policy-card--wide { grid-column: auto; }
      .pillar-grid { grid-template-columns: 1fr; }
      .csr-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .page-hero { padding-top: 42px; }
      .page-hero h1 { font-size: clamp(2.2rem, 8.4vw, 3rem); }
      .page-lead { font-size: 14px; }
      .page-meta { gap: 8px 16px; font-size: 9.5px; }

      .org-chart { padding: 24px 16px 28px; border-radius: 18px; }
      .org-node { padding: 15px 16px 16px; }
      .org-name { font-size: 13px; }
      .org-division { padding: 16px; }

      .org-facts { grid-template-columns: 1fr; gap: 8px; }
      .org-fact { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; }
      .org-fact span { margin-top: 0; }

      .tirta-intro { padding: 18px; }
      .tirta-card { padding: 17px; }
      .policy-card { padding: 20px; }
      .info-card { padding: 20px; }
      .callout { padding: 20px; grid-template-columns: 26px minmax(0, 1fr); gap: 13px; }
      .csr-card { padding: 18px; }

      .faq-item summary { padding: 16px; gap: 12px; font-size: 12px; }
      .faq-body { padding: 0 16px 18px 40px; }
      .faq-cta { padding: 20px; }
      .faq-cta .btn { width: 100%; }
    }

    @media (max-width: 540px) {
      html.page-governance { scroll-padding-top: 165px; }

      .tab-bar { top: 68px; }
      .tab-list { gap: 5px; padding: 6px; border-radius: 14px; }
      .tab-link { min-width: 138px; padding: 11px 12px 12px; }
      .tab-label { font-size: 11.5px; }
      .tab-panel { padding-top: 38px; }

      .panel-head h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
      .panel-head p { font-size: 12.5px; }
      .subhead { margin-top: 36px; }

      .org-role { font-size: 8px; }
      .org-support .org-role { font-size: 7.5px; }
      .org-unit > span { font-size: 7.5px; }

      .ethics-grid { grid-template-columns: 1fr; }
      .principle-grid { grid-template-columns: 1fr 1fr; }
      .iso-grid { grid-template-columns: 1fr 1fr; }
      .gov-grid { grid-template-columns: 1fr; }
      .gov-card { min-height: 0; }

      .faq-item summary { align-items: flex-start; }
      .faq-item summary::after { margin-top: -2px; }
      .faq-body { padding-left: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .js .tab-panel.is-active { animation: none; }
    }

    /* ============================================================
       Penyesuaian navigasi & footer yang dipakai di semua halaman
       ============================================================ */

    .nav-link[aria-current="page"] { color: #fff; }
    .nav-link[aria-current="page"]::after { transform: scaleX(1); }

    .site-nav .nav-webmail { display: none; }

    .footer-subhead { margin-top: 24px; }

    .footer-nav--sub { margin-top: 10px; }

    .footer-nav--sub a {
      font-size: 10.5px;
      color: var(--muted-2);
    }

    .footer-nav--sub a:hover { color: var(--brand-light); }

    @media (min-width: 981px) and (max-width: 1180px) {
      .header-inner { gap: 14px; }
      .nav-link { padding: 10px 9px; font-size: 12.5px; }
    }

    @media (min-width: 981px) and (max-width: 1080px) {
      .brand-copy { display: none; }
    }

    @media (max-width: 980px) {
      .nav-link[aria-current="page"] { color: var(--brand-light); }

      .site-nav .nav-webmail {
        display: inline-flex;
        margin-top: 10px;
        align-self: flex-start;
      }

      .footer-subhead { margin-top: 20px; }
    }