/*
Theme Name: RiskSurge Theme
Theme URI: https://risksurge.com
Author: Web Professional
Description: Tema kustom untuk portal B2B Insights yang SEO Friendly, sangat ringan, dan dioptimalkan untuk penempatan iklan High-CPM Ad Manager.
Version: 2.0
Text Domain: risksurge-insights
*/

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root { 
    --primary-color: #0F172A; /* Oxford Blue */
    --primary-light: #1E293B;
    --accent-color: #EA580C; /* Surge Orange */
    --accent-hover: #C2410C; /* Muted Orange untuk hover text agar elegan */
    --text-main: #334155; 
    --text-light: #64748B; 
    --bg-light: #F8FAFC; 
    --white: #FFFFFF; 
    --border-color: #E2E8F0; 
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   2. TYPOGRAPHY & BASE LAYOUT
   ========================================================================== */
body { 
    font-family: 'Inter', sans-serif; 
    color: var(--text-main); 
    background: var(--bg-light); 
    line-height: 1.8; 
    top: 0px !important; /* Anti Google Translate space */
    position: static !important; /* Anti Google Translate space */
}
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; line-height: 1.3; }
a { color: var(--primary-color); text-decoration: none; transition: 0.3s; }
a:hover { color: var(--accent-hover); }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.site-header { background: var(--white); border-bottom: 1px solid var(--border-color); padding: 20px 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.site-branding h1 { font-size: 24px; margin: 0; font-weight: 800; letter-spacing: -0.5px; }
.main-navigation ul { list-style: none; display: flex; gap: 25px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; }
.site-content { display: grid; grid-template-columns: 2.5fr 1fr; gap: 40px; padding: 50px 0; }
.main-area { background: var(--white); padding: 40px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
@media (max-width: 768px) { .site-content { grid-template-columns: 1fr; } .header-inner { flex-direction: column; text-align: center; gap: 15px; } .main-area { padding: 20px; } }

/* ==========================================================================
   3. NATIVE WORDPRESS TABLE (ULTRA-MINIMALIST)
   ========================================================================== */
table.wp-block-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 3rem 0; border-collapse: collapse; text-align: left; background-color: transparent; border: none; box-shadow: none; }
table.wp-block-table::-webkit-scrollbar { height: 4px; }
table.wp-block-table::-webkit-scrollbar-track { background: transparent; }
table.wp-block-table::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
table.wp-block-table thead { border-top: 2px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); }
table.wp-block-table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-light); padding: 14px 16px; background-color: transparent; white-space: nowrap; border: none; }
table.wp-block-table tbody tr { border-bottom: 1px solid var(--border-color); }
table.wp-block-table tbody tr:last-child { border-bottom: 2px solid var(--primary-color); }
table.wp-block-table tbody td { padding: 18px 16px; color: var(--text-light); vertical-align: top; line-height: 1.7; border: none; font-size: 13px; }
table.wp-block-table tbody td:first-child { font-weight: 600; color: var(--primary-color); font-size: 13px; padding-right: 24px; }
table.wp-block-table tbody tr:hover td { background-color: var(--bg-light); transition: background-color 0.4s ease; }

/* ==========================================================================
   4. POSTS, WIDGETS & FOOTER
   ========================================================================== */
.post-loop { margin-bottom: 40px; border-bottom: 1px solid var(--border-color); padding-bottom: 30px; }
.post-loop h2 { font-size: 22px; }
.post-meta { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-light); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.single-post-title { font-size: 36px; margin-bottom: 20px; }
.entry-content { margin-top: 30px; }
.entry-content p { margin-bottom: 25px; }
.post-thumbnail img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; }
.widget-area .widget { background: var(--white); padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.widget-title { font-size: 16px; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 20px; text-transform: uppercase; }
.site-footer { background: var(--white); color: var(--text-main); text-align: center; padding: 30px 0; font-family: 'Inter', sans-serif; font-size: 14px; margin-top: 50px; border-top: 4px solid var(--primary-color); }

/* ==========================================================================
   5. UTILITIES (SCROLLBARS)
   ========================================================================== */
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }

/* ==========================================================================
   6. AD SYSTEM: KONFIGURASI DASAR & STRUKTUR LUAR
   ========================================================================== */
