/* =====================================================================
 *  TEMPLATE WEBSITE (Admin > Tampilan & Navigasi > Template Website)
 *  Class pada <body>: tema-<kode> hdr-<terang|gelap|warna> sudut-<tajam|sedang|bulat>
 *                     [lebar-luas] [huruf-kecil|huruf-besar] [tanpa-animasi]
 *  Daftar komponen pada blok "Mode Gelap" & "Sudut" diambil dari style.css.
 * ===================================================================== */

/* ---------- Font ---------- */
body{font-family:var(--font-isi,'Plus Jakarta Sans'),system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3,h4,h5,h6,.section-title,.hero-title,.brand-title,.footer-title,.page-header h1,.page-header .ph-judul,.info-head h3,.zi-judul,.side-title{font-family:var(--font-judul,var(--font-isi)),system-ui,sans-serif}

/* ---------- Ukuran huruf & lebar ---------- */
html:has(body.huruf-kecil){font-size:15px}
html:has(body.huruf-besar){font-size:17.5px}
@media (min-width:1400px){.lebar-luas .container{max-width:1500px}}

/* ---------- Tanpa animasi (aksesibilitas) ---------- */
.tanpa-animasi *:not(.ticker-track),.tanpa-animasi *::before,.tanpa-animasi *::after{transition:none!important;animation:none!important}
.tanpa-animasi .card-berita:hover,.tanpa-animasi .card-layanan:hover,.tanpa-animasi .layanan-item:hover,.tanpa-animasi .akses-item:hover,.tanpa-animasi .hal-kartu:hover{transform:none}

/* ---------- Gaya header ---------- */
.hdr-gelap .navbar-main,.hdr-warna .navbar-main{box-shadow:0 4px 18px rgba(0,0,0,.25)}
.hdr-gelap .navbar-main{background:var(--buk-dark)}
.hdr-warna .navbar-main{background:var(--buk-navy)}
.hdr-gelap .topbar{background:color-mix(in srgb,var(--buk-dark) 70%,#000)}
:is(.hdr-gelap,.hdr-warna) .navbar-main .nav-link,:is(.hdr-gelap,.hdr-warna) .brand-title,:is(.hdr-gelap,.hdr-warna) .navbar-toggler{color:#fff}
:is(.hdr-gelap,.hdr-warna) .brand-sub{color:rgba(255,255,255,.72)}
:is(.hdr-gelap,.hdr-warna) .navbar-main .nav-link.active,:is(.hdr-gelap,.hdr-warna) .navbar-main .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}
:is(.hdr-gelap,.hdr-warna) .btn-nav-icon{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:1199.98px){:is(.hdr-gelap,.hdr-warna) .navbar-collapse{border-top:1px solid rgba(255,255,255,.12)}}

/* ---------- Sudut ---------- */
.sudut-tajam .agd-item,
.sudut-tajam .agd-tgl,
.sudut-tajam .akses-ic,
.sudut-tajam .akses-item,
.sudut-tajam .album-card,
.sudut-tajam .artikel-isi img,
.sudut-tajam .award-card,
.sudut-tajam .award-info,
.sudut-tajam .back-top,
.sudut-tajam .bagian-card,
.sudut-tajam .bagian-head,
.sudut-tajam .bagian-head .jml-berita,
.sudut-tajam .bagian-hero,
.sudut-tajam .bagian-ikon,
.sudut-tajam .btn-nav-icon,
.sudut-tajam .captcha-img,
.sudut-tajam .card-layanan .ic,
.sudut-tajam .card-profil .ic,
.sudut-tajam .cari-box,
.sudut-tajam .cari-box .form-control,
.sudut-tajam .cari-modal,
.sudut-tajam .cek-form,
.sudut-tajam .cek-hasil,
.sudut-tajam .cek-hasil dl,
.sudut-tajam .dok-galeri a,
.sudut-tajam .dok-ic,
.sudut-tajam .dok-item,
.sudut-tajam .folder-ic,
.sudut-tajam .folder-link,
.sudut-tajam .galeri-item,
.sudut-tajam .hal-kartu,
.sudut-tajam .halaman-card,
.sudut-tajam .halaman-gambar,
.sudut-tajam .halaman-gambar img,
.sudut-tajam .hasil-item,
.sudut-tajam .hero-card,
.sudut-tajam .hero-date-card,
.sudut-tajam .hk-ic,
.sudut-tajam .info-ic,
.sudut-tajam .info-item,
.sudut-tajam .info-kartu,
.sudut-tajam .info-tgl,
.sudut-tajam .input-icon .form-control,
.sudut-tajam .jam-card,
.sudut-tajam .jam-catatan,
.sudut-tajam .jam-detail li,
.sudut-tajam .jml-info,
.sudut-tajam .kontak-item i,
.sudut-tajam .lamp-dok,
.sudut-tajam .lamp-dok-ic,
.sudut-tajam .lampiran-box,
.sudut-tajam .lapor-card,
.sudut-tajam .lapor-isi,
.sudut-tajam .lapor-ketentuan,
.sudut-tajam .lapor-kode span,
.sudut-tajam .lapor-langkah .ll-ic,
.sudut-tajam .lapor-langkah li,
.sudut-tajam .lapor-mini,
.sudut-tajam .lapor-nasional,
.sudut-tajam .lapor-stat>div,
.sudut-tajam .lapor-sukses,
.sudut-tajam .layanan-item,
.sudut-tajam .lb-img,
.sudut-tajam .lb-item span,
.sudut-tajam .lk-item span,
.sudut-tajam .lkm,
.sudut-tajam .lkm i,
.sudut-tajam .lm-kartu,
.sudut-tajam .media-frame,
.sudut-tajam .navbar-main .dropdown-menu,
.sudut-tajam .navbar-main .nav-link,
.sudut-tajam .org-node,
.sudut-tajam .page-header-ic,
.sudut-tajam .pagination .page-link,
.sudut-tajam .pdf-frame,
.sudut-tajam .pdf-head,
.sudut-tajam .pegawai-card,
.sudut-tajam .penulis-card,
.sudut-tajam .pgm-item,
.sudut-tajam .pgm-tgl,
.sudut-tajam .populer-item .no,
.sudut-tajam .ppid-ic,
.sudut-tajam .ppid-intro,
.sudut-tajam .psy-card,
.sudut-tajam .psy-cek li,
.sudut-tajam .psy-kat-item,
.sudut-tajam .riwayat-tabel,
.sudut-tajam .sert-card,
.sudut-tajam .sosmed,
.sudut-tajam .sosmed-lg,
.sudut-tajam .stat-footer,
.sudut-tajam .tautan-item,
.sudut-tajam .tautan-item>i.bi,
.sudut-tajam .verif-card,
.sudut-tajam .verif-state,
.sudut-tajam .video-lite,
.sudut-tajam .zi-acc .accordion-item,
.sudut-tajam .zi-agen,
.sudut-tajam .zi-area,
.sudut-tajam .zi-banner,
.sudut-tajam .zi-dok,
.sudut-tajam .zi-dok-ic,
.sudut-tajam .zi-foto,
.sudut-tajam .zi-foto-badge,
.sudut-tajam .zi-foto-badge>i,
.sudut-tajam .zi-hasil,
.sudut-tajam .zi-ic,
.sudut-tajam .zi-komitmen,
.sudut-tajam .zi-maklumat,
.sudut-tajam .zi-mini-ic,
.sudut-tajam .zi-mini-item{border-radius:4px}
.sudut-tajam .btn,.sudut-tajam .form-control,.sudut-tajam .form-select,.sudut-tajam .input-group-text,.sudut-tajam .badge{border-radius:3px}
.sudut-bulat .agd-item,
.sudut-bulat .akses-item,
.sudut-bulat .album-card,
.sudut-bulat .award-card,
.sudut-bulat .bagian-card,
.sudut-bulat .bagian-head,
.sudut-bulat .cari-box,
.sudut-bulat .cari-modal,
.sudut-bulat .cek-form,
.sudut-bulat .cek-hasil,
.sudut-bulat .dok-item,
.sudut-bulat .hal-kartu,
.sudut-bulat .halaman-card,
.sudut-bulat .halaman-gambar,
.sudut-bulat .hasil-item,
.sudut-bulat .info-kartu,
.sudut-bulat .jam-card,
.sudut-bulat .lamp-dok,
.sudut-bulat .lapor-card,
.sudut-bulat .lapor-mini,
.sudut-bulat .layanan-item,
.sudut-bulat .lm-kartu,
.sudut-bulat .org-node,
.sudut-bulat .pdf-head,
.sudut-bulat .pegawai-card,
.sudut-bulat .penulis-card,
.sudut-bulat .pgm-item,
.sudut-bulat .psy-card,
.sudut-bulat .psy-cek li,
.sudut-bulat .psy-kat-item,
.sudut-bulat .riwayat-tabel,
.sudut-bulat .sert-card,
.sudut-bulat .tautan-item,
.sudut-bulat .verif-card,
.sudut-bulat .verif-state,
.sudut-bulat .zi-agen,
.sudut-bulat .zi-area,
.sudut-bulat .zi-dok,
.sudut-bulat .zi-hasil{border-radius:26px}
.sudut-bulat .btn{border-radius:999px}
.sudut-bulat .form-control,.sudut-bulat .form-select{border-radius:14px}

/* =====================================================================
 *  1. KLASIK UNDANA = tampilan asli (style.css), tanpa tambahan
 * ===================================================================== */

/* =====================================================================
 *  2. MODERN MINIMAL
 * ===================================================================== */
.tema-modern .navbar-main{box-shadow:none;border-bottom:1px solid var(--buk-line)}
.tema-modern.hdr-gelap .navbar-main,.tema-modern.hdr-warna .navbar-main{border-bottom:0}
.tema-modern .hero{background:var(--buk-navy)}
.tema-modern .hero::after{display:none}
.tema-modern .section-kicker{color:var(--buk-blue);letter-spacing:.22em;font-size:.72rem}
.tema-modern .section-title{font-weight:800;letter-spacing:-.02em}
.tema-modern :is(.card-layanan,.card-berita,.side-box,.halaman-card,.info-kartu,.akses-item,.layanan-item,.hal-kartu,.pgm-item,.agd-item,.award-card,.zi-area){box-shadow:none}
.tema-modern .card-layanan{border:1px solid var(--buk-line);border-bottom:3px solid var(--buk-blue)}
.tema-modern :is(.card-berita,.card-layanan,.layanan-item,.akses-item,.hal-kartu):hover{transform:none;box-shadow:none;border-color:var(--buk-blue)}
.tema-modern .page-header{background:var(--buk-soft);color:var(--buk-ink);border-bottom:1px solid var(--buk-line)}
.tema-modern .page-header h1,.tema-modern .page-header .ph-judul{color:var(--buk-navy)}
.tema-modern .page-header .breadcrumb-item,.tema-modern .page-header .breadcrumb-item a{color:var(--buk-muted)}
.tema-modern .page-header .breadcrumb-item.active{color:var(--buk-blue)}
.tema-modern .page-header .breadcrumb-item+.breadcrumb-item::before{color:var(--buk-muted)}
.tema-modern .page-header-sub{color:var(--buk-muted)}
.tema-modern .page-header-ic{background:#fff;color:var(--buk-navy);box-shadow:inset 0 0 0 1px var(--buk-line)}
.tema-modern .info-head.pgm,.tema-modern .info-head.agd{background:var(--buk-navy)}
.tema-modern .footer-title::after{background:var(--buk-blue)}

/* =====================================================================
 *  3. AKADEMIK ELEGAN
 * ===================================================================== */
.tema-akademik{background:#fbf8f3}
.tema-akademik .bg-soft{background:#f3ece0}
.tema-akademik :is(h1,h2,h3,.section-title,.hero-title,.page-header h1,.page-header .ph-judul){font-weight:700;letter-spacing:-.01em}
.tema-akademik .navbar-main{box-shadow:none;border-bottom:3px double var(--buk-gold)}
.tema-akademik .topbar{border-bottom:2px solid var(--buk-gold)}
.tema-akademik .section-kicker{font-family:var(--font-isi);font-style:italic;text-transform:none;letter-spacing:.02em;font-size:.95rem;font-weight:600}
.tema-akademik .section-title::after{content:"";display:block;width:64px;height:3px;margin:.6rem auto 0;background:var(--buk-gold)}
.tema-akademik .text-start .section-title::after,.tema-akademik .info-judul-seksi .section-title::after{margin-left:0}
.tema-akademik .hero{background:linear-gradient(135deg,var(--buk-dark),var(--buk-navy))}
.tema-akademik .hero::after{background:#fbf8f3}
.tema-akademik .page-header{background:var(--buk-navy);border-bottom:4px double var(--buk-gold)}
.tema-akademik :is(.card-berita,.side-box,.halaman-card,.info-kartu,.card-layanan,.layanan-item,.akses-item,.hal-kartu){box-shadow:0 2px 0 rgba(0,0,0,.03);border-color:#e8dfd0}
.tema-akademik .card-layanan{border-bottom-color:var(--buk-gold)}
.tema-akademik .info-head.pgm{background:var(--buk-navy)}
.tema-akademik .info-head.agd{background:var(--buk-dark)}
.tema-akademik .artikel-isi{font-size:1.06rem;line-height:1.85}

/* =====================================================================
 *  4. KORPORAT TEGAS
 * ===================================================================== */
.tema-korporat .navbar-main .nav-link{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:700}
.tema-korporat .btn{text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.tema-korporat .btn-gold{color:#fff}
.tema-korporat .btn-gold:hover{color:#fff;filter:brightness(1.08)}
.tema-korporat .hero{background:linear-gradient(115deg,var(--buk-dark) 0%,var(--buk-navy) 60%,var(--buk-blue) 100%)}
.tema-korporat .hero::after{inset:auto 0 -1px 0;height:70px;border-radius:0;clip-path:polygon(0 100%,100% 0,100% 100%)}
.tema-korporat .section-kicker{color:var(--buk-gold)}
.tema-korporat .section-title{text-transform:uppercase;letter-spacing:.02em}
.tema-korporat .page-header{background:var(--buk-navy);border-bottom:5px solid var(--buk-gold)}
.tema-korporat .card-layanan{border-bottom:0;border-top:4px solid var(--buk-gold)}
.tema-korporat .card-berita .kat,.tema-korporat .zi-predikat,.tema-korporat .ticker-label{color:#fff}
.tema-korporat .ticker-label::after{border-left-color:var(--buk-gold)}
.tema-korporat .footer-title{text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}

/* =====================================================================
 *  5. SEGAR CERIA
 * ===================================================================== */
.tema-segar{background:#f7fbfa}
.tema-segar .bg-soft{background:#e9f6f3}
.tema-segar .section-kicker{display:inline-block;background:color-mix(in srgb,var(--buk-gold) 16%,#fff);color:color-mix(in srgb,var(--buk-gold) 70%,#000);padding:.3rem .9rem;border-radius:999px;letter-spacing:.08em}
.tema-segar .hero{background:radial-gradient(900px 420px at 90% -10%,color-mix(in srgb,var(--buk-gold) 35%,transparent),transparent 60%),linear-gradient(135deg,var(--buk-navy),var(--buk-blue))}
.tema-segar .hero::after{background:#f7fbfa}
.tema-segar .navbar-main .nav-link{border-radius:999px}
.tema-segar .page-header{background:linear-gradient(135deg,var(--buk-navy),var(--buk-blue));border-radius:0 0 36px 36px}
.tema-segar .card-layanan{border-bottom:0;box-shadow:0 14px 34px color-mix(in srgb,var(--buk-navy) 14%,transparent)}
.tema-segar .btn-gold{color:#fff}
.tema-segar .card-berita .kat,.tema-segar .ticker-label,.tema-segar .zi-predikat{color:#fff}

/* =====================================================================
 *  6. MODE GELAP  (html[data-bs-theme=dark] untuk komponen Bootstrap)
 * ===================================================================== */
.tema-gelap{--buk-ink:#e6ecf7;--buk-muted:#a3b1c9;--buk-line:#26324d;--buk-soft:#131c2e;--tm-surface:#161f33;--tm-bg:#0b1220;background:var(--tm-bg);color:var(--buk-ink)}
.tema-gelap .bg-soft,.tema-gelap .bg-light{background:var(--buk-soft)!important}
.tema-gelap .bg-white{background:var(--tm-surface)!important}
.tema-gelap .agd-item,
.tema-gelap .akses-item,
.tema-gelap .album-card,
.tema-gelap .artikel,
.tema-gelap .award-card,
.tema-gelap .bagian-card,
.tema-gelap .bagian-head,
.tema-gelap .btn-lapor,
.tema-gelap .card-berita,
.tema-gelap .card-layanan,
.tema-gelap .card-profil,
.tema-gelap .cari-box,
.tema-gelap .cari-modal,
.tema-gelap .cek-form,
.tema-gelap .cek-hasil,
.tema-gelap .chip-filter,
.tema-gelap .dok-item,
.tema-gelap .hal-kartu,
.tema-gelap .halaman-card,
.tema-gelap .halaman-gambar,
.tema-gelap .hasil-item,
.tema-gelap .info-kartu,
.tema-gelap .jam-card,
.tema-gelap .lamp-dok,
.tema-gelap .lapor-card,
.tema-gelap .lapor-kode span,
.tema-gelap .lapor-mini,
.tema-gelap .lapor-tab .nav-link,
.tema-gelap .layanan-item,
.tema-gelap .lm-kartu,
.tema-gelap .login-form-wrap,
.tema-gelap .navbar-main,
.tema-gelap .org-node,
.tema-gelap .pdf-head,
.tema-gelap .pegawai-card,
.tema-gelap .penulis-card,
.tema-gelap .pgm-item,
.tema-gelap .psy-card,
.tema-gelap .psy-cek li,
.tema-gelap .psy-kat-item,
.tema-gelap .riwayat-tabel,
.tema-gelap .seputar-tabs .nav-link,
.tema-gelap .sert-card,
.tema-gelap .side-box,
.tema-gelap .tautan-item,
.tema-gelap .ticker,
.tema-gelap .verif-card,
.tema-gelap .verif-state,
.tema-gelap .zi-agen,
.tema-gelap .zi-area,
.tema-gelap .zi-dok,
.tema-gelap .zi-hasil{background:var(--tm-surface);color:var(--buk-ink);border-color:var(--buk-line)}
.tema-gelap .info-semua,
.tema-gelap .info-tab,
.tema-gelap .info-tgl,
.tema-gelap .info-tgl.agd,
.tema-gelap .lapor-ketentuan,
.tema-gelap .lapor-mini-tg,
.tema-gelap .lapor-tanggapan,
.tema-gelap .lm-item.st-kedaluwarsa .lm-kartu,
.tema-gelap .media-frame,
.tema-gelap .riwayat-tabel thead th,
.tema-gelap .fit-utuh{background:var(--buk-soft);border-color:var(--buk-line)}
.tema-gelap .artikel-isi,
.tema-gelap .dok-ket,
.tema-gelap .info-judul,
.tema-gelap .lapor-ketentuan,
.tema-gelap .lapor-mini-tg,
.tema-gelap .lead-ringkas,
.tema-gelap .sambutan,
.tema-gelap .sert-peringkat,
.tema-gelap .lapor-kode span,
.tema-gelap .btn-lapor,
.tema-gelap .info-tgl,
.tema-gelap .info-tgl.agd{color:var(--buk-ink)}
.tema-gelap .hero::after{background:var(--tm-bg)}
.tema-gelap :is(.card-berita,.card-layanan,.side-box,.halaman-card,.info-kartu,.layanan-item,.akses-item,.hal-kartu){box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tema-gelap :is(.section-title,.brand-title,.kat-nama,.info-judul,.hk-judul,.zi-area b,.side-title){color:#f1f5ff}
.tema-gelap :where(a:not(.btn)){color:#8fb4ff}
.tema-gelap .btn-gold,.tema-gelap .btn-gold:hover{color:#1b1b1b}
.tema-gelap .btn-primary-buk{background:#2a5bc0}
.tema-gelap .btn-primary-buk:hover{background:#3a6ad0}
.tema-gelap .btn-outline-primary-buk{border-color:#5b8def;color:#cfe0ff}
.tema-gelap .text-muted{color:var(--buk-muted)!important}
.tema-gelap .card-berita .kat,.tema-gelap .zi-predikat,.tema-gelap .ticker-label,.tema-gelap .info-item.penting .info-tgl{color:#1b1b1b}
.tema-gelap .info-kosong,.tema-gelap .info-ring,.tema-gelap .info-meta{color:var(--buk-muted)}
.tema-gelap .akses-ic.is-img,.tema-gelap .footer-logos.fl-putih .fl-item{background:#fff}
.tema-gelap img.brand-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
.tema-gelap .form-control,.tema-gelap .form-select{background-color:var(--buk-soft);border-color:var(--buk-line);color:var(--buk-ink)}

/* =====================================================================
 *  7. KONTRAS TINGGI (aksesibel)
 * ===================================================================== */
html:has(body.tema-kontras){font-size:17.5px}
.tema-kontras{--buk-ink:#000;--buk-muted:#1a1a1a;--buk-line:#000;--buk-soft:#f2f2f2;background:#fff;color:#000}
.tema-kontras a{color:#0000c8;text-decoration:underline;text-underline-offset:3px}
.tema-kontras a:hover{color:#000;background:#ffd400}
.tema-kontras :focus-visible{outline:4px solid #ffd400!important;outline-offset:2px;box-shadow:0 0 0 7px #000!important}
.tema-kontras .navbar-main .nav-link,.tema-kontras .navbar-brand,.tema-kontras .btn{text-decoration:none}
.tema-kontras .navbar-main .nav-link.active,.tema-kontras .navbar-main .nav-link:hover{background:#ffd400;color:#000}
.tema-kontras .hero,.tema-kontras .page-header{background:#000}
.tema-kontras .hero::after{display:none}
.tema-kontras .section-kicker{color:#000;background:#ffd400;display:inline-block;padding:.15rem .6rem}
.tema-kontras .section-title{color:#000}
.tema-kontras :is(.card-berita,.card-layanan,.side-box,.halaman-card,.info-kartu,.layanan-item,.akses-item,.hal-kartu,.pgm-item,.agd-item,.zi-area,.award-card,.lapor-card){box-shadow:none;border:2px solid #000}
.tema-kontras .card-layanan{border-bottom:6px solid #000}
.tema-kontras :is(.text-muted,.brand-sub,.info-ring,.info-meta,.hk-ket,.kat-desk){color:#1a1a1a!important}
.tema-kontras .btn-gold{background:#ffd400;color:#000;border:2px solid #000}
.tema-kontras .btn-primary-buk{background:#000;color:#fff;border:2px solid #000}
.tema-kontras .btn-outline-primary-buk{border:2px solid #000;color:#000}
.tema-kontras .info-head.pgm,.tema-kontras .info-head.agd{background:#000}
.tema-kontras .footer-main{background:#000;color:#fff}
.tema-kontras .footer-main a{color:#ffd400}
.tema-kontras .ticker{border-bottom:2px solid #000}
.tema-kontras:is(.hdr-gelap,.hdr-warna) .brand-sub{color:#fff!important}
/* Dashboard Keuangan pada Mode Gelap / Kontras */
.tema-gelap .keu-nav .folder-link{color:var(--buk-ink)}
.tema-gelap .keu-nav .folder-link.active,.tema-gelap .keu-nav .folder-link:hover{background:color-mix(in srgb,var(--w) 28%,var(--tm-surface));color:#fff}
.tema-gelap .keu-kpi,.tema-gelap .keu-menu{color:var(--buk-ink)}
.tema-gelap .keu-kpi[style*="#1d5fc4"]{--kc:#5b8def!important}
.tema-kontras .keu-kpi,.tema-kontras .keu-menu,.tema-kontras .keu-nav .folder-link{text-decoration:none;color:#000}
.tema-kontras .keu-kpi>b{color:#000}
.tema-kontras .keu-nav .folder-link.active{background:#ffd400;color:#000}