/* --- MOBİL UYUMLULUK SİSTEMİ --- */
@media (max-width: 768px) {
    /* Ana kapsayıcıyı tek sütuna düşür */
    .main-wrapper, .archive-wrapper, .intel-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        transform: none !important; /* Mobil cihazlarda 3D eğimi kaldır (okunabilirliği artırır) */
    }

    /* Profil kartını ve yan panelleri tam genişlik yap */
    .profile-card, .side-panel, .tracker-box {
        width: 100% !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* Başlık boyutlarını küçült */
    h1 { font-size: 1.8rem !important; letter-spacing: 2px !important; }
    h2 { font-size: 1.4rem !important; }

    /* Izgara yapılarını (Envanter/Projeler) tek sütun yap */
    .inventory-grid, .projects-grid, .rig-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Donanım listesi öğelerini daralt */
    .rig-item { padding: 10px !important; }
    
    /* Terminali mobil ekranına sığdır */
    #terminal-overlay { height: 70vh !important; }
    #term-output { font-size: 0.9rem !important; }

    /* Detay kutusunu genişlet */
    .details-container {
        display: block !important;
        padding: 10px !important;
    }

    /* Arşiv sayfasındaki başlıkları sığdır */
    .decrypt-title { font-size: 1.2rem !important; }

    /* Müzik çaları mobil için küçült */
    #music-player {
        width: 180px !important;
        bottom: 10px !important;
        left: 10px !important;
        font-size: 0.8rem !important;
    }
}


        @font-face { font-family: 'RetroPixel'; src: url('https://fonts.cdnfonts.com/s/16304/VT323-Regular.woff') format('woff'); }
        body, html { height: 100%; margin: 0; font-family: 'RetroPixel', monospace; background-color: #050505; color: #39ff14; overflow: hidden; position: relative; user-select: none; }

        /* --- 1. MÜZİK ÇALAR (STYLES - EN BAŞA ALINDI, BOZULMASIN DİYE) --- */
        #music-player {
            position: fixed; bottom: 20px; left: 20px; width: 260px;
            background: rgba(0, 15, 0, 0.95); border: 1px solid #39ff14; padding: 10px;
            z-index: 7000; font-family: 'RetroPixel', monospace; font-size: 1rem;
            box-shadow: 0 0 15px rgba(57, 255, 20, 0.2); border-radius: 5px;
            display: flex; flex-direction: column; gap: 8px; transition: all 0.3s;
        }
        #music-player:hover { box-shadow: 0 0 25px rgba(57, 255, 20, 0.4); border-color: #fff; }
        .track-display { background: #000; border: 1px inset #1a6310; color: #39ff14; padding: 5px; font-size: 0.9rem; white-space: nowrap; overflow: hidden; position: relative; height: 20px; }
        .scrolling-text { display: inline-block; padding-left: 100%; animation: marquee 10s linear infinite; }
        .paused-text { animation-play-state: paused; }
        @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
        .player-controls { display: flex; justify-content: space-between; align-items: center; }
        .p-btn { background: transparent; border: 1px solid #1a6310; color: #1a6310; cursor: pointer; font-family: 'RetroPixel', monospace; font-size: 1rem; padding: 2px 8px; transition: 0.2s; }
        .p-btn:hover { background: #39ff14; color: #000; border-color: #39ff14; }
        .volume-slider { width: 60px; accent-color: #39ff14; }

        /* --- 2. ARKA PLANLAR --- */
        #starfield { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; pointer-events: none; }
        #matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; opacity: 0; transition: opacity 0.5s; background: black; pointer-events: none; }
        #matrix-canvas.active { opacity: 1; pointer-events: auto; }

        /* --- 3. LOADER --- */
        #page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.8s ease-in-out; }
        #page-loader.loaded { opacity: 0; pointer-events: none; }
        .loader-text { font-size: 1.5rem; color: #39ff14; letter-spacing: 3px; margin-bottom: 15px; animation: blink 1s infinite; }
        .loader-bar { width: 300px; height: 10px; border: 2px solid #1a6310; padding: 2px; }
        .loader-fill { width: 0%; height: 100%; background: #39ff14; box-shadow: 0 0 10px #39ff14; transition: width 0.5s; }

        /* --- 4. EFEKTLER --- */
        .crt-screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 5000; pointer-events: none; background: radial-gradient(circle, rgba(10, 10, 10, 0) 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,1) 100%); box-shadow: inset 0 0 100px rgba(0,0,0,0.7); }
        .scanlines { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 4000; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2)); background-size: 100% 4px; }
        
        .noise-overlay { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: 1000; pointer-events: none; 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.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.14; animation: noise-anim 0.2s infinite; }
        
        /* GÜNCELLENMİŞ NOISE ANİMASYONU */
        @keyframes noise-anim {    
            0% { transform: translate(0,0); }
            10% { transform: translate(-5%,-5%); }
            20% { transform: translate(-10%,5%); }
            30% { transform: translate(5%,-10%); }
            40% { transform: translate(-5%,15%); }
            50% { transform: translate(-10%,5%); }
            60% { transform: translate(15%,0); }
            70% { transform: translate(0,10%); }
            80% { transform: translate(-15%,0); }
            90% { transform: translate(10%,5%); }
            100% { transform: translate(5%,0); } 
        }

        .rgb-split { animation: flickerText 0.3s infinite; text-shadow: 2px 0 rgba(255, 0, 0, 0.3), -2px 0 rgba(0, 0, 255, 0.3); }
        @keyframes flickerText { 0% { opacity: 0.97; } 50% { opacity: 1; } 100% { opacity: 0.98; } }

        /* CURSOR */
        body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2339ff14' stroke='%23000' stroke-width='1' d='M2 2l6.5 19.5 3.5-7.5 7.5-1.5z'/%3E%3C/svg%3E"), auto; }
        a, button, input { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='none' stroke='%23ff0033' stroke-width='2'/%3E%3Cpath fill='%23ff0033' d='M16 4v8M16 20v8M4 16h8M20 16h8'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%2339ff14'/%3E%3C/svg%3E") 16 16, pointer !important; }

        /* SAĞ TIK MENÜSÜ */
        #context-menu { display: none; position: absolute; z-index: 10000; width: 200px; background: #000; border: 1px solid #39ff14; box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); padding: 5px; flex-direction: column; }
        .ctx-item { padding: 8px 12px; color: #39ff14; cursor: pointer; border-bottom: 1px solid #1a6310; font-size: 1rem; transition: 0.2s; }
        .ctx-item:last-child { border-bottom: none; }
        .ctx-item:hover { background: #39ff14; color: #000; }

        /* ANA YAPI */
        .main-wrapper { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px; min-height: 90vh; max-width: 1400px; margin: auto; position: relative; z-index: 2; transform: perspective(1000px) rotateX(1deg); }
        .intro-box { border: 2px solid #39ff14; background: rgba(0, 20, 0, 0.9); padding: 50px; box-shadow: 0 0 40px rgba(57, 255, 20, 0.2), inset 0 0 30px rgba(0,0,0,0.8); border-radius: 20px; text-align: center; max-width: 700px; width: 90%; position: relative; }
        .intro-box::before { content: ""; position: absolute; top: -5px; left: -5px; width: 20px; height: 20px; border-top: 3px solid #39ff14; border-left: 3px solid #39ff14; }
        .intro-box::after { content: ""; position: absolute; bottom: -5px; right: -5px; width: 20px; height: 20px; border-bottom: 3px solid #39ff14; border-right: 3px solid #39ff14; }
        
        h1 { border-bottom: 1px solid #39ff14; margin-top: 0; padding-bottom: 20px; font-size: 2.8rem; letter-spacing: 6px; margin-bottom: 40px; text-shadow: 3px 0 rgba(255,0,0,0.5), -3px 0 rgba(0,0,255,0.5); }
        
        #intro-text-container { text-align: center; min-height: 150px; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
        .log-line { font-size: 1.5rem; color: #888; transition: color 1s ease, text-shadow 1s ease; font-weight: bold; }
        .log-line.completed { color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, 0.8); }
        .cursor { display: inline-block; width: 12px; height: 1.5rem; background: #39ff14; margin-left: 8px; animation: blink 1s infinite; vertical-align: sub; box-shadow: 0 0 8px #39ff14; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        .start-btn { display: inline-block; border: 1px solid #39ff14; padding: 18px 50px; color: #39ff14; text-decoration: none; font-size: 1.6rem; background: rgba(0,0,0,0.9); border-radius: 5px; transition: all 0.3s ease; opacity: 0; pointer-events: none; text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 0 10px rgba(57, 255, 20, 0.2); }
        .start-btn.visible { opacity: 1; pointer-events: auto; animation: fadeIn 1s forwards; }
        .start-btn:hover { background: #39ff14; color: #000; box-shadow: 0 0 40px #39ff14; transform: scale(1.05); }
        @keyframes fadeIn { to { opacity: 1; } }

        /* --- TERMINAL --- */
        #terminal-overlay { position: fixed; top: -100%; left: 0; width: 100%; height: 50vh; background: rgba(0, 10, 0, 0.95); border-bottom: 2px solid #39ff14; z-index: 8000; transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; box-shadow: 0 10px 50px rgba(0,0,0,0.8); }
        #terminal-overlay.active { top: 0; }
        #term-output { flex: 1; overflow-y: auto; color: #ccc; font-size: 1.1rem; margin-bottom: 10px; }
        .term-line { margin: 2px 0; }
        .term-success { color: #39ff14; }
        .term-error { color: #ff3333; }
        .term-input-line { display: flex; align-items: center; color: #39ff14; font-size: 1.2rem; }
        #term-cmd { background: transparent; border: none; color: #39ff14; font-family: 'RetroPixel'; font-size: 1.2rem; width: 100%; outline: none; margin-left: 10px; }
    
    

        /* --- SNAKE GAME OVERLAY --- */
#game-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); z-index: 10000;
    display: none; flex-direction: column; align-items: center; justify-content: center;
}
#game-canvas {
    border: 2px solid #39ff14;
    box-shadow: 0 0 20px #39ff14;
    background: #000;
}
.game-info {
    color: #39ff14; font-family: 'RetroPixel'; font-size: 1.5rem; margin-bottom: 10px;
}