.floating-ads-bottom, .parallax-ad-fixed-content { position: fixed; left: 0; width: 100%; display: flex; pointer-events: none; }
#div-gpt-ad-parallax, .prev-eDocs::after { pointer-events: auto; }
.parallax-ad-fixed-content { top: 0; height: 100%; z-index: -1; align-items: center; justify-content: center; }
.floating-ads-bottom { bottom: 0; z-index: 999999; justify-content: center; }
.ads-slot-wrapper-relative { position: relative; pointer-events: auto; display: inline-block; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.1); width: 100% !important; }
.close-ads-btn-overlay { position: absolute; top: 5px; right: 5px; background: #fff; color: #888; border: 1px solid #888; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; z-index: 1000; flex-shrink: 0; transition: .2s; }
.close-ads-btn-overlay svg { display: block; }
.close-ads-btn-overlay:hover { background: #222; color: #ccc; border-color: #ccc; }
#parallax-top-bar, .rn-back-to-top { align-items: center; position: fixed; display: flex; }
@media (min-width: 1200px) { .parallax-ad-fixed-content { padding-right: 250px; box-sizing: border-box; } }
@media screen and (max-width: 768px) { .parallax-ad-fixed-content { width: 100vw; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; } .close-ads-btn-overlay { width: 20px; height: 20px; } .close-ads-btn-overlay svg { width: 10px; height: 10px; } }

/* ==========================================================================
   7. AD SYSTEM: POPUP ANIMASI & TOMBOL CLOSE
   ========================================================================== */
@keyframes slideInRight { from { transform: translateX(150%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeInClose { from { opacity: 0; transform: scale(0.5); pointer-events: none; } to { opacity: 1; transform: scale(1); pointer-events: auto; } }
#popup-ad-container { position: fixed; bottom: 90px; right: 20px; z-index: 99999; animation: slideInRight 0.5s ease-out forwards; }
.popup-scale-wrapper { position: relative; background-color: #fff; padding: 5px; border-radius: 8px; transform: scale(0.6); transform-origin: bottom right; }
.popup-ad-content { width: 300px; height: 250px; background: #f9f9f9; }
.popup-close-btn { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: #fff; color: #888; border: 1px solid #888; border-radius: 50%; font-size: 22px; line-height: 26px; text-align: center; cursor: pointer; z-index: 100000; opacity: 0; pointer-events: none; animation: fadeInClose 0.4s ease-out forwards 1s; }
.popup-close-btn:hover { background: #222; color: #ccc; }
@media (max-width: 768px) { #popup-ad-container { right: 10px; bottom: 100px; animation: slideInRight 0.5s ease-out forwards; } .popup-scale-wrapper { transform: scale(0.60); transform-origin: bottom right; } }

/* ==========================================================================
   8. AD SYSTEM: GLOBAL RESPONSIVE FALLBACKS
   ========================================================================== */
div[id^="div-gpt-ad-"] { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; width: 100% !important; }
@media (min-width: 1024px) { #div-gpt-ad-leaderboard, #div-gpt-ad-before-footer { max-width: 970px !important; height: 250px !important; } }
@media (min-width: 768px) and (max-width: 1023px) { #div-gpt-ad-leaderboard, #div-gpt-ad-before-footer { max-width: 468px !important; height: 60px !important; } }
@media (max-width: 767px) { #div-gpt-ad-leaderboard, #div-gpt-ad-before-footer { max-width: 320px !important; height: 100px !important; } }
@media (min-width: 1024px) { #div-gpt-ad-floating-bottom { max-width: 970px !important; height: 90px !important; } .ads-slot-wrapper-relative { max-width: 970px !important; } }
@media (min-width: 768px) and (max-width: 1023px) { #div-gpt-ad-floating-bottom { max-width: 728px !important; height: 90px !important; } .ads-slot-wrapper-relative { max-width: 728px !important; } }
@media (max-width: 767px) { #div-gpt-ad-floating-bottom { max-width: 320px !important; height: 100px !important; } .ads-slot-wrapper-relative { max-width: 320px !important; } }
@media (min-width: 1024px) { #div-gpt-ad-pageAds { max-width: 728px !important; height: 90px !important; } }
@media (min-width: 768px) and (max-width: 1023px) { #div-gpt-ad-pageAds { max-width: 468px !important; height: 60px !important; } }
@media (max-width: 767px) { #div-gpt-ad-pageAds { max-width: 320px !important; height: 100px !important; } }
@media (min-width: 1024px) { #div-gpt-ad-archive-top, #div-gpt-ad-archive-middle, #div-gpt-ad-archive-bottom { max-width: 468px !important; height: 60px !important; } }
@media (max-width: 1023px) { #div-gpt-ad-archive-top, #div-gpt-ad-archive-middle, #div-gpt-ad-archive-bottom { max-width: 320px !important; height: 100px !important; } }
@media (min-width: 768px) { #div-gpt-ad-before-post, #div-gpt-ad-after-post, div[id^="div-gpt-ad-single-post"] { max-width: 468px !important; height: 60px !important; } }
@media (max-width: 767px) { #div-gpt-ad-before-post, #div-gpt-ad-after-post, div[id^="div-gpt-ad-single-post"] { max-width: 320px !important; height: 100px !important; } }
#div-gpt-ad-sidebar-top, #div-gpt-ad-popUp_Ads { max-width: 300px !important; height: 250px !important; }
#div-gpt-ad-parallax-post { max-width: 300px !important; height: 600px !important; }
@media (min-width: 1024px) { #div-gpt-ad-sidebar-bottom { max-width: 300px !important; height: 1050px !important; } }
@media (min-width: 768px) and (max-width: 1023px) { #div-gpt-ad-sidebar-bottom { max-width: 300px !important; height: 600px !important; } }
@media (max-width: 767px) { #div-gpt-ad-sidebar-bottom { display: none !important; } }
@media (min-width: 1280px) { #div-gpt-ad-sticky_left, #div-gpt-ad-sticky_right { max-width: 160px !important; height: 600px !important; } }
@media (max-width: 1279px) { #div-gpt-ad-sticky_left, #div-gpt-ad-sticky_right { display: none !important; } }

/* ==========================================================================
   9. CUSTOM FOOTER RISKSURGE
   ========================================================================== */
.eco-footer { background-color: var(--white); color: var(--text-main); padding: 40px 0 24px 0; border-top: 4px solid var(--primary-color); position: relative; z-index: 40; }
.eco-footer-container { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.eco-footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 32px; }
.eco-footer-brand { grid-column: span 2; }
.eco-brand-link { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; text-decoration: none; }
.eco-badge { background-color: var(--primary-color); color: var(--white); padding: 2px 8px; border-radius: 2px; font-weight: 900; font-size: 14px; letter-spacing: -0.5px; }
.eco-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--primary-color); text-transform: uppercase; margin-left: 4px; }
.eco-desc { font-size: 11px; line-height: 1.6; max-width: 384px; margin-bottom: 12px; color: var(--text-light); }
.eco-footer-menu h4 { color: var(--primary-color); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.eco-footer-menu .menu-links { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.eco-footer-menu .menu-links a { color: var(--text-light); transition: color 0.3s ease; text-decoration: none; }
.eco-footer-menu .menu-links a:hover { color: var(--accent-hover); }
.eco-footer-bottom { padding-top: 16px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-light); }
.eco-footer-bottom p { font-size: 10px; margin: 0; }
@media (min-width: 768px) { .eco-footer-grid { grid-template-columns: repeat(4, 1fr); } .eco-footer-bottom { flex-direction: row; } }

/* ==========================================================================
   10. GLOBAL HEADER, FONTS & OVERRIDES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');
.eco-body { color: var(--text-main); }
.font-serif-title { font-family: 'Playfair Display', serif; }
.artikel-judul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.artikel-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ad-slot-container { background-color: transparent; display: flex !important; align-items: center !important; justify-content: center !important; position: relative; }
.ad-slot-container iframe { margin: 0 auto !important; display: block !important; }
.custom-scrollbar::-webkit-scrollbar { width: 3px; height: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--bg-light); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
.custom-scrollbar { -ms-overflow-style: auto; scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9; }

/* ANTI GOOGLE TRANSLATE SAMPAH VISUAL */
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
body > .skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-spinner-pos, .goog-te-spinner-animation, .goog-te-spinner, div[style*="z-index: 100000"], .goog-tooltip, [id^="goog-gt-"], .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-ORHb-OEVmcd, iframe.skiptranslate { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; z-index: -999999 !important; }
.eco-google-hidden { position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; }

/* ==========================================================================
   11. MAIN HEADER NAVBAR (LIGHT)
   ========================================================================== */
.eco-nav-main { background-color: var(--white); color: var(--primary-color); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border-color); }
.eco-nav-container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px; position: relative; }
.eco-nav-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.eco-btn-menu { display: flex; align-items: center; justify-content: center; color: var(--text-main); background: transparent; border: none; height: 32px; width: 32px; cursor: pointer; transition: color 0.3s; font-size: 20px; }
.eco-btn-menu:hover { color: var(--accent-hover); }
.eco-btn-menu:hover i { transform: scale(1.1); transition: transform 0.3s; }
.eco-brand-logo { display: flex; align-items: center; flex-shrink: 0; margin-left: -4px; }
.eco-brand-logo img { height: 28px; width: auto; object-fit: contain; }
.eco-nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.eco-btn-search-mobile { display: flex; align-items: center; justify-content: center; background-color: var(--bg-light); border: 1px solid var(--border-color); color: var(--text-main); height: 32px; width: 32px; border-radius: 2px; cursor: pointer; font-size: 12px; transition: 0.3s; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.eco-btn-search-mobile:hover { color: var(--accent-hover); }
.eco-btn-submit-pro { display: none; background-color: var(--accent-color); color: var(--white); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 2px; transition: 0.3s; white-space: nowrap; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); text-decoration: none; }
.eco-btn-submit-pro:hover { background-color: var(--accent-hover); color: var(--white); }
.eco-lang-btn { display: flex; align-items: center; justify-content: center; background-color: var(--bg-light); border: 1px solid var(--border-color); color: var(--text-main); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; height: 32px; width: 32px; border-radius: 2px; cursor: pointer; transition: 0.3s; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.eco-lang-btn:hover { border-color: var(--accent-color); color: var(--accent-hover); }
.eco-lang-btn .icon-globe { font-size: 14px; }
.eco-lang-btn .lang-text, .eco-lang-btn .lang-chevron { display: none; }
.eco-lang-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; width: 144px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 2px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); overflow: hidden; z-index: 1000; list-style: none; padding: 0; }
.lang-option { display: flex; align-items: center; padding: 8px 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: 0.3s; }
.lang-option:hover { background-color: var(--bg-light); color: var(--accent-hover); }
.lang-option .flag { font-size: 14px; margin-right: 8px; }
.lang-reset { color: #E11D48; }
.lang-reset:hover { background-color: #FFE4E6; }
@media (min-width: 640px) { .eco-nav-container { height: 2.75rem; } .eco-btn-search-mobile { display: none; } .eco-brand-logo { margin-left: -8px; } .eco-btn-submit-pro { display: block; } .eco-lang-btn { width: auto; padding: 0 10px; justify-content: space-between; } .eco-lang-btn .lang-text { display: inline-block; margin-left: 4px; } .eco-lang-btn .lang-chevron { display: inline-block; margin-left: 6px; font-size: 8px; color: var(--text-light); } }

/* ==========================================================================
   12. HEADER SEARCH BAR
   ========================================================================== */
.eco-search-form { display: none; }
.eco-btn-search-close { display: flex; align-items: center; justify-content: center; background: transparent; border: none; height: 32px; width: 32px; color: var(--text-main); cursor: pointer; flex-shrink: 0; margin-right: 8px; }
.eco-search-wrapper { display: flex; align-items: center; width: 100%; background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: 2px; height: 32px; padding: 0 8px; transition: 0.3s; }
.eco-search-wrapper:focus-within { border-color: var(--accent-color); }
.eco-search-input { width: 100%; background: transparent; border: none; color: var(--primary-color); font-size: 12px; padding: 0 8px 0 4px; box-shadow: none !important; outline: none; }
.eco-search-input::placeholder { color: var(--text-light); }
.eco-btn-search-submit { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.eco-btn-search-submit svg { width: 14px; height: 14px; color: var(--text-light); transition: 0.3s; display: block !important; visibility: visible !important; opacity: 1 !important; }
.eco-btn-search-submit:hover svg { color: var(--accent-hover); }
.search-open-mobile { display: flex !important; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--white); align-items: center; padding: 0 16px; z-index: 1050; }
@media (min-width: 640px) { .eco-search-form { display: flex; position: static; background: transparent; height: auto; padding: 0; width: auto; z-index: auto; } .eco-btn-search-close { display: none; } .eco-search-wrapper { width: 150px; } }

/* ==========================================================================
   13. HEADER SUB-NAV CATEGORIES
   ========================================================================== */
.eco-sub-nav { background-color: var(--white); border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); position: sticky; top: 3.5rem; z-index: 40; }
.eco-sub-menu { display: flex; align-items: center; gap: 16px; overflow-x: auto; height: 44px; list-style: none; margin: 0; padding: 0; font-size: 10.5px; color: var(--text-light); }
.eco-sub-menu li { height: 100%; }
.eco-sub-menu a { display: flex; align-items: center; height: 100%; border-bottom: 2px solid transparent; white-space: nowrap; transition: 0.3s; text-decoration: none; color: inherit; }
.eco-sub-menu a:hover { border-bottom-color: var(--accent-color); color: var(--accent-hover); }
@media (min-width: 768px) { .eco-sub-nav { top: 2.75rem; } .eco-sub-menu { gap: 24px; } }
@media (min-width: 1024px) { .eco-sub-menu { gap: 24px; } }

/* ==========================================================================
   14. OFFCANVAS MOBILE MENU (DRAWER & BACKDROP)
   ========================================================================== */
.eco-backdrop { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 99998; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
.eco-backdrop.open { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }
.eco-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; background-color: var(--white); color: var(--text-main); z-index: 99999; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease-in-out; }
.eco-drawer.open { transform: translateX(0); }
@media (min-width: 640px) { .eco-drawer { width: 320px; } }
.eco-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; border-bottom: 1px solid var(--border-color); background-color: var(--white); flex-shrink: 0; height: 56px; }
.drawer-logo-desktop { display: none; height: 28px; width: auto; object-fit: contain; }
.drawer-btn-submit-mobile { display: block; background-color: var(--accent-color); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border-radius: 2px; transition: 0.3s; white-space: nowrap; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); text-decoration: none; }
.drawer-btn-submit-mobile:hover { background-color: var(--accent-hover); color: var(--white); }
.drawer-btn-close { color: var(--text-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; background-color: var(--bg-light); padding: 6px 10px; border-radius: 4px; transition: 0.3s; border: none; cursor: pointer; }
.drawer-btn-close:hover { color: var(--primary-color); background-color: var(--border-color); }
.drawer-btn-close i { font-size: 14px; }
@media (min-width: 640px) { .drawer-logo-desktop { display: block; } .drawer-btn-submit-mobile { display: none; } }

.eco-drawer-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.drawer-home-link { padding: 4px 20px; }
.drawer-home-link a { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--text-main); text-decoration: none; transition: 0.3s; }
.drawer-home-link a:hover { color: var(--accent-hover); }
.drawer-home-link i { width: 20px; text-align: center; color: var(--text-light); }
.drawer-divider { border: 0; border-top: 1px solid var(--bg-light); margin: 0; }
.drawer-grad-divider { height: 1px; background: linear-gradient(to right, var(--border-color), var(--bg-light), transparent); margin: 8px 0; padding: 0 20px; }
.drawer-section { padding: 12px 20px; }
.drawer-section h4 { font-size: 11px; color: var(--text-light); text-transform: uppercase; margin-bottom: 12px; font-weight: 600; letter-spacing: 0.05em; font-family: 'Inter', sans-serif; }
.eco-drawer-grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 12px; column-gap: 12px; }

/* ==========================================================================
   15. DRAWER ICON ITEMS
   ========================================================================== */
.drawer-item { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--text-main); text-decoration: none; transition: 0.3s; }
.drawer-item:hover { color: var(--accent-hover); }
.drawer-item .icon-wrap { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 10px; transition: 0.3s; flex-shrink: 0; }
.color-blue .icon-wrap { background-color: #EFF6FF; color: #2563EB; }
.color-blue:hover .icon-wrap { background-color: #DBEAFE; }
.color-emerald .icon-wrap { background-color: #ECFDF5; color: #059669; }
.color-emerald:hover .icon-wrap { background-color: #D1FAE5; }
.color-purple .icon-wrap { background-color: #FAF5FF; color: #9333EA; }
.color-purple:hover .icon-wrap { background-color: #F3E8FF; }
.color-amber .icon-wrap { background-color: #FFFBEB; color: #D97706; }
.color-amber:hover .icon-wrap { background-color: #FEF3C7; }
.color-rose .icon-wrap { background-color: #FFF1F2; color: #E11D48; }
.color-rose:hover .icon-wrap { background-color: #FFE4E6; }
.color-teal .icon-wrap { background-color: #F0FDFA; color: #0D9488; }
.color-teal:hover .icon-wrap { background-color: #CCFBF1; }
.color-indigo .icon-wrap { background-color: #EEF2FF; color: #4F46E5; }
.color-indigo:hover .icon-wrap { background-color: #E0E7FF; }
.color-sky .icon-wrap { background-color: #F0F9FF; color: #0284C7; }
.color-sky:hover .icon-wrap { background-color: #E0F2FE; }

/* ==========================================================================
   16. LANDING PAGE & BLOCKS
   ========================================================================== */
.eco-top-ad-wrapper { width: 100%; background-color: var(--white); border-bottom: 1px solid var(--border-color); padding: 16px 0; position: relative; z-index: 20; }
.eco-container { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.flex-center { display: flex; justify-content: center; }
.eco-ad-top { max-width: 970px; width: 100%; background-color: var(--bg-light); border: 1px solid var(--border-color); }
.eco-main-layout { max-width: 1340px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: center; gap: 8px; position: relative; z-index: 10; background-color: var(--bg-light); padding-top: 8px; }
.eco-sticky-left, .eco-sticky-right { display: none; width: 160px; flex-shrink: 0; flex-direction: column; align-items: center; position: sticky; top: 112px; }
@media (min-width: 1280px) { .eco-sticky-left, .eco-sticky-right { display: flex; } }
.eco-ad-sticky { background-color: var(--bg-light); border: 1px solid var(--border-color); width: 100%; }
.eco-main-content { width: 100%; max-width: 1000px; background-color: var(--white); border: 1px solid var(--border-color); padding: 10px; border-radius: 2px; }
@media (min-width: 768px) { .eco-main-content { padding: 16px; } .eco-main-layout { padding-left: 8px; padding-right: 8px; } }
.eco-content-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1024px) { .eco-content-grid { grid-template-columns: minmax(0, 1fr) 310px; } }
.eco-col-main { width: 100%; min-width: 0; }
.eco-section-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 16px; margin-top: 4px; position: relative; }
.eco-mb-header { margin-top: 4px; }
.eco-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--primary-light); position: relative; z-index: 10; }
.eco-section-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(to right, var(--primary-light), var(--border-color), transparent); }
.eco-section-link { font-size: 9px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.05em; position: relative; z-index: 10; transition: color 0.3s; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.eco-section-link:hover { color: var(--accent-hover); }
.eco-section-link i { color: var(--accent-color); transition: transform 0.3s; }
.eco-section-link:hover i { color: var(--accent-hover); transform: translateX(4px); }
.eco-icon-accent { color: var(--accent-color); margin-right: 4px; }
.eco-icon-gray { color: var(--text-light); font-size: 10px; position: relative; z-index: 10; }

/* HERO SECTION */
.eco-hero-section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
@media (min-width: 768px) { .eco-hero-section { flex-direction: row; } }
.eco-hero-featured { flex: 1; min-width: 0; overflow: hidden; }
.eco-feat-large { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; margin-bottom: 16px; display: block; }
@media (min-width: 768px) { .eco-feat-large { aspect-ratio: 16/9; } }
.eco-feat-large a { display: block; width: 100%; height: 100%; }
.eco-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.eco-feat-large:hover .eco-feat-img { transform: scale(1.05); }
.eco-feat-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,0.9), rgba(15,23,42,0.3), transparent); }
.eco-feat-badge { position: absolute; top: 16px; left: 16px; z-index: 20; background-color: var(--primary-color); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 2px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
@media (min-width: 768px) { .eco-feat-badge { top: 12px; left: 20px; } }
.eco-feat-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 10; }
@media (min-width: 768px) { .eco-feat-content { padding: 20px; } }
.eco-feat-title { color: var(--white); font-size: 17px; font-weight: 700; line-height: 1.3; transition: color 0.3s; text-shadow: 0 4px 6px rgba(0,0,0,0.3); }
@media (min-width: 768px) { .eco-feat-title { font-size: 20px; } }
.eco-feat-large:hover .eco-feat-title { color: var(--accent-color); }
.eco-feat-small-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.eco-feat-small a { display: block; text-decoration: none; }
.eco-feat-small-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; margin-bottom: 8px; border: 1px solid var(--bg-light); }
.eco-feat-small-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.eco-feat-small:hover .eco-feat-small-img { transform: scale(1.05); }
.eco-feat-small-title { color: var(--primary-light); font-size: 14px; font-weight: 700; line-height: 1.25; transition: color 0.3s; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.eco-feat-small:hover .eco-feat-small-title { color: var(--accent-hover); }
.eco-hero-trending { width: 100%; flex-shrink: 0; }
@media (min-width: 768px) { .eco-hero-trending { width: 200px; } }
.eco-trending-list { display: flex; flex-direction: column; gap: 16px; }
.eco-trending-item { display: flex; gap: 8px; align-items: flex-start; }
.eco-trending-number { font-size: 16px; font-weight: 700; color: var(--text-light); margin-top: -2px; }
.eco-trending-content { flex: 1; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--bg-light); }
.eco-trending-item:last-child .eco-trending-content { border-bottom: none; padding-bottom: 0; }
.eco-trending-title { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--primary-light); transition: color 0.3s; margin-bottom: 6px; text-decoration: none; }
.eco-trending-item:hover .eco-trending-title { color: var(--accent-hover); }
.eco-trending-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

/* NEWS SLIDER */
.eco-slider-wrapper { width: 100%; position: relative; margin-bottom: 32px; margin-top: 32px; background-color: var(--bg-light); padding: 16px; border: 1px solid var(--border-color); border-radius: 2px; }
.eco-slider-btn { display: none; position: absolute; top: 55%; transform: translateY(-50%); z-index: 10; width: 32px; height: 32px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 50%; align-items: center; justify-content: center; color: var(--text-light); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); transition: all 0.3s; opacity: 0; cursor: pointer; }
.eco-slider-wrapper:hover .eco-slider-btn { opacity: 1; }
.eco-slider-btn:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.eco-slider-btn.left { left: 0; margin-left: -12px; }
.eco-slider-btn.right { right: 0; margin-right: -12px; }
@media (min-width: 768px) { .eco-slider-btn { display: flex; } }
.eco-slider-track { display: grid; grid-template-rows: 1fr; grid-auto-flow: column; gap: 8px; position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; grid-auto-columns: 85%; }
@media (min-width: 640px) { .eco-slider-track { grid-auto-columns: calc(50% - 4px); } }
@media (min-width: 768px) { .eco-slider-track { grid-template-rows: repeat(2, 1fr); grid-auto-columns: calc(33.333% - 5.33px); } }
.eco-slider-item { width: 100%; scroll-snap-align: start; border: 1px solid var(--bg-light); padding: 8px; border-radius: 2px; background-color: var(--white); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.eco-slider-item a { display: block; text-decoration: none; }
.eco-slider-img-wrap { width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; margin-bottom: 8px; background-color: var(--bg-light); }
.eco-slider-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-slider-item:hover .eco-slider-img-wrap img { opacity: 0.9; }
.eco-slider-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--primary-light); transition: color 0.3s; margin-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.eco-slider-item:hover .eco-slider-title { color: var(--accent-hover); }
.eco-slider-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; display: block; }

/* CATEGORY BLOCKS */
.eco-cat-block { margin-bottom: 24px; border: 1px solid var(--border-color); padding: 16px; border-radius: 2px; }
.eco-bg-soft { background-color: var(--bg-light); }
.eco-cat-flex { display: flex; flex-direction: column; gap: 20px; }
.eco-cat-flex.reverse { flex-direction: column; }
@media (min-width: 640px) { .eco-cat-flex { flex-direction: row; } .eco-cat-flex.reverse { flex-direction: row-reverse; } }
@media (min-width: 768px) { .eco-cat-flex.reverse { flex-direction: row-reverse; } }
.eco-cat-col-large { width: 100%; }
.eco-cat-col-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .eco-cat-col-large { width: 50%; } .eco-cat-col-list { width: 50%; } }
.eco-card-large { display: block; text-decoration: none; }
.eco-card-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; margin-bottom: 12px; }
.eco-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, opacity 0.3s; }
.eco-card-large:hover .eco-card-img-wrap img { transform: scale(1.05); opacity: 0.9; }
.eco-card-title { font-size: 15px; font-weight: 700; color: var(--primary-light); line-height: 1.25; margin-bottom: 4px; transition: color 0.3s; }
.eco-card-large:hover .eco-card-title { color: var(--accent-hover); }
.eco-card-desc { font-size: 11px; color: var(--text-light); margin-bottom: 8px; }
.eco-card-list-text { display: block; border-bottom: 1px solid var(--bg-light); padding-bottom: 8px; text-decoration: none; }
.eco-card-list-text:last-child { border-bottom: none; padding-bottom: 0; }
.eco-card-list-title { font-size: 13px; font-weight: 600; color: var(--text-main); line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
.eco-card-list-text:hover .eco-card-list-title { color: var(--accent-hover); }
.eco-card-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; }
.eco-card-list-img { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--bg-light); padding-bottom: 12px; }
.eco-card-list-img:last-child { border-bottom: none; padding-bottom: 0; }
.eco-card-list-thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); display: block; }
.eco-card-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.eco-card-list-img:hover .eco-card-list-thumb img { transform: scale(1.05); }
.eco-card-list-content { flex: 1; min-width: 0; }
.eco-card-list-content a { text-decoration: none; display: block; }
.eco-card-list-img:hover .eco-card-list-title { color: var(--accent-hover); }

/* IN-FEED ADS */
.eco-infeed-ad-wrap { width: 100%; display: flex; justify-content: center; margin-bottom: 24px; }
.eco-ad-infeed { width: 100%; max-width: 728px; }

/* GRANTS GRID */
.eco-grants-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .eco-grants-grid { grid-template-columns: repeat(3, 1fr); } }
.eco-grant-item { background-color: var(--white); padding: 12px; border: 1px solid var(--bg-light); border-radius: 2px; }
.eco-grant-date { color: var(--accent-hover); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; display: block; }
.eco-grant-date i { margin-right: 4px; }
.eco-grant-item a { text-decoration: none; display: block; }
.eco-grant-title { font-size: 13px; font-weight: 600; color: var(--primary-light); line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
.eco-grant-item:hover .eco-grant-title { color: var(--accent-hover); }

/* DOCUMENT CLOUD SECTION (DITERANGKAN) */
.eco-cloud-section { margin-bottom: 24px; background-color: var(--bg-light); padding: 20px; border-radius: 2px; position: relative; overflow: hidden; border: 1px solid var(--border-color); }
.eco-cloud-bg-element-1 { position: absolute; top: 0; right: 0; width: 160px; height: 160px; background-color: var(--border-color); opacity: 0.5; border-bottom-left-radius: 9999px; filter: blur(24px); pointer-events: none; }
.eco-cloud-bg-element-2 { position: absolute; bottom: 0; left: 0; width: 128px; height: 128px; background-color: var(--border-color); opacity: 0.5; border-top-right-radius: 9999px; filter: blur(16px); pointer-events: none; }
.eco-cloud-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 20px; position: relative; z-index: 10; }
.eco-cloud-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--primary-color); }
.eco-cloud-title i { color: var(--accent-color); margin-right: 8px; }
.eco-cloud-link { font-size: 9px; font-weight: 700; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.eco-cloud-link:hover { color: var(--accent-hover); }
.eco-cloud-link i { transition: transform 0.3s; }
.eco-cloud-link:hover i { transform: translateX(4px); }
.eco-cloud-grid { display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; z-index: 10; }
@media (min-width: 640px) { .eco-cloud-grid { grid-template-columns: repeat(2, 1fr); } }
.eco-cloud-item { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--white); border: 1px solid var(--border-color); padding: 16px; border-radius: 2px; transition: all 0.3s; text-decoration: none; height: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.eco-cloud-item:hover { border-color: var(--accent-color); }
.eco-cloud-item-top { margin-bottom: 12px; }
.eco-cloud-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.eco-cloud-icon { width: 32px; height: 32px; border-radius: 2px; background-color: var(--bg-light); color: var(--text-light); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s; }
.eco-cloud-item:hover .eco-cloud-icon { background-color: var(--accent-color); color: var(--white); }
.eco-cloud-date { font-size: 8.5px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; }
.eco-cloud-item-title { font-size: 13px; font-weight: 700; color: var(--primary-color); line-height: 1.3; margin-bottom: 8px; transition: color 0.3s; }
.eco-cloud-item:hover .eco-cloud-item-title { color: var(--accent-hover); }
.eco-cloud-action { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-color); transition: border-color 0.3s; color: var(--primary-color); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.eco-cloud-item:hover .eco-cloud-action { color: var(--accent-hover); }
.eco-cloud-action i { transition: transform 0.3s; }
.eco-cloud-item:hover .eco-cloud-action i { transform: translateX(4px); }

/* NEWS VILLAGE SECTION */
.eco-village-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .eco-village-grid { grid-template-columns: repeat(2, 1fr); } }
.eco-village-feat a { display: flex; flex-direction: column; text-decoration: none; }
.eco-village-feat-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; margin-bottom: 12px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
.eco-village-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.eco-village-feat:hover .eco-village-feat-img img { transform: scale(1.05); }
.eco-village-feat-content { display: flex; flex-direction: column; }
.eco-village-date { color: var(--accent-hover); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; display: block; border-left: 2px solid var(--accent-hover); padding-left: 6px; line-height: 1; }
.eco-village-title { font-size: 14px; font-weight: 700; color: var(--primary-light); line-height: 1.3; transition: color 0.3s; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.eco-village-feat:hover .eco-village-title { color: var(--accent-hover); }
.eco-village-list { border-bottom: 1px solid var(--bg-light); padding-bottom: 12px; margin-bottom: 12px; }
.eco-village-list:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
@media (min-width: 640px) { .eco-village-list { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } }
.eco-village-list a { display: flex; flex-direction: row-reverse; gap: 12px; align-items: center; text-decoration: none; }
@media (min-width: 640px) { .eco-village-list a { flex-direction: column; gap: 0; align-items: flex-start; } }
.eco-village-list-img { width: 80px; height: 80px; flex-shrink: 0; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
@media (min-width: 640px) { .eco-village-list-img { width: 100%; aspect-ratio: 16/9; height: auto; margin-bottom: 12px; } }
.eco-village-list-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.eco-village-list:hover .eco-village-list-img img { transform: scale(1.05); }
.img-desktop { display: none; }
.img-mobile { display: block; }
@media (min-width: 640px) { .img-desktop { display: block; } .img-mobile { display: none; } }
.eco-village-list-content { display: flex; flex-direction: column; flex: 1; min-width: 0; width: 100%; }
.eco-village-list-title { font-size: 12px; font-weight: 700; color: var(--primary-light); line-height: 1.3; transition: color 0.3s; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 640px) { .eco-village-list-title { font-size: 14px; -webkit-line-clamp: 3; } }
.eco-village-list:hover .eco-village-list-title { color: var(--accent-hover); }

/* EXAMS SECTION */
.eco-cat-assessments { background-color: var(--bg-light); }
.eco-exam-feat { display: flex; flex-direction: column; height: 100%; background-color: var(--white); padding: 12px; border: 1px solid var(--bg-light); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); position: relative; overflow: hidden; text-decoration: none; }
.eco-exam-badge { position: absolute; top: 20px; left: 20px; z-index: 10; background-color: var(--primary-color); color: var(--white); font-size: 9px; font-weight: 700; padding: 4px 8px; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.eco-exam-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; margin-bottom: 12px; }
.eco-exam-img img { width: 100%; height: 100%; object-fit: cover; }
.eco-exam-title { font-size: 15px; font-weight: 700; color: var(--primary-light); line-height: 1.25; margin-bottom: 12px; }
.eco-exam-list-wrap { gap: 10px; }
.eco-exam-item a { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; background-color: var(--white); padding: 10px; border: 1px solid var(--bg-light); border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); text-decoration: none; }
@media (min-width: 768px) { .eco-exam-item a { flex-direction: row; } }
.eco-exam-thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); position: relative; }
.eco-exam-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eco-exam-content { flex: 1; min-width: 0; }
.eco-exam-item-title { font-size: 13px; font-weight: 600; color: var(--primary-light); line-height: 1.3; margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 640px) { .eco-exam-item-title { font-size: 14px; } }
.eco-exam-meta { display: flex; align-items: center; gap: 10px; font-size: 9px; color: var(--text-light); }
.eco-exam-meta span { display: flex; align-items: center; gap: 4px; }
.eco-exam-meta i { color: var(--primary-color); }

/* RIGHT SIDEBAR WIDGETS */
.eco-sidebar-right { width: 100%; position: relative; height: 100%; }
.eco-widget-subscribe { margin-bottom: 24px; background-color: var(--bg-light); padding: 16px; border-radius: 2px; text-align: center; border: 1px solid var(--border-color); }
.eco-widget-subscribe h3 { color: var(--primary-color); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.eco-widget-subscribe p { font-size: 10px; color: var(--text-light); margin-bottom: 12px; line-height: 1.6; }
.eco-sub-input-wrap { position: relative; margin-bottom: 8px; }
.eco-sub-input-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 11px; }
.eco-sub-input-wrap input { width: 100%; background-color: var(--white); color: var(--primary-color); border: 1px solid var(--border-color); border-radius: 2px; padding: 6px 8px 6px 28px; font-size: 11px; outline: none; transition: border-color 0.3s; }
.eco-sub-input-wrap input:focus { border-color: var(--accent-color); }
.eco-sub-btn { width: 100%; background-color: var(--primary-color); color: var(--white); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0; border-radius: 2px; transition: background-color 0.3s; border: none; cursor: pointer; }
.eco-sub-btn:hover { background-color: var(--primary-light); }
.eco-sub-msg { font-size: 10px; margin-top: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.eco-sub-msg.success { color: #10B981; }
.eco-sub-msg.error { color: #EAB308; }
.eco-widget-ad { margin-bottom: 24px; width: 100%; display: flex; justify-content: center; }
.eco-ad-sidebar { min-width: 300px; min-height: 250px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
.eco-widget-network { margin-bottom: 24px; border: 1px solid var(--border-color); background-color: var(--white); padding: 16px; border-radius: 2px; position: relative; overflow: hidden; }
.eco-network-border { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: var(--primary-color); }
.eco-network-list { display: flex; flex-direction: column; }
.eco-network-feat { border-bottom: 1px solid var(--bg-light); padding-bottom: 16px; margin-bottom: 16px; }
.eco-network-feat:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-network-feat a { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-decoration: none; }
.eco-network-feat-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
@media (min-width: 768px) { .eco-network-feat-img { aspect-ratio: 3/2; } }
.eco-network-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-network-feat:hover .eco-network-feat-img img { opacity: 0.9; }
.eco-network-feat-content { width: 100%; padding-top: 4px; }
.eco-network-date { color: var(--accent-hover); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; display: block; }
.eco-network-title { font-size: 14px; font-weight: 700; color: var(--primary-light); line-height: 1.3; transition: color 0.3s; }
.eco-network-feat:hover .eco-network-title { color: var(--accent-hover); }
.eco-network-list { border-bottom: 1px solid var(--bg-light); padding-bottom: 12px; margin-bottom: 12px; }
.eco-network-list:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-network-list a { display: flex; flex-direction: row; gap: 12px; align-items: center; justify-content: flex-start; text-decoration: none; }
.eco-network-list-img { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
.eco-network-list-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-network-list:hover .eco-network-list-img img { opacity: 0.9; }
.eco-network-list-content { flex: 1; min-width: 0; }
.eco-network-list-title { font-size: 12px; font-weight: 600; color: var(--text-main); line-height: 1.3; transition: color 0.3s; }
.eco-network-list:hover .eco-network-list-title { color: var(--accent-hover); }
.eco-network-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 4px; }
.eco-network-empty { font-size: 11px; color: var(--text-light); font-style: italic; }
.eco-widget-reports { margin-bottom: 24px; border: 1px solid var(--border-color); padding: 12px; border-radius: 2px; }
.eco-reports-list { display: flex; flex-direction: column; }
.eco-report-feat { border-bottom: 1px solid var(--bg-light); padding-bottom: 16px; margin-bottom: 16px; }
.eco-report-feat:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-report-feat a { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-decoration: none; }
.eco-report-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); border: 1px solid var(--border-color); }
@media (min-width: 768px) { .eco-report-img-wrap { aspect-ratio: 3/2; } }
.eco-report-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-report-feat:hover .eco-report-img-wrap img { opacity: 0.9; }
.eco-report-content { width: 100%; padding-top: 4px; }
.eco-report-date { color: var(--accent-hover); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; display: block; }
.eco-report-title { font-size: 14px; font-weight: 700; color: var(--primary-light); line-height: 1.3; transition: color 0.3s; }
.eco-report-feat:hover .eco-report-title { color: var(--accent-hover); }
.eco-report-list { border-bottom: 1px solid var(--bg-light); padding-bottom: 12px; margin-bottom: 12px; }
.eco-report-list:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-report-list a { display: flex; flex-direction: row; gap: 12px; align-items: center; justify-content: space-between; text-decoration: none; }
.eco-report-list-content { flex: 1; min-width: 0; }
.eco-report-list-title { font-size: 12px; font-weight: 600; color: var(--text-main); line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
.eco-report-list:hover .eco-report-list-title { color: var(--accent-hover); }
.eco-report-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; }
.eco-report-list-img { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); }
.eco-report-list-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-report-list:hover .eco-report-list-img img { opacity: 0.9; }
.eco-widget-ad-sticky { display: none; width: 100%; justify-content: center; margin-bottom: 16px; padding-bottom: 16px; position: sticky; top: 80px; }
@media (min-width: 1024px) { .eco-widget-ad-sticky { display: flex; } }
.eco-ad-sidebar-btm { background-color: var(--bg-light); border: 1px solid var(--border-color); width: 300px; }
.eco-bottom-ad-wrapper { width: 100%; background-color: var(--bg-light); border-top: 1px solid var(--border-color); padding: 24px 0; margin-top: auto; position: relative; z-index: 40; }

/* ==========================================================================
   17. ARCHIVE PAGE
   ========================================================================== */
.eco-archive-header { margin-bottom: 24px; padding-bottom: 8px; width: 100%; position: relative; }
.eco-archive-label { color: var(--primary-color); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; display: block; position: relative; z-index: 10; }
.eco-archive-title { color: var(--primary-color); font-size: 24px; font-weight: 700; line-height: 1.25; position: relative; z-index: 10; }
@media (min-width: 768px) { .eco-archive-title { font-size: 36px; } }
.eco-archive-desc { font-size: 13px; color: var(--text-light); margin-top: 8px; line-height: 1.6; position: relative; z-index: 10; }
.eco-archive-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--primary-color), var(--border-color), transparent); }
.eco-archive-loop { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.eco-archive-large { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--bg-light); padding-bottom: 20px; margin-bottom: 16px; width: 100%; min-width: 0; overflow: hidden; }
.eco-archive-large:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-archive-large-img-wrap { width: 100%; display: block; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); position: relative; }
.eco-archive-large-img-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.5s; }
.eco-archive-large:hover .eco-archive-large-img-wrap img { transform: scale(1.05); }
.eco-archive-large-content { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 4px; }
.eco-archive-meta { color: var(--primary-color); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; display: block; }
.eco-archive-large-content a { display: block; width: 100%; text-decoration: none; }
.eco-archive-large-title { color: var(--primary-light); font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; transition: color 0.3s; }
.eco-archive-large:hover .eco-archive-large-title { color: var(--accent-hover); }
.eco-archive-excerpt { font-size: 13px; color: var(--text-light); line-height: 1.6; margin: 0; }
.eco-archive-small { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--bg-light); padding-bottom: 16px; margin-bottom: 16px; width: 100%; min-width: 0; overflow: hidden; }
.eco-archive-small:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.eco-archive-small-img-wrap { flex-shrink: 0; width: 120px; display: block; overflow: hidden; border-radius: 2px; background-color: var(--bg-light); position: relative; }
@media (min-width: 768px) { .eco-archive-small-img-wrap { width: 200px; } }
.eco-archive-small-img-wrap img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s; }
@media (min-width: 768px) { .eco-archive-small-img-wrap img { aspect-ratio: 3/2; } }
.eco-archive-small:hover .eco-archive-small-img-wrap img { transform: scale(1.05); }
.eco-archive-small-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.eco-archive-small-content a { display: block; width: 100%; text-decoration: none; }
.eco-archive-small-title { color: var(--primary-light); font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
.eco-archive-small:hover .eco-archive-small-title { color: var(--accent-hover); }
.eco-archive-slider-wrap { background: transparent; border: none; padding: 0; border-radius: 0; border-bottom: 1px solid var(--bg-light); margin-bottom: 32px; margin-top: 8px; padding-bottom: 24px; }
.eco-archive-slider-wrap .eco-slider-btn { top: 35%; }
.eco-archive-empty { background-color: var(--bg-light); border: 1px solid var(--border-color); padding: 16px; text-align: center; border-radius: 2px; width: 100%; }
.eco-archive-empty i { color: var(--border-color); font-size: 20px; margin-bottom: 12px; display: block; }
.eco-archive-empty h3 { color: var(--primary-light); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.eco-archive-empty p { font-size: 12px; color: var(--text-light); }
.eco-pagination-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); width: 100%; overflow: hidden; }
.archive-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.archive-pagination a, .archive-pagination span { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 2px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; transition: all 0.2s ease; text-decoration: none; }
.archive-pagination a:hover { border-color: var(--primary-color); color: var(--primary-color); background-color: var(--bg-light); }
.archive-pagination .current { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.archive-pagination .dots { border: none; background: transparent; color: var(--text-light); }

/* ==========================================================================
   18. SINGLE POST
   ========================================================================== */
.eco-single-wrapper { position: relative; width: 100%; max-width: 100%; overflow-x: hidden !important; background-color: var(--bg-light); min-height: 100vh; display: flex; flex-direction: column; z-index: 20; box-sizing: border-box; }
.eco-single-main { flex: 1; min-width: 0 !important; width: 100%; max-width: 980px; background-color: var(--white); border: none; padding: 24px 16px; height: fit-content; box-sizing: border-box; overflow-x: hidden; }
@media (min-width: 768px) { .eco-single-main { border: 1px solid var(--border-color); padding: 40px; } }
.eco-single-grid { display: flex; flex-direction: column; gap: 32px; height: 100%; min-width: 0; width: 100%; }
@media (min-width: 1024px) { .eco-single-grid { flex-direction: row; gap: 40px; } }
.eco-single-content-col { flex: 1; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }

/* FEATURED IMAGE */
.eco-single-feat-wrap { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; transform: none !important; margin-top: 0 !important; margin-bottom: 24px !important; }
.eco-single-feat-img { width: 100% !important; overflow: hidden; }
.eco-single-feat-img img { width: 100% !important; height: auto !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; }
.eco-single-caption { display: block; text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-light); font-style: italic; padding: 0 16px !important; }
@media (min-width: 768px) { .eco-single-feat-wrap { width: 100% !important; max-width: 100% !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 40px !important; } .eco-single-caption { padding: 0 !important; } }

/* TYPOGRAPHY */
.entry-content, .entry-content * { max-width: 100% !important; box-sizing: border-box; }
.entry-content { font-family: 'Merriweather', serif; font-size: 0.95rem; line-height: 1.75; color: var(--text-main); word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; width: 100%; }
.entry-content pre, .entry-content code, table.wp-block-table { white-space: pre-wrap; word-wrap: break-word; max-width: 100% !important; overflow-x: auto !important; }
.entry-content p { margin-bottom: 1.5rem; font-weight: 400; }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--primary-color); margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.4; letter-spacing: -0.01em; position: relative; padding-bottom: 0.5rem; }
.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.25rem; }
.entry-content h2::after, .entry-content h3::after, .entry-content h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(to right, var(--primary-light), var(--border-color), transparent); }
.entry-content ul { list-style-type: none; padding-left: 0; margin-bottom: 1.5rem; }
.entry-content ol { list-style-type: decimal; padding-left: 1.25rem; margin-bottom: 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; position: relative; }
.entry-content ul li { padding-left: 1.25rem; }
.entry-content ul li::before { content: "■"; color: var(--accent-color); font-size: 0.6em; display: inline-block; width: 1em; position: absolute; left: 0; top: 0.5em; }
.entry-content blockquote { position: relative; margin: 3rem 0; padding: 0.5rem 0 0.5rem 1.5rem; background: transparent; border-left: 1px solid var(--border-color); font-family: 'Playfair Display', 'Merriweather', serif; font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--primary-light); }
.entry-content blockquote::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 0.75rem; width: 28px; height: 28px; border-radius: 50%; left: -14px; background-color: var(--bg-light); color: var(--primary-color); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); }
.entry-content blockquote p { margin-bottom: 0.75rem; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img, .entry-content video { max-width: 100% !important; height: auto !important; margin: 2rem auto .5rem; display: block; border: 1px solid var(--border-color); }
.entry-content iframe:not([id*="google_ads"]):not([title*="3rd party ad content"]) { max-width: 100% !important; height: auto !important; margin: 2rem auto 1rem; display: block; border: 1px solid var(--border-color); }
.wp-caption-text, .entry-content figcaption { text-align: center; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-light); font-style: italic; margin-bottom: 2rem; display: block; }
.entry-content a { color: var(--primary-color); text-decoration: underline; text-decoration-color: rgba(15, 23, 42, 0.3); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: all 0.3s ease; font-weight: 600; }
.entry-content a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); background-color: rgba(15, 23, 42, 0.05); }

/* PARALLAX */
.parallax-post { display: block; height: 600px; margin: 1rem auto; position: relative; background-color: transparent; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); width: 100%; clear: both; }
.prlx1 { clip: rect(0, auto, auto, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; }
.prlx2 { position: fixed; top: 6.25rem; transform: translateX(-50%); display: inline-block; z-index: 1; }
@media (min-width: 768px) { .parallax-post { margin: 3rem auto; } .prlx2 { top: 6.75rem; } }
body.is-edge .prlx2 { top: 4.5rem; }
@media (min-width: 768px) { body.is-edge .prlx2 { top: 2.5rem; } }
body.is-edge.admin-bar .prlx2 { top: calc(4.5rem + 46px); }
@media (min-width: 768px) { body.is-edge.admin-bar .prlx2 { top: calc(5rem + 32px); } }
.eco-ad-parallax-inner { min-width: 300px; min-height: 600px; display: block; margin: 0 auto; background-color: var(--white); }
.eco-ad-infeed-inline { clear: both; min-height: 60px; text-align: center; display: flex; justify-content: center; margin: 1rem 0; width: 100%; }

/* INJECTED RELATED POSTS */
.eco-related-inline { padding: 20px 0; margin: 32px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); clear: both; }
.eco-related-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 16px; margin-top: 4px; position: relative; }
.eco-related-title { font-size: 11px; font-weight: 700; color: var(--primary-light); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; position: relative; z-index: 10; font-family: 'Inter', sans-serif; }
.eco-related-header i { color: var(--text-light); font-size: 10px; position: relative; z-index: 10; }
.eco-related-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(to right, var(--primary-color), var(--border-color), transparent); }
.eco-related-list { display: flex; flex-direction: column; margin: 0; }
.eco-related-item { display: flex; align-items: center; gap: 12px; text-decoration: none !important; background-color: transparent !important; transition: none; }
@media (min-width: 640px) { .eco-related-item { gap: 16px; } }
.eco-related-item.has-border { border-bottom: 1px solid var(--border-color); padding-bottom: 14px; margin-bottom: 14px; }
.eco-related-thumb { width: 96px; aspect-ratio: 16/9; flex-shrink: 0; overflow: hidden; background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: 2px; }
@media (min-width: 640px) { .eco-related-thumb { width: 112px; } }
.eco-related-thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border: none !important; transition: opacity 0.3s; }
.eco-related-item:hover .eco-related-thumb img { opacity: 0.8; }
.eco-related-text { flex: 1; min-width: 0; }
.eco-related-text h5 { font-size: 12px; font-weight: 700; color: var(--primary-light); line-height: 1.3; margin: 0; transition: color 0.3s; }
@media (min-width: 640px) { .eco-related-text h5 { font-size: 13px; } }
.eco-related-item:hover .eco-related-text h5 { color: var(--accent-hover); }

