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

body { 
    background-color: #000; 
    font-family: 'VT323', monospace; 
    display: block; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100vw; height: 100vh; 
    overflow: hidden; 
    overscroll-behavior: none; 
}

/* =========================================
   BACKGROUND BLUR
========================================= */
.blurred-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.4); 
    transform: scale(1.1); 
    z-index: 0;
}

/* =========================================
   HACKER SIDE PANELS (Mengisi ruang ultrawide)
========================================= */
.side-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(50vw - 52vh); 
    height: 70vh;
    background: rgba(0, 15, 0, 0.65);
    border: 0.2vh solid rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 2vh rgba(0, 255, 0, 0.1), inset 0 0 2vh rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 5;
    padding: 3vh;
    color: #0f0;
    font-family: 'VT323', monospace;
    overflow: hidden;
    display: none; 
    flex-direction: column;
}

@media (min-aspect-ratio: 1.2/1) {
    .side-panel { display: flex; }
    .left-panel { left: 2vw; }
    .right-panel { right: 2vw; }
}

.panel-header {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2vh;
    border-bottom: 0.1vh solid rgba(0, 255, 0, 0.5);
    padding-bottom: 1.5vh;
    margin-bottom: 2vh;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 3px #fff;
}
.panel-content p { font-size: 1.8vh; margin-bottom: 1vh; }
.panel-content pre { font-size: 1.2vh; line-height: 1.2; margin-bottom: 2vh; text-align: center; color: #0a0; }
.progress-bar { width: 100%; height: 1.5vh; border: 0.1vh solid #0f0; margin-top: 1vh; padding: 0.2vh; }
.progress-fill { width: 0%; height: 100%; background-color: #0f0; animation: loadBar 4s linear infinite; }
@keyframes loadBar { 0% { width: 0%; } 100% { width: 100%; } }

/* =========================================
   MAIN COMPUTER (Tengah)
========================================= */
/* Menggunakan 100vh menjadikan layout sempurna di KEDUA platform:
   - Di Desktop: Tinggi akan fit 100% ke layar, memunculkan side-panels di ruang kosong.
   - Di Mobile: Komputer akan zoom-in memenuhi ukuran vertikal HP dengan sangat besar. */
.background-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vh; height: 100vh;
    background-image: url('bg.jpg');
    background-size: 100% 100%;
    z-index: 1;
    box-shadow: 0 0 5vh rgba(0,0,0,0.8);
}

.lamp-glow {
    position: absolute;
    top: 25%; left: -5%; width: 35%; height: 50%;
    background: radial-gradient(circle, rgba(255, 170, 80, 0.45) 0%, rgba(255, 170, 80, 0) 65%);
    mix-blend-mode: color-dodge; 
    animation: lampFlicker 5s infinite;
    pointer-events: none;
    z-index: 3;
}

@keyframes lampFlicker {
    0%, 100% { opacity: 1; }
    1% { opacity: 0.4; }
    2% { opacity: 1; }
    3% { opacity: 0.1; }
    4% { opacity: 1; }
    5% { opacity: 0.8; }
    6% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0.3; }
    52% { opacity: 1; }
    80% { opacity: 0.9; }
    81% { opacity: 1; }
}

/* =========================================
   PIXEL OVERLAY (Dikembalikan ke dalam background-wrapper agar berada DI BAWAH layar teks)
========================================= */
.pixel-overlay {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.6) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.6)),
        linear-gradient(45deg, rgba(0,0,0,0.6) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.6));
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    pointer-events: none;
    z-index: 2; /* Harus di bawah screen-overlay (z-index: 5) */
}

/* =========================================
   SCREEN & CONTENT (Semua satuan menggunakan vh)
========================================= */
.screen-overlay {
    position: absolute;
    top: 29.3%; left: 27.2%;
    width: 45.6%; height: 34.6%;
    background-color: #031203; 
    border-radius: 2vh; 
    overflow: hidden;
    box-shadow: inset 0 0 2vh rgba(0,0,0,1), inset 0 0 0.5vh #000;
    z-index: 5;
}

