/* ============================================================================
 * PESSEL HALUS — lapisan penghalus tampilan
 * ----------------------------------------------------------------------------
 * Berkas ini ADITIF: dimuat setelah pessel-theme-modern.css dan hanya
 * menimpa tampilan, tidak mengubah struktur apa pun. Membuangnya cukup
 * dengan menghapus satu baris <link> di resources/views/commons/meta.blade.php,
 * dan tema kembali persis seperti semula.
 *
 * Isinya dua bagian:
 *   BAGIAN 1 — Penghalus komponen yang sudah ada (kartu artikel, widget
 *              sidebar, judul seksi). Berlaku di semua halaman.
 *   BAGIAN 2 — Blok beranda baru (hero Layanan Mandiri, menu cepat, kartu
 *              layanan). Hanya muncul di beranda lewat partial
 *              partials/beranda-hero.blade.php.
 *
 * Semua warna mengambil token yang sudah ada di pessel-theme-modern.css,
 * dengan nilai cadangan supaya tetap benar bila token itu berubah.
 * ========================================================================== */

:root {
    /* Radius lebih besar dari tema dasar — ini sumber kesan "halus" */
    --hls-radius: 18px;
    --hls-radius-lg: 22px;
    --hls-radius-pill: 999px;

    /* Bayangan sangat lembut, berlapis dua: garis tipis + kabut lebar */
    --hls-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .18);
    --hls-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -18px rgba(15, 23, 42, .28);

    /* --hls-line untuk pemisah DI DALAM kartu (samar), --hls-garis untuk
       batas LUAR kartu (harus terlihat jelas supaya antar kartu tegas) */
    --hls-line: rgba(15, 23, 42, .06);
    --hls-garis: #e2e8f0;
    --hls-gerak: .35s cubic-bezier(.4, 0, .2, 1);

    --hls-biru: var(--primary-blue, #0ea5e9);
    --hls-hijau: var(--primary-green, #10b981);
    --hls-gradien: var(--primary-gradient, linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #10b981 100%));
}

/* ============================================================================
 * BAGIAN 1 — PENGHALUS KOMPONEN YANG SUDAH ADA
 * ========================================================================== */

/* Latar halaman sedikit lebih sejuk supaya kartu putih terangkat -------- */
body {
    background-color: #f4f6fb;
}

/* --- Kartu artikel ------------------------------------------------------
 * Sebelumnya .pessel-art-row hanya baris polos tanpa radius/bayangan —
 * inilah penyebab utama beranda terasa kaku. */
.content_left .pessel-art-row {
    background: #fff;
    border-radius: var(--hls-radius);
    box-shadow: var(--hls-shadow);
    border: 1px solid var(--hls-garis);
    padding: 16px;
    margin-bottom: 18px;
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

.content_left .pessel-art-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--hls-shadow-hover);
}

/* Gambar di dalam kartu ikut membulat mengikuti sudut kartu */
.content_left .pessel-art-row img,
.content_left .pessel-art-row .post-thumb img {
    border-radius: calc(var(--hls-radius) - 8px);
}

/* Jarak antar kartu pada grid artikel */
.article-grid > * {
    margin-bottom: 18px;
}

/* --- Widget sidebar -----------------------------------------------------
 * Dijadikan kartu putih terpisah, seperti pada rujukan. */
.sidebar-widget {
    background: #fff;
    border-radius: var(--hls-radius);
    box-shadow: var(--hls-shadow);
    border: 1px solid var(--hls-garis);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow var(--hls-gerak);
}

.sidebar-widget:hover {
    box-shadow: var(--hls-shadow-hover);
}

.sidebar-widget > .widget-body {
    padding: 18px;
}

/* Judul widget: huruf lebih tenang, garis bawah tipis, bukan blok tebal.
   Markup nyatanya .sidebar-widget > .widget-body > .single_bottom_rightbar > h5 */
.sidebar-widget .single_bottom_rightbar > h5,
.sidebar-widget .single_bottom_rightbar > h5.box-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-primary, #0f172a);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hls-line);
}

