/*
 * Tema situs Pondok Pesantren Al-Amin Mojokerto.
 * Dibangun di atas Bootstrap 5 dengan penyesuaian warna dan komponen.
 */

:root {
    /*
     * Warna lembaga. Nilainya di sini milik pesantren - hijau - dan ditimpa
     * per situs pada bagian "Wajah tiap situs" di bawah. Namanya sengaja
     * tidak menyebut hijau: pada situs MTs dan MA isinya bukan hijau, dan
     * token yang berbohong tentang isinya adalah token yang cepat atau lambat
     * dipakai keliru.
     */
    --al-brand-900: #06342b;
    --al-brand-800: #0a4a3c;
    --al-brand-700: #0f6b57;
    --al-brand-600: #14846b;
    --al-brand-100: #e6f4f0;

    /*
     * Kanal warna lembaga, terpisah dari nilai heksadesimalnya.
     *
     * rgba() tidak bisa menerima token heksadesimal, jadi setiap bayangan dan
     * tirai yang bening dulu menuliskan angkanya sendiri. Akibatnya tidak
     * kelihatan sebagai galat: nilainya hijau pesantren, dan di situs MTs dan
     * MA warna lembaganya berganti sedangkan angka mentah itu tidak ikut -
     * bayangan biru tetap berpendar hijau. Kanalnya ditimpa per situs bersama
     * heksadesimalnya, sehingga satu tempat mengatur keduanya.
     */
    --al-brand-900-rgb: 6, 52, 43;
    --al-brand-700-rgb: 15, 107, 87;
    --al-brand-600-rgb: 20, 132, 107;

    /*
     * Satu tingkat lebih muda daripada brand-100, untuk blok kata di dalam
     * mosaik suasana. Dihitung dari brand-100 supaya ikut berganti antar situs;
     * sebelumnya token ini tidak pernah didefinisikan, sehingga pemakaiannya
     * selalu jatuh ke nilai hijau yang ditulis sebagai cadangan.
     */
    --al-brand-50: color-mix(in srgb, var(--al-brand-100) 55%, #fff);

    /*
     * Emas dipakai dua arah, dan ambang keterbacaannya berbeda di tiap arah.
     * Yang 700 satu-satunya yang cukup gelap untuk tulisan di atas bidang putih
     * (4,86:1, di atas ambang 4,5:1). Yang 600 hanya mencapai 3,25:1, jadi
     * tempatnya bidang warna, tepi, dan ikon - bukan tulisan. Yang 500 dan 400
     * hanya untuk tulisan di atas bidang gelap.
     */
    --al-gold-700: #96690a;
    --al-gold-600: #b8860b;
    --al-gold-500: #d4a017;
    --al-gold-400: #e9b81c;
    --al-gold-100: #fdf6e3;
    --al-gold-500-rgb: 212, 160, 23;
    --al-gold-700-rgb: 150, 105, 10;
    --al-gold-400-rgb: 233, 184, 28;
    --al-ink: #14211f;
    --al-muted: #5f6f6b;
    --al-line: #e3eae8;
    --al-surface: #ffffff;
    --al-canvas: #f6f8f7;

    /*
     * Dua bidang berdiri lebih gelap daripada brand-900: bilah paling atas dan
     * panel navigasi layar sempit. Keduanya dulu angka mentah, jadi tetap hijau
     * di situs MTs dan MA. Sekarang dihitung dari warna lembaganya, sehingga
     * tiap situs mendapat versi gelapnya sendiri tanpa nilai baru ditetapkan.
     */
    --al-brand-950: color-mix(in srgb, var(--al-brand-900) 60%, #000);
    --al-brand-990: color-mix(in srgb, var(--al-brand-900) 40%, #000);

    /* Tulisan badan artikel: sedikit lebih hangat daripada --al-ink. */
    --al-ink-read: #23302d;

    /* Bidang putih bernada hijau samar, untuk daftar di dalam kartu. */
    --al-surface-soft: #fbfdfc;

    /*
     * Hitam kehijauan untuk tirai foto, bayangan, dan bayangan tulisan. Satu
     * nilai, dan bukan warna lembaga: tugasnya menggelapkan apa pun yang ada di
     * baliknya, dan tugas itu sama di ketiga situs. Sebelumnya ada dua nilai
     * yang beda tipis dan dipakai bergantian tanpa pembagian peran - yang
     * bertahan di sini yang jauh lebih sering dipakai.
     */
    --al-shade-rgb: 4, 21, 15;

    /*
     * Tiga tingkat bayangan, dan hanya tiga.
     *
     * Bayangan di sini bertugas menyatakan jarak dari halaman, bukan menghias:
     * yang diam hampir tidak berbayang, yang diangkat oleh sorotan naik satu
     * tingkat, dan yang benar-benar melayang di atas halaman - menu turun,
     * panel pencarian, kotak dialog - naik satu tingkat lagi. Dulu tiap tingkat
     * punya tiga sampai empat nilai yang beda tipis, sehingga dua kartu dengan
     * peran sama terangkat setinggi berbeda tanpa alasan.
     *
     * Beberapa bayangan sengaja berdiri di luar tangga ini: tombol terapung,
     * kepala situs saat digulir, dan pendar emas pada ajakan utama. Yang
     * terakhir bukan ketinggian sama sekali, melainkan aksen warna.
     */
    --al-lift-1: 0 1px 2px rgba(var(--al-brand-900-rgb), 0.05), 0 12px 32px rgba(var(--al-brand-900-rgb), 0.06);
    --al-lift-2: 0 16px 32px rgba(var(--al-brand-900-rgb), 0.12);
    --al-lift-3: 0 24px 60px rgba(var(--al-brand-900-rgb), 0.22);

    /*
     * Panel besar - sorotan, judul halaman, ajakan penutup - berdiri sebagai
     * kartu membulat yang menyisakan tepi halaman di kiri dan kanannya, bukan
     * pita yang menabrak dinding layar. Jari-jari dan tepinya dikumpulkan di
     * sini supaya satu angka mengatur semuanya sekaligus.
     */
    /*
     * Motif lingkaran bertumpang tindih - pola geometris yang lazim pada seni
     * hias Islam - dipakai sebagai tekstur samar di balik panel besar dan
     * bagian berlatar warna. Ditulis sebagai SVG sebaris supaya tidak
     * menambah satu pun permintaan berkas, dan ukurannya diatur lewat
     * background-size di tempat pemakaiannya.
     *
     * Dua varian: bergaris terang untuk panel hijau pekat, bergaris hijau
     * untuk bagian berlatar muda.
     */
    --al-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='120' cy='0' r='60'/%3E%3Ccircle cx='0' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");
    --al-pattern-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.075' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='120' cy='0' r='60'/%3E%3Ccircle cx='0' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");
    --al-pattern-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%230f6b57' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='120' cy='0' r='60'/%3E%3Ccircle cx='0' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");

    --al-radius: 0.9rem;
    --al-radius-lg: 1.5rem;
    --al-radius-xl: 2rem;
    /*
     * Jarak tepi halaman. Batas bawahnya 1rem, sama dengan jarak tepi
     * .container pada layar sempit yang disetel di bagian layar kecil, supaya
     * panel membulat dan isi di dalam wadah berdiri pada garis yang sama.
     */
    --al-shell: clamp(1rem, 2.2vw, 2.25rem);

    /* Tinggi terendah bidang sorotan; ditimpa per situs. */
    --al-hero-min: clamp(26rem, 74vh, 41rem);

    /*
     * Tipografi mengikuti cara Apple: satu keluarga huruf untuk seluruh
     * halaman, dibedakan oleh ukuran, berat, dan kerapatan - bukan oleh
     * keluarga kedua untuk judul.
     *
     * Tumpukannya menaruh huruf sistem Apple di depan, sehingga di iPhone,
     * iPad, dan Mac yang tampil benar-benar San Francisco - huruf yang sama
     * dengan apple.com. SF Pro milik Apple dan tidak boleh diunggah sendiri,
     * jadi di Windows dan Android yang dipakai Inter, yang bentuk hurufnya
     * paling dekat dan memang lahir sebagai penggantinya.
     *
     * Dua nama untuk satu tumpukan: yang display dipakai judul dan angka
     * besar, yang body untuk sisanya. Keduanya sengaja sama isinya - yang
     * membedakan hanya kerapatan dan berat yang diterapkan di tempat
     * pemakaiannya, persis seperti SF Pro Display dan SF Pro Text.
     */
    --al-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --al-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /*
     * Label kecil di atas judul - di sorotan, di kepala bagian, dan di ubin
     * PSB - memakai kapital berspasi lebar. Bukan hiasan: ukurannya harus jauh
     * di bawah judulnya supaya tidak bersaing dengannya, dan pada ukuran
     * sekecil itu kapital yang rapat terbaca sebagai gumpalan. Spasinya yang
     * memisahkan hurufnya kembali.
     *
     * Satu nilai untuk ketiganya: peran yang sama pada ukuran yang sama tidak
     * punya alasan berjarak berbeda. Kepala kolom kaki halaman dan kepala
     * tabel memakai nilainya sendiri karena perannya lain.
     */
    --al-eyebrow-track: 0.16em;

    /*
     * Lengkung gerak. Tiga, dan ketiganya tidak saling menggantikan.
     *
     * --al-ease melaju cepat lalu berhenti panjang tanpa memantul; itulah yang
     * membuat perpindahan terasa berbobot alih-alih meluncur. Tempatnya gerak
     * sekali jalan yang mendarat: penyingkapan saat digulir, sorotan halaman,
     * judul yang menajam.
     *
     * --al-ease-sorot adalah jawaban atas sentuhan, dan bedanya ada di awal.
     * Kata kunci `ease` bawaan peramban berangkat pelan; pada perpindahan
     * sependek seperlima detik, keterlambatan itu tidak terbaca sebagai lembut
     * melainkan sebagai kaku - tetikus sudah berada di atas tombol sebelum
     * tombolnya mulai bergerak. Yang ini berangkat penuh sejak bingkai pertama
     * lalu melambat mendarat, sehingga tanggapannya terasa seketika tanpa
     * menyentak.
     *
     * --al-ease-soft simetris, jadi jalannya sama ke dua arah. Tempatnya yang
     * berulang atau bolak-balik: denyut, sapuan, buka-tutup.
     */
    --al-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --al-ease-sorot: cubic-bezier(0.25, 0.8, 0.3, 1);
    --al-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    /*
     * Tangga waktu. Sebelumnya lima belas panjang tersebar di tiga berkas,
     * dari 0,15s sampai 0,6s, tanpa aturan yang memisahkan satu dari yang
     * lain. Yang membuat sebuah situs terasa satu bukan panjang tiap geraknya,
     * melainkan sedikitnya panjang yang dipakai. Empat cukup, dan yang
     * membedakannya seberapa jauh sesuatu berpindah.
     *
     * Berangkat dan pulang sengaja tidak sama panjang. Tangan yang mendekat
     * ingin dijawab cepat; tangan yang sudah menjauh tidak menunggu apa pun,
     * jadi kepulangannya boleh lebih santai. Selisih itu yang membedakan sorot
     * yang terasa hidup dari sorot yang terasa dipotong.
     *
     * Gerak masuk halaman - penyingkapan, sorotan, judul kata demi kata -
     * tidak ikut tangga ini. Panjangnya sengaja berbeda-beda supaya foto dan
     * teks di sebelahnya tidak selesai serentak, dan alasannya ditulis di
     * tempat masing-masing.
     */
    --al-sorot: 0.22s;
    --al-pulang: 0.34s;
    --al-panel: 0.42s;
    /*
     * Foto yang membesar pelan di balik bingkainya. Paling lambat di antara
     * keempatnya justru karena jaraknya paling kecil: pada bidang selebar foto,
     * gerak yang merayap terbaca sebagai kedalaman, sedangkan gerak yang sama
     * dipercepat terbaca sebagai gambar yang melompat.
     */
    --al-rayap: 0.6s;

    --bs-body-font-family: var(--al-font-body);
    --bs-body-color: var(--al-ink);
    --bs-body-bg: var(--al-canvas);
    /*
     * Bootstrap 5.3 mewarnai tautan lewat rgba(var(--bs-link-color-rgb), …),
     * bukan lewat --bs-link-color. Selama ini hanya yang terakhir yang
     * ditimpa, sehingga setiap tautan yang tidak diberi warna sendiri - isi
     * artikel, tabel agenda, keterangan album - tetap memakai biru bawaan
     * Bootstrap, satu-satunya warna di situs ini yang bukan berasal dari
     * palet pesantren. Bentuk rgb-nya ikut ditimpa di sini.
     */
    --bs-link-color: var(--al-brand-700);
    --bs-link-color-rgb: 15, 107, 87;
    --bs-link-hover-color: var(--al-brand-900);
    --bs-link-hover-color-rgb: 6, 52, 43;
    --bs-border-color: var(--al-line);
    --bs-primary: var(--al-brand-700);
    --bs-primary-rgb: 15, 107, 87;
}

body {
    background-color: var(--al-canvas);
    color: var(--al-ink);
    /*
     * 17px, bukan 16px. Itu ukuran dasar yang dipakai Apple, dan pada huruf
     * berbadan besar seperti SF dan Inter selisih satu piksel itu yang
     * memisahkan teks yang terbaca tenang dari teks yang terasa sesak.
     */
    font-size: 1.0625rem;
    line-height: 1.6;
    /*
     * -0.022em adalah angka yang dipakai apple.com pada teks 17px. Leading-nya
     * tidak ikut disalin: Apple memakai 1.47 untuk kalimat pemasaran yang
     * pendek, sedangkan halaman ini memuat berita bertubuh panjang dalam
     * bahasa Indonesia, yang pada leading serapat itu berubah jadi blok padat.
     */
    letter-spacing: -0.022em;
    /*
     * Penghalusan tipis. Tanpa ini huruf bertumpuk pada latar gelap - dan
     * situs ini penuh teks putih di atas foto - tampak lebih tebal daripada
     * yang diminta beratnya.
     */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 * Judul memakai keluarga yang sama dengan teks biasa; yang membedakannya
 * berat, ukuran, dan kerapatan. Semakin besar ukurannya semakin rapat
 * jaraknya - itulah sebabnya judul besar di sini menerima tracking lebih
 * ketat lagi pada tempatnya masing-masing.
 */
/*
 * Bobot 600, bukan 700 - itu berat yang dipakai apple.com untuk seluruh
 * judulnya, dari 32px sampai 56px.
 *
 * Kerapatannya tidak disalin mentah. Apple hanya memakai -0.005em pada 56px
 * karena SF Pro Display sendiri sudah rapat bawaannya; Inter lebih lapang,
 * sehingga butuh lebih banyak untuk sampai pada rasa yang sama. Angka di sini
 * dipilih dari perbandingan render, bukan dari hitungan - -0.032em yang
 * sempat dipakai membuat huruf berdesakan.
 *
 * cv10 memberi taji pada huruf G dan ss03 membulatkan koma serta tanda kutip;
 * keduanya bentuk yang dipakai SF Pro. cv01 sengaja tidak dipakai - ia justru
 * menambahkan serif kaki pada angka 1, yang tidak dimiliki SF.
 */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--al-font-display);
    font-optical-sizing: auto;
    font-feature-settings: "cv10", "ss03";
    font-weight: 600;
    color: var(--al-brand-900);
    letter-spacing: -0.012em;
    line-height: 1.12;
}

h1, .h1 {
    letter-spacing: -0.018em;
    line-height: 1.07;
}

h2, .h2 {
    letter-spacing: -0.015em;
    line-height: 1.09;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/*
 * Lompatan ke tautan jangkar digulir, bukan dilompati. scroll-padding-top
 * menyisakan ruang setinggi kepala situs yang menempel - tanpa itu bagian
 * yang dituju berhenti tepat di bawah bilah navigasi dan judulnya tertutup.
 */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

html {
    scroll-padding-top: calc(var(--site-header-h, 74px) + 1rem);
}

/* Penanda fokus papan tik yang sama di seluruh situs. */
:focus-visible {
    outline: 2px solid var(--al-gold-500);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Tombol dan lencana
 * ------------------------------------------------------------------ */

.btn-primary {
    --bs-btn-bg: var(--al-brand-700);
    --bs-btn-border-color: var(--al-brand-700);
    --bs-btn-hover-bg: var(--al-brand-800);
    --bs-btn-hover-border-color: var(--al-brand-800);
    --bs-btn-active-bg: var(--al-brand-900);
    --bs-btn-active-border-color: var(--al-brand-900);
    --bs-btn-disabled-bg: var(--al-brand-600);
    --bs-btn-disabled-border-color: var(--al-brand-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--al-brand-700);
    --bs-btn-border-color: var(--al-brand-700);
    --bs-btn-hover-bg: var(--al-brand-700);
    --bs-btn-hover-border-color: var(--al-brand-700);
    --bs-btn-active-bg: var(--al-brand-800);
    --bs-btn-active-border-color: var(--al-brand-800);
}

.btn-gold {
    --bs-btn-color: var(--al-brand-900);
    --bs-btn-bg: var(--al-gold-400);
    --bs-btn-border-color: var(--al-gold-400);
    --bs-btn-hover-color: var(--al-brand-900);
    --bs-btn-hover-bg: var(--al-gold-500);
    --bs-btn-hover-border-color: var(--al-gold-500);
    --bs-btn-active-bg: var(--al-gold-600);
    --bs-btn-active-border-color: var(--al-gold-600);
}

/*
 * Bentuk tombol yang dipakai seluruh situs: sudutnya membulat sedang - bukan
 * pil, bukan kotak - tulisannya tebal, dan seluruhnya terangkat sedikit saat
 * disentuh penunjuk. Diletakkan di sini sebagai penyetelan .btn bawaan
 * Bootstrap supaya setiap tombol ikut, termasuk yang dibuat widget Yii.
 */
.btn {
    --bs-btn-border-radius: 0.7rem;
    --bs-btn-font-weight: 600;
    transition: transform var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot),
                border-color var(--al-pulang) var(--al-ease-sorot), color var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover {
        transform: none;
    }
}

/*
 * Cakram panah di ujung tombol ajakan. Ia mengambil warna tulisan tombolnya,
 * jadi satu bentuk ini bekerja di atas tombol emas maupun tombol bergaris.
 * Panahnya bergeser sedikit ke depan saat tombolnya disentuh - gerak yang
 * mengisyaratkan "lanjut" tanpa memindahkan apa pun yang lain.
 */
.btn-ico {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-inline-start: 0.55rem;
    margin-block: -0.35rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.72rem;
    vertical-align: middle;
    transition: transform var(--al-pulang) var(--al-ease-sorot);
}

.btn:hover .btn-ico {
    transform: translateX(0.18rem);
}

/*
 * Tautan "selengkapnya" pada kartu: setara tombol dalam peran, tetapi tanpa
 * bidang warna - hanya tulisan emas dengan cakram panah yang sama.
 */
.link-more {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--al-gold-700);
}

.link-more:hover {
    color: var(--al-brand-800);
}

.link-more .btn-ico {
    margin-block: 0;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.66rem;
}

.link-more:hover .btn-ico {
    transform: translateX(0.18rem);
}

/*
 * Pil navigasi - pemilih unit pada halaman struktur organisasi. Warnanya
 * ditulis pada .nav-pills, bukan pada :root: Bootstrap memasang nilai
 * bawaannya langsung pada kelas itu, dan nilai yang menempel di elemen selalu
 * menang atas nilai yang diwariskan dari akar. Tanpa ini pil yang aktif tetap
 * biru bawaan Bootstrap - satu-satunya bidang biru di seluruh situs.
 */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--al-brand-700);
    --bs-nav-pills-border-radius: 0.6rem;
    gap: 0.35rem;
}