/* AUTHOR BIO & TAGS */
.eco-author-box { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-color); }
.eco-author-inner { display: flex; align-items: flex-start; gap: 16px; background-color: var(--bg-light); padding: 20px; border: 1px solid var(--bg-light); border-radius: 2px; }
@media (min-width: 640px) { .eco-author-inner { gap: 24px; padding: 24px; } }
.eco-author-avatar-wrap { flex-shrink: 0; margin-top: 4px; }
.eco-author-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); background-color: var(--white); object-fit: contain; padding: 6px; filter: grayscale(100%); transition: filter 0.5s; }
@media (min-width: 640px) { .eco-author-avatar { width: 80px; height: 80px; } }
.eco-author-inner:hover .eco-author-avatar { filter: grayscale(0%); }
.eco-author-info { flex: 1; text-align: left; min-width: 0; }
.eco-author-info h4 { font-size: 14px; font-weight: 700; color: var(--primary-light); margin-bottom: 4px; }
@media (min-width: 768px) { .eco-author-info h4 { font-size: 15px; } }
.eco-author-info p { font-size: 11px; color: var(--text-light); line-height: 1.6; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
@media (min-width: 768px) { .eco-author-info p { font-size: 12px; } }
.eco-author-info a { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: color 0.3s; margin-top: 4px; }
@media (min-width: 768px) { .eco-author-info a { font-size: 10px; } }
.eco-author-info a:hover { color: var(--accent-hover); }
.eco-single-tags-wrap { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.eco-single-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eco-single-tags a { border: 1px solid var(--border-color); color: var(--text-light); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; text-decoration: none; transition: all 0.3s; }
.eco-single-tags a:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* RECOMMENDED RESEARCH SLIDER */
.eco-recom-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-color); overflow: hidden; }
@media (min-width: 768px) { .eco-recom-section { margin-top: 48px; } }
.eco-recom-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-light); margin-bottom: 24px; font-family: 'Inter', sans-serif; }
.eco-recom-slider-wrap { position: relative; width: 100%; overflow: hidden; }
.eco-recom-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; }
@media (min-width: 768px) { .eco-recom-track { display: flex; flex-direction: row; gap: 0; transition: transform 0.7s ease-in-out; } }
.eco-recom-item { width: 100%; flex-shrink: 0; }
@media (min-width: 768px) { .eco-recom-item { width: 50%; padding: 0 12px; margin-bottom: 0; } }
@media (min-width: 1024px) { .eco-recom-item { width: 33.3333%; } }
.eco-recom-item.hero { grid-column: span 2; margin-bottom: 8px; }
@media (min-width: 768px) { .eco-recom-item.hero { padding-left: 0; margin-bottom: 0; } }
.eco-recom-item a { display: flex; flex-direction: column; text-decoration: none; background-color: transparent !important; }
.eco-recom-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--border-color); background-color: var(--bg-light); margin-bottom: 8px; border-radius: 2px; }
.eco-recom-item.hero .eco-recom-img-wrap { margin-bottom: 10px; }
.eco-recom-img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: none; transition: opacity 0.3s; }
.eco-recom-item:hover .eco-recom-img { opacity: 0.9; }
.eco-recom-text { flex: 1; min-width: 0; }
.eco-recom-item-title { font-size: 11px; font-weight: 600; color: var(--primary-light); line-height: 1.3; margin-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; transition: color 0.3s; }
@media (min-width: 640px) { .eco-recom-item-title { font-size: 12px; } }
@media (min-width: 768px) { .eco-recom-item-title { font-size: 13px; } }
.eco-recom-item.hero .eco-recom-item-title { font-size: 13px; font-weight: 700; }
.eco-recom-item:hover .eco-recom-item-title { color: var(--accent-hover); }
.eco-recom-meta { font-size: 9px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; display: block; font-family: 'Inter', sans-serif; }

