/* ==========================================================================
   Penyesuaian khusus anggota.iass.or.id di atas template Ra-Admin.

   Semua yang project ini ubah dari tampilan bawaan template ada DI SINI —
   assets/css/style.css bawaan template sengaja tidak disentuh sama sekali,
   supaya kalau suatu saat templatenya diperbarui, cukup timpa style.css dan
   berkas ini tetap berlaku.
   ========================================================================== */

/* --- 1. Warna merek ------------------------------------------------------
   Template menyimpan warna sebagai triplet RGB (bukan hex) supaya bisa dipakai
   sebagai rgba(var(--primary), .2). Ikuti format itu kalau menggantinya.

   Selektor ditulis .app-wrapper.default (dua kelas) — bukan .app-wrapper saja —
   karena customizer.js menempelkan kelas .default ke .app-wrapper saat halaman
   dimuat, dan .default punya nilai --primary sendiri. Dua kelas mengalahkan
   satu kelas, jadi warna di bawah ini yang menang.                          */
/* Dipasang DUA KALI, dan keduanya perlu:
   - :root   — untuk halaman yang TIDAK punya .app-wrapper, yaitu login, 404,
               akses-ditolak, dan tolak-CSRF (kerangka layout/atas-polos.php).
               Tanpa baris ini halaman login tetap memakai biru-toska bawaan
               template sementara seluruh aplikasi sudah hijau — ketahuan saat
               memotret halaman login di browser.
   - .app-wrapper.default — untuk halaman aplikasi. Dua kelas, karena
               customizer.js menempelkan kelas .default ke .app-wrapper saat
               dimuat, dan .default punya --primary sendiri di style.css. */
:root {
    --primary: 22, 163, 74;
    --secondary: 100, 116, 139;
}

.app-wrapper,
.app-wrapper.default {
    --primary: 22, 163, 74;
    --secondary: 100, 116, 139;
}

body {
    background-color: var(--bodybg-color);
}

/* --- 2. Merek di kepala sidebar ------------------------------------------
   Lambang IASS + nama aplikasi.                                            */
.app-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 0.5rem;
    position: relative;
    box-sizing: border-box;
}

.app-logo .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.brand-mark {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(23, 130, 118, 0.18);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    transition: all 0.25s ease;
}

.brand-mark img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    float: none !important;
}

.app-logo:hover .brand-mark {
    border-color: var(--iass-teal, #178276);
    box-shadow: 0 3px 12px rgba(23, 130, 118, 0.2);
    transform: scale(1.02);
}

.app-logo .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.app-logo .brand-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #111827 !important;
    line-height: 1.15;
    margin-bottom: 2px;
    display: block;
}

.app-logo .brand-subtitle {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1px;
    color: #64748b;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Semi-nav (collapsed sidebar) styling */
nav.semi-nav .app-logo {
    padding: 0 !important;
    justify-content: center;
}

nav.semi-nav .app-logo .logo {
    justify-content: center;
    gap: 0;
}

nav.semi-nav .app-logo .brand-text {
    display: none;
}

nav.semi-nav:hover .app-logo {
    padding: 0 1.25rem !important;
    justify-content: space-between;
}

nav.semi-nav:hover .app-logo .logo {
    justify-content: flex-start;
    gap: 12px;
}

nav.semi-nav:hover .app-logo .brand-text {
    display: flex;
}

.brand-mark-header {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(23, 130, 118, 0.18);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

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

/* Merek di halaman tanpa sidebar (login, 404, akses ditolak) */
.merek-polos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.merek-polos .brand-mark {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(23, 130, 118, 0.2);
    box-shadow: 0 4px 14px rgba(23, 130, 118, 0.15);
    padding: 6px;
    margin-bottom: 4px;
}

.merek-polos h5 {
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--font-title-color, #0f172a);
}

/* Di HP/Tablet, nav tertutup (lebar 0) tidak memiliki overflow:hidden, sehingga
   elemen di dalam .app-logo (seperti .brand-mark) meluber dan menutupi
   tombol menu header. Sembunyikan .app-logo sepenuhnya saat nav tertutup! */
@media (max-width: 991.98px) {
    nav:not(.semi-nav) .app-logo {
        display: none !important;
    }
}

/* --- 3. Menu aktif & Grouping Seksi -------------------------------------- */
nav .app-nav .main-nav > li.menu-title,
nav .app-nav .menu-title {
    padding: 1.1rem 0.85rem 0.35rem !important;
    margin-bottom: 0.35rem !important;
    list-style: none;
}

nav .app-nav .main-nav > li.menu-title:first-child,
nav .app-nav .menu-title:first-child {
    padding-top: 0.5rem !important;
}

nav .app-nav .main-nav > li.menu-title span,
nav .app-nav .menu-title span {
    display: inline-block;
    text-transform: uppercase;
    color: var(--iass-teal, #178276) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    background-color: rgba(23, 130, 118, 0.08) !important;
    border: 1px solid rgba(23, 130, 118, 0.15);
    padding: 0.2rem 0.75rem !important;
    border-radius: 20px !important;
    line-height: 1.4;
}

.main-nav > li > a.active {
    background: rgba(var(--primary), 0.12);
    color: rgba(var(--primary), 1);
    font-weight: 600;
}

/* Penanda strip / dash (-) bawaan Ra-Admin untuk menu single tanpa submenu */
nav .app-nav .main-nav > li.no-sub > a::after {
    content: "\ebf8" !important;
    font-family: "Phosphor-Bold" !important;
    display: inline-block !important;
    position: absolute !important;
    right: 1.5rem !important;
    top: 15px !important;
    font-size: 0.75rem !important;
    color: rgba(var(--secondary), 0.8) !important;
    transition: var(--app-transition) !important;
}

nav .app-nav .main-nav > li.no-sub > a:hover::after,
nav .app-nav .main-nav > li.no-sub > a.active::after {
    color: var(--iass-teal, #178276) !important;
}

nav.semi-nav .app-nav .main-nav > li.no-sub > a::after {
    display: none !important;
}

nav.semi-nav:hover .app-nav .main-nav > li.no-sub > a::after {
    display: inline-block !important;
}

/* --- 4. Topbar ----------------------------------------------------------- */
header.header-main {
    height: 75px;
    display: flex;
    align-items: center;
    padding-left: calc(17rem + 12px) !important;
}

.app-wrapper .semi-nav ~ .app-content header.header-main {
    padding-left: calc(4.5rem + 12px) !important;
}

@media (max-width: 1199.98px) {
    header.header-main {
        padding-left: 12px !important;
    }
}

header.header-main .container-fluid {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 1.25rem !important;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
}

.header-row {
    width: 100%;
}

.header-left {
    padding-left: 0;
}

header.header-main .container-fluid .header-left .header-toggle,
.header-toggle {
    cursor: pointer;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

header.header-main .container-fluid .header-left .header-toggle:hover,
.header-toggle:hover {
    background: #e2e8f0 !important;
    color: var(--iass-teal, #178276) !important;
    border-color: rgba(23, 130, 118, 0.3) !important;
}

.header-toggle i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 20px;
}

/* Jam Waktu Istiwa + tanggal Hijriah/Masehi di topbar — susunannya mengikuti
   header projek Archive.

   Bedanya dengan sana: di Archive warnanya ditulis hex mati (#1f2a44, #8a93a5)
   di dalam <style> milik header. Di sini dipakai token tema, karena template
   ini punya mode gelap (--bodybg-color berganti jadi #282a36 di style.css) dan
   teks biru-tua di atas latar gelap tidak terbaca sama sekali. Warna mati juga
   berarti header punya sumber warna sendiri di luar anggota.css. */
.header-datetime {
    gap: 14px;
    line-height: 1.15;
    color: var(--font-title-color);
}

.header-datetime i {
    font-size: 19px;
    color: var(--font-title-color);
    vertical-align: -3px;
}

/* tabular-nums supaya lebar angkanya tetap: tanpa ini seluruh baris bergeser
   sedikit tiap detik berganti, dan gerakannya menarik mata terus-menerus. */
.header-datetime .hdt-clock b {
    font-size: 18px;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--font-title-color);
}

.header-datetime .hdt-hijri {
    font-size: 14px;
    font-weight: 700;
}

.header-datetime small {
    font-size: 11px;
    font-weight: 500;
    color: var(--font-light-color);
}

.header-datetime .hdt-sep {
    width: 1px;
    height: 26px;
    background: var(--border_color);
}

/* Tanggal Masehi dilepas duluan saat ruang menyempit — Hijriah yang dicari
   orang di sini, Masehi cuma pengingat. */
@media (max-width: 1199px) {
    .header-datetime .hdt-masehi {
        display: none;
    }
}

.avatar-ini {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--primary), 1), rgba(var(--primary), 0.72));
}

.head-profile-btn {
    padding: 4px 6px;
    border-radius: 12px;
}

.head-profile-btn:hover {
    background: rgba(var(--secondary), 0.1);
}

.prof-name b {
    display: block;
    font-size: 13px;
    line-height: 1.1;
    color: var(--font-title-color);
}

.prof-name small {
    font-size: 11px;
    color: var(--font-light-color);
    text-transform: capitalize;
}

/* --- 5. Judul halaman ---------------------------------------------------- */
.page-title {
    font-weight: 700;
    color: var(--font-title-color);
    margin-bottom: 0;
}

.page-sub {
    font-size: 13px;
    color: var(--font-light-color);
}

/* --- 6. Kartu & tabel ----------------------------------------------------
   Di poc-router setiap daftar dibungkus .card > .card-body. Aturan di bawah
   membuat semuanya seragam tanpa perlu menyentuh markup tiap halaman.       */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, 0.05);
}

