/* ==========================================================================
   WEB MYPESANTREN - CUSTOM STYLES (Blog, Admin Login & Dashboard Layouts)
   ========================================================================== */

/* 1. PUBLIC BLOG PAGES STYLES */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.blog-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.blog-card.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-glass));
}

.blog-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.06);
}

.blog-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.blog-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.blog-card-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.blog-card-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.blog-card-content h3 a:hover {
    color: var(--primary);
}

.blog-card-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more-link {
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--transition-fast);
}

.read-more-link:hover {
    transform: translateX(4px);
    color: var(--primary-dark);
}

/* 2. SINGLE BLOG DETAIL VIEW */
.blog-detail-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 140px 24px 80px 24px;
}

.blog-detail-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-detail-header h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.blog-banner {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 48px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.blog-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-detail-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.blog-detail-content p {
    margin-bottom: 24px;
}

.blog-detail-content h2, .blog-detail-content h3 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-top: 40px;
    margin-bottom: 16px;
}

/* 3. ADMIN LOGIN VIEW */
.admin-login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-base);
    font-family: var(--font-body);
}

.admin-login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.admin-login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.admin-login-logo img {
    height: 48px;
    margin-bottom: 12px;
}

.admin-login-logo h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-primary);
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.btn-block {
    display: block;
    width: 100%;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 24px;
    text-align: center;
}

/*
 * 4. LENCANA STATUS
 *
 * Kerangka dasbor pengelola — menu kiri, bilah atas, kartu angka — ada di
 * bagian "KERANGKA PENGELOLA" di bawah, satu tempat bersama gaya /admin
 * lainnya. Yang tersisa di sini hanya lencana, karena dipakai juga oleh
 * tabel simulasi di beranda (views/index.ejs).
 */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-warning {
    background-color: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ==========================================================================
   REMAH NAVIGASI
   Pasangan terlihat dari BreadcrumbList JSON-LD. Google menganjurkan skema
   breadcrumb mencerminkan navigasi yang benar-benar ada di halaman.
   ========================================================================== */
.breadcrumb {
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Judul artikel bisa panjang; biarkan memotong baris, jangan meluber. */
    min-width: 0;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--text-muted);
}

.breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ==========================================================================
   HALAMAN PENGELOLA (/login dan /admin)
   Sengaja berdiri sendiri, tanpa header dan footer situs — footer memuat
   widget obrolan pihak ketiga, dan skrip luar tidak perlu ikut dimuat di
   halaman yang menerima sandi.
   ========================================================================== */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg-base);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 22px;
}

.login-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
}

.login-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.login-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 22px;
    line-height: 1.55;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #b91c1c;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 18px;
}

.login-form .form-group { margin-bottom: 16px; }

.login-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/*
 * Kotak isian teks. Sengaja menyaring JENIS-nya satu per satu, bukan `input`
 * polos: kotak centang, tombol radio, dan pemilih berkas punya gayanya
 * sendiri, dan `width: 100%` pada sebuah kotak centang membuatnya melar
 * selebar barisnya.
 *
 * `.admin-isi` ikut disebut supaya isian di halaman pengelola tidak menuntut
 * formulirnya ingat memakai kelas `.login-form` — lupa satu kali sudah cukup
 * untuk menjatuhkannya ke tampilan bawaan peramban, dan itu baru kelihatan
 * di tema gelap.
 */
.login-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.admin-isi input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.login-form input:focus-visible,
.admin-isi input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

/*
 * Pemilih tanggal dan waktu. Ikon kalender bawaannya diwarnai peramban, bukan
 * halaman — di tema gelap ia hitam di atas latar gelap dan nyaris tidak
 * terlihat. `invert` membalikkannya jadi terang.
 */
body.dark .admin-isi input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.7);
}

/* ==========================================================================
   KERANGKA PENGELOLA — menu kiri yang menyesuaikan lebar layar
   ==========================================================================

   Satu kerangka dipakai semua halaman /admin lewat views/partials/admin-buka
   dan admin-tutup. Sebelumnya tiap halaman menaruh tautannya sendiri di pojok
   kanan atas, jadi "di mana saya sekarang" dan "ke mana lagi saya bisa pergi"
   tidak pernah terjawab di layar mana pun.

   Dua bentuk, satu titik potong di 1024px:
   - lebar  : menu menetap di kiri, isi bergeser 264px.
   - sempit : menu keluar dari layar, dipanggil tombol di bilah atas sebagai
              laci yang menutupi isi. Ini alasan menu dibangun dengan
              `transform`, bukan `display: none` — elemen yang dihapus dari
              alur tidak bisa dianimasikan dan tidak bisa dijangkau pembaca
              layar saat dibuka.

   Keadaan buka disimpan sebagai kelas di <body> (`admin-menu-buka`) supaya
   menu, tirai, dan kunci gulir bereaksi pada satu sumber yang sama. Lihat
   public/js/admin.js. */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background: var(--bg-base);
}

/* Tautan lompat: yang menjelajah dengan papan tik tidak perlu menyusuri
   seluruh menu kiri di tiap halaman sebelum sampai ke isi. Tersembunyi
   sampai ia menerima fokus. */
.admin-lewati {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.88rem;
}
.admin-lewati:focus {
    left: 12px;
    top: 12px;
}

/* ── Menu kiri ───────────────────────────────────────────────────────────── */
.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.admin-brand img {
    height: 34px;
    width: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 2px;
    flex-shrink: 0;
}
.admin-brand b {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.25;
    display: block;
}
.admin-brand small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 12px;
    flex-grow: 1;
}

.admin-nav-judul {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 12px 4px;
}
.admin-nav-judul:first-child { padding-top: 2px; }

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.admin-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}
.admin-nav-item:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}
.admin-nav-item:hover svg { color: var(--text-secondary); }

/* Halaman yang sedang dibuka ditandai warna DAN garis tebal di kiri —
   warna sendirian tidak terbaca oleh yang sulit membedakannya. */
.admin-nav-item.aktif {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}
.admin-nav-item.aktif svg { color: var(--primary-dark); }
.admin-nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Tautan ke bagian di halaman yang sama, menjorok di bawah induknya. */
.admin-nav-anak {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 2px 21px;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
}
.admin-nav-anak a {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--text-muted);
    text-decoration: none;
}
.admin-nav-anak a:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}

