/* BUTTON DONASI - FIXED SIZE & COLOR */
.btn.donasi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #007bff !important; /* Biru standar Bootstrap */
    color: white !important;
    border: 2px solid #007bff;
    padding: 14px 35px; /* Lebih besar */
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap; /* Pastikan teks satu baris */
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px; /* Lebar minimum */
    text-align: center;
    line-height: 1.2;
    height: auto;
    box-sizing: border-box;
}

/* HOVER EFFECT - Reverse Biru-Putih */
.btn.donasi:hover {
    background: white !important;
    color: #007bff !important;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.25);
}

/* Agar icon/tidak ada teks wrap */
.btn.donasi br {
    display: none;
}

/* Versi lebih kompak jika perlu */
.btn.donasi.compact {
    padding: 10px 25px;
    font-size: 14px;
    min-width: 150px;
}

h1, h2, h3, h4, h5, h6 {
    /* Menimpa warna dari #203656 */
    color: #030a14 !important;
}


/* Aturan ini menimpa warna heading hanya saat Mode Gelap aktif. */
html[data-theme=dark] body h1,
html[data-theme=dark] body h2,
html[data-theme=dark] body h3,
html[data-theme=dark] body h4,
html[data-theme=dark] body h5,
html[data-theme=dark] body h6 {
    /* Menjamin warna putih (#fff) diterapkan di Dark Mode */
    color: #d7d7d9 !important; 
}

html[data-theme=dark] body {
    /* Menimpa nilai --text-color dari #8f9bad menjadi #b4bfcf */
    --text-color: #b4bfcf !important;
}



/* ================================================
   FIX DROPDOWN MENU GAP - KATEN BOTBLE THEME
   ================================================ */
/* ================================================
   ESSENTIAL CSS - DROPDOWN GAP FIX
   ================================================ */
/* ================================================
   FIX HOVER DROPDOWN HANYA DI HOME PAGE
   ================================================ */

/* ================================================
   OPTIMIZED HOME PAGE DROPDOWN FIX
   ================================================ */

/* ================================================
   FINAL CSS - HOME PAGE DROPDOWN FIX (NO TEXT COVER)
   ================================================ */

/* 1. BASE DROPDOWN STYLING UNTUK SEMUA */
.navbar-nav .dropdown-menu {
    /* Positioning dengan overlap */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
    
    /* OVERLAP SYSTEM - hilangkan gap */
    margin-top: -6px !important;
    padding-top: 18px !important;
    
    /* Visual */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    min-width: 220px !important;
    padding: 12px 0 !important;
    
    /* State - hidden */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    
    /* No animation delay */
    transition: none !important;
}

/* 2. SHOW ON HOVER - UNIVERSAL */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.navbar-nav .dropdown-menu:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. CSS-ONLY BRIDGE AREA */
.navbar-nav .nav-item.dropdown {
    position: relative !important;
}

.navbar-nav .nav-item.dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    z-index: 99998;
    pointer-events: none;
}

.navbar-nav .nav-item.dropdown:hover::before {
    pointer-events: auto;
}

/* 4. OVERRIDE THEME/Bootstrap STATES */
.navbar-nav .dropdown-menu.show,
.navbar-nav .dropdown-menu.collapsing,
.navbar-nav [aria-expanded="true"] ~ .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
}

/* 5. RIGHT-ALIGNED DROPDOWNS */
.navbar-nav > .nav-item.dropdown:last-child .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

.navbar-nav > .nav-item.dropdown:last-child::before {
    left: auto !important;
    right: 0 !important;
}

/* 6. DROPDOWN ITEMS STYLING */
.navbar-nav .dropdown-menu .dropdown-item {
    padding: 10px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: #f8f9fa !important;
    color: #007bff !important;
    border-left-color: #007bff !important;
    padding-left: 25px !important;
}

/* ==================== PART 2: ICON ANIMATIONS ==================== */

