/*
 * Halaman penerimaan santri baru.
 *
 * Tata letaknya bertutur dari atas ke bawah: satu gagasan per layar, judul
 * berukuran besar dengan spasi huruf rapat, dan ubin lebar tanpa garis tepi
 * yang bergantian antara terang dan gelap. Warnanya tetap memakai palet situs
 * pada site.css, hanya ditambah dua nada ujung untuk kontras penuh.
 */

:root {
    /* Diukur ulang oleh ppdb.js mengikuti tinggi kepala situs yang menempel. */
    --ppdb-header: 72px;
    /* Nada paling gelap dan paling terang, dipakai bergantian antar seksi. */
    --ppdb-ink: #04150f;
    /*
     * Ubin terang memakai nada hijau muda yang sama dengan bagian bertirai di
     * beranda. Sebelumnya abu-abu netral, dan halaman ini jadi satu-satunya
     * tempat di situs yang warnanya tidak berasal dari palet pesantren.
     */
    --ppdb-mist: var(--al-brand-100);
    --ppdb-tile-radius: var(--al-radius-lg, 1.5rem);
}

/* ------------------------------------------------------------------ *
 * Tipografi bersama
 * ------------------------------------------------------------------ */

.ppdb-display {
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2.6rem, 8.5vw, 6.25rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    /* Panjang tiap baris disamakan agar judul tidak menyisakan satu kata sendirian. */
    text-wrap: balance;
    margin: 0;
}

/*
 * Judul bagian memakai ukuran yang sama dengan .section-title di halaman lain.
 * Sebelumnya halaman ini punya tangganya sendiri dan naik sampai 3.25rem -
 * ukuran yang pada ubin selebar separuh layar membuat judul dua kata pun
 * pecah menjadi dua baris dan hampir menyentuh tepi ubinnya.
 */
.ppdb-title {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
}

.ppdb-sub {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: 34rem;
    margin: 1.1rem auto 0;
}

/*
 * Label kecil di atas judul. Bentuknya disamakan dengan .section-eyebrow milik
 * halaman lain - kapital, berspasi lebar, dan lebih kecil - supaya halaman ini
 * tidak terbaca sebagai situs yang berbeda.
 */
.ppdb-chip {
    display: inline-block;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /*
     * Nada emas yang sama dengan .section-eyebrow di halaman lain. Emas yang
     * lebih terang kurang terbaca di atas ubin hijau muda; varian gelapnya
     * dipakai di sana, dan varian terangnya hanya di atas bidang gelap.
     */
    color: var(--al-gold-600);
    margin-bottom: 0.8rem;
}

/* Pada ubin berlatar gelap dan foto, emasnya dicerahkan agar tetap terbaca. */
.ppdb-tile-dark .ppdb-chip,
.ppdb-tile-photo .ppdb-chip,
.ppdb-band .ppdb-chip,
.ppdb-hero .ppdb-chip {
    color: var(--al-gold-400);
}

/*
 * Tautan teks bergaya "pelajari lebih lanjut". Ukuran dan bobotnya disamakan
 * dengan .link-more di halaman lain supaya tautan yang sama perannya terlihat
 * sama di seluruh situs.
 */
.ppdb-more {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--al-brand-700);
}

.ppdb-more::after {
    content: "\203A";
    font-size: 1.15em;
    line-height: 1;
}

.ppdb-more:hover {
    text-decoration: underline;
}

/*
 * Tautan di atas bidang gelap. Warnanya dulu hijau mint #6fd3b4 - satu-satunya
 * nada di halaman ini yang tidak berasal dari palet pesantren; kini memakai
 * emas yang sama dengan aksen tindakan di seluruh situs.
 */
.ppdb-more-light {
    color: var(--al-gold-400);
}

.ppdb-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 1.5rem;
}

.ppdb-btn {
    border-radius: 0.7rem;
    padding: 0.75rem 1.7rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Sorotan
 * ------------------------------------------------------------------ */

/*
 * Sorotan memenuhi satu layar penuh: foto selebar dan setinggi layar, dengan
 * judul diletakkan di atasnya - bukan foto sebagai pita terpisah di bawah
 * teks. Tingginya dikurangi kepala situs yang menempel supaya lajur angka di
 * bawahnya tetap terlihat sedikit dan mengundang untuk digulir.
 */
.ppdb-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: min(88vh, 46rem);
    padding-block: clamp(3rem, 7vh, 5.5rem) clamp(2.5rem, 6vh, 4.5rem);
    color: #fff;
    background-color: var(--ppdb-ink);
    text-align: center;
    overflow: hidden;
}

/*
 * Ketika kepala situs menumpang di atas sorotan, foto ditarik naik ke belakang
 * bilah navigasi dan jarak dalamnya ditambah setinggi bilah itu supaya lencana
 * dan judul tetap berada di bawahnya.
 */
.header-overlay main > .ppdb-hero:first-child {
    margin-top: calc(-1 * var(--site-header-h, 74px));
    padding-top: calc(var(--site-header-h, 74px) + clamp(3rem, 7vh, 5.5rem));
}

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

/*
 * Tirai gelap dipekatkan di sepertiga atas - tempat judul berada - lalu
 * dibiarkan tipis di tengah supaya bangunan dan langit tetap terbaca, dan
 * kembali pekat di dasar agar menyambung ke lajur angka.
 */
.ppdb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(4, 21, 15, 0.92) 0%,
        rgba(4, 21, 15, 0.78) 26%,
        rgba(4, 21, 15, 0.34) 52%,
        rgba(4, 21, 15, 0.2) 72%,
        rgba(4, 21, 15, 0.78) 94%,
        var(--ppdb-ink) 100%
    );
}

.ppdb-hero > .container {
    position: relative;
    z-index: 1;
}

/*
 * Judul sorotan memakai kalimat penuh, bukan frasa dua-tiga kata, sehingga
 * ukurannya lebih kecil dan lebarnya lebih longgar daripada .ppdb-display
 * bawaan - kalau tidak, judulnya pecah menjadi empat baris dan mendesak
 * tombol ke tepi layar.
 */
.ppdb-hero .ppdb-display {
    color: #fff;
    font-size: clamp(2rem, 5.2vw, 3.9rem);
    max-width: 22ch;
    margin-inline: auto;
    text-shadow: 0 2px 24px rgba(4, 21, 15, 0.45);
}

.ppdb-hero .ppdb-sub {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 16px rgba(4, 21, 15, 0.5);
}

/* Tautan teks di sorotan bisa mendarat di bagian foto yang terang. */
.ppdb-hero .ppdb-chip,
.ppdb-hero .ppdb-more {
    text-shadow: 0 1px 14px rgba(4, 21, 15, 0.7);
}

/*
 * Petunjuk gulir di dasar sorotan. Bentuknya tombol, bukan tanda hias:
 * menekannya membuka penjelasan yang sama seperti tombol utama, karena di
 * layar pembuka ini tidak ada apa pun di bawahnya untuk digulir.
 */
.ppdb-scroll-hint {
    position: relative;
    z-index: 1;
    display: block;
    margin: auto auto 0;
    padding: 0.4rem 1.2rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    /*
     * Geraknya diperlambat dan diperkecil. Sorotan ini sudah punya satu gerak
     * tetap - titik keadaan yang berdenyut pada bilah di atasnya - dan dua
     * benda yang bergerak terus-menerus dalam satu layar membuat mata tidak
     * pernah selesai membaca judulnya.
     */
    animation: ppdb-hint 3.6s ease-in-out infinite;
}

.ppdb-scroll-hint:hover,
.ppdb-scroll-hint:focus-visible {
    color: rgba(255, 255, 255, 0.9);
}

@keyframes ppdb-hint {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.22rem);
    }
}

/* ------------------------------------------------------------------ *
 * Ajakan pada sorotan
 *
 * Dua tindakan berdampingan, masing-masing menyatakan tujuannya. Yang utama
 * berupa tombol emas menuju formulir; yang kedua hanya tulisan bertanda panah
 * menuju penjelasan di bawahnya. Sebelumnya keduanya dilebur menjadi satu
 * tombol bertuliskan DAFTAR yang sebenarnya hanya membuka penjelasan, dan
 * pengunjung yang hendak mendaftar tidak pernah sampai ke formulirnya.
 * ------------------------------------------------------------------ */

.ppdb-hero-gate {
    min-height: 100svh;
}

/*
 * Judul ditarik ke tengah layar sementara petunjuk gulir tetap di dasarnya:
 * keduanya memakai margin otomatis, sehingga ruang sisa terbagi rata di atas
 * judul dan di antara judul dengan petunjuk itu.
 */