.nav-pills .nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--al-brand-800);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--al-brand-100);
}

/*
 * Ukuran hurufnya ditulis mutlak, bukan mengikuti .badge bawaan Bootstrap
 * yang memakai 0.75em. Lencana kategori kerap duduk di dalam baris keterangan
 * yang hurufnya sudah kecil, dan perkalian itu menyeretnya sampai di bawah
 * 10px - terlalu halus untuk dibaca di layar ponsel.
 */
.badge-category {
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *
 * Bilah atas dan navigasi
 * ------------------------------------------------------------------ */

/*
 * Bilah alamat di atas bilah navigasi. Keduanya kini sama-sama hijau pekat,
 * jadi bilah ini digelapkan sedikit dan diberi garis rambut di bawahnya -
 * tanpa itu keduanya melebur menjadi satu pita tinggi tanpa bentuk.
 */
.topbar {
    background-color: var(--al-brand-950);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.825rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.topbar a {
    color: rgba(255, 255, 255, 0.78);
}

.topbar a:hover {
    color: #fff;
}

/*
 * Kepala situs berupa pita hijau pekat bertulisan putih. Sebelumnya ia
 * berbahan kaca putih: bening di puncak halaman, memutih setelah tergulir.
 * Kaca itu hanya bekerja di atas isi yang terang - di beranda ia melayang di
 * atas foto sorotan yang gelap dan berubah keruh - dan warnanya ikut berganti
 * dua kali dalam satu halaman, sehingga bilah navigasi tidak pernah punya
 * satu wajah tetap. Pita pekat ini tampil sama di mana pun, dan tulisannya
 * tetap putih baik saat menumpang di atas foto maupun saat berdiri sendiri.
 */
.site-header {
    background-color: var(--al-brand-900);
    border-bottom: 1px solid transparent;
    transition: background-color var(--al-panel) var(--al-ease-sorot), border-color var(--al-panel) var(--al-ease-sorot), box-shadow var(--al-panel) var(--al-ease-sorot);
}

/* Bayangan tipis baru tumbuh setelah ada isi halaman yang lewat di baliknya. */
.site-header.is-scrolled {
    box-shadow: 0 6px 22px rgba(var(--al-shade-rgb), 0.22);
}

/* ------------------------------------------------------------------ *
 * Kepala situs yang menumpang di atas sorotan gambar
 * ------------------------------------------------------------------ */

/*
 * Di halaman bersorotan gambar, kepala situs naik ke atas fotonya dan
 * latarnya dilepas sama sekali - gambar terlihat utuh sampai tepi atas,
 * tulisannya berganti putih. Begitu halaman digulir, semuanya pulih menjadi
 * kaca seperti di halaman lain.
 *
 * Sorotan ditarik naik sejauh tinggi kepala situs, lalu diberi jarak dalam
 * sebesar itu juga supaya isinya tidak tersembunyi di baliknya.
 */
.header-overlay main > .hero:first-child {
    margin-top: calc(-1 * var(--site-header-h, 74px));
}

/*
 * Jarak dalamnya dipikul oleh isi slide, bukan oleh sorotannya. Gambar dan
 * tirai tiap slide dipasang mutlak di dalam kotak slide, jadi kalau sorotan
 * yang diberi jarak dalam, bidang di belakang kepala situs tinggal latar
 * hijau polos dan fotonya baru mulai di bawah bilah navigasi.
 */
.header-overlay main > .hero:first-child .hero-body {
    padding-top: var(--site-header-h, 74px);
}

.header-overlay .site-header:not(.is-scrolled) {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/*
 * Tirai tipis di balik kepala situs. Sorotan beranda menggelap ke arah kiri,
 * jadi sisi kanannya - tempat pencarian berada - bisa jatuh di atas langit
 * atau tembok terang; tanpa tirai ini tulisan putihnya hilang di sana.
 */
.header-overlay .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(100% + 2.5rem);
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0.5), rgba(var(--al-shade-rgb), 0));
    pointer-events: none;
    transition: opacity var(--al-pulang) var(--al-ease-sorot);
}

.header-overlay .site-header.is-scrolled::before {
    opacity: 0;
}

.header-overlay .site-header .navbar {
    position: relative;
    z-index: 1;
}


.site-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--al-brand-700), var(--al-brand-900));
    color: #fff;
    font-family: var(--al-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.brand-mark-logo {
    padding: 8px;
}

.brand-mark-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text strong {
    display: block;
    font-family: var(--al-font-display);
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--al-brand-900);
    transition: color var(--al-pulang) var(--al-ease-sorot);
}

.brand-text span {
    display: block;
    font-size: 0.75rem;
    color: var(--al-muted);
}

.site-nav .nav-link {
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--al-ink);
    padding-inline: 0.85rem;
    border-radius: 0.5rem;
    transition: color var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    color: var(--al-brand-700);
    background-color: var(--al-brand-100);
}

.site-nav .nav-link.active {
    color: var(--al-brand-800);
    background-color: var(--al-brand-100);
}

/*
 * Bentuk dasar panel menu turun: kartu putih membulat. Inilah wujudnya di
 * dalam kartu menu layar kecil. Layar lebar menimpanya lewat blok @media di
 * bawah, dan urutan itu tidak boleh dibalik - media query tidak menambah
 * kekhususan, jadi yang menang adalah aturan yang ditulis belakangan.
 */
.site-nav .dropdown-menu {
    border: 1px solid rgba(var(--al-brand-900-rgb), 0.08);
    border-radius: 0.75rem;
    box-shadow: var(--al-lift-3);
    padding: 0.4rem;
    background-color: var(--al-surface);
}

.site-nav .dropdown-item {
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    /*
     * Nama menu yang panjang dibiarkan turun ke baris berikutnya. Bawaan
     * Bootstrap menahannya pada satu baris, sehingga satu tautan bernama
     * panjang melebarkan seluruh panel sampai keluar tepi layar.
     */
    white-space: normal;
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
}

/* Tautan ke halaman induk berdiri sebagai kepala daftar, bukan salah satu isinya. */
.site-nav .dropdown-item-all {
    font-weight: 700;
}

/* Tanda panah pada tautan induk berbalik selama panelnya terbuka. */
.site-nav .dropdown-toggle::after {
    transition: transform var(--al-pulang) var(--al-ease-sorot);
}

.site-nav .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

/*
 * Di layar lebar panel menu turun sebagai bidang emas pekat, bukan kartu
 * putih. Tautan induknya ikut menguning saat panelnya terbuka, sehingga
 * keduanya terbaca sebagai satu bentuk yang menjulur ke bawah dari bilah
 * navigasi - bukan kotak asing yang mengambang di depannya.
 */
