/* =========================================================
   HALAMAN PUBLIK (Beranda / Tentang / Program /
   Pendaftaran / Kontak)
   Menyatu dengan design system Al Hijrah.
   ========================================================= */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body.public-page {
    background: var(--bg);
    color: var(--ink);
}

/* Fokus keyboard yang jelas & kontras (aksesibilitas) */
:where(.pub-btn, .pub-nav a, .pub-card, .pub-footer a,
       .pub-feature-row, .contact-item, .navbar-toggler,
       .pub-jenjang-item):focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 10px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--brand); }
.navbar-toggler:focus-visible { outline: none; }

/* Outline default memakai var(--brand), warnanya sama dengan background navbar
   hijau sehingga tidak terlihat. Di atas navbar pakai putih. */
.pub-nav a:focus-visible { outline-color: #fff; }
.pub-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.75); }

/* Hormati preferensi pengguna: matikan gerakan */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.pub-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* OPAKE penuh. Sebelumnya memakai rgba(...,0.86)+backdrop-filter:
       di tepi atas, di mana panjang navbar tidak berhimpit sempurna dengan
       viewport, sisanya memperlihatkan background body yang terang sehingga
       muncul garis putih tipis di atas navbar (terlihat di halaman yang
       tidak penuh konten gelap). Dengan background solid persis segaris. */
    background: #0f9d76;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pub-nav.scrolled {
    background: #097a5c;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 10px 40px -18px rgba(6, 78, 59, 0.55);
}

.pub-nav .navbar-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    font-size: 1.05rem;
}
.pub-nav .navbar-brand img { width: 40px; height: 40px; border-radius: 10px; }
.pub-nav .navbar-brand .brand-text { font-size: 1.05rem; color: rgba(255,255,255,0.85); }
/* brand-name dulu memakai var(--brand), yang warnanya sama dengan background
   hijau navbar sehingga lenyap. Pakai putih supaya tetap terbaca. */
.pub-nav .navbar-brand .brand-name { color: #fff; }
.pub-nav .nav-link {
    font-weight: 600;
    color: rgba(255,255,255,0.90);
    border-radius: 10px;
    padding: 9px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.pub-nav .nav-link:hover,
.pub-nav .nav-link:focus { color: #fff; }
.pub-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.20);
}

.pub-nav .dropdown-menu {
    background: #064e3b;
    border: 1px solid rgba(255,255,255,0.14);
}

.pub-nav .dropdown-item {
    color: rgba(255,255,255,0.90);
}

.pub-nav .dropdown-item:hover,
.pub-nav .dropdown-item:focus {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

.pub-nav .navbar-toggler {
    border-color: rgba(255,255,255,0.45);
}

.pub-nav .navbar-toggler-icon {
    filter: invert(1) brightness(1.25);
}

/* Tombol "Masuk": putih di atas hijau supaya tidak menyatu dengan navbar. */
.pub-nav .btn-green {
    background: #fff;
    border-color: #fff;
    color: var(--brand-deep, #064e3b);
}

.pub-nav .btn-green:hover,
.pub-nav .btn-green:focus {
    background: var(--brand-soft, #e7f6f0);
    border-color: var(--brand-soft, #e7f6f0);
    color: var(--brand-deep, #064e3b);
    filter: none;
}

.pub-nav .navbar-collapse .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pub-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    color: #fff;
    overflow: hidden;
}
.pub-hero::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: -1;
    background: url('/static/img/background-masjid.jpeg') center center / cover no-repeat;
    filter: blur(3px) brightness(0.62) saturate(0.9);
}
.pub-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(4, 32, 25, 0.78), rgba(6, 46, 36, 0.86));
}
.pub-hero .hero-inner { max-width: 860px; width: 100%; }
.pub-hero .hero-logo {
    width: 150px;
    display: block;
    margin: 0 auto 1.1rem;
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.pub-hero h1 {
    font-weight: 800;
    font-size: clamp(1.7rem, 5vw, 3.1rem);
    letter-spacing: -0.5px;
    margin-bottom: 1rem;
    text-wrap: balance;
}
.pub-hero .lead {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 640px;
    margin: 0 auto 2rem;
    text-wrap: balance;
}
.pub-hero .text-accent { color: #4ade80; }
/* Badge dipakai di hero beranda DAN semua hero halaman dalam. Sebelumnya
   hanya .pub-hero yang punya aturan, jadi badge di /tentang, /program,
   /program, /kontak, dan /cek-status tampil sebagai teks polos. */
.pub-hero .hero-badge,
.pub-hero-inner .hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(146, 83, 31, 0.9);
    border: 1px solid rgba(255, 220, 170, 0.4);
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffe7c2;
    margin-bottom: 1.1rem;
}
.pub-hero .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    min-height: 48px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.pub-btn-green {
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: var(--shadow-md);
}
.pub-btn-green:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pub-btn-dark {
    background: #fff;
    color: var(--brand-deep);
}
.pub-btn-dark:hover { color: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.pub-section { padding: 4.2rem 1.2rem; }
.pub-section-head { text-align: center; max-width: 720px; margin: 0 auto 2.6rem; }
.pub-section-head .eyebrow,
.eyebrow {
    display: inline-block;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid #a7e8cf;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pub-section-head .eyebrow { margin-bottom: 12px; }
.pub-section-head h2 { font-weight: 800; letter-spacing: -0.4px; text-wrap: balance; }
.pub-section-head p { color: var(--muted); text-wrap: balance; }

.pub-section-alt { background: var(--brand-tint); }

.role-copy h2 { font-weight: 800; margin: 14px 0; letter-spacing: -0.4px; text-wrap: balance; }
.role-copy p { color: var(--muted); margin-bottom: 0; }
@media (min-width: 992px) {
    .role-copy { padding-right: 1.5rem; }
}

.pub-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}
.pub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cbd5e1; }
a.pub-card { color: var(--ink); text-decoration: none; }
.pub-card .pub-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
}

/* Kartu program yang punya foto kegiatan: foto dianggap sebagai pengganti
   ikon, jadi tampil penuh di atas judul. Aspek 16:10 agar baris kartu tetap
   rapi; kalau belum ada foto, kartu kembali ke varian ikon. */
.pub-card.pub-program { padding: 0 0 1.6rem; overflow: hidden; }
.pub-program-foto {
    margin: 0 0 1.2rem;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--brand-soft);
}
.pub-program-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.pub-card.pub-program:hover .pub-program-foto img { transform: scale(1.04); }
.pub-card.pub-program h3,
.pub-card.pub-program p { margin-left: 1.6rem; margin-right: 1.6rem; }

/* Alasan memilih sekolah (section "Kenapa Harus Al Hijrah?"). Satu baris
   horizontal: keempat alasan berjajar side by side di layar lebar. Di tablet
   jadi 2x2, di HP jadi satu kolom.

   TIDAK memakai kotak: tanpa background, border, dan shadow, karena empatnya
   diletakkan berdampingan jadi kotak-kotak kecil terlihat sempit dan ramai.
   Yang muncul cuma ikon + teks, semuanya rata tengah. */
.pub-kenapa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.6rem;
}
.pub-kenapa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.pub-kenapa-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.pub-kenapa-item h3 {
    font-weight: 800;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}
