/*
 * 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;
    --al-gold-700: #96690a;
    --al-gold-600: #b8860b;
    --al-gold-500: #d4a017;
    --al-gold-400: #e9b81c;
    --al-gold-100: #fdf6e3;
    --al-ink: #14211f;
    --al-muted: #5f6f6b;
    --al-line: #e3eae8;
    --al-surface: #ffffff;
    --al-canvas: #f6f8f7;

    /*
     * 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;

    /*
     * Lengkung gerak. Yang utama melaju cepat lalu berhenti panjang tanpa
     * memantul - itulah yang membuat perpindahan terasa berbobot alih-alih
     * meluncur. Dipakai seluruh transisi dan animasi masuk.
     */
    --al-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --al-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    --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 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.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 0.18s ease;
}

.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-600);
}

.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: #041f19;
    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 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Bayangan tipis baru tumbuh setelah ada isi halaman yang lewat di baliknya. */
.site-header.is-scrolled {
    box-shadow: 0 6px 22px rgba(4, 21, 15, 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(4, 21, 15, 0.5), rgba(4, 21, 15, 0));
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.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 0.25s ease;
}

.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 0.25s ease, background-color 0.25s ease;
}

.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(6, 52, 43, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(6, 52, 43, 0.12);
    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 0.2s ease;
}

.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: 0 18px 38px rgba(4, 21, 15, 0.28);
    }

    .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(6, 52, 43, 0.12);
        color: var(--al-brand-900);
    }

    .site-nav .dropdown-divider {
        margin-block: 0.3rem;
        border-top-color: rgba(6, 52, 43, 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 0.22s 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 0.18s ease, transform 0.18s 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: 0 1px 3px rgba(4, 21, 15, 0.14), 0 18px 40px rgba(4, 21, 15, 0.26);
        /*
         * 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: #04150f;
    }

    .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 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.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(6, 52, 43, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(6, 52, 43, 0.12);
    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.
 */
@media (prefers-reduced-motion: no-preference) {
    .hero .carousel-item.active img.hero-bg {
        animation: sorotan-merayap 18s ease-out 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.
 */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 30, 24, 0) 45%, rgba(4, 30, 24, 0.6) 100%),
        linear-gradient(100deg, rgba(4, 30, 24, 0.94) 0%, rgba(4, 30, 24, 0.8) 38%, rgba(4, 30, 24, 0.4) 68%, rgba(4, 30, 24, 0.3) 100%);
}

.hero-empty {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(6, 52, 43, 0.96), rgba(15, 107, 87, 0.85)),
        radial-gradient(circle at 82% 18%, rgba(212, 160, 23, 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: 0.14em;
    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: 38px;
    height: 38px;
    flex: 0 0 38px;
    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 0.18s ease, border-color 0.18s ease;
}

.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 36px - 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: 16px 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 0.18s ease, width 0.18s ease;
}

.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: 0.18em;
    text-transform: uppercase;
    color: var(--al-gold-600);
}

.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 0.24s var(--al-ease),
                box-shadow 0.24s ease, border-color 0.24s ease;
}

.card-soft:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 22px 44px rgba(6, 52, 43, 0.14);
}

/*
 * 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 0.45s var(--al-ease);
}

.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 0.24s var(--al-ease), box-shadow 0.24s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 38px rgba(6, 52, 43, 0.25);
}

@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.
 */
.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(212, 160, 23, 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: #23302d;
}

.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: #23302d;
}

/* ------------------------------------------------------------------ *
 * 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 0.2s ease;
}

.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 0.18s ease;
}

.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 0.18s ease;
}

.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 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.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 0.18s ease;
}

.table-clean tbody tr:hover td {
    background-color: rgba(20, 132, 107, 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(212, 160, 23, 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-600);
}

.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(4, 30, 24, 0.95) 0%, rgba(4, 30, 24, 0.85) 45%, rgba(4, 30, 24, 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(4, 21, 15, 0) 38%, rgba(4, 21, 15, 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.
 */
.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: 0 6px 18px rgba(6, 52, 43, 0.05);
    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 0.18s ease, color 0.18s ease;
}

.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: #fbfdfc;
    font-size: 0.94rem;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.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 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.person-card:hover {
    transform: translateY(-2px);
    border-color: var(--al-brand-600);
    box-shadow: 0 10px 22px rgba(6, 52, 43, 0.08);
}