.ppdb-hero-gate > .container {
    margin-top: auto;
}

/*
 * Kedua ajakan ditumpuk, bukan dijajar.
 *
 * Berjajar, keduanya dipusatkan sebagai satu kelompok - dan karena tombolnya
 * jauh lebih lebar daripada tautan di sebelahnya, tombol itu justru berhenti
 * di sebelah kiri sumbu halaman sementara judul, paragraf, dan bilah keadaan
 * di bawahnya semuanya berdiri di tengah. Ditumpuk, seluruh sorotan memakai
 * satu sumbu yang sama.
 */
.ppdb-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
}

.ppdb-daftar {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 1rem 2.25rem;
    border-radius: 0.9rem;
    background-image: linear-gradient(180deg, #e9b933, var(--al-gold-500) 55%, var(--al-gold-600));
    color: #3b2d05;
    box-shadow: 0 1.25rem 3rem rgba(4, 21, 15, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ppdb-daftar:hover,
.ppdb-daftar:focus-visible {
    color: #3b2d05;
    transform: translateY(-2px);
    box-shadow: 0 1.6rem 3.6rem rgba(4, 21, 15, 0.62);
}

.ppdb-daftar:active {
    transform: translateY(0);
}

/* Ketika pendaftaran belum dibuka, ajakannya tidak lagi berteriak. */
.ppdb-daftar.is-quiet {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: none;
}

.ppdb-daftar.is-quiet:hover,
.ppdb-daftar.is-quiet:focus-visible {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.ppdb-daftar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.8vw, 1.4rem);
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Panahnya bergeser sedikit ke depan saat tombolnya disentuh. */
.ppdb-daftar-label .bi {
    font-size: 0.72em;
    letter-spacing: 0;
    transition: transform 0.18s ease;
}

.ppdb-daftar:hover .ppdb-daftar-label .bi {
    transform: translateX(0.2rem);
}

.ppdb-daftar-note {
    font-size: 0.84rem;
    line-height: 1.3;
    opacity: 0.8;
}

/* Ajakan kedua: tulisan bertanda panah, tanpa bidang warna. */
.ppdb-daftar-alt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 14px rgba(4, 21, 15, 0.7);
}

.ppdb-daftar-alt:hover,
.ppdb-daftar-alt:focus-visible {
    color: #fff;
}

.ppdb-daftar-alt .bi {
    font-size: 0.8em;
    transition: transform 0.18s ease;
}

.ppdb-daftar-alt:hover .bi {
    transform: translateY(0.15rem);
}

@media (prefers-reduced-motion: reduce) {
    .ppdb-daftar,
    .ppdb-daftar:hover,
    .ppdb-daftar-label .bi,
    .ppdb-daftar-alt .bi {
        transform: none;
        transition: none;
    }
}

/*
 * Tautan pendamping dibiarkan berupa teks kecil tanpa kotak. Diberi bentuk
 * tombol keduanya berebut perhatian dengan ajakan utama, padahal keduanya
 * dipakai jauh lebih jarang.
 */
.ppdb-gate-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    margin-top: 1.1rem;
    font-size: 0.92rem;
}

/*
 * Tulisannya sengaja dibiarkan kecil - dua tautan ini jarang dipakai - tetapi
 * sasaran sentuhnya ditinggikan sampai 2.5rem supaya tetap mudah dikenai ibu
 * jari. Yang bertambah ruang kosong di atas dan bawah huruf, bukan hurufnya.
 */
.ppdb-gate-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 14px rgba(4, 21, 15, 0.7);
}

.ppdb-gate-links a:hover,
.ppdb-gate-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .ppdb-scroll-hint {
        animation: none;
    }
}

/* Lajur angka ringkas, menempel di bawah sorotan. */
.ppdb-specs {
    position: relative;
    z-index: 1;
    background-color: var(--ppdb-ink);
    color: #fff;
    padding-block: clamp(2rem, 4vw, 3rem);
}

.ppdb-specs .row > div + div {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.ppdb-spec strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.ppdb-spec span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* Baris kecil di bawah lajur angka: sisa waktu gelombang yang sedang berjalan. */
.ppdb-spec-note {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--al-gold-400);
}

/*
 * Di layar sempit lajur angka menjadi dua kolom dua baris, bukan empat baris
 * bertumpuk: garis tegak memisahkan kolom, garis datar memisahkan baris.
 */
@media (max-width: 767.98px) {
    .ppdb-specs .row > div + div {
        border-inline-start: 0;
    }

    .ppdb-spec {
        padding-inline: 0.75rem;
    }

    .ppdb-specs .row > div:nth-child(even) {
        border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
    }

    .ppdb-specs .row > div:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 1.35rem;
        margin-top: 1.35rem;
    }
}

/* ------------------------------------------------------------------ *
 * Navigasi bagian yang menempel
 * ------------------------------------------------------------------ */

.ppdb-nav {
    position: sticky;
    top: var(--ppdb-header);
    z-index: 1010;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ppdb-nav ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.ppdb-nav ul::-webkit-scrollbar {
    display: none;
}

/*
 * Tombol ajakan dikecualikan: pemilih ini lebih kuat daripada .btn-primary,
 * sehingga tanpa :not() warna tulisannya ikut menjadi abu-abu.
 */
.ppdb-nav a:not(.btn) {
    display: block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    color: var(--al-muted);
    font-size: 0.86rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ppdb-nav a:not(.btn):hover,
.ppdb-nav a:not(.btn):focus-visible {
    color: var(--al-brand-800);
}

.ppdb-nav a.active {
    color: var(--al-brand-900);
    background-color: rgba(15, 107, 87, 0.09);
    font-weight: 500;
}

/*
 * Tombol daftar pada bilah bagian. Halaman ini panjang sekali, jadi tombolnya
 * dibuat menempel pada tepi bilah - bukan sekadar butir terakhir yang ikut
 * tergeser keluar layar ketika daftar bagiannya digulir mendatar di ponsel.
 * Dengan begitu jalan menuju formulir selalu satu ketukan saja, di mana pun
 * pembacanya sedang berada.
 */
.ppdb-nav .ppdb-nav-cta {
    position: sticky;
    inset-inline-end: 0;
    margin-inline-start: auto;
    padding-inline-start: 1.25rem;
    /*
     * Tirai landai ke arah kiri supaya butir yang lewat di belakangnya
     * memudar, bukan terpotong mendadak di tepi tombol.
     */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.92) 45%,
        rgba(255, 255, 255, 0.92) 100%
    );
}

[dir="rtl"] .ppdb-nav .ppdb-nav-cta {
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.92) 45%,
        rgba(255, 255, 255, 0.92) 100%
    );
}

.ppdb-nav .ppdb-nav-cta .btn {
    --bs-btn-bg: var(--al-gold-400);
    --bs-btn-border-color: var(--al-gold-400);
    --bs-btn-color: var(--al-brand-900);
    --bs-btn-hover-bg: var(--al-gold-500);
    --bs-btn-hover-border-color: var(--al-gold-500);
    --bs-btn-hover-color: var(--al-brand-900);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(6, 52, 43, 0.16);
}

/* ------------------------------------------------------------------ *
 * Ubin
 * ------------------------------------------------------------------ */

.ppdb-stack {
    background-color: #fff;
    padding-block: clamp(0.75rem, 2vw, 1.25rem);
}

/*
 * Jangkar bagian diberi jarak agar judulnya tidak tertutup dua bilah yang
 * sama-sama menempel: kepala situs dan navigasi bagian. Jaraknya dipasang
 * pada elemen yang benar-benar menjadi sasaran tautan, bukan pembungkusnya.
 */
.ppdb-stack[id],
.ppdb-mosaic[id],
.ppdb-tile[id] {
    scroll-margin-top: calc(var(--ppdb-header) + 4.25rem);
}

.ppdb-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ppdb-mosaic > .span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .ppdb-mosaic {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ppdb-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 34rem;
    padding: clamp(3rem, 6vw, 4.5rem) 1.5rem 0;
    border-radius: var(--ppdb-tile-radius);
    background-color: var(--ppdb-mist);
    text-align: center;
    overflow: hidden;
    color: var(--al-ink);
}

.ppdb-tile-dark {
    background-color: var(--ppdb-ink);
    color: #fff;
}

/*
 * Motif lingkaran bertumpang tindih - pola yang sama dengan panel judul dan
 * kaki halaman di seluruh situs - dicetak samar pada tiap bidang hijau pekat.
 * Dipasang sebagai background-image, bukan lapisan tersendiri, supaya tidak
 * perlu berurusan dengan urutan tumpukan isi di dalam ubin.
 */
