/*
Theme Name: purAIkerto
Theme URI: https://puraikerto.my.id
Author: purAIkerto Team
Author URI: https://puraikerto.my.id
Description: Theme berita dan tutorial AI untuk Purwokerto & Kabupaten Banyumas. Desain modern dengan dark mode, animasi interaktif, dan layout responsif.
Version: 1.0.9
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puraikerto
Tags: news, blog, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, two-columns, wide-blocks

purAIkerto WordPress Theme, (C) 2024 purAIkerto Team
License: GNU General Public License v2 or later
*/



        :root {
            --g-blue: #4285F4; --g-red: #EA4335; --g-yellow: #FBBC05; --g-green: #34A853;
            --surface: #FFFFFF; --surface-variant: #F8F9FF; --surface-container: #F1F3FF;
            --surface-container-high: #E8EAFC; --surface-tint: #EEF0FF;
            --on-surface: #1A1B1E; --on-surface-variant: #44464F;
            --outline: #76777F; --outline-variant: #C6C6CF;
            --primary: #4285F4; --primary-container: #D8E3FF; --on-primary: #FFFFFF; --on-primary-container: #001649;
            --secondary: #34A853; --secondary-container: #CEFACE; --on-secondary-container: #002105;
            --tertiary: #EA4335; --tertiary-container: #FFD9D6;
            --accent: #FBBC05; --accent-container: #FFF0B3;
            --shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
            --shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
            --shadow-3: 0 8px 28px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
            --shadow-hover: 0 16px 40px rgba(66,133,244,0.18), 0 4px 12px rgba(0,0,0,0.06);
            --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 100px;
            --transition: all 0.28s cubic-bezier(0.2, 0, 0, 1);
            --theme-transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }
        [data-theme="dark"] {
            --surface: #0F1115; --surface-variant: #16181E; --surface-container: #1E2028; --surface-container-high: #272A34; --surface-tint: #1A1D26;
            --on-surface: #E8E9F0; --on-surface-variant: #A0A3B1; --outline: #4A4D5A; --outline-variant: #2D303A;
            --primary: #5B9BF4; --primary-container: #1A3A6B; --on-primary: #FFFFFF; --on-primary-container: #D8E3FF;
            --secondary: #4DBE6E; --secondary-container: #1A4A2A; --on-secondary-container: #CEFACE;
            --tertiary: #F06B5F; --tertiary-container: #5A1A15;
            --accent: #F9C846; --accent-container: #5A4500;
            --shadow-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
            --shadow-2: 0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
            --shadow-3: 0 8px 28px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
            --shadow-hover: 0 16px 40px rgba(66,133,244,0.25), 0 4px 12px rgba(0,0,0,0.4);
        }
        a { color: #1a56db; }
        [data-theme=dark] a { color: #22d3ee; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--surface); color: var(--on-surface); line-height: 1.6;
            overflow-x: hidden; -webkit-font-smoothing: antialiased;
            transition: var(--theme-transition); cursor: none;
        }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--surface-variant); }
        ::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--outline); }
        ::selection { background: var(--primary-container); color: var(--on-primary-container); }

        /* ========== CUSTOM CURSOR ========== */
        .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
        .cursor-dot { width: 8px; height: 8px; background: var(--primary); }
        .cursor-ring { width: 36px; height: 36px; border: 2px solid var(--primary); opacity: 0.5; transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.2s; }
        body:hover .cursor-ring.hovered { width: 56px; height: 56px; opacity: 0.25; border-color: var(--g-yellow); }
        body:hover .cursor-dot.hovered { background: var(--g-yellow); width: 12px; height: 12px; }
        @media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } body { cursor: auto; } }

        /* ========== CURSOR TRAIL ========== */
        .cursor-trail { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 99998; opacity: 0.6; }

        /* ========== READING PROGRESS ========== */
        .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green)); z-index: 10001; width: 0%; transition: width 0.1s linear; }

        /* ========== MARQUEE TICKER ========== */
        .ticker-wrap { position: fixed; top: 64px; left: 0; right: 0; background: var(--surface-container); border-bottom: 1px solid var(--outline-variant); overflow: hidden; z-index: 999; height: 32px; display: flex; align-items: center; transition: var(--theme-transition); }
        .ticker { display: flex; white-space: nowrap; animation: ticker-scroll 30s linear infinite; }
        .ticker-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 2rem; font-size: 0.78rem; color: var(--on-surface-variant); font-weight: 500; }
        .ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .ticker-item .ticker-label { font-weight: 700; }
        @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .ticker-wrap:hover .ticker { animation-play-state: paused; }

        /* ========== THEME TOGGLE ========== */
        .theme-toggle { width: 48px; height: 26px; border-radius: 13px; background: var(--surface-container-high); border: 1.5px solid var(--outline-variant); position: relative; cursor: pointer; transition: var(--transition); flex-shrink: 0; }
        .theme-toggle:hover { border-color: var(--primary); }
        .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; box-shadow: 0 2px 6px rgba(66,133,244,0.4); }
        [data-theme="dark"] .theme-toggle-knob { transform: translateX(22px); background: var(--g-yellow); color: #333; box-shadow: 0 2px 6px rgba(251,188,5,0.4); }

        /* ========== NAVBAR ========== */
        .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border-bottom: 1px solid var(--outline-variant); transition: var(--theme-transition); }
        [data-theme="dark"] .navbar { background: rgba(15,17,21,0.85); }
        .navbar.scrolled { box-shadow: var(--shadow-2); }
        .nav-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 64px; }
        .logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--on-surface); transition: var(--theme-transition); }
        .logo-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; font-weight: 500; font-size: 1rem; color: white; background: linear-gradient(135deg, var(--g-blue) 0%, #5B9BF4 100%); box-shadow: 0 2px 8px rgba(66,133,244,0.35); position: relative; overflow: hidden; transition: transform 0.3s ease; }
        .logo:hover .logo-icon { transform: rotate(-8deg) scale(1.05); }
        .logo { display: flex; align-items: center; gap: 0.125rem; text-decoration: none; color: var(--on-surface); transition: var(--theme-transition); }
        .logo-text { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
        .logo-text .accent-g { color: var(--g-blue); }
        .logo-pur { color: #EA4335; }
        .logo-ai { color: #000000; }
        .logo-kerto { color: #EA4335; }
        [data-theme="dark"] .logo-pur { color: #EA4335; }
        [data-theme="dark"] .logo-ai { color: #FFFFFF; }
        [data-theme="dark"] .logo-kerto { color: #EA4335; }
        .nav-links { display: flex; gap: 0.25rem; list-style: none; }
        .nav-links a { color: var(--on-surface-variant); text-decoration: none; font-size: 0.88rem; font-weight: 500; padding: 0.5rem 0.875rem; border-radius: var(--radius-full); transition: var(--transition); position: relative; }
        .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: var(--primary); border-radius: 1px; transition: all 0.3s ease; transform: translateX(-50%); }
        .nav-links a:hover { background: var(--surface-container); color: var(--primary); }
        .nav-links a:hover::after { width: 40%; }
        .nav-cta { display: flex; align-items: center; gap: 0.75rem; }
        .mobile-search { display: none; }

        /* Search Expand */
        .search-wrap { position: relative; display: flex; align-items: center; }
        .search-input { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1.5px solid var(--outline-variant); background: var(--surface-container); color: var(--on-surface); font-family: inherit; font-size: 0.85rem; padding: 0 12px; outline: none; transition: all 0.4s cubic-bezier(0.2, 0, 0, 1); cursor: pointer; opacity: 0.7; }
        .search-input::placeholder { color: transparent; }
        .search-input:focus { width: 220px; cursor: text; opacity: 1; padding-left: 36px; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-container); }
        .search-input:focus::placeholder { color: var(--on-surface-variant); }
        .search-icon { position: absolute; left: 10px; background: transparent; border: 0; padding: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; color: var(--on-surface-variant); cursor: pointer; transition: color 0.3s; }
        .search-input:focus + .search-icon { color: var(--primary); }

        .btn { padding: 0.55rem 1.25rem; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; border: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; position: relative; overflow: hidden; }
        .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.2) 100%); opacity: 0; transition: opacity 0.3s ease; }
        .btn:hover::before { opacity: 1; }
        .btn-ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--outline-variant); }
        .btn-ghost:hover { background: var(--primary-container); border-color: var(--primary); transform: translateY(-1px); }
        .btn-filled { background: linear-gradient(135deg, var(--g-blue) 0%, #3574DE 100%); color: white; box-shadow: 0 2px 8px rgba(66,133,244,0.3); }
        .btn-filled:hover { background: linear-gradient(135deg, #3574DE 0%, var(--g-blue) 100%); box-shadow: 0 4px 16px rgba(66,133,244,0.4); transform: translateY(-1px); }
        .mobile-menu-btn { display: none; background: none; border: none; color: var(--on-surface); cursor: pointer; padding: 0.5rem; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; }
        .burger-icon { font-size: 1.65rem; line-height: 1; font-weight: 700; display: inline-block; transform: translateY(-1px); }
        .mobile-menu-toggle { display: none; }

        /* ========== HERO ========== */
        .hero { min-height: auto; display: flex; align-items: flex-start; justify-content: center; padding: 0 1.5rem 3rem; position: relative; overflow: hidden; background: var(--surface); transition: var(--theme-transition); }
        .hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .shape { position: absolute; border-radius: 50%; }
        .shape-1 { width: 520px; height: 520px; background: radial-gradient(circle, var(--g-blue) 0%, transparent 70%); top: -120px; right: -80px; opacity: 0.08; filter: blur(60px); animation: float1 8s ease-in-out infinite; }
        .shape-2 { width: 380px; height: 380px; background: radial-gradient(circle, var(--g-green) 0%, transparent 70%); bottom: 0; left: -100px; opacity: 0.07; filter: blur(50px); animation: float2 10s ease-in-out infinite; }
        .shape-3 { width: 200px; height: 200px; background: radial-gradient(circle, var(--g-yellow) 0%, transparent 70%); top: 30%; left: 15%; opacity: 0.12; filter: blur(30px); animation: float3 7s ease-in-out infinite; }
        .hero-dots { position: absolute; top: 96px; right: 12%; display: grid; grid-template-columns: repeat(6, 14px); gap: 12px; opacity: 0.25; }
        .hero-dots span { width: 14px; height: 14px; border-radius: 50%; display: block; transition: transform 0.3s ease; }
        .hero-google-stripe { position: absolute; bottom: 0; left: -1.5rem; right: -1.5rem; height: 4px; background: linear-gradient(90deg, var(--g-blue) 0%, var(--g-blue) 25%, var(--g-red) 25%, var(--g-red) 50%, var(--g-yellow) 50%, var(--g-yellow) 75%, var(--g-green) 75%, var(--g-green) 100%); }
        @keyframes float1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,30px) scale(1.05);} }
        @keyframes float2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-20px) scale(1.05);} }
        @keyframes float3 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(15px,-15px);} }
        .hero-content { position: relative; z-index: 2; text-align: center; max-width: 860px; padding-top: 7rem; }
        .hero-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; background: var(--primary-container); color: var(--primary); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; margin-bottom: 2rem; letter-spacing: 0.01em; border: 1px solid rgba(66,133,244,0.15); backdrop-filter: blur(8px); }
        .chip-dot { width: 8px; height: 8px; background: var(--g-green); border-radius: 50%; animation: pulse-dot 2.5s ease-in-out infinite; }
        @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.8);} }
        .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 1.5rem; color: var(--on-surface); transition: var(--theme-transition); }
        .hero-title .word-ai { color: var(--g-blue); background: none; -webkit-background-clip: unset; -webkit-text-fill-color: initial; }
        .hero-title .word-purwokerto { position: relative; display: inline-block; }
        .hero-title .word-purwokerto::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 6px; background: var(--g-yellow); border-radius: 3px; z-index: -1; opacity: 0.7; }
        .hero-subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--on-surface-variant); max-width: 580px; margin: 0 auto 2.5rem; line-height: 1.75; min-height: 3.5rem; }
        .typing-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--primary); margin-left: 2px; animation: blink 0.8s step-end infinite; vertical-align: text-bottom; }
        @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
        .hero-cta { display: flex; gap: 0.875rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
        .hero-cta .btn { padding: 0.875rem 2rem; font-size: 1rem; }
        .btn-tonal { background: var(--surface-container-high); color: var(--on-surface); border: 1px solid var(--outline-variant); }
        .btn-tonal:hover { background: var(--primary-container); color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }

        /* Stats */
        .stats-row { display: flex; justify-content: center; gap: 1px; background: var(--outline-variant); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--outline-variant); max-width: 700px; margin: 0 auto; box-shadow: var(--shadow-1); }
        .stat-item { flex: 1; text-align: center; padding: 1.5rem 1rem; background: var(--surface); position: relative; transition: var(--theme-transition); }
        .stat-item:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
        .stat-item:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
        .stat-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
        .stat-item:nth-child(1)::before { background: var(--g-blue); }
        .stat-item:nth-child(2)::before { background: var(--g-red); }
        .stat-item:nth-child(3)::before { background: var(--g-yellow); }
        .stat-item:nth-child(4)::before { background: var(--g-green); }
        .stat-number { font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--on-surface); transition: var(--theme-transition); }
        .stat-label { font-size: 0.75rem; color: var(--on-surface-variant); margin-top: 0.35rem; font-weight: 500; }

        /* ========== SECTIONS ========== */
        .section { padding: 3rem 1.5rem; transition: var(--theme-transition); }
        .section:first-of-type { padding-top: 0; }
        .section-alt { background: var(--surface-variant); transition: var(--theme-transition); }
        .container { max-width: 1280px; margin: 0 auto; }
        .section-header { max-width: 1280px; margin: 0 auto 0.5rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
        .section-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 0.5rem; }
        .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; }
        .section-title { font-family: 'Playfair Display', serif; font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--on-surface); transition: var(--theme-transition); }
        .section-desc { color: var(--on-surface-variant); font-size: 0.95rem; max-width: 480px; margin-top: 0.5rem; line-height: 1.7; }
        .section-link { color: var(--primary); text-decoration: none; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-full); transition: var(--transition); background: var(--primary-container); white-space: nowrap; border: 1px solid transparent; }
        .section-link:hover { background: var(--primary); color: white; transform: translateX(2px); }

        /* ========== NEWS CARDS ========== */
        /* 3-column news grid */
        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; perspective: 1000px; }
        .news-card { display: flex; flex-direction: column; height: 460px; }
        .news-image { height: 210px; }
        .news-content { flex: 1; overflow: hidden; }
        .news-excerpt { -webkit-line-clamp: 3; }

        @media (max-width: 1200px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 900px)  { .news-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px)  {
          .news-grid { grid-template-columns: 1fr; }
          .news-card { height: auto; }
        }
        .news-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.4s cubic-bezier(0.2,0,0,1), box-shadow 0.4s ease; cursor: pointer; box-shadow: var(--shadow-1); position: relative; transform-style: preserve-3d; }
        .news-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; background: linear-gradient(90deg, var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green)); transition: height 0.3s ease; z-index: 1; }
        .news-card:hover::before { height: 3px; }
        .news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: rgba(66,133,244,0.2); }
        .news-image { width: 100%; height: 200px; background: var(--surface-container); position: relative; overflow: hidden; }
        .news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0,0,1); }
        .news-card:hover .news-image img { transform: scale(1.06); }
        .news-tag { position: absolute; top: 1rem; left: 1rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; z-index: 2; backdrop-filter: blur(8px); }
        .tag-ai { background: var(--primary-container); color: var(--primary); border: 1px solid rgba(66,133,244,0.2); }
        .tag-local { background: #FFE0B2; color: #E65100; }
        [data-theme="dark"] .tag-local { background: rgba(230,81,0,0.2); color: #FFB74D; }
        .tag-tutorial { background: var(--secondary-container); color: #1B5E20; }
        [data-theme="dark"] .tag-tutorial { color: #81C784; }
        .tag-event { background: var(--tertiary-container); color: #B71C1C; }
        [data-theme="dark"] .tag-event { color: #EF9A9A; }
        .tag-startup { background: var(--accent-container); color: #7B5800; }
        [data-theme="dark"] .tag-startup { color: #FFD54F; }
        .news-content { padding: 1.25rem 1.25rem 0.75rem; }
        .news-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--on-surface-variant); }
        .news-meta .sep { width: 3px; height: 3px; background: var(--outline-variant); border-radius: 50%; }
        .news-title { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin-bottom: 0.6rem; color: var(--on-surface); transition: color var(--transition); }
        .news-card:hover .news-title { color: var(--primary); }
        .news-excerpt { font-size: 0.85rem; color: var(--on-surface-variant); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .news-footer { padding: 0.75rem 1.25rem 1.25rem; display: flex; justify-content: space-between; align-items: center; }
        .read-time { font-size: 0.75rem; color: var(--on-surface-variant); display: flex; align-items: center; gap: 0.35rem; }
        .ai-badge { font-size: 0.68rem; font-weight: 600; padding: 0.2rem 0.6rem; background: var(--surface-container); color: var(--outline); border-radius: var(--radius-full); border: 1px solid var(--outline-variant); }

        /* ========== FEATURED ========== */
        .featured-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.75rem; align-items: start; }
        .featured-card-large { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); transition: var(--transition); position: relative; }
        .featured-card-large::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; background: linear-gradient(90deg, var(--g-blue), var(--g-green)); transition: height 0.3s ease; z-index: 1; }
        .featured-card-large:hover::before { height: 4px; }
        .featured-card-large:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
        .featured-card-large .news-image { height: 300px; }
        .featured-card-large .news-title { font-size: 1.3rem; }
        .featured-list { display: flex; flex-direction: column; gap: 1rem; }
        .featured-item { display: flex; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); transition: var(--transition); cursor: pointer; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
        .featured-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, var(--g-blue), var(--g-green)); transition: width 0.3s ease; }
        .featured-item:hover::before { width: 3px; }
        .featured-item:hover { border-color: rgba(66,133,244,0.3); box-shadow: var(--shadow-2); transform: translateX(6px); }
        .featured-item-img { width: 90px; height: 72px; border-radius: var(--radius-sm); background: var(--surface-container); flex-shrink: 0; overflow: hidden; }
        .featured-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
        .featured-item:hover .featured-item-img img { transform: scale(1.08); }
        .featured-item-content { flex: 1; min-width: 0; }
        .featured-item-content .news-tag { position: static; display: inline-block; margin-bottom: 0.4rem; font-size: 0.65rem; padding: 0.2rem 0.5rem; }
        .featured-item-content .news-title { font-size: 0.9rem; margin-bottom: 0.25rem; }
        .featured-item-content .news-meta { margin-bottom: 0; }

        /* ========== TUTORIAL ========== */
        .tutorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
        .tutorial-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 1.5rem; transition: var(--transition); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
        .tutorial-card:hover { box-shadow: var(--shadow-3); transform: translateY(-6px); }
        .tutorial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
        .tutorial-card:nth-child(1)::before { background: var(--g-blue); }
        .tutorial-card:nth-child(2)::before { background: var(--g-red); }
        .tutorial-card:nth-child(3)::before { background: var(--g-yellow); }
        .tutorial-card:nth-child(4)::before { background: var(--g-green); }
        .tutorial-card:nth-child(5)::before { background: var(--g-blue); }
        .tutorial-card:nth-child(6)::before { background: var(--g-red); }
        .tutorial-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; transition: transform 0.3s ease; }
        .tutorial-card:hover .tutorial-icon-wrap { transform: scale(1.1) rotate(-4deg); }
        .tutorial-card:nth-child(1) .tutorial-icon-wrap { background: var(--primary-container); }
        .tutorial-card:nth-child(2) .tutorial-icon-wrap { background: var(--tertiary-container); }
        .tutorial-card:nth-child(3) .tutorial-icon-wrap { background: var(--accent-container); }
        .tutorial-card:nth-child(4) .tutorial-icon-wrap { background: var(--secondary-container); }
        .tutorial-card:nth-child(5) .tutorial-icon-wrap { background: var(--primary-container); }
        .tutorial-card:nth-child(6) .tutorial-icon-wrap { background: var(--tertiary-container); }
        .tutorial-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--on-surface); }
        .tutorial-card p { font-size: 0.85rem; color: var(--on-surface-variant); line-height: 1.65; }
        .tutorial-level { display: inline-block; margin-top: 1rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; background: var(--surface-container); color: var(--on-surface-variant); border: 1px solid var(--outline-variant); transition: var(--transition); }
        .tutorial-card:hover .tutorial-level { background: var(--primary-container); color: var(--primary); border-color: var(--primary); }

        /* ========== EVENT ========== */
        .event-list { display: flex; flex-direction: column; gap: 1rem; }
        .event-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); transition: var(--transition); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
        .event-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.3s ease; }
        .event-card:nth-child(1)::before { background: var(--g-blue); }
        .event-card:nth-child(2)::before { background: var(--g-green); }
        .event-card:nth-child(3)::before { background: var(--g-yellow); }
        .event-card:hover::before { width: 4px; }
        .event-card:hover { box-shadow: var(--shadow-2); border-color: rgba(66,133,244,0.25); transform: translateX(6px); }
        .event-date-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1.5px solid var(--outline-variant); transition: var(--transition); }
        .event-card:nth-child(1) .event-date-box { background: var(--primary-container); border-color: var(--primary); }
        .event-card:nth-child(2) .event-date-box { background: var(--secondary-container); border-color: var(--secondary); }
        .event-card:nth-child(3) .event-date-box { background: var(--accent-container); border-color: var(--accent); }
        .event-day { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; line-height: 1; }
        .event-card:nth-child(1) .event-day { color: var(--primary); }
        .event-card:nth-child(2) .event-day { color: var(--secondary); }
        .event-card:nth-child(3) .event-day { color: #7B5800; }
        [data-theme="dark"] .event-card:nth-child(3) .event-day { color: var(--g-yellow); }
        .event-month { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface-variant); margin-top: 0.15rem; }
        .event-info { flex: 1; min-width: 0; }
        .event-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--on-surface); }
        .event-info p { font-size: 0.82rem; color: var(--on-surface-variant); margin-bottom: 0.5rem; }
        .event-meta { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--on-surface-variant); }
        .event-btn { padding: 0.5rem 1.25rem; background: var(--primary-container); color: var(--primary); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: var(--transition); flex-shrink: 0; border: 1px solid transparent; }
        .event-btn:hover { background: var(--primary); color: white; transform: scale(1.05); }

        /* ========== NEWSLETTER ========== */
        .newsletter-section { padding: 5rem 1.5rem; background: var(--on-surface); position: relative; overflow: hidden; transition: var(--theme-transition); }
        .newsletter-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(66,133,244,0.15) 0%, rgba(52,168,83,0.1) 33%, rgba(251,188,5,0.1) 66%, rgba(234,67,53,0.1) 100%); }
        .newsletter-box { position: relative; z-index: 2; text-align: center; max-width: 600px; margin: 0 auto; }
        .newsletter-box h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; color: white; margin-bottom: 0.75rem; }
        .newsletter-box p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; font-size: 0.95rem; }
        .newsletter-form { display: flex; gap: 0.75rem; max-width: 460px; margin: 0 auto; }
        .newsletter-form input { flex: 1; padding: 0.875rem 1.25rem; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); color: white; font-size: 0.9rem; font-family: inherit; outline: none; transition: var(--transition); }
        .newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }
        .newsletter-form input:focus { border-color: var(--g-blue); background: rgba(255,255,255,0.15); box-shadow: 0 0 0 3px rgba(66,133,244,0.2); }
        .btn-white { background: white; color: var(--primary); font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
        .btn-white:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
        .newsletter-g-strip { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.75rem; }
        .newsletter-g-strip span { width: 10px; height: 10px; border-radius: 50%; animation: bounce-dot 2s ease-in-out infinite; }
        .newsletter-g-strip span:nth-child(1) { animation-delay: 0s; }
        .newsletter-g-strip span:nth-child(2) { animation-delay: 0.15s; }
        .newsletter-g-strip span:nth-child(3) { animation-delay: 0.3s; }
        .newsletter-g-strip span:nth-child(4) { animation-delay: 0.45s; }
        @keyframes bounce-dot { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

        /* ========== FOOTER ========== */
        .footer {
            background: var(--surface-variant);
            border-top: 1px solid var(--outline-variant);
            padding: 3.5rem 1.5rem 2rem;
            transition: var(--theme-transition);
        }

        /* Footer Grid */
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
            align-items: start;
            max-width: 1280px;
            margin: 0 auto 2.5rem;
        }

        .footer-col {
            min-width: 0;
        }

        .footer-brand .site-logo {
            width: 48px;
            height: 48px;
            margin-bottom: 1rem;
        }

        .footer-brand h3 {
            font-size: 1.1rem;
            margin: 0 0 0.75rem;
        }

        .footer-brand p {
            font-size: 0.9rem;
            color: var(--on-surface-variant);
            line-height: 1.6;
        }

        .footer-links h4 {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: 0 0 1rem;
            color: var(--on-surface);
        }

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

        .footer-links li {
            margin: 0 0 0.5rem;
        }

        .footer-links a {
            color: var(--on-surface-variant);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-bottom {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--outline-variant);
            text-align: center;
            font-size: 0.85rem;
            color: var(--on-surface-variant);
        }

        /* Responsive */
        @media (max-width: 1023px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2.5rem;
            }
            .footer-brand {
                grid-column: 1 / -1;
                text-align: center;
            }
        }

        @media (max-width: 767px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .footer-brand {
                text-align: center;
            }
            .footer-links {
                text-align: center;
            }
            .footer-links ul {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }


        /* ========== BACK TO TOP ========== */
        .back-to-top {
            position: fixed;
            right: 1.5rem;
            bottom: 2rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--surface);
            border: 1px solid var(--outline-variant);
            box-shadow: var(--shadow-2);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.8);
            transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, visibility 0.3s;
        }
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        .back-to-top:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-6px) scale(1.05);
        }
        .back-to-top:active {
            transform: translateY(-2px) scale(0.98);
        }
        .btt-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        .back-to-top:hover .btt-icon {
            animation: none;
            transform: scale(1.1) rotate(-10deg);
        }
        @keyframes btt-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .back-to-top.visible .btt-icon {
            animation: btt-bounce 1.2s ease-in-out infinite;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1023px) {
            .featured-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
            .footer-brand { grid-column: 1 / -1; text-align: center; }
        }
        @media (max-width: 768px) {
            .nav-container {
                height: auto;
                padding: 0.85rem 1rem;
                flex-wrap: wrap;
                gap: 0.55rem;
            }
            .site-branding {
                order: 1;
                flex: 1 1 auto;
                min-width: 0;
            }
            .nav-cta {
                order: 2;
                width: auto;
                flex: 0 0 auto;
                justify-content: flex-end;
                flex-wrap: nowrap;
                gap: 0.4rem;
                margin-left: auto;
                position: relative;
            }
            .nav-cta .search-wrap { display: flex; }
            .search-input:focus { width: 140px; }
            .nav-cta .btn-ghost { display: none; }
            .mobile-menu-btn {
                order: 3;
                display: inline-flex;
                margin-left: 0;
                flex: 0 0 auto;
                position: relative;
                z-index: 1006;
                width: 44px;
                height: 44px;
            } /* closes .mobile-menu-btn */

    /* ── Mobile Nav Open State ─────────────────────────────────── */
    .navbar.is-open .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0.25rem;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(24px) saturate(1.2);
        -webkit-backdrop-filter: blur(24px) saturate(1.2);
        border-bottom: 1px solid var(--outline-variant);
        padding: 0.75rem 1rem 1rem;
        z-index: 998;
        box-shadow: var(--shadow-2);
        transition: var(--theme-transition);
    }
    [data-theme="dark"] .navbar.is-open .nav-links {
        background: rgba(15,17,21,0.96);
    }
    .navbar.is-open .nav-links a {
        padding: 0.65rem 1rem;
        border-radius: var(--radius-sm);
        display: block;
        width: 100%;
    }
} /* closes @media (max-width: 768px) */