/* --- Wadah statistik & slider ------------------------------------------ */
.statistik-container,
.slider-wrapper {
    border-radius: var(--hls-radius-lg) !important;
    box-shadow: var(--hls-shadow) !important;
    overflow: hidden;
}

.statistik-container {
    margin-bottom: 24px;
}

/* --- Judul seksi --------------------------------------------------------
 * Dari rata-kiri 18px jadi dua baris: label kecil berwarna + judul tebal. */
.content_left .section-title {
    position: relative;
    padding: 0 0 0 14px;
    margin: 32px 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -.01em;
}

.content_left .section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: var(--hls-radius-pill);
    background: var(--hls-gradien);
}

/* --- Tombol & paginasi -------------------------------------------------- */
.content_left .btn,
.sidebar-widget .btn {
    border-radius: var(--hls-radius-pill);
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

.content_left .btn:hover,
.sidebar-widget .btn:hover {
    transform: translateY(-1px);
}

.pagination_area {
    margin-top: 26px;
}

.pagination_area a,
.pagination_area span {
    border-radius: 10px !important;
}

/* --- Ruang napas antar kolom ------------------------------------------- */
@media (min-width: 992px) {
    .content_bottom > .row > .col-lg-8 {
        padding-right: 26px;
    }
}

/* ============================================================================
 * BAGIAN 2 — BLOK BERANDA (hero, menu cepat, kartu layanan)
 * Markup-nya ada di resources/views/partials/beranda-hero.blade.php
 * ========================================================================== */

.hls-beranda {
    margin: 0 0 26px;
}

/* Baris atas: hero besar (kiri) + 4 menu cepat (kanan) ------------------- */
.hls-atas {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

/* --- Hero Layanan Mandiri ---------------------------------------------- */
.hls-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 30px 32px;
    border-radius: var(--hls-radius-lg);
    background: var(--hls-gradien);
    color: #fff;
    box-shadow: 0 18px 36px -20px rgba(14, 165, 233, .65);
    min-height: 196px;
}

/* Lingkaran cahaya samar supaya gradiennya tidak rata dan datar */
.hls-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    pointer-events: none;
}

.hls-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}

.hls-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 34em;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
}

.hls-hero .hls-tombol {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: 6px;
    padding: 11px 22px;
    border-radius: var(--hls-radius-pill);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background var(--hls-gerak), transform var(--hls-gerak);
}

.hls-hero .hls-tombol:hover {
    background: #fff;
    color: #0f766e;
    transform: translateY(-2px);
    text-decoration: none;
}

.hls-hero .hls-ilustrasi {
    position: absolute;
    right: 18px;
    bottom: -6px;
    width: 150px;
    opacity: .9;
    pointer-events: none;
}

/* --- Empat menu cepat --------------------------------------------------- */
.hls-cepat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hls-kartu {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 16px;
    border-radius: var(--hls-radius);
    background: #fff;
    border: 1px solid var(--hls-garis);
    box-shadow: var(--hls-shadow);
    text-decoration: none;
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak), border-color var(--hls-gerak);
}

.hls-kartu:hover {
    transform: translateY(-4px);
    box-shadow: var(--hls-shadow-hover);
    border-color: rgba(14, 165, 233, .28);
    text-decoration: none;
}

.hls-kartu .hls-ikon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--hls-ikon-bg, rgba(14, 165, 233, .1));
    color: var(--hls-ikon-warna, #0ea5e9);
}

.hls-kartu .hls-ikon svg {
    width: 21px;
    height: 21px;
}

.hls-kartu .hls-teks {
    min-width: 0;
}

.hls-kartu .hls-judul {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}

.hls-kartu .hls-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

