/* --- Root Variables & Reset --- */
:root {
    --bg-dark: #050505;
    --bg-panel: #0d0d0d;
    --sec-green: #00ff41; /* Klasik Hacker Green */
    --sec-green-glow: rgba(0, 255, 65, 0.5);
    --sec-red: #ff003c;
    --sec-red-glow: rgba(255, 0, 60, 0.5);
    --text-primary: #a0a0a0;
    --border-color: rgba(0, 255, 65, 0.2);
    --font-main: 'Source Code Pro', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 12px;
    height: 100vh;
    overflow: hidden; /* Mencegah scrollbar utama */
    display: flex;
    flex-direction: column;
}

/* --- Helpers --- */
.sec-green { color: var(--sec-green); text-shadow: 0 0 5px var(--sec-green-glow); }
.sec-red { color: var(--sec-red); text-shadow: 0 0 5px var(--sec-red-glow); }

/* --- Header --- */
header {
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-area { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 8px; height: 8px; background-color: var(--sec-green); border-radius: 50%; box-shadow: 0 0 10px var(--sec-green); animation: pulse 2s infinite; }
h1 { font-size: 1.4rem; color: #fff; text-shadow: 0 0 10px #fff; }
.header-info { display: flex; gap: 15px; color: var(--text-primary); font-weight: 600; }

/* --- Dashboard Container --- */
.dashboard-container {
    flex: 1;
    display: flex;
    gap: 15px;
    padding: 15px;
    height: calc(100vh - 100px); /* Adjust for header/footer */
}

/* --- Panel Styles --- */
.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.panel-header {
    background-color: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header h2 { font-size: 0.9rem; color: var(--sec-green); }
.window-controls span { margin-left: 5px; cursor: pointer; color: #555; }

.panel-content { flex: 1; position: relative; overflow: auto; }

/* --- Panel-Left: Matrix Canvas --- */
.panel-left { flex: 1; } /* Matrix Area */
#matrixCanvas { width: 100%; height: 100%; display: block; }

/* --- Panel-Center: Map --- */
.panel-center { flex: 1.5; display: flex; flex-direction: column; }
.map-bg { 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/e0/Map_of_the_world_by_the_UN_in_2008.svg'); /* Ganti dengan gambar peta yang lebih 'tech' jika perlu */
    background-size: cover;
    background-position: center;
    filter: invert(1) brightness(0.2) sepia(100%) hue-rotate(80deg) saturate(300%); /* Trick CSS untuk mengubah peta biasa jadi hijau neon */
}
.map-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); }

.attack-dot { position: absolute; width: 6px; height: 6px; background-color: var(--sec-red); border-radius: 50%; box-shadow: 0 0 10px var(--sec-red-glow); animation: ping 1.5s infinite; }
.dot-1 { top: 30%; left: 20%; }
.dot-2 { top: 60%; left: 70%; animation-delay: 0.5s; }
.dot-3 { top: 15%; left: 85%; animation-delay: 1s; }

.vulnerability-scan { padding: 10px; border-top: 1px solid var(--border-color); }
.scan-bar { display: flex; align-items: center; gap: 10px; }
.progress-bar-bg { flex: 1; height: 8px; background-color: #222; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background-color: var(--sec-green); box-shadow: 0 0 5px var(--sec-green-glow); }

/* --- Panel-Right: Sub-Panels --- */
.panel-right { flex: 1; display: flex; flex-direction: column; gap: 10px; background: transparent; border: none; }
.sub-panel { flex: 1; background-color: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }

.text-terminal { 
    padding: 10px; 
    font-size: 0.8rem; 
    color: var(--sec-green); 
    overflow-y: scroll; /* Mengizinkan scroll di terminal */
    scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
}
.text-terminal::-webkit-scrollbar { width: 5px; }
.text-terminal::-webkit-scrollbar-thumb { background-color: var(--border-color); }

/* --- Footer --- */
footer {
    border-top: 1px solid var(--border-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-panel);
}

.community-logos { display: flex; gap: 15px; align-items: center; }
.community-logos img { height: 20px; filter: grayscale(100%) brightness(150%); opacity: 0.7; }

/* --- Animations --- */
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes ping { 0% { transform: scale(1); opacity: 1; } 75% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }

/* Glitch Overlay Effect */
.glitch-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.003) 0px, rgba(255,255,255,0.003) 1px, transparent 1px, transparent 6px);
    pointer-events: none; z-index: 10;
}
/* Container Ticker Utama */
.ticker-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Memotong konten yang keluar */
}

/* List yang bergerak */
.ticker-list {
    position: absolute;
    width: 100%;
    top: 100%; /* Mulai dari paling bawah */
    /* Animasi: nama_animasi durasi timing_function loop */
    animation: rosterScrollUp 25s linear infinite;
}

/* Jeda animasi saat mouse diarahkan (opsional, agar bisa dibaca) */
.ticker-wrapper:hover .ticker-list {
    animation-play-state: paused;
}

/* --- Gaya Item Profil Agen (Satu Baris) --- */
.agent-item {
    position: relative;
    z-index: 11;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin: 12px 15px; /* Jarak antar baris */
    background: rgba(255, 255, 255, 0.04); /* Lebih netral agar foto tidak terpengaruh warna hijau */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px; /* Sudut agak melengkung */
    gap: 15px;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s; /* Efek hover halus */
}

/* Efek hover pada item */
.agent-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(5px); /* Geser sedikit ke kanan */
}

/* --- Gaya Foto Profil Melingkar --- */
.agent-photo-container {
    position: relative;
    width: 45px;
    height: 45px;
    flex-shrink: 0; /* Mencegah foto gepeng */
    background-color: #111;
    overflow: hidden;
    border-radius: 50%;
}

.agent-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Membuat gambar melingkar */
    object-fit: cover; /* Memastikan foto kotak memenuhi lingkaran */
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
    filter: none; /* Pastikan gambar tidak diberi efek warna tambahan */
    /*mix-blend-mode: normal;*/
    /*background-color: transparent;*/
}

/* Titik Status Kecil di pojok foto */
.status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-panel); /* Ring pemisah */
}

/* --- Gaya Teks Profil --- */
.agent-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.agent-codename {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff; /* Nama putih agar menonjol */
    text-shadow: 0 0 8px rgba(255,255,255,0.25);
    margin-bottom: 3px;
}

.agent-meta {
    font-size: 0.78rem;
    color: #d8d8d8;
    opacity: 0.98;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* --- Keyframes untuk Scroll Berulang (Seamless) --- */
@keyframes rosterScrollUp {
    0% {
        top: 100%; /* Mulai di bawah container */
    }
    100% {
        top: -130%; /* Berakhir jauh di atas container (sesuaikan jika data banyak) */
    }
}
.agent-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* Memastikan gambar memenuhi lingkaran tanpa terdistorsi */
    border: 2px solid var(--sec-green);
    background-color: #1a1a1a; /* Warna latar belakang jika gambar belum muncul */
    display: block;
}