/* ── Single Post: Featured Image ──────────────────────────────── */
.post-thumbnail {
    max-width: 850px;
    margin: 0 auto 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .post-thumbnail {
        border-radius: var(--radius);
        margin: 0 0 1.5rem;
    }
    .single-article .entry-content {
        padding: 0;
    }
}

/* ── Single Post: Meta & Content ──────────────────────────────── */
.single-article .entry-header {
    margin-bottom: 1.5rem;
}

.single-article .entry-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.single-article .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--on-surface-variant);
}

.single-article .post-meta a {
    color: var(--primary);
    text-decoration: none;
}

.single-article .entry-content {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1.05rem;
}

.single-article .entry-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.single-article .entry-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
}

.single-article .entry-content ul,
.single-article .entry-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.single-article .entry-content li {
    margin-bottom: 0.5rem;
}

.single-article .page-links {
    margin-top: 2rem;
    font-weight: 600;
}

/* ── Single Post: Tags ────────────────────────────────────────── */
.entry-footer .tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--outline-variant);
    font-size: 0.85rem;
}

.entry-footer .tags-list a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--surface-container);
    border-radius: var(--radius-full);
    color: var(--on-surface-variant);
    text-decoration: none;
    font-size: 0.8rem;
    transition: var(--transition);
}