.content {
    padding: 6% 8%; color: #0f0; text-shadow: 0 0 2px #0f0; height: 100%; position: relative; z-index: 10; overflow-y: auto; font-size: 2vh; line-height: 1.3;
}
.content::-webkit-scrollbar { width: 1vh; }
.content::-webkit-scrollbar-track { background: #000; }
.content::-webkit-scrollbar-thumb { background: #0a0; }
.content::-webkit-scrollbar-thumb:hover { background: #0f0; }

header { text-align: center; margin-bottom: 2vh; border-bottom: 0.2vh dashed #0f0; padding-bottom: 1.5vh; }
h1 { font-family: 'Press Start 2P', cursive; font-size: 2.8vh; margin-bottom: 1vh; text-shadow: 0 0 5px #0f0; }
.subtitle { font-family: 'Press Start 2P', cursive; font-size: 1vh; }
h2 { font-family: 'Press Start 2P', cursive; font-size: 1.4vh; margin-bottom: 1.5vh; color: #fff; text-shadow: 0 0 3px #fff; }

.terminal-text p { font-size: 1.8vh; margin-bottom: 1vh; }
.terminal-text .desc { color: #8f8; font-size: 1.6vh; }
.pixel-box { border: 0.2vh solid #0f0; padding: 1.5vh; background: rgba(0,255,0,0.05); margin-bottom: 2vh; }

.btn { display: inline-block; color: #000; background-color: #0f0; padding: 0.8vh 1.5vh; text-decoration: none; font-family: 'Press Start 2P', cursive; font-size: 1.5vh; text-transform: uppercase; transition: all 0.1s; }
.btn:hover { background-color: #fff; color: #000; }

.blink { animation: blink 1s step-end infinite; }
.cursor { animation: blink 1s step-end infinite; background: #0f0; color: transparent; margin-left: 0.5vh; }
@keyframes blink { 50% { opacity: 0; } }

.glass-glare { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255,255,255,0) 35%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 55% ); transform: rotate(25deg); pointer-events: none; z-index: 15; }
.scanlines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 50%); background-size: 100% 0.4vh; z-index: 12; pointer-events: none; }
.crt { animation: flicker 0.15s infinite; }
@keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1; } 100% { opacity: 0.98; } }

/* MENU */
.menu-item { border-left: 0.3vh solid #0f0; padding-left: 1vh; margin-bottom: 2vh; }
.menu-item p { font-family: 'Press Start 2P', cursive; font-size: 1.1vh; margin-bottom: 1.2vh; color: #fff; text-shadow: 0 0 2px #fff; }
.social-btn { display: inline-flex; align-items: center; background-color: #0f0; color: #000; padding: 0.6vh 1.2vh; text-decoration: none; font-family: 'Press Start 2P', cursive; font-size: 1.2vh; font-weight: bold; transition: background-color 0.1s; box-shadow: 0.2vh 0.2vh 0 #005500; }
.social-btn svg { width: 1.4vh; height: 1.4vh; margin-right: 0.8vh; fill: #000; }
.social-btn:hover { background-color: #fff; }
.ca-box { display: flex; align-items: center; justify-content: space-between; background: rgba(0, 255, 0, 0.1); padding: 0.6vh 1vh; border: 0.2vh solid #0f0; width: 100%; }
#ca-text { font-family: 'VT323', monospace; font-size: 2.2vh; color: #0f0; word-break: break-all; margin-right: 1vh; }
.btn-small { background-color: #0f0; color: #000; border: none; padding: 0.5vh 1vh; font-family: 'Press Start 2P', cursive; font-size: 1vh; cursor: pointer; box-shadow: 0.2vh 0.2vh 0 #005500; transition: all 0.1s; white-space: nowrap; }
.btn-small:hover { background-color: #fff; }
.btn-text-only { display: inline-block; color: #0f0; text-decoration: none; font-family: 'Press Start 2P', cursive; font-size: 1.2vh; margin-top: 0.5vh; transition: all 0.2s; }
.btn-text-only:hover { color: #fff; text-shadow: 0 0 5px #fff; }

/* PRELOADER */
#preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; }
.preloader-container { font-family: 'Press Start 2P', cursive; font-size: 2.5vh; color: #0f0; text-shadow: 0 0 5px #0f0; }
.preloader-cursor { animation: blink 1s step-end infinite; }