/* ============================================================================
 * 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;
}

/* ============================================================================
 * BAGIAN 9 — JUDUL GAMBAR & LETAK TITIK PADA SLIDER
 * ----------------------------------------------------------------------------
 * Diukur langsung di painan.pesisirselatankab.go.id:
 *
 *   .cycle-pager   776 x 14 @ y1841   <- selebar penuh, bukan menyusut
 *   .textgambar    776 x 62 @ y1818   <- kotak titik duduk DI DALAM judul
 *
 * Jadi pita gelap tegas di dasar slider itu sebenarnya latar kotak titik yang
 * merentang penuh, bukan latar judul. Di atasnya ada dua gradien hitam yang
 * bertumpuk: .single_iteam::before (70%) dan .textgambar (90%) — itu yang
 * membuat batas bawahnya terlihat patah, bukan memudar.
 *
 * Perbaikannya: satu gradien saja (milik slide), judul tanpa latar sendiri,
 * dan kotak titik menyusut ke sudut kanan bawah supaya tidak menimpa tulisan.
 * ========================================================================== */

/* Satu-satunya lapisan gelap: milik slide, dinaikkan sedikit supaya judul
   tetap terbaca setelah latar judulnya dilepas. */
.slider-wrapper .single_iteam::before {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .35) 28%, rgba(0, 0, 0, 0) 58%) !important;
}

/* Judul: tanpa latar sendiri, jadi tidak ada lagi pita yang berbatas tegas.
   Ruang di kanan disisakan untuk titik penanda slide. */
.slider-wrapper .textgambar {
    background: none !important;
    background-image: none !important;
    padding: 34px 150px 18px 22px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

/* Kotak titik: menyusut sesuai isinya lalu pindah ke sudut kanan bawah. */
.slider-wrapper .cycle-pager {
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    transform: none !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    background: rgba(15, 23, 42, .3) !important;
}

@media (max-width: 640px) {
    /* Di layar sempit judul dan titik tidak muat sebaris — titik naik ke atas
       judul, dan ruang kanan yang tadi disisakan dikembalikan. */
    .slider-wrapper .textgambar {
        padding: 30px 18px 16px !important;
        font-size: 13.5px !important;
    }

    .slider-wrapper .cycle-pager {
        bottom: 56px !important;
    }
}

/* ============================================================================
 * BAGIAN 10 — HALAMAN STATUS SDGs
 * ----------------------------------------------------------------------------
 * Gaya halaman ini ditulis di dalam blade-nya sendiri
 * (partials/sdgs/index.blade.php, blok @push('styles')). Karena
 * @stack('styles') dicetak SETELAH <link> berkas ini, aturan di sana menang
 * pada kekhususan yang sama. Karena itu semua penimpa di bawah diberi awalan
 * #sdgs_desa — kekhususan (1,1,0) mengalahkan (0,1,0) tanpa perlu !important.
 * ========================================================================== */

/* Bilah judul: dari blok teal rata jadi kartu bergradien seperti hero beranda */
#sdgs_desa .sdgs-head {
    background: var(--hls-gradien);
    border-radius: var(--hls-radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 14px 30px -18px rgba(14, 165, 233, .6);
    position: relative;
    overflow: hidden;
}

/* Lingkaran cahaya samar, sama seperti kartu Layanan Mandiri */
#sdgs_desa .sdgs-head::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

#sdgs_desa .sdgs-head > * {
    position: relative;
    z-index: 1;
}

#sdgs_desa .sdgs-head h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

#sdgs_desa .sdgs-head .sdgs-sub {
    font-size: 12.5px;
    margin-top: 4px;
}

/* Nilai total jadi keping pil, bukan angka yang menggantung di sudut */
#sdgs_desa .sdgs-score {
    padding: 9px 18px;
    border-radius: var(--hls-radius-pill);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

#sdgs_desa .sdgs-score b {
    font-size: 24px;
    font-weight: 700;
}

#sdgs_desa .sdgs-score span {
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .9;
}

/* Kartu tiap tujuan: jarak dilegakan, sudut dibulatkan, naik saat disentuh */
#sdgs_desa .sdgs-grid {
    margin: 0 -7px;
}

#sdgs_desa .sdgs-item {
    padding: 7px;
}

#sdgs_desa .sdgs-card {
    gap: 11px;
    padding: 10px;
    border: 1px solid var(--hls-garis);
    border-radius: 14px;
    box-shadow: var(--hls-shadow);
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak), border-color var(--hls-gerak);
}

#sdgs_desa .sdgs-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hls-shadow-hover);
    border-color: rgba(14, 165, 233, .3);
}

#sdgs_desa .sdgs-card img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

#sdgs_desa .sdgs-val {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

#sdgs_desa .sdgs-lab {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-light, #94a3b8);
    margin-top: 3px;
}

#sdgs_desa .sdgs-empty {
    padding: 34px 0;
    border: 1px solid var(--hls-garis);
    border-radius: var(--hls-radius);
    background: #fff;
}

@media (max-width: 640px) {
    #sdgs_desa .sdgs-head {
        padding: 16px 18px;
    }

    #sdgs_desa .sdgs-head h2 {
        font-size: 16.5px;
    }

    #sdgs_desa .sdgs-score {
        padding: 7px 14px;
    }
}

