/* ============================================
   MODERN THEME - Dijital Portföy Tasarımı
   ============================================ */

:root {
    /* Dark Mode Colors - Neon Green Theme (Default) */
    --bg-primary: #0a1a0f;
    --bg-secondary: #0f2415;
    --bg-surface: #15201a;
    --bg-glass: rgba(0, 255, 136, 0.05);
    
    /* Accent Colors - Neon Green */
    --accent-primary: #00ff88;
    --accent-secondary: #00d977;
    --accent-tertiary: #00cc66;
    --accent-glow: rgba(0, 255, 136, 0.4);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0d4b8;
    --text-muted: #6b8f7a;
    
    /* Gradients - Neon Green */
    --gradient-primary: linear-gradient(135deg, #00ff88 0%, #00d977 50%, #00cc66 100%);
    --gradient-secondary: linear-gradient(135deg, #0a1a0f 0%, #0f2415 100%);
    --gradient-glow: radial-gradient(circle, rgba(0, 255, 136, 0.3) 0%, transparent 70%);
    
    /* Glass Effect */
    --glass-bg: rgba(0, 255, 136, 0.05);
    --glass-border: rgba(0, 255, 136, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Shadows - Neon Green */
    --shadow-glow: 0 0 20px rgba(0, 255, 136, 0.5);
    --shadow-glow-pink: 0 0 20px rgba(0, 217, 119, 0.5);
    --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.5);
    
    /* Background Mesh Gradient */
    --bg-mesh-gradient: radial-gradient(at 0% 0%, rgba(0, 255, 136, 0.15) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(0, 217, 119, 0.1) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(0, 204, 102, 0.1) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(0, 255, 136, 0.15) 0px, transparent 50%);
}

/* Light Mode Colors */
[data-theme="light"] {
    /* Light Mode Background - Pure White */
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-surface: #f8f9fa;
    --bg-glass: rgba(74, 85, 104, 0.08);
    
    /* Accent Colors - Lighter Metallic Gray for Light Mode */
    --accent-primary: #4a5568;
    --accent-secondary: #718096;
    --accent-tertiary: #a0aec0;
    --accent-glow: rgba(74, 85, 104, 0.25);
    
    /* Text Colors - Dark for Light Mode */
    --text-primary: #1a202c;
    --text-secondary: #2d3748;
    --text-muted: #4a5568;
    
    /* Gradients - Lighter Metallic Gray for Light Mode */
    --gradient-primary: linear-gradient(135deg, #4a5568 0%, #718096 50%, #a0aec0 100%);
    --gradient-secondary: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-glow: radial-gradient(circle, rgba(74, 85, 104, 0.2) 0%, transparent 70%);
    
    /* Glass Effect - Lighter Metallic Gray */
    --glass-bg: rgba(74, 85, 104, 0.06);
    --glass-border: rgba(74, 85, 104, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
    
    /* Shadows - Lighter Metallic Gray for Light Mode */
    --shadow-glow: 0 0 20px rgba(74, 85, 104, 0.3);
    --shadow-glow-pink: 0 0 20px rgba(113, 128, 150, 0.3);
    --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.12);
    
    /* Background Mesh Gradient - Removed (pure white background) */
    --bg-mesh-gradient: none;
}

/* Base Body Styles */
body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300; /* Quicksand Light */
    background: var(--bg-primary);
    background-image: var(--bg-mesh-gradient);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Light mode - ensure pure white background */
[data-theme="light"] body {
    background: #ffffff;
    background-image: none;
}

/* Smooth Theme Transition */
* {
    transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Glassmorphism Utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Effect */
.glow {
    position: relative;
}

.glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: var(--gradient-glow);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.glow:hover::before {
    opacity: 1;
}

/* Magnetic Button Effect */
.magnetic-btn {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.magnetic-btn:hover {
    transform: translateY(-2px);
}

/* Particle Background */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    background: transparent;
    will-change: transform; /* GPU acceleration */
    transform: translateZ(0); /* Hardware acceleration */
}

/* Hero section'da particles'ı gizle - video net görünsün */
.modern-hero ~ * .particles-container,
body:has(.modern-hero) .particles-container {
    opacity: 0;
    visibility: hidden;
}

/* Hero section görünürken particles'ı gizle */
.modern-hero {
    isolation: isolate; /* Yeni stacking context */
}

/* Hero section içinde particles gizle */
#hero.modern-hero ~ * #particles-canvas {
    display: none !important;
}

/* Ensure particles are visible in light mode */
[data-theme="light"] .particles-container {
    opacity: 1;
    background: transparent;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--accent-primary);
    opacity: 0.6; /* Artırıldı: 0.3'ten 0.6'ya */
    animation: float 20s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5); /* Glow efekti - Neon Yeşil */
}

/* Light mode particles - darker green for visibility */
[data-theme="light"] .particle {
    background: var(--accent-primary);
    box-shadow: 0 0 10px rgba(74, 85, 104, 0.4);
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(100px, -100px) scale(1.2);
    }
    50% {
        transform: translate(-50px, 100px) scale(0.8);
    }
    75% {
        transform: translate(-100px, -50px) scale(1.1);
    }
}

/* Custom Cursor */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    mix-blend-mode: difference;
    will-change: left, top;
    transform: translateZ(0) translate(-50%, -50%); /* GPU acceleration + center */
    left: 0;
    top: 0;
}

.custom-cursor.hover {
    transform: translateZ(0) translate(-50%, -50%) scale(1.5);
    border-color: var(--accent-secondary);
}

.custom-cursor-dot {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--accent-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    mix-blend-mode: difference;
    will-change: left, top;
    transform: translateZ(0) translate(-50%, -50%); /* GPU acceleration + center */
    left: 0;
    top: 0;
}

/* 3D Card Effect */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.card-3d:hover {
    transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

/* Text Reveal Animation */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.text-reveal.revealed span {
    transform: translateY(0);
}

/* Parallax Container */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-element {
    will-change: transform;
}

/* Interactive Grid */
.interactive-grid {
    display: grid;
    gap: 2rem;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
}

.grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.grid-item:hover::before {
    opacity: 0.2;
}

.grid-item-content {
    position: relative;
    z-index: 2;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--bg-surface);
    z-index: 10000;
}

.scroll-progress {
    height: 100%;
    background: var(--gradient-primary);
    width: 0%;
    transition: width 0.1s ease;
}

/* Loading Animation */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--bg-surface);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background: var(--accent-primary);
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--accent-primary);
    color: var(--text-primary);
}