.ppdb-tile-dark,
.ppdb-specs,
.ppdb-band,
.ppdb-cta {
    background-image: var(--al-pattern-soft);
    background-size: 190px 190px;
}

.ppdb-tile-dark .ppdb-title,
.ppdb-tile-dark .ppdb-display {
    color: #fff;
}

.ppdb-tile-dark .ppdb-sub {
    color: rgba(255, 255, 255, 0.7);
}

.ppdb-tile-short {
    min-height: 26rem;
}

.ppdb-tile-body {
    position: relative;
    z-index: 2;
    max-width: 36rem;
}

/* Gambar mengisi sisa tinggi ubin dan menempel ke tepi bawahnya. */
.ppdb-tile-media {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 34rem;
    flex: 1 1 auto;
    min-height: 9rem;
    margin-top: 2rem;
    background-size: cover;
    background-position: center 40%;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* Ubin yang seluruhnya berupa foto, dengan teks di atasnya. */
.ppdb-tile-photo {
    justify-content: flex-start;
    color: #fff;
    background-color: var(--ppdb-ink);
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
    text-decoration: none;
}

.ppdb-tile-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/*
 * Foto kegiatan santri ramai isinya, jadi tirai gelapnya dibuat lebih tebal
 * di bagian atas - tempat judul berada - agar tulisan tetap terbaca.
 */
.ppdb-tile-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(4, 21, 15, 0.82) 0%,
        rgba(4, 21, 15, 0.62) 42%,
        rgba(4, 21, 15, 0.24) 72%,
        rgba(4, 21, 15, 0.58) 100%
    );
}

/* Judul ubin foto lebih kecil: dua ubin berdampingan, bukan selebar layar. */
/*
 * Judul dan ringkasan pada ubin foto dikunci dua baris.
 *
 * Tanpa ini ubin yang judulnya sebaris dan ubin yang judulnya dua baris
 * mendorong isi di bawahnya ke ketinggian yang berbeda, sehingga tautan
 * "pelajari lebih lanjut" pada dua ubin bersebelahan tidak pernah sejajar -
 * dan deretan ubin terbaca seperti dipasang miring.
 */
.ppdb-tile-photo .ppdb-title {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.12em);
}

.ppdb-tile-photo .ppdb-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.45em);
}

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

.ppdb-tile-photo .ppdb-title {
    color: #fff;
}

.ppdb-tile-photo .ppdb-sub {
    color: rgba(255, 255, 255, 0.82);
}

/* Angka besar untuk biaya. */
.ppdb-figure {
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 1.75rem 0 0;
}

/* Daftar bertanda centang, dipakai isi bebas maupun daftar tetap. */
.ppdb-check,
.ppdb-syarat ul {
    display: inline-block;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

.ppdb-check li,
.ppdb-syarat li {
    position: relative;
    padding-inline-start: 1.85rem;
    margin-bottom: 0.65rem;
}

.ppdb-check li::before,
.ppdb-syarat li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    inset-inline-start: 0;
    top: -0.05rem;
    color: var(--al-brand-600);
}

/*
 * Tanda centang di atas ubin gelap. Hijau biasa terlalu tenggelam di sana,
 * jadi dipakai nada hijau muda dari palet - bukan mint di luar palet seperti
 * sebelumnya.
 */
.ppdb-tile-dark .ppdb-check li::before,
.ppdb-tile-dark .ppdb-syarat li::before {
    color: var(--al-brand-100);
    opacity: 0.7;
}

.ppdb-syarat p {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Alur pendaftaran
 * ------------------------------------------------------------------ */

/*
 * Tahapnya berurut dan saling menyambung, jadi ditulis menurun sebagai daftar
 * kartu bernomor. Sebelumnya tiap tahap hanya sebaris tulisan berikon kecil di
 * sampingnya - tujuh baris yang bobotnya persis sama dan tidak memberi tahu
 * pembacanya sudah sampai di mana. Nomor besar pada tiap kartu menjawab itu
 * dalam sekali pandang, dan ikonnya turun menjadi penanda kecil di sisi judul.
 */
/*
 * Daftar tahap tidak lagi memikul jarak bawah ubin. Dulu ia yang menutup ubin
 * ini, jadi jaraknya dipasang di sini; sejak ada ajakan di bawahnya, jarak itu
 * bertumpuk dengan jarak atas ajakan - hampir enam rem menganga di atas
 * tombol, sementara di bawah keterangannya tidak tersisa apa-apa. Sekarang
 * ajakan itu yang menutup ubin, dan jarak bawahnya disamakan dengan jarak
 * atas ubin supaya keduanya seimbang.
 */
.ppdb-steps {
    width: 100%;
    max-width: 50rem;
    margin: clamp(2.25rem, 5vw, 3.25rem) auto 0;
    padding: 0;
    list-style: none;
    text-align: start;
    counter-reset: tahap;
}

.ppdb-step-card {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    column-gap: 1.15rem;
    align-items: start;
    margin-bottom: 0.7rem;
    padding: 1.15rem 1.35rem;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(6, 52, 43, 0.05);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease;
}

.ppdb-step-card:last-child {
    margin-bottom: 0;
}

.ppdb-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(6, 52, 43, 0.12);
}

/*
 * Garis penghubung digambar oleh tiap kartu dan dijulurkan ke bawah sejauh
 * jarak antar kartu, sehingga rangkaiannya tetap tersambung meskipun tinggi
 * tiap kartu berbeda-beda. Kartu terakhir tidak menggambarnya.
 */
.ppdb-step-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 2.6rem;
    top: 4.15rem;
    height: calc(100% - 4.15rem + 0.7rem);
    width: 2px;
    background-color: rgba(20, 132, 107, 0.16);
}

.ppdb-step-card:last-child::before {
    content: none;
}

/* Lencana nomor sekaligus menjadi titik rangkaian tiap tahap. */
.ppdb-step-no {
    grid-column: 1;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3rem;
    border-radius: 0.85rem;
    background: linear-gradient(150deg, var(--al-brand-700), var(--al-brand-900));
    color: #fff;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.ppdb-step-text {
    grid-column: 2;
    min-width: 0;
}

.ppdb-step-card h3 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
}

.ppdb-step-card h3 .bi {
    flex: 0 0 auto;
    color: var(--al-gold-600);
    font-size: 0.95rem;
}

.ppdb-step-card p {
    margin-bottom: 0;
    color: var(--al-muted);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .ppdb-step-card,
    .ppdb-step-card:hover {
        transform: none;
        transition: none;
    }
}

/* Ajakan yang menutup daftar tahap. */
.ppdb-step-cta {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.ppdb-step-cta-note {
    max-width: 26rem;
    margin: 0.9rem auto 0;
    font-size: 0.88rem;
    color: var(--al-muted);
}

/* ------------------------------------------------------------------ *
 * Bilah keadaan pada sorotan
 *
 * Tiga keterangan yang paling sering ditanyakan - sedang dibuka atau belum,
 * sisa kursi, dan sisa waktu - berdiri sejajar di bawah tombol utama, di atas
 * foto. Berlatar kaca gelap supaya angkanya terbaca di atas foto apa pun,
 * sekaligus tidak menyaingi tombolnya.
 * ------------------------------------------------------------------ */

.ppdb-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    width: min(100%, 46rem);
    margin: clamp(1.75rem, 4vh, 2.75rem) auto 0;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: start;
}

/*
 * Garis pemisahnya adalah celah 1px pada kisi yang membiarkan latar wadah
 * terlihat - cara ini tetap benar berapa pun jumlah selnya dan ketika selnya
 * berpindah baris di layar sempit.
 */
.ppdb-status-cell {
    padding: 1rem 1.15rem;
    background-color: rgba(4, 21, 15, 0.55);
}

.ppdb-status-flag {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.ppdb-status.is-open .ppdb-status-cell:first-child .ppdb-status-flag {
    color: var(--al-gold-400);
}

.ppdb-status-cell strong {
    display: block;
    margin-top: 0.4rem;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.ppdb-status-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Titik keadaan berdenyut pelan selagi pendaftaran masih terbuka. */
.ppdb-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
}

.ppdb-status.is-open .ppdb-status-dot {
    background-color: var(--al-gold-400);
}

@media (prefers-reduced-motion: no-preference) {
    .ppdb-status.is-open .ppdb-status-dot {
        animation: ppdb-denyut 2.4s ease-in-out infinite;
    }
}

@keyframes ppdb-denyut {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(233, 184, 28, 0.55);
    }

    70% {
        box-shadow: 0 0 0 0.45rem rgba(233, 184, 28, 0);
    }
}