.pub-kenapa-item p {
    color: var(--muted);
    font-size: 20px;
    line-height: 1.65;
    margin-bottom: 0;
}
@media (max-width: 1199.98px) {
    .pub-kenapa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .pub-kenapa { grid-template-columns: minmax(0, 1fr); }
    /* Di HP ruangnya sempit, jadi ukuran dikecilkan lagi supaya baris
       tidak jadi terlalu banyak dan mudah dibaca. */
    .pub-kenapa-ikon { width: 62px; height: 62px; font-size: 1.6rem; }
    .pub-kenapa-item h3,
    .pub-kenapa-item p { font-size: 17px; }
}

/* Daftar program bermodel zig zag: foto dan teks berhadapan, baris berikutnya
   ditukar. Baris ganjil (foto kiri) memakai urutan DOM asli; baris genap diberi
   .pub-zz-rev yang membalik urutan visual lewat order, sehingga urutan baca di
   HTML tetap mengikuti isi program dan tidak ikut terbalik untuk screen reader. */
.pub-zz-list { display: flex; flex-direction: column; gap: 2.6rem; }
.pub-zz-row {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}
/* Baris genap: foto naik ke kanan lewat order, teks turun ke kiri. */
.pub-zz-rev .pub-zz-media { order: 2; }
.pub-zz-rev .pub-zz-copy { order: 1; }
.pub-zz-media {
    flex: 0 0 44%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--brand-soft);
}
.pub-zz-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
    transition: transform 0.35s ease;
}
.pub-zz-row:hover .pub-zz-media img { transform: scale(1.04); }
/* Pengganti foto kalau program belum punya foto di admin. */
.pub-zz-media-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    font-size: 2.6rem;
    color: var(--brand);
}
.pub-zz-copy { flex: 1 1 auto; }
.pub-zz-no {
    display: inline-block;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--brand);
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
}
.pub-zz-copy h3 {
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 0.7rem;
    font-size: 2.1rem;
    text-wrap: balance;
}
.pub-zz-copy p { color: var(--muted); margin-bottom: 0; font-size: 25px; line-height: 1.7; }
@media (max-width: 768px) {
    .pub-zz-row { flex-direction: column; gap: 1.2rem; }
    /* Di layar kecil semua baris jadi foto di atas, teks di bawah. */
    .pub-zz-rev .pub-zz-media,
    .pub-zz-rev .pub-zz-copy { order: 0; }
    .pub-zz-media { flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0 auto; }
    .pub-zz-copy h3 { font-size: 1.5rem; }
    .pub-zz-copy p { font-size: 1.1rem; }
}

/* Foto gedung di samping kanan section Profil Singkat (/tentang). Bentuk 4:3
   dan object-fit cover supaya kolomnya rapi untuk foto gedung landscape. */
.pub-profil-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
@media (max-width: 991.98px) {
    .pub-profil-foto { max-width: 520px; margin: 0 auto; }
}

/* Galeri foto kegiatan per jenjang (KB/TK/SD/SMP) */
.pub-gal-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pub-gal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pub-gal-pill:hover { border-color: var(--brand); color: var(--brand); }
.pub-gal-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.pub-galeri-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
}
.pub-galeri-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cbd5e1; }
.pub-galeri-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--brand-soft);
}
.pub-galeri-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.pub-galeri-card:hover .pub-galeri-foto img { transform: scale(1.04); }
.pub-galeri-isi { padding: 1.2rem 1.3rem 1.4rem; }
.pub-galeri-isi h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
.pub-galeri-isi p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
.pub-gal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 999px;
}
.pub-section-head a { color: var(--brand); text-decoration: underline; }
.pub-section-head a:hover { color: var(--brand-dark, #064e3b); }

/* Bagian "Kegiatan Terbaru" di beranda: satu deret foto (2 per jenjang) terpusat. */
.pub-galeri-home-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.pub-galeri-home-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 240px;
}
.pub-galeri-home-item:hover { color: inherit; }
.pub-galeri-home-foto {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--brand-soft);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.pub-galeri-home-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}
.pub-galeri-home-item:hover .pub-galeri-home-foto img { transform: scale(1.06); }
.pub-galeri-home-ket {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.pub-galeri-home-ket strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pub-galeri-home-ket small { color: var(--muted); font-size: 0.8rem; }
.pub-galeri-kosong {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 600;
    padding: 2rem 0;
}
.pub-galeri-kosong i { font-size: 2rem; opacity: 0.5; }

.pub-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
.pub-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin-bottom: 0; }

