/* PESSEL MODERN v5.2 - BLUE-GREEN GRADIENT EDITION - OPTIMIZED */
/* NO BOOTSTRAP - Complete Self-Contained System */

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    width: 100%;
}

body > *:first-child,
#header,
.header-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* === VARIABLES === */
:root {
    --primary-blue: #0ea5e9;
    --primary-cyan: #06b6d4;
    --primary-teal: #14b8a6;
    --primary-green: #10b981;
    --primary-gradient: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #10b981 100%);
    --primary-gradient-soft: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(6,182,212,0.08) 50%, rgba(16,185,129,0.08) 100%);
    --gradient-soft: linear-gradient(135deg, #ecfeff 0%, #d1fae5 100%);
    --gradient-card: linear-gradient(135deg, rgba(14,165,233,0.03) 0%, rgba(16,185,129,0.03) 100%);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --bg-white: #ffffff;
    --bg-soft: #f8fafc;
    --bg-light: #f1f5f9;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.04);
    --shadow-md: 0 6px 12px -2px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.12);
    --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.18);
    --shadow-gradient: 0 8px 24px -4px rgba(14,165,233,0.3);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;
    --transition-base: 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* === BASE === */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: linear-gradient(135deg, #F9FAF7 0%, #AAABA9 100%);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
    background-clip: text;
    margin: 0 0 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: all var(--transition-base);
}

a:hover,
a:focus {
    color: var(--primary-green);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === GRID SYSTEM === */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-fluid {
    width: 100%;
    padding: 0 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.row::after {
    content: "";
    display: table;
    clear: both;
}

[class*="col-"] {
    padding: 0 15px;
    width: 100%;
}

/* Grid Columns */
.col-lg-1, .col-md-1, .col-sm-1 { width: 8.333%; }
.col-lg-2, .col-md-2, .col-sm-2 { width: 16.667%; }
.col-lg-3, .col-md-3, .col-sm-3 { width: 25%; }
.col-lg-4, .col-md-4, .col-sm-4 { width: 33.333%; }
.col-lg-5, .col-md-5, .col-sm-5 { width: 41.667%; }
.col-lg-6, .col-md-6, .col-sm-6 { width: 50%; }
.col-lg-7, .col-md-7, .col-sm-7 { width: 58.333%; }
.col-lg-8, .col-md-8, .col-sm-8 { width: 66.667%; }
.col-lg-9, .col-md-9, .col-sm-9 { width: 75%; }
.col-lg-10, .col-md-10, .col-sm-10 { width: 83.333%; }
.col-lg-11, .col-md-11, .col-sm-11 { width: 91.667%; }
.col-lg-12, .col-md-12, .col-sm-12 { width: 100%; }

/* === FLEX UTILITIES === */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.d-none { display: none; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }

/* === SPACING UTILITIES === */
.mb-3, .mb-4 { margin-bottom: 1rem !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }

/* === FORMS === */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(14,165,233,0.1);
    transform: translateY(-1px);
}

/* === TABLES === */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 1rem;
    vertical-align: top;
    border-top: 1px solid var(--border-color);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--primary-blue);
    font-weight: 700;
    color: var(--text-primary);
    background: var(--gradient-soft);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--primary-gradient-soft);
}

.table-bordered {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-light);
}

.table-hover tbody tr:hover {
    background: var(--gradient-soft);
    transform: scale(1.01);
    transition: all 0.2s;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Elegant Table Enhancement */
.table-elegant {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #fff;
}

.table-elegant thead th {
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-elegant tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.table-elegant tbody tr:last-child td {
    border-bottom: none;
}

.table-elegant tbody tr:hover {
    background: var(--primary-gradient-soft);
    transform: scale(1.005);
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--shadow-gradient);
}

.btn-primary:hover {
    box-shadow: 0 12px 32px -8px rgba(14,165,233,0.5);
}

.btn-admin {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}

.btn-admin:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

.btn-mandiri {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}

.btn-mandiri:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.5);
}

.btn-search {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-gradient);
    border: none;
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-search:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--shadow-lg);
}

.btn-circle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14,165,233,0.1);
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: 50%;
    color: var(--primary-blue);
    font-size: 14px;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-circle:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(14,165,233,0.4);
}

/* === HEADER === */
#header {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1000;
}

.header-container {
    position: relative;
    background: var(--primary-gradient);
    background-size: cover;
    background-position: center;
    color: #fff;
    width: 100%;
    min-height: 120px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.header-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14,165,233,0.95), rgba(6,182,212,0.9), rgba(16,185,129,0.85));
    z-index: 1;
}

.header-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
    z-index: 2;
}

.header-container .container {
    position: relative;
    z-index: 3;
}

.header_logo_area {
    display: flex;
    align-items: center;
    padding: 5px 0;
    gap: 24px;
    margin-top: 20px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 24px;
    text-decoration: none;
}

.logo-img {
    max-height: 70px;
    width: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
}

.logo-text {
    flex: 1;
}

.site-title {
    font-size: clamp(20px, 4.5vw, 36px);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 3px 8px rgba(0,0,0,0.3);
    background: none;
    -webkit-text-fill-color: inherit;
}

.desa-address {
    font-size: clamp(12px, 2.2vw, 16px);
    color: rgba(255,255,255,0.95);
    margin: 8px 0 0;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.header_actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 5px 0;
}

.header_buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.header_search,
.search-form {
    position: relative;
    width: 100%;
    max-width: 380px;
}

.search-input,
.search-form input[type="text"] {
    width: 100%;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255,255,255,0.2);
    padding: 14px 56px 14px 24px;
    font-size: 14px;
    background: rgba(255,255,255,0.98);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
}

.search-input:focus,
.search-form input[type="text"]:focus {
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.4);
}

/* Running Text */
.running-text-container {
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    padding: 5px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.running-text-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.running-text-label {
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.running-text-content {
    flex: 1;
    overflow: hidden;
}

.running-text-content marquee {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* === NAVIGATION === */
#navarea {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 40px;
    box-shadow: var(--shadow-md);
}

.sticky-nav,
.fixed-nav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar {
    margin: 0;
    padding: 0;
    border: none;
    min-height: 0;
    background: #fff;
    position: relative;
    width: 100%;
}

.navbar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
}

.navbar-header {
    display: none;
}

.navbar-collapse {
    padding: 0;
    margin: 0;
    width: 100%;
}

.navbar-nav,
.custom-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    width: 100%;
    justify-content: center;
}

.navbar-nav > li,
.custom-nav > li {
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar-nav > li > a,
.custom-nav > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.navbar-nav > li > a::before,
.custom-nav > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary-gradient);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    transform: translateX(-50%);
}

.navbar-nav > li > a::after,
.custom-nav > li > a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-gradient-soft);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.custom-nav > li > a:hover {
    color: var(--primary-blue);
}

.navbar-nav > li > a:hover::before,
.navbar-nav > li.active > a::before,
.custom-nav > li > a:hover::before {
    width: 80%;
}

.navbar-nav > li > a:hover::after,
.navbar-nav > li.active > a::after {
    opacity: 1;
}

.navbar-nav > li > a i,
.custom-nav > li > a i {
    font-size: 16px;
    transition: transform 0.3s;
}

.navbar-nav > li > a:hover i,
.custom-nav > li > a:hover i {
    transform: scale(1.15);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: #fff;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -8px rgba(0,0,0,0.15);
    min-width: 240px;
    padding: 12px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 1000;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
}

.dropdown-menu > li > a i {
    color: var(--primary-blue);
    font-size: 14px;
    transition: transform 0.3s;
}

.dropdown-menu > li > a:hover {
    background: var(--primary-gradient-soft);
    color: var(--primary-blue);
    padding-left: 28px;
    font-weight: 700;
}

.dropdown-menu > li > a:hover i {
    transform: translateX(5px) scale(1.2);
}

/* Mobile Toggle */
.navbar-toggle {
    display: none;
    float: right;
    margin: 10px 15px;
    padding: 10px 14px;
    background: var(--primary-gradient);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.navbar-toggle:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

.navbar-toggle .icon-bar {
    display: block;
    width: 24px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: var(--radius-full);
    transition: all 0.3s;
}

.navbar-toggle:hover .icon-bar:nth-child(2) {
    width: 20px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* === RESPONSIVE NAVIGATION === */
@media (max-width: 991px) {
    /* Navigation */
    .navbar-header {
        display: block;
        padding: 12px 0;
        width: 100%;
    }
    
    .navbar-toggle {
        display: block;
    }
    
    .navbar::before {
        display: none;
    }
    
    .navbar-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        background: #fff;
        border-top: 2px solid var(--border-light);
        width: 100%;
    }
    
    .navbar-collapse.in,
    .navbar-collapse.show {
        max-height: 800px;
        overflow-y: auto;
    }
    
    .navbar-nav,
    .custom-nav {
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }
    
    .navbar-nav > li,
    .custom-nav > li {
        flex: none;
        width: 100%;
    }
    
    .navbar-nav > li > a,
    .custom-nav > li > a {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 14px 18px;
        justify-content: flex-start;
        white-space: normal;
    }
    
    .navbar-nav > li > a::before,
    .custom-nav > li > a::before {
        left: 0;
        width: 3px;
        height: 100%;
        bottom: 0;
        transform: scaleX(0);
        transform-origin: left;
    }
    
    .navbar-nav > li > a:hover::before,
    .navbar-nav > li.active > a::before,
    .custom-nav > li > a:hover::before {
        transform: scaleX(1);
        width: 3px;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--primary-gradient-soft);
        padding-left: 24px;
        visibility: visible;
        opacity: 1;
        transform: none;
        display: none;
        width: 100%;
        max-width: 100%;
        min-width: auto;
    }
    
    .dropdown-menu::before {
        display: none;
    }
    
    .dropdown.open .dropdown-menu {
        display: block;
    }
    
    .dropdown-menu > li {
        width: 100%;
    }
    
    .dropdown-menu > li > a {
        width: 100%;
        padding: 12px 16px;
    }
}

@media (max-width: 768px) {
    .navbar-nav > li > a,
    .custom-nav > li > a {
        padding: 12px 16px;
        font-size: 12px;
    }
    
    .navbar-collapse.in,
    .navbar-collapse.show {
        max-height: 600px;
    }
}

@media (max-width: 576px) {
    .navbar-toggle {
        margin: 8px 12px;
        padding: 8px 12px;
    }
    
    .navbar-toggle .icon-bar {
        width: 22px;
        height: 2.5px;
        margin: 3px 0;
    }
    
    .navbar-nav > li > a,
    .custom-nav > li > a {
        padding: 11px 14px;
        font-size: 11px;
        gap: 8px;
    }
    
    .navbar-nav > li > a i,
    .custom-nav > li > a i {
        font-size: 14px;
    }
    
    .dropdown-menu {
        padding-left: 20px;
    }
    
    .dropdown-menu > li > a {
        padding: 10px 16px;
        font-size: 11px;
    }
    
    .navbar-collapse.in,
    .navbar-collapse.show {
        max-height: 500px;
    }
}


/* Icon */
.ppid-icon i {
    color: black;
    background: linear-gradient(135deg, #DB641F, #cffafe);
    border-radius: 12px;
    padding: 10px;
    font-size: 20px !important;
}

/* Hover */
.ppid-icon a:hover {
    transform: translateY(-2px);
}

/* Active (jika menu aktif) */
.ppid-icon.active a {
    color: #fff !important;
}

.ppid-icon.active i {
    color: #fff;
}


/* === CONTENT === */
.main-content-wrapper {
    min-height: 600px;
    margin: 50px 0;
}

/* === CARDS & WIDGETS === */
.card,
.widget,
.box,
.sidebar-widget {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-bottom: 10px;
    overflow: hidden;
    transition: all var(--transition-base);
    position: relative;
}

.card::before,
.widget::before,
.sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover,
.widget:hover,
.sidebar-widget:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-6px);
}

.card:hover::before,
.widget:hover::before,
.sidebar-widget:hover::before {
    opacity: 1;
}

.card-header,
.widget-header,
.box-header {
    background: var(--gradient-card);
    color: var(--text-primary);
    padding: 18px 24px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-header i,
.widget-header i,
.box-header i {
    color: var(--primary-blue);
    font-size: 18px;
}

.card-body,
.widget-body,
.box-body {
    padding: 10px;
}

/* Sidebar Widget Specifics */
.sidebar-widget .box-header {
    border-bottom: 3px solid var(--border-light);
    position: relative;
    font-size: 18px;
    font-weight: 700;
    background: var(--primary-gradient-soft);
    padding: 10px 10px;
}

.sidebar-widget .box-header::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -3px;
    width: 45px;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
}

/* Clock Widget */
#jam {
    background: var(--primary-gradient);
    border-radius: var(--radius-xl);
    font-weight: 800;
    font-size: 20px;
    color: #fff;
    box-shadow: var(--shadow-gradient);
    padding: 24px;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
}

#jam::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* === STATISTIK LAYOUT === */
.statistik-container {
    display: flex;
    gap: 24px;
    margin-bottom: 40px;
    min-height: 300px;
}

