/* =====================================================================
   FAHI Design System — situs publik
   Identitas mengikuti logo FAHI: navy-teal #13343D + emas #F8BD4B.
   Tipografi: Poppins (judul, huruf logo) + Plus Jakarta Sans (teks).
   Prefiks: fh-* = komponen bersama, bd-* = beranda.
   (Nama token "teal" dipertahankan agar seluruh halaman lama ikut berganti.)
   ===================================================================== */

:root {
    /* Warna merek — diambil dari logo */
    --fh-teal-950: #0A1D23;
    --fh-teal-900: #0E262E;
    --fh-teal-800: #112E37;
    --fh-teal-700: #13343D;   /* navy logo */
    --fh-teal-600: #1A4552;
    --fh-teal-500: #1E5260;
    --fh-teal-100: #D7E3E6;
    --fh-teal-50:  #EEF3F4;
    --fh-emas:      #F8BD4B;  /* emas logo */
    --fh-emas-terang: #FBD283;
    --fh-emas-tua:  #8A6410;   /* teks emas di latar terang (kontras 5.4:1) */
    --fh-emas-50:   #FEF5E2;

    /* Netral */
    --fh-kanvas:    #FFFFFF;
    --fh-permukaan: #FFFFFF;
    --fh-lembut:    #F5F7F6;
    --fh-garis:     #E1E7E8;
    --fh-garis-halus: #ECF0F1;
    --fh-tinta:     #13343D;
    --fh-teks:      #3D4F55;
    --fh-redup:     #5B6B70;

    /* Status */
    --fh-sukses: #157347;  --fh-sukses-50: #E8F5EE;
    --fh-galat:  #B42318;  --fh-galat-50:  #FDECEA;
    --fh-peringatan: #9A6700; --fh-peringatan-50: #FFF6DB;

    /* Tipografi */
    --fh-font-display: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
    --fh-angka: lining-nums tabular-nums;
    --fh-font-teks: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fh-t-xs: .8125rem; --fh-t-sm: .875rem; --fh-t-md: 1rem; --fh-t-lg: 1.125rem;
    --fh-t-xl: 1.375rem; --fh-t-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
    --fh-t-3xl: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);

    /* Ruang, radius, bayangan */
    --fh-r-sm: 8px; --fh-r-md: 12px; --fh-r-lg: 18px; --fh-r-xl: 26px; --fh-r-pil: 999px;
    --fh-bayang-1: 0 1px 2px rgba(19,34,37,.05), 0 1px 1px rgba(19,34,37,.03);
    --fh-bayang-2: 0 2px 4px rgba(19,34,37,.04), 0 8px 24px -6px rgba(19,34,37,.10);
    --fh-bayang-3: 0 4px 8px rgba(19,34,37,.05), 0 24px 48px -12px rgba(19,34,37,.18);
    --fh-cincin: 0 0 0 3px rgba(30,82,96,.28);
    --fh-ease: cubic-bezier(.2,.7,.2,1);
    --fh-cepat: .18s; --fh-sedang: .32s;
    --fh-lebar: 1240px;
    --fh-header-h: 76px;
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fh-header-h) + 16px); }
body {
    margin: 0;
    font-family: var(--fh-font-teks);
    color: var(--fh-teks);
    background: var(--fh-kanvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.fh-terkunci { overflow: hidden; }
img { max-width: 100%; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--fh-teal-500);
    outline-offset: 2px;
    border-radius: 4px;
}
::selection { background: var(--fh-emas-50); color: var(--fh-tinta); }

.fh-wadah { width: 100%; max-width: var(--fh-lebar); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.fh-lewati {
    position: absolute; left: 16px; top: -60px; z-index: 10001;
    background: var(--fh-tinta); color: #fff; padding: 10px 16px; border-radius: var(--fh-r-sm);
    font-weight: 600; font-size: var(--fh-t-sm); transition: top var(--fh-cepat);
}
.fh-lewati:focus { top: 12px; }
span#konten { display: block; height: 0; outline: none; }
main#konten { display: block; outline: none; }
.fh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tombol ---------- */
.fh-btn {
    --b-bg: var(--fh-teal-600); --b-fg: #fff; --b-garis: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 44px; padding: 0 1.25rem;
    font: 600 var(--fh-t-sm)/1 var(--fh-font-teks); letter-spacing: .01em;
    color: var(--b-fg); background: var(--b-bg);
    border: 1px solid var(--b-garis); border-radius: var(--fh-r-pil);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--fh-cepat), color var(--fh-cepat), border-color var(--fh-cepat),
                box-shadow var(--fh-cepat), transform var(--fh-cepat) var(--fh-ease);
}
.fh-btn:hover { transform: translateY(-1px); }
.fh-btn:active { transform: translateY(0) scale(.98); }
.fh-btn[disabled], .fh-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.fh-btn-primer { --b-bg: var(--fh-teal-600); }
.fh-btn-primer:hover { --b-bg: var(--fh-teal-700); box-shadow: 0 8px 20px -8px rgba(0,95,107,.55); }
.fh-btn-emas { --b-bg: var(--fh-emas); --b-fg: var(--fh-teal-950); }
.fh-btn-emas:hover { --b-bg: var(--fh-emas-terang); box-shadow: 0 10px 24px -10px rgba(200,169,81,.8); }
.fh-btn-hantu { --b-bg: transparent; --b-fg: var(--fh-tinta); }
.fh-btn-hantu:hover { --b-bg: var(--fh-lembut); }
.fh-btn-garis { --b-bg: transparent; --b-fg: var(--fh-teal-700); --b-garis: var(--fh-garis); }
.fh-btn-garis:hover { --b-garis: var(--fh-teal-600); --b-bg: var(--fh-teal-50); }
.fh-btn-terang { --b-bg: rgba(255,255,255,.08); --b-fg: #fff; --b-garis: rgba(255,255,255,.28); }
.fh-btn-terang:hover { --b-bg: rgba(255,255,255,.16); --b-garis: rgba(255,255,255,.5); }
.fh-btn-besar { min-height: 52px; padding: 0 1.6rem; font-size: var(--fh-t-md); }
.fh-btn-kecil { min-height: 40px; padding: 0 1rem; font-size: var(--fh-t-sm); }
.fh-btn-penuh { width: 100%; }
.fh-ikon-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--fh-r-pil);
    border: 1px solid var(--fh-garis); background: var(--fh-permukaan); color: var(--fh-tinta);
    cursor: pointer; transition: background var(--fh-cepat), border-color var(--fh-cepat), transform var(--fh-cepat);
}
.fh-ikon-btn:hover { background: var(--fh-lembut); }
.fh-ikon-btn:active { transform: scale(.95); }
.fh-tautan-panah {
    display: inline-flex; align-items: center; gap: .45em; color: var(--fh-teal-600);
    font-weight: 600; font-size: var(--fh-t-sm); text-decoration: none;
}
.fh-tautan-panah i { transition: transform var(--fh-cepat) var(--fh-ease); }
.fh-tautan-panah:hover i { transform: translateX(3px); }

/* ---------- Header ---------- */
.fh-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(250,248,244,.86);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--fh-sedang), box-shadow var(--fh-sedang), background var(--fh-sedang);
}
.fh-header.fh-tergulir { border-color: var(--fh-garis-halus); box-shadow: 0 6px 24px -18px rgba(19,34,37,.4); background: rgba(250,248,244,.94); }
.fh-header-isi { display: flex; align-items: center; gap: 24px; height: var(--fh-header-h); }
.fh-merek { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; flex-shrink: 1; }
.fh-merek img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.fh-merek-teks { display: flex; flex-direction: column; min-width: 0; }
.fh-merek-nama { font-weight: 700; font-size: .98rem; color: var(--fh-tinta); letter-spacing: -.01em; line-height: 1.2; }
.fh-merek-tag { font-size: .75rem; color: var(--fh-redup); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-merek-terang .fh-merek-nama { color: #fff; }

.fh-nav { margin-left: auto; }
.fh-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.fh-nav a, .fh-dropdown-picu {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 12px; border-radius: var(--fh-r-pil);
    font: 500 .9rem/1 var(--fh-font-teks); color: var(--fh-teks);
    text-decoration: none; background: none; border: 0; cursor: pointer;
    transition: color var(--fh-cepat), background var(--fh-cepat);
}
.fh-nav a:hover, .fh-dropdown-picu:hover { color: var(--fh-tinta); background: var(--fh-lembut); }
.fh-nav a[aria-current="page"], .fh-dropdown-picu[data-aktif] { color: var(--fh-teal-700); font-weight: 600; }
.fh-nav > ul > li > a[aria-current="page"]::after {
    content: ''; position: absolute; left: 50%; bottom: 3px; width: 16px; height: 2px; margin-left: -8px;
    background: var(--fh-emas); border-radius: 2px;
}
.fh-dropdown { position: relative; }
.fh-dropdown-picu i { font-size: .65rem; transition: transform var(--fh-cepat); }
.fh-dropdown-picu[aria-expanded="true"] i { transform: rotate(180deg); }
.fh-dropdown-menu {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 236px;
    list-style: none; margin: 0; padding: 8px;
    background: var(--fh-permukaan); border: 1px solid var(--fh-garis-halus);
    border-radius: var(--fh-r-md); box-shadow: var(--fh-bayang-3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--fh-cepat), transform var(--fh-cepat) var(--fh-ease), visibility var(--fh-cepat);
}
.fh-dropdown.fh-buka .fh-dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.fh-dropdown-menu a { display: flex; width: 100%; gap: 12px; padding: 11px 12px; border-radius: var(--fh-r-sm); }
.fh-dropdown-menu a i { width: 16px; color: var(--fh-teal-600); text-align: center; }
.fh-header-aksi { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fh-burger {
    display: none; width: 44px; height: 44px; border-radius: var(--fh-r-pil);
    border: 1px solid var(--fh-garis); background: var(--fh-permukaan);
    flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.fh-burger span { width: 18px; height: 1.6px; background: var(--fh-tinta); border-radius: 2px; }

/* Laci seluler */
.fh-laci { position: fixed; inset: 0; z-index: 10000; }
.fh-laci[hidden] { display: none; }
.fh-laci-latar { position: absolute; inset: 0; background: rgba(0,25,28,.45); opacity: 0; transition: opacity var(--fh-sedang); }
.fh-laci-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
    background: var(--fh-kanvas); display: flex; flex-direction: column; overflow-y: auto;
    transform: translateX(100%); transition: transform var(--fh-sedang) var(--fh-ease);
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.35);
}
.fh-laci.fh-buka .fh-laci-latar { opacity: 1; }
.fh-laci.fh-buka .fh-laci-panel { transform: none; }
.fh-laci-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--fh-garis-halus); }
.fh-laci-menu { list-style: none; margin: 0; padding: 12px; }
.fh-laci-menu a {
    display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: var(--fh-r-sm);
    color: var(--fh-tinta); font-weight: 500; text-decoration: none;
}
.fh-laci-menu a:hover { background: var(--fh-lembut); }
.fh-laci-menu a[aria-current="page"] { background: var(--fh-teal-50); color: var(--fh-teal-700); font-weight: 600; }
.fh-laci-menu i { width: 18px; color: var(--fh-teal-600); }
.fh-laci-aksi { display: grid; gap: 10px; padding: 8px 24px 20px; }
.fh-laci-kontak { margin-top: auto; padding: 20px 24px 28px; border-top: 1px solid var(--fh-garis-halus); display: grid; gap: 10px; }
.fh-laci-kontak a { color: var(--fh-redup); font-size: var(--fh-t-sm); text-decoration: none; display: flex; gap: 10px; align-items: center; }