/* Hitung mundur: tiga angka sejajar dengan satuannya masing-masing. */
.ppdb-clock {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-top: 0.4rem;
}

.ppdb-clock > span {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.ppdb-clock strong {
    display: inline;
    margin: 0;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

/*
 * Di layar sempit ketiga sel tidak muat sebaris dan turun menjadi dua lajur.
 * Sel terakhir dibiarkan melebar penuh ketika ia jatuh sendirian di baris
 * bawah - tanpa itu separuh baris terakhir tertinggal sebagai kotak kosong.
 * Dipilih :last-child:nth-child(odd) supaya aturannya tetap benar ketika
 * selnya hanya dua, yaitu saat pendaftaran belum dibuka.
 */
@media (max-width: 767.98px) {
    .ppdb-status {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppdb-status-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ppdb-status-cell {
        padding: 0.85rem 1rem;
    }

    .ppdb-status-cell strong,
    .ppdb-clock strong {
        font-size: 1.15rem;
    }

    .ppdb-clock {
        gap: 0.65rem;
    }
}

/* ------------------------------------------------------------------ *
 * Jadwal gelombang sebagai rangkaian mendatar
 *
 * Tiga gelombang yang ditumpuk menurun terbaca sebagai daftar; dijejer
 * mendatar, ketiganya terbaca sebagai satu rangkaian yang sedang berjalan -
 * dan posisi gelombang yang sedang dibuka di antara keduanya langsung
 * terlihat. Di layar sempit susunannya kembali menurun.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
    .ppdb-timeline.is-steps {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 1.25rem;
        padding-inline-start: 0;
        max-width: 64rem;
        margin-inline: auto;
    }

    /* Garis penghubungnya berubah dari tegak menjadi mendatar. */
    .ppdb-timeline.is-steps::before {
        inset-inline: 1.5rem;
        top: 0.45rem;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .ppdb-timeline.is-steps li {
        padding-inline-start: 0;
        padding-top: 1.75rem;
        padding-bottom: 0;
        text-align: center;
    }

    .ppdb-timeline.is-steps li::before {
        inset-inline-start: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    [dir="rtl"] .ppdb-timeline.is-steps li::before {
        transform: translateX(50%);
    }

    .ppdb-timeline.is-steps .ppdb-quota {
        margin-inline: auto;
    }

    .ppdb-timeline.is-steps .ppdb-tahapan {
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------ *
 * Ceklis berkas
 *
 * Daftar persyaratan yang dapat dicentang sendiri oleh calon pendaftar.
 * Kotak centang dan penghitungnya dipasang ppdb.js; yang ditulis di sini
 * hanya rupanya, dan seluruhnya bersandar pada kelas yang dipasang skrip itu
 * supaya daftar biasa tanpa JavaScript tidak ikut berubah bentuk.
 * ------------------------------------------------------------------ */

.ppdb-checklist li {
    padding-inline-start: 0;
}

/* Tanda centang bawaan daftar dilepas: kotak centang menggantikan perannya. */
.ppdb-checklist li::before {
    content: none;
}

.ppdb-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    margin-inline-start: -0.75rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.ppdb-checklist label:hover {
    background-color: rgba(20, 132, 107, 0.08);
}

.ppdb-checklist input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--al-brand-700);
    cursor: pointer;
}

/*
 * Butir yang sudah dicentang diredupkan, bukan dicoret: yang dicari kesan
 * "beres", sementara coretan membuat namanya lebih sulit dibaca ulang ketika
 * pembacanya ingin memastikan.
 */
.ppdb-checklist li.is-checked label {
    color: var(--al-muted);
}

.ppdb-checklist-count {
    margin-top: 0.85rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--al-muted);
}

.ppdb-checklist-count.is-done {
    color: var(--al-brand-700);
}

.ppdb-tile-dark .ppdb-checklist label:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.ppdb-tile-dark .ppdb-checklist li.is-checked label,
.ppdb-tile-dark .ppdb-checklist-count {
    color: rgba(255, 255, 255, 0.62);
}

.ppdb-tile-dark .ppdb-checklist-count.is-done {
    color: var(--al-gold-400);
}

/* ------------------------------------------------------------------ *
 * Daftar lipat pada bagian informasi
 *
 * Halaman informasi dipecah menurut judulnya dan disajikan sebagai baris yang
 * dapat dibuka satu per satu. <details> dipakai apa adanya - peramban sudah
 * menanganinya tanpa skrip - jadi yang ditulis di sini hanya rupanya.
 * ------------------------------------------------------------------ */

.ppdb-folds {
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
    text-align: start;
}

.ppdb-fold {
    border-top: 1px solid rgba(6, 52, 43, 0.12);
}

.ppdb-fold:last-child {
    border-bottom: 1px solid rgba(6, 52, 43, 0.12);
}

.ppdb-fold summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.1rem;
    cursor: pointer;
    list-style: none;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--al-brand-900);
    transition: color 0.18s ease;
}

/* Segitiga bawaan peramban dilepas; tanda tambah di kanan menggantikannya. */
.ppdb-fold summary::-webkit-details-marker {
    display: none;
}

.ppdb-fold summary:hover {
    color: var(--al-brand-700);
}

.ppdb-fold summary .bi {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
    font-size: 0.8rem;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.18s ease;
}

.ppdb-fold[open] summary .bi {
    transform: rotate(45deg);
    background-color: var(--al-gold-400);
    color: var(--al-brand-900);
}

.ppdb-fold .ppdb-prose {
    padding-bottom: 1.25rem;
}

.ppdb-fold[open] .ppdb-prose {
    animation: ppdb-lipat-buka 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ppdb-lipat-buka {
    from {
        opacity: 0;
        transform: translateY(-0.4rem);
    }

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

@media (prefers-reduced-motion: reduce) {
    .ppdb-fold summary .bi,
    .ppdb-fold[open] .ppdb-prose {
        transition: none;
        animation: none;
    }
}

/* ------------------------------------------------------------------ *
 * Sisa kursi pada jadwal gelombang
 * ------------------------------------------------------------------ */

.ppdb-quota {
    max-width: 24rem;
    margin-top: 0.7rem;
}

.ppdb-quota-note {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--al-brand-700);
}

/* ------------------------------------------------------------------ *
 * Lajur angka lembaga
 *
 * Pita gelap selebar layar yang memotong deretan ubin terang, sekaligus
 * menampilkan angka yang sudah dikelola pada Pengaturan > Angka Ringkasan.
 * ------------------------------------------------------------------ */

.ppdb-band {
    background-color: var(--ppdb-ink);
    color: #fff;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    text-align: center;
}

.ppdb-band .ppdb-title {
    color: #fff;
}

.ppdb-band .ppdb-sub {
    color: rgba(255, 255, 255, 0.68);
}

.ppdb-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2.5rem 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.ppdb-figures strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
}

.ppdb-figures span {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

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

.ppdb-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.75rem;
    width: 100%;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 68rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.ppdb-gallery figure {
    position: relative;
    display: block;
    margin: 0;
    aspect-ratio: 1;
    border-radius: 0.9rem;
    overflow: hidden;
    background-color: var(--ppdb-mist);
}

/* Foto pertama dibuat empat kali lebih besar sebagai jangkar mosaik. */
.ppdb-gallery figure:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.ppdb-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ppdb-gallery figure:hover img {
    transform: scale(1.05);
}

@media (max-width: 767.98px) {
    .ppdb-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* ------------------------------------------------------------------ *
 * Linimasa gelombang
 * ------------------------------------------------------------------ */

.ppdb-timeline {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin: 2.75rem auto 0;
    padding: 0 0 clamp(2.5rem, 5vw, 3.75rem) 2.25rem;
    list-style: none;
    text-align: start;
}

.ppdb-timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.5rem;
    top: 0.6rem;
    bottom: calc(clamp(2.5rem, 5vw, 3.75rem) + 0.6rem);
    width: 2px;
    background-color: rgba(0, 0, 0, 0.08);
}

.ppdb-timeline li {
    position: relative;
    padding-bottom: 1.75rem;
}

.ppdb-timeline li:last-child {
    padding-bottom: 0;
}

.ppdb-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.98rem;
    top: 0.45rem;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background-color: var(--ppdb-mist);
}

.ppdb-timeline li.is-now::before {
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-600);
    box-shadow: 0 0 0 4px rgba(20, 132, 107, 0.18);
}