/* Sidebar Statistik - STATIS (No Scroll) */
.statistik-sidebar {
    flex: 0 0 200px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
}

.statistik-sidebar-header {
    background: var(--primary-gradient);
    color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 3px solid rgba(255,255,255,0.2);
}

.statistik-sidebar-header i {
    font-size: 16px;
    color: #fff;
}

.statistik-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: none;
    -webkit-text-fill-color: #fff;
}

/* Menu Statistik - NO SCROLLBAR */
.statistik-menu {
    display: flex;
    flex-direction: column;

}

.statistik-menu-item {
    display: flex;
    background: var(--gradient-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.statistik-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.statistik-menu-item:hover,
.statistik-menu-item.active {
    background: #fff;
    border-color: var(--primary-blue);
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.statistik-menu-item:hover::before,
.statistik-menu-item.active::before {
    opacity: 1;
}

.statistik-menu-item .icon-bg {
    flex-shrink: 0;
    width: 150px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
}

.statistik-menu-item:hover .icon-bg,
.statistik-menu-item.active .icon-bg {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.statistik-menu-item img {
    max-width: 95%;
    max-height: 95%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.statistik-menu-item span {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.4;
    transition: color 0.3s;
}

.statistik-menu-item:hover span,
.statistik-menu-item.active span {
    color: var(--primary-blue);
}

/* Area Konten Statistik - DENGAN SCROLL */
.statistik-content {
    flex: 1;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    min-height: 300px;
    position: relative;
}

/* Halaman Welcome/Awal */
.statistik-welcome {
    width: 100%;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfeff 50%, #d1fae5 100%);
}

.welcome-content {
    text-align: center;
    max-width: 700px;
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(14,165,233,0.4);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 40px rgba(14,165,233,0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 50px rgba(14,165,233,0.6);
    }
}

.welcome-icon i {
    font-size: 48px;
    color: #fff;
}

.welcome-content h2 {
    font-size: 32px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    line-height: 1.3;
}

.welcome-content > p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.6;
}

.welcome-illustration {
    margin: 10px 0;
    animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stats-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1));
}


.welcome-instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    padding: 20px 30px;
    background: rgba(14,165,233,0.1);
    border: 2px dashed var(--primary-blue);
    border-radius: var(--radius-lg);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

.welcome-instruction i {
    font-size: 24px;
    color: var(--primary-blue);
}

.welcome-instruction p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Area Iframe dengan Scroll */
.statistik-content-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar untuk Area Display */
.statistik-content-wrapper::-webkit-scrollbar {
    width: 10px;
}

.statistik-content-wrapper::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 10px;
}

.statistik-content-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-gradient);
    border-radius: 10px;
    transition: background 0.3s;
}

.statistik-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0284c7, #059669);
}

.statistik-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--gradient-soft);
    z-index: 10;
    transition: opacity 0.3s, visibility 0.3s;
}

.statistik-loading.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.statistik-loading i {
    color: var(--primary-blue);
}

.statistik-loading p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.statistik-iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    display: block;
    opacity: 0;
    transition: opacity 0.3s;
}

.statistik-iframe.loaded {
    opacity: 1;
}

/* === ARTICLES === */
.article-item {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-bottom: 30px;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
}

.article-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: var(--gradient-card);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.article-item:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
}

.article-item:hover::before {
    opacity: 1;
}

.article-thumbnail {
    position: relative;
    overflow: hidden;
    padding-top: 60%;
    background: var(--bg-light);
}

.article-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}

.article-item:hover .article-thumbnail img {
    transform: scale(1.1) rotate(2deg);
}

.article-category {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--primary-gradient);
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    letter-spacing: 0.8px;
}

.article-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.article-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.article-title a {
    background: linear-gradient(135deg, #0f172a, #334155);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-title a:hover {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}

.article-meta i {
    color: var(--primary-blue);
}

.article-excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: auto;
    letter-spacing: 0.8px;
    transition: gap 0.3s;
}

.read-more:hover {
    gap: 12px;
}

.read-more i {
    color: var(--primary-blue);
}

/* === HALAMAN PEMERINTAH DESA === */
.single_category {
    margin-bottom: 40px;
}

.card-pemerintah {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
    position: relative;
    padding: 24px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-pemerintah::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.card-pemerintah:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
}

.card-pemerintah:hover::before {
    opacity: 1;
}

.image-pemerintah {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 5px solid var(--bg-light);
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.card-pemerintah:hover .image-pemerintah {
    transform: scale(1.08);
    border-color: var(--primary-blue);
    box-shadow: 0 8px 24px rgba(14,165,233,0.4);
}

.card-pemerintah b {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}

.card-pemerintah .jabatan {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-pemerintah hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
    margin: 16px 0;
    opacity: 0.3;
}

.card-pemerintah .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.card-pemerintah .badge-success,
.badge-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.card-pemerintah .badge-danger,
.badge-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.card-pemerintah .badge-warning,
.badge-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.card-pemerintah .media-sosial {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Alert */
.alert-info {
    background: var(--primary-gradient-soft);
    border: 2px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: 20px;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
}

/* Loading State */
.fa-spinner {
    color: var(--primary-blue);
}

/* === SLIDER GAMBAR UTAMA (HOME PAGE) === */
.slider-wrapper {
    margin-bottom: 40px;
    position: relative;
}

.slider-wrapper::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: var(--primary-gradient);
    opacity: 0.05;
    border-radius: var(--radius-xl);
    z-index: -1;
}

.slider-wrapper .cycle-slider {
    margin-bottom: 0 !important;
    box-shadow: var(--shadow-xl) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    background: #fff !important;
    position: relative !important;
    max-height: 500px;
}

.slider-wrapper .single_iteam {
    width: 100%;
    height: 500px !important;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-wrapper .single_iteam.active {
    display: block;
}

.slider-wrapper .single_iteam .tlClogo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.slider-wrapper .single_iteam:hover .tlClogo {
    transform: scale(1.05);
}

.slider-wrapper .single_iteam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    pointer-events: none;
}

.slider-wrapper .single_iteam:hover::before {
    opacity: 1;
}

.slider-wrapper .textgambar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.slider-wrapper .single_iteam:hover .textgambar {
    transform: translateY(0);
    opacity: 1;
}

.slider-wrapper .cycle-prev,
.slider-wrapper .cycle-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    cursor: pointer !important;
    color: #fff !important;
    background: rgba(14,165,233,0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.slider-wrapper .cycle-prev {
    left: 16px !important;
}

.slider-wrapper .cycle-next {
    right: 16px !important;
}

.slider-wrapper .cycle-slider:hover .cycle-prev,
.slider-wrapper .cycle-slider:hover .cycle-next {
    opacity: 1 !important;
}

.slider-wrapper .cycle-prev:hover,
.slider-wrapper .cycle-next:hover {
    background: var(--primary-gradient) !important;
    border-color: rgba(255,255,255,0.5) !important;
    transform: translateY(-50%) scale(1.15) !important;
    box-shadow: 0 8px 20px rgba(14,165,233,0.5) !important;
}

.slider-wrapper .cycle-prev i,
.slider-wrapper .cycle-next i {
    font-size: 18px;
    line-height: 1;
}

.slider-wrapper .cycle-pager {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 100;
    padding: 8px 16px;
    background: rgba(0,0,0,0.4);
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
}

.slider-wrapper .cycle-pager span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 2px solid transparent;
}

.slider-wrapper .cycle-pager span:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.3);
}

.slider-wrapper .cycle-pager span.cycle-pager-active {
    background: #fff;
    width: 32px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

/* === WIDGET APARATUR DESA (SIDEBAR SLIDER) === */
.single_bottom_rightbar {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-bottom: 5px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.single_bottom_rightbar:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.single_bottom_rightbar h5 {
    color: var(--text-primary);
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 800;
    border-bottom: 3px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    position: relative;
    background: var(--primary-gradient);
}

.single_bottom_rightbar h5::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -3px;
    width: 45px;
    height: 3px;
    background: var(--primary-gradient-soft);
    border-radius: var(--radius-full);
}

.single_bottom_rightbar h5 i {
    font-size: 16px;
    color: var(--primary-blue);
}

.single_bottom_rightbar .content_middle_middle {
    padding: 20px;
    position: relative;
}

.single_bottom_rightbar .box-body {
    padding: 0;
}

.single_bottom_rightbar #aparatur_desa.cycle-slideshow {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
}

.single_bottom_rightbar #aparatur_desa .aparatur-slide-item {
    position: relative;
    width: 100%;
    display: none;
}

.single_bottom_rightbar #aparatur_desa .aparatur-slide-item.cycle-slide-active {
    display: block !important;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 20px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-xl);
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.single_bottom_rightbar #aparatur_desa .aparatur-slide-item:hover .aparatur-image-container img {
    transform: scale(1.05);
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(16,185,129,0.15));
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    border-radius: var(--radius-xl);
}

.single_bottom_rightbar #aparatur_desa .aparatur-slide-item:hover .aparatur-image-container::after {
    opacity: 1;
}

.single_bottom_rightbar #aparatur_desa .aparatur-info {
    background: var(--gradient-card);
    padding: 20px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    transition: all 0.3s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.single_bottom_rightbar #aparatur_desa .aparatur-slide-item:hover .aparatur-info {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.single_bottom_rightbar #aparatur_desa .aparatur-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}

.single_bottom_rightbar #aparatur_desa .aparatur-position {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.single_bottom_rightbar #aparatur_desa .aparatur-status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.single_bottom_rightbar #aparatur_desa .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.single_bottom_rightbar #aparatur_desa .status-badge i {
    font-size: 12px;
}

.single_bottom_rightbar .cycle-prev,
.single_bottom_rightbar .cycle-next {
    position: absolute !important;
    top: 160px !important;
    transform: translateY(-50%) !important;
    z-index: 150 !important;
    cursor: pointer !important;
    color: #fff !important;
    background: rgba(14,165,233,0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 50% !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

.single_bottom_rightbar .cycle-prev {
    left: 10px !important;
}

.single_bottom_rightbar .cycle-next {
    right: 10px !important;
}

.single_bottom_rightbar:hover .cycle-prev,
.single_bottom_rightbar:hover .cycle-next {
    opacity: 1 !important;
}

.single_bottom_rightbar .cycle-prev:hover,
.single_bottom_rightbar .cycle-next:hover {
    background: var(--primary-gradient) !important;
    border-color: rgba(255,255,255,0.6) !important;
    transform: translateY(-50%) scale(1.15) !important;
    box-shadow: 0 8px 24px rgba(14,165,233,0.6) !important;
}

.single_bottom_rightbar .cycle-prev i,
.single_bottom_rightbar .cycle-next i {
    font-size: 18px;
    line-height: 1;
}

/* Loading Image Effect */
.yall_lazy {
    background: var(--bg-light);
    transition: filter 0.4s;
}

img[src*="img-loader.gif"] {
    filter: blur(8px);
    opacity: 0.7;
}

img.yall_loaded {
    filter: blur(0);
    opacity: 1;
}

/* Fade Transition Effect */
.single_bottom_rightbar #aparatur_desa.cycle-slideshow .aparatur-slide-item,
.slider-wrapper .cycle-slider.cycle-slide-active {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Title */
.section-title {
    position: relative;
    margin-bottom: 32px;
}

.section-title h2 {
    font-size: 24px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    position: relative;
    display: inline-block;
    padding-right: 24px;
    background-color: var(--bg-soft);
    z-index: 1;
}

.section-title .line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-gradient);
    opacity: 0.2;
    z-index: 0;
}

/* === FOOTER === */
#footer {
    margin: 0;
    padding: 0;
}

.footer_top {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #94a3b8;
    padding: 50px 0 30px;
    margin-top: 60px;
    position: relative;
}

.footer_top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-gradient);
}

.footer_top .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    align-items: flex-start;
}

.footer_top .col-lg-4,
.footer_top .col-md-4 {
    width: 33.333%;
    padding: 0 15px;
}

.single_footer_top {
    margin-bottom: 30px;
}

.single_footer_top h2 {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.single_footer_top h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
}

.footer-village-info {
    margin-bottom: 20px;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-logo-wrapper img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.footer-village-name h4 {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-village-name span {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    display: block;
    line-height: 1.6;
}

.footer-village-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.8;
    margin-top: 15px;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 500;
    transition: all 0.3s;
}

.footer-contact-item:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-contact-item i {
    color: var(--primary-teal);
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 16px;
    margin-top: 2px;
}

.footer-contact-item a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s;
    word-break: break-all;
}

.footer-contact-item a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-contact-item span {
    line-height: 1.6;
}

.labels_nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.labels_nav li {
    margin-bottom: 10px;
}

.labels_nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
}

