:root {
    /* --- COLOR PALETTE --- */
    --bg-core: #050505;
    --bg-panel: #0a0a0a;
    --border-color: #333;
    
    --text-primary: #e0e0e0;
    --text-dim: #888;
    
    /* Bloomberg Terminal Colors */
    --accent-orange: #ff9500;
    --accent-blue: #00a8e8;
    --signal-red: #ff3b30;
    --signal-green: #00ff41;

    --font-ui: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Layout Variables */
    --header-height: 50px;
    --ticker-height: 30px;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
    background-color: var(--bg-core);
    color: var(--text-primary);
    font-family: var(--font-ui);
    margin: 0;
    /* Padding untuk kompensasi Fixed Header + Ticker */
    padding-top: calc(var(--header-height) + var(--ticker-height) + 10px);
    overflow-x: hidden;
    line-height: 1.5;
}

/* --- UTILITIES --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px 20px; }
.hidden { display: none !important; }
.red { color: var(--signal-red) !important; }
.green { color: var(--signal-green) !important; }
.gold { color: var(--accent-orange) !important; }
.blink { animation: blinking 1s steps(2, start) infinite; }
@keyframes blinking { to { visibility: hidden; } }

/* --- SECTION HEADERS --- */
.section-spacer { margin: 60px 0; scroll-margin-top: 100px; }
.section-header-bar {
    display: flex; justify-content: space-between; border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px; padding-bottom: 5px; font-family: var(--font-mono); align-items: flex-end;
}
.sec-title {
    font-weight: 900; font-size: 1rem; color: white; background: #111;
    padding: 5px 10px; border: 1px solid var(--border-color); border-bottom: none;
}
.sec-decoration { color: #444; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 5px; }

/* --- TOP BARS (TICKER) --- */
.ticker-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--ticker-height);
    background: #000; border-bottom: 1px solid var(--border-color);
    display: flex; z-index: 1000;
}
.ticker-title {
    background: var(--accent-orange); color: black;
    font-family: var(--font-mono); font-weight: bold;
    padding: 0 15px; display: flex; align-items: center; font-size: 0.75rem;
}
.ticker-wrap {
    flex-grow: 1; overflow: hidden; white-space: nowrap; display: flex; align-items: center;
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}
.ticker {
    display: inline-block; white-space: nowrap;
    animation: ticker 300s linear infinite; 
    font-family: var(--font-mono); font-size: 0.85rem; will-change: transform;
}
@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.ticker-item { display: inline-block; padding: 0 20px; }
.pair-name { color: var(--accent-orange); font-weight: bold; margin-right: 5px; }
.price-val { color: #ccc; margin-right: 5px; font-size: 0.85rem; }

/* --- HEADER NAV --- */
.terminal-header {
    position: fixed; top: var(--ticker-height); left: 0; width: 100%; height: var(--header-height);
    background: rgba(10, 10, 10, 0.95); border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(5px); z-index: 999; display: flex; align-items: center;
}
.header-inner {
    width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.brand { font-family: var(--font-mono); font-weight: bold; color: white; letter-spacing: 1px; font-size: 1.1rem; }
.brand-icon { color: var(--accent-orange); margin-right: 5px; }
.nav-links { display: flex; align-items: center; }
.nav-links a {
    color: var(--text-dim); text-decoration: none; font-family: var(--font-mono); 
    font-size: 0.8rem; margin-left: 15px; transition: 0.2s;
}
.nav-links a:hover { color: var(--accent-orange); }

/* Tombol VIP di Header */
.btn-vip-nav {
    border: 1px solid var(--accent-orange); color: var(--accent-orange) !important;
    padding: 5px 10px; border-radius: 2px;
}
.btn-vip-nav:hover { background: var(--accent-orange); color: black !important; }

/* --- PANEL STYLES --- */
.panel-container {
    border: 1px solid var(--border-color); background: var(--bg-panel);
    display: flex; flex-direction: column; height: 100%;
}
.panel-top-bar {
    padding: 8px 12px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
    background: #151515; border-bottom: 1px solid var(--border-color); color: #888;
}
.blue-theme { background: rgba(0, 168, 232, 0.15); color: var(--accent-blue); border-bottom: 1px solid var(--accent-blue); }
.orange-theme { background: rgba(255, 149, 0, 0.15); color: var(--accent-orange); border-bottom: 1px solid var(--accent-orange); }
.green-theme { background: rgba(0, 255, 65, 0.15); color: var(--signal-green); border-bottom: 1px solid var(--signal-green); }
.panel-body { padding: 25px; }
.full-height { height: 100%; min-height: 280px; }

/* --- HERO, TRANSCRIPT --- */
.hero-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.hero-text { flex: 1; }
.hero-text h1 { font-size: 3.5rem; line-height: 1; margin: 0 0 20px 0; font-weight: 900; letter-spacing: -2px; }
.highlight-orange { color: var(--accent-orange); }
.market-metrics { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.metric-box { border: 1px solid var(--border-color); padding: 10px 15px; text-align: right; background: #000; }
.metric-box .label { display: block; font-size: 0.65rem; color: #555; font-family: var(--font-mono); margin-bottom: 2px; }
.metric-box .value { font-family: var(--font-mono); font-weight: bold; font-size: 1.2rem; }

.transcript-box { margin-top: 10px; border-left: 2px solid #333; padding-left: 15px; font-family: var(--font-mono); max-width: 650px; }
.script-header { color: #555; font-size: 0.7rem; margin-bottom: 12px; letter-spacing: 1px; font-weight: bold; }
.script-line { margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; color: #ccc; }
.speaker-mark { color: var(--accent-orange); font-weight: bold; margin-right: 5px; text-transform: uppercase; font-size: 0.8rem; }
.speaker-jordan { color: var(--accent-blue); font-weight: bold; margin-right: 5px; text-transform: uppercase; font-size: 0.8rem; }
.text { font-style: italic; opacity: 0.9; }

/* --- WALL OF SHAME & ADVICE --- */
.section-heading { font-family: var(--font-mono); color: var(--accent-orange); margin-bottom: 20px; font-size: 1rem; letter-spacing: 1px; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 15px; }
.data-card { background: #080808; border: 1px solid var(--border-color); padding: 15px; position: relative; overflow: hidden; transition: transform 0.2s; }
.data-card:hover { border-color: var(--signal-red); }
.card-top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 10px; color: white; font-weight: bold; }
.chart-area { height: 60px; width: 100%; border-bottom: 1px solid #222; margin-bottom: 10px; opacity: 0.7; }
.crash-stat .val { font-size: 1.8rem; font-family: var(--font-mono); font-weight: bold; display: block; line-height: 1; }
.desc { font-size: 0.8rem; color: #666; margin: 8px 0 0 0; line-height: 1.3; }
.stamp-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); font-size: 3rem; font-weight: 900; color: rgba(255, 59, 48, 0.15); border: 4px solid rgba(255, 59, 48, 0.15); padding: 5px 15px; pointer-events: none; }

.split-layout { display: flex; gap: 20px; }
.half-width { flex: 1; }
.terminal-window { background: black; display: flex; flex-direction: column; justify-content: space-between; }
.term-content { padding: 20px; font-family: var(--font-mono); color: var(--accent-blue); font-size: 0.95rem; }
.output-text { color: white; margin-top: 15px; line-height: 1.4; min-height: 60px; }
.term-actions { border-top: 1px solid #222; padding: 10px; background: #080808; }
.btn-block { width: 100%; border: none; padding: 12px; font-family: var(--font-mono); font-weight: bold; cursor: pointer; text-transform: uppercase; transition: 0.2s; }
.btn-block.blue-btn { background: var(--accent-blue); color: black; }
.btn-block.blue-btn:hover { background: #fff; }

.input-group input { width: 100%; background: #000; border: 1px solid #444; color: white; padding: 12px; font-family: var(--font-mono); font-size: 1rem; margin-bottom: 15px; }
.btn-outline { width: 100%; background: transparent; border: 1px solid var(--accent-orange); color: var(--accent-orange); padding: 12px; font-family: var(--font-mono); font-weight: bold; cursor: pointer; transition: 0.2s; text-transform: uppercase; }
.btn-outline:hover { background: var(--accent-orange); color: black; }
.result-box { margin-top: 20px; border: 1px dashed var(--signal-red); padding: 15px; text-align: center; background: rgba(255, 59, 48, 0.05); }
.res-val { font-size: 2.2rem; display: block; font-family: var(--font-mono); margin: 5px 0; font-weight: bold; }

/* --- TRAP --- */
.trap-container { height: 280px; background: #020202; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(#111 1px, transparent 1px), linear-gradient(90deg, #111 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; }
.crosshair-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(to right, transparent 49.8%, rgba(0, 255, 65, 0.2) 50%, transparent 50.2%), linear-gradient(to bottom, transparent 49.8%, rgba(0, 255, 65, 0.2) 50%, transparent 50.2%); }
.taunt-text { position: absolute; color: #222; font-family: var(--font-mono); font-size: 2.5rem; font-weight: 900; z-index: 1; pointer-events: none; text-transform: uppercase; text-align: center; }
.btn-solid-green { background: var(--signal-green); color: black; border: none; padding: 15px 40px; font-weight: bold; z-index: 10; cursor: crosshair; font-family: var(--font-mono); position: absolute; box-shadow: 0 0 10px rgba(0, 255, 65, 0.4); text-transform: uppercase; }

/* --- ROADMAP --- */
.roadmap-box { padding: 0; background: #0a0a0a; }
.roadmap-list { list-style: none; padding: 0; margin: 0; }
.roadmap-list li { padding: 15px 20px; border-bottom: 1px solid #222; font-family: var(--font-mono); font-size: 0.9rem; display: flex; align-items: flex-start; }
.roadmap-list li:last-child { border-bottom: none; }
.phase { color: var(--accent-orange); margin-right: 15px; font-weight: bold; min-width: 100px; }
.roadmap-list .txt { color: #ccc; }
.roadmap-list li.done { opacity: 0.5; color: #666; justify-content: space-between; }
.roadmap-list li.done .check { color: var(--signal-green); font-weight: bold; }
.roadmap-list li.active-phase { background: rgba(0, 255, 65, 0.05); border: 1px solid var(--signal-green); border-left: 4px solid var(--signal-green); padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 15px rgba(0, 255, 65, 0.1); position: relative; }
.phase-content { display: flex; align-items: center; }
.status-indicator { font-family: var(--font-mono); font-size: 0.75rem; color: var(--signal-green); font-weight: bold; text-align: right; letter-spacing: 1px; border-top: 1px dashed rgba(0, 255, 65, 0.3); padding-top: 8px; }
.active-phase .phase { color: var(--signal-green); }
.active-phase .txt { color: white; font-weight: bold; }

/* --- FOOTER --- */
.main-footer { border-top: 2px solid var(--accent-orange); padding: 40px 0; margin-top: 80px; background: #080808; font-family: var(--font-mono); color: #555; }
.footer-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 30px; }
.ca-box { background: rgba(255, 149, 0, 0.05); border: 1px solid var(--border-color); padding: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ca-label { color: var(--accent-orange); font-weight: bold; margin-right: 10px; }
.ca-text { color: white; letter-spacing: 1px; word-break: break-all; }
.btn-copy { background: transparent; border: 1px solid var(--text-dim); color: var(--text-dim); padding: 5px 15px; font-family: var(--font-mono); cursor: pointer; transition: 0.2s; text-transform: uppercase; font-size: 0.75rem; }
.btn-copy:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255, 149, 0, 0.1); }
.footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid #222; padding-bottom: 30px; }
.social-btn { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: 0.2s; border: 1px solid transparent; padding: 8px 12px; }
.social-btn:hover { color: var(--accent-blue); border: 1px solid var(--accent-blue); text-shadow: 0 0 5px rgba(0, 168, 232, 0.5); }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.75rem; }

/* --- TROLLBOX (UPDATED V.2.5) --- */
.chat-widget {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 380px; /* Lebar pas untuk desktop */
    background: #0a0a0a;
    border: 1px solid #333;
    border-bottom: none;
    z-index: 2000;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: translateY(0); /* Default terbuka */
    box-shadow: -5px -5px 20px rgba(0,0,0,0.8);
    font-family: var(--font-mono);
}

/* Keadaan Minimized (Hanya Header yg muncul) */
.chat-widget.minimized {
    transform: translateY(calc(100% - 45px)); /* Sisakan 45px untuk header */
}

.chat-header {
    background: #1a1a1a;
    color: #ccc;
    padding: 12px 15px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid var(--accent-orange);
    user-select: none;
}

.chat-header:hover {
    background: #222;
    color: white;
}

.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background-color: var(--signal-green);
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px var(--signal-green);
}

.chat-body {
    height: 350px;
    overflow-y: auto;
    padding: 0;
    background: #050505;
    border-bottom: 1px solid #222;
    
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-orange) #111;
}

/* Webkit Scrollbar */
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-track { background: #111; }
.chat-body::-webkit-scrollbar-thumb { background: var(--accent-orange); }

/* --- CHAT ROWS & CONTENT --- */
.chat-row {
    padding: 8px 12px;
    border-bottom: 1px solid #151515;
    font-size: 0.8rem;
    display: flex;
    gap: 8px;
    line-height: 1.4;
    align-items: flex-start; /* Agar text panjang rapi */
}

.chat-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02); /* Zebra striping halus */
}

/* Waktu [12:00] */
.chat-time {
    color: #555;
    font-size: 0.7rem;
    min-width: 48px; /* Lebar tetap agar sejajar */
    margin-top: 2px;
}

/* Username Styling */
.chat-user {
    font-weight: bold;
    white-space: nowrap;
    color: var(--accent-blue); /* Default jadi Biru jika tidak ada role */
}

/* --- ROLE COLORS (Override Default) --- */
.chat-user.role-admin { color: var(--accent-orange); text-shadow: 0 0 8px rgba(255, 149, 0, 0.4); }
.chat-user.role-bull { color: var(--signal-green); }
.chat-user.role-bear { color: var(--signal-red); }
.chat-user.role-rekt { color: #777; text-decoration: line-through; font-style: italic; }


/* Admin: Oranye Terang + Glow */
.chat-user.role-admin {
    color: var(--accent-orange);
    text-shadow: 0 0 8px rgba(255, 149, 0, 0.4);
}

/* Bull: Hijau Signal */
.chat-user.role-bull {
    color: var(--signal-green);
}

/* Bear: Merah Signal */
.chat-user.role-bear {
    color: var(--signal-red);
}

/* Rekt: Abu-abu dicoret (Bangkrut/Kalah) */
.chat-user.role-rekt {
    color: #777;
    text-decoration: line-through;
    font-style: italic;
}

/* Isi Pesan */
.chat-msg-text {
    color: #e0e0e0;
    word-break: break-word; /* Agar text panjang turun ke bawah */
    flex: 1;
}

/* Input Area (Fake Input) */
.chat-input {
    display: flex;
    padding: 12px;
    background: #000;
    border-top: 1px solid #333;
    align-items: center;
}

.chat-input span {
    color: var(--accent-orange);
    font-weight: bold;
    margin-right: 8px;
}

.chat-input input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    font-family: var(--font-mono);
    outline: none;
    font-size: 0.85rem;
}

/* Responsive Mobile Trollbox */
@media (max-width: 768px) {
    .chat-widget {
        width: 90%; /* Lebih lebar di HP */
        right: 5%;
        bottom: 10px;
    }
}

/* --- BACKGROUND FX --- */
#fairyDust { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.2; pointer-events: none; }
.noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }


/* ==========================================================
   MOBILE RESPONSIVE (HOME PAGE SPECIFIC)
   ========================================================== */
@media (max-width: 900px) {
    /* Container Padding */
    .container { padding: 0 15px 60px 15px; }

    /* Header adjustments */
    .header-inner { justify-content: space-between; }
    /* Hide F1-F5 links on mobile to prevent overflow */
    .nav-links > a:not(.btn-vip-nav) { display: none; }
    .nav-links { gap: 0; }
    
    /* Hero Section Stacking */
    .hero-content { flex-direction: column; gap: 20px; }
    .hero-text h1 { font-size: 2.5rem; text-align: center; }
    .transcript-box { width: 100%; }
    .market-metrics { 
        width: 100%; 
        flex-direction: row; 
        justify-content: space-between; 
        gap: 10px;
    }
    .metric-box { flex: 1; text-align: center; }

    /* Split Layout (Calculator/Strategy) Stacking */
    .split-layout { flex-direction: column; }
    .half-width { width: 100%; min-width: auto; }

    /* Wall of Shame */
    .grid-container { grid-template-columns: 1fr; } /* Single column */

    /* Trap Area */
    .trap-container { height: 220px; }
    .taunt-text { font-size: 1.8rem; }

    /* Footer */
    .footer-links { flex-direction: column; align-items: center; gap: 10px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .ca-box { flex-direction: column; text-align: center; }

    /* Trollbox Mobile */
    .chat-widget { width: 90%; right: 5%; bottom: 10px; }
}

/* --- TAMBAHAN DI PALING BAWAH STYLE.CSS --- */

@media (max-width: 600px) {
    /* 1. Perbaiki Header agar tidak sesak */
    .brand { 
        font-size: 0.9rem; /* Kecilkan nama brand dikit */
    }
    
    .btn-vip-nav {
        background: transparent !important; /* Hapus background blok */
        border: 1px solid var(--accent-orange); /* Ganti jadi garis pinggir */
        color: var(--accent-orange) !important; /* Teks oranye */
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    /* 2. Perbaiki Kotak Sentiment & Manipulation */
    .market-metrics {
        gap: 5px; /* Kurangi jarak antar kotak */
    }
    
    .metric-box {
        padding: 8px 5px; /* Kurangi padding dalam */
    }
    
    .metric-box .label {
        font-size: 0.55rem; /* Label lebih kecil */
    }
    
    .metric-box .value {
        font-size: 0.95rem; /* Value (EXTREME...) lebih kecil agar muat */
        line-height: 1.1;
    }
}

/* ==================================================
   UPGRADE: THE FUGAZI PRINCIPLES (CYBER-DATA STYLE)
   Tambahkan ini di paling bawah style.css
   ================================================== */

/* 1. Layout Grid Container */
#glossary .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Sedikit lebih lebar */
    gap: 20px;
}

/* 2. Desain Kartu (Normal State) */
#glossary .data-card {
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    border: 1px solid #222;
    border-left: 2px solid #333; /* Aksen kiri tipis */
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Dekorasi Teknis di Pojok Kanan Atas */
#glossary .data-card::after {
    content: "/// SECURE_DATA";
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: #333;
    transition: color 0.3s;
}

/* 3. Efek Hover (Saat Mouse Masuk) */
#glossary .data-card:hover {
    transform: translateY(-5px); /* Naik sedikit */
    border-color: #444;
    border-left-color: var(--accent-orange); /* Aksen kiri jadi oranye */
    box-shadow: 0 10px 30px -10px rgba(255, 149, 0, 0.15); /* Glow oranye halus */
    background: linear-gradient(180deg, #0e0e0e 0%, #080808 100%);
}

#glossary .data-card:hover::after {
    color: var(--accent-orange); /* Teks pojok jadi menyala */
    content: "/// READING...";
}

/* 4. Styling Judul (Header Kartu) */
#glossary .card-top {
    border-bottom: 1px dashed #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

#glossary .asset-code {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 900;
    color: #e0e0e0;
    letter-spacing: 1px;
    transition: text-shadow 0.3s;
}

/* Efek Panah ">>" */
#glossary .asset-code::before {
    content: ">> ";
    color: var(--accent-orange);
    margin-right: 5px;
}

/* Saat Hover, Judulnya Glow */
#glossary .data-card:hover .asset-code {
    color: white;
    text-shadow: 0 0 8px rgba(255, 149, 0, 0.6);
}

/* 5. Styling Deskripsi (Isi Teks) */
#glossary .desc {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s;
}

#glossary .data-card:hover .desc {
    color: #ccc; /* Teks jadi lebih terang saat hover */
}

/* Mobile Adjustment */
@media (max-width: 600px) {
    #glossary .grid-container {
        grid-template-columns: 1fr; /* 1 Kolom penuh di HP */
    }
}

/* ==================================================
   UPGRADE: GLOBAL INDEX UI (CYBERPUNK OVERHAUL)
   Paste ini di paling bawah style.css
   ================================================== */

/* --- 1. HERO SECTION UPGRADE --- */
.transcript-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #333;
    border-left: 3px solid var(--accent-orange); /* Aksen oranye tebal */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.transcript-box:hover {
    border-color: #555;
    box-shadow: 0 0 30px rgba(255, 149, 0, 0.1); /* Glow halus */
}

.metric-box {
    background: linear-gradient(135deg, #111 0%, #050505 100%);
    border: 1px solid #333;
    transition: transform 0.2s;
}

.metric-box:hover {
    transform: scale(1.05);
    border-color: var(--accent-orange);
}

/* --- 2. WALL OF SHAME (DANGER STYLE) --- */
/* Kartu terlihat seperti file peringatan */
#shame .data-card {
    background: #080808;
    border: 1px solid #333;
    position: relative;
    transition: all 0.3s ease;
    /* Pola garis miring halus di background */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.01),
        rgba(255, 255, 255, 0.01) 10px,
        transparent 10px,
        transparent 20px
    );
}

#shame .data-card:hover {
    border-color: var(--signal-red); /* Border jadi merah saat hover */
    transform: translateY(-5px);
    box-shadow: 0 10px 40px -10px rgba(255, 59, 48, 0.2); /* Glow merah seram */
}