.card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border_color);
    padding: 16px 20px;
    font-weight: 600;
    color: var(--font-title-color);
}

.table > thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--font-light-color);
    font-weight: 700;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table > tbody td {
    vertical-align: middle;
    font-size: 13.5px;
}

.table code {
    font-size: 12.5px;
}

/* Tombol aksi di dalam tabel jangan dipatahkan jadi dua baris — label seperti
   "Non-aktifkan" terbaca sebagai "Non-" + "aktifkan" kalau kolomnya sempit. */
.table .btn {
    white-space: nowrap;
}

/* Kotak pratinjau ikon — mengikuti .icon-preview di pages/admin/menu-data.php
   projek Archive (36x36, sudut membulat, latar abu). Dipakai di daftar Kelola
   Menu dan di sebelah kotak isian ikon pada modalnya. */
.icon-preview {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--light-gray);
    color: var(--font-title-color);
    font-size: 19px;
}

/* Ikon yang belum diisi/tidak dikenal tidak menyisakan kotak kosong yang
   membingungkan — diberi garis putus-putus supaya terbaca sebagai "belum ada". */
.icon-preview.kosong {
    background: transparent;
    border: 1px dashed var(--border_color);
    color: var(--font-light-color);
    font-size: 13px;
}

.badge {
    border-radius: 30px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
}

/* Foto anggota di dalam sel tabel (daftar kartu). Ukurannya dikunci di CSS,
   bukan lewat atribut width/height di markup: berkas foto anggota tidak
   seragam rasionya, dan tanpa object-fit yang potret jadi gepeng.
   flex: 0 0 auto supaya nama panjang di sebelahnya tidak menggencetnya. */
.foto-alumni {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bodybg-color);
}

/* Pengganti saat kolom foto kosong. Kotak seukuran fotonya tetap dipasang,
   bukan dibiarkan kosong — tanpa itu baris tanpa foto jadi lebih pendek dan
   kolom nama di seluruh tabel tidak lagi sejajar. */
.foto-alumni.foto-kosong {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--font-light-color);
}

/* --- 7. Form ------------------------------------------------------------- */
.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--font-light-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
}

.form-control,
.form-select {
    border-radius: 10px;
    border: 1.5px solid var(--border_color);
    padding: 9px 13px;
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--primary), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary), 0.12);
}

/* --- 8. Footer -----------------------------------------------------------
   HANYA properti rupa — JANGAN sentuh padding/margin/posisi.

   Footer di template ini adalah bilah tetap di dasar layar
   (style.css: `div > footer { position: fixed; bottom: 0; padding-left: 17rem }`),
   dan `padding-left: 17rem` itulah yang menggeser isinya melewati sidebar.
   Versi pertama aturan ini menulis `padding: 16px 0`, yang diam-diam menimpa
   padding-left tadi menjadi 0 — teks footer pun tertimbun di bawah sidebar dan
   cuma menyisakan ekor kata "…giri". Ketahuan saat memotret halaman.

   Template juga sudah mengurus keadaan sidebar terlipat
   (`.semi-nav ~ .app-content footer { padding-left: 4.5rem }`), dan tinggi
   bilahnya dicadangkan lewat `.app-content { padding-bottom: 47px }` — menambah
   padding vertikal di sini membuat bilahnya lebih tinggi dari ruang yang
   dicadangkan, sehingga baris terakhir tabel tertutup. */
.app-footer {
    border-top: 1px dashed rgba(var(--secondary), 0.3);
    font-size: 13px;
}

/* --- 8b. Keadaan sedang mengambil data -----------------------------------
   Dipasang anggota-daftar.js saat potongan tabel sedang diambil ulang.
   Sengaja halus: isi lama tetap terbaca (tidak dikosongkan) supaya tidak
   ada kedipan, hanya diredupkan dan dikunci dari klik. */
#daftar {
    transition: opacity 0.15s ease;
}

#daftar.sedang-memuat {
    opacity: 0.45;
    pointer-events: none;
}

/* --- 9. Paginasi --------------------------------------------------------- */
.pagination {
    --bs-pagination-border-radius: 10px;
    --bs-pagination-active-bg: rgba(var(--primary), 1);
    --bs-pagination-active-border-color: rgba(var(--primary), 1);
    --bs-pagination-color: var(--font-color);
    --bs-pagination-hover-bg: rgba(var(--primary), 0.1);
    margin-bottom: 0;
}