@media (max-width: 1180px) {
    .fh-nav, .fh-header-aksi > .fh-btn { display: none; }
    .fh-burger { display: inline-flex; }
    .fh-header-aksi { margin-left: auto; }
}
@media (max-width: 420px) { .fh-merek-tag { display: none; } .fh-merek-nama { font-size: .92rem; } }

/* ---------- Kepala bagian ---------- */
.fh-bagian { padding: clamp(64px, 8vw, 112px) 0; }
.fh-bagian-putih { background: var(--fh-permukaan); }
.fh-bagian-lembut { background: var(--fh-lembut); }
.fh-alis {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font: 600 .75rem/1 var(--fh-font-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--fh-emas-tua);
}
.fh-alis::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.fh-judul {
    font-family: var(--fh-font-display); font-weight: 600; color: var(--fh-tinta);
    font-size: var(--fh-t-2xl); line-height: 1.15; letter-spacing: -.015em; margin: 0;
}
.fh-judul em { font-style: italic; color: var(--fh-teal-600); }
.fh-lead { font-size: var(--fh-t-lg); line-height: 1.7; color: var(--fh-teks); max-width: 62ch; margin: 16px 0 0; }
.fh-kepala-bagian { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); flex-wrap: wrap; }
.fh-kepala-bagian > div { max-width: 720px; }

/* ---------- Kartu umum ---------- */
.fh-kartu {
    background: var(--fh-permukaan); border: 1px solid var(--fh-garis-halus);
    border-radius: var(--fh-r-lg); overflow: hidden;
    transition: transform var(--fh-sedang) var(--fh-ease), box-shadow var(--fh-sedang), border-color var(--fh-sedang);
}
a.fh-kartu, .fh-kartu-interaktif { text-decoration: none; color: inherit; }
a.fh-kartu:hover, .fh-kartu-interaktif:hover { transform: translateY(-2px); box-shadow: var(--fh-bayang-2); border-color: var(--fh-garis); }
.fh-media { position: relative; overflow: hidden; background: var(--fh-teal-50); }
.fh-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--fh-ease); }
a.fh-kartu:hover .fh-media img, .fh-kartu-interaktif:hover .fh-media img { transform: scale(1.025); }
.fh-media-kosong { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fh-teal-600); font-size: 2rem; background: linear-gradient(135deg, var(--fh-teal-50), var(--fh-emas-50)); }
.fh-lencana {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--fh-r-pil);
    font: 600 .72rem/1 var(--fh-font-teks); letter-spacing: .04em;
    background: var(--fh-teal-50); color: var(--fh-teal-700);
}
.fh-lencana-emas { background: var(--fh-emas-50); color: var(--fh-emas-tua); }
.fh-lencana-sukses { background: var(--fh-sukses-50); color: var(--fh-sukses); }
.fh-lencana-redup { background: var(--fh-lembut); color: var(--fh-redup); }
.fh-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fh-t-xs); color: var(--fh-redup); }
.fh-meta i { margin-right: 4px; color: var(--fh-teal-500); }
.fh-garis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fh-garis-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Kosong ---------- */
.fh-kosong { text-align: center; padding: 48px 24px; border: 1px dashed var(--fh-garis); border-radius: var(--fh-r-lg); color: var(--fh-redup); background: var(--fh-permukaan); }
.fh-kosong i { font-size: 1.8rem; color: var(--fh-teal-500); margin-bottom: 12px; display: block; }