.entry-footer .tags-list a:hover {
    background: var(--primary-container);
    color: var(--primary);
}

/* ── Single Post: Author Box ──────────────────────────────────── */
.author-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.5rem;
    background: var(--surface-container);
    border-radius: var(--radius);
}

.author-avatar img {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.author-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.author-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ── Single Post: Top spacing for fixed nav + ticker ──────────── */
.single .section:first-of-type,
.page .section:first-of-type {
    padding-top: 10rem;
}

/* ── Rank Math Breadcrumb ─────────────────────────────────────── */
.rank-math-breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    color: var(--on-surface-variant);
}

.rank-math-breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.rank-math-breadcrumb a:hover {
    text-decoration: underline;
}

.rank-math-breadcrumb .separator {
    margin: 0 0.35rem;
    color: var(--outline);
}

/* ── Page Banner ──────────────────────────────────────────────── */
.page-banner {
    margin: 0 0 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.page-banner-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .page-banner {
        border-radius: var(--radius);
        margin: 0 0 1.5rem;
    }
}

/* ── Page Banner Zoom Out Animation ────────────────────────────── */
@keyframes zoomOut {
    from {
        transform: scale(1.3);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.page-banner {
    animation: zoomOut 0.8s ease-out forwards;
}






/* ========== POST META BAR ========== */
.post-meta-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--outline-variant);
}
.pm-sep {
    color: var(--outline-variant);
    font-size: 1rem;
    line-height: 1;
}
.pm-author {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--on-surface);
}
.pm-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--outline-variant);
    flex-shrink: 0;
}
.pm-date,
.pm-cat,
.pm-read {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pm-date .dashicons,
.pm-cat .dashicons,
.pm-read .dashicons {
    font-size: 0.9rem;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--outline);
}
.pm-cat a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.pm-cat a:hover {
    text-decoration: underline;
}