/* --- 9b. Palet kartu -----------------------------------------------------
   Empat warna kartu diambil dari dasbor rujukan
   iass-ui/legacy/dashboard-iass.html (--brand, --accent, --slate, --dusk),
   supaya kartu di aplikasi ini satu keluarga dengan rancangan itu.
   Ditulis sebagai triplet RGB (bukan hex) mengikuti kebiasaan template,
   supaya bisa dipakai sebagai rgba(var(--kartu-1), .07).

     1  #178276 tosca   2  #F08619 oranye   3  #3B4A47 slate   4  #8C9A9E abu

   --tinta-N = warna tulisan DI ATAS kartu ke-N, dan sengaja tidak seragam.
   Rujukannya memakai putih di keempat kartu, tapi diukur: putih di atas
   #F08619 cuma 2,6:1 dan di atas #8C9A9E 2,9:1 — dua-duanya di bawah ambang
   dan label huruf kecil di sana memang sulit dibaca. Warnanya tetap sama
   persis dengan rujukan; yang menyesuaikan hanya tintanya, dipilih mengikuti
   terang-gelap masing-masing kartu: putih di dua kartu gelap (4,7:1 dan
   9,3:1), tinta gelap di dua kartu terang (7,5:1 dan 6,7:1). */
:root {
    --kartu-1: 23, 130, 118;
    --kartu-2: 240, 134, 25;
    --kartu-3: 59, 74, 71;
    --kartu-4: 140, 154, 158;

    --tinta-1: #ffffff;
    --tinta-2: #0b0b0b;
    --tinta-3: #ffffff;
    --tinta-4: #0b0b0b;
}

/* Aksen ditentukan dari posisi kolom, jadi berlaku di semua halaman yang
   memakai .stat-tile tanpa perlu menambah kelas di markup mana pun.

   Tanda ">" sebelum .stat-tile WAJIB, jangan diganti spasi. Dengan spasi,
   selektornya juga cocok ke kartu yang bersarang lebih dalam: di dasbor,
   keenam kartu KPI ada di dalam .col-lg-8 (kolom ke-2 baris luar), sehingga
   tiap kartu cocok ke DUA aturan sekaligus — nomor kolomnya sendiri dan nomor
   kolom leluhurnya. Kekhususan keduanya sama persis, jadi yang menang aturan
   yang letaknya paling bawah di berkas ini: kartu ke-1 dan ke-6 ikut warna
   leluhurnya, bukan warnanya sendiri. Ketahuan saat memotret halaman —
   keduanya ikut warna leluhurnya, bukan warnanya sendiri. */
.row > [class*="col-"]:nth-child(4n + 1) > .stat-tile { --aksen: var(--kartu-1); --tinta: var(--tinta-1); }
.row > [class*="col-"]:nth-child(4n + 2) > .stat-tile { --aksen: var(--kartu-2); --tinta: var(--tinta-2); }
.row > [class*="col-"]:nth-child(4n + 3) > .stat-tile { --aksen: var(--kartu-3); --tinta: var(--tinta-3); }
.row > [class*="col-"]:nth-child(4n + 4) > .stat-tile { --aksen: var(--kartu-4); --tinta: var(--tinta-4); }

/* --- 10. Kartu angka ringkasan (halaman laporan) -------------------------
   Menggantikan .card > .card-body berisi .text-muted + .fs-4 yang diketik ulang
   di tiap laporan. Markupnya tetap kartu biasa, cuma ditambah kelas .stat-tile. */
/* Satu kartu = satu warna penuh, tanpa gradasi. --aksen di-set aturan
   nth-child di bagian 9b; nilai cadangan dipakai kalau kartunya berdiri
   sendiri di luar .row. */
.stat-tile {
    height: 100%;
    background: rgb(var(--aksen, var(--kartu-1)));
}

/* Tinta dibaca dari --tinta (bagian 9b), bukan ditetapkan satu warna di sini:
   kartunya ada yang gelap dan ada yang terang, jadi tidak ada satu warna
   tulisan yang terbaca di keempatnya. Label memakai tinta yang sama pada
   opasitas lebih rendah supaya tetap satu warna dengan angkanya, baik saat
   tintanya putih maupun gelap. */
.stat-tile .stat-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tinta, var(--tinta-1));
    opacity: 0.82;
}

.stat-tile .stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tinta, var(--tinta-1));
    font-variant-numeric: tabular-nums;
}

.stat-tile a {
    color: var(--tinta, var(--tinta-1));
    opacity: 0.82;
}

/* Angka yang menandakan masalah (mis. "Tanpa Komisariat" saat isinya > 0).
   Di atas kartu berwarna, penekanan TIDAK bisa lagi dibawa warna tulisan —
   warna apa pun yang cukup mencolok di atas kartu terang akan tenggelam di
   kartu gelap. Penandanya dipindah ke garis bawah setebal 2px yang mengikuti
   warna tinta, jadi tetap terlihat di keempat warna kartu. */
.stat-tile .stat-value.perhatian {
    border-bottom: 2px solid currentColor;
    display: inline-block;
    padding-bottom: 1px;
}

/* Penanda kartu terpilih (halaman Role).
   JANGAN pakai utilitas .border-primary Bootstrap: utilitas itu ber-!important
   sehingga menimpa warna aksen DAN mengalahkan style inline — itulah yang
   membuat kartu keempat sempat tampil kuning Bootstrap, bukan warna palet. */
.stat-tile.terpilih {
    --aksen: var(--kartu-1);
    --tinta: var(--tinta-1);
    box-shadow: 0 0 0 2px rgba(var(--kartu-1), 0.35), 0 8px 24px rgba(18, 38, 63, 0.05);
}

/* --- 10b. Kartu yang bisa diklik (hub Pembaruan Data) --------------------
   Seluruh kartu jadi sasaran klik, bukan cuma tombol kecil di dalamnya. Karena
   itu ia perlu memberi tanda bahwa dirinya bisa ditekan — tanpa isyarat apa
   pun, kartu berangka terbaca sebagai pajangan. */
.kartu-tugas {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Kartunya sebuah <a>. .text-decoration-none menghilangkan garis bawah pada
   anchor-nya, tapi garis itu tetap merambat ke isinya — angka besar di dalam
   kartu sempat tampil bergaris bawah. Karena itu dimatikan sampai ke anak. */
.kartu-tugas,
.kartu-tugas * {
    text-decoration: none;
}

.kartu-tugas:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 38, 63, 0.18);
}

/* Fokus keyboard harus terlihat sejelas hover — orang bisa sampai ke sini
   dengan Tab. Garisnya memakai tinta kartu supaya kontras di keempat warna. */
.kartu-tugas:focus-visible {
    outline: 2px solid var(--tinta, var(--tinta-1));
    outline-offset: 3px;
}

/* Semua tulisan di kartu ini ikut tinta kartunya — bukan --font-light-color
   atau .text-secondary, yang dibuat untuk kartu berlatar putih. */
.kartu-tugas .stat-value,
.kartu-tugas .ket-kartu,
.kartu-tugas .ikon-kartu {
    color: var(--tinta, var(--tinta-1));
}

.kartu-tugas .ket-kartu {
    font-size: 12px;
    opacity: 0.82;
    line-height: 1.35;
}

.kartu-tugas .ikon-kartu {
    font-size: 24px;
    opacity: 0.7;
}