.ppdb-timeline li.is-done::before {
    border-color: var(--al-brand-600);
    background-color: #fff;
}

.ppdb-timeline h3 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.15rem;
}

.ppdb-timeline p {
    margin-bottom: 0;
    color: var(--al-muted);
    font-size: 0.95rem;
}

/*
 * Tahapan sesudah pendaftaran ditutup - pemetaan, pengumuman hasil, dan
 * registrasi ulang - disusun dua lajur: nama tahap rata kanan, tanggalnya rata
 * kiri. Petak jadwal ini bertulisan rata tengah, dan tanpa lajur yang saling
 * menyangga ketiga barisnya berhenti di tempat yang berbeda-beda - terbaca
 * sebagai tumpukan kalimat, bukan sebagai jadwal yang bisa ditelusuri.
 */
.ppdb-tahapan {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    gap: 0.3rem 0.6rem;
    width: fit-content;
    max-width: 100%;
    margin: 0.8rem 0 0;
    font-size: 0.875rem;
    text-align: start;
}

.ppdb-tahapan dt {
    text-align: end;
    font-weight: 600;
    color: var(--al-ink);
}

.ppdb-tahapan dd {
    margin: 0;
    color: var(--al-muted);
}

/* Tahap yang sudah lewat tetap terbaca, tetapi tidak lagi menarik perhatian. */
.ppdb-tahapan .is-done {
    opacity: 0.5;
}

/* ------------------------------------------------------------------ *
 * Isi bebas dan ajakan penutup
 * ------------------------------------------------------------------ */

.ppdb-prose {
    width: 100%;
    max-width: 40rem;
    margin: 2rem auto 0;
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
    text-align: start;
}

/*
 * Pita ajakan penutup berdiri sebagai panel membulat yang menyisakan tepi
 * halaman di kiri dan kanannya - bentuk yang sama dengan ajakan penutup di
 * beranda, dan sama dengan ubin-ubin di atasnya. Sebelumnya ia satu-satunya
 * bidang di halaman ini yang menabrak dinding layar, lalu menyisakan pita
 * terang tipis di antara dirinya dan kaki halaman yang juga gelap.
 */
.ppdb-cta {
    color: #fff;
    text-align: center;
    padding-block: clamp(3.5rem, 8vw, 6rem);
    margin-inline: var(--al-shell);
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
    border-radius: var(--al-radius-lg);
    overflow: hidden;
    background-color: var(--ppdb-ink);
}

/*
 * Judul penutup dikecilkan dari ukuran sorotan. Keduanya memakai .ppdb-display,
 * dan pada ukuran penuh pita penutup berteriak sekeras layar pembuka - padahal
 * perannya menutup, bukan membuka.
 */
.ppdb-cta .ppdb-display {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.6rem);
    max-width: 18ch;
    margin-inline: auto;
}

.ppdb-cta .ppdb-sub {
    color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ *
 * Gerak halaman penerimaan
 *
 * Tiga gerak, masing-masing punya alasan.
 *
 * Sorotan dibangun sepotong demi sepotong saat halaman terbuka, mengikuti
 * urutan bacanya: nama pesantren, judul, penjelasan, lalu ajakan dan angka.
 * Ini gerak sekali jalan - bukan gerak yang menunggu digulir - karena bagian
 * ini sudah terlihat sejak awal.
 *
 * Garis penghubung pada daftar tahap tumbuh mengikuti kartunya yang muncul,
 * sehingga rangkaian tujuh tahap itu seolah menggambar dirinya sendiri
 * sepanjang pembacanya menurun.
 *
 * Titik gelombang yang sedang dibuka berdenyut pelan - penanda bahwa yang satu
 * itu hidup, di antara dua gelombang lain yang belum dijadwalkan.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    /*
     * Tunda bertingkat dipasang per anak. Jumlah anaknya berubah - bilah
     * keadaan hilang ketika belum ada gelombang sama sekali - jadi yang
     * dipakai nth-child, bukan daftar kelas yang harus dijaga tetap cocok.
     */
    .ppdb-hero-gate > .container > * {
        animation: ppdb-sorotan-naik 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .ppdb-hero-gate > .container > *:nth-child(2) {
        animation-delay: 0.09s;
    }

    .ppdb-hero-gate > .container > *:nth-child(3) {
        animation-delay: 0.18s;
    }

    .ppdb-hero-gate > .container > *:nth-child(4) {
        animation-delay: 0.27s;
    }

    .ppdb-hero-gate > .container > *:nth-child(5) {
        animation-delay: 0.38s;
    }

    .ppdb-hero-gate > .container > *:nth-child(6) {
        animation-delay: 0.46s;
    }

    /*
     * Garis penghubung digambar dari atas ke bawah. Kelas .ppdb-reveal
     * dipasang ppdb.js, jadi ketika skripnya gagal dimuat garis ini tetap
     * berdiri utuh dan tidak pernah tersembunyi.
     */
    .ppdb-step-card.ppdb-reveal::before {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
    }

    .ppdb-step-card.ppdb-reveal.is-in::before {
        transform: scaleY(1);
    }

    /* Titik gelombang yang sedang berjalan. */
    .ppdb-timeline li.is-now::before {
        animation: ppdb-gelombang-denyut 2.8s ease-out infinite;
    }
}

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

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

@keyframes ppdb-gelombang-denyut {
    0% {
        box-shadow:
            0 0 0 4px rgba(20, 132, 107, 0.18),
            0 0 0 0 rgba(20, 132, 107, 0.45);
    }

    70%,
    100% {
        box-shadow:
            0 0 0 4px rgba(20, 132, 107, 0.18),
            0 0 0 0.7rem rgba(20, 132, 107, 0);
    }
}

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

.ppdb-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

    .ppdb-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 * Formulir bertahap
 * ------------------------------------------------------------------ */

/*
 * Perpindahan langkah menggulir ke kepala formulir. Sasarannya diberi jarak
 * sebesar bilah yang menempel di atasnya, karena scrollIntoView menyamakan
 * tepi atas elemen dengan tepi atas layar - dan bilah yang menempel bukan
 * bagian dari perhitungan itu, sehingga bilah langkah 1-2-3-4 mendarat di
 * baliknya.
 */
#psb-form {
    scroll-margin-top: calc(var(--ppdb-header) + 1rem);
}

/*
 * Pada pendaftaran yang sedang dilanjutkan ada satu bilah lagi yang menempel -
 * penanda pendaftarannya - jadi jaraknya ditambah setinggi kotak itu. Dipilih
 * lewat kehadiran kotaknya sendiri, bukan kelas pada pembungkusnya, supaya
 * jarak ini tidak pernah tertinggal pada halaman yang tidak memakainya.
 */
.ppdb-lanjut.is-berjalan ~ .ppdb-form-shell #psb-form {
    scroll-margin-top: calc(var(--ppdb-header) + 7rem);
}

.ppdb-form-shell {
    border-radius: var(--ppdb-tile-radius);
    background-color: var(--al-surface);
    box-shadow: 0 1px 2px rgba(6, 52, 43, 0.05), 0 12px 32px rgba(6, 52, 43, 0.06);
    overflow: hidden;
}

.ppdb-rail {
    display: flex;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--al-line);
    background-color: #fbfdfc;
    overflow-x: auto;
    scrollbar-width: none;
}

.ppdb-rail::-webkit-scrollbar {
    display: none;
}

.ppdb-rail-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    color: var(--al-muted);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.ppdb-rail-item .num {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    border: 1px solid var(--al-line);
    border-radius: 50%;
    background-color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.ppdb-rail-item.is-active {
    color: var(--al-brand-800);
    background-color: var(--al-brand-100);
}

.ppdb-rail-item.is-active .num {
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-700);
    color: #fff;
}

.ppdb-rail-item.is-done .num {
    border-color: var(--al-brand-600);
    color: var(--al-brand-700);
}

.ppdb-panel {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.ppdb-panel h2 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.ppdb-panel > p.lead-note {
    color: var(--al-muted);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
}

/*
 * Kotak isian yang belum lengkap, tampil sesudah tombol kirim ditekan.
 * Letaknya menempel di atas deretan tombol - di situlah mata pengunjung
 * berada saat kiriman ditolak - dan warnanya sengaja berbeda dari hijau
 * situs supaya tidak terbaca sebagai keterangan biasa.
 */
.ppdb-warning {
    margin: 0 clamp(1.5rem, 4vw, 2.5rem);
    padding: 1.1rem 1.25rem;
    border: 1px solid #f0c8a8;
    border-inline-start: 4px solid #c0392b;
    border-radius: 0.9rem;
    background-color: #fdf6f2;
}

.ppdb-warning-title {
    font-weight: 600;
    color: #8f2c1e;
    margin-bottom: 0.6rem;
}

.ppdb-warning-title .bi {
    margin-inline-end: 0.35rem;
}

.ppdb-warning ul {
    margin-bottom: 0.9rem;
    padding-inline-start: 1.2rem;
    color: #6b3a32;
    font-size: 0.93rem;
}

.ppdb-warning li + li {
    margin-top: 0.2rem;
}

.ppdb-warning ul:empty {
    display: none;
}

.ppdb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid var(--al-line);
    background-color: #fbfdfc;
}