/* ── ARTIKEL CHAT AI BROWSER ── */
.single-article .entry-content .bw-article {
    font-family: Georgia, 'Times New Roman', serif;
    color: inherit;
    line-height: 1.8;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 4px;
  }
.single-article .entry-content .bw-article h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 40px 0 14px;
    color: inherit;
    line-height: 1.3;
  }
.single-article .entry-content .bw-article h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: inherit;
  }
.single-article .entry-content .bw-article p {
    font-size: 16px;
    margin: 0 0 18px;
    color: inherit;
  }
.single-article .entry-content .bw-article ul, .single-article .entry-content .bw-article ol {
    padding-left: 22px;
    margin: 0 0 18px;
  }
.single-article .entry-content .bw-article li {
    font-size: 15px;
    color: inherit;
    margin-bottom: 6px;
    line-height: 1.7;
  }
.single-article .entry-content .bw-article /* --- HERO / INTRO BOX --- */
  .bw-hero {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 32px 28px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
  }
.single-article .entry-content .bw-article .bw-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(200,144,26,.12);
  }
.single-article .entry-content .bw-article .bw-hero .bw-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #C8901A !important;
    margin-bottom: 10px;
    display: block;
  }
.single-article .entry-content .bw-article .bw-hero h1 {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    color: #fff !important;
    margin: 0 0 14px;
    line-height: 1.3;
  }