/* --- 10c. Popup "Ubah Data Anggota" --------------------------------------
   Kartu pemicunya memakai .stat-tile + .kartu-tugas yang sama dengan kartu
   kolom di sebelahnya, jadi tidak perlu aturan sendiri. Yang di bawah ini
   hanya untuk isi popup-nya.

   Foto anggota hasil pencarian NIA. Lebih besar dari .foto-alumni di tabel —
   di sini cuma ada satu orang di layar, dan fotonya ikut jadi cara memastikan
   nomor yang diketik memang orang yang dimaksud. */
.foto-anggota-nia {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bodybg-color);
}

.foto-anggota-nia.foto-kosong {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--font-light-color);
}

/* Saat potongan formulir sedang diambil, isi lama tetap terbaca — cuma
   diredupkan dan dikunci dari klik. Sama dengan #daftar.sedang-memuat di
   bagian 8b: mengosongkan dulu membuat popup berkedip dan tingginya melompat. */
#hasilNia {
    transition: opacity 0.15s ease;
}

#hasilNia.sedang-memuat {
    opacity: 0.45;
    pointer-events: none;
}

/* --- 11. Halaman tanpa sidebar (login, error, tolak CSRF) ---------------- */
.layar-tengah {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bodybg-color);
}

.kartu-tengah {
    width: 100%;
    max-width: 420px;
}

/* Lambang di halaman ini diatur bagian 2 (.brand-mark + .merek-polos), satu
   tempat bersama kepala sidebar. Aturan .kartu-tengah .brand-mark yang dulu ada
   di sini DIHAPUS, bukan disesuaikan: kekhususannya sama dengan aturan bagian 2
   tapi letaknya jauh di bawah, jadi dialah yang menang — lambangnya tetap
   berlatar gradasi hijau dan `margin: 0 auto` miliknya mendorong tulisan
   "KHIDMAH" menjauh ke tepi kanan. Ketahuan saat memotret halaman login. */

/* --- 12. Dasbor: token diagram, angka utama, meter ----------------------- */
/* Warna diagram DIPISAH dari --primary tema: kalau diambil dari --primary yang
   bisa diganti lewat kelas tema template (.gold, .warm, .cold, ...), jaminan
   keterbacaannya hilang begitu tema diganti.

   Keduanya tetap dari keluarga warna dasbor rujukan: #1FA795 adalah --brand-2
   dan #F08619 adalah --accent di sana. Diuji terhadap permukaan kartu
   (#ffffff): jarak keduanya ΔE 25,5 (penglihatan normal) dan 13,0 (protan),
   di atas ambang 15 dan 8.

   Yang dipakai #1FA795, BUKAN #178276 (warna kartu pertama), walaupun keduanya
   tosca. Alasannya terukur: kroma #178276 cuma 0,092 — di bawah lantai 0,1 —
   sehingga sebagai batang atau garis tipis di atas putih ia mulai terbaca
   abu-abu, bukan berwarna. Untuk blok kartu selebar itu hal tersebut tidak
   jadi soal, untuk goresan setebal 2px jadi soal.

   CATATAN kalau nanti mau menambah seri ketiga: JANGAN memakai #F9A94A
   bersama #F08619 di satu diagram — jaraknya cuma ΔE 8,2 untuk penglihatan
   normal, artinya orang tanpa gangguan warna sekalipun tidak bisa memisahkan
   keduanya. Sebagai warna kartu (di mana warna tidak menyandikan data apa pun)
   berdampingan tidak masalah. */
.viz {
    --viz-surface: #ffffff;
    --viz-seri-1: #1fa795;
    --viz-seri-2: #f08619;
    --viz-grid: #e1e0d9;
    --viz-sumbu: #c3c2b7;
    --viz-redup: #898781;
}

/* Angka utama halaman. Proporsional, bukan tabular-nums: di ukuran sebesar ini
   digit selebar '0' membuat angka seperti 121 terlihat renggang. */
.hero-angka {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--font-title-color);
}

.hero-satuan {
    font-size: 13px;
    color: var(--font-light-color);
}

/* Meter: rel memakai langkah lebih terang dari ramp yang sama (biru-di-atas-biru),
   supaya keadaan terbaca di sepanjang bilah, bukan cuma di bagian terisinya. */
.meter {
    height: 8px;
    border-radius: 999px;
    /* Rel = warna isian yang sama pada 18% — "langkah lebih terang dari ramp
       yang sama", supaya keadaan terbaca di sepanjang bilah, bukan cuma di
       bagian terisinya. Diturunkan dari token, bukan hex terpisah, agar tidak
       bisa lepas sendiri kalau paletnya diubah. */
    background: rgba(var(--kartu-1), 0.18);
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: rgb(var(--kartu-1));
}

.meter-baris + .meter-baris {
    margin-top: 14px;
}

.meter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 13px;
}

.meter-nilai {
    font-variant-numeric: tabular-nums;
    color: var(--font-light-color);
}

/* Kunci warna di legenda & tabel: identitas dibawa kotak berwarna di SEBELAH
   teks, teksnya sendiri tetap memakai warna teks biasa. */
.viz-kunci {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
}

/* Tabel padanan tiap diagram. Disembunyikan di balik <details> supaya tidak
   menggandakan halaman, tapi tetap ada — nilai apa pun yang cuma bisa dibaca
   lewat tooltip sama saja dengan tidak tersedia bagi sebagian pengguna. */
.viz-tabel {
    margin-top: 12px;
}

.viz-tabel summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--font-light-color);
}

.viz-tabel table {
    margin-top: 10px;
    font-size: 13px;
}

.viz-tabel td:last-child,
.viz-tabel th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.viz-catatan {
    font-size: 12px;
    color: var(--font-light-color);
    margin-top: 10px;
    margin-bottom: 0;
}

.kartu-aksi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border_color);
    transition: background-color 0.15s ease;
}

.kartu-aksi:hover {
    background: rgba(var(--primary), 0.07);
    color: inherit;
}

.kartu-aksi i {
    font-size: 22px;
    color: rgba(var(--primary), 1);
}