.ppdb-actions .btn {
    padding-inline: 1.6rem;
}

.ppdb-actions .spacer {
    margin-inline-start: auto;
}

/* Nomor langkah di sisi kiri deretan tombol. */
.ppdb-actions-count {
    margin: 0;
    color: var(--al-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Kotak tanya
 * ------------------------------------------------------------------ */

.ppdb-tanya .modal-content {
    border: 0;
    border-radius: var(--ppdb-tile-radius);
    box-shadow: 0 24px 60px rgba(6, 52, 43, 0.22);
}

.ppdb-tanya .modal-body {
    padding: 2.25rem 2rem 1rem;
    text-align: center;
}

.ppdb-tanya-ikon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    background-color: var(--al-brand-100);
    color: var(--al-brand-700);
    font-size: 1.45rem;
}

.ppdb-tanya-judul {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.55rem;
}

.ppdb-tanya-pesan {
    margin-bottom: 0;
    color: var(--al-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

.ppdb-tanya .modal-footer {
    justify-content: center;
    padding: 0.75rem 2rem 1.9rem;
    border-top: 0;
}

.ppdb-tanya .modal-footer > * {
    margin: 0.3rem;
}

.ppdb-tanya .modal-footer .btn {
    min-width: 9rem;
    padding-inline: 1.5rem;
}

/*
 * Di layar sempit tombolnya bertumpuk, dan yang meneruskan berada di atas -
 * ibu jari berhenti di situ lebih dulu. Urutan pada markahnya tetap "batal"
 * dahulu supaya penelusuran papan ketik menemukan jalan keluar terlebih dulu.
 */
@media (max-width: 30rem) {
    .ppdb-tanya .modal-footer {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
    }

    .ppdb-tanya .modal-footer .btn {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ *
 * Melanjutkan pendaftaran yang belum selesai
 * ------------------------------------------------------------------ */

/*
 * Pintu masuk kembali, berdiri di atas cangkang formulir. Bentuknya sengaja
 * berbeda dari panel langkah - berlatar terang dan bergaris - supaya tidak
 * terbaca sebagai bagian pertama dari formulir yang ada di bawahnya.
 */
.ppdb-lanjut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--al-line);
    border-radius: var(--ppdb-tile-radius);
    background-color: #fbfdfc;
}

/*
 * Penanda pendaftaran yang sedang dilanjutkan ikut menempel di bawah kepala
 * situs.
 *
 * Formulirnya panjang - empat langkah, puluhan ruas - sedangkan penandanya
 * berdiri di paling atas. Yang langsung menggulir ke bawah lalu mendapati
 * ruas-ruas sudah terisi tidak punya petunjuk apa pun tentang dari mana
 * isinya datang, dan mengira formulirnya gagal dikosongkan. Dengan menempel,
 * nama yang sedang dibuka dan tombol "Isi pendaftaran baru" selalu berada di
 * layar.
 *
 * Hanya yang berjalan yang menempel; kotak "Sudah pernah mendaftar?" memakai
 * kelas yang sama tetapi memang hanya perlu dibaca sekali di awal.
 */
.ppdb-lanjut.is-berjalan {
    position: sticky;
    /*
     * Dirapatkan ke kepala situs, tanpa jarak: celah setipis apa pun menjadi
     * jendela tempat isian formulir menyembul sewaktu digulir lewat di
     * baliknya.
     */
    top: var(--ppdb-header);
    z-index: 5;
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-100);
    box-shadow: 0 6px 18px rgba(6, 52, 43, 0.1);
}

/*
 * Di layar sempit kotaknya dipadatkan: yang menempel memakan tinggi layar
 * yang justru dibutuhkan untuk mengisi. Nomor dan NISN dilepas - keduanya
 * keterangan, sedangkan yang menentukan hanya nama yang sedang dibuka dan
 * jalan keluarnya.
 */
@media (max-width: 575.98px) {
    .ppdb-lanjut.is-berjalan {
        top: var(--ppdb-header);
        gap: 0.5rem 0.75rem;
        padding: 0.7rem 0.9rem;
        font-size: 0.9rem;
    }

    .ppdb-lanjut.is-berjalan .ppdb-lanjut-rinci {
        display: none;
    }
}

.ppdb-lanjut-form {
    display: contents;
}

.ppdb-lanjut .form-control {
    min-width: 9rem;
    border-radius: 0.75rem;
}

/* Isian NISN mendorong tombolnya ke ujung kanan pada layar lebar. */
.ppdb-lanjut .field-lanjutkanform-nisn {
    margin-inline-start: auto;
}

/*
 * Bentuk kartu untuk kolom sisi kanan.
 *
 * Susunan mendatarnya - keterangan, isian, lalu tombol dalam satu baris -
 * dirancang untuk selebar formulir. Di kolom sempit ketiganya menumpuk, dan
 * isian NISN-nya melebar penuh supaya sepuluh angkanya terbaca utuh.
 */
.ppdb-lanjut.is-samping {
    display: block;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.5rem;
}

.ppdb-lanjut.is-samping .ppdb-lanjut-form {
    display: block;
}

.ppdb-lanjut.is-samping .field-lanjutkanform-nisn {
    margin: 0.9rem 0 0;
}

.ppdb-lanjut.is-samping .form-control {
    width: 100%;
}

.ppdb-lanjut.is-samping .btn {
    width: 100%;
    margin-top: 0.6rem;
}

/*
 * Berkas yang belum terbuka: disebutkan namanya, tetapi tanpa tombol unggah.
 * Digambar sebagai daftar, bukan sebagai petak isian yang dinonaktifkan,
 * supaya tidak ada yang mencoba menekannya berulang kali.
 */
.ppdb-terkunci {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ppdb-terkunci li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    border: 1px dashed #d8e2de;
    border-radius: 0.75rem;
    background-color: #f7faf9;
    color: var(--al-muted);
    font-size: 0.92rem;
}

.ppdb-terkunci .bi {
    flex: 0 0 auto;
    font-size: 0.85rem;
}

/* Keterangan keadaan pembayaran di atas petak buktinya. */
.ppdb-catatan {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.75rem;
    font-size: 0.93rem;
}

.ppdb-catatan .bi {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.ppdb-catatan.is-lolos {
    background-color: var(--al-brand-100);
    color: var(--al-brand-900);
}

.ppdb-catatan.is-menunggu {
    background-color: #eef4fb;
    color: #2b4a6b;
}

.ppdb-catatan.is-tertahan {
    background-color: #fdf6f2;
    color: #6b3a32;
}

/*
 * Pembayaran yang sudah lunas. Menggantikan petak unggahnya, bukan berdiri di
 * atasnya: petak kosong di bawah keterangan lunas terbaca sebagai sesuatu yang
 * masih harus dikerjakan, dan itulah yang membuat orang mengunggah ulang bukti
 * yang sudah diterima panitia.
 */
.ppdb-lunas {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--al-brand-600);
    border-radius: 0.9rem;
    background-color: var(--al-brand-100);
    color: var(--al-brand-900);
    font-size: 0.93rem;
}

.ppdb-lunas .bi {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 1.15rem;
}

.ppdb-lunas strong {
    font-size: 1.02rem;
}

.ppdb-lunas-rinci {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
    opacity: 0.85;
}

.ppdb-upload {
    padding: 1.15rem 1.25rem;
    border: 1px dashed #cddcd7;
    border-radius: 0.9rem;
    background-color: #fbfdfc;
    height: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Berkas yang sudah ada di tangan panitia - garisnya tidak lagi putus-putus. */
.ppdb-upload.is-terisi {
    border-style: solid;
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-100);
}

.ppdb-upload:hover,
.ppdb-upload:focus-within {
    border-color: var(--al-brand-600);
    background-color: #fff;
}

.ppdb-upload .form-label {
    font-weight: 600;
    font-size: 0.92rem;
}

.ppdb-review dt {
    color: var(--al-muted);
    font-weight: 500;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ppdb-review dd {
    margin-bottom: 0.9rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Pelacakan status
 * ------------------------------------------------------------------ */

.ppdb-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ppdb-track li {
    position: relative;
    padding-top: 1.9rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--al-muted);
}

.ppdb-track li::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid var(--al-line);
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}

.ppdb-track li::after {
    content: "";
    position: absolute;
    top: 0.72rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--al-line);
}

.ppdb-track li:last-child::after {
    display: none;
}

.ppdb-track li.is-done {
    color: var(--al-brand-800);
    font-weight: 600;
}

.ppdb-track li.is-done::before {
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-600);
}

