/*
 Nuba-Theme custom CSS
 Put your Ledger design conversion here.
*/

.ledger-container {
    width: 100%;
}


/* ================= VARIABLES & THEME ================= */
        :root {
            --bg-color: #f4f4f4;
            --surface-color: #ffffff;
            --text-main: #111111;
            --text-muted: #666666;
            --accent-green: #008f11;
            --border-color: #d0d0d0;
            --font-sans: 'Helvetica Neue', Arial, sans-serif;
            --font-mono: 'Courier New', Courier, monospace;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        [data-theme="dark"] {
            --bg-color: #050505;
            --surface-color: #0a0a0a;
            --text-main: #f0f0f0;
            --text-muted: #888888;
            --accent-green: #00ff41; /* Matrix/Ledger Green */
            --border-color: #222222;
        }

        /* ================= GLOBAL RESET ================= */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: var(--font-sans); background-color: var(--bg-color);
            color: var(--text-main); line-height: 1.6; transition: var(--transition);
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button { border: none; background: none; cursor: pointer; color: inherit; }
        
        .ledger-border-bottom { border-bottom: 1px solid var(--border-color); }
        .ledger-border-right { border-right: 1px solid var(--border-color); }

        /* ================= HEADER ================= */
        header {
            position: relative; background: var(--surface-color); z-index: 100;
        }
        .header-container {
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 2rem; height: 70px;
        }
        
        /* Row A: Logo */
        .logo { font-family: var(--font-mono); font-size: 1.5rem; font-weight: bold; letter-spacing: -1px;}
        .logo span { color: var(--accent-green); }

        /* Row B: Menu (Desktop) */
        .main-menu { display: flex; gap: 2rem; font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;}
        .main-menu li { position: relative; padding: 25px 0; }
        .main-menu li:hover > a { color: var(--accent-green); }
        
        /* Submenus (Desktop Hover) */
        .dropdown { position: absolute; top: 100%; left: 0; background: var(--surface-color); border: 1px solid var(--border-color); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); z-index: 10; }
        .main-menu li:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown li { padding: 0; border-bottom: 1px solid var(--border-color); }
        .dropdown li:last-child { border-bottom: none; }
        .dropdown a { display: block; padding: 10px 15px; text-transform: capitalize; font-size: 0.85rem;}
        .dropdown a:hover { background: var(--accent-green); color: #000; }
        
        /* Level 3 Submenu */
        .has-submenu { position: relative; }
        .submenu-l3 { position: absolute; top: -1px; left: 100%; background: var(--surface-color); border: 1px solid var(--border-color); min-width: 200px; opacity: 0; visibility: hidden; transition: var(--transition); }
        .has-submenu:hover > .submenu-l3 { opacity: 1; visibility: visible; }

        /* Row C: Actions */
        .header-actions { display: flex; align-items: center; gap: 1.5rem; }
        .theme-toggle { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 20px; }
        .theme-toggle:hover { border-color: var(--accent-green); color: var(--accent-green); }
        .search-btn { font-weight: bold; font-family: var(--font-mono); }
        
        /* Hamburger Button */
        .hamburger { display: none; font-size: 1.8rem; width: 30px; text-align: center; line-height: 1; z-index: 110; }

        /* ================= HERO ================= */
        .hero-section {
            display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-color); min-height: 70vh;
        }
        .hero-left {
            padding: 4rem; display: flex; flex-direction: column; justify-content: center; position: relative;
        }
        .hero-label {
            font-family: var(--font-mono); color: var(--accent-green); text-transform: uppercase; margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 2px;
        }
        .hero-title { font-size: 3rem; line-height: 1.1; margin-bottom: 1.5rem; font-weight: 800; }
        .hero-excerpt { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; max-width: 90%; }
        
        .read-more {
            display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: bold; font-size: 0.9rem; text-transform: uppercase; color: var(--text-main);
        }
        .arrow-line { display: inline-block; width: 30px; height: 2px; background-color: var(--text-main); transition: width 0.4s ease; position: relative; }
        .arrow-line::after { content: ''; position: absolute; right: 0; top: -4px; border: solid var(--text-main); border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); }
        .read-more:hover .arrow-line { width: 70px; background-color: var(--accent-green); }
        .read-more:hover .arrow-line::after { border-color: var(--accent-green); }
        .read-more:hover { color: var(--accent-green); }

        .hero-nav { margin-top: auto; padding-top: 3rem; display: flex; gap: 1rem; }
        .nav-arrow { width: 50px; height: 50px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
        .nav-arrow:hover { background: var(--accent-green); color: #000; border-color: var(--accent-green); }

.hero-right {
    background-color: var(--border-color);
    overflow: hidden;
    position: relative;

    height: 70vh;
    min-height: 500px;
}


.hero-thumb { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); transition: filter 0.5s; }
        .hero-right:hover .hero-thumb { filter: grayscale(0%); }

        /* ================= TICKER ================= */
        .ticker-wrap {
            display: flex; background: var(--accent-green); color: #000; height: 40px; align-items: center; overflow: hidden; font-family: var(--font-mono); font-size: 0.85rem; font-weight: bold; text-transform: uppercase;
        }
        .ticker-label {
            padding: 0 2rem; background: #000; color: var(--accent-green); height: 100%; display: flex; align-items: center; z-index: 2; border-right: 1px solid var(--accent-green);
        }
        .ticker-content { white-space: nowrap; animation: ticker 25s linear infinite; padding-left: 100%; }
        .ticker-item { margin-right: 3rem; display: inline-block; }
        @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        /* ================= LIST ARTICLE (LEDGER GRID) ================= */
        .ledger-container {
            display: grid; grid-template-columns: 250px 1fr 300px; background: var(--bg-color); max-width: 1600px; margin: 0 auto;
        }
        .col { background: var(--surface-color); }
        
        /* Row/Col A */
        .col-a { padding: 2rem; }
        .sticky-wrapper { position: sticky; top: 2rem; }
        .section-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
        .nav-vertical { display: flex; flex-direction: column; }
        .nav-vertical a { padding: 1rem 0; border-bottom: 1px solid var(--border-color); font-weight: 500; display: block; transition: var(--transition); }
        .nav-vertical a:hover { color: var(--accent-green); padding-left: 10px; }

        /* Row/Col B */
        .col-b { padding: 2rem; }
        .filter-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 2rem; }
        .filter-dropdown select { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-mono); padding: 5px 10px; outline: none; }

        .article-item { border-bottom: 1px solid var(--border-color); padding: 2rem 0; transition: var(--transition); }
        .art-meta-top { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-green); margin-bottom: 0.5rem; text-transform: uppercase; }
        .art-title { font-size: 1.8rem; font-weight: bold; margin-bottom: 1rem; cursor: pointer; transition: color 0.3s; }
        .art-meta-bottom { display: flex; gap: 1.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }
        
        /* Hover Expansion Area */
        .art-expanded { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, margin 0.5s ease; opacity: 0; display: grid; grid-template-rows: auto auto; gap: 1rem; }
        .art-expanded img { width: 100%; height: 200px; object-fit: cover; filter: grayscale(100%); }
        .art-expanded p { font-size: 0.95rem; color: var(--text-muted); }
        
        .article-item:hover .art-title { color: var(--accent-green); }
        .article-item:hover .art-expanded { max-height: 400px; margin-top: 1.5rem; opacity: 1; }
        .article-item:hover .art-expanded img { filter: grayscale(0%); transition: filter 0.5s; }

        .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; font-family: var(--font-mono); }
        .pagination span, .pagination a { padding: 8px 15px; border: 1px solid var(--border-color); transition: var(--transition); }
        .pagination a:hover, .pagination .active { background: var(--accent-green); color: #000; border-color: var(--accent-green); }

        /* Row/Col C */
        .col-c { padding: 2rem; }
        .social-list { margin-bottom: 3rem; }
        .social-item { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border-color); font-family: var(--font-mono); font-size: 0.85rem; }
        .social-item:hover { color: var(--accent-green); }
        .ad-banner { width: 100%; height: 300px; background: var(--border-color); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--text-muted); border: 1px dashed var(--text-muted); }

        /* ================= FOOTER ================= */
        footer { background: var(--surface-color); border-top: 1px solid var(--border-color); padding: 4rem 2rem 2rem; font-family: var(--font-mono); font-size: 0.85rem; }
        .footer-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; max-width: 1600px; margin: 0 auto; margin-bottom: 3rem; }
        .foot-desc { color: var(--text-muted); margin-top: 1rem; max-width: 80%; }
        .foot-menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .foot-menu a:hover { color: var(--accent-green); }
        .copyright { text-align: center; border-top: 1px solid var(--border-color); padding-top: 2rem; color: var(--text-muted); }

        /* ================= POPUP SEARCH ================= */
        .search-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(5px); }
        .search-popup.active { opacity: 1; visibility: visible; }
        .close-search { position: absolute; top: 2rem; right: 3rem; font-size: 2rem; color: #fff; cursor: pointer; }
        .search-box { width: 60%; position: relative; }
        .search-box input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--accent-green); font-size: 3rem; color: #fff; padding: 10px 0; outline: none; font-family: var(--font-sans); }
        .popular-keywords { margin-top: 2rem; color: #888; font-family: var(--font-mono); }
        .popular-keywords span { display: inline-block; margin-right: 15px; border: 1px solid #333; padding: 5px 15px; border-radius: 20px; cursor: pointer; margin-top: 10px;}
        .popular-keywords span:hover { border-color: var(--accent-green); color: var(--accent-green); }

        /* ================= RESPONSIVE & MOBILE MENU ================= */
        @media (max-width: 1024px) {
            .ledger-container { grid-template-columns: 1fr; }
            .col-a, .col-c { border-right: none; border-bottom: 1px solid var(--border-color); }
            .sticky-wrapper { position: static; }
            .footer-grid { grid-template-columns: 1fr; text-align: center; }
            .foot-desc { max-width: 100%; margin: 1rem auto; }
            .search-box { width: 90%; }
        }

        @media (max-width: 768px) {
            .header-container { padding: 0 1rem; }
            .hamburger { display: block; }
            
            /* Transformasi Main Menu menjadi Drawer Mobile bergaya Ledger */
            .main-menu {
                display: none; 
                flex-direction: column;
                position: absolute;
                top: 70px; /* Tepat di bawah header */
                left: 0;
                width: 100%;
                background: var(--surface-color);
                border-bottom: 2px solid var(--accent-green);
                gap: 0;
                padding: 0;
                z-index: 105;
                max-height: calc(100vh - 70px);
                overflow-y: auto;
            }
            
            /* Trigger Menu Aktif */
            .main-menu.mobile-active { display: flex; }

            .main-menu li {
                width: 100%;
                padding: 0;
                border-bottom: 1px solid var(--border-color);
            }
            .main-menu li > a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px;
                font-family: var(--font-mono);
            }

            /* Reset & Redesain Dropdown untuk Mobile (Accordion) */
            .dropdown, .submenu-l3 {
                position: static;
                width: 100%;
                background: var(--bg-color);
                border: none;
                border-top: 1px solid var(--border-color);
                max-height: 0;
                opacity: 1;
                visibility: visible;
                overflow: hidden;
                transform: none;
                transition: max-height 0.3s ease-out;
            }
            
            /* Class bantu saat sub-menu dibuka via JS */
            .dropdown.open, .submenu-l3.open {
                max-height: 500px; /* memberikan ruang expand */
            }

            .dropdown a { padding: 12px 30px; }
            .submenu-l3 a { padding: 12px 45px; }

            /* Mobile Hero Layout Adjustment */
            .hero-section { display: flex; flex-direction: column; min-height: auto; }
            .hero-left { padding: 2rem 1rem; order: 1; }
            .hero-right { order: 2; height: 300px; }
            
            .mobile-hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
            .hero-label { margin-bottom: 0; }
            .hero-nav { margin-top: 0; padding-top: 0; }
            .hero-title { font-size: 2rem; }
            .hero-excerpt { max-width: 100%; font-size: 1rem; }
        }