/* Warna ikon per kartu — lembut, tidak menyala */
.hls-kartu.hls-biru   { --hls-ikon-bg: rgba(14, 165, 233, .1);  --hls-ikon-warna: #0284c7; }
.hls-kartu.hls-kuning { --hls-ikon-bg: rgba(245, 158, 11, .12); --hls-ikon-warna: #d97706; }
.hls-kartu.hls-ungu   { --hls-ikon-bg: rgba(139, 92, 246, .12); --hls-ikon-warna: #7c3aed; }
.hls-kartu.hls-hijau  { --hls-ikon-bg: rgba(16, 185, 129, .12); --hls-ikon-warna: #059669; }

/* --- Tiga kartu layanan ------------------------------------------------- */
.hls-layanan {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.hls-layanan-kartu {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 24px;
    border-radius: var(--hls-radius-lg);
    background: #fff;
    border: 1px solid var(--hls-garis);
    box-shadow: var(--hls-shadow);
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

/* Semburat pastel di sudut — pengganti ilustrasi PNG */
.hls-layanan-kartu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hls-semburat, linear-gradient(135deg, rgba(14, 165, 233, .07), rgba(16, 185, 129, .07)));
    pointer-events: none;
}

.hls-layanan-kartu > * {
    position: relative;
    z-index: 1;
}

.hls-layanan-kartu:hover {
    transform: translateY(-4px);
    box-shadow: var(--hls-shadow-hover);
}

.hls-layanan-kartu .hls-ikon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--hls-shadow);
    color: var(--hls-ikon-warna, #0284c7);
}

.hls-layanan-kartu .hls-ikon svg {
    width: 23px;
    height: 23px;
}

.hls-layanan-kartu h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.hls-layanan-kartu p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary, #475569);
}

.hls-layanan-kartu .hls-tautan {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--hls-radius-pill);
    border: 1px solid var(--hls-ikon-warna, #0284c7);
    color: var(--hls-ikon-warna, #0284c7);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--hls-gerak), color var(--hls-gerak), transform var(--hls-gerak);
}

.hls-layanan-kartu .hls-tautan:hover {
    background: var(--hls-ikon-warna, #0284c7);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}

.hls-layanan-kartu.hls-biru  { --hls-ikon-warna: #0284c7; --hls-semburat: linear-gradient(135deg, rgba(14, 165, 233, .09), rgba(255, 255, 255, 0)); }
.hls-layanan-kartu.hls-hijau { --hls-ikon-warna: #059669; --hls-semburat: linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(255, 255, 255, 0)); }
.hls-layanan-kartu.hls-ungu  { --hls-ikon-warna: #7c3aed; --hls-semburat: linear-gradient(135deg, rgba(139, 92, 246, .09), rgba(255, 255, 255, 0)); }

/* --- Penyesuaian layar kecil -------------------------------------------- */
@media (max-width: 991px) {
    .hls-atas { grid-template-columns: minmax(0, 1fr); }
    .hls-layanan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hls-hero .hls-ilustrasi { width: 120px; opacity: .55; }
}

@media (max-width: 640px) {
    .hls-cepat { grid-template-columns: minmax(0, 1fr); }
    .hls-layanan { grid-template-columns: minmax(0, 1fr); }
    .hls-hero { padding: 24px 22px; min-height: 0; }
    .hls-hero h2 { font-size: 20px; }
    .hls-hero .hls-ilustrasi { display: none; }
    .content_left .pessel-art-row { padding: 13px; }
}

/* Hormati pengguna yang mematikan animasi di sistemnya */
@media (prefers-reduced-motion: reduce) {
    .hls-kartu,
    .hls-layanan-kartu,
    .content_left .pessel-art-row,
    .hls-hero .hls-tombol {
        transition: none;
    }

    .hls-kartu:hover,
    .hls-layanan-kartu:hover,
    .content_left .pessel-art-row:hover,
    .hls-hero .hls-tombol:hover {
        transform: none;
    }
}

/* ============================================================================
 * BAGIAN 3 — SEKSI APB [DESA] DI KAKI HALAMAN & ISI WIDGET SIDEBAR
 * ========================================================================== */

/* --- Judul seksi bergaya "aksen + dua warna" ---------------------------
 * Markup-nya disisipkan di partials/apbdesa-tema.blade.php. */
.hls-judul-seksi {
    text-align: center;
    max-width: 760px;
    margin: 8px auto 26px;
    padding: 0 16px;
}

.hls-judul-aksen {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #f59e0b;
}

.hls-judul-utama {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--text-primary, #0f172a);
}

/* Kata pertama diberi gradien — sumber kesan "hidup" pada rujukan */
.hls-judul-utama > span {
    background: var(--hls-gradien);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hls-judul-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-muted, #64748b);
}

/* --- Tiga kartu APB ----------------------------------------------------- */
#transparansi-footer {
    padding-top: 34px !important;
    padding-bottom: 10px;
}

#transparansi-footer .card {
    border-radius: var(--hls-radius) !important;
    border: 1px solid var(--hls-garis);
    box-shadow: var(--hls-shadow);
    overflow: hidden;
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

#transparansi-footer .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hls-shadow-hover);
}

/* Kepala kartu: latar abu dilepas, diganti garis tipis dan huruf normal */
#transparansi-footer .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--hls-line);
    padding: 16px 18px;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary, #0f172a);
}

#transparansi-footer .card-header .fa {
    margin-right: 6px;
    color: var(--hls-biru);
}

#transparansi-footer .card-body {
    padding: 18px;
}

#transparansi-footer .progress-group {
    margin-bottom: 16px;
}

#transparansi-footer .progress-group .title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

/* Batang kemajuan: tipis, membulat penuh, berisi gradien tema */
#transparansi-footer .progress {
    height: 8px;
    border-radius: var(--hls-radius-pill);
    background: #eef2f7;
    box-shadow: none;
    overflow: hidden;
}

#transparansi-footer .progress-bar {
    border-radius: var(--hls-radius-pill);
    background: var(--hls-gradien);
    box-shadow: none;
    transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

/* --- Isi widget sidebar ------------------------------------------------- */

/* Ikon pada judul widget diberi warna tema supaya tidak abu rata */
.sidebar-widget .single_bottom_rightbar > h5 .fa {
    margin-right: 4px;
    color: var(--hls-biru);
}

.sidebar-widget .single_bottom_rightbar > h5 a {
    color: inherit;
    text-decoration: none;
}

/* Tab Terbaru | Populer | Acak jadi sakelar berbentuk pil */
.sidebar-widget .nav-tabs.custom-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border: 0;
    border-radius: var(--hls-radius-pill);
    background: #f1f5f9;
}