/* ============================================================================
 * BAGIAN 11 — HALAMAN PPID
 * ----------------------------------------------------------------------------
 * Modul LayananPpid membawa dua lapis gaya di dalam halamannya sendiri:
 *
 *   lapis 1 (asli modul)  .ppid-hero { background: linear-gradient(...) }
 *                         .ppid-card { border-radius: 20px; box-shadow: ... }
 *   lapis 2 (perata)      .ppid-hero { background: var(--pp) !important;
 *                                      border-radius: 14px !important }
 *                         .ppid-card-header { background: #fafafa !important }
 *
 * Keduanya dicetak lewat @push('styles'), yaitu SETELAH <link> berkas ini.
 * Karena lapis 2 memakai !important, menimpanya butuh dua syarat sekaligus:
 * kekhususan lebih tinggi (awalan .ppid-wrapper) DAN !important. Kalau salah
 * satu saja, aturan di bawah tidak akan terpakai.
 * ========================================================================== */

/* --- Hero & kotak kontak: dari teal rata jadi gradien seperti beranda ---- */
.ppid-wrapper .ppid-hero {
    background: var(--hls-gradien) !important;
    border-radius: var(--hls-radius-lg) !important;
    padding: 20px 24px !important;
    box-shadow: 0 14px 30px -18px rgba(14, 165, 233, .6) !important;
    position: relative;
    overflow: hidden;
}

.ppid-wrapper .ppid-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    pointer-events: none;
}

.ppid-wrapper .ppid-hero > * {
    position: relative;
    z-index: 1;
}

.ppid-wrapper .ppid-widget-contact {
    background: var(--hls-gradien) !important;
    border-radius: var(--hls-radius) !important;
    padding: 16px 18px !important;
}

/* --- Kartu --------------------------------------------------------------- */
.ppid-wrapper .ppid-card,
.ppid-wrapper .ppid-sidebar-card {
    border: 1px solid var(--hls-garis) !important;
    border-radius: var(--hls-radius) !important;
    box-shadow: var(--hls-shadow) !important;
    margin-bottom: 18px;
}

.ppid-wrapper .ppid-card {
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

.ppid-wrapper .ppid-card:hover {
    box-shadow: var(--hls-shadow-hover) !important;
}

/* Kepala kartu: latar abu dilepas, jadi putih bergaris tipis seperti widget */
.ppid-wrapper .ppid-card-header,
.ppid-wrapper .ppid-sidebar-header {
    background: #fff !important;
    background-image: none !important;
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--hls-garis) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-primary, #0f172a) !important;
}

.ppid-wrapper .ppid-card-body {
    padding: 18px !important;
}

/* --- Menu samping -------------------------------------------------------- */
.ppid-wrapper .ppid-nav-link {
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    margin: 0 8px 2px !important;
    font-size: 13.5px !important;
    color: var(--text-secondary, #475569) !important;
    transition: background var(--hls-gerak), color var(--hls-gerak), padding-left var(--hls-gerak) !important;
}

.ppid-wrapper .ppid-nav-link:hover {
    background: #f1f5f9 !important;
    padding-left: 15px !important;
}

.ppid-wrapper .ppid-nav-link.active {
    background: var(--pp-soft, #f0fdfa) !important;
    color: var(--pp, #0f766e) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .18) !important;
}

/* --- Tombol, lencana, ruas isian ---------------------------------------- */
.ppid-wrapper .ppid-btn {
    border-radius: var(--hls-radius-pill) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak) !important;
}

.ppid-wrapper .ppid-btn:hover {
    transform: translateY(-1px);
}

.ppid-wrapper .ppid-badge {
    border-radius: var(--hls-radius-pill) !important;
    padding: 4px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}

.ppid-wrapper .ppid-input,
.ppid-wrapper .ppid-select,
.ppid-wrapper .ppid-textarea,
.ppid-wrapper .ppid-cari-input {
    border-radius: 11px !important;
    border: 1px solid var(--hls-garis) !important;
    transition: border-color var(--hls-gerak), box-shadow var(--hls-gerak) !important;
}

.ppid-wrapper .ppid-input:focus,
.ppid-wrapper .ppid-select:focus,
.ppid-wrapper .ppid-textarea:focus,
.ppid-wrapper .ppid-cari-input:focus {
    outline: none !important;
    border-color: rgba(15, 118, 110, .45) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12) !important;
}

.ppid-wrapper .ppid-cari-kotak {
    border-radius: var(--hls-radius) !important;
}

/* --- Tabel --------------------------------------------------------------- */
.ppid-wrapper .ppid-table-wrapper {
    border-radius: var(--hls-radius) !important;
    overflow: hidden;
}

.ppid-wrapper .ppid-table th,
.ppid-wrapper .ppid-table td {
    padding: 12px 14px !important;
    border-color: var(--hls-line) !important;
}

.ppid-wrapper .ppid-table tbody tr {
    transition: background var(--hls-gerak);
}

.ppid-wrapper .ppid-table tbody tr:hover {
    background: #f8fafc !important;
}

/* --- Kartu angka & paginasi ---------------------------------------------- */
.ppid-wrapper .ppid-stat-card {
    border-radius: var(--hls-radius) !important;
    border: 1px solid var(--hls-garis) !important;
    box-shadow: var(--hls-shadow) !important;
    transition: transform var(--hls-gerak), box-shadow var(--hls-gerak);
}

.ppid-wrapper .ppid-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hls-shadow-hover) !important;
}

.ppid-wrapper .ppid-stat-icon-wrapper {
    border-radius: 14px !important;
}

.ppid-wrapper .ppid-pagination a,
.ppid-wrapper .ppid-pagination span {
    border-radius: 10px !important;
}

@media (max-width: 640px) {
    .ppid-wrapper .ppid-hero {
        padding: 16px 18px !important;
    }
}