/* ------------------------------------------------------------------ *
 * Halaman tokoh
 *
 * Profil lembaga yang isinya para tokoh - pendiri, pengurus perkumpulan
 * (kelembagaan/tokoh.php), dimuat lewat TokohAsset
 * bersama tokoh.js. Kepala halaman tetap milik layout dan sama dengan
 * halaman sejenis; isinya mengikuti rujukan pemilik: potret di kartu putih
 * dengan nama di kakinya. Bingkai kubah putaran sebelumnya dilepas atas
 * permintaan pemilik.
 *
 * Gerak gulir memakai animasi CSS bertimeline gulir. Semuanya berhenti
 * dalam keadaan diam sebelum unsurnya terlihat penuh: deret yang terus
 * bergeser selama terlihat tidak pernah sejajar, di layar maupun di
 * potret satu halaman penuh. Peramban tanpa dukungannya dan
 * prefers-reduced-motion menampilkan tata letak yang sama dalam keadaan diam.
 * ------------------------------------------------------------------ */

:root {
    --arah: 1;
}

[dir="rtl"] {
    --arah: -1;
}

/* ------------------------------------------------------------------ *
 * Pita potret
 * ------------------------------------------------------------------ */

/*
 * Langsung di latar halaman, tanpa panel: bidang apa pun di sini bersaing
 * dengan kartu hijau kepala halaman. Motif lingkaran samar dan cahaya emas
 * tipis di belakang deret memudar ke tepi.
 */
.tokoh-potret-bagian {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    padding-top: 2rem;
}

.tokoh-potret-bagian::before,
.tokoh-potret-bagian::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.tokoh-potret-bagian::before {
    inset: 0 0 -80px;
    background-image: var(--al-pattern-ink);
    background-size: 160px 160px;
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(ellipse 60% 65% at 50% 45%, black 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 65% at 50% 45%, black 25%, transparent 75%);
}

.tokoh-potret-bagian::after {
    inset: 0;
    background: radial-gradient(ellipse 50% 40% at 50% 30%, rgba(var(--al-gold-400-rgb), 0.1), transparent 70%);
}

.tokoh-potret {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 4rem;
}

/*
 * Kelompok meregang setinggi deret, dan daftarnya ikut: kelima bingkai
 * sama tinggi walau nama bergelar panjang turun baris di kelompok lain.
 */
.tokoh-kelompok {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/*
 * Label kelompok di antara dua garis emas selebar kelompoknya: yang membuat
 * Masyayikh dan Muassis terbaca dua kelompok tanpa mengurutkan perorangan.
 */
.tokoh-kelompok-nama {
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
    margin-bottom: 1.25rem;
}

.tokoh-kelompok-nama::before,
.tokoh-kelompok-nama::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--al-gold-500-rgb), 0), var(--al-gold-500));
}

.tokoh-kelompok-nama::after,
[dir="rtl"] .tokoh-kelompok-nama::before {
    background: linear-gradient(to left, rgba(var(--al-gold-500-rgb), 0), var(--al-gold-500));
}

[dir="rtl"] .tokoh-kelompok-nama::after {
    background: linear-gradient(to right, rgba(var(--al-gold-500-rgb), 0), var(--al-gold-500));
}