.labels_nav li a i {
    color: var(--primary-blue);
    font-size: 14px;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.labels_nav li a:hover {
    color: #fff;
    background: var(--primary-gradient);
    border-color: transparent;
    transform: translateX(6px);
    box-shadow: 0 4px 12px rgba(14,165,233,0.4);
}

.labels_nav li a:hover i {
    transform: translateX(4px) scale(1.1);
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 16px;
    transition: all 0.3s;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 16px rgba(14,165,233,0.4);
}

.esensi-footer {
    background: #0a0f1a;
    color: #64748b;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

.esensi-footer .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.esensi-footer img {
    display: inline-block;
    vertical-align: middle;
}

.esensi-credits {
    margin: 0;
}

.esensi-credits a {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    transition: all 0.3s;
}

.esensi-credits a:hover {
    letter-spacing: 0.5px;
}

.esensi-credits a + a::before {
    content: "•";
    display: inline-block;
    margin: 0 4px;
}

.text-md-left {
    text-align: left;
}

.text-md-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* === PAGINATION === */
.pagination_area {
    margin: 40px 0 20px;
    padding: 10px 10px;
    background: var(--gradient-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
}

.pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination .page-item {
    margin: 0;
    padding: 0;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-base);
}

.pagination .page-link:hover {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(14,165,233,0.3);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: var(--shadow-gradient);
    transform: scale(1.1);
}

.pagination .page-item.disabled .page-link {
    color: var(--text-light);
    background: var(--bg-light);
    border-color: var(--border-light);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.pagination .page-link i {
    font-size: 14px;
}



/* WOW Animation Support */
.wow {
    visibility: hidden;
}

/* === RESPONSIVE === */

/* TABLET LANDSCAPE (991px - 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .sidebar {
        padding-left: 15px;
        margin-top: 40px;
    }
    
    .statistik-container {
        gap: 20px;
    }
}

/* TABLET (768px - 991px) */
@media (max-width: 991px) {
    /* Container & Layout */
    .container {
        padding: 0 15px;
    }
    
    /* Grid */
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        width: 100%;
    }
    
    /* Header */
    .header_logo_area {
        gap: 16px;
        margin-top: 15px;
    }
    
    .logo-img {
        max-height: 60px;
    }
    
    .site-title {
        font-size: clamp(22px, 4vw, 28px);
    }
    
    .desa-address {
        font-size: clamp(12px, 2vw, 14px);
    }
    
    .header_search {
        max-width: 100%;
    }
    
    .search-input,
    .search-form input[type="text"] {
        padding: 12px 50px 12px 20px;
        font-size: 13px;
    }
    
    .btn-search {
        width: 40px;
        height: 40px;
        right: 5px;
    }
    
    .running-text-label {
        font-size: 11px;
        padding: 7px 12px;
    }
    
    .running-text-content marquee {
        font-size: 13px;
    }
    
    /* Navigation */
    .navbar-header {
        display: block;
        padding: 12px 0;
    }
    
    .navbar-toggle {
        display: block;
    }
    
    .navbar::before {
        display: none;
    }
    
    .navbar-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        background: #fff;
        border-top: 2px solid var(--border-light);
    }
    
    .navbar-collapse.in,
    .navbar-collapse.show {
        max-height: 700px;
    }
    
    .navbar-nav,
    .custom-nav {
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .navbar-nav > li,
    .custom-nav > li {
        flex: none;
        width: 100%;
    }
    
    .navbar-nav > li > a,
    .custom-nav > li > a {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 14px 18px;
        justify-content: flex-start;
    }
    
    .navbar-nav > li > a::before,
    .custom-nav > li > a::before {
        left: 0;
        width: 3px;
        height: 100%;
        bottom: 0;
        transform: scaleX(0);
    }
    
    .navbar-nav > li > a:hover::before,
    .navbar-nav > li.active > a::before,
    .custom-nav > li > a:hover::before {
        transform: scaleX(1);
        width: 3px;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--primary-gradient-soft);
        padding-left: 24px;
        visibility: visible;
        opacity: 1;
        transform: none;
        display: none;
    }
    
    .dropdown-menu::before {
        display: none;
    }
    
    .dropdown.open .dropdown-menu {
        display: block;
    }
    
    /* Content */
    .main-content-wrapper {
        margin: 30px 0;
    }
    
    /* Statistik */
    .statistik-container {
        flex-direction: column;
        min-height: auto;
        gap: 20px;
    }
    
    .statistik-sidebar {
        flex: none;
        position: relative;
        max-height: none;
        top: 0;
    }
    
    .statistik-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 15px;
    }
    
    .statistik-menu-item {
        padding: 12px;
        gap: 12px;
    }
    
    .statistik-menu-item .icon-bg {
        width: 120px;
        height: 38px;
    }
    
    .statistik-menu-item span {
        font-size: 12px;
    }
    
    .welcome-content h2 {
        font-size: 28px;
    }
    
    .welcome-content > p {
        font-size: 15px;
    }
    
    .statistik-content {
        min-height: 500px;
    }
    
    .statistik-welcome {
        min-height: 500px;
        padding: 30px 20px;
    }
    
    .statistik-content-wrapper,
    .statistik-iframe {
        height: 500px;
        min-height: 500px;
    }
    
    /* Slider */
    .slider-wrapper .cycle-slider {
        max-height: 350px;
    }
    
    .slider-wrapper .single_iteam {
        height: 350px !important;
    }
    
    .slider-wrapper .textgambar {
        font-size: 15px;
        padding: 16px 20px;
    }
    
    .slider-wrapper .cycle-prev,
    .slider-wrapper .cycle-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .slider-wrapper .cycle-prev i,
    .slider-wrapper .cycle-next i {
        font-size: 16px;
    }
    
    /* Articles */
    .article-item {
        margin-bottom: 25px;
    }
    
    .article-title {
        font-size: 17px;
    }
    
    .article-content {
        padding: 20px;
    }
    
    /* Footer */
    .footer_top {
        padding: 40px 0 20px;
    }
    
    .footer_top .col-lg-4,
    .footer_top .col-md-4 {
        width: 50%;
    }
    
    .footer_top .col-lg-4:last-child,
    .footer_top .col-md-4:last-child {
        width: 100%;
        margin-top: 20px;
    }
    
    /* Pemerintah */
    .card-pemerintah .image-pemerintah {
        width: 140px;
        height: 140px;
    }
    
    .card-pemerintah b {
        font-size: 16px;
    }
    
    /* Pagination */
    .pagination_area {
        padding: 15px;
    }
}