.admin-akun {
    margin-top: auto;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border-color);
}
.admin-akun-nama {
    padding: 0 12px 10px;
    line-height: 1.35;
}
.admin-akun-nama strong {
    display: block;
    font-size: 0.86rem;
    color: var(--text-primary);
}
.admin-akun-nama span {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    word-break: break-all;
}
.admin-keluar {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

/* ── Isi ─────────────────────────────────────────────────────────────────── */
.admin-utama {
    flex: 1 1 auto;
    min-width: 0;          /* tanpa ini tabel lebar memanjangkan seluruh halaman */
    margin-left: 264px;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    /* Tinggi tetap: bilah tab di bawahnya menempel tepat di garis ini. */
    min-height: 64px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}
.admin-topbar-teks { min-width: 0; flex: 1 1 auto; }
.admin-topbar h1 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
}
.admin-topbar p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Tombol utama halaman (Tulis artikel, Modul baru, Kembali ke daftar) tinggal
   di bilah atas yang menempel, bukan di baris sendiri di bawahnya: satu baris
   isi kembali, dan tombolnya tetap terjangkau di posisi gulir mana pun. */
.admin-topbar-aksi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.admin-topbar-aksi .btn {
    padding: 8px 16px;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Tombol tema pindah ke bilah atas. Tombol bundar yang mengambang di pojok
   kanan bawah menutupi baris tabel terakhir dan bilah Simpan yang menempel,
   dan isi halaman harus menyisakan 96px kosong di bawah hanya untuknya. */
body:has(> .admin-layout) > .theme-toggle { display: none; }
.admin-tema {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.admin-tema:hover { color: var(--primary-dark); border-color: var(--primary); }
.admin-tema:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.admin-tema svg { width: 18px; height: 18px; position: absolute; }
.admin-tema .sun-icon { opacity: 0; }
body.dark .admin-tema .sun-icon { opacity: 1; }
body.dark .admin-tema .moon-icon { opacity: 0; }

.admin-menu-tombol {
    display: none;         /* hanya muncul di layar sempit */
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.admin-menu-tombol:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.admin-isi {
    padding: 20px 24px 28px;
    flex: 1 1 auto;
}

/* Tirai gelap di belakang laci. `hidden` dilepas JS sebelum animasi mulai. */
.admin-tirai {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(2, 6, 23, 0.55);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.admin-tirai[hidden] { display: none; }
body.admin-menu-buka .admin-tirai { opacity: 1; }

@media (max-width: 1023px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        box-shadow: var(--shadow-lg);
        width: min(288px, 84vw);
    }
    body.admin-menu-buka .admin-sidebar { transform: translateX(0); }
    body.admin-menu-buka { overflow: hidden; }

    .admin-utama { margin-left: 0; }
    .admin-menu-tombol { display: inline-flex; }
    .admin-topbar { padding: 8px 16px; gap: 10px; }
    .admin-topbar h1 { font-size: 1.05rem; }
    .admin-isi { padding: 16px 16px 24px; }
}

/* Di ponsel tulisan tombol bilah atas dipendekkan lewat `data-pendek`
   ("Tulis artikel" → "Tulis") supaya judul halaman tidak terhimpit. */
@media (max-width: 600px) {
    .admin-topbar p { display: none; }
    .admin-topbar-aksi .btn { padding: 7px 12px; font-size: 0.82rem; }
    .admin-topbar-aksi .btn[data-pendek] .teks-panjang { display: none; }
    .admin-topbar-aksi .btn[data-pendek]::after { content: attr(data-pendek); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .admin-tirai { transition: none; }
}

/* ── Kartu angka ─────────────────────────────────────────────────────────── */
.admin-angka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.admin-angka-kartu {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.admin-angka-kartu span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.admin-angka-kartu strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 2px 0;
}

.admin-section { margin-bottom: 24px; scroll-margin-top: 76px; }
.admin-section-kepala {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.admin-section h2 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}
.admin-section-kepala p {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.admin-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--bg-surface); }
.admin-table th, .admin-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.88rem;
    color: var(--text-secondary);
    vertical-align: top;
}
.admin-table th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-base);
}
.admin-table tbody tr:last-child td { border-bottom: none; }

/*
 * Di layar sempit tabel berhenti jadi tabel dan setiap baris jadi satu kartu,
 * dengan nama kolom diambil dari `data-label` tiap sel. Menggeser tabel ke
 * samping di layar 400px berarti separuh datanya selalu tersembunyi — dan
 * kolom yang tersembunyi itu justru tindakannya (Sunting, Hapus).
 *
 * Judul tabel disembunyikan dengan clip, bukan `display: none`: pembaca layar
 * tetap perlu urutan kolomnya untuk membacakan isinya.
 */
@media (max-width: 720px) {
    .admin-table-wrap { border: none; border-radius: 0; background: none; }
    .admin-table { min-width: 0; background: none; }
    .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .admin-table tr {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        margin-bottom: 10px;
        padding: 6px 0;
    }
    .admin-table td {
        display: flex;
        gap: 14px;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: none;
        padding: 5px 14px;
    }
    .admin-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .admin-table td > * { text-align: right; }
    /* Sel tindakan dibiarkan rata kiri; tautan berderet lebih mudah disentuh. */
    .admin-table td.admin-td-aksi { flex-wrap: wrap; justify-content: flex-start; }
    .admin-table td.admin-td-aksi > * { text-align: left; }
}