@media (min-width: 992px) {
    .site-nav .dropdown-menu {
        border: 0;
        border-radius: 0 0 0.75rem 0.75rem;
        margin-top: 0;
        /*
         * Jarak dalam panel dijumlah dengan jarak dalam butirnya menjadi
         * 0.85rem, sama dengan jarak dalam .nav-link di atasnya, supaya
         * tulisan anak menu berdiri tepat di bawah tulisan induknya.
         */
        padding: 0.35rem;
        min-width: 14rem;
        max-width: 22rem;
        background-color: var(--al-gold-400);
        box-shadow: var(--al-lift-3);
    }

    .site-nav .dropdown-item {
        color: var(--al-brand-900);
        font-weight: 600;
        padding: 0.5rem;
    }

    .site-nav .dropdown-item:hover,
    .site-nav .dropdown-item:focus {
        background-color: rgba(var(--al-brand-900-rgb), 0.12);
        color: var(--al-brand-900);
    }

    .site-nav .dropdown-divider {
        margin-block: 0.3rem;
        border-top-color: rgba(var(--al-brand-900-rgb), 0.18);
        opacity: 1;
    }

    /*
     * Sudut bawah tautan induk diluruskan selama panelnya terbuka. Tautan
     * dan panel sama-sama emas dan saling bersentuhan, jadi lengkung di
     * garis temunya hanya menyisakan dua takik hijau di antara dua bidang
     * yang semestinya terbaca sebagai satu.
     */
    .site-nav .nav-link.dropdown-toggle.show {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /*
     * Panelnya tidak muncul begitu saja: ia turun sejengkal sambil memudar
     * masuk. Bootstrap memasang .show bersamaan dengan display:block, jadi
     * keadaan awalnya ditulis pada .dropdown-menu yang belum ber-.show dan
     * animasinya dijalankan sebagai keyframe sekali jalan.
     */
    .site-nav .dropdown-menu.show {
        animation: menu-turun var(--al-sorot) var(--al-ease) both;
    }
}

@keyframes menu-turun {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * Di dalam kartu menu layar kecil anak menu tidak mengambang sebagai kartu
 * di depan daftarnya - ia mekar di tempat dan menjorok ke dalam, terbaca
 * sebagai cabang dari tautan induknya. Kartu melayang di dalam panel yang
 * juga melayang hanya menumpuk dua lapis bayangan di ruang yang sudah sempit,
 * dan panel mengambang itu ikut tertimpa tautan di bawahnya ketika daftarnya
 * digulir.
 */
@media (max-width: 991.98px) {
    .site-nav .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin: 0.1rem 0 0.4rem;
        padding: 0;
        padding-inline-start: 0.7rem;
        border: 0;
        border-inline-start: 2px solid var(--al-brand-100);
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .site-nav .dropdown-item {
        padding-inline: 0.5rem;
    }

    .site-nav .dropdown-divider {
        margin-block: 0.35rem;
    }
}

/* ------------------------------------------------------------------ *
 * Panel menu layar kecil
 * ------------------------------------------------------------------ */

/*
 * Menu ponsel dulu berupa laci setinggi layar yang menutup hampir seluruh
 * halaman untuk sepuluh tautan saja - pengunjung kehilangan tempatnya berdiri
 * setiap kali membukanya. Sekarang ia berupa kartu kecil yang mencuat dari
 * tombol garis tiga di sudut atas, setinggi isinya saja, dengan halaman masih
 * terlihat di sekelilingnya.
 *
 * Rangka Bootstrap-nya dipertahankan - jebakan fokus, tombol Esc, dan ketukan
 * di luar kartu tetap bekerja tanpa satu baris kode tambahan; yang diganti
 * hanya tempat, ukuran, dan cara munculnya.
 */
@media (max-width: 991.98px) {
    .site-header .nav-panel {
        --bs-offcanvas-padding-x: 0.4rem;
        --bs-offcanvas-padding-y: 0.4rem;
        --bs-offcanvas-transition: opacity var(--al-panel) var(--al-ease), transform var(--al-panel) var(--al-ease);

        /*
         * Digantung tepat di bawah pita hijau - tingginya diukur site.js,
         * karena kepala situs tidak sama tinggi di setiap lebar layar.
         */
        top: calc(var(--site-header-h, 74px) + 0.3rem);
        bottom: auto;
        /*
         * Sisi yang dituju ditulis secara logis: pada bahasa kanan-ke-kiri
         * tombol menunya pindah ke kiri, dan kartunya harus ikut.
         */
        inset-inline-start: auto;
        inset-inline-end: 0.55rem;
        width: min(17.5rem, calc(100vw - 1.1rem));
        /*
         * Daftar panjang tidak melewati tepi bawah layar - sisanya digulir di
         * dalam kartu. 100dvh menyusul sebagai penimpa: peramban lama yang
         * belum mengenalnya jatuh kembali ke 100vh di baris sebelumnya.
         */
        max-height: calc(100vh - var(--site-header-h, 74px) - 1.25rem);
        max-height: calc(100dvh - var(--site-header-h, 74px) - 1.25rem);
        border: 0;
        border-radius: var(--al-radius);
        background-color: var(--al-surface);
        box-shadow: var(--al-lift-3);
        /*
         * Mengembang dari sudut tempat tombolnya berada, bukan menggeser dari
         * tepi layar - itulah yang membuatnya terbaca sebagai milik tombol itu.
         */
        transform-origin: top right;
        transform: scale(0.92);
        opacity: 0;
    }

    [dir="rtl"] .site-header .nav-panel {
        transform-origin: top left;
    }

    /*
     * Bootstrap memindahkan fokus ke kartunya begitu terbuka, dan penanda
     * fokus situs melingkarinya dengan garis emas - padahal kartunya sendiri
     * bukan sesuatu yang ditekan. Penandanya dilepas di sini saja; setiap
     * tautan di dalamnya tetap membawa penandanya masing-masing.
     */
    .site-header .nav-panel:focus-visible {
        outline: 0;
    }

    .site-header .nav-panel.showing,
    .site-header .nav-panel.show {
        transform: none;
        opacity: 1;
    }

    /*
     * Ditulis setelah aturan .show di atas: selama menutup, Bootstrap memasang
     * .hiding tanpa melepas .show, jadi keduanya sama-sama terpilih dan yang
     * belakangan yang menang.
     */
    .site-header .nav-panel.hiding {
        transform: scale(0.96);
        opacity: 0;
    }

    /*
     * Tirai di belakangnya hanya menyamarkan halaman, tidak memadamkannya:
     * kartu sekecil ini justru mengandalkan halaman yang masih terlihat untuk
     * menunjukkan bahwa ketukan di luar akan menutupnya.
     */
    .offcanvas-backdrop {
        background-color: var(--al-brand-990);
    }

    .offcanvas-backdrop.show {
        opacity: 0.3;
    }

    .nav-panel .offcanvas-body {
        display: flex;
        flex-direction: column;
        overscroll-behavior: contain;
    }

    .nav-panel .site-nav {
        margin-bottom: 0;
    }

    /*
     * Tinggi butir dinaikkan menjadi sekitar 44px - ukuran sasaran sentuh yang
     * nyaman bagi ibu jari, sekaligus memberi daftar ini irama yang tenang.
     */
    .nav-panel .site-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.65rem 0.8rem;
        font-size: 0.95rem;
        border-radius: 0.6rem;
    }

    /* Tanda panah menu induk bergeser ke ujung baris, bukan menempel di nama. */
    .nav-panel .site-nav .dropdown-toggle::after {
        margin-inline-start: 0;
        flex: 0 0 auto;
    }

    .nav-panel .site-nav .dropdown-item {
        padding-block: 0.5rem;
    }

    /*
     * Baris kaki pemilih bahasa dipisahkan dari daftar tautan oleh satu garis
     * tipis - cukup untuk menandai bahwa ia bukan salah satu tujuan menu.
     */
    .nav-panel-lang {
        margin-top: 0.4rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--al-line);
    }
}

/* ------------------------------------------------------------------ *
 * Pemilih bahasa
 * ------------------------------------------------------------------ */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--al-line);
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--al-ink);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot), border-color var(--al-pulang) var(--al-ease-sorot);
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    background-color: var(--al-brand-100);
    border-color: transparent;
    color: var(--al-brand-700);
}

.lang-code {
    letter-spacing: 0.04em;
}

.lang-switch .dropdown-menu {
    min-width: 11rem;
    padding: 0.4rem;
    border: 1px solid rgba(var(--al-brand-900-rgb), 0.08);
    border-radius: 0.75rem;
    box-shadow: var(--al-lift-3);
    background-color: var(--al-surface);
}

.lang-switch .dropdown-item {
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.lang-switch .dropdown-item:hover {
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
}

.lang-switch .dropdown-item.active {
    background-color: var(--al-brand-700);
    color: #fff;
}

/*
 * Bentuk terbuka di kaki kartu menu layar kecil: satu baris berisi ikon aksara
 * dan tiga kode bahasa. Nama penuhnya - Indonesia, English, العربية - menuntut
 * hampir selebar kartu dan menjadikan baris kaki ini sepenting daftar tautan
 * di atasnya, padahal orang jarang berganti bahasa dua kali.
 */
.lang-inline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.lang-inline-icon {
    margin-inline-end: 0.15rem;
    color: var(--al-muted);
    font-size: 0.9rem;
}

.lang-inline-item {
    min-width: 2.4rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid var(--al-line);
    border-radius: 999px;
    color: var(--al-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.lang-inline-item.is-active {
    background-color: var(--al-brand-700);
    border-color: var(--al-brand-700);
    color: #fff;
}

/*
 * Nama pesantren dan tombol menu berdiri di atas pita hijau, jadi warnanya
 * putih di setiap halaman - tidak lagi hanya ketika kepala situs kebetulan
 * menumpang di atas foto.
 */
.brand-text strong {
    color: #fff;
}

.brand-text span {
    color: rgba(255, 255, 255, 0.7);
}

/*
 * Perkakas di ujung bilah - cari, bahasa, tombol menu - berdiri sebagai satu
 * kelompok rapat di luar panel menu. Karena ia bukan bagian dari panel itu,
 * tombol carinya tetap terjangkau di layar kecil tanpa membuka menu lebih
 * dulu, dan kartu menunya berisi daftar tautan saja.
 */
.header-tools {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /*
     * Pada layar tersempit nama pesantren dan ketiga perkakas ini tidak muat
     * dalam satu baris, dan Bootstrap menurunkan kelompoknya ke baris kedua.
     * Di sana ia tetap ditarik ke ujung, sehingga pergantian barisnya terbaca
     * sebagai susunan yang disengaja, bukan sisa yang terlempar ke kiri.
     */
    margin-inline-start: auto;
}

@media (min-width: 992px) {
    .header-tools {
        gap: 0.5rem;
        margin-inline-start: 0.75rem;
    }
}

/*
 * Tinggi bawaan tombolnya hanya 32px, di bawah ukuran nyaman untuk ibu jari.
 * Yang dilebarkan sasaran sentuhnya, bukan gambar garis tiganya.
 */
.navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: #fff;
}

/*
 * Isi bilah navigasi - tautan, kotak cari, tombolnya - dicetak putih mulai
 * lebar lg saja. Di bawah itu semuanya berpindah ke dalam kartu menu yang
 * berlatar terang, dan tulisan putih akan lenyap di sana.
 */
@media (min-width: 992px) {
    .site-nav .nav-link {
        color: rgba(255, 255, 255, 0.88);
    }

    .site-nav .nav-link:hover,
    .site-nav .nav-link:focus,
    .site-nav .nav-link.active,
    /* Bootstrap memasang .show pada tautan pemicunya sendiri, bukan pada <li> pembungkusnya. */
    .site-nav .nav-link.show {
        color: var(--al-brand-900);
        background-color: var(--al-gold-400);
    }

    .site-header .form-control {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .site-header .form-control::placeholder {
        color: rgba(255, 255, 255, 0.72);
    }

    .site-header .form-control:focus {
        background-color: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.55);
        color: #fff;
        box-shadow: none;
    }

    .site-header .btn-primary {
        --bs-btn-bg: rgba(255, 255, 255, 0.18);
        --bs-btn-border-color: rgba(255, 255, 255, 0.3);
        --bs-btn-hover-bg: var(--al-gold-400);
        --bs-btn-hover-border-color: var(--al-gold-400);
        --bs-btn-hover-color: var(--al-brand-900);
    }

    .site-header .lang-toggle {
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .site-header .lang-toggle:hover,
    .site-header .lang-toggle:focus-visible {
        background-color: var(--al-gold-400);
        border-color: var(--al-gold-400);
        color: var(--al-brand-900);
    }
}

/* ------------------------------------------------------------------ *
 * Hero beranda
 * ------------------------------------------------------------------ */

/*
 * Sorotan beranda: spanduk gambar selebar layar dengan teks di atasnya,
 * bukan foto kecil di samping teks. Gambarnya yang berbicara lebih dulu.
 */
/*
 * Sudut bawah sorotan dibulatkan, sehingga fotonya berakhir sebagai bidang
 * yang punya bentuk alih-alih terpotong garis lurus di tengah halaman. Sudut
 * atasnya dibiarkan siku: di sana foto memang harus menempel rapat ke tepi
 * layar, di belakang bilah navigasi yang menumpang di atasnya.
 */
.hero {
    position: relative;
    color: #fff;
    background-color: var(--al-brand-900);
    overflow: hidden;
    border-end-start-radius: var(--al-radius-xl);
    border-end-end-radius: var(--al-radius-xl);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Video sorotan menempati bidang yang sama dengan fotonya. Latarnya digelapkan
 * supaya bingkai pertama yang belum termuat tidak berkedip putih, dan menu
 * bawaan peramban disingkirkan: video ini latar, bukan tayangan yang ditonton.
 */
.hero-video {
    background-color: var(--al-brand-900);
    pointer-events: none;
}

.hero-video::-webkit-media-controls {
    display: none !important;
}

/*
 * Foto sorotan merayap mendekat perlahan selama slide-nya tampil. Gerak ini
 * sangat lambat dan hanya beberapa persen besarnya - yang dicari kesan foto
 * yang hidup, bukan gerak yang menarik mata dari judulnya. Video tidak ikut:
 * gambarnya sudah bergerak sendiri.
 *
 * Satu-satunya tempat di situs ini yang memakai linear, dan justru karena
 * geraknya paling panjang. Lengkung yang melambat di ujung menghabiskan
 * hampir seluruh jaraknya pada empat detik pertama, lalu diam tiga belas
 * detik sisanya: fotonya berhenti sementara slide-nya masih tampil, dan yang
 * terbaca bukan ketenangan melainkan gerak yang macet. Rayapan yang rata
 * tidak pernah berhenti, jadi tidak pernah terlihat berhenti.
 */
@media (prefers-reduced-motion: no-preference) {
    .hero .carousel-item.active img.hero-bg {
        animation: sorotan-merayap 18s linear both;
    }
}

@keyframes sorotan-merayap {
    from {
        transform: scale(1.001);
    }

    to {
        transform: scale(1.075);
    }
}

/*
 * Tirai gelap dipekatkan di sisi tempat teks sorotan berada, lalu ditambah
 * gelap di dasar gambar: kontrol geser dan sudut membulat di bawah berdiri di
 * atas bagian foto yang bisa saja terang.
 *
 * Angkanya sengaja hitam kehijauan yang tetap, bukan warna lembaga: tugasnya
 * menggelapkan foto agar tulisan di atasnya terbaca, dan tugas itu sama di
 * ketiga situs. Tirai yang ikut berganti warna akan mengubah rona fotonya.
 */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 45%, rgba(var(--al-shade-rgb), 0.6) 100%),
        linear-gradient(100deg, rgba(var(--al-shade-rgb), 0.94) 0%, rgba(var(--al-shade-rgb), 0.8) 38%, rgba(var(--al-shade-rgb), 0.4) 68%, rgba(var(--al-shade-rgb), 0.3) 100%);
}

/*
 * Bidang cadangan ketika slide tidak punya foto. Warna rata saja terbaca
 * sebagai cat yang mati, jadi ada satu titik emas yang hangat di kanan atas -
 * berperan sebagai sumber cahaya, dan menaruh bagian paling gelap di kiri,
 * tempat judulnya berdiri.
 */
.hero-empty {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(var(--al-brand-900-rgb), 0.96), rgba(var(--al-brand-700-rgb), 0.85)),
        radial-gradient(circle at 82% 18%, rgba(var(--al-gold-500-rgb), 0.32), transparent 55%);
}

/* Isi slide berada di atas gambar dan tirainya. */
.hero-body {
    position: relative;
    z-index: 2;
}

.hero h1,
.hero .display-5 {
    color: #fff;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: var(--al-eyebrow-track);
    text-transform: uppercase;
    color: var(--al-gold-500);
}

.hero-lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
    max-width: 34rem;
}