/* MOBILE LANDSCAPE (576px - 768px) */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    /* Container */
    .container,
    .container-fluid {
        padding: 0 15px;
    }
    
    /* Grid */
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        width: 100%;
    }
    
    .row {
        margin: 0 -10px;
    }
    
    [class*="col-"] {
        padding: 0 10px;
    }
    
    /* Header */
    .header-container {
        min-height: auto;
    }
    
    .header_logo_area {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        margin-top: 10px;
        padding: 10px 0;
    }
    
    .logo-link {
        flex-direction: column;
        gap: 12px;
    }
    
    .logo-img {
        max-height: 55px;
    }
    
    .logo-text {
        text-align: center;
    }
    
    .site-title {
        font-size: clamp(18px, 5vw, 24px);
    }
    
    .desa-address {
        font-size: clamp(11px, 2.5vw, 13px);
    }
    
    .header_actions {
        align-items: center;
        width: 100%;
    }
    
    .header_buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn-admin,
    .btn-mandiri {
        font-size: 11px;
        padding: 8px 14px;
    }
    
    .header_search {
        max-width: 100%;
    }
    
    .search-input,
    .search-form input[type="text"] {
        padding: 11px 48px 11px 18px;
        font-size: 12px;
    }
    
    .btn-search {
        width: 38px;
        height: 38px;
    }
    
    .running-text-wrapper {
        gap: 12px;
    }
    
    .running-text-label {
        font-size: 10px;
        padding: 6px 10px;
    }
    
    .running-text-content marquee {
        font-size: 12px;
    }
    
    /* Navigation */
    .navbar-nav > li > a,
    .custom-nav > li > a {
        padding: 12px 16px;
        font-size: 12px;
    }
    
    /* Content */
    .main-content-wrapper {
        margin: 20px 0;
        min-height: 400px;
    }
    
    /* Cards & Widgets */
    .card,
    .widget,
    .sidebar-widget {
        margin-bottom: 20px;
    }
    
    .card-header,
    .widget-header,
    .box-header {
        padding: 14px 18px;
        font-size: 15px;
    }
    
    .card-body,
    .widget-body,
    .box-body {
        padding: 15px;
    }
    
    #jam {
        font-size: 18px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    /* Statistik */
    .statistik-container {
        gap: 16px;
        margin-bottom: 30px;
    }
    
    .statistik-sidebar-header {
        padding: 12px 15px;
    }
    
    .statistik-sidebar-header h3 {
        font-size: 14px;
    }
    
    .statistik-menu {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
    
    .statistik-menu-item {
        padding: 10px;
        gap: 10px;
    }
    
    .statistik-menu-item .icon-bg {
        width: 100px;
        height: 35px;
    }
    
    .statistik-menu-item span {
        font-size: 11px;
    }
    
    .welcome-content {
        padding: 20px;
    }
    
    .welcome-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }
    
    .welcome-icon i {
        font-size: 40px;
    }
    
    .welcome-content h2 {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .welcome-content > p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .welcome-instruction {
        flex-direction: column;
        padding: 16px 20px;
        gap: 12px;
    }
    
    .welcome-instruction i {
        font-size: 20px;
    }
    
    .welcome-instruction p {
font-size: 13px;
}

.statistik-content {
    min-height: 450px;
}

.statistik-welcome {
    min-height: 450px;
    padding: 25px 15px;
}

.statistik-content-wrapper,
.statistik-iframe {
    height: 450px;
    min-height: 450px;
}

/* Slider */
.slider-wrapper {
    margin-bottom: 25px;
}

.slider-wrapper .cycle-slider {
    max-height: 280px;
    border-radius: var(--radius-lg) !important;
}

.slider-wrapper .single_iteam {
    height: 280px !important;
}

.slider-wrapper .cycle-prev,
.slider-wrapper .cycle-next {
    width: 36px !important;
    height: 36px !important;
}

.slider-wrapper .cycle-prev {
    left: 10px !important;
}

.slider-wrapper .cycle-next {
    right: 10px !important;
}

.slider-wrapper .cycle-prev i,
.slider-wrapper .cycle-next i {
    font-size: 14px;
}

.slider-wrapper .textgambar {
    font-size: 13px;
    padding: 12px 16px;
}

.slider-wrapper .textgambar.hidden-xs {
    display: none !important;
}

.slider-wrapper .cycle-pager {
    bottom: 12px;
    padding: 6px 12px;
    gap: 8px;
}

.slider-wrapper .cycle-pager span {
    width: 8px;
    height: 8px;
}

.slider-wrapper .cycle-pager span.cycle-pager-active {
    width: 24px;
}

/* Articles */
.article-item {
    margin-bottom: 20px;
}

.article-category {
    top: 14px;
    left: 14px;
    font-size: 10px;
    padding: 5px 12px;
}

.article-content {
    padding: 18px;
}

.article-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.article-meta {
    font-size: 11px;
    gap: 12px;
    margin-bottom: 12px;
}

.article-excerpt {
    font-size: 13px;
    margin-bottom: 14px;
}

.read-more {
    font-size: 12px;
}

/* Pemerintah */
.card-pemerintah {
    padding: 20px;
}

.card-pemerintah .image-pemerintah {
    width: 120px;
    height: 120px;
}

.card-pemerintah b {
    font-size: 15px;
}

.card-pemerintah .jabatan {
    font-size: 12px;
}

/* Aparatur Widget */
.single_bottom_rightbar h5 {
    font-size: 14px;
    padding: 12px 16px;
}

.single_bottom_rightbar .content_middle_middle {
    padding: 16px;
}

.single_bottom_rightbar #aparatur_desa.cycle-slideshow {
    min-height: 420px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container {
    height: 260px;
    margin-bottom: 16px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-info {
    min-height: 120px;
    padding: 16px;
}

.single_bottom_rightbar .cycle-prev,
.single_bottom_rightbar .cycle-next {
    width: 38px !important;
    height: 38px !important;
    top: 130px !important;
}

.single_bottom_rightbar .cycle-prev {
    left: 8px !important;
}

.single_bottom_rightbar .cycle-next {
    right: 8px !important;
}

.single_bottom_rightbar .cycle-prev i,
.single_bottom_rightbar .cycle-next i {
    font-size: 16px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-name {
    font-size: 16px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-position {
    font-size: 12px;
    margin-bottom: 12px;
}

/* Footer */
.footer_top {
    padding: 35px 0 20px;
    margin-top: 40px;
}

.footer_top .col-lg-4,
.footer_top .col-md-4 {
    width: 100%;
    margin-bottom: 25px;
}

.single_footer_top {
    margin-bottom: 0;
}

.single_footer_top h2 {
    font-size: 15px;
    margin-bottom: 16px;
}

.footer-logo-wrapper img {
    width: 55px;
    height: 55px;
}

.footer-village-name h4 {
    font-size: 16px;
}

.footer-contact-item {
    font-size: 12px;
    margin-bottom: 12px;
}

.labels_nav li a {
    font-size: 12px;
    padding: 9px 12px;
}

.text-md-left,
.text-md-right {
    text-align: center !important;
}

.esensi-footer {
    padding: 16px 0;
    font-size: 12px;
}

.esensi-footer .col-md-6 {
    width: 100%;
    margin-bottom: 8px;
}

.esensi-footer .col-md-6:last-child {
    margin-bottom: 0;
}

/* Pagination */
.pagination_area {
    padding: 15px;
    margin: 30px 0 15px;
}

.pagination {
    gap: 4px;
    justify-content: center;
}

.pagination .page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
}

/* Scroll to Top */
.scrollToTop {
    width: 45px;
    height: 45px;
    bottom: 20px;
    right: 20px;
    font-size: 18px;
}

/* MOBILE PORTRAIT (320px - 576px) /
@media (max-width: 576px) {
/ Typography */
body {
font-size: 14px;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }

/* Container */
.container,
.container-fluid {
    padding: 0 12px;
}

.row {
    margin: 0 -8px;
}

[class*="col-"] {
    padding: 0 8px;
}

/* Header */
.header_logo_area {
    gap: 10px;
    padding: 8px 0;
}

.logo-link {
    gap: 10px;
}

.logo-img {
    max-height: 50px;
}

.site-title {
    font-size: clamp(16px, 5.5vw, 20px);
}

.desa-address {
    font-size: clamp(10px, 2.8vw, 12px);
    margin-top: 5px;
}

.btn-admin,
.btn-mandiri {
    font-size: 10px;
    padding: 7px 12px;
    letter-spacing: 0.5px;
}

.search-input,
.search-form input[type="text"] {
    padding: 10px 45px 10px 16px;
    font-size: 11px;
}

.btn-search {
    width: 35px;
    height: 35px;
}

.btn-search i {
    font-size: 14px;
}

.running-text-wrapper {
    gap: 10px;
}

.running-text-label {
    font-size: 9px;
    padding: 5px 8px;
    letter-spacing: 0.5px;
}

.running-text-content marquee {
    font-size: 11px;
}

/* Navigation */
.navbar-nav > li > a,
.custom-nav > li > a {
    padding: 11px 14px;
    font-size: 11px;
    gap: 8px;
}

.navbar-nav > li > a i,
.custom-nav > li > a i {
    font-size: 14px;
}

.dropdown-menu {
    padding-left: 20px;
}

.dropdown-menu > li > a {
    padding: 10px 16px;
    font-size: 11px;
}

/* Content */
.main-content-wrapper {
    margin: 15px 0;
    min-height: 300px;
}

/* Cards & Widgets */
.card,
.widget,
.sidebar-widget {
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.card-header,
.widget-header,
.box-header {
    padding: 12px 15px;
    font-size: 13px;
    gap: 8px;
}

.card-header i,
.widget-header i,
.box-header i {
    font-size: 14px;
}

.card-body,
.widget-body,
.box-body {
    padding: 12px;
}

#jam {
    font-size: 16px;
    padding: 16px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

/* Statistik */
.statistik-container {
    gap: 14px;
    margin-bottom: 25px;
}

.statistik-sidebar-header {
    padding: 10px 12px;
}

.statistik-sidebar-header i {
    font-size: 14px;
}

.statistik-sidebar-header h3 {
    font-size: 13px;
    letter-spacing: 0.5px;
}

.statistik-menu {
    padding: 10px;
    gap: 8px;
}

.statistik-menu-item {
    padding: 8px;
    gap: 8px;
}

.statistik-menu-item .icon-bg {
    width: 90px;
    height: 32px;
}

.statistik-menu-item span {
    font-size: 10px;
    letter-spacing: 0.3px;
}

.welcome-content {
    padding: 15px;
}

.welcome-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 16px;
}

.welcome-icon i {
    font-size: 32px;
}

.welcome-content h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.welcome-content > p {
    font-size: 12px;
    margin-bottom: 12px;
}

.welcome-instruction {
    padding: 12px 16px;
    gap: 10px;
    margin-top: 20px;
}

.welcome-instruction i {
    font-size: 18px;
}

.welcome-instruction p {
    font-size: 11px;
}

.statistik-content {
    min-height: 400px;
}

.statistik-welcome {
    min-height: 400px;
    padding: 20px 12px;
}

.statistik-content-wrapper,
.statistik-iframe {
    height: 400px;
    min-height: 400px;
}

/* Slider */
.slider-wrapper {
    margin-bottom: 20px;
}

.slider-wrapper::before {
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
}

.slider-wrapper .cycle-slider {
    max-height: 220px;
    border-radius: var(--radius-md) !important;
}

.slider-wrapper .single_iteam {
    height: 220px !important;
}

.slider-wrapper .cycle-prev,
.slider-wrapper .cycle-next {
    width: 32px !important;
    height: 32px !important;
}

.slider-wrapper .cycle-prev {
    left: 8px !important;
}

.slider-wrapper .cycle-next {
    right: 8px !important;
}

.slider-wrapper .cycle-prev i,
.slider-wrapper .cycle-next i {
    font-size: 12px;
}

.slider-wrapper .textgambar {
    font-size: 11px;
    padding: 10px 12px;
}

.slider-wrapper .cycle-pager {
    bottom: 10px;
    padding: 5px 10px;
    gap: 6px;
}

.slider-wrapper .cycle-pager span {
    width: 6px;
    height: 6px;
}

.slider-wrapper .cycle-pager span.cycle-pager-active {
    width: 20px;
}

/* Articles */
.article-item {
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
}

.article-category {
    top: 12px;
    left: 12px;
    font-size: 9px;
    padding: 4px 10px;
}

.article-content {
    padding: 15px;
}

.article-title {
    font-size: 14px;
    margin-bottom: 8px;
}

.article-meta {
    font-size: 10px;
    gap: 10px;
    margin-bottom: 10px;
}

.article-excerpt {
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.read-more {
    font-size: 11px;
    gap: 6px;
}

/* Pemerintah */
.single_category {
    margin-bottom: 25px;
}

.card-pemerintah {
    padding: 16px;
}

.card-pemerintah .image-pemerintah {
    width: 100px;
    height: 100px;
    margin-bottom: 14px;
    border-width: 3px;
}

.card-pemerintah b {
    font-size: 13px;
    margin-bottom: 6px;
}

.card-pemerintah .jabatan {
    font-size: 10px;
    margin-bottom: 12px;
}

.card-pemerintah hr {
    margin: 12px 0;
}

.card-pemerintah .badge {
    font-size: 9px;
    padding: 5px 10px;
    margin-top: 6px;
}

.btn-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

/* Aparatur Widget */
.single_bottom_rightbar h5 {
    font-size: 13px;
    padding: 10px 14px;
}

.single_bottom_rightbar .content_middle_middle {
    padding: 14px;
}

.single_bottom_rightbar #aparatur_desa.cycle-slideshow {
    min-height: 370px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container {
    height: 220px;
    margin-bottom: 14px;
    border-radius: var(--radius-lg);
}

.single_bottom_rightbar #aparatur_desa .aparatur-info {
    min-height: 110px;
    padding: 14px;
}

.single_bottom_rightbar .cycle-prev,
.single_bottom_rightbar .cycle-next {
    width: 34px !important;
    height: 34px !important;
    top: 110px !important;
}

.single_bottom_rightbar .cycle-prev {
    left: 6px !important;
}

.single_bottom_rightbar .cycle-next {
    right: 6px !important;
}

.single_bottom_rightbar .cycle-prev i,
.single_bottom_rightbar .cycle-next i {
    font-size: 14px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-name {
    font-size: 14px;
    margin-bottom: 6px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-position {
    font-size: 10px;
    margin-bottom: 10px;
}

.single_bottom_rightbar #aparatur_desa .status-badge {
    font-size: 9px;
    padding: 5px 10px;
}

/* Footer */
.footer_top {
    padding: 30px 0 15px;
    margin-top: 30px;
}

.footer_top .col-lg-4,
.footer_top .col-md-4 {
    margin-bottom: 20px;
}

.single_footer_top h2 {
    font-size: 14px;
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.single_footer_top h2::after {
    width: 40px;
    height: 2px;
}

.footer-logo-wrapper {
    gap: 12px;
    margin-bottom: 12px;
}

.footer-logo-wrapper img {
    width: 50px;
    height: 50px;
}

.footer-village-name h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.footer-village-name span {
    font-size: 11px;
}

.footer-village-desc {
    font-size: 11px;
    margin-top: 12px;
    line-height: 1.6;
}

.footer-contact-item {
    font-size: 11px;
    margin-bottom: 10px;
    gap: 10px;
}

.footer-contact-item i {
    font-size: 14px;
    width: 18px;
}

.labels_nav li {
    margin-bottom: 8px;
}

.labels_nav li a {
    font-size: 11px;
    padding: 8px 10px;
    gap: 8px;
}

.labels_nav li a i {
    font-size: 12px;
}

.footer-social {
    gap: 8px;
    margin-top: 16px;
}

.footer-social a {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.esensi-footer {
    padding: 14px 0;
    font-size: 11px;
    margin-top: 20px;
}

.esensi-credits a + a::before {
    margin: 0 3px;
}

/* Pagination */
.pagination_area {
    padding: 12px;
    margin: 20px 0 12px;
}

.pagination {
    gap: 3px;
}

.pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
}

.pagination .page-link i {
    font-size: 12px;
}

/* Scroll to Top */
.scrollToTop {
    width: 42px;
    height: 42px;
    bottom: 16px;
    right: 16px;
    font-size: 16px;
}

/* Section Title */
.section-title {
    margin-bottom: 24px;
}

.section-title h2 {
    font-size: 18px;
}

/* EXTRA SMALL MOBILE (< 400px) */
@media (max-width: 399px) {
.container,
.container-fluid {
padding: 0 10px;
}

.site-title {
    font-size: clamp(14px, 6vw, 18px);
}

.desa-address {
    font-size: clamp(9px, 3vw, 11px);
}

.btn-admin,
.btn-mandiri {
    font-size: 9px;
    padding: 6px 10px;
}

.statistik-menu-item .icon-bg {
    width: 80px;
    height: 30px;
}

.statistik-menu-item span {
    font-size: 9px;
}

.welcome-content h2 {
    font-size: 16px;
}

.slider-wrapper .cycle-slider {
    max-height: 200px;
}

.slider-wrapper .single_iteam {
    height: 200px !important;
}

.article-title {
    font-size: 13px;
}

.card-pemerintah .image-pemerintah {
    width: 90px;
    height: 90px;
}

.card-pemerintah b {
    font-size: 12px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container {
    height: 200px;
}

.footer-village-name h4 {
    font-size: 13px;
}

/* LANDSCAPE MODE FIX untuk semua mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
.header-container {
min-height: auto;
}

.header_logo_area {
    flex-direction: row;
    margin-top: 8px;
    padding: 5px 0;
}

.logo-link {
    flex-direction: row;
    gap: 12px;
}

.logo-img {
    max-height: 40px;
}

.site-title {
    font-size: 16px;
}

.desa-address {
    font-size: 10px;
}

.statistik-content,
.statistik-welcome,
.statistik-content-wrapper,
.statistik-iframe {
    min-height: 350px;
    height: 350px;
}

.slider-wrapper .cycle-slider {
    max-height: 250px;
}

.slider-wrapper .single_iteam {
    height: 250px !important;
}

/* ==========================================================================
   PENUTUP BLOK @media YANG MENGGANTUNG
   --------------------------------------------------------------------------
   Berkas ini membuka @media (max-width:768px) di baris 2952 tanpa pernah
   menutupnya, sehingga baris 2952 s/d akhir ikut terkurung di dalamnya
   (termasuk @media 399px dan @media orientation di bawahnya, yang jadi
   bersarang). Browser menutupnya sendiri di akhir berkas, jadi tiga kurung
   di bawah ini TIDAK mengubah tampilan sama sekali — hanya membuat berkas
   sah secara sintaks supaya aturan yang ditambahkan sesudahnya berada di
   tingkat teratas, bukan ikut terkurung jadi aturan khusus layar HP.
   ========================================================================== */
}
}
}


/* ==========================================================================
   ===== REDESIGN PESSEL — COMPACT & MODERN ================================
   --------------------------------------------------------------------------
   Semua penyesuaian tampilan baru ada di bawah ini, dalam satu berkas yang
   sama supaya tidak ada CSS kedua. Karena berada paling akhir, aturan di sini
   menang atas aturan sebelumnya pada kekhususan yang sama.

   Urutan bagian:  0 LEBAR ISI · 1 HERO · 2 NAVBAR · 3 HALAMAN UTAMA · 4 KARTU ARTIKEL
                   5 PANEL STATISTIK · 6 FOOTER · 7 UTILITAS
                   8 WIDGET SISI KANAN (jam & Pemerintah Nagari) · 9 PAGINASI
                   10 KARTU APBDES · 11 DETAIL ARTIKEL
                   12 PERPINDAHAN ANTAR HALAMAN

   Catatan teknis yang menentukan banyak aturan di bawah:
   - Tema ini TIDAK memuat grid Bootstrap, jadi col-md-* tidak berfungsi;
     baris dan kolom dibentuk sendiri dengan flex.
   - Kartu artikel berada di dalam flex container, sehingga -webkit-line-clamp
     TIDAK bekerja (anak flex di-blockify). Pemotongan teks memakai tinggi
     kelipatan line-height + gradasi pudar.
   - Label menu Data Statistik menyatu di dalam berkas PNG-nya, jadi .icon-bg
     tidak boleh diperkecil atau di-clip.
   ========================================================================== */

:root {
    --pp: #0f766e;
    --pp-hover: #0d5c56;
    --pp-soft: #f0fdfa;
    --pp-line: #e6ebef;
    --pp-text: #1e293b;
    --pp-muted: #64748b;
    --pp-faint: #94a3b8;
    --pp-radius: 12px;
}

/* ==========================================================================
   0. DASAR HALAMAN — latar & lebar isi
   --------------------------------------------------------------------------
   Aturan body di baris ~62 memberi seluruh halaman gradasi diagonal dari
   #F9FAF7 (nyaris putih) ke #AAABA9 — abu SEDANG, bukan abu muda. Akibatnya
   sisi kanan bawah halaman terlihat kusam dan kartu putih di atasnya kehilangan
   ketegasan. Gradasi pada latar halaman juga salah satu ciri paling kentara
   desain lama.

   Diganti abu rata yang sangat muda. Kombinasi latar #f5f5f7 dengan kartu
   putih bersih itulah yang dipakai macOS dan situs Apple: kartunya jadi
   tampak menyala, batasnya tegas, tanpa perlu bingkai tebal atau bayangan.
   --------------------------------------------------------------------------
   Aturan dasar di baris ~104 membatasi .container pada max-width 1280px lalu
   menengahkannya. Di layar yang lebih lebar dari itu, sisanya jadi ruang
   kosong di kiri-kanan — dan itulah kenapa pada perbesaran 110% halaman
   terlihat penuh (lebar CSS turun di bawah 1280) sedangkan pada 100% tidak.
   Batasnya dinaikkan ke 1440px: penuh di layar laptop umum, tapi baris teks
   tidak ikut memanjang tanpa batas di monitor lebar.
   ========================================================================== */

body {
    background: #f5f5f7 !important;
    background-image: none !important;
    background-attachment: initial !important;
}

.container { max-width: 1440px; }

/* ==========================================================================
   1. HERO / HEADER
   --------------------------------------------------------------------------
   Tata letak: logo + nama nagari di KIRI, blok aksi (pencarian + tombol) di
   KANAN, keduanya sejajar vertikal di tengah.

   Catatan penting — kenapa semua ditulis eksplisit di sini:
   Tema ini TIDAK memuat grid Bootstrap. Berkas bootstrap-compatibility.css
   hanya berisi utilitas (.align-items-center dsb), tanpa .row / .col-md-*.
   Akibatnya `col-md-6` pada partials/header.blade.php melebar penuh, bukan
   setengah, sehingga isinya tampak mengambang di tengah. Jadi baris dan
   kolomnya kita bentuk sendiri memakai flex, tidak menumpang grid.

   Selain itu pessel-theme-modern.css baris ~2952 (@media max-width:768px)
   memaksa .header_actions{align-items:center} dan
   .header_buttons{justify-content:center}. Aturan di bawah memakai !important
   dan dimuat paling akhir supaya menang atas blok tersebut di layar lebar,
   lalu perataan tengah dikembalikan sengaja di blok mobile paling bawah.
   ========================================================================== */

/* Tinggi hero dipertahankan seperti sekarang (~250px) */
.header-container > .container {
    min-height: 250px !important;
    display: flex !important;
    align-items: stretch !important;   /* baris hero mengisi penuh tinggi 250px */
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Baris hero dibentuk sendiri: kiri melar, kanan menempel tepi kanan */
.header-container > .container .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;   /* perataan diatur per kolom di bawah */
    width: 100% !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
}

.header-container > .container .row > [class*="col-"] {
    float: none !important;
    max-width: none !important;
}

.header-container > .container .row > [class*="col-"]:first-child {
    flex: 1 1 auto !important;
    width: auto !important;
    padding-left: 0 !important;
    align-self: flex-start !important;   /* logo + nama nagari di paling ATAS */
    padding-top: 4px !important;
}

.header-container > .container .row > [class*="col-"]:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    align-self: flex-end !important;     /* pencarian + tombol di kanan BAWAH */
    padding-bottom: 4px !important;
}

/* --- Sisi kiri: logo + nama nagari --- */
.logo-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
}

.logo-img { max-height: 62px !important; }

.logo-text { text-align: left !important; }

.site-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.desa-address {
    font-size: .82rem !important;
    font-weight: 400 !important;
    margin: 3px 0 0 !important;
    opacity: .92;
}

/* --- Sisi kanan: blok aksi, RATA KANAN --- */
.header_actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: auto !important;
    padding: 0 !important;
}

.header_search {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    order: 1;
}

.header_search .search-form {
    display: flex !important;
    align-items: center !important;
    width: 320px !important;
    max-width: 320px !important;
    margin: 0 0 0 auto !important;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.search-input,
.search-form input[type="text"] {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 10px 8px 10px 18px !important;
    font-size: 13.5px !important;
    height: 40px !important;
    border-radius: 999px 0 0 999px !important;
}

body .btn-search {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin-right: 3px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--pp) !important;
    border: 0 !important;
    color: #fff !important;
}

.header_buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    order: 2;
}