.admin-empty {
    padding: 16px 18px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.admin-sukses {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #047857;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

/* Pil status artikel di daftar pengelola. Bentuk ikut menandai status, bukan
   hanya warna — supaya tetap terbaca oleh yang sulit membedakan warna. */
.admin-pil-tayang,
.admin-pil-draf {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.admin-pil-tayang {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.admin-pil-draf {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
}

/* Terjadwal: bukan draf, bukan tayang. Warnanya sendiri supaya perbedaan itu
   terbaca sekilas dari daftar. */
.admin-pil-jadwal {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.45);
}

.admin-tautan-bahaya {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #b91c1c;
    cursor: pointer;
    text-decoration: underline;
}

.admin-bantuan {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 6px 0 0;
}

.admin-bantuan code {
    background: var(--bg-base);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
}

/* ==========================================================================
   FORMULIR BERULANG — bagian naratif dan daftar fitur pada modul
   ==========================================================================

   Satu modul berisi beberapa bagian, tiap bagian berisi beberapa paragraf.
   Yang dibutuhkan pengisinya bukan kotak teks yang lebih banyak, melainkan
   batas yang terlihat: mana yang satu bagian, mana yang paragraf di dalamnya,
   dan tombol hapus mana yang membuang yang mana. Itu sebabnya tiap bagian
   diberi kotak sendiri dan paragraf menjorok sedikit di dalamnya. */
.admin-ulang {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px 14px;
    margin-bottom: 16px;
    background: var(--bg-surface);
}
.admin-ulang legend {
    padding: 0 8px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.admin-ulang-isi { display: flex; flex-direction: column; gap: 8px; }

.admin-ulang-item {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--bg-base);
}
.admin-ulang-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.admin-ulang-kepala strong {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.admin-ulang-item .admin-ulang-isi { margin-left: 12px; padding-left: 12px; border-left: 1px dashed var(--border-color); }

/* Satu baris isian + tombol buang di ujungnya. */
.admin-ulang-baris,
.admin-fitur-baris {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.admin-ulang-baris textarea { flex: 1 1 auto; }
.admin-fitur-baris input { flex: 1 1 0; min-width: 0; }
/* Nama fitur lebih pendek daripada penjelasannya — perbandingannya mengikuti
   yang sudah ada di halaman modul, bukan dibagi rata. */
.admin-fitur-baris input:first-child { flex: 0 1 34%; }

.admin-hapus-baris {
    flex-shrink: 0;
    width: 34px;
    height: 38px;
    line-height: 1;
    font-size: 1.15rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.admin-hapus-baris:hover {
    border-color: rgba(239, 68, 68, 0.5);
    color: #b91c1c;
}

.admin-ulang-tambah {
    margin-top: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--primary-dark);
    cursor: pointer;
}
.admin-ulang-tambah:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.admin-ulang-item > .admin-ulang-tambah { margin-left: 24px; }

.admin-terkait {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px 16px;
}
.admin-terkait label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.admin-terkait input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary); }

/* Kotak centang yang berdiri sendiri, dengan labelnya di sebelah kanan.
   .form-group menyusun label DI ATAS isian, dan untuk sakelar itu salah
   arah — labelnya jadi jauh dari kotaknya. */
.admin-sakelar {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-sakelar input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--primary); }

/* ── Daftar perayap AI di pengaturan SEO ─────────────────────────────────── */
.admin-arti {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.admin-arti > div { display: flex; gap: 10px; align-items: baseline; }
.admin-arti > div + div { margin-top: 6px; }
.admin-arti dt {
    flex-shrink: 0;
    width: 74px;
    font-weight: 700;
    color: var(--text-primary);
}
.admin-arti dd { margin: 0; color: var(--text-muted); line-height: 1.5; }

.admin-perayap { display: flex; flex-direction: column; gap: 2px; }

.admin-perayap-baris {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.admin-perayap-baris:hover { background: var(--bg-base); }
.admin-perayap-baris input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--primary);
}
.admin-perayap-baris > span { min-width: 0; }
.admin-perayap-baris strong { font-size: 0.9rem; color: var(--text-primary); }
.admin-perayap-vendor { font-size: 0.8rem; color: var(--text-muted); margin-left: 6px; }
.admin-perayap-catatan {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Maksud perayap ditandai warna DAN kata, bukan warna saja. */
.admin-pil-maksud {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    vertical-align: 1px;
}
.admin-pil-answer {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.45);
}
.admin-pil-index {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.4);
}
.admin-pil-training {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.4);
}

/* Perintah yang memang untuk disalin — jangan dibungkus, jangan dipotong. */
.admin-perintah {
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre;
    user-select: all;
}
.admin-terkait em { color: var(--text-muted); font-size: 0.82rem; }

.admin-dua-kolom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}

/* ==========================================================================
   FORMULIR TULIS ARTIKEL
   ==========================================================================

   Dua kolom, dan pembagiannya bukan soal muat-tidak-muat: kiri adalah yang
   DIBACA ORANG (judul, ringkasan, isi), kanan yang MENENTUKAN KAPAN DAN
   BAGAIMANA (status, jadwal, gambar, SEO). Sebelumnya semuanya satu kolom
   berurutan, jadi kolom status ada di paling bawah — sesudah editor setinggi
   dua layar — dan itu kolom yang paling sering diubah. */
.admin-tulis-kolom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.admin-tulis-utama { min-width: 0; }

.admin-tulis-samping {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Panel pengaturan ikut turun selama masih ada ruang: editor jauh lebih
       tinggi daripada panelnya, dan tanpa ini separuh kanan layar kosong. */
    position: sticky;
    top: 76px;
}

.admin-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.admin-panel h2 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.admin-panel .form-group:last-child { margin-bottom: 0; }

.admin-editor-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.admin-tombol-kecil {
    padding: 5px 11px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.admin-tombol-kecil:hover { border-color: var(--primary); color: var(--primary-dark); }
.admin-tombol-kecil[aria-pressed="true"] {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.admin-tombol-kecil:disabled { opacity: 0.55; cursor: default; }

/* Quill menggambar toolbar dan badan editornya sendiri; yang diatur di sini
   hanya agar keduanya menyatu dengan kotak isian lain di halaman ini. */
.admin-editor { background: var(--bg-surface); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.admin-editor .ql-editor {
    min-height: 360px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}
.admin-editor .ql-editor.ql-blank::before { color: var(--text-muted); font-style: normal; }
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--border-color); }
.ql-toolbar.ql-snow { border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--bg-base); }
.ql-container.ql-snow { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
/* Ikon toolbar Quill digambar dengan stroke/fill tetap — tanpa ini seluruh
   toolbar-nya nyaris tak terlihat di tema gelap. */
body.dark .ql-snow .ql-stroke { stroke: var(--text-secondary); }
body.dark .ql-snow .ql-fill { fill: var(--text-secondary); }
body.dark .ql-snow .ql-picker-label { color: var(--text-secondary); }
body.dark .ql-snow .ql-picker-options { background: var(--bg-surface); border-color: var(--border-color); }

.admin-editor-html {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.6;
}

.admin-gambar-pratinjau {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-base);
}
.admin-gambar-pratinjau[hidden] { display: none; }
.admin-gambar-pratinjau img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.admin-gambar-pratinjau.gagal { border-color: rgba(180, 83, 9, 0.5); }
.admin-gambar-pratinjau.gagal img { display: none; }