/* Stempel REKT berdenyut saat hover */
#shame .data-card:hover .stamp-overlay {
    animation: stampPulse 1s infinite;
    color: var(--signal-red);
    border-color: var(--signal-red);
    opacity: 1;
}

@keyframes stampPulse {
    0% { transform: translate(-50%, -50%) rotate(-20deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(-20deg) scale(1.1); }
    100% { transform: translate(-50%, -50%) rotate(-20deg) scale(1); }
}

/* --- 3. STRATEGY & CALCULATOR (TACTICAL UI) --- */
.terminal-window {
    border: 1px solid var(--accent-blue); /* Border biru neon */
    box-shadow: 0 0 15px rgba(0, 168, 232, 0.1);
}

.dashboard-panel {
    border: 1px solid var(--accent-orange); /* Border oranye neon */
    background: radial-gradient(circle at top right, rgba(255, 149, 0, 0.05), transparent 40%);
}

/* Tombol Kalkulator Keren */
#calcBtn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#calcBtn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: var(--accent-orange);
    transition: left 0.3s ease;
    z-index: -1;
}

#calcBtn:hover {
    color: black;
    border-color: var(--accent-orange);
}

#calcBtn:hover::before {
    left: 0; /* Efek slide warna background */
}

/* --- 4. ROADMAP (ACTIVE PROCESS) --- */
#roadmap .roadmap-list li {
    transition: background 0.3s;
}