.sidebar-widget .nav-tabs.custom-tabs > li {
    flex: 1;
    float: none;
    margin: 0;
}

.sidebar-widget .nav-tabs.custom-tabs > li > a {
    display: block;
    padding: 7px 6px;
    border: 0 !important;
    border-radius: var(--hls-radius-pill);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    transition: background var(--hls-gerak), color var(--hls-gerak);
}

.sidebar-widget .nav-tabs.custom-tabs > li.active > a,
.sidebar-widget .nav-tabs.custom-tabs > li > a:hover {
    background: #fff;
    color: var(--hls-biru);
    box-shadow: var(--hls-shadow);
}

/* Daftar arsip artikel — CSS dasar SUDAH mengaturnya dengan benar dan
 * berkomentar: gambar 46x46, cuplikan 11px/15px yang diklem dua baris lewat
 * max-height: 30px, tanggal 10,5px, dan pemisah antar artikel di
 * #ul-menu tr:nth-child(even).
 *
 * JANGAN menimpa font-size atau line-height .arsip-cuplikan. Tinggi klemnya
 * dihitung tepat 2 x 15px; begitu line-height diubah, 30px tidak lagi jatuh
 * di batas baris dan baris kedua terpotong separuh.
 *
 * Yang benar-benar perlu hanya dua hal di bawah ini. */