.admin-unggah-baris {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.admin-unggah-baris input[type="file"] { flex: 1 1 140px; min-width: 0; font-size: 0.8rem; }
.admin-bantuan.gagal { color: #b45309; }

@media (max-width: 1100px) {
    .admin-tulis-kolom { grid-template-columns: minmax(0, 1fr); }
    .admin-tulis-samping { position: static; }
    .admin-editor .ql-editor { min-height: 300px; }
}

/* ── Logo mitra di pengelola ─────────────────────────────────────────────── */
.admin-logo-petak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    /* Putih tetap, tidak ikut tema: hampir semua logo pesantren dibuat untuk
       latar terang dan hilang di latar gelap. */
    background: #fff;
}
.admin-logo-petak img { max-width: 100%; max-height: 100%; object-fit: contain; }
.admin-logo-petak em {
    font-style: normal;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748b;
}

.admin-tanda-hilang {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.76rem;
    color: #b45309;
}

.admin-logo-pratinjau {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-muted);
}
.admin-logo-pratinjau[hidden] { display: none; }
.admin-logo-pratinjau img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 4px;
    flex-shrink: 0;
}
.admin-logo-pratinjau.gagal { border-color: rgba(180, 83, 9, 0.5); color: #b45309; }
.admin-logo-pratinjau.gagal img { display: none; }

/* Penghitung panjang deskripsi. Berubah warna hanya saat sudah melewati
   anjuran — penanda yang selalu menyala berhenti diperhatikan. */
.admin-hitung { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.admin-hitung.lewat { color: #b45309; font-weight: 600; }

@media (max-width: 600px) {
    .admin-fitur-baris { flex-wrap: wrap; }
    .admin-fitur-baris input:first-child { flex: 1 1 100%; }
    .admin-ulang-item .admin-ulang-isi { margin-left: 0; padding-left: 8px; }
    .admin-ulang-item > .admin-ulang-tambah { margin-left: 0; }
}

/*
 * Isian di halaman pengelola.
 *
 * Disaring `.admin-isi` — seluruh isi halaman pengelola — BUKAN `.login-form`
 * seperti sebelumnya. Penyaring lama menuntut tiap formulir ingat memakai
 * kelas itu, dan formulir "Kirim pesan uji" di halaman Telegram tidak
 * memakainya karena ia memang bukan formulir isian: isinya cuma satu dropdown
 * dan satu tombol. Akibatnya dropdown itu jatuh ke tampilan bawaan peramban —
 * kotak putih bersudut tajam di tengah tema gelap.
 *
 * `.login-form` tetap disebut supaya halaman masuk dan ganti sandi, yang
 * berdiri di luar kerangka pengelola, ikut terkena.
 */
.admin-isi textarea,
.admin-isi select,
.login-form textarea,
.login-form select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.admin-isi textarea:focus-visible,
.admin-isi select:focus-visible,
.login-form textarea:focus-visible,
.login-form select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: var(--primary);
}

/*
 * Anak panah dropdown digambar sendiri.
 *
 * Panah bawaan peramban diwarnai sistem operasi, bukan halaman: di tema gelap
 * ia tetap hitam di atas latar gelap dan praktis tidak terlihat. `appearance:
 * none` mematikannya, dan panahnya digambar ulang sebagai latar.
 *
 * Warnanya #94a3b8 tetap — bukan var(--text-muted) — karena nilainya ditanam
 * di dalam data URI yang tidak bisa membaca variabel CSS. Abu-abu ini sengaja
 * dipilih yang terbaca cukup jelas di kedua tema sekaligus.
 */
.admin-isi select,
.login-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/*
 * Daftar pilihan yang terbuka digambar sistem operasi dan sebagian besar
 * gayanya tidak bisa disentuh CSS. Dua baris ini yang masih didengar Chrome
 * dan Firefox — tanpa keduanya, daftar yang terbuka di tema gelap tampil
 * putih menyilaukan sesaat sebelum ditutup.
 */
.admin-isi select option,
.login-form select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Dropdown yang berdiri sejajar tombol tidak boleh melar selebar barisnya. */
.admin-unggah-baris select { width: auto; }

/* ==========================================================================
   HALAMAN PENGUNJUNG
   ========================================================================== */

/*
 * Penyaring rentang waktu.
 *
 * Tautan biasa, bukan tombol dalam formulir: rentang yang sedang dilihat ikut
 * masuk ke alamat, jadi satu tampilan tertentu bisa dibuka lagi lewat riwayat
 * peramban dan tombol kembali bekerja seperti yang diharapkan.
 */
.admin-rentang {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.admin-rentang-pil {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.admin-rentang-pil:hover { border-color: var(--primary); color: var(--primary-dark); }

.admin-rentang-pil.aktif {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.admin-rentang-pil:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/*
 * Batang horizontal untuk daftar sumber.
 *
 * Digambar dengan CSS, tanpa pustaka grafik. Halaman ini memuat satu jenis
 * grafik yang sangat sederhana, dan menambah 60 KB JavaScript pihak ketiga
 * untuk itu akan lebih berat daripada seluruh sisa halaman pengelola.
 */
.admin-batang { display: flex; flex-direction: column; gap: 7px; }

.admin-batang-baris {
    display: grid;
    grid-template-columns: minmax(90px, 26%) 1fr auto;
    align-items: center;
    gap: 12px;
}

.admin-batang-nama {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-batang-bar {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: var(--bg-base);
    overflow: hidden;
}

.admin-batang-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.admin-batang-angka {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    min-width: 3ch;
    text-align: right;
}

/* Grafik harian: satu batang vertikal per hari, termasuk hari kosong. */
.admin-grafik {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.admin-grafik-batang {
    display: flex;
    align-items: flex-end;
    flex: 1 1 4px;
    min-width: 4px;
    height: 100%;
}

.admin-grafik-batang > span {
    display: block;
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: var(--primary);
    /* Hari tanpa kunjungan digambar sebagai batang setinggi nol, bukan
     * dilewati. Grafik yang melompati hari kosong membuat dua batang
     * bersebelahan terbaca sebagai dua hari berurutan padahal jaraknya
     * seminggu. */
    min-height: 0;
}

/*
 * Pembuat tautan bertanda.
 *
 * Dua dropdown berdampingan, kotak hasil di barisnya sendiri selebar panel.
 *
 * Susunan pertamanya menaruh ketiganya sebagai kolom sejajar dengan
 * `align-items: end`. Itu terlihat masuk akal di kode dan salah di layar: kotak
 * hasil membawa tombol dan baris kabar sehingga jauh lebih tinggi, jadi kedua
 * dropdown terdorong ke dasar baris dan di atasnya menganga lubang setinggi
 * satu kotak penuh. `start` yang dipakai sekarang menyandarkan semuanya ke
 * garis atas yang sama.
 */
.admin-bagikan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
    align-items: start;
}

.admin-bagikan .form-group { margin-bottom: 16px; }

/* Selebar panel, dan selalu di baris terakhir. */
.admin-bagikan-hasil {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.admin-salin-baris {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/*
 * `width: auto` MEMBATALKAN aturan lebar penuh yang dipasang .admin-isi ke
 * setiap input. Tanpa itu, lebar dasar isian ini adalah 100% lebar barisnya
 * SENDIRI, lalu ia menyusut untuk memberi tempat tombol — hasilnya kotak yang
 * lebarnya bergantung pada panjang teks tombol, bukan pada ruang yang ada.
 */
.admin-salin-baris input[type="text"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    /* Alamat yang disalin bukan sesuatu yang diketik; kursor teks di sini cuma
     * mengundang suntingan yang toh ditolak readonly. */
    cursor: text;
}

.admin-salin-baris .admin-tombol-kecil {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 16px;
}

/* Tingginya dijaga walau kosong: tanpa ini, isian di bawahnya melompat begitu
 * kabar "Tautan disalin." muncul. */
.admin-salin-kabar {
    display: block;
    min-height: 1.3em;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .admin-batang-baris { grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 8px; }
    .admin-grafik { height: 96px; }
}

/* ==========================================================================
   HALAMAN TESTIMONI
   ========================================================================== */

/*
 * Baris pemberi testimoni: avatar + nama + peran.
 *
 * Dipakai di daftar MAUPUN di pratinjau pada formulir, dan itu disengaja —
 * pratinjau yang digambar dengan aturan berbeda dari yang sesungguhnya akan
 * menjanjikan satu hal lalu menampilkan hal lain.
 */
.admin-pemberi {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    /* Warnanya dipasang sebaris dari data; ini hanya jaring pengaman kalau
     * kolomnya kosong dan bawaannya belum sempat dihitung. */
    background-color: var(--text-muted);
}

.admin-kutipan-ringkas {
    display: block;
    max-width: 46ch;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.admin-bintang {
    color: #f59e0b;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Bintang yang tidak diberikan tetap digambar, supaya 3 dari 5 terbaca sebagai
 * 3 dari 5 — bukan sebagai tiga bintang yang berdiri sendiri. */
.admin-bintang-mati { color: var(--border-color); }

/* Pemilih warna dan kode heksanya berdampingan; hanya yang kanan yang dikirim. */
.admin-warna-baris {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-warna-baris input[type="color"] {
    flex: 0 0 44px;
    width: 44px;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    cursor: pointer;
}

.admin-warna-baris input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   TABEL PENGELOLA: BILAH ALAT, KEPALA YANG BISA DIURUTKAN, KAKI HALAMAN
   ========================================================================== */

/*
 * Bilah alat di atas tabel.
 *
 * Membungkus, bukan menggulung: di layar sempit kotak cari mengambil satu baris
 * penuh dan penyaringnya turun ke bawahnya. Penyaring yang harus digeser dulu
 * untuk terlihat sama saja dengan penyaring yang tidak ada.
 */
.admin-alat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.admin-alat-cari { flex: 1 1 260px; min-width: 0; }
.admin-alat-saring { flex: 0 0 auto; }

/*
 * Label bilah alat tidak lagi berdiri di baris sendiri di atas isiannya —
 * baris label itu menambah tinggi bilah hampir dua kali lipat. Namanya pindah
 * ke DALAM pilihan ("Status: Semua", "25 baris"), dan labelnya tetap ada untuk
 * pembaca layar.
 */
.admin-alat-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Isian di dalam bilah alat lebih rendah daripada isian formulir: ini bukan
 * tempat mengisi data, hanya tempat menyaring yang sudah ada. */
.admin-alat input[type="search"],
.admin-alat select {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.88rem;
}

.admin-alat select { width: auto; min-width: 130px; }

.admin-alat .admin-tombol-kecil { padding: 8px 14px; }

.admin-alat-ulang {
    font-size: 0.84rem;
    white-space: nowrap;
}

/* Kepala kolom yang bisa diurutkan. Seluruh sel jadi sasaran klik, bukan cuma
 * tulisannya — sasaran seukuran teks meleset terus di layar sentuh. */
.admin-th-urut { padding: 0 !important; }

.admin-th-urut > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    color: inherit;
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.admin-th-urut > a:hover { color: var(--primary-dark); background: var(--bg-base); }
.admin-th-urut > a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.admin-th-urut.aktif > a { color: var(--primary-dark); }

/* Tanda arah SELALU ada, bahkan pada kolom yang tidak sedang diurutkan — yang
 * redup itulah yang memberi tahu bahwa kolomnya bisa diklik. */
.admin-urut-tanda {
    font-size: 0.8rem;
    opacity: 0.35;
    font-variant-numeric: tabular-nums;
}

.admin-th-urut.aktif .admin-urut-tanda { opacity: 1; }

/* Kaki tabel: jumlah di kiri, tombol halaman di kanan. */
.admin-kaki-tabel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.admin-kaki-jumlah {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.admin-hal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admin-hal-pil {
    display: inline-block;
    min-width: 36px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
}

a.admin-hal-pil:hover { border-color: var(--primary); color: var(--primary-dark); }
a.admin-hal-pil:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.admin-hal-pil.aktif {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

/* Tombol yang tidak bisa dipakai tetap digambar, sebagai teks mati: tombol
 * yang hilang-muncul membuat letak tombol lain bergeser tiap pindah halaman. */
.admin-hal-pil.mati { opacity: 0.4; }

.admin-hal-jeda { padding: 0 2px; color: var(--text-muted); }

@media (max-width: 600px) {
    .admin-alat { padding: 12px; }
    .admin-alat-cari { flex-basis: 100%; }
    .admin-alat-saring { flex: 1 1 130px; }
    .admin-alat select { width: 100%; min-width: 0; }
    .admin-kaki-tabel { justify-content: center; }
    .admin-kaki-jumlah { flex-basis: 100%; text-align: center; }
}

/* ==========================================================================
   TINDAKAN BERIKON DI DALAM TABEL
   ========================================================================== */

/*
 * Sunting, Lihat, Hapus — dulu tiga tautan teks yang dipisah titik tengah.
 *
 * Tiga kata pada tiap baris membuat kolom tindakan hampir selebar kolom isinya,
 * dan mata harus membaca ulang kata yang sama di setiap baris untuk menemukan
 * satu tombol. Ikon dibaca sekali lalu dikenali bentuknya; yang tersisa untuk
 * dibaca tinggal isi tabelnya.
 *
 * Harga yang harus dibayar, dan sudah dibayar di markup: ikon tidak pernah
 * menjelaskan dirinya sendiri. Setiap tombol membawa `title` untuk yang
 * melihatnya dan `aria-label` — yang menyebut nama barisnya — untuk yang
 * mendengarkannya.
 */
/*
 * Kolom tindakan mengambil selebar isinya saja.
 *
 * Tanpa ini, lebar yang dibebaskan ikon tidak pergi ke mana pun: tata letak
 * tabel membaginya rata, dan kolom judul — satu-satunya yang benar-benar butuh
 * ruang — tetap terlipat jadi empat baris.
 */
.admin-table td.admin-td-aksi,
.admin-table th:last-child { width: 1%; white-space: nowrap; }

@media (max-width: 720px) {
    /* Di layar sempit barisnya jadi kartu; lebar 1% tidak berlaku lagi. */
    .admin-table td.admin-td-aksi { width: auto; }
}

.admin-aksi {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Formulirnya sendiri jadi anggota baris tombol.  akan
 * lebih ringkas, tapi beberapa peramban mencabut elemen ber-contents dari
 * pohon aksesibilitas — dan yang tercabut di sini adalah formulir hapusnya. */
.admin-aksi form { display: flex; }

.admin-aksi-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 34 px: cukup jadi sasaran jari, masih muat di baris tabel setinggi
     * normal tanpa memaksa barisnya tumbuh. */
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text-secondary);
    font: inherit;
    line-height: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.admin-aksi-tombol:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: var(--bg-surface);
}

.admin-aksi-tombol:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/*
 * Hapus TIDAK merah sejak diam.
 *
 * Deretan tombol merah di setiap baris membuat seluruh tabel terbaca seperti
 * daftar peringatan, dan warna yang selalu menyala berhenti berarti apa-apa.
 * Merahnya muncul saat disentuh — tepat ketika peringatannya memang berguna.
 */
.admin-aksi-tombol.bahaya:hover {
    border-color: #b91c1c;
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
}

.admin-aksi-tombol.bahaya:focus-visible { outline-color: #b91c1c; }

/* Di layar sempit tiap baris jadi kartu, dan tombolnya dirapatkan ke kiri. */
@media (max-width: 720px) {
    .admin-table td.admin-td-aksi { padding-top: 10px; padding-bottom: 10px; }
    .admin-aksi { gap: 8px; }
}

/* ==========================================================================
   JUDUL & DESKRIPSI HALAMAN DI PENGATURAN SEO
   ========================================================================== */

.seo-halaman {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/*
 * Tiap halaman dikotaki sendiri. Delapan pasang isian yang berderet tanpa
 * pembatas terbaca sebagai satu formulir panjang, dan mudah sekali mengetik
 * deskripsi beranda ke dalam kolom milik halaman kontak.
 */
.seo-halaman-baris {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
}

.seo-halaman-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.seo-halaman-kepala strong { font-size: 0.95rem; color: var(--text-primary); }
.seo-halaman-kepala a { font-size: 0.78rem; }

.seo-halaman-baris .form-group { margin-bottom: 12px; }

/* Bawaan yang tampil sebagai placeholder sengaja dibuat lebih redup daripada
 * isian biasa: ia keterangan, bukan nilai yang tersimpan. */
.seo-halaman-baris input::placeholder,
.seo-halaman-baris textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

/* ==========================================================================
   TATA LETAK RINGKAS PENGELOLA
   ==========================================================================

   Halaman pengelola dulu ditumpuk satu kolom, dibatasi 600–820px, dengan
   penjelasan panjang di bawah tiap isian dan tombol Simpan di dasar halaman.
   Di layar laptop separuh kanan kosong sementara orang menggulir tiga-empat
   layar untuk sampai ke tombolnya. Bagian ini berisi perkakas untuk memakai
   lebar layar dan memendekkan halaman:

   - isian dan jarak antarbaris yang lebih rapat;
   - keterangan panjang dipotong dua baris dengan tombol "selengkapnya";
   - bilah Simpan yang menempel di dasar layar;
   - tab untuk halaman yang panjang;
   - kisi dua kolom dan kotak tabel bergulir untuk halaman Ringkasan. */

/* ── Isian lebih rapat ───────────────────────────────────────────────────── */
.admin-isi .form-group { margin-bottom: 14px; gap: 5px; }
.admin-isi .form-group label { font-size: 0.84rem; }
.admin-isi input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
.admin-isi textarea,
.admin-isi select {
    padding: 9px 12px;
    font-size: 0.92rem;
}
.admin-isi select { padding-right: 36px; }
.admin-isi .admin-bantuan { margin-top: 3px; }

/* Label kotak centang di dalam formulir. `.login-form label` (0,1,1) lebih
   kuat daripada `.admin-sakelar` dan `.admin-perayap-baris` (0,1,0), jadi
   keduanya selama ini jatuh ke `display: block` — kotak centangnya menempel
   ke teks tanpa jarak dan barisnya tidak rata. */
.login-form .admin-sakelar,
.login-form .admin-perayap-baris { display: flex; margin-bottom: 0; }
.login-form .admin-perayap-baris { font-size: inherit; font-weight: 400; color: inherit; }

/* Kotak teks tumbuh mengikuti isinya (admin.js), jadi `rows` di markup cukup
   kecil. Kotak yang tumbuh tidak butuh batang gulir sendiri — kecuali setelah
   menyentuh batas tingginya. */
.admin-isi textarea[data-tumbuh] { resize: vertical; overflow-y: hidden; max-height: 60vh; }
.admin-isi textarea[data-tumbuh].penuh { overflow-y: auto; }

/* Keterangan pendek di bawah judul halaman — menggantikan paragraf pembuka
   bergaya bebas yang dulu ditulis ulang di tiap halaman. */
.admin-keterangan {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 110ch;
}

/* ── Keterangan panjang dipotong ─────────────────────────────────────────────
 * Dipasang admin.js hanya pada keterangan yang lebih dari tiga baris. Isinya
 * TIDAK dihapus: dua baris pertama sudah memuat pokoknya, sisanya satu klik
 * lagi. Tanpa JavaScript semua keterangan tampil utuh seperti dulu. */
.admin-bantuan.ringkas,
.admin-keterangan.ringkas {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.admin-buka-bantuan {
    display: inline-block;
    /* .form-group menyusun anaknya sebagai kolom flex yang meregang; tanpa
       dua baris ini tombolnya melebar dan tulisannya jatuh di tengah. */
    align-self: flex-start;
    text-align: left;
    margin: 1px 0 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
}
.admin-buka-bantuan:hover { text-decoration: underline; }
.admin-buka-bantuan:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.admin-keterangan + .admin-buka-bantuan { margin: -8px 0 12px; }

/* ── Bilah Simpan yang menempel ──────────────────────────────────────────────
 * Anak terakhir formulirnya. `sticky` membuatnya tetap di dasar layar selama
 * formulirnya masih terlihat, lalu kembali ke tempatnya di ujung formulir —
 * tombol Simpan tidak perlu dicari dengan menggulir ke bawah. */
.admin-simpan {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px -8px rgba(2, 6, 23, 0.18);
}
.admin-simpan .btn { padding: 9px 20px; font-size: 0.92rem; text-decoration: none; }
.admin-simpan-kabar {
    margin-right: auto;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.admin-simpan.berubah .admin-simpan-kabar { color: #b45309; font-weight: 600; }

/* ── Tab ─────────────────────────────────────────────────────────────────────
 * Daftar tabnya dibangun admin.js dari `data-tab-judul` tiap panel. Tanpa
 * JavaScript tidak ada daftar tab dan semua panel tampil berurutan seperti
 * dulu — tidak ada isian yang tersembunyi tanpa jalan untuk membukanya. */
.admin-tab-daftar {
    position: sticky;
    top: 64px;
    z-index: 20;
    display: flex;
    gap: 2px;
    margin: 0 0 14px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.admin-tab-daftar [role="tab"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}
.admin-tab-daftar [role="tab"]:hover { background: var(--bg-light); color: var(--text-primary); }
.admin-tab-daftar [role="tab"][aria-selected="true"] {
    background: var(--primary-light);
    color: var(--primary-dark);
    box-shadow: inset 0 -2px 0 var(--primary);
}
.admin-tab-daftar [role="tab"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Panel yang tidak aktif. `hidden` dipasang JS, dan dilepas lagi untuk panel
   yang memuat isian bermasalah saat formulir dikirim. */
[data-tab-panel][hidden] { display: none !important; }
/* Judul panel sudah tertulis di tabnya; di layar ia hanya memakan baris.
   Tetap ada untuk pembaca layar. */
.admin-tab-siap [data-tab-panel] > .admin-tab-judul {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.admin-tab-siap [data-tab-panel] { margin-bottom: 0 !important; }
/* Tanpa JavaScript judul panel itulah satu-satunya pemisah antarbagian. */
:not(.admin-panel) > h2.admin-tab-judul {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

/* ── Kisi ────────────────────────────────────────────────────────────────── */
.admin-kisi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
/* Kolom kiri lebih lebar: untuk tabel berkolom banyak di kiri dan daftar
   pendek di kanan. */
.admin-kisi.condong { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.admin-kisi .admin-kisi { margin-bottom: 0; }
.admin-kisi-lebar { grid-column: 1 / -1; }
.admin-kisi > .admin-section,
.admin-kisi > .admin-kartu { margin-bottom: 0; }
@media (max-width: 1199px) {
    .admin-kisi,
    .admin-kisi.condong { grid-template-columns: minmax(0, 1fr); }
}

/* Kartu isi untuk halaman Ringkasan dan Pengunjung: judul di kiri, tautan
   "selengkapnya" di kanan, isi di bawahnya. */
.admin-kartu {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    min-width: 0;
    scroll-margin-top: 76px;
}
.admin-kartu .admin-section-kepala { margin-bottom: 10px; }
.admin-kartu h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
}
.admin-kartu .admin-empty { padding: 14px; }

/* Tabel di dalam kotak bergulir: tingginya dibatasi, kepala kolomnya menempel.
   Dipakai untuk daftar yang tidak punya halaman sendiri (permintaan demo,
   pelanggan kabar) supaya 100 baris tidak memanjangkan halaman Ringkasan. */
.admin-gulir {
    max-height: 380px;
    overflow: auto;
    overscroll-behavior: contain;
}
.admin-gulir .admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.admin-gulir .admin-table { min-width: 0; }
@media (max-width: 720px) {
    .admin-gulir { max-height: 65vh; }
}

/* Pintasan di halaman Ringkasan: deret tombol menggantikan tiga bagian
   "Kelola artikel/modul/mitra" yang dulu masing-masing satu paragraf penuh. */
.admin-pintasan {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.admin-pintasan a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.admin-pintasan a small {
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--text-muted);
}
.admin-pintasan a:hover { border-color: var(--primary); color: var(--primary-dark); }
.admin-pintasan a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Panel yang bisa dilipat (<details>), untuk pengaturan yang jarang diubah.
   Bentuknya sama dengan .admin-panel; judulnya jadi tombol. */
.admin-panel-lipat > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.admin-panel-lipat > summary::-webkit-details-marker { display: none; }
.admin-panel-lipat > summary::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
}
.admin-panel-lipat[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.admin-panel-lipat[open] > summary { margin-bottom: 10px; }
.admin-panel-lipat > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 3px; }
.admin-panel-lipat > summary small {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Pengaturan SEO: halaman dan perayap dalam kisi ──────────────────────── */
.seo-halaman {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px;
}
.seo-halaman-baris { padding: 10px 12px; }
.seo-halaman-kepala { margin-bottom: 6px; }
.seo-halaman-baris .form-group { margin-bottom: 8px; }

.admin-perayap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2px 12px;
}
.admin-perayap-baris { padding: 7px 8px; }

@media (max-width: 600px) {
    .seo-halaman,
    .admin-perayap { grid-template-columns: minmax(0, 1fr); }
}

/* ── Pusat Bantuan (/bantuan) & Status Layanan (/status) ─────────────────── */
.bantuan-halaman,
.status-halaman { padding-top: 140px; }

.bantuan-cari {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 36px auto;
}
.bantuan-cari input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
}
.bantuan-cari .btn { border-radius: var(--radius-full); padding: 0 22px; }

.bantuan-kelompok { margin-bottom: 36px; }
.bantuan-subjudul,
.status-subjudul {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 14px 0;
}
.status-subjudul { margin-top: 32px; }

.bantuan-daftar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.bantuan-kartu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.bantuan-kartu:hover,
.bantuan-kartu:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-md); }
.bantuan-kartu-judul { font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.bantuan-kartu-ringkas { font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.bantuan-kategori {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
}
.bantuan-kosong,
.status-kosong { color: var(--text-secondary); margin-bottom: 24px; }

.bantuan-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 40px;
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    background: var(--primary-light);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}
.bantuan-cta h2 { font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 6px 0; color: var(--text-primary); }
.bantuan-cta p { margin: 0; color: var(--text-secondary); max-width: 560px; }
.bantuan-cta-aksi { display: flex; flex-wrap: wrap; gap: 10px; }
.bantuan-cta-aksi .btn { text-decoration: none; }

.bantuan-artikel-kepala { margin-bottom: 28px; }
.bantuan-artikel-kepala h1 {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 6px 0 12px 0;
}
.bantuan-artikel-ringkas { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 8px 0; }
.bantuan-artikel-tanggal { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Isi panduan: langkah bernomor, catatan, tabel, dan kode. */
.bantuan-isi ol,
.bantuan-isi ul { margin: 0 0 24px 0; padding-left: 24px; }
.bantuan-isi li { margin-bottom: 8px; }
.bantuan-isi li > ul,
.bantuan-isi li > ol { margin: 8px 0 0 0; }
.bantuan-isi table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}
.bantuan-isi th,
.bantuan-isi td { border: 1px solid var(--border-color); padding: 8px 12px; text-align: left; vertical-align: top; }
.bantuan-isi th { background: var(--bg-light); color: var(--text-primary); }
.bantuan-isi code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--bg-light);
    padding: 1px 6px;
    border-radius: 4px;
}
.bantuan-isi blockquote {
    margin: 0 0 24px 0;
    padding: 12px 18px;
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
}
.bantuan-isi a { color: var(--primary-dark); }

.bantuan-terkait {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}
.bantuan-terkait h2 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 10px 0; color: var(--text-primary); }
.bantuan-terkait ul { margin: 0; padding-left: 20px; }
.bantuan-terkait li { margin-bottom: 6px; }
.bantuan-terkait a { color: var(--primary-dark); }

.status-wadah { max-width: 860px; }
.status-spanduk {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    border: 1px solid;
}
.status-spanduk strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-primary); }
.status-spanduk p { margin: 4px 0 0 0; color: var(--text-secondary); }
.status-titik { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: currentColor; }
.status-normal { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.status-pemeliharaan { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.status-terganggu { background: #fff7ed; border-color: #fed7aa; color: #ea580c; }
.status-gangguan { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

.status-komponen {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.status-komponen li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
}
.status-komponen li + li { border-top: 1px solid var(--border-color); }
.status-komponen-nama { font-weight: 600; color: var(--text-primary); }
.status-komponen-info { display: inline-flex; align-items: center; gap: 10px; }
.status-ketersediaan { font-size: 0.85rem; color: var(--text-muted); }
.status-lencana {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}
.status-lencana-hijau { background: #d1fae5; color: #047857; }
.status-lencana-merah { background: #fee2e2; color: #b91c1c; }
.status-lencana-abu { background: var(--bg-light); color: var(--text-secondary); }
.status-catatan { font-size: 0.85rem; color: var(--text-muted); margin: 8px 0 0 0; }

.status-peristiwa {
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-muted);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.status-jenis-gangguan { border-left-color: #dc2626; }
.status-jenis-pemeliharaan { border-left-color: #d97706; }
.status-jenis-info { border-left-color: var(--secondary); }
.status-peristiwa-kepala { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--text-primary); }
.status-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.status-peristiwa-isi { margin: 8px 0 0 0; color: var(--text-secondary); white-space: pre-line; }
.status-waktu { margin: 8px 0 0 0; font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 600px) {
    .bantuan-halaman,
    .status-halaman { padding-top: 110px; }
    .bantuan-cari { flex-wrap: wrap; }
    .bantuan-cari .btn { padding: 10px 22px; }
    .bantuan-artikel-kepala h1 { font-size: 1.6rem; }
    .bantuan-cta { padding: 20px; }
}

/* ── Pusat Bantuan: Mulai di sini, peran, langkah, seri, umpan balik ────── */
.bantuan-mulai-daftar {
    list-style: none;
    counter-reset: mulai;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.bantuan-mulai-daftar li { counter-increment: mulai; }
.bantuan-mulai-daftar a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px 16px 14px 56px;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-decoration: none;
}
.bantuan-mulai-daftar a::before {
    content: counter(mulai);
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bantuan-mulai-daftar a:hover,
.bantuan-mulai-daftar a:focus-visible { border-color: var(--primary); }
.bantuan-mulai-daftar span { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }

.bantuan-kartu-peran { border-left: 4px solid var(--primary); }

.bantuan-peran-pilih {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -12px 0 28px 0;
}
.bantuan-peran-pilih a {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
}
.bantuan-peran-pilih a.aktif { background: var(--primary); border-color: var(--primary); color: #fff; }

.bantuan-peran-label { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 6px 0; }
.bantuan-peran-label a { color: var(--primary-dark); }

.bantuan-pdf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 32px;
    padding: 18px 22px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.bantuan-pdf p { margin: 4px 0 0 0; color: var(--text-secondary); font-size: 0.92rem; max-width: 620px; }
.bantuan-pdf .btn { text-decoration: none; }

.bantuan-toc {
    margin: 0 0 28px 0;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
}
.bantuan-toc ol { margin: 8px 0 0 0; padding-left: 22px; }
.bantuan-toc li { margin-bottom: 4px; }
.bantuan-toc a { color: var(--primary-dark); }

.bantuan-langkah { list-style: none; margin: 0; padding: 0; }
.bantuan-langkah > li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    scroll-margin-top: 110px;
}
.bantuan-langkah-nomor {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bantuan-langkah-badan { flex: 1 1 auto; min-width: 0; }
.bantuan-langkah-badan h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 4px 0 8px 0;
}
.bantuan-langkah-badan .bantuan-isi p:last-child { margin-bottom: 0; }
.bantuan-tips {
    margin: 10px 0 0 0;
    padding: 10px 14px;
    border-left: 4px solid var(--accent);
    background: var(--accent-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.bantuan-seri {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}
.bantuan-seri a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
}
.bantuan-seri a span { font-size: 0.8rem; color: var(--text-muted); }
.bantuan-seri-berikut { text-align: right; }
.bantuan-seri a:hover { border-color: var(--primary); }

.bantuan-umpan {
    margin-top: 36px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
}
.bantuan-umpan h2 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 12px 0; color: var(--text-primary); }
.bantuan-umpan-tombol { display: flex; flex-wrap: wrap; gap: 10px; }
.bantuan-umpan-saran { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bantuan-umpan-saran label { font-weight: 600; font-size: 0.92rem; }
.bantuan-umpan-saran label span { font-weight: 400; color: var(--text-muted); }
.bantuan-umpan-saran textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font: inherit;
}
.bantuan-umpan-saran .btn { align-self: flex-start; }
.bantuan-umpan-kabar { margin: 10px 0 0 0; color: var(--primary-dark); font-size: 0.92rem; }

/* Pengelola: editor langkah */
.admin-langkah { list-style: none; margin: 0 0 10px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.admin-langkah-baris {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.admin-langkah-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.admin-langkah-aksi { display: inline-flex; gap: 4px; }

@media (max-width: 600px) {
    .bantuan-seri { flex-direction: column; }
    .bantuan-seri-berikut { text-align: left; }
    .bantuan-langkah > li { gap: 10px; }
}