#roadmap .roadmap-list li:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Fase Aktif Lebih Menonjol */
#roadmap .active-phase {
    border-color: var(--signal-green);
    background: linear-gradient(90deg, rgba(0, 255, 65, 0.05) 0%, transparent 100%);
    position: relative;
    overflow: hidden;
}

/* Garis scanning di fase aktif */
#roadmap .active-phase::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 100%;
    background: var(--signal-green);
    box-shadow: 0 0 10px var(--signal-green);
    animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
    0% { left: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* --- 5. SECTION HEADERS (DECORATION) --- */
.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-orange), transparent);
    opacity: 0.5;
}

/* ==================================================
   UPGRADE: FOOTER (SYSTEM CONTROL PANEL STYLE)
   Paste ini di paling bawah style.css
   ================================================== */

.main-footer {
    margin-top: 100px;
    background: #080808;
    border-top: 2px solid var(--accent-orange);
    position: relative;
    padding: 0; /* Reset padding */
}

/* Dekorasi garis-garis di atas footer */
.main-footer::before {
    content: "";
    position: absolute;
    top: -2px; left: 0; width: 100%; height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--accent-orange) 0,
        var(--accent-orange) 20px,
        transparent 20px,
        transparent 40px
    );
    opacity: 0.5;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; /* 3 Kolom */
    gap: 30px;
    align-items: start;
}

