:root {
    --bg: #030303;
    --accent: #10b981;
    --accent-glow: rgba(16, 185, 129, 0.1);
    --neon-blue: #3b82f6;
    --neon-purple: #a855f7;
    /* DDoS sayfasında scanline yeşil tema kullanır */
    --scanline-r: 16;
    --scanline-g: 185;
    --scanline-b: 129;
}

.font-mono { font-family: 'JetBrains Mono', monospace; }

.glitch { position: relative; }
.glitch::before, .glitch::after { 
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: #000000; opacity: 0.8;
}
.glitch::before { left: 2px; text-shadow: -2px 0 #ff00c1; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00fff9; animation: glitch-anim-2 3s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 {
    0% { clip: rect(30px, 9999px, 10px, 0); }
    20% { clip: rect(80px, 9999px, 50px, 0); }
    40% { clip: rect(10px, 9999px, 90px, 0); }
    60% { clip: rect(50px, 9999px, 30px, 0); }
    80% { clip: rect(90px, 9999px, 70px, 0); }
    100% { clip: rect(20px, 9999px, 40px, 0); }
}
@keyframes glitch-anim-2 {
    0% { clip: rect(10px, 9999px, 40px, 0); }
    20% { clip: rect(40px, 9999px, 80px, 0); }
    40% { clip: rect(70px, 9999px, 10px, 0); }
    60% { clip: rect(30px, 9999px, 50px, 0); }
    80% { clip: rect(10px, 9999px, 90px, 0); }
    100% { clip: rect(80px, 9999px, 20px, 0); }
}

/* .spotlight, .scanline → global.css'den miras alınır (scanline rengi --scanline-r/g/b ile override) */

.radar-scan {
    position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
    background: conic-gradient(from 0deg, transparent, var(--accent), transparent 30%);
    opacity: 0.03; pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Fix for mobile scroll jumping */
@media (max-width: 768px) {
    section[class*="min-h-screen"] {
        min-height: 100svh !important;
    }
    .radar-scan {
        display: none; /* Conic gradients are very heavy on mobile */
    }
}

.cyber-stat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--accent-color);
    overflow: hidden;
    clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 10% 100%, 0 80%);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-stat-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--accent-color); opacity: 0.5;
    animation: stat-scan var(--scan-speed, 3s) linear infinite;
}
@keyframes stat-scan {
    0% { top: 0; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.cyber-stat-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 0 30px var(--accent-glow);
}
.stat-glow { text-shadow: 0 0 15px var(--accent-glow); }