/* ------------------------------------------------------------------ *
 * 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 0.5s ease;
}

.unit-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 21, 15, 0) 45%, rgba(4, 21, 15, 0.72) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.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 0.25s ease, transform 0.25s ease;
}

.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 0.18s ease, background-color 0.18s ease;
}

.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 0.45s 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 0.3s ease;
}

.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(6, 52, 43, 0.55);
    color: #fff;
    transition: background-color 0.18s ease;
}

.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 0.5s ease;
}

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

.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 0.55s var(--al-ease);
}

.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(4, 21, 15, 0) 35%, rgba(4, 21, 15, 0.88) 100%);
    transition: background 0.35s ease;
}

.tile:hover::after,
.tile:focus-visible::after {
    background: linear-gradient(180deg, rgba(4, 21, 15, 0.1) 0%, rgba(4, 21, 15, 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 0.35s var(--al-ease),
                opacity 0.3s ease;
}

.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(4, 30, 24, 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 0.2s ease, background-color 0.2s ease;
    }

    .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(4, 30, 24, 0) 45%, rgba(4, 30, 24, 0.6) 100%),
        linear-gradient(260deg, rgba(4, 30, 24, 0.94) 0%, rgba(4, 30, 24, 0.8) 38%, rgba(4, 30, 24, 0.4) 68%, rgba(4, 30, 24, 0.3) 100%);
}

[dir="rtl"] .hero-empty {
    background:
        linear-gradient(240deg, rgba(6, 52, 43, 0.96), rgba(15, 107, 87, 0.85)),
        radial-gradient(circle at 18% 18%, rgba(212, 160, 23, 0.32), transparent 55%);
}

[dir="rtl"] .admission-scrim {
    background: linear-gradient(260deg, rgba(4, 30, 24, 0.95) 0%, rgba(4, 30, 24, 0.85) 45%, rgba(4, 30, 24, 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 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.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: 0 18px 38px rgba(4, 21, 15, 0.28);
}

.site-search-panel.show {
    animation: menu-turun 0.22s 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(15, 107, 87, 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, #f2f7f3);
}

.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, #c9a227), var(--al-brand-600, #128063));
    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 0.35s var(--al-ease), box-shadow 0.35s var(--al-ease);
}

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

/*
 * 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;

    --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;

    --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. Karena itu geraknya
   diikatkan pada jawabannya - hanya kartu yang terbuka yang hidup, dan yang
   tertutup berdiri diam. Diamnya bukan kekurangan, melainkan bagian dari
   keterangan: mata menangkap ada tidaknya denyut jauh sebelum membaca
   tulisannya.

   Dua gerak, keduanya lambat. Titik statusnya berdenyut seperti lampu siaga,
   dan seberkas cahaya menyapu kartu sekali setiap tujuh detik lalu beristirahat
   panjang. Yang menyapu terus-menerus berhenti menarik perhatian dalam sepuluh
   detik dan berubah menjadi gangguan.
   ========================================================================== */

.psb-status {
    position: relative;
}

/* Wadah bagi kilau yang menyapu; tanpa ini kilaunya keluar dari tombol. */
.psb-status .btn-gold {
    position: relative;
    overflow: hidden;
}

/* Isinya diangkat di atas berkas cahaya. */
.psb-status > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
    /*
     * Lampu siaga. Cincinnya tumbuh keluar lalu memudar - bukan titiknya yang
     * membesar, supaya tata letak baris tidak ikut bergeser sedikit pun.
     */
    .psb-status.is-open .psb-status-dot {
        animation: psb-denyut 2.4s var(--al-ease-soft) infinite;
    }

    /*
     * Kilau menyapu tombolnya, bukan kartunya.
     *
     * Semula ia melintasi seluruh kartu dan ternyata tidak terlihat sama
     * sekali: kartunya krem dan kilaunya putih, selisihnya hanya dua tiga
     * tingkat warna. Di atas emas tombol, putih baru punya kontras - dan di
     * situ pula mata memang perlu diarahkan, karena tombol itulah tindakan
     * yang diminta halaman ini.
     */
    .psb-status.is-open .btn-gold::after {
        content: "";
        position: absolute;
        inset-block: -60%;
        inset-inline-start: -30%;
        width: 28%;
        pointer-events: none;
        transform: rotate(16deg) translate3d(0, 0, 0);
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0)
        );
        animation: psb-sapu 7s var(--al-ease-soft) infinite;
    }
}

@keyframes psb-denyut {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55);
    }

    70% {
        box-shadow: 0 0 0 0.55rem rgba(212, 160, 23, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212, 160, 23, 0);
    }
}

/*
 * Sapuannya selesai pada sepertiga awal putaran; sisanya jeda. Itu yang
 * membuatnya terbaca sebagai kilau sesekali, bukan sebagai pita berjalan.
 */
@keyframes psb-sapu {
    0% {
        transform: rotate(14deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    30% {
        transform: rotate(14deg) translate3d(340%, 0, 0);
        opacity: 0;
    }

    100% {
        transform: rotate(14deg) translate3d(340%, 0, 0);
        opacity: 0;
    }
}

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

.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.

   Kilaunya tidak menunggu giliran tujuh detiknya: begitu penunjuk masuk,
   animasi dengan nama dan lama berbeda dipasang, dan mengganti animasi
   berarti memulainya dari awal. Jadi sapuannya datang saat itu juga.
   -------------------------------------------------------------------- */

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

.psb-status.is-open:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 2.5rem -1rem rgba(150, 105, 10, 0.35);
}

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

.psb-status.is-open:hover .btn-gold {
    transform: scale(1.04);
    box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(150, 105, 10, 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: no-preference) {
    /*
     * Sapuan seketika begitu disorot. Namanya sengaja berbeda dari yang
     * berjalan sendiri - peramban memulai ulang animasi hanya bila namanya
     * berganti, bukan bila lamanya saja yang berubah.
     */
    .psb-status.is-open:hover .btn-gold::after {
        animation: psb-sapu-cepat 0.9s var(--al-ease-soft);
    }
}

@keyframes psb-sapu-cepat {
    0% {
        transform: rotate(16deg) translate3d(0, 0, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: rotate(16deg) translate3d(340%, 0, 0);
        opacity: 0;
    }
}

@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;
    }
}