.tokoh-daftar {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ponsel: dua kolom; bingkai yang tersisa sendirian diletakkan di tengah. */
.tokoh-daftar > li {
    flex: 0 0 calc((100% - 1rem) / 2);
    max-width: 15rem;
}

/*
 * Tablet sampai laptop kecil: tiga Masyayikh lalu dua Muassis. Mulai 1200 px
 * kelimanya sebaris; wadah di bawah 1400 px hanya selebar 1116 px, jadi
 * bingkai dan jeda antarkelompoknya lebih sempit di sana. Lebar kartu
 * disimpan di --kartu pada deret potret, supaya kelompok ramai di bawah
 * bisa mengukur lebarnya sendiri dari lebar kartu yang sama.
 */
@media (min-width: 768px) {
    .tokoh-potret {
        --kartu: 13rem;
    }

    .tokoh-daftar {
        gap: 1.25rem;
    }

    .tokoh-daftar > li {
        flex: 0 0 var(--kartu);
        max-width: none;
    }
}

@media (min-width: 992px) {
    .tokoh-potret {
        --kartu: 14rem;
    }
}

@media (min-width: 1200px) {
    .tokoh-potret {
        --kartu: 12.5rem;
        column-gap: 3rem;
    }

    .tokoh-kelompok {
        flex: 0 1 auto;
    }

    .tokoh-daftar {
        flex-wrap: nowrap;
        width: auto;
    }
}

@media (min-width: 1400px) {
    .tokoh-potret {
        --kartu: 14.5rem;
        column-gap: 4rem;
    }
}

/*
 * Kelompok beranggota lebih dari lima, seperti pengurus PPSA: sebaris tidak
 * muat, jadi disusun empat-empat dengan kartu selebar kartu para pendiri.
 * Delapan pengurus menjadi dua baris penuh. Batas lebarnya dipasang pada
 * kelompok, bukan deretnya, supaya garis emas label berhenti di tepi kartu.
 * Di 992-1199 px kartu 14rem hanya muat tiga sebaris dan menyisakan dua
 * kartu di baris ketiga, jadi kartunya dikecilkan sedikit di sana.
 */
@media (min-width: 768px) {
    .tokoh-kelompok-ramai {
        max-width: calc(4 * var(--kartu) + 3 * 1.25rem);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .tokoh-kelompok-ramai {
        --kartu: 13rem;
    }
}

@media (min-width: 1200px) {
    .tokoh-kelompok-ramai {
        flex: 1 1 100%;
    }

    .tokoh-kelompok-ramai .tokoh-daftar {
        flex-wrap: wrap;
        width: 100%;
    }
}

.tokoh-daftar > li {
    display: flex;
    transition: translate var(--al-pulang) var(--al-ease-sorot);
}

/*
 * Kartu putih: foto di atas, nama di kakinya. Bayangan --al-lift-1 karena
 * kartu ini diam di halaman, --al-lift-2 saat diangkat sorotan. Miringnya
 * diatur tokoh.js lewat --miring-x dan --miring-y.
 */
.tokoh-figur {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0;
    padding: 0.6rem 0.6rem 0;
    border-radius: var(--al-radius-lg);
    background-color: var(--al-surface);
    box-shadow: var(--al-lift-1);
    transition: transform 0.6s var(--al-ease), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

/*
 * Transform 3D hanya selama tetikus memiringkannya. Bila dipasang terus,
 * bingkai menjadi lapisan tersendiri dan Chrome di Windows melepas
 * penghalusan subpiksel nama di kakinya. Lepas dari is-miring, transisinya
 * tetap membawa bingkai kembali datar.
 */
.tokoh-figur.is-miring {
    transform: perspective(900px) rotateX(var(--miring-x, 0deg)) rotateY(var(--miring-y, 0deg));
    transition-duration: 0.15s;
}

/* Jari-jari foto setipis tepi putih di bawah jari-jari kartu, supaya sudutnya sejajar. */
.tokoh-bingkai {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: clip;
    border-radius: calc(var(--al-radius-lg) - 0.6rem);
    background-color: var(--al-brand-100);
}

/*
 * Berkas 4:5 mengisi bingkai utuh; yang lebih tinggi dipangkas dari bawah.
 * Tanpa saringan warna: foto hitam-putih lazim dibaca sebagai tanda almarhum.
 */
.tokoh-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    transition: scale var(--al-rayap) var(--al-ease-sorot);
}

/* Tokoh tanpa foto: inisial di atas gradasi, seperti .person-avatar. */
.tokoh-inisial {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--al-brand-600), var(--al-brand-800));
    color: var(--al-gold-100);
    font-family: var(--al-font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
}

/*
 * Kaki kartu: nama dan peran. Nama rata atas, bukan rata tengah: nama
 * satu baris yang ditengahkan turun lebih rendah daripada nama dua baris,
 * dan baris nama kelima kartu tidak lagi segaris. Supaya jabatan sebaris
 * kartu juga segaris, tokoh.js menyamakan tinggi bidang nama di tiap baris.
 * Jabatan tidak didorong ke dasar kartu: jabatan yang turun dua baris akan
 * mengangkat garis emasnya lebih tinggi daripada garis di sebelahnya.
 */
.tokoh-kartu {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 6.25rem;
    padding: 0.9rem 0.5rem 1rem;
    text-align: center;
}

.tokoh-nama {
    margin: 0;
    color: var(--al-brand-900);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-wrap: balance;
}

/* Garis emas pendek memisahkan nama dari perannya, sekecil garis kelompok. */
.tokoh-peran {
    margin: 0;
    color: var(--al-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-wrap: balance;
}

.tokoh-peran::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1px;
    margin: 0.5rem auto 0.45rem;
    background-color: var(--al-gold-500);
    transition: width var(--al-pulang) var(--al-ease-sorot);
}

/*
 * Sorot tetikus dan tekan di layar sentuh: kartu terangkat, foto merayap
 * mendekat, garis emas di kaki melebar. Tetikus dikenali tokoh.js lewat
 * .tokoh-tetikus, bukan @media (hover: hover).
 */
.tokoh-tetikus .tokoh-daftar > li:hover,
.tokoh-daftar > li.is-aktif {
    translate: 0 -8px;
    transition-duration: var(--al-sorot);
}

.tokoh-tetikus .tokoh-daftar > li:hover .tokoh-figur,
.tokoh-daftar > li.is-aktif .tokoh-figur {
    box-shadow: var(--al-lift-2);
}

.tokoh-tetikus .tokoh-daftar > li:hover .tokoh-foto,
.tokoh-daftar > li.is-aktif .tokoh-foto {
    scale: 1.05;
}

.tokoh-tetikus .tokoh-daftar > li:hover .tokoh-peran::before,
.tokoh-daftar > li.is-aktif .tokoh-peran::before {
    width: 3rem;
    transition-duration: var(--al-sorot);
}

/* ------------------------------------------------------------------ *
 * Tentang
 * ------------------------------------------------------------------ */

/*
 * Dua kolom di layar lebar: judul di kiri, paragraf di kanan rata kiri.
 * Paragraf rata tengah selebar ini terbaca sebagai dinding teks.
 */
.tokoh-tentang-isi {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .tokoh-tentang-isi {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
}

.tokoh-tentang-judul {
    margin: 0;
    color: var(--al-brand-900);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.tokoh-lead {
    max-width: 42rem;
    margin-bottom: 1.5rem;
    color: var(--al-ink-read);
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.7;
}

/* Setinggi target sentuh 44 px, bukan setinggi barisnya saja. */
.tokoh-tautan {
    min-height: 2.75rem;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------ *
 * Visi dan misi
 * ------------------------------------------------------------------ */

.tokoh-visi-bagian {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/*
 * Panel hijau selebar kepala halaman, bukan selebar wadah, supaya terbaca
 * sebagai bidang tersendiri di antara isi yang terang.
 */
.tokoh-visi {
    position: relative;
    isolation: isolate;
    overflow: clip;
    margin-inline: var(--al-shell);
    padding-block: clamp(3rem, 6vw, 5rem);
    border-radius: var(--al-radius-xl);
    background: linear-gradient(160deg, var(--al-brand-900) 0%, var(--al-brand-800) 100%);
    color: var(--al-gold-100);
}

.tokoh-visi::before,
.tokoh-visi::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.tokoh-visi::before {
    background-image: var(--al-pattern-soft);
    background-size: 200px 200px;
}

.tokoh-visi::after {
    background: radial-gradient(ellipse 45% 60% at 20% 0%, rgba(var(--al-gold-400-rgb), 0.16), transparent 70%);
}

[dir="rtl"] .tokoh-visi::after {
    background: radial-gradient(ellipse 45% 60% at 80% 0%, rgba(var(--al-gold-400-rgb), 0.16), transparent 70%);
}

/*
 * Visi saja: satu kalimat di tengah. Visi dan misi: kalimat visi di kiri,
 * daftar misi di kanan berbatas garis tipis, keduanya rata atas supaya
 * label Visi dan Misi segaris.
 */
.tokoh-visi-kisi {
    display: grid;
    gap: 2.5rem;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
}

.tokoh-visi-berdua {
    max-width: none;
    text-align: start;
}

@media (min-width: 992px) {
    .tokoh-visi-berdua {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 0;
    }

    .tokoh-visi-berdua .tokoh-visi-kolom {
        padding-inline-end: clamp(2.5rem, 5vw, 5rem);
    }

    .tokoh-visi-berdua .tokoh-misi-kolom {
        padding-inline-start: clamp(2.5rem, 5vw, 5rem);
        border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
    }
}

/* Emas 400 di atas panel: 7,4:1 di ujung 900, 5,5:1 di ujung 800 yang lebih terang. */
.tokoh-visi-label {
    color: var(--al-gold-400);
}

.tokoh-visi-kutip {
    margin: 0;
    color: var(--al-gold-100);
    font-family: var(--al-font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.45rem);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.tokoh-kata {
    display: inline-block;
}

.tokoh-misi {
    counter-reset: misi;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tokoh-misi li {
    counter-increment: misi;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: 1rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1rem;
    line-height: 1.6;
}

.tokoh-misi li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tokoh-misi li::before {
    content: counter(misi, decimal-leading-zero);
    color: var(--al-gold-400);
    font-family: var(--al-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Mosaik keseharian
 * ------------------------------------------------------------------ */

.tokoh-foto-bagian {
    overflow-x: clip;
}

.tokoh-foto-kepala {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.tokoh-foto-deret {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tokoh-foto-deret > li {
    min-width: 0;
}

.tokoh-ubin {
    position: relative;
    display: block;
    height: 100%;
    overflow: clip;
    border-radius: var(--al-radius);
    background-color: var(--al-brand-100);
    text-decoration: none;
}

.tokoh-ubin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--al-rayap) var(--al-ease-sorot);
}

.tokoh-ubin:hover img,
.tokoh-ubin:focus-visible img {
    scale: 1.04;
}

/*
 * Keterangan sebagai kartu putih kecil di sudut bawah, selalu tampak:
 * gema kaki bingkai potret, dan kontrasnya tidak bergantung pada fotonya.
 */
.tokoh-ubin-ket {
    position: absolute;
    bottom: 0.75rem;
    inset-inline-start: 0.75rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.4rem 0.7rem;
    border-radius: 0.6rem;
    background-color: var(--al-surface);
    box-shadow: var(--al-lift-1);
    color: var(--al-ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    transition: translate var(--al-pulang) var(--al-ease-sorot);
}

.tokoh-ubin:hover .tokoh-ubin-ket,
.tokoh-ubin:focus-visible .tokoh-ubin-ket {
    translate: 0 -4px;
    transition-duration: var(--al-sorot);
}

/* Cincin fokus digambar di dalam ubin karena tepinya dipangkas. */
.tokoh-ubin:focus-visible,
.tokoh-galeri-tautan:focus-visible {
    outline-offset: -4px;
}

/*
 * Ponsel dan tablet: satu foto besar, empat kotak, lalu bilah Galeri.
 * Foto keenam dan ketujuh tetap ikut kotak tayang dan ada di Galeri.
 */
.tokoh-mosaik {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tokoh-mosaik > li {
    aspect-ratio: 1;
}

.tokoh-mosaik > .tokoh-petak-1 {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
}

.tokoh-mosaik > .tokoh-petak-6,
.tokoh-mosaik > .tokoh-petak-7 {
    display: none;
}

.tokoh-mosaik > .tokoh-galeri-petak {
    grid-column: span 2;
    aspect-ratio: auto;
}

/*
 * Layar lebar: dua baris empat petak setinggi sama, selebar wadah. Rasio
 * kedua baris berjumlah sama (4:3 + 1:1 + 3:4 + 4:3 = 4,4167 kali tinggi),
 * jadi lebar tiap petak cukup ditulis sebagai bagian dari lebar baris; petak
 * kelima selalu turun baris. Pengalinya sedikit di bawah 1 supaya pembulatan
 * tidak mendorong petak keempat ke baris berikutnya.
 */
@media (min-width: 992px) {
    .tokoh-mosaik {
        --baris: calc(100% - 3rem);
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .tokoh-mosaik > li,
    .tokoh-mosaik > .tokoh-petak-1,
    .tokoh-mosaik > .tokoh-galeri-petak {
        flex: 0 0 calc(var(--baris) * 0.30188);
        aspect-ratio: 4 / 3;
    }

    .tokoh-mosaik > .tokoh-petak-2,
    .tokoh-mosaik > .tokoh-galeri-petak {
        flex-basis: calc(var(--baris) * 0.22641);
        aspect-ratio: 1;
    }

    .tokoh-mosaik > .tokoh-petak-3,
    .tokoh-mosaik > .tokoh-petak-6 {
        flex-basis: calc(var(--baris) * 0.16981);
        aspect-ratio: 3 / 4;
    }

    .tokoh-mosaik > .tokoh-petak-6,
    .tokoh-mosaik > .tokoh-petak-7 {
        display: block;
    }
}

/* Kisi seragam bila fotonya kurang dari tujuh. */
.tokoh-kisi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tokoh-kisi > li {
    aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
    .tokoh-kisi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

/*
 * Petak penutup bidang hijau pekat bermotif lingkaran seperti kepala
 * halaman: tanpa foto, petak putih terbaca sebagai foto yang gagal dimuat.
 * Di ponsel ia menjadi bilah selebar mosaik.
 */
.tokoh-galeri-tautan {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    min-height: 3.75rem;
    overflow: clip;
    padding: 1rem 1.25rem;
    border-radius: var(--al-radius);
    background-color: var(--al-brand-800);
    color: var(--al-gold-100);
    font-family: var(--al-font-display);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    transition: background-color var(--al-pulang) var(--al-ease-sorot);
}

@media (min-width: 992px) {
    .tokoh-galeri-tautan {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding: clamp(1rem, 2vw, 1.5rem);
    }
}

.tokoh-galeri-tautan::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--al-pattern-soft);
    background-size: 160px 160px;
    pointer-events: none;
}

.tokoh-galeri-tautan .btn-ico {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    font-size: 0.95rem;
    transition: translate var(--al-pulang) var(--al-ease-sorot);
}

.tokoh-galeri-tautan:hover,
.tokoh-galeri-tautan:focus-visible {
    background-color: var(--al-brand-900);
    color: var(--al-gold-100);
    transition-duration: var(--al-sorot);
}

.tokoh-galeri-tautan:hover .btn-ico,
.tokoh-galeri-tautan:focus-visible .btn-ico {
    translate: calc(6px * var(--arah)) 0;
    transition-duration: var(--al-sorot);
}

/* ------------------------------------------------------------------ *
 * Penutup halaman
 * ------------------------------------------------------------------ */

/*
 * Lembaga lain sebagai ubin dalam kisi, lalu ajakan mendaftar sebagai pita
 * selebar wadah. Ajakan diletakkan terakhir karena ia langkah berikutnya
 * bagi pembaca halaman ini. Berdampingan, kartu ajakan harus setinggi daftar
 * lima lembaga dan menyisakan bidang hijau kosong.
 */
.tokoh-lembaga-judul {
    margin-bottom: 1rem;
}

/* Semua baris setinggi baris tertinggi, walau hanya satu nama yang turun baris. */
.tokoh-lembaga {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.75rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .tokoh-lembaga {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .tokoh-lembaga {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* Ubin setinggi sama di satu baris, berbatas garis seperti kartu lain di halaman ini. */
.tokoh-lembaga .unit-link {
    height: 100%;
    padding: 0.65rem 0.85rem 0.65rem 0.65rem;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    background-color: var(--al-surface);
}

[dir="rtl"] .tokoh-lembaga .unit-link {
    padding: 0.65rem 0.65rem 0.65rem 0.85rem;
}

/*
 * Lebih besar daripada di bilah samping view.php: di sana singkatan panjang
 * seperti "Pengasuh" terpotong oleh tanda selebar 54 px.
 */
.tokoh-lembaga .unit-link img,
.tokoh-lembaga .unit-link-mark {
    flex-basis: 64px;
    width: 64px;
    height: 48px;
}

.tokoh-lembaga .unit-link-mark {
    padding-inline: 0.2rem;
    font-size: 0.7rem;
}

.tokoh-lembaga .unit-link-text strong {
    font-size: 0.92rem;
}

/*
 * Pita ajakan: teks di awal, tombol di ujung. Di layar sempit tombolnya
 * turun ke bawah teks lewat flex-wrap, tanpa titik henti tersendiri.
 */
.tokoh-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
    overflow: clip;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--al-radius-lg);
}

.tokoh-cta-teks {
    flex: 1 1 22rem;
    min-width: 0;
}

.tokoh-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--al-pattern-soft);
    background-size: 180px 180px;
    pointer-events: none;
}

.tokoh-cta p {
    max-width: 38rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Tombol setinggi target sentuh 44 px, bukan ukuran kecil. */
.tokoh-tombol {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.15rem;
}

/*
 * Bootstrap mematikan outline .btn saat fokus dan menggantinya dengan
 * box-shadow dari --bs-btn-focus-shadow-rgb, yang tidak disetel .btn-gold:
 * tanpa ini tombol emas tidak bertanda apa pun saat dicapai lewat Tab.
 * Krem, bukan emas: cincin emas tenggelam di tepi tombol emas.
 */
.tokoh-tombol:focus-visible {
    outline: 2px solid var(--al-gold-100);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Gerak saat muat
 * ------------------------------------------------------------------ */

/*
 * Animasi CSS, bukan kelas data-reveal: deret potret sudah tergambar
 * sebelum site.js berjalan, dan kelas penyembunyi yang datang belakangan
 * tidak pernah terlihat bergerak. Di layar lebar deret ini ada di layar
 * pertama, jadi geraknya berjalan saat halaman terbuka: kartu naik satu
 * per satu, foto tersingkap dari kaki dan merayap mendekat, lalu nama
 * muncul. Di layar lebih sempit geraknya terikat gulir (lihat di bawah).
 * Isian backwards tidak meninggalkan apa pun.
 */
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
    .tokoh-kelompok-nama::before,
    .tokoh-kelompok-nama::after {
        animation: tokoh-garis-lebar 1s var(--al-ease) 0.3s backwards;
    }

    .tokoh-daftar > li {
        animation: tokoh-naik 0.9s var(--al-ease) var(--tunda, 0ms) backwards;
    }

    .tokoh-bingkai {
        animation: tokoh-singkap 1.1s var(--al-ease) calc(var(--tunda, 0ms) + 120ms) backwards;
    }

    .tokoh-foto {
        animation: tokoh-foto-mendarat 1.8s var(--al-ease) calc(var(--tunda, 0ms) + 120ms) backwards;
    }

    .tokoh-kartu {
        animation: tokoh-muncul 0.8s var(--al-ease) calc(var(--tunda, 0ms) + 380ms) backwards;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Tekan pada layar sentuh: unsur yang bisa ditekan menyusut sedikit. */
    .tokoh-ubin:active,
    .tokoh-galeri-tautan:active,
    .tokoh-lembaga .unit-link:active {
        scale: 0.98;
    }
}

/* Garis kelompok melebar dari label ke luar. */
@keyframes tokoh-garis-lebar {
    from {
        transform: scaleX(0);
    }
}

.tokoh-kelompok-nama::before {
    transform-origin: 100% 50%;
}

.tokoh-kelompok-nama::after {
    transform-origin: 0 50%;
}

[dir="rtl"] .tokoh-kelompok-nama::before {
    transform-origin: 0 50%;
}

[dir="rtl"] .tokoh-kelompok-nama::after {
    transform-origin: 100% 50%;
}

@keyframes tokoh-naik {
    from {
        opacity: 0;
        translate: 0 28px;
    }
}

@keyframes tokoh-singkap {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(0);
    }
}

@keyframes tokoh-foto-mendarat {
    from {
        transform: scale(1.14);
    }
}

@keyframes tokoh-muncul {
    from {
        opacity: 0;
        translate: 0 10px;
    }
}

/* ------------------------------------------------------------------ *
 * Gerak terikat gulir
 * ------------------------------------------------------------------ */

/*
 * Terikat posisi gulir, bukan waktu: menggulir balik memutar geraknya
 * mundur, dan memuat ulang di tengah halaman langsung menampilkan keadaan
 * yang sesuai. Setiap singkapan selesai saat unsurnya baru masuk sebagian,
 * dan tidak ada yang bergeser lagi sesudahnya, jadi deret yang sejajar
 * tetap sejajar di posisi gulir mana pun. Satu unsur hanya punya satu
 * pemilik transform.
 *
 * Wadah yang memangkas isinya di berkas ini memakai overflow: clip, bukan
 * hidden. hidden menjadikannya wadah gulir, dan view() milik unsur di
 * dalamnya mengikuti wadah yang tidak pernah bergulir itu: geraknya diam
 * di keadaan akhir tanpa galat apa pun.
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Hanya lapisan latar yang bergeser terus; ia tidak sejajar dengan apa pun. */
        .tokoh-potret-bagian::before {
            animation: tokoh-turun linear both;
            animation-timeline: scroll(root);
            animation-range: 0 100svh;
        }

        @media (max-width: 1199.98px) {
            .tokoh-daftar > li {
                animation: tokoh-naik linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 45%;
            }

            .tokoh-bingkai {
                animation: tokoh-singkap linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 60%;
            }

            .tokoh-foto {
                animation: tokoh-foto-mendarat linear both;
                animation-timeline: view();
                animation-range: entry 0% cover 50%;
            }
        }

        /*
         * Hanya judulnya yang menajam dari buram. Paragraf dan kartu penutup
         * dibiarkan diam: teks panjang yang tersingkap tampak setengah pudar
         * di potret satu halaman penuh, dan bacaannya tidak bertambah apa pun.
         */
        .tokoh-tentang-judul {
            animation: tokoh-menajam linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }

        /*
         * Panel visi melebar dari tengah; kata visinya menyala satu per satu.
         * Tiap kata memakai timeline-nya sendiri, bukan timeline panel: baris
         * terakhir baru masuk layar jauh setelah panelnya, dan dengan timeline
         * panel kata-kata itu masih redup padahal sudah terbaca.
         */
        .tokoh-visi {
            animation: tokoh-panel-lebar linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }

        /*
         * Nyalanya selesai dalam kira-kira 120 px pertama setelah barisnya
         * masuk. Rentang yang lebih panjang membuat baris di pita bawah layar
         * tetap redup di potret satu halaman penuh.
         */
        .tokoh-kata {
            animation: tokoh-kata-nyala linear both;
            animation-timeline: view();
            animation-range: entry 0% cover calc(6% + var(--i) / var(--n) * 8%);
        }

        .tokoh-misi li {
            animation: tokoh-geser-masuk linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }

        /*
         * Petak tersingkap dari kaki dengan selisih kecil antarkolom, lalu
         * fotonya merayap mendarat. Selisihnya hanya pada awal singkapan;
         * semuanya utuh begitu baris itu masuk separuh.
         */
        .tokoh-foto-deret > li {
            animation: tokoh-petak-singkap linear both;
            animation-timeline: view();
            animation-range: entry var(--geser, 0%) entry calc(var(--geser, 0%) + 40%);
        }

        .tokoh-foto-deret > li:nth-child(4n + 2) {
            --geser: 4%;
        }

        .tokoh-foto-deret > li:nth-child(4n + 3) {
            --geser: 8%;
        }

        .tokoh-foto-deret > li:nth-child(4n) {
            --geser: 12%;
        }

        .tokoh-ubin img {
            animation: tokoh-foto-mendarat linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 50%;
        }
    }
}

@keyframes tokoh-turun {
    to {
        transform: translateY(60px);
    }
}

@keyframes tokoh-panel-lebar {
    from {
        clip-path: inset(0 5% round var(--al-radius-xl));
    }

    to {
        clip-path: inset(0 round var(--al-radius-xl));
    }
}

@keyframes tokoh-menajam {
    from {
        opacity: 0.35;
        filter: blur(8px);
    }
}

@keyframes tokoh-kata-nyala {
    from {
        opacity: 0.45;
        transform: translateY(0.35em);
    }
}

@keyframes tokoh-geser-masuk {
    from {
        opacity: 0;
        translate: calc(28px * var(--arah)) 0;
    }
}

@keyframes tokoh-petak-singkap {
    from {
        clip-path: inset(100% 0 0 0 round var(--al-radius));
    }

    to {
        clip-path: inset(0 round var(--al-radius));
    }
}

/* ------------------------------------------------------------------ *
 * Penyetelan layar kecil
 * ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    /* Bingkai di kolom sempit: huruf sedikit lebih kecil supaya gelar tidak empat baris. */
    .tokoh-figur {
        padding: 0.45rem 0.45rem 0;
    }

    .tokoh-kartu {
        min-height: 5.75rem;
        padding: 0.7rem 0.3rem 0.85rem;
    }

    .tokoh-nama {
        font-size: 0.875rem;
    }

    .tokoh-peran {
        font-size: 0.75rem;
    }
}

/* ------------------------------------------------------------------ *
 * Gerak dikurangi
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .tokoh-daftar > li,
    .tokoh-figur,
    .tokoh-foto,
    .tokoh-peran::before,
    .tokoh-ubin img,
    .tokoh-ubin-ket,
    .tokoh-galeri-tautan,
    .tokoh-galeri-tautan .btn-ico {
        transition: none;
    }

    .tokoh-figur {
        transform: none;
    }

    .tokoh-tetikus .tokoh-daftar > li:hover,
    .tokoh-daftar > li.is-aktif {
        translate: none;
    }

    .tokoh-tetikus .tokoh-daftar > li:hover .tokoh-foto,
    .tokoh-daftar > li.is-aktif .tokoh-foto,
    .tokoh-ubin:hover img,
    .tokoh-ubin:focus-visible img {
        scale: none;
    }

    .tokoh-ubin:hover .tokoh-ubin-ket,
    .tokoh-ubin:focus-visible .tokoh-ubin-ket,
    .tokoh-galeri-tautan:hover .btn-ico,
    .tokoh-galeri-tautan:focus-visible .btn-ico {
        translate: none;
    }
}