/* 7. BOUNCE ANIMATION UNTUK DROPDOWN ITEM ICONS */
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.dropdown-item:hover svg {
    animation: iconBounce 0.4s ease !important;
}

/* 8. SVG FLIP UNTUK DROPDOWN TOGGLE */
.nav-item.dropdown .dropdown-toggle svg {
    transition: transform 0.3s ease !important;
    transform-origin: center !important;
    display: inline-block !important;
}

.nav-item.dropdown:hover .dropdown-toggle svg {
    transform: rotate(180deg) !important;
}

/* 9. UNTUK PSEUDO-ELEMENT ARROW (::after) */
.nav-item.dropdown .dropdown-toggle::after {
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

.nav-item.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg) !important;
}

/* 10. UNTUK FONT ICONS */
.nav-item.dropdown .dropdown-toggle i,
.nav-item.dropdown .dropdown-toggle .fa,
.nav-item.dropdown .dropdown-toggle .icon {
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

.nav-item.dropdown:hover .dropdown-toggle i,
.nav-item.dropdown:hover .dropdown-toggle .fa,
.nav-item.dropdown:hover .dropdown-toggle .icon {
    transform: rotate(180deg) !important;
}

/* ==================== PART 3: STICKY HEADER FIX ==================== */

/* 11. STICKY NAVBAR STATE */
.navbar.sticky-top.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    animation: slideDown 0.3s ease-out !important;
}

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

/* 12. DROPDOWN POSITION FIX UNTUK STICKY */
.navbar.sticky-top.scrolled .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    position: fixed !important;
    top: var(--navbar-sticky-height, 70px) !important;
    left: var(--dropdown-left, 0) !important;
    margin-top: 0 !important;
    padding-top: 12px !important;
}

/* 13. RIGHT ALIGN FIX UNTUK STICKY */
.navbar.sticky-top.scrolled .navbar-nav > .nav-item.dropdown:last-child:hover .dropdown-menu {
    left: auto !important;
    right: var(--dropdown-right, 0) !important;
}

/* 14. BRIDGE AREA FIX UNTUK STICKY */
.navbar.sticky-top.scrolled .navbar-nav .nav-item.dropdown::before {
    position: fixed !important;
    top: var(--navbar-sticky-height, 70px) !important;
    z-index: 99997 !important;
}

/* 15. RESET UNTUK NON-STICKY STATE */
.navbar:not(.scrolled) .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

.navbar:not(.scrolled) .navbar-nav > .nav-item.dropdown:last-child:hover .dropdown-menu {
    left: auto !important;
    right: 0 !important;
}

/* ==================== PART 4: RESPONSIVE ==================== */

/* 16. MOBILE (< 992px) */
@media (max-width: 991.98px) {
    /* Reset untuk mobile */
    .navbar-nav .dropdown-menu {
        position: static !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hide bridge area di mobile */
    .navbar-nav .nav-item.dropdown::before {
        display: none !important;
    }
    
    /* Mobile show via click/toggle */
    .navbar-nav .dropdown-menu.show,
    .navbar-nav .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
        display: block !important;
    }
    
    /* Disable hover effects di mobile */
    @media (hover: none) {
        .nav-item.dropdown:hover .dropdown-toggle svg,
        .nav-item.dropdown:hover .dropdown-toggle::after,
        .nav-item.dropdown:hover .dropdown-toggle i {
            transform: none !important;
        }
        
        .dropdown-item:hover svg {
            animation: none !important;
        }
    }
    
    /* Disable sticky fixes di mobile */
    .navbar.sticky-top.scrolled .navbar-nav .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Reset sticky navbar untuk mobile */
    .navbar.sticky-top.scrolled {
        position: relative !important;
        animation: none !important;
    }
}

/* 17. TABLET (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav .dropdown-menu {
        min-width: 200px !important;
    }
}

/* ==================== PART 5: DEBUG/UTILITY ==================== */