body .btn-admin,
body .btn-mandiri {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 9px 18px !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background .15s ease;
}

body .btn-admin {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.5) !important;
}
body .btn-admin:hover { background: rgba(255,255,255,.3) !important; color: #fff !important; }

body .btn-mandiri { background: var(--pp) !important; color: #fff !important; }
body .btn-mandiri:hover { background: #0b5e57 !important; color: #fff !important; }

/* --- Lapisan gelap di atas foto hero ---
   Dipindah ke sini dari blok <style> di partials/header.blade.php yang kini
   dihapus. Tanpa lapisan ini tulisan putih tenggelam di foto terang. */
.header-container { position: relative; z-index: 1; }

.header-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,38,22,.30) 0%, rgba(6,38,22,.10) 45%, rgba(6,38,22,.72) 100%);
}

.header-container > .container { position: relative; z-index: 2; }

.logo-img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }

.site-title { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.4) !important; }

.desa-address {
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
}

/* --- Pengumuman di bawah hero ---
   Dulu memakai <marquee>, elemen yang sudah dihapus dari standar HTML dan
   sulit dibaca karena tulisannya bergerak terus. Sekarang satu pengumuman
   tampil diam lalu berganti dengan pudar-silang; animasinya dijalankan oleh
   skrip kecil di partials/header.blade.php. */
.running-text-container {
    background: rgba(3,25,15,.55) !important;
    padding: 7px 0 !important;
    margin: 0 !important;
}

.running-text-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
}

/* Lencana kaca, bukan pil biru menyala */
.running-text-label {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 999px !important;
    padding: 4px 11px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    backdrop-filter: blur(6px);
}

.running-text-label .fa { font-size: 11px !important; opacity: .85; }

.running-text-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 20px !important;
    overflow: hidden !important;
}

/* Satu pengumuman menempati satu lapisan yang saling menimpa, jadi
   pergantiannya bisa bersilang tanpa tata letak ikut bergeser.
   Keadaan awal: sedikit di kanan dan tembus pandang.
   'aktif'  -> meluncur ke tempatnya sambil memekat.
   'keluar' -> meluncur ke kiri sambil memudar. */
.rt-item {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate(26px, -50%);
    opacity: 0;
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
                transform .55s cubic-bezier(.22, .61, .36, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    pointer-events: none;
    font-size: 13px;
    line-height: 20px;
}

.rt-item.aktif {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
}

.rt-item.keluar {
    opacity: 0;
    transform: translate(-26px, -50%);
}

.rt-item,
.rt-item a {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.rt-item a:hover { text-decoration: underline !important; }

/* Titik denyut pada lencana: penanda "ada yang baru". Ini satu-satunya
   elemen yang bergerak terus, dan gerakannya di tempat — tidak menyeret
   mata seperti tulisan berjalan. */
.running-text-label::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 9px;
    border-radius: 50%;
    background: #4ade80;
    animation: rt-denyut 2.4s ease-out infinite;
}

@keyframes rt-denyut {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .65); }
    70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Hormati setelan "kurangi animasi": tulisan langsung di tempat, titik diam. */
@media (prefers-reduced-motion: reduce) {
    .rt-item { transition: none; }
    .running-text-label::after { animation: none; }
}

@media (max-width: 575px) {
    .running-text-wrapper { gap: 8px !important; }
    .running-text-label { padding: 3px 9px !important; font-size: 10px !important; }
    .rt-item { font-size: 12px; }
}


/* Pengaman: .running-text-container juga punya .container di dalamnya, jadi
   aturan hero di atas harus dipagari agar tidak ikut membesarkannya. */
.header-container .running-text-container .container {
    min-height: 0 !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.running-text-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 0 !important;
}
.running-text-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
}
.running-text-content marquee { width: 100% !important; }

/* --- Layar sempit: kembalikan susunan menumpuk & rata tengah --- */
@media (max-width: 767px) {
    .header-container > .container { min-height: 0 !important; display: block !important; }
    .header-container > .container .row { flex-direction: column !important; justify-content: center !important; }
    .header-container > .container .row > [class*="col-"]:last-child { margin-left: 0 !important; width: 100% !important; }
    .logo-link { flex-direction: column !important; text-align: center; }
    .logo-text { text-align: center !important; }
    .header_actions { align-items: center !important; width: 100% !important; margin-top: 14px; }
    .header_search .search-form { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
    .header_buttons { justify-content: center !important; }
}

/* ==========================================================================
   2. NAVBAR
   ========================================================================== */


/* --- Navbar lengket: serahkan ke browser, bukan ke JavaScript ---
   Markup-nya <div id="navarea" class="sticky-nav">, dan .sticky-nav di baris
   ~594 sudah menyetel position:sticky. Artinya navbar memang sudah lengket
   secara alami, ditangani browser saat menata halaman — sebelum digambar.

   Namun custom.js baris 72-105 masih menjalankan mekanisme lengket buatan
   sendiri: menyisipkan #nav-placeholder setinggi navbar, lalu menampilkannya
   saat halaman digulir melewati navbar. Dua akibatnya:

   1. Navbar sticky TETAP menempati ruang di alirannya, jadi penyangga itu
      menambah tinggi ekstra — isi halaman melompat turun sekitar 46px pada
      guliran pertama dan melompat balik saat kembali ke atas.
   2. Penangannya hanya berjalan pada peristiwa gulir. Saat halaman dimuat
      ulang dalam keadaan sudah tergulir, ia belum sempat berjalan; navbar
      baru menempel setelah kursor digeser sedikit, sehingga terlihat muncul
      mendadak.

   Penyangganya dimatikan. Posisi navbar sepenuhnya diserahkan ke browser,
   yang sudah benar sejak baris pertama halaman digambar. */
#nav-placeholder { display: none !important; }

#navarea {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #fff;
}

/* custom.js tetap menambahkan .fixed-nav saat navbar mulai menempel. Kelas
   itu tidak lagi dipakai untuk memindahkan posisi — hanya untuk memberi
   bayangan tipis sebagai penanda navbar sedang melayang di atas isi. */
#navarea.fixed-nav { box-shadow: 0 1px 4px rgba(15, 23, 42, .10) !important; }

/* --- Hapus "alis" gradasi --------------------------------------------------
   Tema asli memasang .dropdown-menu::before (baris ~767): batang gradasi 4px
   di sisi atas setiap submenu, dan .navbar::before (baris ~631): garis gradasi
   3px di bawah navbar. Keduanya yang bikin kesan lama. Alis dimatikan total,
   garis navbar diganti garis rambut 1px yang netral. */
.navbar .custom-nav .dropdown-menu::before,
.navbar .dropdown-menu::before {
    content: none !important;
    display: none !important;
}

.navbar::before {
    height: 1px !important;
    background: var(--pp-line) !important;
}

/* --- Batang navbar --- */
.navbar {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.navbar .custom-nav > li > a {
    text-transform: none !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    color: #334155 !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    background: transparent !important;
    overflow: visible !important;
    transition: color .15s, box-shadow .15s;
}

/* Garis animasi bawaan tiap butir menu (a::before / a::after) dimatikan;
   penanda aktif diganti box-shadow inset yang lebih tenang. */
.navbar .custom-nav > li > a::before,
.navbar .custom-nav > li > a::after {
    content: none !important;
}

.navbar .custom-nav > li.home-icon > a {
    color: var(--pp) !important;
    font-size: 16px !important;
}

.navbar .custom-nav > li > a:hover,
.navbar .custom-nav > li.active > a {
    color: var(--pp) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--pp);
}