.hero-slide {
    min-height: var(--al-hero-min);
    display: flex;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

/*
 * Pembungkus tombol sorotan. Wrapping diatur di sini, bukan lewat kelas
 * utilitas Bootstrap, karena utilitas itu memakai !important sehingga tidak
 * bisa ditimpa pada breakpoint layar kecil.
 */
.hero-actions {
    flex-wrap: wrap;
}

/*
 * .hero-slide adalah kotak flex, sehingga barisnya bawaan tidak boleh
 * menyusut di bawah lebar kontennya (min-width: auto). Tanpa penyetelan ini
 * baris tombol yang panjang mendorong isi slide melewati tepi layar kecil.
 */
.hero-slide > .row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Semua slide dipaksa setinggi sama agar tidak melompat saat berganti. */
.hero .carousel-item {
    position: relative;
    min-height: var(--al-hero-min);
}

/* Kontrol geser manual: panah, titik posisi, dan keterangan singkat. */
.hero-controls {
    position: relative;
    z-index: 2;
}

.hero-nav {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 1.05rem;
    transition: background-color var(--al-pulang) var(--al-ease-sorot), border-color var(--al-pulang) var(--al-ease-sorot);
}

.hero-nav:hover,
.hero-nav:focus-visible {
    background-color: var(--al-gold-600);
    border-color: var(--al-gold-600);
    color: #fff;
}

.hero-controls .carousel-indicators {
    position: static;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/*
 * Bilahnya tetap setipis 4px, tetapi diberi bingkai bening di atas dan
 * bawahnya supaya sasaran sentuhnya setinggi 44px - bilah 4px nyaris mustahil
 * dikenai ibu jari. background-clip menahan warnanya tetap di dalam bilah.
 */
.hero-controls .carousel-indicators [data-bs-target] {
    width: 26px;
    height: 4px;
    margin: 0;
    border: 20px solid transparent;
    border-inline-width: 0;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
    opacity: 1;
    transition: background-color var(--al-pulang) var(--al-ease-sorot), width var(--al-pulang) var(--al-ease-sorot);
}

.hero-controls .carousel-indicators .active {
    width: 40px;
    background-color: var(--al-gold-500);
}

.hero-hint {
    margin-inline-start: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------------ *
 * Kartu dan bagian konten
 * ------------------------------------------------------------------ */

.section {
    padding-block: clamp(3rem, 6vw, 5rem);
}

/*
 * Bagian berlatar hijau muda, diselingi di antara bagian berlatar putih.
 * Pergantian latar inilah yang memberi halaman panjang irama - tanpa itu
 * seluruh beranda terbaca sebagai satu gulungan putih tanpa perhentian.
 * Motif geometrisnya dipasang sebagai lapisan tersendiri agar kepekatannya
 * bisa ditekan jauh di bawah kepekatan isinya.
 */
.section-tint {
    position: relative;
    isolation: isolate;
    background-color: var(--al-brand-100);
}

.section-tint::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--al-pattern-ink);
    background-size: 180px 180px;
    opacity: 0.13;
    pointer-events: none;
}

.section-title {
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    margin-bottom: 0.4rem;
}

.section-subtitle {
    color: var(--al-muted);
    margin-bottom: 0;
}

/*
 * Kepala bagian yang lama: judul di kiri, tombol di kanan. Masih dipakai di
 * halaman dalam, tempat judulnya berdampingan dengan isi lain.
 */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/*
 * Kepala bagian yang dirata-tengahkan: label kecil, judul besar, lalu satu
 * kalimat penjelas. Tombol "semua ..." yang dulu berdiri di sebelah judul
 * dipindahkan ke bawah kisinya - di situ ia menjadi langkah berikutnya
 * setelah isinya dibaca, bukan pesaing judul yang menarik mata lebih dulu.
 */
.section-head {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.section-eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--al-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--al-eyebrow-track);
    text-transform: uppercase;
    color: var(--al-gold-700);
}

.section-head .section-title {
    margin-bottom: 0.65rem;
}

/* Baris tombol di bawah kisi kartu. */
.section-more {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}

.page-head-lead {
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.78);
}

/*
 * Tinggi kartu mengikuti isinya. Untuk kartu yang berjajar dalam satu baris
 * dan perlu sama tinggi, tambahkan kelas utilitas .h-100 pada elemennya -
 * jangan memaksakan height di sini, karena kartu yang ditumpuk vertikal
 * akan ikut meregang setinggi kolom dan menabrak bagian di bawahnya.
 */
.card-soft {
    background-color: var(--al-surface);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius-lg);
    overflow: hidden;
    transition: transform var(--al-pulang) var(--al-ease-sorot),
                box-shadow var(--al-pulang) var(--al-ease-sorot),
                border-color var(--al-pulang) var(--al-ease-sorot);
}

.card-soft:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--al-lift-2);
}

/*
 * Fotonya ikut mendekat sedikit saat kartunya disentuh. Gerak ini terjadi di
 * dalam kartu yang sudutnya membulat dan isinya dipangkas, jadi tidak ada
 * tepi yang tersingkap.
 */
.card-media {
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    background-color: var(--al-brand-100);
    transition: transform var(--al-rayap) var(--al-ease-sorot);
}

.card-soft:hover .card-media {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .card-soft:hover {
        transform: none;
    }

    .card-soft:hover .card-media {
        transform: none;
    }
}

.card-media-sm {
    width: 92px;
    height: 72px;
    flex: 0 0 92px;
    border-radius: 0.6rem;
    object-fit: cover;
    background-color: var(--al-brand-100);
}

.card-title-link {
    color: var(--al-brand-900);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title-link:hover {
    color: var(--al-brand-700);
}

.card-excerpt {
    color: var(--al-muted);
    font-size: 0.925rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta {
    font-size: 0.8rem;
    color: var(--al-muted);
}

/*
 * Baris penutup kartu berita: ajakan membaca di satu sisi, jumlah pembaca di
 * sisi lain. Di kolom sempit - kartu "Berita Lainnya" yang berjajar tiga di
 * dalam kolom artikel - keduanya tidak muat sebaris, jadi dibiarkan turun
 * alih-alih memaksa tulisan ajakannya patah di tengah kata.
 */
.card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.card-foot .link-more {
    white-space: nowrap;
}

.meta-dot::before {
    content: "•";
    margin-inline: 0.4rem;
}

/* ------------------------------------------------------------------ *
 * Statistik, agenda, dan daftar samping
 * ------------------------------------------------------------------ */

/*
 * Kotak angka berubah dari kartu putih bergaris menjadi bidang hijau pekat.
 * Empat angka yang berdiri sebagai blok warna terbaca sebagai satu deret yang
 * disengaja - sementara kartu putih di antara kartu putih lain hanya hilang ke
 * dalam halaman.
 */
.stat-card {
    background: linear-gradient(150deg, var(--al-brand-800), var(--al-brand-900));
    border-radius: var(--al-radius-lg);
    padding: clamp(1.4rem, 2.6vw, 2.1rem) 1.25rem;
    text-align: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.72);
    transition: transform var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--al-lift-2);
}

@media (prefers-reduced-motion: reduce) {
    .stat-card:hover {
        transform: none;
    }
}

/* Angka besar mengikuti perlakuan judul: bobot 600 dan kerapatan yang sama. */
.stat-value {
    font-family: var(--al-font-display);
    font-optical-sizing: auto;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.018em;
}

.stat-label {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.date-chip {
    width: 58px;
    flex: 0 0 58px;
    border-radius: 0.65rem;
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
    text-align: center;
    padding: 0.45rem 0.25rem;
    line-height: 1.1;
}

.date-chip strong {
    display: block;
    font-size: 1.25rem;
    font-family: var(--al-font-display);
}

.date-chip span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
 * Kotak keterangan ringkas yang berdiri berdampingan di kepala halaman
 * agenda - waktu di kiri, tempat di kanan. Tingginya dipenuhkan ke kolomnya
 * supaya sisi bawah keduanya segaris; tanpa itu kotak waktu yang berisi dua
 * baris menjulang lebih tinggi daripada kotak tempat yang hanya satu baris,
 * dan pasangan yang seharusnya terbaca sepadan jadi terlihat miring sebelah.
 */
.fact-box {
    height: 100%;
    background-color: var(--al-brand-100);
}

.sidebar-box {
    background-color: var(--al-surface);
    border: 1px solid var(--al-line);
    border-radius: 0.9rem;
    padding: 1.25rem;
}

.sidebar-box + .sidebar-box {
    margin-top: 1.25rem;
}

.sidebar-title {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--al-brand-100);
}

/* ------------------------------------------------------------------ *
 * Kepala halaman dalam
 * ------------------------------------------------------------------ */

/*
 * Judul halaman dalam berdiri sebagai panel membulat yang menyisakan tepi
 * halaman di kiri dan kanannya, bukan pita hijau yang menabrak dinding layar.
 * Bentuk kartu ini yang membedakannya dari kepala situs tepat di atasnya -
 * keduanya hijau pekat, dan tanpa jarak serta sudut membulat panelnya hanya
 * terbaca sebagai bilah navigasi yang kebetulan menebal.
 *
 * Isinya dirata-tengahkan: judul, keterangan singkat, lalu remah jejak - satu
 * kolom pendek yang membaca dari atas ke bawah alih-alih menempel di sudut.
 *
 * Satu titik emas samar di kanan atas memberi panelnya arah cahaya, sehingga
 * bidang hijaunya tidak terbaca rata. Kadarnya di bawah separuh titik yang
 * sama pada sorotan: di sini yang dibutuhkan hanya kesan permukaan, bukan
 * penanda tempat judul harus berdiri.
 */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-inline: var(--al-shell);
    margin-top: var(--al-shell);
    border-radius: var(--al-radius-lg);
    background:
        radial-gradient(circle at 78% 22%, rgba(var(--al-gold-500-rgb), 0.22), transparent 58%),
        linear-gradient(120deg, var(--al-brand-900), var(--al-brand-700));
    color: #fff;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

/*
 * Motif garis samar di balik panel, seperti anyaman yang tercetak pada
 * kertasnya. Pola dan pemakaiannya diterangkan pada bagian .pattern-lines
 * di bawah.
 */
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--al-pattern);
    background-size: 220px 220px;
    opacity: 0.3;
    pointer-events: none;
}

.page-head h1 {
    color: #fff;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    margin-bottom: 0.5rem;
}

.page-head p {
    margin-inline: auto;
}

.page-head .breadcrumb {
    margin-bottom: 0;
    margin-top: 1rem;
    justify-content: center;
    font-size: 0.85rem;
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
}

.page-head .breadcrumb a {
    color: rgba(255, 255, 255, 0.78);
}

.page-head .breadcrumb a:hover {
    color: #fff;
}

.page-head .breadcrumb .active {
    color: var(--al-gold-400);
}

