/* Neon Arkaplan Efektleri */
.neon-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.neon-particle {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--neon-blur, 80px));
    opacity: var(--neon-opacity, 0.6);
    mix-blend-mode: screen;
    will-change: transform;
}

/* Floating Animasyon */
@keyframes neonFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    75% {
        transform: translate(20px, 30px) scale(1.05);
    }
}

.neon-animation-floating .neon-particle {
    animation: neonFloat 20s infinite ease-in-out;
}

.neon-animation-floating .neon-particle:nth-child(2) {
    animation-delay: -5s;
    animation-duration: 25s;
}

.neon-animation-floating .neon-particle:nth-child(3) {
    animation-delay: -10s;
    animation-duration: 30s;
}

.neon-animation-floating .neon-particle:nth-child(4) {
    animation-delay: -15s;
    animation-duration: 22s;
}

.neon-animation-floating .neon-particle:nth-child(5) {
    animation-delay: -7s;
    animation-duration: 28s;
}

/* Orbiting Animasyon */
@keyframes neonOrbit {
    0% {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

.neon-animation-orbiting .neon-particle {
    animation: neonOrbit 30s infinite linear;
    transform-origin: center center;
}

.neon-animation-orbiting .neon-particle:nth-child(1) {
    animation-duration: 25s;
    transform-origin: 30% 50%;
}

.neon-animation-orbiting .neon-particle:nth-child(2) {
    animation-duration: 35s;
    transform-origin: 70% 50%;
    animation-direction: reverse;
}

.neon-animation-orbiting .neon-particle:nth-child(3) {
    animation-duration: 40s;
    transform-origin: 50% 30%;
}

.neon-animation-orbiting .neon-particle:nth-child(4) {
    animation-duration: 30s;
    transform-origin: 50% 70%;
    animation-direction: reverse;
}

/* Pulsing Animasyon */
@keyframes neonPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
}

.neon-animation-pulsing .neon-particle {
    animation: neonPulse 4s infinite ease-in-out;
}

.neon-animation-pulsing .neon-particle:nth-child(2) {
    animation-delay: 0.8s;
    animation-duration: 5s;
}

.neon-animation-pulsing .neon-particle:nth-child(3) {
    animation-delay: 1.6s;
    animation-duration: 4.5s;
}

.neon-animation-pulsing .neon-particle:nth-child(4) {
    animation-delay: 2.4s;
    animation-duration: 5.5s;
}

.neon-animation-pulsing .neon-particle:nth-child(5) {
    animation-delay: 3.2s;
    animation-duration: 4.8s;
}

/* Flowing Animasyon */
@keyframes neonFlow {
    0% {
        transform: translateX(-100px) translateY(0) scale(1);
    }
    50% {
        transform: translateX(calc(100vw + 100px)) translateY(-100px) scale(1.2);
    }
    100% {
        transform: translateX(calc(200vw + 100px)) translateY(0) scale(1);
    }
}

.neon-animation-flowing .neon-particle {
    animation: neonFlow 15s infinite linear;
}

.neon-animation-flowing .neon-particle:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 18s;
}

.neon-animation-flowing .neon-particle:nth-child(3) {
    animation-delay: -6s;
    animation-duration: 20s;
}

.neon-animation-flowing .neon-particle:nth-child(4) {
    animation-delay: -9s;
    animation-duration: 16s;
}

.neon-animation-flowing .neon-particle:nth-child(5) {
    animation-delay: -12s;
    animation-duration: 22s;
}

/* Spiral Animasyon */
@keyframes neonSpiral {
    0% {
        transform: rotate(0deg) translateX(150px) rotate(0deg) scale(1);
    }
    100% {
        transform: rotate(360deg) translateX(150px) rotate(-360deg) scale(1.3);
    }
}

.neon-animation-spiral .neon-particle {
    animation: neonSpiral 20s infinite linear;
    transform-origin: center center;
}

.neon-animation-spiral .neon-particle:nth-child(1) {
    animation-duration: 18s;
    transform-origin: 50% 50%;
}

.neon-animation-spiral .neon-particle:nth-child(2) {
    animation-duration: 22s;
    transform-origin: 50% 50%;
    animation-direction: reverse;
}

.neon-animation-spiral .neon-particle:nth-child(3) {
    animation-duration: 25s;
    transform-origin: 50% 50%;
}

.neon-animation-spiral .neon-particle:nth-child(4) {
    animation-duration: 20s;
    transform-origin: 50% 50%;
    animation-direction: reverse;
}

.neon-animation-spiral .neon-particle:nth-child(5) {
    animation-duration: 24s;
    transform-origin: 50% 50%;
}

/* Wave Animasyon */
@keyframes neonWave {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(100px) translateY(-50px) scale(1.1);
    }
    50% {
        transform: translateX(200px) translateY(0) scale(1);
    }
    75% {
        transform: translateX(100px) translateY(50px) scale(1.1);
    }
}

.neon-animation-wave .neon-particle {
    animation: neonWave 12s infinite ease-in-out;
}

.neon-animation-wave .neon-particle:nth-child(2) {
    animation-delay: -2.4s;
    animation-duration: 14s;
}

.neon-animation-wave .neon-particle:nth-child(3) {
    animation-delay: -4.8s;
    animation-duration: 16s;
}

.neon-animation-wave .neon-particle:nth-child(4) {
    animation-delay: -7.2s;
    animation-duration: 13s;
}

.neon-animation-wave .neon-particle:nth-child(5) {
    animation-delay: -9.6s;
    animation-duration: 15s;
}

/* Particles Animasyon */
@keyframes neonParticles {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(50px, -50px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translate(-30px, 30px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(30px, 50px) scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
}

.neon-animation-particles .neon-particle {
    animation: neonParticles 18s infinite ease-in-out;
}

.neon-animation-particles .neon-particle:nth-child(2) {
    animation-delay: -3.6s;
    animation-duration: 20s;
}

.neon-animation-particles .neon-particle:nth-child(3) {
    animation-delay: -7.2s;
    animation-duration: 22s;
}

.neon-animation-particles .neon-particle:nth-child(4) {
    animation-delay: -10.8s;
    animation-duration: 19s;
}

.neon-animation-particles .neon-particle:nth-child(5) {
    animation-delay: -14.4s;
    animation-duration: 21s;
}

/* Grid Animasyon */
.neon-animation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
}

@keyframes neonGrid {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.8;
    }
}

.neon-animation-grid .neon-particle {
    animation: neonGrid 8s infinite ease-in-out;
    width: 200px;
    height: 200px;
    margin: auto;
}

.neon-animation-grid .neon-particle:nth-child(1) {
    animation-delay: 0s;
}

.neon-animation-grid .neon-particle:nth-child(2) {
    animation-delay: 1s;
}

.neon-animation-grid .neon-particle:nth-child(3) {
    animation-delay: 2s;
}

.neon-animation-grid .neon-particle:nth-child(4) {
    animation-delay: 1.5s;
}

.neon-animation-grid .neon-particle:nth-child(5) {
    animation-delay: 0.5s;
}

/* Responsive */
@media (max-width: 768px) {
    .neon-particle {
        filter: blur(calc(var(--neon-blur, 80px) * 0.7));
    }
    
    .neon-animation-grid .neon-particle {
        width: 150px;
        height: 150px;
    }
}