.pub-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.2rem;
}
.pub-panel h2 { font-weight: 800; letter-spacing: -0.4px; }
.pub-panel h4 { font-weight: 700; font-size: 1.05rem; }
.pub-panel p, .pub-panel li { color: var(--muted); font-size: 0.95rem; }

.pub-feature-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
    .pub-feature-row:hover { box-shadow: var(--shadow-sm); border-color: #cbd5e1; transform: translateY(-2px); }
}
.pub-feature-row .pub-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.15rem;
}
.pub-feature-row h5 { font-weight: 700; margin-bottom: 2px; }
.pub-feature-row p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0; }

.pub-cta-band {
    background: linear-gradient(120deg, var(--brand-deep), var(--brand));
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 3rem 2.4rem;
    text-align: center;
}
.pub-cta-band h3 { font-weight: 800; text-wrap: balance; }
.pub-cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0 auto 1.6rem; text-wrap: balance; }

/* Panel ajakan: teks di kiri, tombol di kanan */
.pub-cta-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.2rem;
}
.pub-cta-panel h2 {
    font-weight: 800;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    letter-spacing: -0.4px;
}
.pub-cta-panel p { color: var(--muted); }
@media (max-width: 991.98px) {
    .pub-cta-panel { padding: 1.7rem; }
}

/* Aksen gerak halus saat halaman dibuka */
@keyframes pubFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.pub-card,
.pub-feature-row,
.pub-cta-band,
.role-copy { animation: pubFadeUp 0.45s ease; }

/* =========================================================
   PLACEHOLDER PROFIL
   Tandai konten yang belum diisi dengan data resmi yayasan.
   Bergaris putus-putus oranye agar tidak lolos ke produksi
   tanpa disadari. Hapus class "pub-ph" setelah teks diganti.
   ========================================================= */
.pub-ph {
    background: repeating-linear-gradient(
        135deg,
        rgba(217, 119, 6, 0.10) 0 8px,
        rgba(217, 119, 6, 0.04) 8px 16px
    );
    outline: 1px dashed var(--warning);
    outline-offset: 2px;
    border-radius: 6px;
    padding: 1px 7px;
    color: var(--warning);
    font-weight: 600;
}

/* Hero ringkas untuk halaman dalam (bukan beranda) */
.pub-hero-inner {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.6rem 1.5rem;
    color: #fff;
    overflow: hidden;
}
.pub-hero-inner::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: -1;
    background: url('/static/img/background-gedung.jpeg') center center / cover no-repeat;
    filter: blur(3px) brightness(0.6) saturate(0.9);
}
.pub-hero-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(4, 32, 25, 0.8), rgba(6, 46, 36, 0.88));
}
.pub-hero-inner .hero-inner { max-width: 760px; width: 100%; }
.pub-hero-inner h1 {
    font-weight: 800;
    font-size: clamp(1.5rem, 4.2vw, 2.5rem);
    letter-spacing: -0.4px;
    margin-bottom: 0.6rem;
    text-wrap: balance;
}
.pub-hero-inner p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
    text-wrap: balance;
}

/* Statistik ringkas */
.pub-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
.pub-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.7rem 1.1rem;
    text-align: center;
    height: 100%;
}
.pub-stat-angka {
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    line-height: 1.1;
    color: var(--brand);
    letter-spacing: -0.5px;
    margin-bottom: 0.35rem;
}
.pub-stat-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sejarah / timeline */
.pub-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.pub-timeline::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--line);
}
.pub-timeline > li {
    position: relative;
    padding: 0 0 1.9rem 4px;
}
.pub-timeline > li:last-child { padding-bottom: 0; }
.pub-timeline-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 96px;
    padding: 5px 14px;
    margin-bottom: 0.7rem;
    background: var(--brand);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.84rem;
    box-shadow: var(--shadow-sm);
}
.pub-timeline-badge .pub-ph {
    background: rgba(255, 255, 255, 0.18);
    outline-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}
.pub-timeline-body h5 { font-weight: 700; margin-bottom: 4px; }
.pub-timeline-body p {
    color: var(--muted);
    font-size: 0.93rem;
    margin-bottom: 0;
}