/* ------------------------------------------------------------------ *
 * Artikel
 * ------------------------------------------------------------------ */

.article-body {
    font-size: 1.03rem;
    color: var(--al-ink-read);
}

.article-body p {
    margin-bottom: 1.1rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: 1.9rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.article-body ul,
.article-body ol {
    padding-inline-start: 1.35rem;
    margin-bottom: 1.1rem;
}

.article-body li {
    margin-bottom: 0.4rem;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin-block: 1rem;
}

.article-body blockquote {
    border-inline-start: 4px solid var(--al-gold-500);
    background-color: var(--al-gold-100);
    padding: 1rem 1.25rem;
    border-radius: 0 0.6rem 0.6rem 0;
    font-style: italic;
}

.poem-body {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--al-ink-read);
}

/* ------------------------------------------------------------------ *
 * Struktur organisasi
 * ------------------------------------------------------------------ */

.person-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background-color: var(--al-surface);
    border: 1px solid var(--al-line);
    border-radius: 0.8rem;
    padding: 0.85rem 1rem;
    height: 100%;
}

.person-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(140deg, var(--al-brand-600), var(--al-brand-800));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--al-font-display);
}

.person-name {
    font-weight: 700;
    color: var(--al-brand-900);
    line-height: 1.3;
    font-size: 0.95rem;
}

.person-position {
    font-size: 0.82rem;
    color: var(--al-muted);
}

/* ------------------------------------------------------------------ *
 * Galeri
 * ------------------------------------------------------------------ */

.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.75rem;
    transition: transform var(--al-pulang) var(--al-ease-sorot);
}

.gallery-grid a:hover img {
    transform: scale(1.02);
}

/*
 * Judul album dicetak dengan warna judul, bukan warna tautan. Di bawah
 * fotonya ia berperan sebagai nama gambar - sama seperti judul pada kartu
 * berita - dan warna tautan di sana hanya membuat deretan album terlihat
 * seperti daftar pranala.
 */
.gallery-grid a {
    color: var(--al-brand-900);
}

.gallery-grid a:hover {
    color: var(--al-brand-700);
}

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

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--al-brand-900);
    color: rgba(255, 255, 255, 0.72);
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
    margin-top: 3rem;
    border-start-start-radius: var(--al-radius-xl);
    border-start-end-radius: var(--al-radius-xl);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--al-pattern);
    background-size: 200px 200px;
    opacity: 0.14;
    pointer-events: none;
}

.site-footer h5 {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a:hover {
    color: var(--al-gold-500);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
}

/*
 * Penanda bulat kecil di depan tautan menu. Hanya pada kedua lajur menu -
 * lajur kontak punya ikonnya sendiri di depan tiap baris, dan penanda kedua
 * di sana hanya menumpuk.
 */
.footer-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    transition: color var(--al-pulang) var(--al-ease-sorot);
}

.footer-links a::before {
    content: "";
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background-color: var(--al-gold-500);
    transform: translateY(-0.15em);
    transition: transform var(--al-pulang) var(--al-ease-sorot);
}

.footer-links a:hover::before {
    transform: translateY(-0.15em) scale(1.5);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    transition: background-color var(--al-pulang) var(--al-ease-sorot), color var(--al-pulang) var(--al-ease-sorot), transform var(--al-pulang) var(--al-ease-sorot);
}

.social-link:hover {
    background-color: var(--al-gold-500);
    color: var(--al-brand-900) !important;
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .social-link:hover {
        transform: none;
    }
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2.5rem;
    padding-block: 1.1rem;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------ *
 * Paginasi dan lain-lain
 * ------------------------------------------------------------------ */

.pagination {
    --bs-pagination-color: var(--al-brand-800);
    --bs-pagination-active-bg: var(--al-brand-700);
    --bs-pagination-active-border-color: var(--al-brand-700);
    --bs-pagination-hover-bg: var(--al-brand-100);
    --bs-pagination-border-radius: 0.55rem;
    gap: 0.3rem;
}

/*
 * Tabel di dalam kartu - daftar agenda lengkap - dibuat setenang isi kartu
 * lainnya: kepala kolom kecil berhuruf kapital, garis pemisah setipis garis
 * kartu, dan baris yang menyala ketika penunjuk melewatinya.
 */
.table-clean {
    --bs-table-bg: transparent;
    --bs-table-color: var(--al-ink);
    margin-bottom: 0;
}

.table-clean thead th {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--al-line);
    background-color: var(--al-brand-100);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--al-brand-800);
}

.table-clean tbody td {
    padding: 0.9rem 1.1rem;
    border-bottom-color: var(--al-line);
    vertical-align: middle;
}

.table-clean tbody tr:last-child td {
    border-bottom: 0;
}

.table-clean tbody tr {
    transition: background-color var(--al-pulang) var(--al-ease-sorot);
}

.table-clean tbody tr:hover td {
    background-color: rgba(var(--al-brand-600-rgb), 0.06);
}

/* Lencana untuk keadaan yang sudah lewat: hadir, tetapi tidak menarik mata. */
.badge-quiet {
    background-color: var(--al-line);
    color: var(--al-muted);
    font-weight: 600;
}

.empty-state {
    background-color: var(--al-surface);
    border: 1px dashed var(--al-line);
    border-radius: 0.9rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--al-muted);
}

@media (max-width: 991.98px) {
    .site-nav .nav-link {
        padding-inline: 0.5rem;
    }

    .hero-slide,
    .hero .carousel-item {
        min-height: 27rem;
    }

    /*
     * Ruang bawah disisakan untuk kontrol geser yang menumpang di dasar
     * gambar. Tanpa ini tombol yang menumpuk di layar sempit menabraknya.
     */
    .hero-slide {
        padding-bottom: 4.5rem !important;
    }

    /*
     * Pada layar kecil gambar pendamping disembunyikan, sehingga tinggi slide
     * hanya ditentukan oleh panjang teks dan berbeda-beda antar sorotan.
     * Judul dan deskripsi dikunci pada tiga baris supaya seluruh slide sama
     * tinggi dan tidak melompat ketika berganti.
     */
    .hero h1,
    .hero-lead {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero h1 {
        line-height: 1.2;
        min-height: 3.6em;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .hero-lead {
        line-height: 1.7;
        min-height: 5.1em;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /*
     * Tombol dibiarkan membungkus ke baris berikutnya. Sebelumnya labelnya
     * dipotong dengan elipsis demi menjaga tinggi slide, tetapi label seperti
     * "Pendaftaran Santri Baru" jadi terpenggal - dan sejak gambar sorotan
     * menjadi lapisan latar, tinggi slide tidak lagi ditentukan teksnya saja.
     */
    .hero-actions {
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        padding-inline: 1.1rem;
    }
}

/* Pada ponsel yang sangat sempit tombol ditumpuk agar labelnya tetap utuh. */
@media (max-width: 399.98px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }
}

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

@media (max-width: 767.98px) {
    .section {
        padding-block: 2.5rem;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .admission-cta {
        margin-bottom: 2.5rem;
        text-align: center;
    }

    .admission-text {
        margin-inline: auto;
    }

    .admission-cta .text-lg-end {
        text-align: center;
    }
}

/*
 * Jarak tepi di ponsel dilebarkan dari 12px bawaan Bootstrap menjadi 16px.
 * Pada layar 390px, 12px membuat kartu nyaris menyentuh bingkai layar dan
 * tulisan terbaca berdesakan; 16px menyisakan napas tanpa memakan lebar isi
 * secara berarti. Disetel lewat --bs-gutter-x, sumber yang dipakai Bootstrap
 * untuk menghitung padding wadah; baris .row di dalamnya menyatakan nilainya
 * sendiri sehingga jarak antarkolom tidak ikut berubah.
 */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 2rem;
    }
}

/* ------------------------------------------------------------------ *
 * Pintasan layanan
 *
 * Deretan ubin bertaut tepat di bawah sorotan, mengikuti pola situs
 * perguruan tinggi: hal yang paling sering dicari pengunjung berada satu
 * klik dari beranda, tanpa perlu menyusuri menu.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Bilah keadaan penerimaan santri baru
 * ------------------------------------------------------------------ */

/*
 * Sebaris keterangan tepat di bawah sorotan, menjawab pertanyaan yang paling
 * sering dibawa pengunjung beranda pesantren: pendaftaran sedang dibuka atau
 * belum. Isinya berubah sendiri mengikuti gelombang, jadi tidak ada yang perlu
 * disunting tiap tahun ajaran.
 */
.psb-status-wrap {
    background-color: var(--al-surface);
    border-bottom: 1px solid var(--al-line);
    padding-block: 1.5rem;
}

.psb-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--al-line);
    border-radius: 1rem;
    background-color: var(--al-canvas);
}

/* Yang sedang dibuka diberi garis emas di tepi awal barisnya. */
.psb-status.is-open {
    border-inline-start: 4px solid var(--al-gold-500);
    background-color: var(--al-gold-100);
    border-color: rgba(var(--al-gold-500-rgb), 0.35);
}

.psb-status-main {
    flex: 1 1 16rem;
    min-width: 0;
}

.psb-status-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.psb-status.is-open .psb-status-flag {
    color: var(--al-gold-700);
}

.psb-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
}

.psb-status-title {
    margin: 0.4rem 0 0.15rem;
    font-family: var(--al-font-display);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.25;
    color: var(--al-brand-900);
}

.psb-status-meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--al-muted);
}

.psb-status-seats {
    text-align: center;
    line-height: 1.15;
}

.psb-status-seats strong {
    display: block;
    font-family: var(--al-font-display);
    font-size: 1.7rem;
    color: var(--al-brand-800);
}

.psb-status-seats span {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.psb-status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-inline-start: auto;
}

.psb-status-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--al-brand-700);
    white-space: nowrap;
}

.psb-status-link:hover {
    color: var(--al-brand-900);
}

@media (max-width: 575.98px) {
    .psb-status {
        padding: 1.1rem 1.15rem;
        gap: 1rem;
    }

    /*
     * Di layar sempit tombolnya melebar penuh: ia ajakan utama halaman ini,
     * dan sasaran sentuh selebar kartu jauh lebih mudah dikenai.
     */
    .psb-status-actions {
        width: 100%;
        margin-inline-start: 0;
    }

    .psb-status-actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ *
 * Ajakan penerimaan santri baru di penutup beranda
 * ------------------------------------------------------------------ */

/*
 * Ajakan penutup berdiri sebagai panel membulat yang menyisakan tepi halaman
 * di kiri dan kanannya - bentuk yang sama dengan panel judul halaman dalam,
 * sehingga keduanya terbaca sebagai satu keluarga.
 */
.admission-cta {
    position: relative;
    isolation: isolate;
    margin-block: 0 clamp(2.5rem, 5vw, 4.5rem);
    margin-inline: var(--al-shell);
    border-radius: var(--al-radius-lg);
    padding-block: clamp(3rem, 6vw, 5rem);
    background-color: var(--al-brand-900);
    color: #fff;
    overflow: hidden;
}

.admission-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
}

.admission-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(100deg, rgba(var(--al-shade-rgb), 0.95) 0%, rgba(var(--al-shade-rgb), 0.85) 45%, rgba(var(--al-shade-rgb), 0.55) 100%);
}

/* Motif geometris yang sama dengan panel judul, di atas tirai dan di bawah isi. */
.admission-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--al-pattern);
    background-size: 200px 200px;
    opacity: 0.28;
    pointer-events: none;
}

.admission-title {
    color: #fff;
    font-size: clamp(1.75rem, 3.8vw, 2.9rem);
    letter-spacing: -0.03em;
}

.admission-text {
    color: rgba(255, 255, 255, 0.8);
    max-width: 38rem;
}

/* Kontrol geser sorotan dipasang menumpang di dasar gambar. */
.hero-controls-holder {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
}

/*
 * Lencana singkatan pada kartu kelembagaan.
 *
 * Sebelumnya memakai .brand-mark milik kepala situs - lingkaran 46px berhuruf
 * 16px, yang cukup untuk "MA" atau "OSIS" tetapi membuat "Pesantren" meluber
 * keluar lingkarannya. Bentuk pil ikut melebar mengikuti panjang singkatan.
 */
.unit-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-width: 2.9rem;
    height: 2.9rem;
    padding-inline: 1rem;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--al-brand-700), var(--al-brand-900));
    color: #fff;
    font-family: var(--al-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    justify-content: center;
    /* Pilnya melebar mengikuti teks; membungkus dua baris membuatnya sesak. */
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Profil lembaga
 *
 * Halaman profil semula hanya deret kartu teks dengan satu gambar kecil
 * di puncaknya. Sekarang sampul lembaga dijadikan sorotan lebar, isinya
 * dapat dilompati lewat bilah menempel, dan foto suasana beserta
 * dokumentasi galeri ditampilkan sebagai mosaik yang dapat diperbesar.
 * ------------------------------------------------------------------ */

.unit-hero {
    position: relative;
    isolation: isolate;
    margin-top: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--al-brand-900);
}

.unit-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    animation: unit-hero-in 1.2s var(--al-ease) both;
}

/* Tirai gelap menjaga tulisan tetap terbaca di atas foto yang terang. */
.unit-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 38%, rgba(var(--al-shade-rgb), 0.8) 100%);
}

.unit-hero-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: clamp(1rem, 3vw, 1.85rem);
    color: #fff;
    animation: unit-hero-text 0.85s 0.2s var(--al-ease) both;
}

.unit-hero-body .unit-badge {
    margin-bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.unit-hero-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

@keyframes unit-hero-in {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }
}