.kartu-aksi .aksi-jml {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- 13. Pintasan & kartu angka utama ikut giliran warna yang sama -------
   Paletnya TIDAK didefinisikan ulang di sini — sudah ada di bagian 9b sebagai
   triplet RGB (mis. `--kartu-1: 23, 130, 118`). Bentuk triplet itu wajib
   dipertahankan: aturan di bawah memakainya sebagai rgb(var(--aksen)) dan
   rgba(var(--kartu-1), .18). Kalau didefinisikan ulang sebagai hex, semua
   pemanggilan rgb(...) itu jadi nilai tak sah dan warna SELURUH kartu angka
   hilang tanpa pesan galat apa pun. */
.row > [class*="col-"]:nth-child(4n + 1) > .kartu-aksi { --aksen: var(--kartu-1); --tinta: var(--tinta-1); }
.row > [class*="col-"]:nth-child(4n + 2) > .kartu-aksi { --aksen: var(--kartu-2); --tinta: var(--tinta-2); }
.row > [class*="col-"]:nth-child(4n + 3) > .kartu-aksi { --aksen: var(--kartu-3); --tinta: var(--tinta-3); }
.row > [class*="col-"]:nth-child(4n + 4) > .kartu-aksi { --aksen: var(--kartu-4); --tinta: var(--tinta-4); }

/* Pintasan ikut aturan yang sama: satu blok, satu warna penuh. */
.kartu-aksi {
    border-color: transparent;
    background: rgb(var(--aksen, var(--kartu-1)));
    color: var(--tinta, var(--tinta-1));
}

.kartu-aksi:hover {
    background: rgb(var(--aksen, var(--kartu-1)));
    color: var(--tinta, var(--tinta-1));
    filter: brightness(0.94);
}

.kartu-aksi i {
    color: currentColor;
    opacity: 0.82;
}

/* Kartu angka utama dasbor bukan .stat-tile (angkanya jauh lebih besar dan
   isinya bukan sekadar label + nilai), tapi tetap ikut keluarga yang sama —
   memakai warna pertama, warna merek di dasbor rujukan. */
.kartu-hero {
    background: rgb(var(--kartu-1));
}

.kartu-hero .stat-label,
.kartu-hero .hero-satuan {
    color: var(--tinta-1);
    opacity: 0.82;
}

.kartu-hero .hero-angka {
    color: var(--tinta-1);
}

/* Tombol putih di dalam kartu berwarna tetap putih saat disentuh — tanpa ini
   Bootstrap mengembalikannya ke hijau merek di atas blok tosca. */
.kartu-hero .btn:hover,
.kartu-hero .btn:focus {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b0b0b;
}

/* <code> di dalam kartu berwarna. Bootstrap mewarnainya merah muda di atas
   putih; di atas blok berwarna warna itu nyaris hilang. Diganti keping tembus
   pandang bertinta sama seperti teks di sekitarnya, jadi ikut terbaca baik di
   kartu gelap maupun terang. */
.kartu-hero code,
.stat-tile code {
    color: currentColor;
    background: rgba(127, 127, 127, 0.28);
    padding: 1px 5px;
    border-radius: 5px;
}

/* Tombol di dalam kartu berwarna: putih pekat, bukan warna merek — tombol
   hijau di atas blok oranye tidak punya hubungan warna dengan apa pun. */
.kartu-hero .btn {
    background: #ffffff;
    border-color: #ffffff;
    color: #0b0b0b;
}

/* --- 14. Badge solid ------------------------------------------------------
   Badge status (Baru/Hilang/Rusak, Antri/Selesai, Aktif/Mati, lama antri)
   dibuat SATU WARNA PENUH, mengikuti aturan kartu — bukan lagi ragam
   .bg-light-* yang pucat bawaan template.

   Kelas yang dipakai halaman TIDAK diubah namanya: .bg-light-success dst tetap
   ditulis di markup, cuma tampilannya yang ditimpa di sini. Dengan begitu tidak
   ada satu pun halaman yang perlu disunting, dan artinya tetap terbaca dari
   nama kelasnya saat membaca kode.

   Pemetaan warnanya mengikuti dasbor rujukan, bukan dikarang: --pos (#178276)
   untuk keadaan selesai/baik, --neg (#D9642E) untuk rusak, --accent (#F08619)
   untuk yang masih menunggu, --dusk (#8C9A9E) untuk keterangan netral.

   Tinta dipilih menurut terang-gelap latarnya, sama seperti kartu. Semuanya
   diukur terhadap latar masing-masing dan lolos ambang 4,5:1 untuk teks kecil:
   putih di #178276 = 4,7:1; gelap di #F08619 = 7,5:1, di #D9642E = 5,4:1,
   di #8C9A9E = 6,7:1. Putih di ketiga warna terakhir hanya 2,6-2,9:1 —
   itulah sebabnya tintanya tidak dibuat seragam putih. */
/* Selesai/Aktif dan Baru sengaja TIDAK sewarna. Keduanya sempat sama-sama
   tosca, dan di halaman Kartu itu berarti kolom Keterangan ("Baru") dan kolom
   Status ("Selesai") tampil dengan badge yang tidak bisa dibedakan padahal
   artinya berlainan. */
.badge.bg-light-success {
    background-color: rgb(var(--kartu-1)) !important;   /* --pos, tosca */
    color: #ffffff !important;
}

.badge.bg-light-primary {
    background-color: rgb(var(--kartu-3)) !important;   /* --slate, 9,3:1 */
    color: #ffffff !important;
}

.badge.bg-light-warning {
    background-color: rgb(var(--kartu-2)) !important;
    color: #0b0b0b !important;
}

.badge.bg-light-danger {
    background-color: rgb(217, 100, 46) !important;   /* --neg di dasbor rujukan */
    color: #0b0b0b !important;
}

.badge.bg-light-secondary {
    background-color: rgb(var(--kartu-4)) !important;
    color: #0b0b0b !important;
}

/* --- 15. Identitas di topbar ---------------------------------------------
   Sejak topbar menampilkan NAMA ORANG (bukan username berupa angka), teksnya
   bisa panjang — "MUHAMMAD RIFQI ALMAHMUDI" jauh lebih lebar dari "100109".
   Tanpa batas lebar, blok identitas mendorong jam & tanggal keluar dari layar
   di monitor sempit. Dipotong dengan elipsis; versi lengkapnya tetap terbaca
   di menu profil saat diklik. */
.prof-name {
    max-width: 190px;
}

.prof-name b,
.prof-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu profil memuat nama, jabatan, bidang, dan username — beri ruang supaya
   tidak terpotong jadi dua baris pendek. */
.dropdown-menu .px-3.py-2 {
    min-width: 240px;
}

/* --- 16. Peta sebaran ----------------------------------------------------
   jQVMap menggambar SVG yang mengisi penuh elemen wadahnya, jadi tingginya
   harus dipasang di sini — tanpa itu wadahnya setinggi 0 dan petanya tidak
   pernah terlihat walau seluruh datanya benar. */
.peta-wadah {
    width: 100%;
    height: 380px;
    position: relative;
}

/* Peta Indonesia jauh lebih lebar daripada tinggi (1600x600). Di layar sempit
   tingginya dikurangi supaya tidak menyisakan ruang kosong besar di atas dan
   bawah gambar. */
@media (max-width: 767px) {
    .peta-wadah {
        height: 220px;
    }
}

/* --- Peta sebagai isi utama halaman (bukan latar seperti di login) ---------
   Tinggi tetap 380 px membuat petanya tidak pernah selebar kartunya: jQVMap
   memuat gambar UTUH ke dalam wadah, jadi yang membatasi adalah sisi yang
   paling sempit menurut rasio. Pada wadah 1228x380 (rasio 3,2) sementara
   petanya berasio 2,67, tingginyalah yang membatasi — petanya cuma selebar
   1014 px dan menyisakan ±107 px kosong di kiri dan kanan.

   Karena itu tingginya tidak dipatok, melainkan diturunkan dari lebar memakai
   rasio yang SAMA dengan viewBox peta. Hasilnya peta mengisi penuh lebar
   kartunya di ukuran layar mana pun, tanpa pita kosong di samping. */
.peta-wadah.peta-utama {
    height: auto;
    aspect-ratio: 1600 / 600;
    min-height: 240px;
}

/* Panggung = pembungkus yang dijadikan layar penuh, bukan petanya langsung.
   Tombol layar penuh dan tombol zoom ikut di dalamnya, jadi keduanya tetap
   terjangkau saat sedang penuh layar. */
.peta-panggung {
    position: relative;
}

.peta-panggung:fullscreen {
    background: var(--card-color, #ffffff);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Saat penuh layar rasio dilepas: yang dituju justru mengisi tinggi layar,
   dan jQVMap tetap menjaga bentuk petanya sendiri di dalam wadah. */
.peta-panggung:fullscreen .peta-wadah.peta-utama {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}

.peta-penuh {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid var(--border_color);
    color: var(--font-title-color);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(18, 38, 63, 0.10);
    transition: background-color 0.15s ease;
}

.peta-penuh:hover {
    background: rgba(var(--kartu-1), 0.12);
}

/* Tabel pendamping peta: dibatasi tingginya supaya halaman tidak jadi gulungan
   3.000 px hanya karena ada 41 provinsi dan 40 wilayah. Kepala tabelnya
   dilengketkan — tanpa itu, menggulir ke baris ke-30 berarti kehilangan nama
   kolomnya dan angka di layar tidak bisa dibaca lagi. */
.peta-tabel-gulir {
    max-height: 460px;
    overflow-y: auto;
}

.peta-tabel-gulir thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card-color, #ffffff);
}

.peta-legenda {
    display: flex;
    align-items: center;
    gap: 3px;
}

.peta-kotak {
    display: inline-block;
    width: 26px;
    height: 10px;
    border-radius: 2px;
}

/* Label melayang bawaan jQVMap. Ditata ulang mengikuti tooltip di halaman lain
   — bawaannya kotak hitam bersudut tajam yang tidak nyambung dengan tampilan
   aplikasi ini. */
.jqvmap-label {
    position: absolute;
    display: none;
    border-radius: 8px;
    background: #1e2a28;
    color: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.35;
    padding: 6px 10px;
    pointer-events: none;
    z-index: 3000;
}

/* Kotak tengah halaman tanpa sidebar: 420 px untuk 404 / tolak akses, dan
   lebih lebar untuk login — di sana isinya peta selebar layar dengan form di
   sisinya, bukan cuma form. */
.kartu-tengah.kartu-lebar {
    max-width: 1040px;
}

/* Peta di halaman login. Sedikit diredupkan: di sana ia latar, bukan bacaan —
   yang harus menarik mata tetap form masuknya. Tanpa angka apa pun (label
   melayang dimatikan lewat data-angka="0"), jadi warna yang agak buram tidak
   mengurangi informasi apa pun. */
.peta-login {
    /* height: auto + aspect-ratio, bukan tinggi tetap seperti .peta-wadah:
       jQVMap menskalakan SVG-nya mengikuti LEBAR wadah dan menjaga rasio
       1600x600. Dengan tinggi tetap, kartunya jadi jauh lebih tinggi daripada
       gambarnya dan menyisakan ruang kosong besar di bawah peta. */
    height: auto;
    aspect-ratio: 8 / 3;
    min-height: 170px;
    opacity: 0.88;
}

/* Tombol perbesar/perkecil peta.
   Bawaan jQVMap: kotak hitam 10x10 px menempel di KIRI atas — di layar besar
   ukurannya hampir tidak terlihat dan menutupi ujung Sumatera. Dipindah ke
   kanan atas dan diperbesar jadi 30x30 px (di atas ambang 24 px untuk sasaran
   sentuh), dengan rupa yang sama seperti tombol lain di aplikasi ini.

   left:auto WAJIB ditulis: aturan bawaan memasang left:10px, dan tanpa
   membatalkannya tombolnya akan menempel di kiri DAN kanan sekaligus —
   kiri yang menang karena keduanya sah. */
.jqvmap-zoomin,
.jqvmap-zoomout {
    position: absolute;
    left: auto;
    right: 12px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid var(--border_color);
    color: var(--font-title-color);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(18, 38, 63, 0.10);
    transition: background-color 0.15s ease;
}

.jqvmap-zoomin {
    top: 12px;
}

.jqvmap-zoomout {
    top: 50px;
}

.jqvmap-zoomin:hover,
.jqvmap-zoomout:hover {
    background: rgba(var(--kartu-1), 0.12);
}

/* Dua aturan terakhir dari jqvmap.min.css yang tetap dibutuhkan setelah berkas
   vendornya tidak lagi dimuat: bidang peta harus terbaca bisa diklik, dan label
   melayang tidak boleh ikut menangkap tetikus (kalau ikut, label yang muncul di
   bawah kursor langsung memicu mouseout dan petanya berkedip). */
.jqvmap-region {
    cursor: pointer;
}

.jqvmap-label,
.jqvmap-pin {
    pointer-events: none;
}

/* --- 17. Halaman muka (landing) ------------------------------------------
   Dipakai HANYA oleh pages/login/index.php lewat layout/atas-landing.php.
   Halaman 404 / tolak akses tetap memakai .layar-tengah dan tidak tersentuh
   satu aturan pun di bagian ini. */
.landing {
    background: #ffffff;
}

.landing-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- bilah atas --- */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--border_color);
    padding: 12px 0;
}