/* 18. DEBUG MODE (uncomment jika perlu) */
/*
.navbar-nav .dropdown-menu {
    border: 2px solid rgba(0, 255, 0, 0.3) !important;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    border: 2px solid rgba(255, 0, 0, 0.3) !important;
}

.navbar-nav .nav-item.dropdown::before {
    background: rgba(0, 0, 255, 0.1) !important;
    border-top: 1px dashed blue !important;
}

.navbar.sticky-top.scrolled .navbar-nav .dropdown-menu {
    border: 2px solid rgba(255, 165, 0, 0.3) !important;
}
*/


/* =============================================== */
/* =============================================== */
/* page link */
/* =============================================== */
/* ============================================ */
/* FIX: Text '2' tidak hitam saat hover */
/* ============================================ */

/* DEFAULT - Semua page link */
.page-link {
    background: linear-gradient(to bottom, #eff6ff, #dbeafe) !important;
    color: #2563eb !important; /* Text biru */
    border: 1px solid #dbeafe !important;
    transition: all 0.3s ease !important;
}

/* HOVER - Semua page link termasuk '2' */
.page-link:hover {
    color: #080808 !important; /* Text HITAM */
    background: linear-gradient(to bottom, #6db0f7, #1d4ed8) !important;
    border-color: #308ff4 !important;
    transform: translateY(-1px) !important;
}

/* Active page (angka '1') */
.page-item.active .page-link {
    color: #fff !important; /* Text putih */
    background: linear-gradient(135deg, #3c78d8, #2563eb, #6db0f7) !important;
    border-color: transparent !important;
}

/* ============================================ */
/* EXTRA FIXES jika masih tidak bekerja */
/* ============================================ */

/* Fix 1: Specific untuk angka (bukan icon) */
a.page-link:hover:not(.page-prev):not(.page-next),
.page-item:not(.active) .page-link:hover {
    color: #080808 !important; /* Pastikan hitam */
}

/* Fix 2: Target langsung text content */
.page-link:hover:after {
    color: #080808 !important;
}

/* Fix 3: Force dengan important cascade */
.pagination .page-item:not(.active) .page-link:hover {
    color: #080808 !important !important;
}

/* Fix 4: Nuclear option - semua text hitam saat hover */
.pagination *:hover {
    color: #080808 !important;
}



/* INI UNTUK PENGATURAN FONT SWAP DI SEO */
/* 1. FIX FONT DELAY (Mengatasi Est Savings 1,620ms) */
@font-face { 
    font-family: 'slick'; 
    src: url('https://fpa-id.com/themes/newsum/fonts/slick.woff') format('woff');
    font-display: swap !important; 
}
@font-face { font-family: 'Simple-Line-Icons'; font-display: swap !important; }
@font-face { font-family: 'Poppins'; font-display: swap !important; }
@font-face { font-family: 'Roboto Condensed'; font-display: swap !important; }

/* 2. FIX LCP DELAY (Mengatasi 2,290ms Resource Load Delay) */
/* Paksa gambar utama agar tidak tersembunyi oleh lazyload */
img[src*="louisduncan.webp"], 
img[src*="lift-vs-nilai-aset"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    content-visibility: auto;
}

/* 3. PERBAIKAN SPEED INDEX */
/* Mencegah layout shift pada logo yang mengganggu visual */
.logo-light { min-width: 150px; min-height: 40px; }


/* PERBAIKAN UKURAN HASIL PAGESPEED WEB DEV */
.disclaimer {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
}

/* dibawah ini tambahan baru lagi */
/* 1. Memperbesar area klik tombol slider */
.slick-dots li button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    display: block;
}

/* 2. Memperbesar area klik nama penulis */
.author.d-inline-flex {
    min-height: 44px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* 3. Memberi ruang & ukuran pada link judul artikel */
a[href*="/author/"], 
.post-carousel a, 
.post-carousel-widget a {
    min-height: 24px; 
    display: inline-block;
    padding: 2px 0;
    line-height: 1.5;
}

/* 4. Pastikan dots tidak saling berhimpit */
.slick-dots li {
    margin: 0 8px !important;
}