@keyframes unit-hero-text {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .unit-hero img {
        aspect-ratio: 4 / 3;
    }
}

/*
 * Bilah lompat menempel tepat di bawah kepala situs. Tingginya dibaca dari
 * --site-header-h yang diukur site.js, bukan ditulis mati, karena kepala
 * situs berbeda tinggi antara ponsel dan layar lebar.
 *
 * Latarnya bening dan diburamkan karena isi halaman lewat di bawahnya: tanpa
 * buram, tulisan yang bergeser di baliknya bertumpuk dengan tulisan bilahnya
 * dan keduanya sama-sama tidak terbaca.
 */
.unit-jump-holder {
    position: sticky;
    top: var(--site-header-h, 4.5rem);
    z-index: 6;
    padding-block: 0.85rem;
    background-color: rgba(246, 248, 247, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.unit-jump {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    border: 1px solid var(--al-line);
    border-radius: 999px;
    background-color: var(--al-surface);
    box-shadow: var(--al-lift-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.unit-jump::-webkit-scrollbar {
    display: none;
}

.unit-jump a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    color: var(--al-brand-900);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--al-pulang) var(--al-ease-sorot), color var(--al-pulang) var(--al-ease-sorot);
}

.unit-jump a:hover,
.unit-jump a:focus-visible {
    background-color: var(--al-brand-100);
}

.unit-jump a.is-active {
    background-color: var(--al-brand-700);
    color: #fff;
}

.unit-anchor {
    scroll-margin-top: calc(var(--site-header-h, 4.5rem) + 4.75rem);
}

.unit-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Jarak antarkotak sudah diatur gap, jadi margin bawaannya dinolkan. */
.unit-aside .sidebar-box + .sidebar-box {
    margin-top: 0;
}

.unit-vision {
    position: relative;
    margin-bottom: 1.75rem;
    padding: 1rem 1.1rem 1rem 2.7rem;
    border-radius: 0.75rem;
    background-color: var(--al-gold-100);
    color: var(--al-brand-900);
    font-style: italic;
    line-height: 1.6;
}

.unit-vision::before {
    content: "\201C";
    position: absolute;
    top: 0.4rem;
    inset-inline-start: 0.8rem;
    color: var(--al-gold-500);
    font-family: var(--al-font-display);
    font-size: 2.4rem;
    line-height: 1;
}

.unit-mission {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
}

.unit-mission li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--al-line);
    border-radius: 0.7rem;
    background-color: var(--al-surface-soft);
    font-size: 0.94rem;
    transition: transform var(--al-pulang) var(--al-ease-sorot), border-color var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot);
}

.unit-mission li:hover {
    transform: translateX(4px);
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-100);
}

.unit-mission-no {
    flex: 0 0 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--al-brand-600), var(--al-brand-800));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--al-font-display);
    font-size: 0.78rem;
    font-weight: 700;
}

.person-card {
    transition: transform var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot), border-color var(--al-pulang) var(--al-ease-sorot);
}

.person-card:hover {
    transform: translateY(-2px);
    border-color: var(--al-brand-600);
    box-shadow: var(--al-lift-2);
}

/* ------------------------------------------------------------------ *
 * Mosaik foto
 * ------------------------------------------------------------------ */

.unit-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.unit-photos > .span-2 {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
    .unit-photos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Foto pertama mengisi empat petak agar kisinya tidak menyisakan lubang. */
    .unit-photos > .span-2 {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

.unit-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 0.8rem;
    overflow: hidden;
    background-color: var(--al-brand-100);
    text-decoration: none;
}

.unit-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--al-rayap) var(--al-ease-sorot);
}

.unit-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 45%, rgba(var(--al-shade-rgb), 0.72) 100%);
    opacity: 0;
    transition: opacity var(--al-pulang) var(--al-ease-sorot);
}

.unit-photo-caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 0.6rem 0.75rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity var(--al-pulang) var(--al-ease-sorot), transform var(--al-pulang) var(--al-ease-sorot);
}

.unit-photo:hover img,
.unit-photo:focus-visible img {
    transform: scale(1.06);
}

.unit-photo:hover::after,
.unit-photo:focus-visible::after,
.unit-photo:hover .unit-photo-caption,
.unit-photo:focus-visible .unit-photo-caption {
    opacity: 1;
}

.unit-photo:hover .unit-photo-caption,
.unit-photo:focus-visible .unit-photo-caption {
    transform: none;
}

/* Pada layar sentuh tidak ada tunjuk tetikus, jadi keterangan langsung tampak. */
@media (hover: none) {
    .unit-photo::after,
    .unit-photo-caption {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 * Kotak identitas dan tautan lembaga lain
 * ------------------------------------------------------------------ */

.unit-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--al-line);
}

.unit-facts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.unit-facts dt {
    color: var(--al-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.unit-facts dd {
    margin: 0;
    color: var(--al-brand-900);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: end;
}

.unit-count {
    font-family: var(--al-font-display);
    font-size: 1.05rem;
    color: var(--al-brand-700);
}

.unit-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem;
    border-radius: 0.7rem;
    color: var(--al-ink);
    text-decoration: none;
    transition: transform var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot);
}

.unit-link:hover,
.unit-link:focus-visible {
    transform: translateX(3px);
    background-color: var(--al-brand-100);
    color: var(--al-brand-900);
}

.unit-link img,
.unit-link-mark {
    flex: 0 0 54px;
    width: 54px;
    height: 40px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.unit-link-mark {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--al-brand-600), var(--al-brand-800));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.unit-link-text {
    flex: 1 1 auto;
    min-width: 0;
}

.unit-link-text strong {
    display: block;
    font-size: 0.86rem;
    line-height: 1.3;
}

.unit-link-text small {
    color: var(--al-muted);
    font-size: 0.75rem;
}

.unit-link > i {
    color: var(--al-brand-700);
    font-size: 0.8rem;
}

.unit-cta {
    padding: 1.35rem;
    border-radius: 0.9rem;
    background: linear-gradient(140deg, var(--al-brand-800), var(--al-brand-900));
    color: #fff;
}

.unit-cta h2 {
    color: #fff;
}

.unit-cta p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
}

/* ------------------------------------------------------------------ *
 * Kemunculan isi saat digulir
 *
 * Kelas .reveal dipasang oleh site.js, bukan ditulis di HTML: bila skrip
 * gagal dimuat, seluruh isi halaman tetap terlihat sebagaimana adanya.
 * ------------------------------------------------------------------ */

/*
 * Isi halaman memudar masuk sekali saat dimuat. Video yang menjadi acuan
 * memakai tirai yang menutup lalu membuka di antara dua halaman; di sini yang
 * diambil hanya paruh keduanya - perpindahan halaman tetap ditangani peramban
 * sepenuhnya, jadi tombol kembali, muat ulang, dan buka-di-tab-baru bekerja
 * persis seperti biasa.
 *
 * Hanya kepekatan yang dianimasikan, bukan posisi: menggeser <main> membuatnya
 * menjadi blok penampung, dan apa pun yang dipasang mutlak di dalamnya akan
 * ikut berpindah patokan.
 *
 * Isiannya backwards, bukan both. Dengan both animasi kepekatan tetap melekat
 * setelah animasinya usai, dan <main> selamanya menjadi konteks penumpukan
 * tersendiri di lapis paling bawah - kotak tayang foto di dalamnya lantas
 * tertimbun lapisan gelap milik Bootstrap yang menempel di <body>, sehingga
 * tombol tutup maupun tombol gesernya tidak bisa ditekan sama sekali.
 * Backwards hanya memasang keadaan awal sebelum animasi berjalan, jadi
 * tampilannya sama persis sementara <main> kembali biasa setelah selesai.
 */
@media (prefers-reduced-motion: no-preference) {
    main {
        animation: halaman-masuk var(--al-panel) var(--al-ease) backwards;
    }

    /*
     * Isi sorotan naik satu per satu begitu halaman terbuka. Slide yang belum
     * aktif berstatus display:none dan animasinya habis selagi tersembunyi,
     * jadi ketika gilirannya tiba ia sudah berada di keadaan akhir - persis
     * yang diinginkan, karena pergantian slide punya geseran sendiri.
     */
    .hero-body .hero-eyebrow,
    .hero-body h1,
    .hero-body .hero-lead,
    .hero-body .hero-actions {
        animation: sorotan-naik 0.85s var(--al-ease) both;
    }

    .hero-body h1 {
        animation-delay: 0.12s;
    }

    .hero-body .hero-lead {
        animation-delay: 0.22s;
    }

    .hero-body .hero-actions {
        animation-delay: 0.32s;
    }
}

@keyframes halaman-masuk {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sorotan-naik {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * Gerak masuknya sengaja panjang dan melambat di ujung. Yang membuat sebuah
 * halaman terasa mahal bukan banyaknya animasi melainkan cara berhentinya:
 * lengkung --al-ease melaju hampir seluruh jarak pada sepertiga waktu
 * pertama, lalu mendarat pelan-pelan tanpa memantul.
 *
 * Jaraknya ditambah menjadi 28px dan disertai penyusutan tipis, sehingga isi
 * terasa maju ke arah pembaca alih-alih sekadar menggeser naik.
 */
.reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition: opacity 0.85s var(--al-ease),
                transform 0.85s var(--al-ease);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/*
 * Gambar besar masuk dengan menyusut dari ukuran sedikit lebih besar. Gerak
 * ini yang membuat foto terasa "mendarat" pada tempatnya, dan sengaja lebih
 * lambat daripada teks di sebelahnya supaya keduanya tidak selesai serentak.
 */
.reveal-siap[data-reveal="zoom"] {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1s var(--al-ease), transform 1.2s var(--al-ease);
}

.reveal-siap[data-reveal="zoom"].is-in {
    opacity: 1;
    transform: none;
}

/*
 * Tersingkap dari tepi bawah, bukan memudar. Dipakai pita foto selebar layar:
 * pada bidang selebar itu, memudar terbaca seperti gambar yang lambat dimuat.
 */
.reveal-siap[data-reveal="mask"] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.1s var(--al-ease);
}

.reveal-siap[data-reveal="mask"].is-in {
    clip-path: inset(0 0 0 0);
}

/*
 * Judul yang muncul kata demi kata. Tiap kata dibungkus span oleh site.js dan
 * diberi tunda bertingkat, sehingga kalimatnya seolah dituliskan dari kiri ke
 * kanan alih-alih muncul sekaligus.
 *
 * inline-block wajib: kata harus bisa digeser transform, dan spasi di
 * antaranya tetap simpul teks asli supaya judul panjang tetap berganti baris
 * seperti biasa.
 */
/*
 * Kata naik sambil menajam dari buram. Buram tipis itu yang membuat judul
 * terasa mengendap ke tempatnya alih-alih meluncur - mata membaca perubahan
 * ketajaman sebagai jarak, bukan sebagai gerak.
 */
.anime-text .anime-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(8px);
    transition: opacity 0.7s var(--al-ease),
                transform 0.7s var(--al-ease),
                filter 0.7s var(--al-ease);
}

.anime-text.is-in .anime-word {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/*
 * Foto latar yang bergeser lambat. Transform-nya ditulis site.js; di sini
 * hanya dipastikan gambarnya punya ruang untuk digeser tanpa menyingkap tepi.
 */
[data-parallax] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .anime-text .anime-word {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-parallax] {
        transform: none !important;
        will-change: auto;
    }
}

/* ------------------------------------------------------------------ *
 * Kotak tayang foto
 * ------------------------------------------------------------------ */

.lightbox-stage {
    position: relative;
}

.lightbox-stage img {
    opacity: 0;
    transition: opacity var(--al-panel) var(--al-ease-sorot);
}

.lightbox-stage img.is-ready {
    opacity: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(var(--al-brand-900-rgb), 0.55);
    color: #fff;
    transition: background-color var(--al-pulang) var(--al-ease-sorot);
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    background-color: var(--al-brand-700);
}

/* display: grid di atas mengalahkan aturan bawaan [hidden], jadi ditegaskan. */
.lightbox-nav[hidden] {
    display: none;
}

.lightbox-nav.prev {
    inset-inline-start: 0.5rem;
}

.lightbox-nav.next {
    inset-inline-end: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal,
    .unit-photo img,
    .unit-photo::after,
    .unit-photo-caption,
    .unit-mission li,
    .unit-link,
    .person-card,
    .lightbox-stage img {
        transition: none;
    }

    .unit-hero img,
    .unit-hero-body {
        animation: none;
    }
}

/* ------------------------------------------------------------------ *
 * Kartu lembaga pada halaman daftar
 * ------------------------------------------------------------------ */

.unit-card-media {
    position: relative;
    overflow: hidden;
}

.unit-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--al-rayap) var(--al-ease-sorot);
}

.unit-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 50%, rgba(var(--al-shade-rgb), 0.62) 100%);
}

/*
 * Label unit berdiri di atas foto, dan fotonya bisa apa saja. Latarnya bening
 * yang diburamkan: cukup untuk memisahkan tulisannya dari gambar tanpa menutup
 * fotonya dengan bidang pekat.
 */
.unit-card-media .unit-badge {
    position: absolute;
    inset-inline-start: 1rem;
    bottom: 1rem;
    z-index: 1;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.unit-card:hover .unit-card-media img {
    transform: scale(1.05);
}

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

/* ------------------------------------------------------------------ *
 * Ubin foto berketerangan tersembunyi
 *
 * Satu foto tinggi dengan nama unit tercetak di dasarnya. Keterangannya
 * tersimpan di balik tepi bawah dan baru naik ketika ubinnya disentuh
 * penunjuk atau menerima fokus papan tik - jadi deretan ubin ini terbaca
 * sebagai galeri yang rapi lebih dulu, dan penjelasannya menyusul hanya
 * untuk ubin yang benar-benar ditanyakan.
 * ------------------------------------------------------------------ */

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--al-radius-lg);
    aspect-ratio: 3 / 4;
    background-color: var(--al-brand-800);
    color: #fff;
    isolation: isolate;
}