.single-article .entry-content .bw-article .bw-hero .bw-sub {
    font-size: 16px;
    color: rgba(255,255,255,.75);
    margin: 0;
    font-style: italic;
    line-height: 1.6;
  }
.single-article .entry-content .bw-article /* --- ALERT / CATATAN PENTING --- */
  .bw-alert {
    background: #FFF8E6;
    border: 1px solid #F0B429;
    border-left: 4px solid #C8901A;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 15px;
    color: #5A3E00;
    line-height: 1.7;
  }
.single-article .entry-content .bw-article .bw-alert strong {
    color: #3D2800;
  }
.single-article .entry-content .bw-article /* --- DIVIDER --- */
  .bw-divider {
    border: none;
    border-top: 2px dashed #e5e5e5;
    margin: 36px 0;
  }
.single-article .entry-content .bw-article /* --- KARTU AI --- */
  .bw-ai-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 24px 24px 20px;
    margin-bottom: 24px;
    position: relative;
  }
.single-article .entry-content .bw-article .bw-ai-card:hover {
    border-color: #C8901A !important;
  }
.single-article .entry-content .bw-article .bw-ai-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
.single-article .entry-content .bw-article .bw-ai-name {
    font-size: 20px;
    font-weight: 700;
    color: inherit;
    margin: 0;
    font-family: Georgia, serif;
  }