/* Struktur organisasi */
.pub-org {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}
.pub-org-kartu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.8rem 1.3rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pub-org-foto {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.pub-org-kartu h5 { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.pub-org-jabatan {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

/* Langkah pendaftaran. Dipakai HANYA oleh /pendaftaran (makro
   blok_langkah_pendaftaran), jadi bebas diubah.
   Jumlah kolom ditentukan template lewat data-jml supaya baris terakhir
   tidak pernah tersusun rongsok: 2 kolom di tablet, 3 di laptop, dan di
   layar lebar jumlah kolom disamakan dengan jumlah langkah (atau pembagi
   yang paling rata) sehingga tiap baris penuh. */
.pub-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    grid-auto-rows: 1fr;
    counter-reset: pub-step;
}
@media (min-width: 992px) {
    .pub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .pub-steps[data-jml="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pub-steps[data-jml="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pub-steps[data-jml="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pub-steps[data-jml="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* 6 langkah tetap 3 kolom: dua baris sama-sama penuh, bukan 4+2. */
    .pub-steps[data-jml="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pub-step {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.7rem 1.4rem 1.4rem;
    height: 100%;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
    .pub-step:hover { box-shadow: var(--shadow-md); border-color: #c7ded6; transform: translateY(-2px); }
}
.pub-step-nomor {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, var(--brand), var(--brand-2));
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--shadow-sm);
}
.pub-step h5 { font-weight: 700; margin-bottom: 6px; }
/* Dorong paragraf ke bawah supaya judul tetap rata antar kartu. */
.pub-step p {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* Daftar periksa syarat (juga hanya dipakai /pendaftaran) */
.pub-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.6rem;
}
.pub-checklist li {
    position: relative;
    padding-left: 2.1rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
.pub-checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.72rem;
}
@media (max-width: 767.98px) {
    .pub-checklist { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- */
/* Halaman /pendaftaran - layout khusus halaman ini                 */
/* ---------------------------------------------------------------- */
/* Hero sedikit lebih pendek dari hero halaman dalam lain, dengan
   ruang bawah ekstra supaya strip ringkasan di bawahnya bisa
   menindih batas hero tanpa menimpa teks. */
.pub-hero-daftar { min-height: 42vh; padding: 3.2rem 1.5rem 4.4rem; }

/* Section pembungkus strip ringkasan. Padding atasnya sengaja kecil:
   strip memakai margin-top negatif, jadi padding + margin =
   1.6rem - 2.8rem = -1.2rem, artinya strip menindih hero 1.2rem. */
.pub-section-daftar { padding: 1.6rem 1.2rem 0; }

/* Strip ringkasan yang tonjolok melewati batas bawah hero. Diletakkan
   sebagai saudara (bukan anak) .pub-hero-inner supaya tidak ikut terpotong
   oleh overflow:hidden milik hero. */
.pub-daftar-info {
    position: relative;
    z-index: 2;
    margin-top: -2.8rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.pub-daftar-info-item {
    background: var(--surface);
    padding: 1.15rem 1.2rem;
    text-align: center;
}
.pub-daftar-info-item i {
    display: block;
    color: var(--brand);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}
.pub-daftar-info-item strong {
    display: block;
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--ink);
}
.pub-daftar-info-item span {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--muted);
}

/* Pemberitahuan "pendaftaran ditutup" di halaman /pendaftaran.
   Muncul hanya saat sakelar admin dimatikan (lihat routes/utama.py).
   Alurnya normal, bukan menindih hero seperti .pub-daftar-info. */
.pub-alert {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 5px solid var(--brand);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.3rem;
}
.pub-alert i {
    color: #c2410c;
    font-size: 1.2rem;
    margin-top: 0.15rem;
}
.pub-alert strong { display: block; font-weight: 800; color: var(--ink); }
.pub-alert p {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--muted);
}

/* Tiga kartu "setelah Anda kirim" */
.pub-pasca {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}
.pub-pasca-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.4rem;
    height: 100%;
}
.pub-pasca-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}
.pub-pasca-item h3 {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}
.pub-pasca-item p {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* Kartu pilihan jenjang (KB/TK/SD/SMP) di /pendaftaran.
   Dua kolom: dua kotak di atas, dua di bawah. Empat kolom sekali jalan
   bikin setiap kotak terlalu sempit untuk tombol Daftar di dalamnya.
   Tombolnya full width dan menempel di dasar kotak (margin-top:auto lewat
   p yang flex:1) supaya selalu sejajar antar kotak. */
.pub-jenjang {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    max-width: 760px;
    margin: 0 auto;
}
.pub-jenjang-item {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem 1.5rem 1.4rem;
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pub-jenjang-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-soft);
}
.pub-jenjang-kepala {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.8rem;
}
.pub-jenjang-item h3 {
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0;
    line-height: 1.25;
}
.pub-jenjang-item h3 span {
    display: block;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 3px;
}
.pub-jenjang-item p {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex: 1;
}
.pub-jenjang-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.3rem;
}

/* Catatan singkat di bawah daftar berkas */
.pub-daftar-catatan {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.3rem;
    padding: 0.9rem 1.05rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--brand-deep);
}
.pub-daftar-catatan i { color: var(--brand); margin-top: 2px; }
.pub-daftar-catatan p { margin: 0; }

/* Baris lokasi & jam di bawah panel ajakan. Dulu ditulis inline
   style="color:var(--muted)", sekarang kelas supaya bisa diatur
   dari satu tempat. */
.pub-info-baris {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.8rem;
    margin: 1.4rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}
.pub-info-baris span { display: inline-flex; align-items: center; gap: 0.45rem; }
.pub-info-baris i { color: var(--brand); }
.pub-info-baris a { color: var(--muted); }
.pub-info-baris a:hover { color: var(--brand-dark); }