.landing-merek {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.landing-merek-teks b {
    display: block;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.1;
    color: var(--font-title-color);
}

.landing-merek-teks small {
    display: block;
    font-size: 11.5px;
    color: var(--font-light-color);
}

/* --- hero --- */
/* Latar tosca gelap: warna kartu pertama (#178276) diturunkan ke #0f5f57 supaya
   tulisan putih di atasnya mencapai kontras 7,4:1 — di atas #178276 apa adanya
   hanya 4,7:1, cukup untuk judul besar tapi tidak untuk paragraf. */
.landing-hero {
    background: linear-gradient(160deg, #0f5f57 0%, #124a44 55%, #16302d 100%);
    color: #ffffff;
    padding: 64px 0 72px;
}

.landing-kicker {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #f9a94a;
    margin-bottom: 12px;
}

.landing-judul {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin-bottom: 16px;
}

.landing-lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
    max-width: 52ch;
    margin-bottom: 26px;
}

.landing-moto {
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.72);
}

/* Tombol garis di atas hero. Tidak memakai .btn-outline-light bawaan Bootstrap
   karena kelas itu ikut memutihkan latar saat disentuh dan tulisannya berubah
   jadi putih-di-atas-putih. */
.btn-outline-terang {
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.btn-outline-terang:hover,
.btn-outline-terang:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
    color: #ffffff;
}

/* Kartu masuk sengaja diangkat dengan bayangan lebih tegas: di atas latar
   gelap, bayangan lembut bawaan .card praktis tidak terlihat. */
.landing-kartu-masuk {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

/* --- seksi isi --- */
.landing-seksi {
    padding: 56px 0;
}

.landing-seksi-abu {
    background: var(--bodybg-color);
}

.landing-kepala {
    max-width: 62ch;
    margin-bottom: 24px;
}

.landing-kepala h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--font-title-color);
    margin-bottom: 8px;
}

.landing-kepala p {
    color: var(--font-light-color);
    margin-bottom: 0;
}

.landing-fitur-ikon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: rgb(var(--kartu-1));
    background: rgba(var(--kartu-1), 0.12);
}