.ppdb-track li.is-done::after {
    background-color: var(--al-brand-600);
}

.ppdb-track li.is-now::before {
    box-shadow: 0 0 0 4px var(--al-brand-100);
}

.ppdb-track.is-stopped li.is-done::before {
    border-color: #b02a37;
    background-color: #b02a37;
}

.ppdb-track.is-stopped li.is-done::after {
    background-color: #b02a37;
}

.ppdb-track.is-stopped li.is-done {
    color: #842029;
}

/* ------------------------------------------------------------------ *
 * Kartu bukti pendaftaran
 * ------------------------------------------------------------------ */

.ppdb-kartu {
    max-width: 40rem;
    margin-inline: auto;
    border: 1px solid var(--al-line);
    border-radius: 1rem;
    background-color: #fff;
    overflow: hidden;
}

.ppdb-kartu-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.75rem;
    color: #fff;
    background: linear-gradient(120deg, var(--al-brand-900), var(--al-brand-700));
}

.ppdb-kartu-head img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.ppdb-kartu-head strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.3;
}

.ppdb-kartu-head span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
}

.ppdb-kartu-nomor {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px dashed var(--al-line);
    text-align: center;
}

.ppdb-kartu-nomor strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    color: var(--al-brand-900);
}

.ppdb-kartu-nomor span {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.ppdb-kartu-body {
    padding: 1.5rem 1.75rem;
}

.ppdb-kartu-body dl {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.55rem 1rem;
    margin: 0;
    font-size: 0.92rem;
}

.ppdb-kartu-body dt {
    color: var(--al-muted);
    font-weight: 500;
}

.ppdb-kartu-body dd {
    margin: 0;
    font-weight: 500;
}

.ppdb-kartu-foot {
    padding: 1rem 1.75rem 1.5rem;
    border-top: 1px solid var(--al-line);
    color: var(--al-muted);
    font-size: 0.82rem;
}

/*
 * Rancangan Ringkas: selebar kartu identitas, sekitar 86 mm. Ukurannya
 * ditetapkan dalam milimeter, bukan rem, karena yang menentukan di sini bukan
 * lebar layar melainkan lebar kertas - kartu yang dipotong mengikuti garis
 * cetaknya harus muat di saku, berapa pun ukuran huruf peramban.
 */
.ppdb-kartu.is-ringkas {
    max-width: 86mm;
    border-radius: 0.6rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-head {
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-head img {
    width: 30px;
    height: 30px;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-head strong {
    font-size: 0.82rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-head span {
    font-size: 0.66rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-nomor {
    padding: 0.6rem 0.9rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-nomor strong {
    font-size: 1.15rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-nomor span {
    font-size: 0.6rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-body {
    padding: 0.7rem 0.9rem;
}

/*
 * Label di atas nilainya, bukan berdampingan: dua kolom pada lebar 86 mm
 * menyisakan ruang yang tidak cukup untuk nama panjang, dan nama santri yang
 * terpotong adalah satu-satunya kesalahan yang tidak boleh terjadi di kartu.
 */
.ppdb-kartu.is-ringkas .ppdb-kartu-body dl {
    grid-template-columns: 1fr;
    gap: 0;
    font-size: 0.72rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-body dt {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-body dd + dt {
    margin-top: 0.45rem;
}

.ppdb-kartu.is-ringkas .ppdb-kartu-foot {
    padding: 0.6rem 0.9rem 0.8rem;
    font-size: 0.66rem;
}

/* Rancangan Formal: ruang tanda tangan dan stempel di kaki kartu. */
.ppdb-kartu-ttd {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.75rem 1.75rem;
    font-size: 0.82rem;
    text-align: center;
}

.ppdb-kartu-ttd span {
    display: block;
}

.ppdb-kartu-ttd-ruang {
    height: 4.5rem;
}

.ppdb-kartu-ttd-garis {
    min-width: 13rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--al-line);
    color: var(--al-muted);
    font-size: 0.75rem;
}

@media print {
    .ppdb-noprint {
        display: none !important;
    }

    body {
        background-color: #fff;
    }

    .ppdb-kartu {
        border: 1px solid #999;
        border-radius: 0;
        max-width: none;
    }

    /* Ringkas tetap seukuran kartu identitas saat tercetak - itu gunanya. */
    .ppdb-kartu.is-ringkas {
        max-width: 86mm;
    }

    .ppdb-kartu-head {
        /* Latar gelap dipaksa ikut tercetak, bukan keluar sebagai kotak putih. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

@media (max-width: 575.98px) {
    .ppdb-kartu-body dl {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .ppdb-kartu-body dd {
        margin-bottom: 0.6rem;
    }
}

/* Tautan di bawah mosaik galeri; jarak bawahnya milik ubin di layar sempit. */
.ppdb-gallery-more {
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* Blok bantuan di dasar ajakan penutup. */
.ppdb-help {
    max-width: 40rem;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ppdb-help p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.98rem;
    margin-bottom: 0;
}

.ppdb-help .ppdb-links {
    margin-top: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * Bilah langkah terpusat
 *
 * Menggantikan deretan pil kecil: tiap langkah berdiri sama lebar dengan
 * angka di atas dan namanya di bawah, dihubungkan garis yang ikut menghijau
 * seiring langkah yang sudah dilewati.
 * ------------------------------------------------------------------ */

.ppdb-rail {
    display: flex;
    gap: 0;
    padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid var(--al-line);
    background-color: #fff;
    overflow: visible;
}

.ppdb-rail-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--al-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

/* Garis penghubung ditarik dari tengah lingkaran sebelumnya. */
.ppdb-rail-item::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    inset-inline-end: 50%;
    width: 100%;
    height: 2px;
    margin-inline-end: 1.4rem;
    background-color: var(--al-line);
}

.ppdb-rail-item:first-child::before {
    display: none;
}

.ppdb-rail-item.is-done::before,
.ppdb-rail-item.is-active::before {
    background-color: var(--al-brand-600);
}

.ppdb-rail-item .num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 2.3rem;
    border: 2px solid var(--al-line);
    border-radius: 50%;
    background-color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.ppdb-rail-item.is-active {
    color: var(--al-brand-900);
    background: none;
    font-weight: 600;
}

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

.ppdb-rail-item.is-done {
    color: var(--al-brand-800);
}

.ppdb-rail-item.is-done .num {
    border-color: var(--al-brand-600);
    background-color: var(--al-brand-100);
    color: var(--al-brand-800);
}

/* ------------------------------------------------------------------ *
 * Ruas isian formulir
 * ------------------------------------------------------------------ */

.ppdb-panel h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.ppdb-panel .form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #35443f;
    margin-bottom: 0.4rem;
}

/*
 * Ruas mana yang wajib diisi ditentukan panitia dari panel admin, sehingga
 * pendaftar perlu penanda yang terbaca sebelum ia menekan "Kirim". Kelas
 * .required dipasang Yii sendiri pada ruas yang punya aturan wajib, jadi
 * tandanya tidak pernah tertinggal ketika pengaturannya berubah.
 */
.ppdb-panel .required > .form-label::after {
    content: ' *';
    color: #c0392b;
    font-weight: 600;
}

.ppdb-panel .form-control,
.ppdb-panel .form-select {
    padding: 0.7rem 0.95rem;
    border-radius: 0.75rem;
    border-color: var(--al-line);
    background-color: #fbfdfc;
    font-size: 1rem;
}

.ppdb-panel .form-control:focus,
.ppdb-panel .form-select:focus {
    background-color: #fff;
    border-color: var(--al-brand-600);
    box-shadow: 0 0 0 0.2rem rgba(20, 132, 107, 0.12);
}

.ppdb-panel textarea.form-control {
    min-height: 6.5rem;
}

.ppdb-panel .field-header {
    margin: 2.25rem 0 1.25rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--al-line);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--al-brand-700);
}

/*
 * Judul kelompok yang membuka panel atau kolomnya tidak perlu jarak atas:
 * di atasnya sudah ada keterangan langkah, dan dua jarak yang bertumpuk
 * membuat isian pertama terlempar jauh dari judulnya.
 */
.ppdb-panel .field-header:first-child,
.ppdb-panel > p.lead-note + .field-header {
    margin-top: 0;
}

/*
 * Ruas yang lolos pemeriksaan dibiarkan seperti semula. Tanda centang hijau
 * pada belasan ruas sekaligus lebih ramai daripada informatif, sedangkan yang
 * perlu terlihat justru ruas yang masih kurang.
 */
.ppdb-panel .form-control.is-valid,
.ppdb-panel .form-select.is-valid {
    border-color: var(--al-line);
    background-image: none;
}

.ppdb-panel .form-control.is-valid:focus,
.ppdb-panel .form-select.is-valid:focus {
    border-color: var(--al-brand-600);
    box-shadow: 0 0 0 0.2rem rgba(20, 132, 107, 0.12);
}

/*
 * Dropdown wilayah digambar ulang Select2, dan ruas aslinya - yang menerima
 * tanda galat dari ActiveForm - disembunyikan. Tandanya diteruskan ke kotak
 * buatan Select2 supaya ruas yang kurang tetap terlihat merah.
 */
.ppdb-panel select.is-invalid + .select2 .select2-selection {
    border-color: #dc3545;
}

/* Kartu ringkasan di sisi kanan ikut bergulir bersama isian. */
.ppdb-aside {
    position: sticky;
    top: calc(var(--ppdb-header) + 1.5rem);
}

.ppdb-summary {
    padding: 1.6rem;
    border-radius: var(--ppdb-tile-radius);
    background-color: var(--ppdb-mist);
}

.ppdb-summary h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 1.1rem;
}

.ppdb-summary dl {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.ppdb-summary dt {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-muted);
}

.ppdb-summary dd {
    margin: 0.15rem 0 0;
    font-weight: 600;
}

.ppdb-summary-note {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.88rem;
    color: var(--al-muted);
}

/* Daftar tinjauan pada langkah terakhir dibingkai agar terbaca sebagai ringkasan. */
.ppdb-review {
    margin: 0;
    padding: 1.5rem;
    border-radius: 0.9rem;
    background-color: #fbfdfc;
}

.ppdb-review > div:last-child dd,
.ppdb-review > div:nth-last-child(2) dd {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    /* Nama langkah disembunyikan di layar sempit; angkanya sudah cukup. */
    .ppdb-rail-item > span:last-child {
        font-size: 0.7rem;
    }
}

/*
 * Slot gelombang yang belum dijadwalkan: titiknya dibiarkan berongga dengan
 * garis putus-putus, dan tulisannya diredupkan supaya jelas terbaca sebagai
 * tempat kosong, bukan jadwal yang benar-benar sudah ada.
 */
.ppdb-timeline li.is-empty::before {
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.18);
    background-color: transparent;
}

.ppdb-timeline li.is-empty h3 {
    color: var(--al-muted);
    font-weight: 600;
}

.ppdb-timeline li.is-empty p {
    color: #93a19d;
}

/* ------------------------------------------------------------------ *
 * Penyetelan layar kecil
 *
 * Ubin dirancang setinggi 34rem agar lega di layar lebar. Di ponsel seluruh
 * ubin menumpuk satu kolom, sehingga tinggi itu menyisakan ruang kosong
 * panjang dan membuat halaman perlu digulir jauh lebih lama daripada isinya.
 * ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .ppdb-hero {
        min-height: min(80vh, 36rem);
        padding-block: 2.5rem 2rem;
    }

    /*
     * Layar pembuka tetap setinggi layar di ponsel: seluruh isinya hanya
     * judul dan satu tombol, jadi tidak ada yang perlu dipadatkan.
     */
    .ppdb-hero-gate {
        min-height: 100svh;
    }

    /* Judul dikecilkan agar tiga baris, bukan empat. */
    .ppdb-hero .ppdb-display {
        font-size: clamp(1.7rem, 7vw, 2.6rem);
    }

    .ppdb-links {
        gap: 0.9rem 1.1rem;
    }

    /*
     * Tombol ajakan penutup ditumpuk. Berdampingan keduanya nyaris menyentuh
     * kedua tepi layar, dan sasaran sentuhnya jadi terlalu berdempetan.
     */
    .ppdb-cta .ppdb-links {
        flex-direction: column;
        align-items: center;
    }

    /*
     * Isi ubin dirata-kirikan di layar sempit.
     *
     * Rata tengah bekerja pada layar lebar karena tiap baris pendek. Di lebar
     * 390 piksel satu paragraf menjadi tiga sampai empat baris, dan kedua
     * tepinya sama-sama bergerigi sehingga sulit dibaca. Sorotan, pita angka,
     * dan ajakan penutup tetap rata tengah - teksnya memang pendek.
     */
    /*
     * Jarak bawah dipasang pada ubinnya sendiri. Di layar lebar tinggi minimal
     * 34rem yang menyisakan ruang di bawah isi; begitu tinggi itu dilepas,
     * ubin tanpa jarak bawah membuat isinya menempel persis ke tepi.
     */
    .ppdb-tile {
        min-height: 0;
        padding: 2.5rem 1.25rem;
        text-align: start;
    }

    /*
     * Kotak isi diregangkan selebar ubin. Sebagai anak flex dengan
     * align-items: center, lebarnya mengikuti panjang teks lalu ditengahkan -
     * sehingga judul ubin berteks pendek tidak segaris dengan judul ubin
     * lain, maupun dengan linimasa dan mosaik yang selebar penuh.
     */
    .ppdb-tile-body {
        width: 100%;
        max-width: none;
    }

    .ppdb-tile .ppdb-sub {
        margin-inline: 0;
    }

    .ppdb-tile-short {
        min-height: 0;
    }

    /* Daftar centang ikut rata kiri, bukan blok mengambang di tengah. */
    .ppdb-check,
    .ppdb-syarat ul {
        display: block;
    }

    /* Ubin foto tetap perlu tinggi supaya gambarnya terbaca sebagai gambar. */
    .ppdb-tile-photo {
        min-height: 23rem;
        padding-bottom: 2.5rem;
    }

    /*
     * Ringkasan jenjang disembunyikan: kalimatnya dipotong di tengah kata dan
     * menumpuk di atas foto yang sudah ramai. Judul dan tautannya sudah cukup
     * mengantar pembaca ke halaman jenjang.
     *
     * Pemilih dibatasi pada ubin yang berupa tautan, yaitu ubin jenjang. Ubin
     * sorotan kehidupan memakai kelas yang sama tetapi keterangannya pendek,
     * utuh, dan justru menjadi isinya.
     */
    a.ppdb-tile-photo .ppdb-sub {
        display: none;
    }

    /* Tautan pada ubin foto diberi bayangan agar terbaca di bagian terang. */
    .ppdb-tile-photo .ppdb-more,
    .ppdb-tile-photo .ppdb-title,
    .ppdb-tile-photo .ppdb-chip {
        text-shadow: 0 1px 12px rgba(4, 21, 15, 0.75);
    }

    .ppdb-tile-photo .ppdb-links {
        justify-content: flex-start;
    }

    .ppdb-mosaic {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .ppdb-title {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .ppdb-sub {
        font-size: 1rem;
    }

    .ppdb-steps {
        margin-top: 2rem;
    }

    .ppdb-step-card {
        grid-template-columns: 2.6rem 1fr;
        column-gap: 0.85rem;
        padding: 0.95rem 1rem;
    }

    .ppdb-step-no {
        width: 2.6rem;
        height: 2.4rem;
        border-radius: 0.7rem;
        font-size: 1rem;
    }

    .ppdb-step-card::before {
        inset-inline-start: 1.95rem;
        top: 3.35rem;
        height: calc(100% - 3.35rem + 0.7rem);
    }

    .ppdb-band {
        padding-block: 3rem;
    }

    .ppdb-figures {
        gap: 1.75rem 1rem;
        margin-top: 2rem;
    }

    .ppdb-gallery,
    .ppdb-timeline,
    .ppdb-prose {
        margin-top: 2rem;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Ruang bagi titik linimasa dipersempit agar tidak terlalu menjorok. */
    .ppdb-timeline {
        padding-inline-start: 1.9rem;
    }

    .ppdb-timeline::before {
        bottom: 0.6rem;
    }

    .ppdb-cta {
        padding-block: 3rem;
    }

    /* Kartu ringkasan formulir tidak perlu menempel saat menumpuk. */
    .ppdb-aside {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .ppdb-gallery-more {
        margin-bottom: 0;
    }
}