@media (max-width: 991.98px) {
    .pub-section-daftar { padding: 0.8rem 1rem 0; }
    .pub-daftar-info { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -2rem; }
    .pub-pasca { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .pub-section-daftar { padding: 0.4rem 0.75rem 0; }
    .pub-daftar-info { grid-template-columns: minmax(0, 1fr); margin-top: -1.2rem; }
    .pub-daftar-info-item { display: flex; align-items: center; gap: 0.8rem; text-align: left; padding: 0.9rem 1.1rem; }
    .pub-daftar-info-item i { margin-bottom: 0; }
    .pub-jenjang { grid-template-columns: minmax(0, 1fr); }
    .pub-info-baris { flex-direction: column; align-items: center; }
}

/* ---------------------------------------------------------------- */
/* Formulir pendaftaran online                                        */
/* ---------------------------------------------------------------- */
/* honeypot: harus di luar layar (bukan display:none/visibility:hidden)
   supaya bot yang memeriksa DOM tetap melihat dan mengisinya, sementara
   orang tua tidak pernah melihatnya. */
.pub-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pub-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    max-width: 880px;
    margin: 0 auto;
}
.pub-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}
.pub-form .form-control,
.pub-form .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--line);
}
.pub-form .form-control:focus,
.pub-form .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 157, 118, 0.12);
}
.pub-form-bagian {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
    margin: 1.75rem 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}
.pub-form-bagian:first-of-type { margin-top: 0; }
.pub-form-catatan {
    font-size: 0.88rem;
    color: var(--muted);
    margin-bottom: 0.9rem;
}

/* =========================================================
   FORMULIR PENDAFTARAN BERTAPAK (/pendaftaran/formulir)
   ========================================================= */

/* Panel sukses kirim */
.pub-sukses { text-align: center; padding: 2.4rem 2rem; }
.pub-sukses-ikon {
    width: 74px;
    height: 74px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 2.2rem;
}
.pub-sukses h2 { font-weight: 800; letter-spacing: -0.4px; margin-bottom: 0.4rem; }
.pub-sukses > p { color: var(--muted); max-width: 520px; margin: 0 auto 1.6rem; }
.pub-sukses-ringkas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.6rem;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 1.8rem;
}
.pub-sukses-ringkas i { color: var(--brand); margin-right: 0.3rem; }
.pub-kode-kotak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    background: var(--brand-tint);
    border: 1.5px dashed var(--brand);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1.6rem;
}
.pub-kode-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-deep);
}
.pub-kode-nilai {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand-deep);
    overflow-wrap: anywhere;
}
.pub-sukses-langkah {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.7rem;
}
.pub-sukses-next {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
    padding-left: 1.2rem;
}

/* Hero ringkas: halaman formulir tidak butuh hero setinggi halaman informasi */
.pub-hero-kecil {
    min-height: auto;
    padding: 2.6rem 1.5rem 2.2rem;
}
.pub-hero-kecil h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.pub-hero-kecil p { font-size: 0.98rem; }

.pub-section-form { padding: 2.4rem 1.2rem 3.4rem; }
.pub-form-kolom {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

/* Peta langkah di sisi kiri */
.pub-peta {
    position: sticky;
    top: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.3rem;
}
.pub-peta-judul {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 1rem;
}
.pub-peta-daftar { list-style: none; margin: 0; padding: 0; }
.pub-peta-daftar li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.6rem;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.92rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pub-peta-daftar li + li { margin-top: 0.15rem; }
.pub-peta-daftar li strong { display: block; font-size: 0.93rem; color: inherit; }
.pub-peta-daftar li small { display: block; font-size: 0.78rem; color: var(--muted); }
.pub-peta-daftar li.aktif { background: var(--brand-tint); color: var(--brand-deep); }
.pub-peta-daftar li.aktif strong { color: var(--brand-deep); }
/* --text tidak pernah dideklarasikan di design system, jadi nilai ini
   sebelumnya dibuang diam-diam oleh browser. Pakai --ink. */
.pub-peta-daftar li.selesai { color: var(--ink); }
.pub-peta-nomor {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
}
.pub-peta-daftar li.aktif .pub-peta-nomor {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pub-peta-daftar li.selesai .pub-peta-nomor {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand);
}
.pub-peta-bantuan {
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
}
.pub-peta-bantuan h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.35rem; }
.pub-peta-bantuan p { color: var(--muted); margin-bottom: 0.5rem; }

.pub-form-utama { min-width: 0; }

/* Kepala wizard: judul + progres */
.pub-wizard-kepala { margin-bottom: 1.6rem; }
.pub-wizard-kepala h2 {
    font-weight: 800;
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    letter-spacing: -0.3px;
    margin-bottom: 0.15rem;
}
.pub-wizard-kepala p { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.85rem; }
.pub-wizard-progres {
    height: 7px;
    border-radius: 99px;
    background: var(--brand-soft);
    overflow: hidden;
}
.pub-wizard-progres-isi {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 99px;
    background: var(--brand);
    transition: width 0.3s ease;
}
.pub-wizard-persen {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.4rem 0 0;
    text-align: right;
}

/* Tanpa JS semua langkah tetap terlihat, jadi form tetap bisa dikirim.
   .pub-js baru ditambahkan oleh script formulir.js, sesudah browser siap. */
.pub-js .pub-step-pane[hidden] { display: none; }