/* --- kaki --- */
.landing-kaki {
    border-top: 1px solid var(--border_color);
    padding: 22px 0;
    font-size: 13px;
    color: var(--font-light-color);
}

@media (max-width: 991px) {
    .landing-hero {
        padding: 44px 0 52px;
    }

    .landing-judul {
        font-size: 30px;
    }
}

/* Halaman muka di layar ponsel. Nama panjang organisasi di bilah atas dilepas
   dan ukuran huruf hero diturunkan — di lebar segitu keduanya memakan ruang
   yang lebih berguna untuk tombol masuk. */
@media (max-width: 575px) {
    .landing-merek-teks small {
        display: none;
    }

    .landing-judul {
        font-size: 26px;
    }

    .landing-lead {
        font-size: 14.5px;
        max-width: 100%;
    }

    .landing-hero {
        padding: 32px 0 40px;
    }

    .landing-seksi {
        padding: 40px 0;
    }

    .landing-kepala h2 {
        font-size: 22px;
    }
}

/* jQVMap menulis lebar & tinggi SVG-nya sebagai ATRIBUT piksel saat peta
   dibuat, lalu tidak pernah memperbaruinya. Tanpa aturan ini petanya tidak ikut
   menyesuaikan ketika jendela diubah ukurannya — lebarnya terkunci di angka
   saat halaman dimuat.

   !important diperlukan karena yang ditimpa adalah atribut presentasi milik
   elemen SVG, bukan aturan CSS lain. */
.peta-wadah svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}



.main-nav .btn-outline-danger {
    border-color: rgba(220, 38, 38, 0.2);
    color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.04);
}

.main-nav .btn-outline-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

/* --- Mobile Bottom Navigation Bar (Android App Style) ----------------------- */
@media (max-width: 991px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1040;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
        padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-bottom-nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #64748b;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 8px;
        border-radius: 8px;
        transition: all 0.2s ease;
        flex: 1;
        max-width: 72px;
        text-align: center;
    }

    .mobile-nav-item i {
        font-size: 20px;
        margin-bottom: 2px;
    }

    .mobile-nav-item.active {
        color: rgb(22, 163, 74);
        font-weight: 700;
    }

    .mobile-nav-item.active i {
        transform: scale(1.1);
    }

    .mobile-nav-item.text-danger {
        color: #dc2626;
    }

    /* Berikan padding bawah pada konten & footer utama agar tidak tertutup nav bawah HP */
    .app-content {
        padding-bottom: 70px !important;
    }

    .go-top {
        bottom: 75px !important;
    }
}

/* --- Penyesuaian Tombol Melayang Kembali Ke Atas (.go-top) ----------------- */
.go-top {
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.go-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4) !important;
}

.go-top .progress-value {
    background-color: #ffffff !important;
    color: rgb(22, 163, 74) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.go-top .progress-value i {
    font-size: 20px;
    margin: 0 !important;
    line-height: 1;
}

/* --- Panduan pengguna (pages/partials/panduan/) ----------------------------
   Gaya dokumentasi minimalis: satu lembar artikel, bagian dipisah garis
   tipis, daftar isi teks di kanan. Warna diturunkan dari --primary /
   --secondary dan variabel tema supaya ikut tema aplikasi. Badge status
   TIDAK distilkan ulang — panduan memakai badge yang sama dengan Verval.
   .panduan-hasil juga dipakai halaman tinjau mutasi (partials/mutasi/tinjau.php). */
.pd {
    --pd-garis: rgba(var(--secondary), 0.16);
    --pd-lembut: rgba(var(--secondary), 0.06);
    --pd-aksen: rgb(var(--primary));
    --pd-aksen-lembut: rgba(var(--primary), 0.08);
}

/* Kartu topik */
.pd-topik {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.pd-topik-kartu {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--white, #fff);
    border: 1px solid var(--pd-garis);
    color: var(--font-color);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pd-topik-kartu:hover {
    border-color: rgba(var(--primary), 0.45);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
    color: var(--font-color);
}
.pd-topik-kartu.aktif {
    border-color: var(--pd-aksen);
    box-shadow: 0 0 0 3px rgba(var(--primary), 0.12);
}
.pd-topik-ikon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--pd-aksen-lembut);
    color: var(--pd-aksen);
}
.pd-topik-kartu.aktif .pd-topik-ikon { background: var(--pd-aksen); color: #fff; }
.pd-topik-judul { display: block; font-weight: 700; font-size: 15px; color: var(--font-title-color); margin-bottom: 2px; }
.pd-topik-desc  { display: block; font-size: 12.5px; line-height: 1.5; color: var(--font-light-color); }

/* Tata letak: artikel + daftar isi */
.pd-tata {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .pd-tata { grid-template-columns: minmax(0, 1fr); }
    .pd-toc { display: none; }
}

.pd-artikel {
    padding: 40px 48px 8px;
    border-radius: 16px;
    border: 1px solid var(--pd-garis);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.7;
}
@media (max-width: 767.98px) {
    .pd-artikel { padding: 24px 20px 4px; }
}
.pd-artikel p { margin-bottom: 1rem; }

.pd-artikel-kepala { padding-bottom: 28px; border-bottom: 1px solid var(--pd-garis); }
.pd-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pd-aksen);
    margin-bottom: 6px;
}
.pd-artikel-kepala h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--font-title-color);
}
.pd-lead { font-size: 15px; color: var(--font-light-color); max-width: 640px; margin-bottom: 0 !important; }

.pd-peran {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--pd-aksen-lembut);
    font-size: 13px;
    line-height: 1.6;
}
.pd-peran > i { font-size: 22px; color: var(--pd-aksen); flex: 0 0 auto; }
.pd-peran-judul { font-weight: 700; color: var(--font-title-color); }

/* Daftar isi (layar sempit): chip bergulir di bawah kepala artikel */
.pd-toc-hp {
    display: none;
    gap: 6px;
    overflow-x: auto;
    padding: 16px 0 4px;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 991.98px) { .pd-toc-hp { display: flex; } }
.pd-toc-hp a {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 30px;
    background: var(--pd-lembut);
    color: var(--font-color);
    text-decoration: none;
    white-space: nowrap;
}

/* Daftar isi (desktop): teks tipis dengan penanda garis */
.pd-toc {
    position: sticky;
    top: 90px;
    padding-top: 8px;
}
.pd-toc-judul {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--font-light-color);
    margin-bottom: 10px;
}
#panduanToc { border-left: 1px solid var(--pd-garis); }
#panduanToc a {
    display: block;
    margin-left: -1px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    font-size: 13px;
    color: var(--font-light-color);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
#panduanToc a:hover { color: var(--font-title-color); }
#panduanToc a.aktif { color: var(--pd-aksen); border-left-color: var(--pd-aksen); font-weight: 600; }