/* ---------- Footer ---------- */
.fh-footer { background: var(--fh-teal-950); color: rgba(255,255,255,.72); padding: clamp(56px, 7vw, 88px) 0 0; position: relative; }
.fh-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fh-emas), transparent); opacity: .6; }
.fh-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.fh-footer-merek p { margin: 18px 0 0; font-size: var(--fh-t-sm); line-height: 1.75; max-width: 42ch; }
.fh-footer-judul { margin: 0 0 18px; font: 600 .75rem/1 var(--fh-font-teks); letter-spacing: .16em; text-transform: uppercase; color: var(--fh-emas); }
.fh-footer-tautan, .fh-footer-kontak, .fh-sosial { list-style: none; margin: 0; padding: 0; }
.fh-footer-tautan li + li { margin-top: 10px; }
.fh-footer a { color: rgba(255,255,255,.78); text-decoration: none; transition: color var(--fh-cepat); }
.fh-footer a:hover { color: #fff; }
.fh-footer-tautan a { font-size: var(--fh-t-sm); }
.fh-footer-kontak li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: var(--fh-t-sm); line-height: 1.6; }
.fh-footer-kontak li + li { margin-top: 14px; }
.fh-footer-kontak i { color: var(--fh-emas); margin-top: 4px; }
.fh-footer-kontak a, .fh-footer-kontak span { overflow-wrap: anywhere; }
.fh-sosial { display: flex; gap: 10px; margin-top: 24px; }
.fh-sosial a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fh-r-pil); border: 1px solid rgba(255,255,255,.18); transition: background var(--fh-cepat), border-color var(--fh-cepat), color var(--fh-cepat); }
.fh-sosial a:hover { background: var(--fh-emas); border-color: var(--fh-emas); color: var(--fh-teal-950); }
.fh-footer-bawah { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fh-t-xs); }
.fh-footer-bawah p { margin: 0; }
.fh-ke-atas { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 960px) { .fh-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fh-footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Toast ---------- */
.fh-toast-wadah { position: fixed; z-index: 10050; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.fh-toast {
    pointer-events: auto; display: grid; grid-template-columns: 22px 1fr 28px; gap: 12px; align-items: start;
    padding: 14px 14px 14px 16px; border-radius: var(--fh-r-md);
    background: var(--fh-tinta); color: #fff; box-shadow: var(--fh-bayang-3);
    font-size: var(--fh-t-sm); line-height: 1.5;
    animation: fhToastMasuk .35s var(--fh-ease);
}
.fh-toast i.fh-toast-ikon { margin-top: 2px; }
.fh-toast[data-jenis="success"] i.fh-toast-ikon { color: #6EE7A8; }
.fh-toast[data-jenis="error"] i.fh-toast-ikon { color: #FDA29B; }
.fh-toast[data-jenis="warning"] i.fh-toast-ikon { color: var(--fh-emas-terang); }
.fh-toast button { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; }
.fh-toast button:hover { color: #fff; background: rgba(255,255,255,.1); }
.fh-toast.fh-keluar { animation: fhToastKeluar .25s ease forwards; }
@keyframes fhToastMasuk { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fhToastKeluar { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Formulir (global: .form-control / .form-input dipakai semua halaman) ---------- */
.fh-field, .form-group { margin-bottom: 16px; }
.fh-label, .form-group > label { display: block; margin-bottom: 7px; font-size: var(--fh-t-sm); font-weight: 600; color: var(--fh-tinta); }
.fh-input, .form-control, .form-input {
    width: 100%; min-height: 46px; padding: 11px 14px;
    font: 400 .95rem/1.4 var(--fh-font-teks); color: var(--fh-tinta);
    background: var(--fh-permukaan); border: 1px solid var(--fh-garis); border-radius: var(--fh-r-md);
    transition: border-color var(--fh-cepat), box-shadow var(--fh-cepat), background var(--fh-cepat);
}
textarea.fh-input, textarea.form-control, textarea.form-input { min-height: 112px; resize: vertical; }
.fh-input::placeholder, .form-control::placeholder, .form-input::placeholder { color: #98A2A3; }
.fh-input:hover, .form-control:hover, .form-input:hover { border-color: #CFC8BA; }
.fh-input:focus, .form-control:focus, .form-input:focus { outline: none; border-color: var(--fh-teal-500); box-shadow: var(--fh-cincin); }
.fh-input[aria-invalid="true"], .form-control[aria-invalid="true"], .form-input[aria-invalid="true"] { border-color: var(--fh-galat); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
input[type="file"].form-control { padding: 9px 12px; font-size: var(--fh-t-sm); }
.fh-pesan-galat { display: none; margin-top: 6px; font-size: var(--fh-t-xs); color: var(--fh-galat); }
[aria-invalid="true"] + .fh-pesan-galat { display: block; }
.fh-bantuan { margin-top: 6px; font-size: var(--fh-t-xs); color: var(--fh-redup); }

/* Tombol pengiriman sedang diproses */
.fh-memuat { position: relative; color: transparent !important; pointer-events: none; }
.fh-memuat::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: fhPutar .7s linear infinite;
}
@keyframes fhPutar { to { transform: rotate(360deg); } }

/* ---------- Modal (global) ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 10020; display: none; align-items: center; justify-content: center; padding: 20px;
    background: rgba(0,25,28,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal-overlay.active { display: flex; animation: fhPudar .25s ease; }
.modal-overlay .modal {
    position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
    padding: clamp(24px, 4vw, 36px); background: var(--fh-permukaan);
    border-radius: var(--fh-r-xl); box-shadow: 0 40px 80px -20px rgba(0,0,0,.45);
    animation: fhModalMasuk .35s var(--fh-ease);
}
.modal-overlay .modal h2 { font-family: var(--fh-font-display); font-weight: 600; font-size: 1.6rem; color: var(--fh-tinta); letter-spacing: -.01em; margin: 0 0 6px; }
.modal-overlay .modal .subtitle { color: var(--fh-redup); font-size: var(--fh-t-sm); margin-bottom: 24px; }
.modal-overlay .modal-close {
    position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: var(--fh-r-pil);
    display: grid; place-items: center; background: var(--fh-lembut); border: 0; color: var(--fh-teks);
    font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background var(--fh-cepat), transform var(--fh-cepat);
}
.modal-overlay .modal-close:hover { background: var(--fh-garis); transform: rotate(90deg); }
.btn-primary-full {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px;
    background: var(--fh-teal-600); color: #fff; border: 0; border-radius: var(--fh-r-pil);
    font: 600 .95rem/1 var(--fh-font-teks); cursor: pointer;
    transition: background var(--fh-cepat), box-shadow var(--fh-cepat), transform var(--fh-cepat);
}
.btn-primary-full:hover { background: var(--fh-teal-700); box-shadow: 0 10px 24px -10px rgba(0,95,107,.6); }
.btn-primary-full:active { transform: scale(.99); }
@keyframes fhPudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes fhModalMasuk { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Lightbox ---------- */
.fh-lightbox { position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center; background: rgba(0,15,17,.92); padding: 64px 16px; }
.fh-lightbox[hidden] { display: none; }
.fh-lightbox figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.fh-lightbox img { max-height: calc(100vh - 180px); width: auto; border-radius: var(--fh-r-md); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.fh-lightbox figcaption { color: rgba(255,255,255,.8); margin-top: 14px; font-size: var(--fh-t-sm); }
.fh-lightbox .fh-ikon-btn { position: absolute; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.fh-lightbox .fh-ikon-btn:hover { background: rgba(255,255,255,.18); }
.fh-lb-tutup { top: 16px; right: 16px; }
.fh-lb-sebelum { left: 16px; top: 50%; margin-top: -22px; }
.fh-lb-sesudah { right: 16px; top: 50%; margin-top: -22px; }

/* ---------- Animasi muncul ---------- */
.fh-muncul { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--fh-ease), transform .7s var(--fh-ease); }
.fh-muncul.fh-tampil { opacity: 1; transform: none; }
.fh-tanpa-js .fh-muncul { opacity: 1; transform: none; }

/* =====================================================================
   BERANDA
   ===================================================================== */

/* Hero */
.bd-hero {
    position: relative; overflow: hidden; color: rgba(255,255,255,.82);
    background:
        radial-gradient(900px 520px at 90% -20%, rgba(200,169,81,.12), transparent 62%),
        linear-gradient(160deg, var(--fh-teal-800) 0%, var(--fh-teal-950) 100%);
}
.bd-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(48px, 6vw, 88px); }
.bd-hero .fh-alis { color: var(--fh-emas); }
.bd-hero h1 { font-family: var(--fh-font-display); font-weight: 600; font-size: var(--fh-t-3xl); line-height: 1.06; letter-spacing: -.02em; color: #fff; margin: 0; }
.bd-hero h1 em { font-style: italic; color: var(--fh-emas-terang); font-weight: 500; }
.bd-hero-lead { font-size: var(--fh-t-lg); line-height: 1.75; margin: 24px 0 0; max-width: 54ch; }
.bd-hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.bd-hero-statistik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 52px; border-top: 1px solid rgba(255,255,255,.14); }
.bd-hero-statistik > div { padding: 20px 16px 0 0; }
.bd-hero-statistik > div + div { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.1); }
.bd-angka { display: block; font-variant-numeric: var(--fh-angka); font-family: var(--fh-font-teks); letter-spacing: -.02em; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.bd-angka-label { display: block; margin-top: 8px; font-size: var(--fh-t-xs); color: rgba(255,255,255,.62); }

/* Slider sorotan */
.bd-sorot { position: relative; border-radius: var(--fh-r-lg); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--fh-teal-900); box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }
.bd-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.bd-slide.aktif { opacity: 1; visibility: visible; }
.bd-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.bd-slide.aktif img { transform: scale(1); }
.bd-slide-latar { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,25,28,0) 35%, rgba(0,25,28,.88) 100%); }
.bd-slide-isi { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 32px); padding-bottom: 72px; color: #fff; }
.bd-slide-isi .fh-lencana { background: rgba(255,255,255,.14); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bd-slide-isi h2 { font-family: var(--fh-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.25; margin: 14px 0 0; }
.bd-slide-isi h2 a { color: #fff; text-decoration: none; }
.bd-slide-isi h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bd-slide-isi p { margin: 10px 0 0; font-size: var(--fh-t-sm); color: rgba(255,255,255,.78); }
.bd-sorot-kendali { position: absolute; left: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); bottom: 22px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.bd-titik { display: flex; gap: 6px; }
.bd-titik button { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.35); cursor: pointer; transition: background var(--fh-cepat), width var(--fh-sedang) var(--fh-ease); }
.bd-titik button[aria-current="true"] { width: 42px; background: var(--fh-emas); }
.bd-panah { display: flex; gap: 8px; }
.bd-panah button { width: 40px; height: 40px; border-radius: var(--fh-r-pil); border: 1px solid rgba(255,255,255,.3); background: rgba(0,25,28,.35); color: #fff; cursor: pointer; transition: background var(--fh-cepat); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bd-panah button:hover { background: rgba(255,255,255,.2); }
.bd-sorot-kosong { display: grid; place-items: center; height: 100%; text-align: center; padding: 32px; }
.bd-sorot-kosong img { width: 120px; height: 120px; object-fit: contain; opacity: .9; }

/* Berita */
.bd-berita-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.bd-utama { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; }
.bd-unggulan .fh-media { aspect-ratio: 16 / 11; }
.bd-unggulan-isi { padding: 24px 26px 28px; }
.bd-unggulan-isi h3 { font-family: var(--fh-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.3; color: var(--fh-tinta); margin: 14px 0 10px; letter-spacing: -.01em; }
.bd-unggulan-isi p { margin: 0 0 16px; color: var(--fh-teks); font-size: .95rem; line-height: 1.7; }
.bd-daftar-berita { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.bd-item-berita { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px; border-radius: var(--fh-r-md); text-decoration: none; color: inherit; transition: background var(--fh-cepat); }
.bd-item-berita:hover { background: var(--fh-permukaan); box-shadow: var(--fh-bayang-1); }
.bd-item-berita .fh-media { aspect-ratio: 1; border-radius: var(--fh-r-sm); }
.bd-item-berita h4 { margin: 6px 0 8px; font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--fh-tinta); }
.bd-item-berita:hover h4 { color: var(--fh-teal-700); }
.bd-kat { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fh-emas-tua); }
.bd-samping { display: grid; gap: 24px; position: sticky; top: calc(var(--fh-header-h) + 24px); }
.bd-ketua { padding: 28px 24px; text-align: center; }
.bd-ketua .fh-alis { justify-content: center; margin-bottom: 18px; }
.bd-ketua .fh-alis::before { display: none; }
.bd-ketua img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid var(--fh-garis); padding: 3px; background: var(--fh-permukaan); margin: 0 auto 16px; display: block; }
.bd-ketua h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--fh-tinta); line-height: 1.45; }
.bd-ketua > p { margin: 4px 0 0; font-size: var(--fh-t-xs); font-weight: 600; letter-spacing: .03em; color: var(--fh-emas-tua); }
.bd-ketua .bd-ketua-bio { margin: 14px 0 0; font-size: var(--fh-t-sm); font-weight: 400; letter-spacing: 0; line-height: 1.65; color: var(--fh-teks); }
.bd-populer { padding: 4px 0 0; border-top: 2px solid var(--fh-tinta); }
.bd-populer h3 { margin: 16px 0 4px; font-size: var(--fh-t-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-tinta); }
.bd-populer ol { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.bd-populer li { counter-increment: pop; display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--fh-garis-halus); }
.bd-populer li:first-child { border-top: 0; }
.bd-populer li::before { content: counter(pop, decimal-leading-zero); font-variant-numeric: var(--fh-angka); font-family: var(--fh-font-teks); font-weight: 600; font-size: 1.2rem; color: var(--fh-emas-tua); line-height: 1.3; }
.bd-populer a { font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--fh-tinta); text-decoration: none; }
.bd-populer a:hover { color: var(--fh-teal-700); }

/* Tentang */
.bd-tentang-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.bd-tentang-kiri { position: sticky; top: calc(var(--fh-header-h) + 32px); }
.bd-visi { margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid var(--fh-garis); }
.bd-visi blockquote { margin: 0; font-family: var(--fh-font-display); font-style: italic; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.5; color: var(--fh-tinta); }
.bd-visi blockquote::before { content: '\201C'; display: block; font-size: 3.5rem; line-height: .6; color: var(--fh-emas); margin-bottom: 12px; }
.bd-prosa { font-size: 1.02rem; line-height: 1.85; color: var(--fh-teks); }
.bd-prosa p { margin: 0 0 1.1em; }
.bd-prosa-lipat { position: relative; overflow: hidden; transition: max-height .6s var(--fh-ease); }
.bd-prosa-lipat:not(.terbuka)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), var(--fh-permukaan)); }
.bd-misi { margin-top: 56px; }
.bd-misi h3 { margin: 0 0 8px; font-family: var(--fh-font-display); font-weight: 600; font-size: 1.5rem; color: var(--fh-tinta); }
.bd-misi ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; counter-reset: misi; }
.bd-misi li { counter-increment: misi; display: grid; grid-template-columns: 44px 1fr; gap: 4px; padding: 22px 0; border-top: 1px solid var(--fh-garis-halus); font-size: .93rem; line-height: 1.65; }
.bd-misi li::before { content: counter(misi, decimal-leading-zero); font-variant-numeric: var(--fh-angka); font-family: var(--fh-font-teks); font-weight: 600; font-size: 1.15rem; color: var(--fh-emas-tua); line-height: 1.4; }
.bd-misi li strong { display: block; color: var(--fh-tinta); font-weight: 600; margin-bottom: 4px; }
.bd-misi li[hidden] { display: none; }

/* Pengurus */
.bd-pengurus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.bd-pengurus .fh-media { aspect-ratio: 4 / 4.4; }
.bd-pengurus .fh-media img { object-position: top; }
.bd-pengurus-isi { padding: 18px 20px 22px; }
.bd-pengurus-isi h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--fh-tinta); line-height: 1.4; }
.bd-pengurus-isi p { margin: 4px 0 0; font-size: var(--fh-t-xs); color: var(--fh-emas-tua); font-weight: 600; letter-spacing: .03em; }
.bd-pengurus-isi .bio { color: var(--fh-redup); font-weight: 400; letter-spacing: 0; margin-top: 10px; line-height: 1.6; }

/* Program kerja */
.bd-program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bd-program { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 22px; }
.bd-program i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--fh-r-md); background: var(--fh-teal-50); color: var(--fh-teal-600); }
.bd-program p { margin: 0; font-weight: 600; color: var(--fh-tinta); line-height: 1.5; font-size: .95rem; }

/* Tab */
.fh-tab { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--fh-r-pil); background: var(--fh-lembut); border: 1px solid var(--fh-garis-halus); }
.fh-tab button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--fh-r-pil); background: none; font: 600 var(--fh-t-sm)/1 var(--fh-font-teks); color: var(--fh-redup); cursor: pointer; transition: background var(--fh-cepat), color var(--fh-cepat), box-shadow var(--fh-cepat); }
.fh-tab button[aria-selected="true"] { background: var(--fh-permukaan); color: var(--fh-tinta); box-shadow: var(--fh-bayang-1); }
.fh-tab button .jml { margin-left: 6px; color: var(--fh-redup); font-weight: 500; }

/* Kartu grid 3 kolom */
.bd-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bd-kegiatan .fh-media, .bd-kursus .fh-media, .bd-produk .fh-media { aspect-ratio: 16 / 10; }
.bd-tanggal { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 58px; padding: 8px 0; border-radius: var(--fh-r-md); background: var(--fh-permukaan); color: var(--fh-tinta); box-shadow: var(--fh-bayang-2); line-height: 1; text-align: center; }
.bd-tanggal b { font-variant-numeric: var(--fh-angka); font-family: var(--fh-font-teks); font-weight: 600; font-size: 1.4rem; font-weight: 600; }
.bd-tanggal span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fh-emas-tua); margin-top: 4px; }
.bd-kartu-isi { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bd-kartu-isi h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.45; color: var(--fh-tinta); }
.bd-kartu-isi h3 a { color: inherit; text-decoration: none; }
.bd-kartu-isi h3 a::after { content: ''; position: absolute; inset: 0; }
.bd-kartu-isi p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--fh-teks); }
.bd-kartu-kaki { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.bd-harga { font-weight: 700; color: var(--fh-teal-700); font-variant-numeric: tabular-nums; }
.bd-harga.gratis { color: var(--fh-sukses); }
.bd-kegiatan, .bd-kursus, .bd-produk { position: relative; display: flex; flex-direction: column; }
.bd-kegiatan .bd-kartu-kaki .fh-btn, .bd-produk .fh-ikon-btn, .bd-produk .bd-kartu-kaki a { position: relative; z-index: 2; }
.bd-produk .fh-lencana { position: absolute; top: 14px; right: 14px; z-index: 1; }

/* Galeri */
.bd-galeri { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.bd-galeri button { position: relative; padding: 0; border: 0; border-radius: var(--fh-r-md); overflow: hidden; cursor: zoom-in; background: var(--fh-teal-50); }
.bd-galeri button:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.bd-galeri img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--fh-ease), filter var(--fh-sedang); }
.bd-galeri button:hover img { transform: scale(1.05); }
.bd-galeri button::after { content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--fh-teal-700); opacity: 0; transform: translateY(6px); transition: opacity var(--fh-cepat), transform var(--fh-cepat); }
.bd-galeri button:hover::after, .bd-galeri button:focus-visible::after { opacity: 1; transform: none; }