@media (min-width: 768px) {
    .navbar .custom-nav {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .navbar .custom-nav > li { float: none; }
    .navbar .custom-nav > li > a {
        display: flex;
        align-items: center;
        height: 46px;                 /* sebelumnya 54px */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* --- Tanda panah submenu --- */
.navbar .custom-nav .caret {
    border: 0 !important;
    width: auto;
    height: auto;
}

.navbar .custom-nav .caret::before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 11px;
    color: var(--pp-faint);
    margin-left: 5px;
}

/* --- Submenu: kotak putih polos, padat --- */
.navbar .custom-nav .dropdown-menu {
    border: 1px solid var(--pp-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
    padding: 5px !important;
    margin-top: 4px;
    min-width: 215px !important;
    overflow: hidden;
}

.navbar .custom-nav .dropdown-menu > li > a {
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    color: #475569 !important;
    padding: 7px 11px !important;
    border-radius: 6px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.navbar .custom-nav .dropdown-menu > li > a:hover {
    background: var(--pp-soft) !important;
    color: var(--pp) !important;
}

/* Ikon di dalam submenu tidak lagi melompat saat disentuh kursor. */
.navbar .custom-nav .dropdown-menu > li > a i {
    color: var(--pp) !important;
    font-size: 13px !important;
}
.navbar .custom-nav .dropdown-menu > li > a:hover i {
    transform: none !important;
}

/* --- Lencana PPID --- */
.navbar .custom-nav li.ppid-icon { margin-left: 8px; }

.navbar .custom-nav li.ppid-icon > a {
    padding: 0 4px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ppid-icon i {
    font-family: system-ui, 'Segoe UI', Roboto, sans-serif !important;
    font-style: normal !important;
    background: #fff4ec !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
    border-radius: 999px !important;
    padding: 5px 12px 5px 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
}

.ppid-icon i::before {
    content: "\f05a";
    font-family: FontAwesome !important;
    font-size: 14px;
    margin-right: 5px;
}

.ppid-icon a:hover i {
    background: #ffe8d6 !important;
    color: #9a3412 !important;
}

/* ==========================================================================
   3. HALAMAN UTAMA — kartu & panel
   ========================================================================== */

.card,
.single_bottom_rightbar,
.box {
    border: 1px solid var(--pp-line) !important;
    border-radius: var(--pp-radius) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
    overflow: hidden;
}

.card:hover,
.single_bottom_rightbar:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07) !important;
}

/* Judul widget: rata, tanpa gradien berulang */
.single_bottom_rightbar > h5,
.single_bottom_rightbar .box-title,
.box-title,
.box-header {
    background: var(--pp) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;
    letter-spacing: .2px !important;
}

.box-title i,
.box-header i {
    opacity: .9;
}

.single_bottom_rightbar {
    margin-bottom: 16px !important;
}

.widget-body {
    padding: 14px !important;
}

.section-title {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--pp-text) !important;
    position: relative;
    padding-left: 12px !important;
}

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

/* Placeholder gambar: ganti noimage.png oranye dengan ikon abu-abu netral */
img[src*="noimage"] {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='230'%3E%3Crect width='400' height='230' fill='%23eef2f6'/%3E%3Cg fill='none' stroke='%2394a3b8' stroke-width='6' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='150' y='80' width='100' height='72' rx='8'/%3E%3Ccircle cx='178' cy='106' r='9'/%3E%3Cpath d='M158 150l26-26 18 16 26-28 22 38'/%3E%3C/g%3E%3C/svg%3E") !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}


/* Dipindah dari blok <style> di template.blade.php yang kini dihapus. */
.card-title,
.card h3,
.card h4,
.card h5,
[class*="col-md-6"] h3,
[class*="col-md-6"] h4 { font-weight: 600 !important; }

/* ==========================================================================
   4. KARTU ARTIKEL
   ========================================================================== */

/* Jarak antar kartu dirapatkan: padding kolom bawaan 15px -> 7px, sehingga
   celah antar kartu 30px menjadi 14px. Margin negatif barisnya disesuaikan di
   .pessel-art-row (kelas itu dipasang oleh skrip di template.blade.php) agar
   tepi kartu terluar tetap lurus dengan judul bagian di atasnya. */
.pessel-art-row {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

.pessel-art {
    width: 33.333% !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

@media (max-width: 991px) {
    .pessel-art { width: 50% !important; }
}

@media (max-width: 575px) {
    .pessel-art { width: 100% !important; }
}

.article-item {
    margin-bottom: 14px !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: var(--pp-radius) !important;
    overflow: hidden;
    box-shadow: none !important;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.article-item:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07) !important;
    transform: none !important;
}

/* Lapisan gradasi setinggi penuh yang menyala saat kartu disentuh kursor
   (aturan dasar baris ~1534). Selain terasa lawas, ia mengubah warna latar
   kartu sehingga gradasi pudar pada cuplikan berita — yang berwarna putih —
   tampil sebagai balok putih di atasnya. Dimatikan. */
.article-item::before { content: none !important; display: none !important; }

/* Gambar tidak lagi membesar 1,1x sambil miring 2 derajat saat disentuh. */
.article-item:hover .article-thumbnail img { transform: none !important; }

/* Tinggi tetap 150px membuat gambar terlihat kecil pada kartu yang lebar.
   Dengan aspect-ratio, tinggi gambar mengikuti lebar kartu, jadi ukurannya
   ikut membesar saat kolom melebar dan perbandingannya selalu sama. */
.article-thumbnail {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: #eef2f6 !important;
}

.article-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* teks alt gambar rusak jangan tampil menumpuk di kartu */
    color: transparent !important;
    font-size: 0 !important;
}

.article-category {
    position: absolute;
    left: 8px;
    top: 8px;
    background: rgba(15, 118, 110, .92) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
}

.article-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    flex: 1;
}

/* Tinggi dikunci kelipatan line-height: potongan selalu jatuh di batas baris.
   -webkit-line-clamp tidak dipakai karena anak flex di-blockify. */
.article-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 19px !important;
    height: 38px !important;
    overflow: hidden !important;
    text-transform: none !important;
    margin: 0 0 6px !important;
}

/* Judul artikel & Baca Selengkapnya memakai teks bergradasi bawaan tema:
   background:linear-gradient + -webkit-background-clip:text +
   -webkit-text-fill-color:transparent. Selama text-fill masih transparan,
   menyetel `color` saja TIDAK berpengaruh — warna diambil dari text-fill.
   Jadi ketiganya dimatikan bersamaan. */
.article-title a {
    color: var(--pp-text) !important;
    -webkit-text-fill-color: var(--pp-text) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

.article-title a:hover {
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

.article-meta {
    font-size: 11px !important;
    color: var(--pp-faint) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

.article-meta span {
    margin-right: 10px;
}

.article-excerpt {
    position: relative !important;
    font-size: 12.5px !important;
    color: var(--pp-muted) !important;
    line-height: 19px !important;
    height: 57px !important;   /* 3 baris x 19px, potongan selalu jatuh di batas baris */
    overflow: hidden !important;
    margin: 0 0 10px !important;
    flex: 0 0 auto !important;
}

/* Gradasi pudar di ujung cuplikan DIBUANG.
   Alasannya: warnanya harus sama persis dengan latar kartu, padahal latar itu
   bisa berubah (lapisan hover, kartu headline). Begitu tidak cocok, ia tampil
   sebagai balok putih. Lagi pula sudah tidak diperlukan — tinggi cuplikan
   dikunci kelipatan tinggi baris (3 x 19px), jadi potongannya selalu jatuh
   tepat di batas baris, tidak pernah memotong huruf di tengah. */
.article-excerpt::after { content: none !important; }

.read-more {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #eef2f6 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   5. PANEL DATA STATISTIK
   ========================================================================== */


/* Rancangan mengikuti sidebar macOS: wadah membulat dengan garis rambut dan
   bayangan sangat tipis, panel samping bernada abu lembut, baris berbentuk pil
   seragam, dan bilah gulir tipis melayang.

   BATASAN PENTING: label tiap butir ("Data Wilayah", "Data Pendidikan", dst)
   MENYATU di dalam berkas PNG-nya — di markup hanya ada <img>, tanpa teks.
   Akibatnya:
   - .icon-bg tidak boleh diperkecil atau di-clip, hanya boleh diatur tingginya;
   - warna teks tidak bisa diubah lewat CSS;
   - baris terpilih TIDAK boleh diberi latar gelap, karena tulisan di dalam PNG
     berwarna gelap dan akan hilang. Karena itu penanda terpilih memakai nada
     teal muda, bukan blok warna penuh seperti sidebar macOS aslinya. */

/* Wadah diberi jarak 24px di baris ~1179, padahal bingkainya melingkupi
   keduanya — akibatnya sisi kiri dan kanan terpisah di dalam satu kotak.
   Dirapatkan jadi nol supaya menyatu seperti satu panel. */
.statistik-container {
    gap: 0 !important;
    align-items: stretch !important;
    border: 1px solid #e6e8ec !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -16px rgba(15, 23, 42, .18) !important;
    overflow: hidden;
    background: #fff;
}

/* Aturan dasar baris ~1184 memberi sidebar height:fit-content, position:
   sticky, dan max-height — akibatnya panel abu berhenti tepat di bawah butir
   terakhir dan menyisakan bidang putih kosong sampai ke dasar. Di sini
   dikembalikan agar merentang penuh setinggi wadahnya. */
.statistik-sidebar {
    flex: 0 0 216px !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
    align-self: stretch !important;
    max-height: none !important;
    border: 0 !important;
    border-right: 1px solid #ebedf0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fafafa !important;
}

/* Bilah judul: tidak lagi blok teal penuh, melainkan kepala lembut bergaris
   rambut — inilah yang membuat kesannya lebih tenang seperti macOS. */
.statistik-sidebar-header {
    background: transparent !important;
    background-image: none !important;
    padding: 13px 14px 9px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #ebedf0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}

.statistik-sidebar-header h3 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #8a8f98 !important;
    /* Aturan dasar baris ~1221 memasang -webkit-text-fill-color:#fff, yang
       menimpa `color` saat teks digambar. Itulah kenapa tulisannya putih. */
    -webkit-text-fill-color: #8a8f98 !important;
    background: none !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

.statistik-sidebar-header i {
    color: var(--pp) !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.statistik-menu {
    padding: 7px 8px !important;
}

/* Isi kanan menempel rata ke bingkai wadah karena jaraknya kini nol. */
.statistik-content {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
}

.statistik-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 0 9px !important;
    margin: 0 0 2px !important;
    height: 40px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    color: #3c3c43 !important;
    text-decoration: none !important;
    transition: background .13s ease;
}

.statistik-menu-item:hover {
    background: rgba(15, 23, 42, .045) !important;
    transform: none !important;
}

.statistik-menu-item.active {
    background: #e8f5f3 !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .18) !important;
    transform: none !important;
}

/* Bingkai hitam tebal yang muncul pada butir terpilih itu adalah cincin fokus
   bawaan browser. Diganti cincin teal lembut, dan hanya tampil saat navigasi
   memakai papan ketik (:focus-visible), bukan saat diklik. */
.statistik-menu-item:focus { outline: none !important; }

.statistik-menu-item:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .28) !important;
}

/* JANGAN diperkecil/di-clip: label menyatu di dalam berkas PNG-nya */
.statistik-menu-item .icon-bg {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
    flex: 0 1 auto;
}

.statistik-menu-item .icon-bg img {
    width: auto !important;
    height: 30px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    opacity: .92;
    transition: opacity .13s ease;
}

.statistik-menu-item:hover .icon-bg img,
.statistik-menu-item.active .icon-bg img { opacity: 1; }

.statistik-welcome {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Bilah gulir tipis melayang, bukan batang abu tebal bawaan Windows. */
.statistik-content { scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, .28) transparent; }
.statistik-content::-webkit-scrollbar { width: 9px; height: 9px; }
.statistik-content::-webkit-scrollbar-track { background: transparent; }
.statistik-content::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, .26);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.statistik-content::-webkit-scrollbar-thumb:hover { background: rgba(60, 60, 67, .42); background-clip: content-box; }

/* Layar sempit: sidebar jadi baris menu mendatar yang bisa digeser. */
@media (max-width: 767px) {
    .statistik-sidebar {
        flex: none !important;
        align-self: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid #ebedf0 !important;
    }
    .statistik-menu { display: flex !important; overflow-x: auto; gap: 4px; padding: 7px !important; }
    .statistik-menu-item { flex: 0 0 auto; margin: 0 !important; }
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */

/* margin-top menyisakan celah yang memperlihatkan latar body sehingga footer
   tampak terpotong; jaraknya dipindah jadi padding di dalam blok gelapnya */
#footer {
    margin: 0 !important;
    padding: 0 !important;
}

.footer_top {
    margin-top: 0 !important;
    padding: 42px 0 26px !important;
}

.esensi-footer {
    margin-top: 0 !important;
}

/* ==========================================================================
   7. UTILITAS
   ========================================================================== */

/* Aslinya position:static sehingga tercetak sebagai "^" di pojok kiri atas */
.scrollToTop {
    position: fixed !important;
    right: 18px;
    bottom: 18px;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: var(--pp) !important;
    color: #fff !important;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18) !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.scrollToTop:hover {
    background: var(--pp-hover) !important;
    color: #fff !important;
}

.scrollToTop i {
    color: #fff !important;
    font-size: 16px !important;
    line-height: 38px !important;
}

/* ==========================================================================
   8. WIDGET SISI KANAN — jam & Pemerintah Nagari
   --------------------------------------------------------------------------
   Markup jam dibangun oleh renderDate() di commons/meta.blade.php:
       <B>Rabu, 19 Agustus 2026</B><br>09 : 35 : 35
   Tanggal ada di dalam <b>, jamnya hanya simpul teks lepas — tidak ada elemen
   pembungkus. Jadi ukuran jam disetel di #jam itu sendiri, dan tanggal
   dikecilkan lewat #jam b. Bukan cara yang ideal, tapi markup-nya memang
   begitu dan mengubahnya berarti menyentuh JavaScript inti.
   ========================================================================== */

/* --- Jam --- */
#jam {
    background: var(--pp-soft) !important;
    background-image: none !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 11px 14px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    overflow: hidden;

    /* ini mengatur tampilan JAM-nya */
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    color: var(--pp) !important;
    font-variant-numeric: tabular-nums;
}

/* Lingkaran cahaya berdenyut di belakang jam — dimatikan. */
#jam::before {
    content: none !important;
    display: none !important;
}

/* ini mengatur tampilan TANGGAL-nya */
#jam b {
    display: block;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    color: #0d9488 !important;
    margin-bottom: 2px;
}