/* Pemisah antar artikel bawaannya #f1f5f9 - terlalu samar untuk membedakan
   satu artikel dengan artikel berikutnya. */
.sidebar-widget .single_bottom_rightbar #ul-menu tr:nth-child(even) td {
    border-bottom-color: var(--hls-garis) !important;
}

/* Kolom teks arsip memakai atribut HTML align="justify" - perataan penuh di
   kolom selebar 300px membuat jarak antar kata melebar tidak karuan. */
.sidebar-widget .single_bottom_rightbar #ul-menu td[align="justify"] {
    text-align: left !important;
}

/* Tabel Kantor [Desa] & Statistik Pengunjung: baris berselang lembut */
.sidebar-widget table.counter,
.sidebar-widget .box-body table {
    width: 100%;
    font-size: 13px;
}

.sidebar-widget table.counter > tbody > tr > td,
.sidebar-widget table.counter td {
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--hls-line);
    background: transparent !important;
    color: var(--text-secondary, #475569);
    vertical-align: top;
}

.sidebar-widget table.counter tr:last-child td {
    border-bottom: 0;
}

.sidebar-widget table.counter td.dot {
    width: 18px;
    text-align: center;
    color: var(--text-light, #94a3b8);
}

.sidebar-widget table.counter td.case {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

/* Peta di dalam widget ikut membulat mengikuti kartunya */
.sidebar-widget .leaflet-container,
.sidebar-widget [id^="peta"],
.sidebar-widget [id^="map"] {
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .hls-judul-utama { font-size: 25px; }
    .hls-judul-aksen { font-size: 13.5px; }
}

/* ============================================================================
 * BAGIAN 4 — MENIMPA BLOK "PPID CLEAN" PADA WIDGET SIDEBAR
 * ----------------------------------------------------------------------------
 * Di ujung pessel-theme-modern.css ada blok yang mengunci tampilan widget
 * dengan !important di hampir setiap baris: kepala widget dipaksa jadi bar
 * teal (var(--pp)) HURUF BESAR putih, bingkai radius 12px tanpa bayangan, dan
 * efek angkat saat disentuh dimatikan.
 *
 * Karena dikunci !important, satu-satunya cara menghaluskannya adalah
 * menimpanya dengan !important juga. Blok ini sengaja diletakkan paling
 * bawah supaya menang urutan.
 *
 * CATATAN: mematikan efek angkat itu tampaknya keputusan sengaja (ada
 * komentarnya di berkas aslinya). Di sini yang dikembalikan hanya bayangan
 * lembut pada kartu luar — kartu tetap tidak melompat naik.
 * ========================================================================== */

/* Satu kartu saja: bingkai dalam dilepas supaya tidak ada kotak di dalam kotak */
.sidebar-widget > .widget-body {
    padding: 0;
}

.sidebar-widget .single_bottom_rightbar {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

/* Kepala widget: dari bar teal huruf besar → putih, huruf normal, garis tipis */
.sidebar-widget .single_bottom_rightbar > h5 {
    background: #f8fafc !important;
    background-image: none !important;
    color: var(--text-primary, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 16px 18px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hls-garis) !important;
    border-radius: 0 !important;
    gap: 9px;
}

/* Ikon tetap berwarna khas tema supaya kepala widget tidak terasa kosong */
.sidebar-widget .single_bottom_rightbar > h5 i {
    color: var(--pp, #0f766e) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.sidebar-widget .single_bottom_rightbar > h5 a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Isi widget diberi ruang, karena padding pindah dari .widget-body ke sini */
.sidebar-widget .single_bottom_rightbar > .box-body,
.sidebar-widget .single_bottom_rightbar > .content_middle_middle,
.sidebar-widget .single_bottom_rightbar > .data-case-container {
    padding: 16px 18px !important;
}

.sidebar-widget .single_bottom_rightbar > .nav-tabs,
.sidebar-widget .single_bottom_rightbar > .tab-content,
.sidebar-widget .single_bottom_rightbar > ul:not(.nav-tabs),
.sidebar-widget .single_bottom_rightbar > p,
.sidebar-widget .single_bottom_rightbar > table {
    margin-left: 18px;
    margin-right: 18px;
}

.sidebar-widget .single_bottom_rightbar > .nav-tabs {
    margin-top: 16px;
}

.sidebar-widget .single_bottom_rightbar > .tab-content {
    padding-bottom: 16px;
}

/* Daftar menu kategori: butir jadi baris berjarak, bukan daftar rapat */
.sidebar-widget .single_bottom_rightbar .box-body ul,
.sidebar-widget .single_bottom_rightbar .content_middle_middle ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-widget .single_bottom_rightbar .box-body ul > li > a,
.sidebar-widget .single_bottom_rightbar .content_middle_middle ul > li > a {
    display: block;
    padding: 9px 0;
    font-size: 13.5px;
    color: var(--text-secondary, #475569);
    border-bottom: 1px solid var(--hls-line);
    text-decoration: none;
    transition: color var(--hls-gerak), padding-left var(--hls-gerak);
}

.sidebar-widget .single_bottom_rightbar .box-body ul > li:last-child > a,
.sidebar-widget .single_bottom_rightbar .content_middle_middle ul > li:last-child > a {
    border-bottom: 0;
}

.sidebar-widget .single_bottom_rightbar .box-body ul > li > a:hover,
.sidebar-widget .single_bottom_rightbar .content_middle_middle ul > li > a:hover {
    color: var(--pp, #0f766e);
    padding-left: 5px;
}

/* Peta & gambar di dalam widget ikut membulat */
.sidebar-widget .single_bottom_rightbar .leaflet-container,
.sidebar-widget .single_bottom_rightbar img.img-responsive,
.sidebar-widget .single_bottom_rightbar .aparatur-image-container {
    border-radius: 12px !important;
    overflow: hidden;
}

/* Kartu luar: satu-satunya yang bernaungan. Batas antar kartu ditandai
   garis keliling tegas + jarak 20px, tanpa bar warna di puncak. */
.sidebar-widget {
    border: 1px solid var(--hls-garis) !important;
    box-shadow: var(--hls-shadow) !important;
    border-radius: var(--hls-radius) !important;
    overflow: hidden;
}

/* ============================================================================
 * BAGIAN 5 — JAM DI POJOK KANAN ATAS HEADER
 * ----------------------------------------------------------------------------
 * Elemen <div id="jam"> dipindah dari partials/sidebar.blade.php ke
 * partials/header.blade.php. JS pengisinya di commons/meta.blade.php mencari
 * elemen lewat getElementById, jadi perpindahan ini tidak menyentuh JS.
 *
 * Aturan dasar #jam (kotak gradien 24px, font 20px, margin-bawah 30px) cocok
 * untuk sidebar, tapi kebesaran di header — di sini dijadikan keping pil.
 * ========================================================================== */

.header_actions #jam {
    order: -1;                    /* selalu di baris teratas kolom aksi */
    background: rgba(255, 255, 255, .16) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--hls-radius-pill) !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    margin: 0 0 4px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    text-align: right;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
}

/* JS menulis "<b>Kamis, 27 Agustus 2026</b><br>09 : 56 : 22". <br> dilipat
   supaya muat satu baris, dan pemisahnya dipasang lewat ::after. */
.header_actions #jam br {
    display: none;
}

/* CSS dasar (pessel-theme-modern.css:5296) menyetel #jam b jadi
   display: block dengan warna teal #0d9488 !important — itu pas untuk jam
   versi sidebar berlatar terang, tapi di header berlatar foto warnanya jadi
   tenggelam dan display:block memaksanya turun baris. Keduanya ditimpa. */
.header_actions #jam b {
    display: inline !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .92) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
}

.header_actions #jam b::after {
    content: "  |  ";
    font-weight: 400;
    opacity: .6;
}

@media (max-width: 640px) {
    .header_actions #jam {
        font-size: 11.5px !important;
        padding: 5px 12px !important;
    }
}