.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--al-rayap) var(--al-ease-sorot);
}

.tile:hover img,
.tile:focus-visible img {
    transform: scale(1.07);
}

/*
 * Tirai gelap yang memekat dari dasar ubin. Ia ikut menebal saat ubinnya
 * disentuh, karena keterangan yang muncul memerlukan bidang gelap yang lebih
 * tinggi daripada namanya saja.
 */
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 35%, rgba(var(--al-shade-rgb), 0.88) 100%);
    transition: background var(--al-panel) var(--al-ease-sorot);
}

.tile:hover::after,
.tile:focus-visible::after {
    background: linear-gradient(180deg, rgba(var(--al-shade-rgb), 0.1) 0%, rgba(var(--al-shade-rgb), 0.92) 100%);
}

.tile-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1.25rem;
}

.tile-title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

/*
 * Keterangan dan tautannya disembunyikan dengan grid-template-rows 0fr,
 * bukan display:none - hanya begitu tingginya bisa dianimasikan padahal
 * panjang teksnya berbeda-beda tiap ubin.
 */
.tile-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--al-panel) var(--al-ease-sorot),
                opacity var(--al-panel) var(--al-ease-sorot);
}

.tile:hover .tile-reveal,
.tile:focus-visible .tile-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tile-reveal > div {
    overflow: hidden;
}

.tile-text {
    margin: 0.6rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-more {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--al-gold-400);
}

.tile-more .btn-ico {
    margin-block: 0;
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.64rem;
}

.tile:hover .tile-more .btn-ico,
.tile:focus-visible .tile-more .btn-ico {
    transform: translateX(0.18rem);
}

/* ------------------------------------------------------------------ *
 * Ubin kabar terbaru
 *
 * Berita membawa satu hal yang tidak dimiliki unit kelembagaan: waktu.
 * Kategori dan tanggalnya disimpan di balik tepi bawah bersama cuplikannya,
 * tidak tercetak sejak awal, supaya keadaan diam ubin berita sama persis
 * dengan ubin kelembagaan - satu foto dengan satu judul.
 * ------------------------------------------------------------------ */

/*
 * Judul berita bisa jauh lebih panjang daripada nama lembaga, jadi ia
 * dipangkas tiga baris. Tanpa itu ubin berjudul panjang menumbuhkan bidang
 * tulisannya ke atas sampai fotonya nyaris tidak kelihatan lagi.
 */
.tile-news .tile-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
}

.tile-tag {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 600;
}

/*
 * Cuplikan berita dipangkas lebih pendek daripada keterangan lembaga karena
 * di atasnya sudah ada satu baris kategori dan tanggal.
 */
.tile-news .tile-text {
    -webkit-line-clamp: 3;
}

/*
 * Layar sentuh tidak mengenal hover: di sana keterangannya dibiarkan terbuka
 * sejak awal, supaya isinya tidak menjadi rahasia yang tak bisa dibuka.
 */
@media (hover: none) {
    .tile-reveal {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile img,
    .tile-reveal {
        transition: none;
    }

    .tile:hover img,
    .tile:focus-visible img {
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 * Tombol WhatsApp mengambang
 *
 * Bertengger di sudut bawah sisi akhir bacaan - kanan pada tampilan
 * Latin, kiri pada tampilan Arab - dan ikut tergulir bersama layar,
 * sehingga jalan pintas bertanya selalu ada tanpa perlu kembali ke
 * kaki halaman. Jaraknya dihitung dari safe-area agar tidak tertimbun
 * bilah gestur pada ponsel layar penuh.
 * ------------------------------------------------------------------ */

.wa-float {
    position: fixed;
    inset-inline-end: calc(1.25rem + env(safe-area-inset-right));
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    /*
     * Di atas isi halaman dan panel membulat, tetapi di bawah lapisan
     * modal dan menu gulung Bootstrap (1055 ke atas) - kalau tidak, ia
     * akan menempel di depan kotak dialog yang sedang terbuka.
     */
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: #25d366;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 0.75rem 1.5rem rgba(var(--al-shade-rgb), 0.28);
    text-decoration: none;
}

.wa-float:hover,
.wa-float:focus-visible {
    background-color: #1fb457;
    color: #ffffff;
}

.wa-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.45);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .wa-float {
        transition: transform var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot);
    }

    .wa-float:hover,
    .wa-float:focus-visible {
        transform: translateY(-2px);
    }
}

@media print {
    .wa-float {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * Tampilan kanan-ke-kiri
 * ------------------------------------------------------------------ */

/*
 * Sebagian besar pembalikan tata letak sudah ditangani berkas Bootstrap RTL
 * dan properti logis pada berkas ini. Yang tersisa di sini hanyalah tiga hal
 * yang tidak bisa dibalik sendiri: huruf, arah gradien, dan ikon berarah.
 */

[dir="rtl"] {
    --bs-body-font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] body {
    font-family: var(--bs-body-font-family);
    line-height: 1.9;
}

/*
 * Judul memakai Kufi, bukan Naskh. Huruf judul pada tampilan Latin bersifat
 * grotesk - tegak, berujung tegas, tanpa hiasan; di antara huruf Arab,
 * Kufi-lah yang paling dekat dengan watak itu.
 */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3,
[dir="rtl"] .h4, [dir="rtl"] .h5, [dir="rtl"] .h6,
[dir="rtl"] .brand-text strong,
[dir="rtl"] .ppdb-display,
[dir="rtl"] .ppdb-title {
    font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
    letter-spacing: 0;
}

/*
 * Tirai gelap pada sorotan dipekatkan di sisi tempat teksnya berada. Karena
 * teks itu berpindah ke kanan pada tampilan Arab, sudut gradiennya ikut
 * dicerminkan - kalau tidak, judulnya justru jatuh di bagian foto yang paling
 * terang.
 */
[dir="rtl"] .hero-scrim {
    background:
        linear-gradient(180deg, rgba(var(--al-shade-rgb), 0) 45%, rgba(var(--al-shade-rgb), 0.6) 100%),
        linear-gradient(260deg, rgba(var(--al-shade-rgb), 0.94) 0%, rgba(var(--al-shade-rgb), 0.8) 38%, rgba(var(--al-shade-rgb), 0.4) 68%, rgba(var(--al-shade-rgb), 0.3) 100%);
}

[dir="rtl"] .hero-empty {
    background:
        linear-gradient(240deg, rgba(var(--al-brand-900-rgb), 0.96), rgba(var(--al-brand-700-rgb), 0.85)),
        radial-gradient(circle at 18% 18%, rgba(var(--al-gold-500-rgb), 0.32), transparent 55%);
}

[dir="rtl"] .admission-scrim {
    background: linear-gradient(260deg, rgba(var(--al-shade-rgb), 0.95) 0%, rgba(var(--al-shade-rgb), 0.85) 45%, rgba(var(--al-shade-rgb), 0.55) 100%);
}

/*
 * Ikon panah dan tanda kurung sudut menunjuk arah "maju". Arah itu berbalik
 * pada teks kanan-ke-kiri, sedangkan nama ikonnya tetap tertulis -left dan
 * -right di dalam markup; mencerminkannya di sini jauh lebih ringkas daripada
 * mengganti nama ikon di puluhan berkas tampilan.
 */
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-chevron-right::before,
[dir="rtl"] .bi-chevron-left::before {
    display: inline-block;
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------ *
 * Kotak cari yang terlipat
 * ------------------------------------------------------------------ */

/*
 * Tombolnya berdiri di bilah pada setiap lebar layar - di ponsel pun kotak
 * carinya tidak ikut masuk ke dalam kartu menu, karena satu isian berbingkai
 * di tengah daftar tautan memutus iramanya dan mendorong tautan ke bawah.
 * Ukurannya sedikit lebih besar di layar sentuh, sejajar tombol menu di
 * sebelahnya.
 */
.site-search-toggle {
    /* Lingkaran fokus bawaan Bootstrap berwarna biru - satu-satunya biru yang tersisa di bilah ini. */
    --bs-btn-focus-shadow-rgb: 233, 184, 28;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    color: #fff;
    transition: color var(--al-pulang) var(--al-ease-sorot), background-color var(--al-pulang) var(--al-ease-sorot), border-color var(--al-pulang) var(--al-ease-sorot);
}

.site-search-toggle:hover,
.site-search-toggle:focus-visible,
.site-search.show .site-search-toggle {
    background-color: var(--al-gold-400);
    border-color: var(--al-gold-400);
    color: var(--al-brand-900);
}

/* Di bilah lebar ukurannya disejajarkan dengan tombol bahasa di sebelahnya, bukan dengan ibu jari. */
@media (min-width: 992px) {
    .site-search-toggle {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/*
 * Panelnya sekartu dengan menu turun lain, dan isian di dalamnya kembali
 * berlatar terang - warna putih tembus pandang yang dipakai di bilah
 * hanya terbaca di atas pita hijau, bukan di atas kartu ini.
 */
.site-search-panel {
    min-width: 16rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--al-surface);
    box-shadow: var(--al-lift-3);
}

.site-search-panel.show {
    animation: menu-turun var(--al-sorot) var(--al-ease) both;
}

.site-header .site-search-panel .form-control {
    background-color: #fff;
    border-color: var(--al-line);
    color: var(--al-ink);
}

.site-header .site-search-panel .form-control::placeholder {
    color: var(--al-muted);
}

.site-header .site-search-panel .form-control:focus {
    background-color: #fff;
    border-color: var(--al-brand-700);
    color: var(--al-ink);
    box-shadow: 0 0 0 0.2rem rgba(var(--al-brand-700-rgb), 0.18);
}

.site-header .site-search-panel .btn-primary {
    --bs-btn-bg: var(--al-brand-700);
    --bs-btn-border-color: var(--al-brand-700);
    --bs-btn-hover-bg: var(--al-brand-800);
    --bs-btn-hover-border-color: var(--al-brand-800);
    --bs-btn-hover-color: #fff;
}

/* ==========================================================================
   Pita mosaik suasana
   --------------------------------------------------------------------------
   Selebar layar dan hampir seluruhnya gambar. Tingginya diikat ke lebar
   layar (vw) dan bukan ke piksel tetap, supaya perbandingan sisinya tetap
   sama pada monitor lebar maupun laptop kecil - kisi berukuran piksel akan
   berubah menjadi pita terlalu tinggi begitu layarnya menyempit.

   Tidak ada perilaku sorot di sini. Sebagian peramban melaporkan dirinya
   tidak mendukung hover meski dipakai dengan tetikus, sehingga efek yang
   hanya hidup saat disorot akan hilang tanpa jejak bagi sebagian pengunjung;
   yang tersisa cukup gambar yang berdiri sendiri.
   ========================================================================== */

.suasana {
    margin-block: clamp(2.5rem, 6vw, 5rem);
}

.suasana-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 42vw;
}

.suasana-sel {
    margin: 0;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--bs-secondary-bg, #e9ecef);
}

/*
 * Gambarnya dibuat lebih tinggi daripada petaknya lalu digeser naik separuh
 * kelebihannya. Ruang itu yang dipakai geseran parallax; tanpa itu, ubin
 * paling atas dan paling bawah menyingkap tepi kosong saat digulir.
 */
/* Tautan pembungkusnya hanya wadah; yang mengisi petak tetap gambarnya. */
.suasana-sel > a {
    display: block;
    width: 100%;
    height: 100%;
}

.suasana-sel img {
    position: relative;
    top: -6%;
    width: 100%;
    height: 112%;
    object-fit: cover;
    display: block;
}

/*
 * Blok kata ikut menjadi salah satu ubin kisi, bukan berdiri di atasnya.
 * Dengan begitu ia menempati satu petak yang memang kosong alih-alih
 * memaksa seluruh pita turun satu baris demi tiga kata.
 */
.suasana-kata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--al-brand-50);
}

.suasana-judul {
    font-family: var(--al-font-display, inherit);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.15;
    margin: 0.25rem 0 0;
}

/*
 * Di layar sempit foto pembuka dan blok kata masing-masing mengambil satu
 * baris penuh, lalu empat foto berikutnya berpasangan - tepat dua baris,
 * tanpa petak sisa. Foto keenam disembunyikan di sini justru untuk itu;
 * ia tetap terbaca di galeri, dan pita yang berlubang di sudut terbaca
 * seperti gambar yang gagal dimuat.
 */
.suasana-sel-1,
.suasana-kata {
    grid-column: span 2;
}

.suasana-sel-6 {
    display: none;
}

@media (min-width: 992px) {
    .suasana-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 15vw;
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .suasana-sel-1 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .suasana-sel-6 {
        display: block;
        grid-column: span 2;
    }

    .suasana-kata {
        padding: 1.75rem;
    }
}

@media (min-width: 1400px) {
    .suasana-grid {
        grid-auto-rows: 13.5vw;
    }
}

/* ==========================================================================
   Sentuhan akhir gerak
   --------------------------------------------------------------------------
   Tiga hal kecil yang tidak menambah unsur baru di layar, tetapi mengubah
   rasanya: judul sorotan yang menajam dari buram, bilah tipis penanda sudah
   sejauh mana halaman dibaca, dan tanggapan saat sesuatu ditekan.

   Tidak ada satu pun yang bergantung pada sorotan tetikus. Sebagian peramban
   melaporkan dirinya tidak mendukung hover meski dipakai dengan tetikus,
   sehingga efek yang hanya hidup saat disorot hilang tanpa jejak bagi
   sebagian pengunjung; yang dipakai di sini keadaan :active dan :focus-visible,
   yang berlaku pada tetikus, sentuhan, maupun papan tik.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    /* Judul sorotan ikut menajam, senada dengan judul bagian di bawahnya. */
    .hero-body h1 {
        animation-name: sorotan-naik-tajam;
    }
}