/* --- KOLOM 1: CONTRACT ADDRESS (CA) --- */
.footer-panel h4 {
    font-family: var(--font-mono);
    color: var(--accent-orange);
    font-size: 0.8rem;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ca-display-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.3s;
}

.ca-display-box:hover {
    border-color: var(--accent-orange);
}

.ca-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #ccc;
    word-break: break-all;
    line-height: 1.4;
}

.btn-copy-tech {
    background: var(--accent-orange);
    color: black;
    border: none;
    padding: 8px;
    font-family: var(--font-mono);
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.75rem;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.btn-copy-tech:hover {
    background: white;
    box-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
}

/* --- KOLOM 2: LINKS MATRIX --- */
.social-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tech-link {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #111;
    border: 1px solid #333;
    color: #888;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.tech-link:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateX(5px);
    background: rgba(0, 168, 232, 0.05);
}

/* --- KOLOM 3: SYSTEM STATUS --- */
.system-status-box {
    border: 1px solid #333;
    padding: 15px;
    background: #050505;
}

.status-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #666;
    border-bottom: 1px dashed #222;
    padding-bottom: 5px;
}

.status-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.status-val { color: var(--signal-green); }
.status-val.blink { animation: blinking 2s infinite; }

/* --- FOOTER BOTTOM BAR --- */
.footer-bottom-bar {
    border-top: 1px solid #222;
    background: #050505;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #444;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr; /* Tumpuk jadi 1 kolom */
        gap: 40px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}