/* ============================================================================
 * BAGIAN 6 — MELEMBUTKAN HEADER BERFOTO
 * ----------------------------------------------------------------------------
 * Susunan lapisan header (dari belakang ke depan):
 *   ::before  foto latar, dipasang lewat <style> sebaris di header.blade.php
 *             dengan opacity: 1 !important dan z-index: -1
 *   ::after   lapisan gelap dari pessel-theme-modern.css:4380, juga z-index: -1
 *             sehingga tergambar DI ATAS foto (urutan cat, bukan z-index)
 *   .container isi header, z-index: 2
 *
 * Masalahnya lapisan gelap itu hanya 10-30% di paruh atas — tepat di tempat
 * judul dan alamat berada — sehingga dedaunan foto masih beradu dengan huruf.
 *
 * Dua langkah di bawah: fotonya dikaburkan supaya jadi TEKSTUR (bukan gambar
 * penuh detail), dan lapisan gelapnya dinaikkan secukupnya di paruh atas.
 * ========================================================================== */

.header-container::before {
    /* scale menutup tepi yang memudar akibat blur; tanpa itu muncul garis
       terang tipis di keempat sisi header. */
    filter: blur(3px) saturate(.9) brightness(.85);
    transform: scale(1.06);
}

.header-container::after {
    background: linear-gradient(
        180deg,
        rgba(6, 38, 22, .52) 0%,
        rgba(6, 38, 22, .30) 45%,
        rgba(6, 38, 22, .78) 100%
    ) !important;
}

