body{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
    *,*::before,*::after{transition:background-color .25s ease,color .2s ease,border-color .25s ease}

    /* DARK MODE */
    html.dark body{background-color:#0b1120!important;color:#e2e8f0!important}
    html.dark .bg-white{background-color:#1e293b!important}
    html.dark .bg-gray-50{background-color:#0f172a!important}
    html.dark .bg-gray-100{background-color:#1e293b!important}
    html.dark nav.main-nav{background-color:#0c1f35!important}
    html.dark header{background-color:#1e293b!important;border-color:#334155!important}
    html.dark .border-gray-100,html.dark .border-gray-200{border-color:#334155!important}
    html.dark .text-gray-800{color:#e2e8f0!important}
    html.dark .text-gray-700{color:#cbd5e1!important}
    html.dark .text-gray-600{color:#94a3b8!important}
    html.dark .text-gray-500{color:#94a3b8!important}
    html.dark .text-gray-400{color:#64748b!important}
    html.dark .hover\:bg-gray-50:hover{background-color:#334155!important}
    html.dark .shadow-sm{box-shadow:0 2px 8px rgba(0,0,0,.5)!important}
    html.dark .card-article{background-color:#1e293b!important;border-color:#334155!important}
    html.dark .sidebar-box{background-color:#1e293b!important;border-color:#334155!important}
    html.dark .breaking-bar{background-color:#1e293b!important;border-color:#334155!important}
    html.dark .dropdown-menu{background-color:#1e293b!important;border-color:#334155!important;box-shadow:0 16px 48px rgba(0,0,0,.6)!important}
    html.dark .dropdown-menu a{color:#cbd5e1!important}
    html.dark .dropdown-menu a:hover{background-color:#334155!important;color:#93c5fd!important}
    html.dark #mobileNav{background-color:#0c1f35!important}
    html.dark input[type="text"],html.dark input[type="search"],html.dark input[type="email"]{background-color:#1e293b!important;color:#e2e8f0!important;border-color:#334155!important}
    html.dark input::placeholder{color:#64748b!important}

    /* TICKER */
    .ticker-wrap{overflow:hidden}
    .ticker-track{display:flex;animation:ticker 38s linear infinite;white-space:nowrap}
    .ticker-track:hover{animation-play-state:paused}
    @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

    /* DROPDOWN */
    .nav-item .dropdown-menu{display:none}
    .nav-item:hover .dropdown-menu{display:block}
    .nav-mobile{display:none}
    .nav-mobile.open{display:flex}

    /* PROGRESS */
    #readProgress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#f59e0b,#dc2626);z-index:9999;width:0%;transition:width .1s}

    /* TOGGLE */
    #themeToggle{width:40px;height:22px;background:#e2e8f0;border-radius:999px;position:relative;cursor:pointer;border:none;flex-shrink:0}
    html.dark #themeToggle{background:#3b82f6}
    #themeToggle::before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:white;border-radius:50%;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,.25)}
    html.dark #themeToggle::before{transform:translateX(18px)}

    /* CATEGORY BADGES */
    .badge-politik{background:#dbeafe;color:#1e40af}
    .badge-ekonomi{background:#dcfce7;color:#166534}
    .badge-olahraga{background:#fce7f3;color:#9d174d}
    .badge-teknologi{background:#f3e8ff;color:#6b21a8}
    .badge-hukum{background:#fee2e2;color:#991b1b}
    .badge-lifestyle{background:#fef9c3;color:#854d0e}
    .badge-pendidikan{background:#e0f2fe;color:#075985}
    .badge-kesehatan{background:#d1fae5;color:#065f46}
    .badge-kota{background:#fff7ed;color:#9a3412}
    html.dark .badge-politik{background:#1e3a5f;color:#93c5fd}
    html.dark .badge-ekonomi{background:#14532d;color:#86efac}
    html.dark .badge-olahraga{background:#4a044e;color:#f9a8d4}
    html.dark .badge-teknologi{background:#3b0764;color:#d8b4fe}
    html.dark .badge-pendidikan{background:#0c4a6e;color:#7dd3fc}
    html.dark .badge-kesehatan{background:#064e3b;color:#6ee7b7}
    html.dark .badge-kota{background:#431407;color:#fed7aa}

    /* KOTA TAB */
    .kota-tab.active{background:#122848;color:white;border-color:#122848}
    html.dark .kota-tab.active{background:#3b82f6;border-color:#3b82f6}

    /* IMG ZOOM */
    .img-zoom{overflow:hidden}
    .img-zoom img{transition:transform .5s ease}
    .img-zoom:hover img{transform:scale(1.05)}

    /* SCROLL TOP */
    #scrollTop{opacity:0;pointer-events:none;transition:opacity .3s}
    #scrollTop.show{opacity:1;pointer-events:all}