/* --- Kerangka widget --- */
.single_bottom_rightbar {
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    overflow: hidden;
    background: #fff;
}

/* Kartu tidak lagi melompat naik saat disentuh kursor. */
.single_bottom_rightbar:hover {
    transform: none !important;
    box-shadow: none !important;
}

.sidebar-widget::before,
.sidebar-widget::after,
.single_bottom_rightbar h5::after {
    content: none !important;
    display: none !important;
}

.single_bottom_rightbar h5 {
    background: var(--pp) !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.single_bottom_rightbar h5 i {
    color: #fff !important;
    font-size: 13px !important;
    opacity: .9;
}

.single_bottom_rightbar h5 a { color: #fff !important; text-decoration: none !important; }


/* --- Pemerintah Nagari --- */
.single_bottom_rightbar #aparatur_desa .aparatur-image-container {
    height: 215px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 1px solid var(--pp-line) !important;
    margin-bottom: 10px !important;
    background: #f8fafc;
    padding: 6px;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container img {
    border-radius: 9px !important;
    /* HARUS contain, bukan cover. Dengan cover, foto potret dipaksa memenuhi
       kotak yang lebih pendek sehingga bagian atas dan bawahnya terpotong —
       yang tampak hanya kepala. contain menampilkan foto utuh. */
    object-fit: contain !important;
    object-position: center !important;
    transition: none !important;
}

/* Foto tidak lagi membesar saat disentuh kursor. */
.single_bottom_rightbar #aparatur_desa .aparatur-slide-item:hover .aparatur-image-container img {
    transform: none !important;
}

.single_bottom_rightbar #aparatur_desa .aparatur-image-container::after {
    content: none !important;
    display: none !important;
}

/* Kotak bergaris di dalam kartu dibuang — cukup satu bingkai saja. */
.single_bottom_rightbar #aparatur_desa .aparatur-info,
.single_bottom_rightbar #aparatur_desa .aparatur-slide-item:hover .aparatur-info {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
}

/* Nama memakai teks bergradasi bawaan (baris ~2135). Sama seperti kasus
   judul artikel: `color` saja tidak cukup, text-fill harus ikut dimatikan. */
.single_bottom_rightbar #aparatur_desa .aparatur-name {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
    color: var(--pp-text) !important;
    -webkit-text-fill-color: var(--pp-text) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

.single_bottom_rightbar #aparatur_desa .aparatur-position {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--pp-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 9px !important;
    line-height: 1.4 !important;
}

.single_bottom_rightbar #aparatur_desa .aparatur-status { margin-top: 0 !important; gap: 6px !important; }

/* Lencana jadi pil bernada lembut, bukan blok warna penuh bercahaya.
   !important diperlukan karena lencana "Hari Libur" memakai style langsung
   di atribut elemen, dan style atribut hanya bisa dikalahkan oleh !important. */
.single_bottom_rightbar #aparatur_desa .status-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    background-image: none !important;
    gap: 5px !important;
}

.single_bottom_rightbar #aparatur_desa .status-badge i { font-size: 11px !important; }

.single_bottom_rightbar #aparatur_desa .status-badge.badge-success {
    background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important;
}
.single_bottom_rightbar #aparatur_desa .status-badge.badge-danger {
    background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important;
}
.single_bottom_rightbar #aparatur_desa .status-badge.badge-warning {
    background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important;
}

/* --- Tombol geser --- */
.single_bottom_rightbar .cycle-prev,
.single_bottom_rightbar .cycle-next {
    top: 105px !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(15, 23, 42, .5) !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.single_bottom_rightbar .cycle-prev i,
.single_bottom_rightbar .cycle-next i { font-size: 12px !important; }

/* --- Pembungkus widget ---
   partials/sidebar.blade.php membungkus tiap widget:
       .sidebar-widget > .widget-body > .single_bottom_rightbar
   Bingkai kartu HANYA boleh dipasang di .single_bottom_rightbar. Kalau
   pembungkusnya ikut diberi latar dan bingkai, hasilnya kotak dobel, dan
   widget yang isinya disembunyikan menyisakan bar putih kosong. */
.sidebar-widget {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
}

.sidebar-widget:hover { transform: none !important; box-shadow: none !important; }

.sidebar-widget .widget-body {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.sidebar-widget .box-header { display: none !important; }

/* --- Isi widget --- */
.single_bottom_rightbar .box-body { padding: 11px !important; }

/* Widget aparatur sudah punya lapisan .content_middle_middle sendiri, jadi
   jangan ditambah padding lagi supaya tidak dobel. */
.single_bottom_rightbar .content_middle_middle { padding: 0 !important; }

/* --- Media sosial ---
   Ukuran 50px dipasang lewat atribut style di elemen <img>. Style atribut
   hanya bisa dikalahkan oleh !important, bukan oleh kekhususan selektor. */
.single_bottom_rightbar .box-body > a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px 0 0;
    line-height: 0;
}

.single_bottom_rightbar .box-body > a > img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: block;
    transition: opacity .13s ease;
}

.single_bottom_rightbar .box-body > a:hover > img { opacity: .82; }

/* --- Menu kategori & daftar sisi lain --- */
.single_bottom_rightbar ul.sidebar-latest,
.single_bottom_rightbar ul#ul-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px !important;
}

.single_bottom_rightbar ul.sidebar-latest li { margin: 0 !important; list-style: none !important; }

.single_bottom_rightbar ul.sidebar-latest > li > a {
    display: block;
    padding: 7px 10px !important;
    border-radius: 7px;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    background: none !important;
    text-decoration: none !important;
    transition: background .13s ease, color .13s ease;
}

.single_bottom_rightbar ul.sidebar-latest > li > a:hover {
    background: var(--pp-soft) !important;
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
}

.single_bottom_rightbar ul.sidebar-latest .submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 0 12px !important;
}

.single_bottom_rightbar ul.sidebar-latest .submenu > li > a {
    display: block;
    padding: 5px 10px !important;
    border-radius: 6px;
    font-size: 12.5px !important;
    color: var(--pp-muted) !important;
    -webkit-text-fill-color: var(--pp-muted) !important;
    text-decoration: none !important;
}

.single_bottom_rightbar ul.sidebar-latest .submenu > li > a:hover {
    background: var(--pp-soft) !important;
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
}

/* --- Sinergi program ---
   Efek membesar 1,5x saat disentuh kursor membuat gambar menimpa isi lain. */
#sinergi_program img:hover {
    transform: none !important;
    box-shadow: none !important;
}

#sinergi_program table { width: 100%; }
#sinergi_program td { padding: 4px; }


/* --- Widget Arsip Artikel ---
   Markup widget ini ditulis dengan gaya Bootstrap 3:
       <ul class="nav nav-tabs"><li class="active"><a data-toggle="tab">
       <div class="tab-pane fade in active">
   Sedangkan bootstrap-compatibility.css memakai aturan Bootstrap 4/5:
       baris 215  .fade:not(.show) { opacity: 0 }
       baris 85   .nav-tabs .nav-link { ... }

   Dua akibatnya persis seperti yang terlihat di layar:
   1. Panel punya kelas `in` tapi tidak punya `show`, jadi .fade:not(.show)
      menggigit dan seluruh isinya transparan — daftar artikelnya tetap ada
      dan tetap memakan tinggi, hanya tidak terlihat. Itulah kotak putih besar
      yang tampak kosong.
   2. Tab memakai <li><a>, bukan .nav-link, jadi tidak kena gaya apa pun dan
      "Terbaru Populer Acak" menempel jadi satu baris tanpa jarak.

   Di bawah ini kelas `in` diakui kembali dan tab digayakan dengan pemilih
   Bootstrap 3. Pergantian tab ditangani skrip kecil di berkas widgetnya,
   karena Bootstrap JS memang tidak dimuat tema ini sama sekali. */

.single_bottom_rightbar .tab-pane.fade.in,
.single_bottom_rightbar .tab-pane.active {
    opacity: 1 !important;
}

.single_bottom_rightbar .tab-content > .tab-pane { display: none; }
.single_bottom_rightbar .tab-content > .active { display: block; }
.single_bottom_rightbar .tab-content { padding: 10px 12px 12px; }

.single_bottom_rightbar .nav-tabs {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 7px 8px 0 !important;
    gap: 3px;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.single_bottom_rightbar .nav-tabs > li { margin: 0 !important; float: none !important; }

.single_bottom_rightbar .nav-tabs > li > a {
    display: block;
    padding: 6px 11px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--pp-muted) !important;
    -webkit-text-fill-color: var(--pp-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px 7px 0 0 !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.single_bottom_rightbar .nav-tabs > li > a:hover {
    background: #f1f5f9 !important;
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
}

.single_bottom_rightbar .nav-tabs > li.active > a {
    background: var(--pp-soft) !important;
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -2px 0 var(--pp);
}

/* --- Daftar artikel di dalam tab --- */
.single_bottom_rightbar #ul-menu { width: 100%; border-collapse: collapse; }

.single_bottom_rightbar #ul-menu td {
    border: 0;
    padding: 0;
    vertical-align: top;
}

/* Baris ganjil = keterangan tanggal, baris genap = judul + gambar.
   Pemisah dipasang di baris genap supaya jatuh di antara artikel. */
.single_bottom_rightbar #ul-menu tr:nth-child(odd) td { padding-top: 9px; }
.single_bottom_rightbar #ul-menu tr:nth-child(even) td {
    padding-bottom: 9px;
    border-bottom: 1px solid #f1f5f9;
}
.single_bottom_rightbar #ul-menu tr:last-child td { border-bottom: 0; padding-bottom: 0; }

.single_bottom_rightbar .meta_date {
    font-size: 10.5px;
    color: var(--pp-faint);
    display: block;
    margin-bottom: 3px;
}
.single_bottom_rightbar .meta_date .fa { font-size: 10px; }

.single_bottom_rightbar #ul-menu img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #eef2f6 !important;
    padding: 0 !important;
    margin: 0 8px 4px 0 !important;
    background: #f8fafc;
}

.single_bottom_rightbar #ul-menu small {
    display: block;
    font-size: 12px;
    line-height: 1.45;
}

/* Markup memakai <font color="green">, peninggalan HTML lama.
   Warnanya ditimpa agar seragam dengan sisi lain halaman. */
.single_bottom_rightbar #ul-menu font {
    color: var(--pp-text) !important;
    -webkit-text-fill-color: var(--pp-text) !important;
}

/* Cuplikan isi berita di bawah judul. Panjangnya sudah dibatasi 75 karakter
   di sisi Blade, tinggi di sini hanya jaring pengaman kalau ada kata panjang.
   Tingginya kelipatan tinggi baris (2 x 15px) supaya potongannya jatuh tepat
   di batas baris, bukan memotong huruf di tengah. */
.single_bottom_rightbar .arsip-cuplikan {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 15px;
    max-height: 30px;
    overflow: hidden;
    color: var(--pp-muted) !important;
    -webkit-text-fill-color: var(--pp-muted) !important;
    font-weight: 400;
}

.single_bottom_rightbar #ul-menu a { text-decoration: none !important; }
.single_bottom_rightbar #ul-menu a:hover font {
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
}

/* ==========================================================================
   9. PAGINASI
   --------------------------------------------------------------------------
   commons/pagination_default.blade.php memasang beberapa nilai lewat atribut
   style langsung di elemen (margin nav, gap daftar, ukuran & warna teks
   "Halaman x dari y"). Style atribut tidak bisa dikalahkan oleh kekhususan
   selektor, hanya oleh !important — itu sebabnya aturan di bawah memakainya.
   ========================================================================== */

/* Kotak pembungkus dilepas: paginasi tidak perlu jadi kartu tersendiri. */
.pagination_area {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 22px 0 10px !important;
    text-align: center;
}