/* Bayangan teks tidak perlu setebal dulu karena latarnya sudah tenang */
.header-container .site-title {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .3) !important;
}

/* ----------------------------------------------------------------------------
 * PILIHAN LAIN: header polos bergradien, tanpa foto sama sekali — seperti
 * tampilan rujukan Aie Batumbuak. Kalau versi berfoto di atas masih terasa
 * ramai, hapus tanda komentar pada blok ini. Foto tetap tersimpan di
 * pengaturan, hanya tidak ditampilkan, jadi bisa dikembalikan kapan saja.
 *
body .header-container::before {
    background-image: var(--primary-gradient) !important;
    filter: none;
    transform: none;
}

body .header-container::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(6, 38, 22, .18) 100%) !important;
}
 * -------------------------------------------------------------------------- */

/* ============================================================================
 * BAGIAN 7 — PANEL DATA STATISTIK
 * ----------------------------------------------------------------------------
 * Catatan di pessel-theme-modern.css:5020 menyebut label tiap butir menyatu
 * di dalam berkas PNG-nya, sehingga tidak bisa diperkecil dan warnanya tidak
 * bisa diubah. Berkasnya 300x70 px diregangkan ke kotak 150x40 — perbandingan
 * sisinya tidak sama (4,29 vs 3,75), jadi tulisannya penyok dan buram.
 *
 * Batasan itu kini SUDAH TIDAK BERLAKU: markup di partials/artikel/index.blade.php
 * diganti jadi ikon SVG + teks sungguhan, jadi labelnya tajam di layar apa pun,
 * warnanya bisa diatur, dan bisa dibaca pembaca layar. Semua aturan .icon-bg
 * di CSS dasar otomatis tidak terpakai lagi karena elemennya sudah tidak ada.
 * ========================================================================== */

/* Aturan dasar memberi padding 0 9px — cukup saat isinya gambar setinggi 30px,
   terlalu sempit begitu isinya ikon + teks. */