.pub-form-bagian-nomor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    vertical-align: 2px;
}
.pub-label-opsional {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Tips di tiap langkah */
.pub-tip {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    background: var(--brand-tint);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.1rem;
}
.pub-tip i { color: var(--brand); margin-top: 2px; }
.pub-tip p {
    margin: 0;
    font-size: 0.87rem;
    color: var(--brand-deep);
    line-height: 1.5;
}

/* Ringkasan galat di atas form */
.pub-galat-ringkas {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 5px solid #dc2626;
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.2rem;
}
.pub-galat-ringkas h4 { color: #991b1b; font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.pub-galat-ringkas ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.pub-galat-ringkas li { color: #7f1d1d; font-size: 0.9rem; line-height: 1.55; }
.pub-galat-ringkas p { font-size: 0.85rem; color: #7f1d1d; opacity: 0.85; }

/* Unggah berkas: kotak kustom, input asli tetap bisa difokus & divalidasi */
.pub-unggah-daftar { display: grid; gap: 0.9rem; }
.pub-unggah-item { position: relative; }
.pub-unggah-kotak {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pub-unggah-kotak:hover { border-color: var(--brand); background: var(--brand-tint); }
.pub-unggah-kotak:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 157, 118, 0.12); }
.pub-unggah-item.terisi .pub-unggah-kotak {
    border-style: solid;
    border-color: var(--brand);
    background: var(--brand-tint);
}
/* Input asli disembunyikan secara visual saja (bukan display:none) supaya
   tetap bisa diklik, difokus, dan divalidasi oleh browser. */
.pub-unggah-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.pub-unggah-ikon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.15rem;
    pointer-events: none;
}
.pub-unggah-item.terisi .pub-unggah-ikon { background: var(--brand); color: #fff; }
.pub-unggah-teks { min-width: 0; pointer-events: none; }
.pub-unggah-nama {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
}
.pub-unggah-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--muted);
}
.pub-unggah-status { overflow-wrap: anywhere; }
.pub-unggah-item.terisi .pub-unggah-status { color: var(--brand-deep); font-weight: 600; }
.pub-unggah-wajib {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 99px;
    padding: 2px 8px;
}
.pub-wajib { background: #fee2e2; color: #b91c1c; }
.pub-opsional { background: #f1f5f9; color: #64748b; }
.pub-unggah-keterangan { padding-left: 0.15rem; margin-top: 0.3rem; }

/* Ringkasan konfirmasi */
.pub-review {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.9rem;
}
.pub-review-baris {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
}
.pub-review-baris + .pub-review-baris { border-top: 1px solid var(--line); }
.pub-review-baris:nth-child(odd) { background: var(--brand-tint); }
.pub-review-baris span { color: var(--muted); }
.pub-review-baris strong { text-align: right; overflow-wrap: anywhere; }
.pub-review-hint { font-size: 0.84rem; color: var(--muted); margin-bottom: 1.2rem; }

.pub-setuju {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    font-size: 0.9rem;
}
.pub-setuju .form-check-input { flex-shrink: 0; margin-top: 3px; width: 1.15rem; height: 1.15rem; }
.pub-setuju .form-check-label { color: var(--muted); line-height: 1.55; }

/* Tombol Kembali / Lanjut */
.pub-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.8rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}
.pub-btn-plain { background: none; border: none; color: var(--muted); padding: 0; }
.pub-btn-plain:hover { color: var(--brand); }

/* Tombol Bigger untuk CTA utama */
.pub-btn-lg { padding: 0.9rem 1.6rem; font-size: 1rem; }
.pub-btn-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 1.6rem;
}
.hero-hint {
    margin: 1rem 0 0 !important;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.72) !important;
}
.pub-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
}
.pub-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ================= POPUP GAMBAR BERANDA =================
   Modal promo yang muncul sekali per pengunjung. Markup ada di
   templates/beranda.html, perilaku "sekali" ada di static/js/popup-beranda.js.
   */