.single-article .entry-content .bw-article .bw-ai-maker {
    font-size: 12px;
    color: var(--outline);
    font-weight: normal;
  }
.single-article .entry-content .bw-article .bw-level-badge {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
  }
.single-article .entry-content .bw-article .level-sma { background: #E1F5EE; color: #0B5E45; }
.single-article .entry-content .bw-article .level-kuliah { background: #E6F1FB; color: #0C447C; }
.single-article .entry-content .bw-article .level-s2 { background: #EEEDFE; color: #3C3489; }
.single-article .entry-content .bw-article .level-smp { background: #FEF3E2; color: #7C4A00; }
.single-article .entry-content .bw-article .bw-ai-desc {
    font-size: 15px;
    color: var(--on-surface-variant);
    line-height: 1.7;
    margin: 0 0 14px;
  }
.single-article .entry-content .bw-article /* --- QUOTA BOX --- */
  .bw-quota {
    background: #F8F8F8;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
.single-article .entry-content .bw-article .bw-quota-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
  }
.single-article .entry-content .bw-article .bw-quota-text {
    font-size: 13px;
    color: var(--on-surface-variant);
    line-height: 1.6;
    flex: 1;
  }
.single-article .entry-content .bw-article .bw-quota-text strong {
    color: inherit;
    display: block;
    margin-bottom: 2px;
  }
.single-article .entry-content .bw-article .bw-quota-warn {
    background: #FFF0F0;
    border-left: 3px solid #D94040;
  }
.single-article .entry-content .bw-article .bw-quota-warn .bw-quota-text {
    color: #5A1A1A;
  }
.single-article .entry-content .bw-article .bw-quota-warn .bw-quota-text strong {
    color: #3D0000;
  }
.single-article .entry-content .bw-article .bw-quota-ok {
    background: #EEF9F5;
    border-left: 3px solid #1D9E75;
  }
.single-article .entry-content .bw-article .bw-quota-ok .bw-quota-text {
    color: #0B3D2B;
  }
.single-article .entry-content .bw-article /* --- PRO CONS --- */
  .bw-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
@media (max-width: 480px) {
    .bw-pros-cons { grid-template-columns: 1fr; }
.single-article .entry-content .bw-article .bw-ai-header { flex-direction: column; align-items: flex-start; }
.single-article .entry-content .bw-article .bw-pros, .single-article .entry-content .bw-article .bw-cons {
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
  }
.single-article .entry-content .bw-article .bw-pros { background: #EEF9F5; color: #0B3D2B; }
.single-article .entry-content .bw-article .bw-cons { background: #FFF0F0; color: #5A1A1A; }
.single-article .entry-content .bw-article .bw-pros strong { color: #085041; display: block; margin-bottom: 4px; }
.single-article .entry-content .bw-article .bw-cons strong { color: #7A0000; display: block; margin-bottom: 4px; }
.single-article .entry-content .bw-article .bw-pros ul, .single-article .entry-content .bw-article .bw-cons ul { padding-left: 16px; margin: 0; }
.single-article .entry-content .bw-article .bw-pros li, .single-article .entry-content .bw-article .bw-cons li { font-size: 13px; margin-bottom: 3px; }
.single-article .entry-content .bw-article /* --- LINK RESMI --- */
  .bw-link-resmi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #185FA5;
    text-decoration: none;
    border: 1px solid #B5D4F4;
    border-radius: 4px;
    padding: 5px 12px;
    background: #EAF3FD;
  }
.single-article .entry-content .bw-article .bw-link-resmi:hover { background: #D5E9F9; }
.single-article .entry-content .bw-article /* --- VERDICT CARD --- */
  .bw-verdict {
    background: transparent !important;
    padding: 0;
    margin-top: 36px;
    margin-bottom: 8px;
  }
.single-article .entry-content .bw-article .bw-verdict h2 {
    color: inherit;
    font-size: 22px;
    margin: 0 0 18px;
  }
.single-article .entry-content .bw-article .bw-verdict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
.single-article .entry-content .bw-article .bw-verdict-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
.single-article .entry-content .bw-article .bw-verdict-item .vcat {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C8901A;
    margin-bottom: 8px;
    display: inline-block;
    background: #FEF3E2;
    padding: 3px 8px;
    border-radius: 4px;
  }
.single-article .entry-content .bw-article .bw-verdict-item .vtool {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
  }
.single-article .entry-content .bw-article .bw-verdict-item .vdesc {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
  }
.single-article .entry-content .bw-article /* --- CTA BAIWOR --- */
  .bw-cta {
    background: #EEF9F5;
    border: 1px solid #9FE1CB;
    border-radius: 10px;
    padding: 24px 24px;
    margin-top: 40px;
    text-align: center;
  }
.single-article .entry-content .bw-article .bw-cta p {
    font-size: 15px;
    color: #0B3D2B;
    margin-bottom: 12px;
  }
.single-article .entry-content .bw-article .bw-cta .bw-signature {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #1D9E75;
    font-style: normal;
  }
/* ========== DARK MODE: ARTIKEL CHAT AI BROWSER ========== */
[data-theme="dark"] .single-article .entry-content .bw-article {
    color: var(--on-surface);
}
[data-theme="dark"] .single-article .entry-content .bw-article h2,
[data-theme="dark"] .single-article .entry-content .bw-article h3 {
    color: var(--on-surface);
}
[data-theme="dark"] .single-article .entry-content .bw-article p,
[data-theme="dark"] .single-article .entry-content .bw-article li {
    color: var(--on-surface-variant);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-hero {
    background: #111317;
    border: 1px solid var(--outline-variant);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-alert {
    background: rgba(200,144,26,0.1);
    border-color: #7C5A00;
    color: #F0C84A;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-alert strong {
    color: #F5D87A;
}

[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card:hover {
    border-color: #C8901A;
}


[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota {
    background: var(--surface-container-high);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-text {
    color: var(--on-surface-variant);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-text strong {
    color: var(--on-surface);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-warn {
    background: rgba(217,64,64,0.12);
    border-color: #D94040;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-warn .bw-quota-text,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-warn .bw-quota-text strong {
    color: #F6A0A0;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-ok {
    background: rgba(29,158,117,0.1);
    border-color: #1D9E75;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-quota-ok .bw-quota-text {
    color: #6EEBC7;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-pros {
    background: rgba(29,158,117,0.1);
    color: #6EEBC7;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-pros strong {
    color: #A7F3DE;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-cons {
    background: rgba(217,64,64,0.1);
    color: #F6A0A0;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-cons strong {
    color: #FFCCCC;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-link-resmi {
    background: rgba(24,95,165,0.15);
    border-color: rgba(24,95,165,0.4);
    color: #7DBFEE;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-cta {
    background: rgba(29,158,117,0.08);
    border-color: rgba(29,158,117,0.3);
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-cta p {
    color: #6EEBC7;
}
[data-theme="dark"] .single-article .entry-content .bw-article hr {
    border-color: var(--outline-variant);
}


/* Override for AI Cards in Dark Mode - Keep them light like original */
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card {
    background: #ffffff !important;
    border-color: #e5e5e5 !important;
    color: #1a1a1a !important;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card h3,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card p,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card li,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card span,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card strong,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card .bw-ai-name,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card .bw-ai-desc,
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card .bw-quota-text {
    color: #1a1a1a !important;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-ai-card .bw-ai-maker {
    color: #555 !important;
}

/* Override for Verdict Cards in Dark Mode - Keep them light */
[data-theme="dark"] .single-article .entry-content .bw-article .bw-verdict-item {
    background: #ffffff !important;
    border-color: #e5e5e5 !important;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-verdict-item .vtool {
    color: #1a1a1a !important;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-verdict-item .vdesc {
    color: #444 !important;
}
[data-theme="dark"] .single-article .entry-content .bw-article .bw-verdict h2 {
    color: var(--on-surface) !important;
}


/* ═══════════════════════════════════════════════════
   COMMENTS AREA
═══════════════════════════════════════════════════ */

.comments-area {
  max-width: 850px;
  margin: 3rem auto 0;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--outline);
}

/* ── Titles ── */
.comments-title,
.comment-reply-title {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 1.5rem;
}
.comment-reply-title {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--outline);
}
.comments-title span { color: var(--primary); }

/* ── List ── */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.comment-list .comment,
.comment-list .pingback {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--outline);
}
.comment-list .comment:last-child { border-bottom: none; }

/* ── Comment Body ── */
.comment-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.comment-body .comment-author { flex-shrink: 0; }
.comment-body .comment-author img {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: block;
  border: 2px solid var(--outline);
}
.comment-content-wrap { flex: 1; min-width: 0; }

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.comment-author .fn {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-surface);
  font-style: normal;
}
.comment-author a { text-decoration: none; color: inherit; }

.comment-metadata {
  font-size: 0.78rem;
  color: var(--on-surface-variant);
  font-family: 'Courier New', monospace;
}
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { color: var(--primary); }

.comment-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--on-surface);
}
.comment-content p { margin-bottom: 0.6rem; }
.comment-content p:last-child { margin-bottom: 0; }

.comment-reply-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.comment-reply-link:hover { text-decoration: underline; }

/* ── Nested replies ── */
.comment-list .children {
  list-style: none;
  padding-left: 2.5rem;
  margin-top: 1rem;
  border-left: 2px solid var(--outline);
}

/* ── No comments ── */
.no-comments {
  font-size: 0.9rem;
  color: var(--on-surface-variant);
  font-style: italic;
}

/* ── Awaiting moderation ── */
.comment-awaiting-moderation {
  display: inline-block;
  font-size: 0.75rem;
  background: #FFF8E6;
  color: #7C4A00;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  margin-left: 0.5rem;
}

/* ── Comment Navigation ── */
.comments-navigation {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  font-size: 0.85rem;
  font-family: 'Courier New', monospace;
}
.comments-navigation a { color: var(--primary); text-decoration: none; }
.comments-navigation a:hover { text-decoration: underline; }

/* ── Comment Form ── */
.comment-form { display: flex; flex-direction: column; gap: 1rem; }

.comment-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.35rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--outline);
  border-radius: 6px;
  background: var(--surface);
  color: var(--on-surface);
  font-size: 0.95rem;
  font-family: Georgia, serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #C8901A;
  box-shadow: 0 0 0 3px rgba(200, 144, 26, 0.12);
}
.comment-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}
.comment-form-cookies-consent input { margin-top: 2px; }
.comment-form .form-submit { margin-top: 0.5rem; }

.comment-form .btn-filled,
.comment-form .btn.btn-filled,
#respond .btn-filled {
  display: inline-block;
  background: #1a1a1a;
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}
.comment-form .btn-filled:hover,
#respond .btn-filled:hover { background: #C8901A; }

/* ── Dark mode ── */
[data-theme="dark"] .comment-form input,
[data-theme="dark"] .comment-form textarea {
  background: var(--surface-variant);
  border-color: var(--outline);
  color: var(--on-surface);
}
[data-theme="dark"] .comment-body .comment-author img {
  border-color: var(--outline);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .comment-body { gap: 0.75rem; }
  .comment-body .comment-author img { width: 36px; height: 36px; }
  .comment-list .children { padding-left: 1rem; }
}