.statistik-menu-item {
    padding: 9px 10px !important;
    gap: 11px !important;
    border-radius: 10px !important;
}

.hls-stat-ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e6e8ec;
    color: var(--pp, #0f766e);
    transition: border-color var(--hls-gerak), color var(--hls-gerak);
}

.hls-stat-ikon svg {
    width: 17px;
    height: 17px;
}

.hls-stat-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #334155;
    transition: color var(--hls-gerak);
}

.statistik-menu-item:hover .hls-stat-ikon,
.statistik-menu-item.active .hls-stat-ikon {
    border-color: rgba(15, 118, 110, .35);
}

.statistik-menu-item.active .hls-stat-label {
    color: var(--pp, #0f766e);
    font-weight: 600;
}

/* Kotak petunjuk: garis putus-putus biru terasa seperti wadah unggah berkas,
   bukan petunjuk. Diganti bidang lembut bergaris utuh. */
.statistik-content .welcome-instruction {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    padding: 11px 20px !important;
    border: 1px solid #d8ecea !important;
    border-radius: var(--hls-radius-pill) !important;
    background: var(--pp-soft, #f0fdfa) !important;
    box-shadow: none !important;
}

.statistik-content .welcome-instruction i {
    color: var(--pp, #0f766e) !important;
    font-size: 13px !important;
}

.statistik-content .welcome-instruction p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

/* ============================================================================
 * BAGIAN 8 — PANAH & TITIK PADA SLIDER (jQuery Cycle2)
 * ----------------------------------------------------------------------------
 * Dua masalah terpisah:
 *
 * 1. Cycle2 mengisi .cycle-pager dengan <span>&bull;</span>. Aturan dasar
 *    menata span itu jadi bulatan putih 10px lewat background + border-radius,
 *    tapi tidak pernah menyembunyikan karakter &bull;-nya. Akibatnya glif itu
 *    tetap tergambar dan meluber ke bawah kotak — itulah baris titik biru
 *    kecil yang muncul di bawah titik putih.
 *
 * 2. Panah maju/mundur memakai rgba(14,165,233,.9), biru menyala penuh dengan
 *    bingkai putih 2px. Di atas foto, itu jadi dua bulatan yang berteriak.
 *    Diganti kaca gelap tembus pandang supaya menyatu dengan fotonya.
 * ========================================================================== */

/* --- Titik penanda slide ------------------------------------------------ */
.slider-wrapper .cycle-pager {
    gap: 7px !important;
    padding: 7px 13px !important;
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: blur(8px) !important;
}

.slider-wrapper .cycle-pager span {
    /* menyembunyikan glif &bull; tanpa menghapus elemennya (masih bisa diklik) */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    width: 8px !important;
    height: 8px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .5) !important;
}

.slider-wrapper .cycle-pager span:hover {
    background: rgba(255, 255, 255, .85) !important;
    transform: none !important;
}

.slider-wrapper .cycle-pager span.cycle-pager-active {
    width: 22px !important;
    background: #fff !important;
    box-shadow: none !important;
}

/* --- Panah maju / mundur ------------------------------------------------ */
.slider-wrapper .cycle-prev,
.slider-wrapper .cycle-next {
    width: 40px !important;
    height: 40px !important;
    background: rgba(15, 23, 42, .36) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .55) !important;
}

.slider-wrapper .cycle-prev:hover,
.slider-wrapper .cycle-next:hover {
    background: rgba(15, 23, 42, .58) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    transform: translateY(-50%) scale(1.06) !important;
}

.slider-wrapper .cycle-prev i,
.slider-wrapper .cycle-next i {
    font-size: 15px !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Wadah slider ikut membulat penuh supaya foto tidak bersudut tajam */
.slider-wrapper,
.slider-wrapper .cycle-slider,
.slider-wrapper .single_iteam img {
    border-radius: var(--hls-radius-lg) !important;
}