#popupBeranda .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(6, 78, 59, 0.28);
}
.popup-beranda-dialog {
    max-width: none;
    width: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-beranda-kartu {
    background: #fff;
    width: auto;
    max-width: min(98vw, 1600px);
    display: inline-block;
    margin: auto;
}
.popup-beranda-gambar {
    display: block;
    width: auto;
    height: auto;
    max-width: min(96vw, 1600px);
    max-height: 96vh;
    object-fit: contain;
    background: var(--brand-tint, #f1f6f3);
}
.popup-beranda-tutup {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.popup-beranda-tutup:focus-visible {
    outline: 3px solid var(--brand, #0f9d76);
    outline-offset: 2px;
}
.popup-beranda-teks { padding: 1.25rem 1.4rem 0.35rem; }
.popup-beranda-judul {
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ink, #10261f);
    margin-bottom: 0.4rem;
}
.popup-beranda-pesan { color: var(--muted, #5b6b66); font-size: 0.95rem; }
.popup-beranda-kaki { padding: 0.9rem 1.4rem 1.4rem; }
.popup-beranda-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: var(--brand, #0f9d76);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.popup-beranda-tombol:hover {
    color: #fff;
    background: var(--brand-dark, #0b7a5c);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.popup-beranda-tombol:focus-visible {
    outline: 3px solid var(--brand, #0f9d76);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .popup-beranda-gambar { max-height: 55vh; }
    .popup-beranda-teks { padding: 1rem 1.1rem 0.2rem; }
    .popup-beranda-kaki { padding: 0.8rem 1.1rem 1.2rem; }
}

@media (max-width: 991.98px) {
    .pub-form-kolom { grid-template-columns: minmax(0, 1fr); }
    .pub-peta { position: static; }
    .pub-peta-daftar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
    .pub-peta-daftar li { padding: 0.5rem; }
    .pub-peta-daftar li + li { margin-top: 0; }
    .pub-peta-daftar li small { display: none; }
}

@media (max-width: 767.98px) {
    .pub-section-form { padding: 1.6rem 1rem 2.6rem; }
    .pub-peta { padding: 1.1rem 1rem; }
    .pub-peta-bantuan { display: none; }
    .pub-peta-daftar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pub-peta-daftar li { flex-direction: column; gap: 0.3rem; text-align: center; font-size: 0.72rem; }
    .pub-form { padding: 1.25rem 1.1rem; }
    .pub-sukses { padding: 1.6rem 1.1rem; }
    .pub-wizard-nav { flex-direction: column-reverse; align-items: stretch; }
    .pub-wizard-nav .pub-btn { width: 100%; }
    .pub-wizard-nav .pub-btn-plain { width: auto; align-self: center; }
    .hero-actions { flex-direction: column; }
    .hero-actions .pub-btn { width: 100%; }
    .pub-review-baris strong { text-align: left; }
}


/* Status di /cek-status */
.pub-status-baru,
.pub-status-diproses,
.pub-status-diterima,
.pub-status-ditolak {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.08rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.1rem;
}
.pub-status-baru { background: var(--info-bg, #eef2ff); color: #3730a3; }
.pub-status-diproses { background: #fff7ed; color: #9a3412; }
.pub-status-diterima { background: var(--brand-soft); color: var(--brand-deep); }
.pub-status-ditolak { background: #fef2f2; color: #991b1b; }

.pub-status-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.pub-status-tabel th,
.pub-status-tabel td {
    text-align: left;
    padding: 0.55rem 0.2rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.pub-status-tabel th {
    color: var(--muted);
    font-weight: 600;
    width: 38%;
}

/* Section video di beranda: satu video per baris, lebar penuh agar jelas. */
.pub-video-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.pub-video-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.pub-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
}
.pub-video-player iframe,
.pub-video-player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pub-video-ket { padding: 1.2rem 1.4rem 1.4rem; }
.pub-video-ket h3 {
    font-size: 1.08rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.pub-video-ket p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0; }

/* Slider berita di beranda (section di atas Kegiatan Terbaru).
   Track-nya flex horizontal dengan scroll-snap supaya "nempel" per kartu:
  /swipe jari di HP, scroll wheel/trackpad, dan tombol panah ber interacted sama.
   Tombol panah positioned absolute di tengah tinggi, melayang di atas kartu
   supaya tidak menambah tinggi section di HP. */
.pub-berita { position: relative; }
.pub-berita-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0 1.1rem;
    cursor: grab;
}
.pub-berita-track::-webkit-scrollbar { display: none; }
.pub-berita-track:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
    border-radius: var(--radius);
}
/* Saat sedang didrag mouse, cursor jadi grabbing dan snap dimatikan sebentar
   supaya kartu tidak "lompat" mengikuti cursor sebelum pointer dilepas. */
.pub-berita-track.pub-berita-drag {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.pub-berita-kartu {
    flex: 0 0 auto;
    /*-basis: 3 kartu di desktop, 2 di tablet, 1 di HP. 85% menyisakan
      sedikit kartu berikutnya supaya jelas masih bisa digeser. */
    width: min(340px, 85%);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pub-berita-kartu:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.pub-berita-foto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--brand-soft);
    overflow: hidden;
}
.pub-berita-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.pub-berita-kartu:hover .pub-berita-foto img { transform: scale(1.05); }
.pub-berita-foto-kosong {
    /* Berada di dalam <a class="pub-berita-foto"> yang sudah memakai
       aspect-ratio, jadi harus ikut mengisi tinggi kotak itu; kalau tidak,
       ikonnya cuma menempel di baris pertama dan kotak 16:10 kelihatan kosong. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.4rem;
    color: var(--brand);
    opacity: 0.45;
}
.pub-berita-isi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1.05rem 1.15rem 1.25rem;
    flex: 1;
}
.pub-berita-isi h3 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    /* Judul maksimal tiga baris supaya tinggi kartu antar berita seragam. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pub-berita-isi p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pub-berita-detail {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--brand);
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
}
.pub-berita-detail:hover { text-decoration: underline; }
.pub-berita-detail i { font-size: 0.7rem; }

.pub-berita-nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--brand-dark, #064e3b);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pub-berita-nav:hover { background: var(--brand); color: #fff; }
.pub-berita-nav-prev { left: -14px; }
.pub-berita-nav-next { right: -14px; }
.pub-berita-nav:disabled { opacity: 0.35; cursor: default; }

/* Titik indikator posisi slider. Dibuat JS dari jumlah kartu yang terlihat. */
.pub-berita-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.4rem;
}
.pub-berita-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: var(--line);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.pub-berita-dots button.pub-berita-dot-aktif {
    width: 26px;
    border-radius: 999px;
    background: var(--brand);
}

/* Halaman detail berita (/berita/<id>). */
.pub-berita-foto-besar {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin: 1rem 0;
    display: block;
}
.pub-berita-isi-besar p {
    color: #334155;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    white-space: pre-line;
}

@media (min-width: 768px) {
    .pub-berita-kartu { width: min(320px, 46%); }
}
@media (min-width: 992px) {
    .pub-berita-kartu { width: 31%; }
    /* Di desktop kartuBERTIGA jadi sempit, panah digeser sedikit ke dalam
       supaya tidak menindih kartu pertama. */
    .pub-berita-nav-prev { left: -6px; }
    .pub-berita-nav-next { right: -6px; }
}
@media (max-width: 575.98px) {
    /* Satu kartu per layar di HP: panah disembunyikan karena swipe + titik
       indikator sudah cukup, dan tombol 42px bisa menutupi kartu. */
    .pub-berita-nav { display: none; }
    .pub-berita-kartu { width: 86%; }
}

/* Deskripsi singkat di bawah video: satu kolom di tengah halaman.
   flex column + align-items:center membuat judul, paragraf, dan tombol
   menumpuk vertikal dan semuanya sejajar di tengah. Lebar paragraf dibatasi
   supaya tetap enak dibaca di layar lebar. */
.pub-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 1.25rem;
    text-align: center;
    background: var(--brand-tint);
    border-radius: var(--radius-lg);
}
.pub-about h2 {
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 1rem;
    text-wrap: balance;
}
.pub-about p {
    max-width: 700px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--muted);
}
/* Teks dibuat lebih besar dari ukuran body supaya mudah dibaca sebagai
   kalimat pengantar, bukan sekadar paragraf kecil di antara dua section. */
.pub-about .pub-about-lead {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.7;
}
@media (max-width: 576px) {
    .pub-about .pub-about-lead { font-size: 1.12rem; }
}
/* Tombol kuning seperti contoh; memakai kelas sendiri supaya tidak menimpa
   .pub-btn-dark yang dipakai bagian halaman lain. */
.pub-about .pub-about-tbl {
    background: #ffc107;
    color: #000;
    padding: 12px 30px;
    font-weight: 700;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pub-about .pub-about-tbl:hover {
    background: #e0a800;
    color: #000;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Kartu kontak */
.pub-contact-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.6rem;
    height: 100%;
}
.pub-contact-card h5 { font-weight: 700; margin-bottom: 0.5rem; }
.pub-contact-card .pub-contact-nilai {
    color: var(--ink);
    font-size: 0.95rem;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}
.pub-contact-card .pub-contact-keterangan {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

/* Sosial media */
.pub-sosmed {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.pub-sosmed-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    min-height: 44px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50px;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.pub-sosmed-item:hover {
    color: var(--brand);
    border-color: var(--brand);
    text-decoration: none;
}

/* Tombol yang dinonaktifkan (mis. WhatsApp belum diisi) */
.pub-btn-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}
.pub-btn-disabled:hover { transform: none; box-shadow: none; color: #fff; }

.pub-footer {
    background: linear-gradient(180deg, var(--brand-ink), #031a13);
    color: #a7f3d0;
    padding: 3rem 1.2rem 1.6rem;
}
.pub-footer .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 0.8rem;
}
.pub-footer .brand img { width: 40px; border-radius: 10px; }
.pub-footer h6 { color: #fff; font-weight: 700; }
.pub-footer ul { list-style: none; padding: 0; margin: 0; }
.pub-footer ul li { margin-bottom: 4px; }
.pub-footer ul li a { display: inline-flex; align-items: center; padding: 6px 8px; margin: 0 -8px; min-height: 36px; border-radius: 8px; }
.pub-footer a { color: #a7f3d0; text-decoration: none; }
.pub-footer a:hover { color: #fff; text-decoration: none; }
.pub-footer ul li a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: underline; }
.pub-footer .bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2rem;
    padding-top: 1.2rem;
    font-size: 0.82rem;
    color: rgba(167, 243, 208, 0.7);
}

.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.contact-item .pub-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.1rem;
}
.contact-item h5 { font-weight: 700; margin-bottom: 2px; font-size: 1rem; }
.contact-item p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0; }

@media (max-width: 991.98px) {
    .pub-nav .navbar-collapse {
        background: #064e3b;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        padding: 0.75rem 1rem;
        margin: 0.75rem -0.5rem 0;
    }
    .pub-nav .navbar-collapse .d-flex { padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.16); }
    .pub-nav .navbar-collapse .btn { width: 100%; justify-content: center; }
    .pub-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .pub-hero { min-height: auto; padding: 3.8rem 1.2rem 3.2rem; }
    .pub-hero-inner { min-height: auto; padding: 3rem 1.2rem 2.6rem; }
    .pub-section { padding: 3rem 1rem; }
    .pub-panel { padding: 1.6rem; }
    .pub-cta-band { padding: 2.4rem 1.4rem; }
    .pub-cta-band .pub-btn { width: 100%; }
    .pub-card { padding: 1.35rem; }
    .pub-card .pub-icon { width: 50px; height: 50px; font-size: 1.25rem; }
    .pub-hero .hero-cta .pub-btn { width: 100%; }
    .contact-item { gap: 12px; }
    .pub-timeline::before { left: 13px; }
    .pub-step { padding: 1.5rem 1.2rem 1.2rem; }
    .pub-stat { padding: 1.35rem 0.8rem; }
}

@media (max-width: 575.98px) {
    .pub-hero .hero-logo { width: 112px; }
    .pub-hero .hero-badge,
    .pub-hero-inner .hero-badge { font-size: 0.78rem; padding: 7px 13px; }
    .pub-section-head { margin-bottom: 2rem; }
    .pub-footer { padding: 2.4rem 1.1rem 1.2rem; }
    .pub-footer .bottom-bar { gap: 10px; justify-content: center; text-align: center; }
    .pub-stat-grid { grid-template-columns: 1fr; gap: 0.9rem; }
    .pub-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: 1.1rem 1.3rem;
    }
    .pub-stat-angka { margin-bottom: 0; font-size: 1.7rem; }
    .pub-timeline-badge { min-width: 84px; font-size: 0.8rem; }
    .pub-sosmed-item { flex: 1 1 100%; justify-content: center; }
}