@keyframes sorotan-naik-tajam {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/*
 * Bilah kemajuan baca. Setinggi dua piksel di tepi paling atas, memakai warna
 * emas yang sudah dipakai tombol utama - bukan warna baru. Lebarnya ditulis
 * site.js lewat --al-maju.
 */
.baca-maju {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 1040;
    pointer-events: none;
    background: linear-gradient(90deg, var(--al-gold-500), var(--al-brand-600));
    transform: scaleX(var(--al-maju, 0));
    transform-origin: 0 50%;
    transition: transform 0.12s linear, opacity 0.3s var(--al-ease);
}

/* Di puncak halaman bilahnya tidak perlu ada sama sekali. */
.baca-maju[data-kosong="1"] {
    opacity: 0;
}

/*
 * Tanggapan tekan. Turun sedikit lalu kembali - cukup untuk memberi tahu
 * bahwa ketukan diterima, dan cukup pendek untuk tidak menunda apa pun.
 */
.btn,
.post-tile,
.unit-tile,
.suasana-sel,
.card {
    transition: transform var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

.btn:active,
a:active .post-tile,
a:active .unit-tile {
    transform: scale(0.972);
    transition-duration: 0.09s;
}

/*
 * Berangkat lebih cepat daripada pulang.
 *
 * Panjang yang tertulis di tiap aturan di atas adalah panjang kepulangan.
 * Yang di sini memotongnya saat sesuatu sedang disorot atau difokus, jadi
 * gerak berangkatnya kira-kira dua pertiga waktu gerak pulangnya.
 *
 * Alasannya bukan selera. Tangan yang mendekat sedang menunggu jawaban, dan
 * jawaban yang datang terlambat terbaca sebagai berat. Tangan yang sudah
 * menjauh tidak menunggu apa-apa, jadi kepulangan yang lebih santai tidak
 * menahan siapa pun - justru kebalikannya yang mengganggu: kembali secepat
 * berangkat membuat sorot terasa dipotong, seolah unsurnya kabur dari
 * tetikus.
 *
 * Satu aturan untuk semuanya, bukan satu baris tambahan di tiap blok sorot:
 * selisih berangkat dan pulang adalah satu keputusan, dan keputusan yang
 * tersebar di tiga puluh tempat akan berhenti sama di antara keduanya.
 *
 * Foto yang merayap di balik bingkainya sengaja tidak ada di daftar ini.
 * Rayapannya justru yang ingin dilihat, dan mempercepat berangkatnya
 * menghapus satu-satunya hal yang membuatnya terasa dalam.
 */
.btn:hover,
.btn:focus-visible,
.btn:hover .btn-ico,
.link-more:hover .btn-ico,
.site-nav .nav-link:hover,
.lang-toggle:hover,
.lang-toggle:focus-visible,
.hero-nav:hover,
.hero-nav:focus-visible,
.card:hover,
.card-soft:hover,
.stat-card:hover,
.person-card:hover,
.gallery-grid a:hover img,
.site-footer a:hover,
.footer-links a:hover::before,
.social-link:hover,
.unit-jump a:hover,
.unit-jump a:focus-visible,
.unit-mission li:hover,
.unit-link:hover,
.unit-link:focus-visible,
.unit-photo:hover::after,
.unit-photo:focus-visible::after,
.unit-photo:hover .unit-photo-caption,
.unit-photo:focus-visible .unit-photo-caption,
.lightbox-nav:hover,
.lightbox-nav:focus-visible,
.tile:hover::after,
.tile:focus-visible::after,
.tile:hover .tile-reveal,
.tile:focus-visible .tile-reveal,
.tile:hover .tile-more .btn-ico,
.tile:focus-visible .tile-more .btn-ico,
.wa-float:hover,
.wa-float:focus-visible,
.site-search-toggle:hover,
.site-search-toggle:focus-visible,
.psb-status.is-open:hover,
.psb-status.is-open:hover .btn-gold,
.psb-status.is-open:hover .psb-status-link i {
    transition-duration: var(--al-sorot);
}

/*
 * Jejak papan tik dibuat jelas dan sewarna situs. Cincin bawaan Bootstrap
 * berwarna biru - satu-satunya biru yang tersisa di halaman ini.
 */
:where(a, button, .btn, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--al-brand-600, #128063);
    outline-offset: 3px;
    border-radius: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .baca-maju {
        display: none;
    }

    .btn:active,
    a:active .post-tile,
    a:active .unit-tile {
        transform: none;
    }
}

/* ==========================================================================
   Wajah tiap situs
   --------------------------------------------------------------------------
   Pesantren, MTs, dan MA memakai satu tata letak dan satu perilaku; yang
   membedakan hanya nilai - warna lembaga, tinggi sorotan, dan susunan kisi
   mosaiknya. Kelasnya dipasang pada <body> dari kode situs.

   Warnanya bukan pilihan bebas. Hijau tetap milik pesantren sebagai induk.
   MTs mendapat biru laut yang lebih terang dan muda, senada seragam putih
   birunya; MA mendapat biru tinta yang lebih dalam dan tenang, sesuai jenjang
   yang menyiapkan santri meninggalkan pesantren. Ketiganya sekeluarga karena
   sama-sama dingin dan berpasangan dengan emas yang sama.
   ========================================================================== */

body.situs-mts {
    --al-brand-900: #062e3a;
    --al-brand-800: #0a4557;
    --al-brand-700: #0e6b84;
    --al-brand-600: #128aa6;
    --al-brand-100: #e4f3f7;

    --al-brand-900-rgb: 6, 46, 58;
    --al-brand-700-rgb: 14, 107, 132;
    --al-brand-600-rgb: 18, 138, 166;

    --bs-link-color-rgb: 14, 107, 132;
    --bs-link-hover-color-rgb: 6, 46, 58;
    --bs-primary-rgb: 14, 107, 132;

    --al-pattern-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%230e6b84' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='120' cy='0' r='60'/%3E%3Ccircle cx='0' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");
}

body.situs-ma {
    --al-brand-900: #12203f;
    --al-brand-800: #1b2f59;
    --al-brand-700: #274180;
    --al-brand-600: #32519c;
    --al-brand-100: #e8ecf7;

    --al-brand-900-rgb: 18, 32, 63;
    --al-brand-700-rgb: 39, 65, 128;
    --al-brand-600-rgb: 50, 81, 156;

    --bs-link-color-rgb: 39, 65, 128;
    --bs-link-hover-color-rgb: 18, 32, 63;
    --bs-primary-rgb: 39, 65, 128;

    --al-pattern-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23274180' stroke-opacity='0.55' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='120' cy='0' r='60'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='0' cy='120' r='60'/%3E%3Ccircle cx='60' cy='60' r='60'/%3E%3C/g%3E%3C/svg%3E");
}

/*
 * Susunan kisi mosaik dibedakan pula, supaya ketiga beranda tidak terbaca
 * sebagai halaman yang sama dengan warna berbeda.
 *
 * Pesantren memakai susunan bawaan: satu foto besar di kiri. MTs membalik
 * beratnya ke kanan - lembaga yang paling muda dibuka dengan deretan wajah
 * lebih dulu. MA memakai satu pita mendatar panjang di bawah, bentuk yang
 * lebih tenang dan lebih dewasa.
 */
@media (min-width: 992px) {
    body.situs-mts .suasana-sel-1 {
        grid-column: 3 / span 2;
        grid-row: span 2;
    }

    body.situs-mts .suasana-kata {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    body.situs-ma .suasana-sel-1 {
        grid-column: span 2;
        grid-row: span 2;
    }

    body.situs-ma .suasana-sel-6 {
        grid-column: span 4;
    }

    body.situs-ma .suasana-grid {
        grid-auto-rows: 13vw;
    }
}

/*
 * Tinggi sorotan. Pesantren berdiri paling lapang sebagai muka utama;
 * madrasah sedikit lebih pendek supaya isinya lebih cepat terlihat - yang
 * datang ke situs madrasah umumnya sudah tahu ia mencari apa.
 */
body.situs-mts,
body.situs-ma {
    --al-hero-min: clamp(23rem, 64vh, 35rem);
}

/* ==========================================================================
   Pita foto berjalan
   --------------------------------------------------------------------------
   Selebar layar dan bergerak terus. Jalurnya berisi dua salinan daftar yang
   sama dan bergeser tepat setengah lebarnya, sehingga saat animasi mengulang
   gambar yang tampil persis sama dengan sesaat sebelumnya - sambungannya
   tidak pernah terlihat.

   Lamanya panjang dengan sengaja: pita yang cepat menarik mata dari isi
   halaman, sedangkan yang lambat terbaca sebagai latar yang hidup.
   ========================================================================== */

.pita-foto {
    overflow: hidden;
    margin-block: clamp(2rem, 5vw, 4rem);
    /* Tepinya melembut agar foto tidak terpotong mendadak oleh tepi layar. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.pita-foto-jalur {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    animation: pita-geser 64s linear infinite;
}

.pita-foto-sel {
    margin: 0;
    flex: 0 0 auto;
    width: clamp(13rem, 22vw, 20rem);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--bs-secondary-bg, #e9ecef);
}

.pita-foto-sel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dihentikan saat penunjuk ditahan di atasnya; kelasnya dipasang site.js. */
.pita-foto.pita-diam .pita-foto-jalur {
    animation-play-state: paused;
}

@keyframes pita-geser {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pita-foto-jalur {
        animation: none;
    }

    /*
     * Tanpa gerak, jalur sepanjang dua salinan hanya menyisakan gambar di
     * luar layar. Ia digulir tangan saja, dan salinan keduanya dibuang.
     */
    .pita-foto {
        overflow-x: auto;
    }

    .pita-foto-sel[aria-hidden="true"] {
        display: none;
    }
}

/* ==========================================================================
   Kartu keadaan pendaftaran
   --------------------------------------------------------------------------
   Kartu ini menjawab pertanyaan yang paling sering membawa orang ke situs
   pesantren: pendaftaran sedang dibuka atau tidak.

   Jawabannya dibawa empat hal sekaligus, dan tidak satu pun bergerak: garis
   emas di tepi awal, bidang krem di belakangnya, warna emas pada labelnya,
   dan tulisan "Pendaftaran dibuka" itu sendiri. Titik keadaannya mewarisi
   warna label, jadi ia ikut berganti tanpa diberi aturan sendiri.

   Sebelumnya titik itu berdenyut dan seberkas cahaya menyapu tombolnya tiap
   tujuh detik. Keduanya dicabut. Gerak yang berulang tanpa ujung menagih
   perhatian pada keterangan yang sudah terbaca dari warnanya, dan pada
   halaman yang dibuka sambil menunggu - di ponsel, pada sambungan yang tidak
   cepat - yang menagih terus-menerus lebih cepat terasa sebagai gangguan
   daripada sebagai kabar.
   ========================================================================== */

/* Panah ikut maju saat tautannya ditekan atau disorot papan tik. */
.psb-status-link i {
    display: inline-block;
    transition: transform var(--al-pulang) var(--al-ease-sorot);
}

.psb-status-link:active i,
.psb-status-link:focus-visible i {
    transform: translateX(0.25rem);
}

[dir="rtl"] .psb-status-link:active i,
[dir="rtl"] .psb-status-link:focus-visible i {
    transform: translateX(-0.25rem);
}

/* --------------------------------------------------------------------
   Kartu pendaftaran: tanggapan saat disorot
   --------------------------------------------------------------------
   Memakai :hover biasa, tanpa dibungkus @media (hover: hover). Sebagian
   peramban melaporkan dirinya tidak mendukung hover meski dipakai dengan
   tetikus, sehingga pembungkus itu justru mematikan efeknya bagi sebagian
   pengunjung - sementara pemilih :hover sendiri tetap bekerja di sana.

   Yang tersisa di sini gerak yang punya sebabnya: kartunya naik sedikit,
   tombolnya membesar sedikit, panahnya maju sedikit. Ketiganya berhenti
   begitu penunjuk pergi.
   -------------------------------------------------------------------- */

.psb-status {
    transition: transform var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

.psb-status.is-open:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.5rem -1rem rgba(var(--al-gold-700-rgb), 0.35);
}

.psb-status .btn-gold {
    transition: transform var(--al-pulang) var(--al-ease-sorot), box-shadow var(--al-pulang) var(--al-ease-sorot);
}

.psb-status.is-open:hover .btn-gold {
    transform: scale(1.04);
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(var(--al-gold-700-rgb), 0.55);
}

/* Panah ikut maju saat kartunya disorot, bukan hanya saat tautannya. */
.psb-status.is-open:hover .psb-status-link i {
    transform: translateX(0.25rem);
}

[dir="rtl"] .psb-status.is-open:hover .psb-status-link i {
    transform: translateX(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
    .psb-status,
    .psb-status .btn-gold {
        transition: none;
    }

    .psb-status.is-open:hover,
    .psb-status.is-open:hover .btn-gold {
        transform: none;
    }
}