/* Bagian */
.pd-bagian {
    padding: 36px 0;
    border-bottom: 1px solid var(--pd-garis);
    scroll-margin-top: 90px;
}
.pd-bagian:last-of-type { border-bottom: 0; }
.pd-kepala {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 18px;
}
.pd-nomor {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pd-aksen);
    font-variant-numeric: tabular-nums;
}
.pd-kepala h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--font-title-color);
}
.pd-tag, .pd-segera {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 30px;
    white-space: nowrap;
    align-self: center;
}
.pd-tag { background: var(--pd-lembut); color: var(--font-light-color); }
.pd-segera { background: rgba(var(--kartu-2), 0.16); color: #9a5a0c; }
.pd-segera i { margin-right: 2px; }
.pd-subjudul {
    font-size: 13px;
    font-weight: 700;
    color: var(--font-title-color);
    margin: 0 0 10px;
}
.pd-kecil { font-size: 12.5px; color: var(--font-light-color); }
.pd-kecil i { color: var(--pd-aksen); margin-right: 4px; }

/* Langkah bernomor */
.panduan-langkah {
    list-style: none;
    counter-reset: langkah;
    padding: 0;
    margin: 0 0 20px;
}
.panduan-langkah > li {
    counter-increment: langkah;
    position: relative;
    padding: 1px 0 18px 40px;
}
.panduan-langkah > li::before {
    content: counter(langkah);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--primary));
    background: rgba(var(--primary), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--primary), 0.35);
}
.panduan-langkah > li::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 30px;
    bottom: 2px;
    width: 1px;
    background: rgba(var(--primary), 0.2);
}
.panduan-langkah > li:last-child { padding-bottom: 0; }
.panduan-langkah > li:last-child::after { display: none; }

/* Poin berbutir */
.panduan-poin { list-style: none; padding: 0; margin: 0; }
.panduan-poin > li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.panduan-poin > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(var(--primary));
}

/* Catatan / hasil — juga dipakai halaman tinjau mutasi */
.panduan-hasil {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(var(--primary), 0.07);
    font-size: 13px;
    line-height: 1.65;
}
.panduan-hasil > i { font-size: 18px; color: rgb(var(--primary)); flex: 0 0 auto; margin-top: 1px; }
.panduan-hasil.info { background: rgba(var(--secondary), 0.08); }
.panduan-hasil.info > i { color: var(--font-light-color); }

/* Kotak jenis & keputusan */
.panduan-jenis, .panduan-putusan {
    height: 100%;
    padding: 20px;
    border-radius: 14px;
    background: var(--pd-lembut);
    font-size: 13px;
    line-height: 1.6;
}
.panduan-jenis h6, .panduan-putusan h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--font-title-color);
    display: flex;
    align-items: center;
    gap: 6px;
}
.panduan-jenis p { color: var(--font-light-color); margin-bottom: 14px; }
.panduan-putusan p { margin-bottom: 14px; }
.panduan-jenis .panduan-alur { margin-bottom: 14px; }

/* Skema alur */
.panduan-alur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.panduan-alur > span {
    padding: 4px 11px;
    border-radius: 30px;
    background: var(--white, #fff);
    box-shadow: inset 0 0 0 1px rgba(var(--secondary), 0.2);
    color: var(--font-color);
    font-weight: 600;
}
.panduan-alur > span.akhir {
    background: rgb(var(--primary));
    box-shadow: none;
    color: #fff;
}
.panduan-alur > i { color: var(--font-light-color); font-size: 12px; }

/* Tabel ringan */
.pd-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-tabel th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--font-light-color);
    padding: 0 12px 10px 0;
    border-bottom: 1px solid var(--pd-garis);
    text-align: left;
}
.pd-tabel td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--pd-garis); vertical-align: middle; }
.pd-tabel tr:last-child td { border-bottom: 0; }

/* Tanya-jawab */
.pd-faq { border-top: 1px solid var(--pd-garis); }
.pd-faq details { border-bottom: 1px solid var(--pd-garis); }
.pd-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--font-title-color);
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--font-light-color);
    transition: transform .2s ease;
}
.pd-faq details[open] summary::after { transform: rotate(45deg); }
.pd-faq details p { margin: -4px 0 16px; font-size: 13px; color: var(--font-light-color); }

/* Contoh pesan WhatsApp: gelembung chat keluar */
.panduan-wa {
    background: var(--pd-lembut);
    border-radius: 14px;
    padding: 20px;
}
.panduan-wa-gelembung {
    max-width: 420px;
    margin-left: auto;
    background: #d9fdd3;
    color: #111b21;
    border-radius: 12px 2px 12px 12px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.panduan-wa-gelembung p { margin-bottom: 8px; }
.panduan-wa-gelembung p:last-child { margin-bottom: 0; }

/* Ajakan di akhir artikel */
.pd-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 -48px;
    padding: 24px 48px 32px;
    border-top: 1px solid var(--pd-garis);
}
@media (max-width: 767.98px) { .pd-cta { margin: 0 -20px; padding: 20px 20px 24px; } }
.pd-cta-judul { font-weight: 700; color: var(--font-title-color); }
.pd-cta-teks { font-size: 13px; color: var(--font-light-color); }

/* Foto anggota berasio pas foto 3x4 (lebar:tinggi) — modul Verval/mutasi.
   aspect-ratio + object-fit: berkas foto yang rasionya lain dipotong rapi
   di tengah, tidak gepeng. Lebarnya diatur lewat kelas ukuran. */
.foto-3x4 {
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
    object-position: center top;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--bodybg-color);
}
.foto-3x4.kecil { width: 45px; }    /* 45 x 60 — pratinjau hasil Cek NIA */
.foto-3x4.besar { width: 90px; }    /* 90 x 120 — halaman tinjau pengajuan */
.foto-3x4.pratinjau { width: 96px; border-radius: 10px; } /* 96 x 128 — kartu hasil Cek NIA di modal Mutasi Baru */
.foto-3x4.foto-kosong {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--font-light-color);
}

/* Kartu pratinjau anggota di modal Mutasi Baru (hasil tombol Cek). */
.kartu-anggota-mutasi {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--primary), 0.3);
    background: rgba(var(--primary), 0.04);
}
.kartu-anggota-mutasi.terhalang {
    border-color: rgba(var(--kartu-2), 0.6);
    background: rgba(var(--kartu-2), 0.06);
}
.kartu-anggota-isi { min-width: 0; flex: 1 1 auto; }
.kartu-anggota-nama {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--font-title-color);
}
.kartu-anggota-nia { font-size: 12.5px; color: var(--font-light-color); margin-bottom: 10px; }
.kartu-anggota-isi dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 13px;
    margin: 0 0 12px;
}
.kartu-anggota-isi dt { font-weight: 400; color: var(--font-light-color); }
.kartu-anggota-isi dd { margin: 0; font-weight: 600; color: var(--font-color); }
.kartu-anggota-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 30px;
    background: rgba(var(--kartu-2), 0.16);
    color: #9a5a0c;
}
.kartu-anggota-status.ok { background: rgba(var(--primary), 0.12); color: rgb(var(--primary)); }
.kartu-anggota-isi dd.alamat { font-weight: 400; line-height: 1.5; }
.kartu-anggota-wa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #128c4a;
    text-decoration: none;
}
.kartu-anggota-wa:hover { text-decoration: underline; color: #0d6e3a; }
.kartu-anggota-wa i { font-size: 16px; }
.foto-3x4.kecil.foto-kosong { font-size: 20px; }