.eco-single-header { margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; }
@media (min-width: 768px) { .eco-single-header { margin-bottom: 32px; padding-bottom: 24px; } }
.eco-single-cat { color: var(--primary-color); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; display: block; margin-bottom: 16px; text-decoration: none; }
.eco-single-cat:hover { color: var(--accent-hover); }
.eco-single-title { color: var(--primary-color); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin-bottom: 1rem; word-break: break-word; }
@media (min-width: 768px) { .eco-single-title { font-size:2.25rem; line-height: 2.5rem;margin-bottom: 1.25rem; } }
.eco-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-light); font-size: 10px; text-transform: uppercase; }
.eco-meta-slash { color: var(--border-color); }
.eco-meta-views { color: var(--primary-color); font-weight: 700; }
.eco-meta-views i { margin-right: 4px; }

/* SIDEBAR KHUSUS SINGLE POST */
.single-sidebar { width: 100%; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .single-sidebar { width: 280px; } }
.eco-widget-ad-border { margin-bottom: 32px; width: 100%; display: flex; justify-content: center; padding-bottom: 16px; border-bottom: 1px solid var(--bg-light); }
@media (min-width: 1024px) { .eco-widget-ad-border { padding-bottom: 8px; } }
.eco-widget-data { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--bg-light); }
.eco-widget-data a { display: block; text-decoration: none; }
.eco-data-img-wrap { width: 100%; aspect-ratio: 16/9; background-color: var(--bg-light); margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border-color); }
.eco-data-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.eco-widget-data a:hover .eco-data-img-wrap img { transform: scale(1.05); }
.eco-data-title { font-size: 12px; font-weight: 700; color: var(--primary-light); line-height: 1.3; margin-bottom: 4px; transition: color 0.3s; }
@media (min-width: 768px) { .eco-data-title { font-size: 13px; } }
.eco-widget-data a:hover .eco-data-title { color: var(--accent-hover); }
.eco-data-desc { font-size: 10px; color: var(--text-light); margin-bottom: 8px; line-height: 1.6; }
.eco-data-link { font-size: 9px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.1em; }
.eco-widget-data a:hover .eco-data-link { text-decoration: underline; color: var(--accent-hover); }
.single-network { margin-bottom: 32px; padding-bottom: 8px; border: none; border-bottom: 1px solid var(--bg-light); }
.eco-widget-trending { margin-bottom: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--bg-light); }
.eco-trending-hero { padding-bottom: 16px; }
.eco-trending-hero a { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-decoration: none; }
.eco-trending-hero-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; background-color: var(--bg-light); border: 1px solid var(--border-color); }
.eco-trending-hero-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.eco-trending-hero:hover .eco-trending-hero-img img { opacity: 0.9; }
.eco-trending-hero-content { width: 100%; }
.eco-trending-hero-title { font-size: 12px; font-weight: 700; color: var(--primary-light); line-height: 1.3; transition: color 0.3s; margin-bottom: 6px; }
@media (min-width: 768px) { .eco-trending-hero-title { font-size: 13px; } }
.eco-trending-hero:hover .eco-trending-hero-title { color: var(--accent-hover); }
.eco-trending-hero-meta { display: flex; align-items: center; justify-content: space-between; font-size: 8.5px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; width: 100%; }
.eco-trending-hero-meta .author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; font-weight: 500; color: var(--text-light); }
.eco-trending-hero-meta .date { flex-shrink: 0; }
.eco-trending-content.no-border { border-bottom: none; padding-bottom: 0; }
.eco-widget-cloud { margin-bottom: 32px; }
.eco-cloud-mini-list { display: flex; flex-direction: column; }