/* Donasi */
.bd-donasi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bd-donasi { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.bd-donasi h3 { margin: 0; font-family: var(--fh-font-display); font-weight: 600; font-size: 1.3rem; color: var(--fh-tinta); }
.bd-donasi p { margin: 0; color: var(--fh-teks); font-size: .93rem; line-height: 1.65; }
.bd-progres { height: 8px; border-radius: 8px; background: var(--fh-lembut); overflow: hidden; }
.bd-progres span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--fh-teal-600), var(--fh-emas)); transform-origin: left; }
.bd-donasi-angka { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fh-t-xs); color: var(--fh-redup); }
.bd-donasi-angka strong { display: block; font-size: 1.05rem; color: var(--fh-tinta); font-variant-numeric: tabular-nums; }

/* Ajakan */
.bd-ajakan { position: relative; overflow: hidden; border-radius: var(--fh-r-xl); padding: clamp(40px, 6vw, 72px); color: rgba(255,255,255,.82);
    background: radial-gradient(600px 300px at 100% 0%, rgba(200,169,81,.14), transparent 60%), linear-gradient(140deg, var(--fh-teal-800), var(--fh-teal-950));
    display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center; }
.bd-ajakan h2 { margin: 0; font-family: var(--fh-font-display); font-weight: 600; font-size: var(--fh-t-2xl); line-height: 1.15; color: #fff; }
.bd-ajakan p { margin: 14px 0 0; max-width: 56ch; line-height: 1.7; }
.bd-ajakan .fh-alis { color: var(--fh-emas); }
.bd-ajakan-aksi { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kontak */
.bd-kontak-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.bd-kontak-daftar { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
.bd-kontak-daftar li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--fh-garis); }
.bd-kontak-daftar li:last-child { border-bottom: 1px solid var(--fh-garis); }
.bd-kontak-daftar i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--fh-permukaan); color: var(--fh-teal-600); border: 1px solid var(--fh-garis); }
.bd-kontak-daftar small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-redup); margin-bottom: 4px; }
.bd-kontak-daftar a, .bd-kontak-daftar span { color: var(--fh-tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.bd-kontak-daftar a:hover { color: var(--fh-teal-700); }
.bd-formulir { padding: clamp(24px, 4vw, 40px); }
.bd-formulir .bd-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Responsif beranda ---------- */
@media (max-width: 1100px) {
    .bd-berita-grid { grid-template-columns: 1fr; }
    .bd-samping { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .bd-hero-grid, .bd-tentang-grid, .bd-kontak-grid { grid-template-columns: 1fr; }
    .bd-tentang-kiri { position: static; }
    .bd-sorot { aspect-ratio: 16 / 11; }
    .bd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bd-ajakan { grid-template-columns: 1fr; }
    .bd-galeri { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 720px) {
    .bd-utama, .bd-samping, .bd-donasi-grid, .bd-misi ol, .bd-formulir .bd-dua { grid-template-columns: 1fr; }
    .bd-grid-3 { grid-template-columns: 1fr; }
    .bd-hero-statistik { grid-template-columns: repeat(2, 1fr); }
    .bd-hero-statistik > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .bd-galeri { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .bd-galeri button:nth-child(6n+1) { grid-column: span 2; grid-row: span 1; }
    .bd-sorot { aspect-ratio: 4 / 4.2; }
    .fh-kepala-bagian { align-items: flex-start; }
}
@media (max-width: 420px) {
    .bd-hero-aksi .fh-btn { width: 100%; }
    .bd-item-berita { grid-template-columns: 88px 1fr; }
}

/* ---------- Preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .fh-muncul { opacity: 1; transform: none; }
}

/* ---------- Cetak ---------- */
@media print {
    .fh-header, .fh-footer, .fh-laci, .fh-toast-wadah, .bd-sorot-kendali { display: none !important; }
    body { background: #fff; }
}

/* Logo di atas latar gelap: beri alas terang agar ikon gelap tetap terbaca */
.fh-merek-terang img { background: #fff; border-radius: 12px; padding: 4px; width: 48px; height: 48px; }
/* Galeri dengan sedikit foto: tanpa petak besar */
.bd-galeri.sedikit { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 240px; }
.bd-galeri.sedikit button:nth-child(6n+1) { grid-column: auto; grid-row: auto; }

/* =====================================================================
   Penyelarasan halaman detail (artikel, kegiatan, produk, kursus, halaman CMS,
   anggota, mitra) — gaya bawaannya tetap, token warnanya diselaraskan.
   ===================================================================== */
:root { --bg: var(--fh-kanvas); --border: var(--fh-garis); --text: var(--fh-tinta); }
.hero-decoration { background: var(--fh-kanvas) !important; }
.page-hero, .event-hero, .course-hero, .article-hero {
    background:
        radial-gradient(700px 360px at 90% -20%, rgba(200,169,81,.18), transparent 60%),
        linear-gradient(160deg, var(--fh-teal-800) 0%, var(--fh-teal-950) 100%) !important;
}
.page-hero h1, .event-hero h1, .course-hero h1 { letter-spacing: -.015em; }
.back-btn { border-radius: var(--fh-r-pil) !important; }

/* =====================================================================
   Penyempurnaan tahap 2
   ===================================================================== */
/* Pengurus sedikit (1–2 orang): tata letak profil lebar */
.bd-pengurus-grid.sedikit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 680px)); }
.bd-pengurus-grid.sedikit .bd-pengurus { display: grid; grid-template-columns: 220px 1fr; }
.bd-pengurus-grid.sedikit .fh-media { aspect-ratio: auto; min-height: 260px; }
.bd-pengurus-grid.sedikit .bd-pengurus-isi { padding: 28px 32px; align-self: center; }
.bd-pengurus-grid.sedikit .bd-pengurus-isi h3 { font-family: var(--fh-font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.3; }
.bd-pengurus-grid.sedikit .bd-pengurus-isi > p:not(.bio) { font-size: var(--fh-t-sm); margin-top: 8px; }
.bd-pengurus-grid.sedikit .bio { font-size: .95rem; margin-top: 14px; }
@media (max-width: 560px) {
    .bd-pengurus-grid.sedikit .bd-pengurus { grid-template-columns: 1fr; }
    .bd-pengurus-grid.sedikit .fh-media { aspect-ratio: 4 / 3.6; }
    .bd-pengurus-grid.sedikit .bd-pengurus-isi { padding: 22px; }
}

/* Kerangka muat gambar (skeleton): kilau halus, gambar memudar masuk setelah termuat */
.fh-js .fh-media:not(.siap)::before, .fh-js .bd-galeri button:not(.siap)::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) var(--fh-teal-50);
    background-size: 220% 100%; animation: fhKilau 1.3s linear infinite;
}
.fh-js .fh-media img, .fh-js .bd-galeri img { opacity: 0; transition: opacity .5s ease, transform .7s var(--fh-ease); }
.fh-js .siap img { opacity: 1; }
.fh-media > img { position: relative; z-index: 1; }
@keyframes fhKilau { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.fh-media.gagal::after, .bd-galeri button.gagal::after { content: '\f03e'; font-family: 'Font Awesome 6 Free'; font-weight: 400; position: absolute; inset: 0; display: grid; place-items: center; color: var(--fh-teal-500); font-size: 1.6rem; opacity: 1; transform: none; background: none; width: auto; height: auto; border-radius: 0; }

/* Navigasi beranda: bagian yang sedang dibaca */
.fh-nav a.fh-di-sini { color: var(--fh-teal-700); background: var(--fh-teal-50); }

/* =====================================================================
   Halaman detail — merapikan komponen bawaan
   ===================================================================== */
.hero-decoration { display: none !important; }
.page-hero, .event-hero, .course-hero { padding-bottom: 88px !important; }
.page-hero::before, .page-hero::after, .event-hero::before, .event-hero::after,
.course-hero::before, .course-hero::after { display: none !important; }
.breadcrumb { font-size: var(--fh-t-sm) !important; gap: 10px !important; flex-wrap: wrap; justify-content: center; }
.breadcrumb a { color: rgba(255,255,255,.72) !important; }
.breadcrumb a:hover { color: #fff !important; }
.breadcrumb .separator { opacity: .5; font-size: .6rem; }

/* Lencana hero kegiatan → satu gaya tenang */
.event-hero .badge-pill { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22); font-weight: 600; font-size: var(--fh-t-xs) !important; letter-spacing: .02em; padding: 6px 14px !important; }
.event-hero .badge-pill.badge-red { background: rgba(180,35,24,.35) !important; border-color: rgba(253,162,155,.5); }
.event-hero .badge-pill.badge-yellow { color: var(--fh-emas-terang) !important; border-color: rgba(226,203,134,.45); }

/* Kartu info kegiatan → satu panel bergaris, ikon seragam */
.event-info-cards { gap: 0 !important; background: var(--fh-permukaan); border: 1px solid var(--fh-garis-halus); border-radius: var(--fh-r-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }
.eic-card { box-shadow: none !important; border-radius: 0 !important; background: transparent !important; padding: 20px 22px !important; border-right: 1px solid var(--fh-garis-halus); }
.eic-card:last-child { border-right: 0; }
.eic-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--fh-teal-50) !important; color: var(--fh-teal-600) !important; font-size: 1rem !important; }
.eic-card .eic-label { font-size: .7rem !important; letter-spacing: .1em !important; color: var(--fh-redup) !important; }
@media (max-width: 600px) {
    .event-info-cards { grid-template-columns: 1fr 1fr !important; }
    .eic-card { flex-direction: column; align-items: flex-start !important; gap: 10px !important; border-right: 0; border-bottom: 1px solid var(--fh-garis-halus); }
    .eic-card:nth-child(odd) { border-right: 1px solid var(--fh-garis-halus); }
}

/* Kartu konten detail: bayangan diganti garis tipis */
.event-content-card, .event-register-card, .cd-section, .cd-sidebar-card, .pd-img-card, .pd-info-card,
.pd-section, .page-card, .related-card {
    box-shadow: none !important; border: 1px solid var(--fh-garis-halus);
}
.event-content-card h3, .cd-section h3 { font-family: var(--fh-font-display) !important; font-weight: 600 !important; letter-spacing: -.01em; }

/* Tombol berbagi: satu bahasa visual, warna merek hanya saat hover */
.share-btns a { background: var(--fh-permukaan) !important; color: var(--fh-teks) !important; border: 1px solid var(--fh-garis) !important; border-radius: var(--fh-r-pil) !important; width: 42px !important; height: 42px !important; }
.share-btns a.wa:hover { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
.share-btns a.fb:hover { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; }
.share-btns a.tw:hover { background: #0F1419 !important; border-color: #0F1419 !important; color: #fff !important; }
.share-btns a.cp:hover { background: var(--fh-teal-600) !important; border-color: var(--fh-teal-600) !important; color: #fff !important; }

/* Harga di hero kursus: tidak bersaing dengan tombol utama */
.course-hero .price-badge { background: transparent !important; color: var(--fh-emas-terang) !important; border: 1px solid rgba(226,203,134,.5); box-shadow: none !important; font-size: var(--fh-t-md) !important; padding: 8px 18px !important; }
/* Pengaman: bila skrip gagal dimuat, gambar tetap tampil setelah 4 detik */
.fh-js .fh-media img, .fh-js .bd-galeri img { animation: fhPaksaTampil 0s linear 4s forwards; }
@keyframes fhPaksaTampil { to { opacity: 1; } }
.bd-tanggal, .bd-produk .fh-lencana { z-index: 2; }
.fh-media:has(> .fh-media-kosong)::before { display: none; }
/* Halaman anggota: beri ruang sebelum footer */
.main-content:has(.map-section) { padding-bottom: clamp(56px, 7vw, 96px) !important; }

/* =====================================================================
   TATA LETAK v3 — gaya portal organisasi (rujukan cendekiamuslim.or.id)
   dengan identitas FAHI: navy logo #13343D + emas #F8BD4B, motif belah ketupat logo.
   ===================================================================== */
:root { --fh-header-h: 84px; --fh-lebar: 1280px; }
h1, h2, h3, .fh-judul { font-family: var(--fh-font-display); }
.fh-judul { font-weight: 700; letter-spacing: -.025em; line-height: 1.12; }
.fh-alis { color: var(--fh-emas-tua); }
.fh-alis::before { background: var(--fh-emas); height: 2px; width: 22px; border-radius: 2px; }

/* Motif belah ketupat dari logo (SVG inline) */
.fh-motif { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F8BD4B' stroke-opacity='.10' stroke-width='1.4'%3E%3Cpath d='M60 14 104 60 60 106 16 60Z'/%3E%3Cpath d='M60 36 82 60 60 84 38 60Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }
.fh-motif-terang { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2313343D' stroke-opacity='.05' stroke-width='1.4'%3E%3Cpath d='M60 14 104 60 60 106 16 60Z'/%3E%3Cpath d='M60 36 82 60 60 84 38 60Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; }

/* ---------- Header ---------- */
.fh-header { background: rgba(255,255,255,.96); }
.fh-header-isi { gap: 20px; }
.fh-merek img { width: 46px; height: 46px; }
.fh-merek-teks { line-height: 1.05; }
.fh-merek-nama { font-family: var(--fh-font-display); font-weight: 800; font-size: .98rem; letter-spacing: .02em; text-transform: uppercase; color: var(--fh-teal-700); }
.fh-merek-emas { color: #E0A21F; }
.fh-merek-terang .fh-merek-nama { color: #fff; }
.fh-merek-terang .fh-merek-emas { color: var(--fh-emas); }
.fh-merek-terang img { background: none; padding: 0; width: 48px; height: 48px; }
.fh-nav > ul { gap: 0; }
.fh-nav a, .fh-dropdown-picu { font-weight: 600; font-size: .92rem; color: var(--fh-teal-700); padding: 10px 11px; }
.fh-nav > ul > li > a[aria-current="page"], .fh-dropdown-picu[data-aktif] { color: var(--fh-teal-700); }
.fh-nav > ul > li > a[aria-current="page"]::after { background: var(--fh-emas); height: 3px; width: 18px; margin-left: -9px; bottom: 2px; }
.fh-lapor-btn { --b-fg: var(--fh-teal-700); box-shadow: 0 8px 20px -10px rgba(248,189,75,.9); }
.fh-cari-btn { border-color: transparent; background: transparent; color: var(--fh-teal-700); }
.fh-akun-desktop.fh-btn-hantu { --b-fg: var(--fh-teal-700); padding: 0 14px; }

/* Mega menu */
.fh-dropdown-menu.fh-mega { min-width: 320px; left: 50%; right: auto; transform: translate(-50%, -6px); padding: 10px; border-radius: 16px; }
.fh-dropdown.fh-buka .fh-dropdown-menu.fh-mega { transform: translate(-50%, 0); }
.fh-mega.fh-mega-lebar { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.fh-mega a { align-items: flex-start; gap: 12px; padding: 11px 12px; white-space: normal; }
.fh-mega a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--fh-teal-50); color: var(--fh-teal-600); flex-shrink: 0; margin-top: 1px; }
.fh-mega a strong { display: block; font-size: .9rem; color: var(--fh-teal-700); }
.fh-mega a small { display: block; font-size: .76rem; font-weight: 500; color: var(--fh-redup); margin-top: 2px; line-height: 1.35; }
.fh-mega a:hover i { background: var(--fh-emas); color: var(--fh-teal-700); }

/* Header transparan di atas hero gelap */
.fh-header-transparan { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fh-header-transparan:not(.fh-header-padat) .fh-nav > ul > li > a, .fh-header-transparan:not(.fh-header-padat) .fh-dropdown-picu,
.fh-header-transparan:not(.fh-header-padat) .fh-cari-btn, .fh-header-transparan:not(.fh-header-padat) .fh-akun-desktop { color: #fff; --b-fg: #fff; }
.fh-header-transparan:not(.fh-header-padat) .fh-nav > ul > li > a:hover, .fh-header-transparan:not(.fh-header-padat) .fh-dropdown-picu:hover { background: rgba(255,255,255,.1); }
.fh-header-transparan:not(.fh-header-padat) .fh-merek-nama { color: #fff; }
.fh-header-transparan:not(.fh-header-padat) .fh-merek-emas { color: var(--fh-emas); }
.fh-header-transparan:not(.fh-header-padat) .fh-burger { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.fh-header-transparan:not(.fh-header-padat) .fh-burger span { background: #fff; }
.fh-header-transparan.fh-header-padat { background: rgba(255,255,255,.97); box-shadow: 0 8px 30px -20px rgba(10,29,35,.5); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); }

@media (max-width: 1240px) {
    .fh-nav, .fh-akun-desktop, .fh-cari-btn { display: none !important; }
    .fh-burger { display: inline-flex; }
    .fh-header-aksi { margin-left: auto; }
}
@media (max-width: 520px) { .fh-lapor-btn { padding: 0 14px; } .fh-lapor-btn i { display: none; } .fh-merek-nama { font-size: .84rem; } }

/* Laci seluler dengan grup */
.fh-laci-nav { padding: 10px 12px; }
.fh-laci-tunggal { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 10px; font-weight: 600; color: var(--fh-teal-700); text-decoration: none; }
.fh-laci-tunggal i { width: 18px; color: var(--fh-teal-500); }
.fh-laci-nav details { border-top: 1px solid var(--fh-garis-halus); }
.fh-laci-nav summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; font-weight: 700; color: var(--fh-teal-700); cursor: pointer; }
.fh-laci-nav summary::-webkit-details-marker { display: none; }
.fh-laci-nav summary i { font-size: .7rem; transition: transform var(--fh-cepat); }
.fh-laci-nav details[open] summary i { transform: rotate(180deg); }
.fh-laci-nav .fh-laci-menu { padding: 0 0 10px; }
.fh-laci-nav .fh-laci-menu a { padding: 11px 12px; font-size: .94rem; }

/* ---------- Ajakan penutup & footer ---------- */
.fh-ajakan-akhir { background: linear-gradient(115deg, var(--fh-emas) 0%, #F9C964 55%, #FBD283 100%); color: var(--fh-teal-700); }
.fh-ajakan-akhir-isi { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 32px); flex-wrap: wrap; }
.fh-ajakan-akhir h2 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; max-width: 22ch; color: var(--fh-teal-700); }
.fh-ajakan-akhir p { margin: 10px 0 0; max-width: 60ch; font-weight: 500; }
.fh-ajakan-akhir-aksi { display: flex; gap: 12px; flex-wrap: wrap; }
.fh-ajakan-akhir .fh-btn-emas { --b-bg: var(--fh-teal-700); --b-fg: #fff; }
.fh-ajakan-akhir .fh-btn-emas:hover { --b-bg: var(--fh-teal-900); }
.fh-ajakan-akhir .fh-btn-terang { --b-bg: rgba(19,52,61,.08); --b-fg: var(--fh-teal-700); --b-garis: rgba(19,52,61,.25); }
.fh-footer { background: var(--fh-teal-900); }
.fh-footer::before { display: none; }
.fh-footer-catatan { margin: 18px 0 0; font-size: var(--fh-t-xs); color: rgba(255,255,255,.6); line-height: 1.6; }
.fh-footer-catatan a { color: var(--fh-emas); }

/* ---------- Tanya FAHI ---------- */
.fh-tanya-picu { position: fixed; right: 20px; bottom: 20px; z-index: 950; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px;
    background: var(--fh-teal-700); color: #fff; font: 700 .92rem/1 var(--fh-font-display); box-shadow: 0 14px 34px -12px rgba(10,29,35,.65); cursor: pointer; transition: transform var(--fh-cepat), box-shadow var(--fh-cepat); }
.fh-tanya-picu img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 4px; }
.fh-tanya-picu:hover { transform: translateY(-2px); }
.fh-tanya-picu::after { content: ''; position: absolute; top: 6px; left: 34px; width: 10px; height: 10px; border-radius: 50%; background: var(--fh-emas); box-shadow: 0 0 0 2px var(--fh-teal-700); }
.fh-tanya-picu.terbuka::after { display: none; }
.fh-tanya { position: fixed; right: 20px; bottom: 84px; z-index: 960; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); display: flex; flex-direction: column;
    background: #fff; border-radius: 20px; box-shadow: 0 30px 80px -24px rgba(10,29,35,.55), 0 0 0 1px rgba(19,52,61,.06); overflow: hidden;
    opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .22s ease, transform .22s var(--fh-ease); }
.fh-tanya.fh-buka { opacity: 1; transform: none; }
.fh-tanya[hidden] { display: none; }
.fh-tanya-kepala { display: grid; grid-template-columns: 36px 1fr 40px; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; background: var(--fh-teal-700); color: #fff; }
.fh-tanya-kepala img { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 4px; }
.fh-tanya-kepala strong { display: block; font-family: var(--fh-font-display); font-size: 1rem; }
.fh-tanya-kepala small { display: block; font-size: .72rem; color: rgba(255,255,255,.72); margin-top: 2px; }
.fh-tanya-kepala .fh-ikon-btn { width: 36px; height: 36px; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.fh-tanya-isi { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fh-lembut); }
.fh-tanya-pesan { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.fh-tanya-pesan.dari-fahi { align-self: flex-start; background: #fff; color: var(--fh-teks); border-bottom-left-radius: 4px; box-shadow: var(--fh-bayang-1); }
.fh-tanya-pesan.dari-pengunjung { align-self: flex-end; background: var(--fh-teal-700); color: #fff; border-bottom-right-radius: 4px; }
.fh-tanya-pesan a { color: var(--fh-teal-500); font-weight: 600; }
.fh-tanya-pesan.memuat { display: inline-flex; gap: 4px; padding: 14px 16px; }
.fh-tanya-pesan.memuat span { width: 7px; height: 7px; border-radius: 50%; background: var(--fh-teal-500); animation: fhTitik 1s infinite ease-in-out; }
.fh-tanya-pesan.memuat span:nth-child(2) { animation-delay: .15s; } .fh-tanya-pesan.memuat span:nth-child(3) { animation-delay: .3s; }
@keyframes fhTitik { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fh-tanya-saran { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 0; background: var(--fh-lembut); scrollbar-width: none; }
.fh-tanya-saran[hidden] { display: none; }
.fh-tanya-saran button { flex-shrink: 0; max-width: 240px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--fh-garis); background: #fff; color: var(--fh-teal-700); font: 600 .78rem/1.3 var(--fh-font-teks); cursor: pointer; text-align: left; }
.fh-tanya-saran button:hover { border-color: var(--fh-emas); background: var(--fh-emas-50); }
.fh-tanya-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px 6px; background: var(--fh-lembut); }
.fh-tanya-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--fh-garis); border-radius: 22px; font: 400 .92rem/1.4 var(--fh-font-teks); background: #fff; }
.fh-tanya-form textarea:focus { outline: none; border-color: var(--fh-teal-500); box-shadow: var(--fh-cincin); }
.fh-tanya-form .fh-btn { width: 44px; min-height: 44px; padding: 0; flex-shrink: 0; }
.fh-tanya-catatan { margin: 0; padding: 4px 16px 12px; font-size: .7rem; color: var(--fh-redup); background: var(--fh-lembut); text-align: center; }
@media (max-width: 560px) {
    .fh-tanya { right: 12px; left: 12px; width: auto; bottom: 78px; height: calc(100vh - 100px); }
    .fh-tanya-picu { right: 14px; bottom: 14px; }
}
.back-to-top { bottom: 84px !important; }

/* Perbaikan menu: judul & keterangan bertingkat, merek satu baris */
.fh-mega a { display: flex !important; line-height: 1.3; }
.fh-mega a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fh-mega a strong, .fh-mega a small { white-space: normal; }
.fh-merek-teks { white-space: nowrap; }
.fh-nav a, .fh-dropdown-picu { white-space: nowrap; line-height: 1.2; }

/* =====================================================================
   BERANDA v3
   ===================================================================== */
.v3-hero { position: relative; overflow: hidden; color: rgba(255,255,255,.82); padding-top: var(--fh-header-h);
    background-color: var(--fh-teal-700);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F8BD4B' stroke-opacity='.08' stroke-width='1.4'%3E%3Cpath d='M60 14 104 60 60 106 16 60Z'/%3E%3Cpath d='M60 36 82 60 60 84 38 60Z'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(900px 600px at 85% 20%, rgba(30,82,96,.9), transparent 65%), linear-gradient(170deg, #17404B 0%, var(--fh-teal-900) 100%); }
.v3-hero::after { content: ''; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; transform: rotate(45deg); border: 2px solid rgba(248,189,75,.12); border-radius: 40px; pointer-events: none; }
.v3-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 56px); }
.v3-pil { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .8rem; font-weight: 600; color: #fff; }
.v3-pil span { width: 8px; height: 8px; border-radius: 50%; background: var(--fh-emas); box-shadow: 0 0 0 4px rgba(248,189,75,.2); }
.v3-hero h1 { margin: 0; color: #fff; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.v3-hero h1 em { font-style: normal; color: var(--fh-emas); }
.v3-hero-lead { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.7; max-width: 56ch; }
.v3-hero-aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.v3-cari { position: relative; display: flex; align-items: center; margin-top: 26px; max-width: 580px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 48px; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.v3-cari > i { position: absolute; left: 20px; color: var(--fh-redup); }
.v3-cari input { flex: 1; min-width: 0; border: 0; outline: none; font: 400 .95rem var(--fh-font-teks); color: var(--fh-tinta); background: transparent; padding: 10px 6px; }
.v3-cari:focus-within { box-shadow: 0 0 0 3px rgba(248,189,75,.55), 0 20px 40px -24px rgba(0,0,0,.6); }
.v3-pintas { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v3-pintas a, .v3-pintas button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: #fff; font: 600 .8rem/1 var(--fh-font-teks); text-decoration: none; cursor: pointer; transition: background var(--fh-cepat), border-color var(--fh-cepat); }
.v3-pintas a:hover, .v3-pintas button:hover { background: rgba(248,189,75,.16); border-color: var(--fh-emas); }
.v3-pintas i { color: var(--fh-emas); }

/* Pimpinan */
.v3-pimpinan { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 540px; }
.v3-cincin { position: absolute; top: 6%; left: 50%; width: min(470px, 92%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(248,189,75,.22), rgba(248,189,75,0) 62%); border: 2px dashed rgba(248,189,75,.35); }
.v3-lencana-logo { position: absolute; top: 8%; left: 6%; width: 84px; height: 84px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 16px 32px -14px rgba(0,0,0,.5); transform: rotate(-6deg); z-index: 2; }
.v3-foto-duo { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.v3-foto { display: block; height: 460px; width: auto; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(0,0,0,.35)); }
.v3-foto-ketum { position: relative; z-index: 2; margin-right: -70px; }
.v3-foto-sekjen { height: 420px; z-index: 1; opacity: .98; }
.v3-nama-duo { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; width: min(560px, 100%); margin-top: -46px; background: rgba(14,38,46,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; }
.v3-nama-duo div { padding: 14px 18px; text-align: center; }
.v3-nama-duo div + div { border-left: 1px solid rgba(255,255,255,.12); }
.v3-nama-duo strong { display: block; color: #fff; font-size: .9rem; line-height: 1.35; }
.v3-nama-duo span { display: block; margin-top: 4px; color: var(--fh-emas); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Angka */
.v3-angka { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 -1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden; }
.v3-angka div { padding: 22px 26px; }
.v3-angka div + div { border-left: 1px solid rgba(255,255,255,.1); }
.v3-angka dd { margin: 0; font: 800 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--fh-font-display); color: var(--fh-emas); font-variant-numeric: tabular-nums; }
.v3-angka dt { order: 2; margin-top: 8px; font-size: .82rem; color: rgba(255,255,255,.72); }
.v3-angka div { display: flex; flex-direction: column-reverse; }

/* Kabar terkini */
.v3-kabar { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 12px 14px; border: 1px solid #F6E3B4; background: var(--fh-emas-50); border-radius: 999px; }
.v3-kabar-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--fh-emas); color: var(--fh-teal-700); font-weight: 700; font-size: .8rem; }
.v3-kabar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; overflow: hidden; flex: 1; min-width: 0; }
.v3-kabar li { white-space: nowrap; font-size: .88rem; }
.v3-kabar li a { color: var(--fh-teal-700); font-weight: 600; text-decoration: none; }
.v3-kabar li a:hover { text-decoration: underline; }
.v3-kabar time { margin-left: 8px; color: var(--fh-redup); font-size: .78rem; }
.v3-kabar-semua { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--fh-teal-700); font-weight: 700; font-size: .8rem; text-decoration: none; }

/* Sambutan */
.v3-sambutan-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.v3-prosa-sambutan { margin-top: 22px; text-align: justify; }
.v3-prosa-sambutan .v3-pembuka { font-style: italic; color: var(--fh-teal-600); margin-bottom: .6em; }
.v3-aksi-baris { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.v3-kartu-ketum { margin: 0; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--fh-bayang-3); transform: rotate(1.2deg); }
.v3-kartu-ketum-foto { background-color: var(--fh-teal-700); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F8BD4B' stroke-opacity='.14' stroke-width='1.4'%3E%3Cpath d='M60 14 104 60 60 106 16 60Z'/%3E%3Cpath d='M60 36 82 60 60 84 38 60Z'/%3E%3C/g%3E%3C/svg%3E"); padding-top: 28px; display: flex; justify-content: center; }
.v3-kartu-ketum-foto img { width: 82%; height: auto; display: block; }
.v3-kartu-ketum figcaption { padding: 18px 22px 22px; border-top: 4px solid var(--fh-emas); }
.v3-kartu-ketum strong { display: block; color: var(--fh-teal-700); font-family: var(--fh-font-display); font-size: 1.05rem; line-height: 1.35; }
.v3-kartu-ketum span { display: block; margin-top: 4px; color: var(--fh-emas-tua); font-size: .85rem; font-weight: 600; }

/* Tentang & legalitas */
.v3-tentang-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.v3-tentang-grid .bd-prosa-lipat:not(.terbuka)::after { background: linear-gradient(rgba(245,247,246,0), var(--fh-lembut)); }
.v3-legal { padding: 28px; background: var(--fh-teal-700); color: rgba(255,255,255,.8); border-radius: 22px; }
.v3-legal h3 { margin: 0 0 14px; color: #fff; font-size: 1.15rem; }
.v3-legal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.v3-legal li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.v3-legal li i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(248,189,75,.14); color: var(--fh-emas); }
.v3-legal strong { display: block; color: #fff; font-size: .92rem; }
.v3-legal span { display: block; font-size: .84rem; line-height: 1.5; margin-top: 2px; }
.v3-visi-misi { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fh-garis); }
.v3-visi { margin: 0; }
.v3-visi blockquote { margin: 0; font-family: var(--fh-font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height: 1.45; color: var(--fh-teal-700); }
.v3-visi blockquote::before { content: '\201C'; display: block; font-size: 3.6rem; line-height: .6; color: var(--fh-emas); margin-bottom: 8px; }

/* Ekosistem */
.v3-eko-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.v3-eko { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--fh-garis); transition: border-color var(--fh-sedang), box-shadow var(--fh-sedang), transform var(--fh-sedang) var(--fh-ease); text-decoration: none; color: inherit; scroll-margin-top: calc(var(--fh-header-h) + 20px); }
.v3-eko:hover, .v3-eko:target { border-color: var(--fh-emas); box-shadow: var(--fh-bayang-2); transform: translateY(-2px); }
.v3-eko-ikon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--fh-teal-700); color: var(--fh-emas); font-size: 1.15rem; transform: rotate(45deg); margin: 4px 0 8px 4px; }
.v3-eko-ikon i { transform: rotate(-45deg); }
.v3-eko h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--fh-teal-700); }
.v3-eko p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--fh-teks); }
.v3-eko details { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--fh-garis-halus); }
.v3-eko summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--fh-teal-500); padding: 6px 0; }
.v3-eko summary::-webkit-details-marker { display: none; }
.v3-eko summary i { font-size: .7rem; transition: transform var(--fh-cepat); }
.v3-eko details[open] summary i { transform: rotate(180deg); }
.v3-eko details ul { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; line-height: 1.55; color: var(--fh-teks); display: grid; gap: 6px; }
.v3-eko-ajak { background: var(--fh-emas-50); border-color: #F6E3B4; }
.v3-eko-ajak .v3-eko-ikon { background: var(--fh-emas); color: var(--fh-teal-700); }
.v3-eko-ajak .fh-tautan-panah { margin-top: auto; }

/* Layanan (latar gelap) */
.v3-gelap { background-color: var(--fh-teal-800); color: rgba(255,255,255,.78); }
.v3-gelap .fh-judul { color: #fff; }
.v3-gelap .fh-alis { color: var(--fh-emas); }
.v3-layanan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.v3-layanan { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: inherit; text-decoration: none; transition: background var(--fh-sedang), border-color var(--fh-sedang), transform var(--fh-sedang) var(--fh-ease); }
.v3-layanan:hover { background: rgba(255,255,255,.08); border-color: rgba(248,189,75,.6); transform: translateY(-3px); }
.v3-layanan > i { font-size: 1.4rem; color: var(--fh-emas); margin-bottom: 6px; }
.v3-layanan h3 { margin: 0; color: #fff; font-size: 1.08rem; }
.v3-layanan p { margin: 0; font-size: .88rem; line-height: 1.6; }
.v3-layanan span { margin-top: auto; padding-top: 10px; color: var(--fh-emas); font-weight: 700; font-size: .85rem; }

/* Langkah */
.v3-langkah { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: langkah; }
.v3-langkah li { position: relative; padding: 24px 20px; border-radius: 20px; background: var(--fh-lembut); }
.v3-langkah li:not(:last-child)::after { content: ''; position: absolute; top: 46px; right: -16px; width: 16px; height: 2px; background: var(--fh-emas); }
.v3-langkah span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fh-teal-700); color: var(--fh-emas); font: 800 1.05rem var(--fh-font-display); margin-bottom: 14px; }
.v3-langkah h3 { margin: 0 0 6px; font-size: 1rem; color: var(--fh-teal-700); }
.v3-langkah p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--fh-teks); }

/* Regulasi terbaru */
.v3-reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-reg { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--fh-garis); text-decoration: none; color: inherit; transition: border-color var(--fh-cepat), box-shadow var(--fh-cepat); }
.v3-reg:hover { border-color: var(--fh-teal-500); box-shadow: var(--fh-bayang-2); }
.v3-reg-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #FCEDEC; color: #B42318; font-size: 1.25rem; }
.v3-reg-meta { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fh-emas-tua); }
.v3-reg-meta b { color: var(--fh-sukses); }
.v3-reg strong { display: block; margin: 4px 0 4px; color: var(--fh-teal-700); font-size: .98rem; line-height: 1.4; }
.v3-reg small { color: var(--fh-teks); font-size: .85rem; line-height: 1.5; }

/* Pengurus */
.v3-pengurus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.v3-pengurus { text-align: center; }
.v3-pengurus-foto { position: relative; aspect-ratio: 4 / 4.6; border-radius: 24px; overflow: hidden; background-color: var(--fh-teal-700); display: flex; align-items: flex-end; justify-content: center; }
.v3-pengurus-foto img { width: 90%; height: 94%; object-fit: contain; object-position: bottom; }
.v3-pengurus-foto > i { font-size: 3rem; color: rgba(255,255,255,.4); margin: auto; }
.v3-pengurus h3 { margin: 16px 0 4px; font-size: 1rem; color: var(--fh-teal-700); line-height: 1.4; }
.v3-pengurus p { margin: 0; color: var(--fh-emas-tua); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* Edukasi ringkas */
.v3-edukasi { margin-top: 36px; padding: 26px; border-radius: 20px; background: var(--fh-lembut); }
.v3-edukasi h3 { margin: 0 0 14px; color: var(--fh-teal-700); font-size: 1.1rem; }
.v3-edukasi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-edukasi a { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; border: 1px solid var(--fh-garis-halus); }
.v3-edukasi a:hover { border-color: var(--fh-emas); }
.v3-edukasi a > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fh-teal-50); color: var(--fh-teal-600); flex-shrink: 0; }
.v3-edukasi strong { display: block; color: var(--fh-teal-700); font-size: .92rem; }
.v3-edukasi small { color: var(--fh-redup); font-size: .8rem; }

/* FAQ */
.v3-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.v3-faq details { border-bottom: 1px solid var(--fh-garis); }
.v3-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; cursor: pointer; font: 600 1rem/1.4 var(--fh-font-display); color: var(--fh-teal-700); }
.v3-faq summary::-webkit-details-marker { display: none; }
.v3-faq summary i { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--fh-garis); color: var(--fh-teal-600); font-size: .75rem; transition: transform var(--fh-cepat), background var(--fh-cepat); }
.v3-faq details[open] summary i { transform: rotate(45deg); background: var(--fh-emas); border-color: var(--fh-emas); }
.v3-faq details p { margin: 0 0 20px; font-size: .95rem; line-height: 1.7; color: var(--fh-teks); max-width: 68ch; }

.v3-setuju { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: .82rem; color: var(--fh-redup); line-height: 1.5; }
.v3-setuju input { margin-top: 3px; accent-color: var(--fh-teal-700); width: 16px; height: 16px; flex-shrink: 0; }

/* Responsif */
@media (max-width: 1100px) {
    .v3-eko-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v3-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v3-langkah li::after { display: none; }
}
@media (max-width: 960px) {
    .v3-hero-grid, .v3-sambutan-grid, .v3-tentang-grid, .v3-visi-misi, .v3-faq-grid { grid-template-columns: 1fr; }
    .v3-pimpinan { min-height: 0; padding-top: 20px; }
    .v3-foto { height: 360px; } .v3-foto-sekjen { height: 330px; } .v3-foto-ketum { margin-right: -54px; }
    .v3-layanan-grid, .v3-edukasi ul, .v3-reg-grid { grid-template-columns: 1fr 1fr; }
    .v3-angka { grid-template-columns: repeat(2, 1fr); }
    .v3-angka div:nth-child(3) { border-left: 0; }
    .v3-angka div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
    .v3-kartu-ketum { max-width: 420px; transform: none; }
}
@media (max-width: 640px) {
    .v3-eko-grid, .v3-layanan-grid, .v3-edukasi ul, .v3-reg-grid { grid-template-columns: 1fr; }
    .v3-langkah { grid-template-columns: 1fr; }
    .v3-foto { height: 270px; } .v3-foto-sekjen { height: 250px; } .v3-foto-ketum { margin-right: -40px; }
    .v3-lencana-logo { width: 64px; height: 64px; top: 2%; left: 2%; }
    .v3-nama-duo { margin-top: -30px; } .v3-nama-duo strong { font-size: .8rem; } .v3-nama-duo div { padding: 12px 10px; }
    .v3-kabar { border-radius: 18px; flex-wrap: wrap; } .v3-kabar ul { order: 3; flex-basis: 100%; flex-direction: column; gap: 8px; } .v3-kabar li { white-space: normal; }
    .v3-cari { padding-left: 42px; } .v3-cari .fh-btn { padding: 0 16px; }
}

/* Perbaikan: ukuran motif hanya untuk lapisan SVG, bukan gradasi */
.v3-hero { background-size: 120px 120px, auto, auto; background-repeat: repeat, no-repeat, no-repeat; }
/* Logo di latar gelap: alas putih agar bagian navy logo tetap terlihat */
.fh-header-transparan:not(.fh-header-padat) .fh-merek img, .fh-merek-terang img { background: #fff; border-radius: 12px; padding: 4px; }

/* Lencana logo: pindah ke kiri bawah, tidak menutupi foto pimpinan */
.v3-lencana-logo { top: auto !important; bottom: 120px; left: 0 !important; transform: rotate(-6deg); }
@media (max-width: 640px) { .v3-lencana-logo { bottom: 90px; } }

/* =====================================================================
   Halaman dalam (Lapor, Regulasi, dll.)
   ===================================================================== */
.v3-kepala-hal { background-color: var(--fh-teal-700); color: rgba(255,255,255,.8); padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.v3-kepala-hal h1 { margin: 10px 0 0; color: #fff; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.v3-kepala-hal p { margin: 12px 0 0; max-width: 64ch; line-height: 1.7; }
.v3-remah { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .84rem; }
.v3-remah a { color: var(--fh-emas); text-decoration: none; }
.v3-remah i { font-size: .6rem; opacity: .6; }
.v3-tab-hal { display: inline-flex; gap: 6px; margin-top: 24px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.08); }
.v3-tab-hal a { padding: 10px 18px; border-radius: 999px; color: #fff; font-weight: 600; font-size: .88rem; text-decoration: none; }
.v3-tab-hal a[aria-selected="true"] { background: var(--fh-emas); color: var(--fh-teal-700); }
.v3-lapor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.v3-cek-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; }
.v3-form-kartu { padding: clamp(22px, 3vw, 36px); }
.v3-form-kartu h2 { margin: 0 0 18px; font-size: 1.3rem; color: var(--fh-teal-700); }
.v3-form-kartu fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.v3-form-kartu legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font: 700 1.1rem var(--fh-font-display); color: var(--fh-teal-700); }
.v3-form-kartu legend span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fh-emas); color: var(--fh-teal-700); font-size: .9rem; }
.v3-ops { color: var(--fh-redup); font-weight: 400; }
.v3-pilih-pihak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v3-pilih-pihak label { position: relative; cursor: pointer; }
.v3-pilih-pihak input { position: absolute; opacity: 0; inset: 0; }
.v3-pilih-pihak span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--fh-garis); border-radius: 14px; background: #fff; transition: border-color var(--fh-cepat), background var(--fh-cepat), box-shadow var(--fh-cepat); }
.v3-pilih-pihak strong { display: block; font-size: .88rem; color: var(--fh-teal-700); }
.v3-pilih-pihak small { display: block; margin-top: 3px; font-size: .75rem; color: var(--fh-redup); line-height: 1.35; }
.v3-pilih-pihak input:checked + span { border-color: var(--fh-teal-700); background: var(--fh-teal-50); box-shadow: inset 0 0 0 1px var(--fh-teal-700); }
.v3-pilih-pihak input:focus-visible + span { box-shadow: var(--fh-cincin); }
.v3-info-samping { position: sticky; top: calc(var(--fh-header-h) + 20px); padding: 26px; border-radius: 20px; background: var(--fh-lembut); }
.v3-info-samping h3 { margin: 0 0 14px; color: var(--fh-teal-700); font-size: 1.1rem; }
.v3-info-samping ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.v3-info-samping li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .88rem; line-height: 1.55; }
.v3-info-samping li i { color: var(--fh-emas-tua); margin-top: 3px; }
.v3-kanal-resmi { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--fh-garis); margin-bottom: 16px; font-size: .86rem; }
.v3-kanal-resmi p { margin: 6px 0 0; line-height: 1.55; }
.v3-berhasil { max-width: 640px; margin: 0 auto; padding: 40px; text-align: center; }
.v3-berhasil-ikon { font-size: 3rem; color: var(--fh-sukses); margin-bottom: 10px; }
.v3-berhasil h2 { margin: 0 0 10px; color: var(--fh-teal-700); }
.v3-kode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 8px; }
.v3-kode div { padding: 18px; border-radius: 16px; background: var(--fh-teal-700); }
.v3-kode dt { color: rgba(255,255,255,.7); font-size: .8rem; }
.v3-kode dd { margin: 6px 0 0; color: var(--fh-emas); font: 800 1.35rem var(--fh-font-display); letter-spacing: .06em; }
.v3-ringkas { display: grid; gap: 10px; margin: 18px 0; padding: 16px; border-radius: 14px; background: var(--fh-lembut); }
.v3-ringkas div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: .9rem; }
.v3-ringkas dt { color: var(--fh-redup); } .v3-ringkas dd { margin: 0; font-weight: 600; color: var(--fh-teal-700); }
.v3-jejak { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--fh-garis); display: grid; gap: 18px; }
.v3-jejak li { position: relative; }
.v3-jejak li::before { content: ''; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--fh-emas); box-shadow: 0 0 0 3px #fff; }
.v3-jejak strong { color: var(--fh-teal-700); } .v3-jejak time { margin-left: 8px; font-size: .78rem; color: var(--fh-redup); }
.v3-jejak p { margin: 6px 0 0; font-size: .9rem; line-height: 1.55; }
.adm-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--fh-teal-50); color: var(--fh-teal-700); font-size: .9rem; margin-bottom: 18px; line-height: 1.5; }
.adm-info.peringatan { background: var(--fh-galat-50); color: var(--fh-galat); }
.adm-info i { margin-top: 3px; }
@media (max-width: 1000px) { .v3-lapor-grid, .v3-cek-grid { grid-template-columns: 1fr; } .v3-info-samping { position: static; } }
@media (max-width: 640px) { .v3-pilih-pihak { grid-template-columns: 1fr 1fr; } .v3-kode { grid-template-columns: 1fr; } }
@media print { .v3-kepala-hal, .v3-aksi-baris, .fh-ajakan-akhir, .fh-tanya-picu { display: none !important; } }

/* Pustaka regulasi */
.v3-pustaka-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start; }
.v3-saring { position: sticky; top: calc(var(--fh-header-h) + 20px); display: grid; gap: 22px; }
.v3-saring-grup h3 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-redup); }
.v3-saring-grup a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--fh-teal-700); font-size: .9rem; font-weight: 500; text-decoration: none; }
.v3-saring-grup a:hover { background: var(--fh-lembut); }
.v3-saring-grup a[aria-current] { background: var(--fh-teal-700); color: #fff; font-weight: 600; }
.v3-saring-grup a span { color: inherit; opacity: .6; font-variant-numeric: tabular-nums; }
.v3-hasil-info { margin: 0 0 14px; color: var(--fh-redup); font-size: .9rem; }
.v3-dok-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v3-halaman { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; font-size: .9rem; }
.v3-halaman a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--fh-garis); color: var(--fh-teal-700); text-decoration: none; font-weight: 600; }
.v3-halaman a:hover { border-color: var(--fh-teal-700); }
.v3-dok-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.v3-dok-pratinjau { overflow: hidden; }
.v3-dok-pratinjau iframe { width: 100%; height: 80vh; min-height: 520px; border: 0; display: block; }
@media (max-width: 960px) { .v3-pustaka-grid, .v3-dok-grid { grid-template-columns: 1fr; } .v3-saring { position: static; } .v3-dok-pratinjau iframe { height: 60vh; } }
.v3-profil-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.v3-profil-nav a span { display: inline-flex; align-items: center; gap: 8px; }
.v3-profil-isi .bd-prosa { max-width: 78ch; text-align: justify; }
@media (max-width: 960px) { .v3-profil-grid { grid-template-columns: 1fr; } .v3-profil-nav .v3-saring-grup { display: flex; flex-wrap: wrap; gap: 6px; } .v3-profil-nav h3 { width: 100%; } .v3-eko-grid { grid-template-columns: 1fr !important; } }
.v3-profil-nav a span { opacity: 1 !important; }
/* Bagan pengurus */
.v3-bagan-kel { margin-top: 36px; }
.v3-bagan-kel h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.1rem; color: var(--fh-teal-700); }
.v3-bagan-kel h2::after { content: ''; flex: 1; height: 1px; background: var(--fh-garis); }
.v3-bagan-kel .v3-pengurus-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.v3-pengurus-utama { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
.v3-pengurus-foto img.siluet { width: 78%; height: 86%; opacity: .95; }
.v3-bagan-kel .v3-pengurus h3 { font-size: .92rem; }
.v3-bagan-kel .v3-pengurus p { font-size: .72rem; }
/* Navigasi bawah (HP) */
.fh-nav-bawah { display: none; }
@media (max-width: 760px) {
    .fh-nav-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--fh-garis);
        box-shadow: 0 -8px 24px -16px rgba(10,29,35,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    .fh-nav-bawah a, .fh-nav-bawah button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none;
        color: var(--fh-redup); font: 600 .68rem/1 var(--fh-font-teks); text-decoration: none; cursor: pointer; min-height: 48px; justify-content: center; }
    .fh-nav-bawah i { font-size: 1.05rem; }
    .fh-nav-bawah a[aria-current], .fh-nav-bawah a:active { color: var(--fh-teal-700); }
    .fh-nav-bawah-utama i { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--fh-emas); color: var(--fh-teal-700) !important; box-shadow: 0 8px 18px -6px rgba(248,189,75,.9); border: 3px solid #fff; }
    .fh-nav-bawah-utama { color: var(--fh-teal-700) !important; }
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    .fh-tanya-picu { display: none !important; }
    .fh-tanya { bottom: calc(76px + env(safe-area-inset-bottom)); height: calc(100vh - 150px); }
    .back-to-top { display: none !important; }
}
/* Teks berjalan "Terkini" */
.v3-kabar-jalur { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.v3-kabar ul.v3-kabar-gulir { display: flex; gap: 48px; width: max-content; overflow: visible; flex: none; animation: fhGulir 45s linear infinite; }
.v3-kabar-gulir li { white-space: nowrap; }
.v3-kabar-gulir li::after { content: '•'; margin-left: 48px; color: var(--fh-emas); }
.v3-kabar:hover .v3-kabar-gulir, .v3-kabar:focus-within .v3-kabar-gulir { animation-play-state: paused; }
@keyframes fhGulir { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v3-kabar ul.v3-kabar-gulir { animation: none; } }
@media (max-width: 640px) { .v3-kabar ul.v3-kabar-gulir { flex-direction: row; } .v3-kabar-jalur { order: 3; flex-basis: 100%; } .v3-kabar-gulir li { white-space: nowrap; } }
/* Narasi rata kiri-kanan (justify) dengan pemenggalan kata bahasa Indonesia */
.bd-prosa, .bd-prosa p, .v3-prosa-sambutan p, .bd-misi li, .v3-eko p, .v3-eko li, .v3-layanan p, .fh-lead,
.page-content p, .article-content p, .desc-text, .desc-text p, .cd-section p, .pd-desc, .bd-kartu-isi p, .v3-faq details p {
    text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3;
}
.v3-kepala-hal p, .fh-ajakan-akhir p, .v3-hero-lead, .vf-kepala .fh-lead { text-align: left; hyphens: manual; }
.fh-judul + .bd-prosa, .fh-judul + .bd-prosa-lipat { margin-top: 20px; }

/* ---------- v3.1: tombol masuk ikon & header seluler rata tengah ---------- */
.fh-akun-ikon { width: 44px; height: 44px; border-radius: 999px; display: inline-grid; place-items: center; border: 1px solid var(--fh-garis); background: #fff; color: var(--fh-teal-700); transition: background var(--fh-cepat), color var(--fh-cepat), border-color var(--fh-cepat), transform var(--fh-cepat); }
.fh-akun-ikon:hover, .fh-akun-ikon:focus-visible { background: var(--fh-teal-700); color: var(--fh-emas); border-color: var(--fh-teal-700); transform: translateY(-1px); }
.fh-akun-ikon:active { transform: scale(.94); }
.fh-header-transparan:not(.fh-header-padat) .fh-akun-ikon { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.fh-header-transparan:not(.fh-header-padat) .fh-akun-ikon:hover { background: var(--fh-emas); border-color: var(--fh-emas); color: var(--fh-teal-700); }
@media (max-width: 760px) {
    .fh-header-isi { position: relative; justify-content: center; }
    .fh-merek { margin: 0 auto; }
    .fh-header-aksi { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; }
    .fh-lapor-btn { display: none !important; }
    .fh-header-isi::before { content: ''; position: absolute; left: 16px; width: 44px; }
}

/* ---------- v3.1: interaktif global ---------- */
.fh-kartu { position: relative; }
.fh-kartu::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(248,189,75,.13), transparent 70%); }
.fh-kartu:hover::after { opacity: 1; }
.fh-kartu-interaktif, .bd-grid-3 > .fh-kartu { transition: transform .35s var(--fh-ease), box-shadow .35s var(--fh-ease), border-color .35s, opacity .7s var(--fh-ease); }
.fh-kartu-interaktif:hover, .bd-grid-3 > a.fh-kartu:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -24px rgba(19,52,61,.45); border-color: rgba(248,189,75,.6); }
.fh-kartu-interaktif .fh-media img { transition: transform .6s var(--fh-ease); }
.fh-kartu-interaktif:hover .fh-media img { transform: scale(1.06); }
.fh-btn, .fh-ikon-btn { position: relative; overflow: hidden; }
.fh-riak { position: absolute; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); animation: fhRiak .65s ease-out forwards; pointer-events: none; }
@keyframes fhRiak { to { transform: scale(1); opacity: 0; } }
.fh-btn:active { transform: translateY(1px) scale(.98); }
.fh-progres-baca { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1200; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--fh-emas-tua), var(--fh-emas), var(--fh-emas-terang)); }
.fh-bagikan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--fh-garis); }
.fh-bagikan span { font-weight: 700; color: var(--fh-teal-700); margin-right: 4px; }
.fh-bagikan a, .fh-bagikan button { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--fh-garis); background: #fff; color: var(--fh-teal-700); cursor: pointer; transition: all .25s; }
.fh-bagikan a:hover, .fh-bagikan button:hover { background: var(--fh-teal-700); color: var(--fh-emas); transform: translateY(-3px); }
.article-content blockquote { margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--fh-emas); background: var(--fh-teal-50); border-radius: 0 14px 14px 0; font-style: italic; color: var(--fh-teal-700); }
.v3-faq details[open] { box-shadow: 0 14px 30px -22px rgba(19,52,61,.5); }
@media (prefers-reduced-motion: reduce) { .fh-kartu-interaktif:hover, .fh-bagikan a:hover { transform: none; } .fh-riak { display: none; } }

/* ---------- v3.1: isi artikel (catatan & tabel) ---------- */
.article-content .fh-catatan { margin: 26px 0; padding: 18px 20px; border-radius: 14px; background: var(--fh-emas-50, #FEF5E2); border: 1px solid rgba(248,189,75,.55); color: var(--fh-tinta); text-align: left; }
.article-content .fh-catatan strong { color: var(--fh-teal-700); }
.article-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95rem; display: block; overflow-x: auto; }
.article-content td { border: 1px solid var(--fh-garis); padding: 10px 12px; vertical-align: top; text-align: left; }
.article-content tr:first-child td { background: var(--fh-teal-700); color: #fff; }
.article-content tr:first-child td strong { color: #fff; }
.article-content tr:nth-child(even) td { background: var(--fh-teal-50); }
.article-content ol, .article-content ul { padding-left: 1.4rem; }
.article-content li { margin-bottom: .45rem; text-align: justify; }