/* Baris "Halaman 1 dari 15" */
.pagination_area > div:first-child {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--pp-muted) !important;
    margin-bottom: 8px !important;
}

.pagination {
    display: inline-flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px !important;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: none !important;
}

.pagination .page-item { margin: 0; padding: 0; }

.pagination .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--pp-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background .13s ease, border-color .13s ease, color .13s ease;
}

/* Tanpa lompatan 3px dan bayangan biru tebal seperti sebelumnya. */
.pagination .page-link:hover {
    color: var(--pp) !important;
    -webkit-text-fill-color: var(--pp) !important;
    background: var(--pp-soft) !important;
    border-color: #99f6e4 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Halaman aktif: warna padat, tanpa gradasi dan tanpa diperbesar 1,1x. */
.pagination .page-item.active .page-link {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--pp) !important;
    background-image: none !important;
    border-color: var(--pp) !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 600 !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--pp-faint) !important;
    -webkit-text-fill-color: var(--pp-faint) !important;
    background: #fff !important;
    border-color: #f1f5f9 !important;
    opacity: 1 !important;
    cursor: default;
    pointer-events: none;
}

.pagination .page-link i { font-size: 12px !important; }

/* Layar sempit: tombol dirapatkan supaya tetap muat satu baris. */
@media (max-width: 575px) {
    .pagination { gap: 3px !important; }
    .pagination .page-link {
        min-width: 28px !important;
        height: 28px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   10. KARTU APBDES (transparansi anggaran)
   --------------------------------------------------------------------------
   Markup: partials/apbdesa-tema.blade.php
       #transparansi-footer .card > .card-header + .card-body > .progress-group

   Aturan sengaja dilingkupi #transparansi-footer. Kelas .card dipakai juga di
   tempat lain dengan gaya yang sama tuanya (bilah gradasi di sisi atas, kartu
   melompat 6px saat disentuh kursor), tapi belum saya lihat tampilannya, jadi
   tidak saya ubah serentak.

   Catatan: .progress dan .progress-bar TIDAK didefinisikan di mana pun —
   bukan di berkas ini, bukan pula di bootstrap-compatibility.css. Jadi tinggi
   dan warna bilahnya memang harus ditetapkan sendiri di sini, kalau tidak
   bilah kemajuannya tidak akan terlihat sama sekali.
   ========================================================================== */

#transparansi-footer { padding-top: 12px !important; }

#transparansi-footer .card {
    border: 1px solid var(--pp-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    overflow: hidden;
    background: #fff;
}

/* Bilah gradasi di sisi atas & lompatan 6px saat disentuh kursor: dimatikan. */
#transparansi-footer .card::before { content: none !important; display: none !important; }

#transparansi-footer .card:hover {
    transform: none !important;
    box-shadow: none !important;
}

#transparansi-footer .card-header {
    background: #f8fafc !important;
    background-image: none !important;
    color: var(--pp-text) !important;
    -webkit-text-fill-color: var(--pp-text) !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    line-height: 1.35 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-line) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

#transparansi-footer .card-header i {
    color: var(--pp) !important;
    font-size: 13px !important;
}

#transparansi-footer .card-body { padding: 12px 14px 14px !important; }

/* Baris "Realisasi | Anggaran" — nilainya dipasang lewat atribut style di
   elemen, jadi hanya bisa dikalahkan dengan !important. */
#transparansi-footer .card-body > div[align="center"] {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--pp-faint) !important;
    margin-bottom: 11px !important;
}

/* --- Satu baris anggaran --- */
#transparansi-footer .progress-group { margin-bottom: 12px; }
#transparansi-footer .progress-group:last-child { margin-bottom: 0; }

#transparansi-footer .progress-group .title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pp-text);
    line-height: 1.35;
    margin-bottom: 5px;
}

#transparansi-footer .progress-group .title span:last-child {
    font-size: 11.5px !important;
    font-weight: 600;
    color: var(--pp) !important;
    white-space: nowrap;
}

#transparansi-footer .progress {
    height: 6px;
    background: #eef2f6;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: none;
    margin: 0 0 5px;
}

#transparansi-footer .progress-bar,
#transparansi-footer .progress-bar-primary {
    height: 100%;
    background: var(--pp) !important;
    background-image: none !important;
    border-radius: 999px;
    box-shadow: none;
    transition: width .4s ease;
}

/* Baris nominal di bawah bilah */
#transparansi-footer .progress-group > div:last-child {
    font-size: 11.5px !important;
    color: var(--pp-muted) !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#transparansi-footer .progress-group > div:last-child b {
    color: var(--pp-text) !important;
    font-weight: 600;
}

/* Layar sempit: tiga kartu jadi bertumpuk penuh. */
@media (max-width: 767px) {
    #transparansi-footer .col-md-4 { width: 100%; }
}

/* ==========================================================================
   11. HALAMAN DETAIL ARTIKEL
   --------------------------------------------------------------------------
   Markup: partials/artikel/detail.blade.php + commons/share.blade.php

   Isi berita diletakkan di atas kartu putih. Latar halaman bergradasi abu
   (aturan body di baris ~62), jadi kartu putih memberi bidang baca yang
   tenang dan batas yang jelas — pola yang sama dipakai aplikasi macOS.

   Catatan kelas bertabrakan: .article-title, .article-meta, dan
   .article-content dipakai JUGA oleh kartu artikel di halaman depan, yang di
   seksi 4 dikunci kecil dan dipotong tingginya (14px, height 38px). Kalau
   tidak ditimpa di sini, judul berita ikut mengecil dan terpotong. Karena itu
   semua aturan di bawah dilingkupi .article-wrapper — kekhususannya 0-2-0,
   lebih tinggi dari aturan seksi 4 yang 0-1-0.
   ========================================================================== */

.single_page_area { background: transparent !important; padding: 0 !important; }

.article-wrapper {
    display: block;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .18);
    padding: 22px 24px 24px;
    margin-bottom: 12px;
    overflow: hidden;
}

/* --- Judul & keterangan --- */
.article-wrapper .article-header {
    padding-bottom: 13px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f6;
}

.article-wrapper .article-title {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    color: var(--pp-text) !important;
    -webkit-text-fill-color: var(--pp-text) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    margin: 0 0 8px !important;
    text-transform: none !important;
}

/* Keterangan di kiri, tombol berbagi di kanan; menumpuk di layar sempit. */
.article-wrapper .article-headline-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.article-wrapper .article-meta {
    flex: 1 1 auto !important;
    min-width: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 16px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--pp-muted) !important;
    margin: 0 !important;
    height: auto !important;
}

.article-wrapper .article-meta span,
.article-wrapper .article-meta a {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    color: var(--pp-muted) !important;
    -webkit-text-fill-color: var(--pp-muted) !important;
    text-decoration: none !important;
}

.article-wrapper .article-meta a { color: var(--pp) !important; -webkit-text-fill-color: var(--pp) !important; }
.article-wrapper .article-meta a:hover { text-decoration: underline !important; }
.article-wrapper .article-meta .fa { font-size: 12px !important; opacity: .75; }

/* --- Isi --- */
.article-wrapper .article-content {
    display: block !important;
    padding: 0 !important;
    flex: none !important;
}

.article-wrapper .article-image-main {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    margin-bottom: 16px;
}

.article-wrapper .article-text {
    font-size: 14.5px;
    line-height: 1.75;
    color: #334155;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.article-wrapper .article-text::after { content: none !important; }
.article-wrapper .article-text p { margin: 0 0 13px; }
.article-wrapper .article-text p:last-child { margin-bottom: 0; }
.article-wrapper .article-text img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; }
.article-wrapper .article-text h1,
.article-wrapper .article-text h2,
.article-wrapper .article-text h3,
.article-wrapper .article-text h4,
.article-wrapper .article-text h5,
.article-wrapper .article-text h6 {
    font-size: 16px;
    font-weight: 600;
    margin: 18px 0 8px;
    color: var(--pp-text);
    -webkit-text-fill-color: var(--pp-text);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}
.article-wrapper .article-text ul,
.article-wrapper .article-text ol { padding-left: 20px; margin: 0 0 13px; }
.article-wrapper .article-text li { margin-bottom: 5px; }
.article-wrapper .article-text a { color: var(--pp); -webkit-text-fill-color: var(--pp); }
.article-wrapper .article-text blockquote {
    border-left: 3px solid var(--pp);
    background: var(--pp-soft);
    padding: 10px 14px;
    margin: 14px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #475569;
}
.article-wrapper .article-text table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.article-wrapper .article-text td,
.article-wrapper .article-text th { border: 1px solid #eef2f6; padding: 7px 9px; }

/* --- Lampiran --- */
.attachment-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--pp-soft);
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 13px;
}
.attachment-box .fa { color: var(--pp); font-size: 15px; margin-top: 2px; }
.attachment-box strong { font-weight: 600; color: var(--pp-text); }
.attachment-box a { color: var(--pp) !important; -webkit-text-fill-color: var(--pp) !important; word-break: break-all; }

/* --- Galeri --- */
.article-wrapper .gallery-thumb {
    width: 100%;
    height: 128px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    transition: opacity .15s ease;
}
.article-wrapper .gallery-thumb:hover { opacity: .88; }

/* --- Tombol berbagi ---
   commons/share.blade.php memakai .btn-primary, .btn-info, .btn-danger dan
   seterusnya. Warna-warna itu ditimpa oleh bootstrap-compatibility.css yang
   menyetel .btn dengan !important dan dimuat belakangan, sehingga semuanya
   jatuh jadi kotak abu seragam. Di sini bentuknya dinetralkan jadi kancing
   abu lembut, lalu warna asli tiap layanan muncul saat disentuh kursor. */
/* Tombol berbagi kini duduk sebaris dengan keterangan di kepala artikel,
   jadi tidak lagi berupa kartu tersendiri — cukup deretan kancing. */
.share-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    flex: 0 0 auto;
}

.share-section .btn-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    float: none !important;
}

.share-section .btn-group > a { display: inline-flex; line-height: 0; }

.share-section .btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}

/* fa-2x membuat ikon 2em; dikembalikan ke ukuran wajar. */
.share-section .btn .fa,
.share-section .btn .fa-2x { font-size: 15px !important; line-height: 1 !important; }

.share-section .btn:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; }

.share-section .btn-primary:hover { background: #1877f2 !important; }   /* Facebook */
.share-section .btn-info:hover    { background: #1da1f2 !important; }   /* Twitter  */
.share-section .btn-danger:hover  { background: #ea4335 !important; }   /* Email    */
.share-section .btn-dark:hover    { background: #229ed9 !important; }   /* Telegram */
.share-section .btn-warning:hover { background: #64748b !important; }   /* Cetak    */
.share-section .btn-success:hover { background: #25d366 !important; }   /* WhatsApp */

/* --- Layar sempit --- */
@media (max-width: 767px) {
    .article-wrapper { padding: 16px; border-radius: 12px; }
    .article-wrapper .article-headline-bar { align-items: flex-start; }
    .article-wrapper .article-title { font-size: 18px !important; }
    .article-wrapper .article-text { font-size: 14px; }
    .article-wrapper .gallery-thumb { height: 104px; }
}

/* ==========================================================================
   12. PERPINDAHAN ANTAR HALAMAN
   --------------------------------------------------------------------------
   Situs ini dirender di server, jadi tiap klik memang memuat halaman baru.
   Yang membuat situs modern terasa mulus bukan karena tidak memuat ulang,
   melainkan karena tiga hal di bawah ini.
   ========================================================================== */

/* 1. Kedipan putih saat berpindah halaman.
      Latar halaman dipasang di <body>, padahal di sela dua halaman browser
      menggambar latar <html> — yang secara bawaan putih. Disamakan supaya
      tidak ada kilatan putih di antaranya. */
html {
    background: #f5f5f7;
}

/* 2. Elemen yang "meloncat" muncul saat halaman selesai dimuat.
      Aturan dasar baris ~2657 menyembunyikan .wow (visibility:hidden),
      sedangkan wow.min.js dan custom.js yang menampilkannya kembali baru
      dimuat di ujung bawah body. Akibatnya bagian feed dan footer benar-benar
      kosong dulu, lalu muncul mendadak setelah JavaScript jalan — dan kalau
      JavaScript-nya gagal dimuat, isinya tidak pernah muncul sama sekali.
      Animasi munculnya dimatikan; isinya langsung tampil sejak awal. */
.wow {
    visibility: visible !important;
    animation-name: none !important;
}

/* 3. Transisi silang antar halaman.
      @view-transition membuat browser memudarkan halaman lama ke halaman baru
      alih-alih menggantinya seketika. Berlaku hanya untuk perpindahan dalam
      situs yang sama, dan aturannya harus ada di kedua halaman — terpenuhi
      karena berkas CSS ini dipakai seluruh halaman.

      Browser yang belum mendukung mengabaikannya tanpa galat, jadi tidak ada
      risiko: yang mendukung dapat perpindahan mulus, yang belum tetap seperti
      sekarang. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .26s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Hormati setelan "kurangi animasi": perpindahan tetap seketika. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}