/* ==========================================================================
   AD PARALLAX TOP (STRUKTUR MURNI CSS & ANIMASI)
   ========================================================================== */
#page, .site-header, .site-content { position: relative; z-index: 100; background-color: var(--white); }
#page, #content, #primary, .site-content, .site-main, main { position: relative !important; z-index: 40 !important; background-color: var(--white) !important; }
#div-gpt-ad-parallax-top-wrapper { position: relative; width: 100%; overflow: hidden; background-color: #000000; z-index: 1; transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
#ciptadesa-top-bar { position: fixed; top: 0; left: 0; width: 100%; height: 25px; background-color: #000000; z-index: 50; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
#ciptadesa-top-inner { width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; max-width: 300px; }
#close-parallax-text { color: var(--white); font-family: sans-serif; font-size: 9px; cursor: pointer; padding: 0 8px; }
#ciptadesa-ad-slot { position: fixed; top: 25px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 1; display: flex; justify-content: center; }
#div-gpt-ad-parallax-top { width: 100%; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
#parallax-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background-color: rgba(30, 41, 59, 0.9); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: 0.1em; z-index: 10; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }

@media (min-width: 1024px) {
    #ciptadesa-top-inner { max-width: 970px; }
    #div-gpt-ad-parallax-top-wrapper { height: 300px !important; }
    div#div-gpt-ad-parallax-top { height: 250px !important; max-width: 970px !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; }
    div#div-gpt-ad-parallax-top > div, div#div-gpt-ad-parallax-top iframe { margin: 0 auto !important; display: block !important; }
}
@media (max-width: 1023px) {
    #div-gpt-ad-parallax-top-wrapper { height: 650px; }
    #div-gpt-ad-parallax-top { height: 600px; }
}

#div-gpt-ad-parallax-top-wrapper.hide-parallax-ad { height: 0 !important; }
#div-gpt-ad-parallax-top-wrapper.hide-parallax-ad #ciptadesa-top-bar,
#div-gpt-ad-parallax-top-wrapper.hide-parallax-ad #div-gpt-ad-parallax-top,
#div-gpt-ad-parallax-top-wrapper.hide-parallax-ad #parallax-bottom-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }