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

:root { --primary-black: #000000; --dark-bg: #0f0f23; --darker-bg: #0a0a1a; --card-bg: #1a1a2e; --border-dark: #2d2d4a; --primary-purple: #8b5cf6; --secondary-purple: #a855f7; --dark-purple: #7c3aed; --light-purple: #c084fc; --indigo: #6366f1; --violet: #8b5cf6; --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%); --text-light: #f8fafc; --text-gray-light: #cbd5e1; --text-purple-light: #e9d5ff; --white: #ffffff; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--text-light); background: var(--dark-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
header { padding: 20px 0; background: rgba(15, 15, 35, 0.95); border-bottom: 0.5px solid rgba(139, 92, 246, 0.2); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.3s ease; }

.logo { font-size: 1.75rem; font-weight: 600; color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 12px; transition: all 0.3s ease; letter-spacing: -0.01em; }

    .logo:hover { color: var(--light-purple); transform: translateY(-1px); }

.logo-icon { width: 32px; height: 32px; background: var(--purple-gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; }

/* Hero Section - Ultra Dynamic */
.hero { padding: 1px; text-align: center; position: relative; background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f23 70%); color: var(--white); overflow: hidden; min-height: 90vh; display: flex; align-items: center; }

/* Advanced Dynamic Background */
.hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }

/* Morphing Blobs */
.morphing-blobs { position: absolute; width: 100%; height: 100%; }

.blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.3; animation: morph 15s infinite ease-in-out; }

.blob-1 { width: 300px; height: 300px; background: linear-gradient(45deg, #8b5cf6, #a855f7); top: 20%; left: 10%; animation-delay: 0s; }

.blob-2 { width: 400px; height: 400px; background: linear-gradient(45deg, #a855f7, #c084fc); top: 60%; right: 15%; animation-delay: -5s; }

.blob-3 { width: 250px; height: 250px; background: linear-gradient(45deg, #c084fc, #7c3aed); bottom: 30%; left: 60%; animation-delay: -10s; }

@keyframes morph {
    0%, 100% { transform: scale(1) rotate(0deg); border-radius: 50%; }
    25% { transform: scale(1.2) rotate(90deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { transform: scale(0.8) rotate(180deg); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    75% { transform: scale(1.1) rotate(270deg); border-radius: 40% 60% 60% 40% / 70% 30% 60% 40%; }
}

/* Floating Particles with Physics */
.particle-system { position: absolute; width: 100%; height: 100%; }

.particle { position: absolute; width: 3px; height: 3px; background: rgba(139, 92, 246, 0.8); border-radius: 50%; animation: particle-physics 20s infinite linear; }

@keyframes particle-physics {
    0% { transform: translateY(100vh) translateX(0) scale(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; transform: translateY(90vh) translateX(20px) scale(1) rotate(45deg); }
    50% { transform: translateY(50vh) translateX(-30px) scale(1.2) rotate(180deg); }
    90% { opacity: 1; transform: translateY(10vh) translateX(10px) scale(0.8) rotate(315deg); }
    100% { transform: translateY(-10vh) translateX(0) scale(0) rotate(360deg); opacity: 0; }
}

/* Energy Waves */
.energy-waves { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.wave { position: absolute; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); border-radius: 50%; animation: wave-pulse 8s infinite ease-in-out; }

.wave-1 { top: -50%; left: -50%; animation-delay: 0s; }

.wave-2 { top: -50%; left: -50%; animation-delay: -2s; }

.wave-3 { top: -50%; left: -50%; animation-delay: -4s; }

@keyframes wave-pulse {
    0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 0.3; }
}



.matrix-rain {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .matrix-column {
            position: absolute;
            top: -100%;
            width: 2px;
            background: linear-gradient(to bottom, transparent, rgba(139, 92, 246, 0.8), transparent);
            animation: matrix-fall 3s infinite linear;
        }

        @keyframes matrix-fall {
            0% {
                transform: translateY(-100vh);
                opacity: 0;
            }
            10%, 90% {
                opacity: 1;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0;
            }
        } 

.hero-content { position: relative; z-index: 10; max-width: 900px; margin: 0 auto; }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); padding: 12px 20px; border-radius: 50px; font-size: 0.9rem; font-weight: 500; color: var(--light-purple); margin-bottom: 32px; backdrop-filter: blur(10px); animation: fadeInUp 0.8s ease-out 0.2s both; box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1); }

.hero h1 { font-size: 3.8rem; font-weight: 800; margin-bottom: 24px; letter-spacing: -0.04em; line-height: 1.1; animation: fadeInUp 0.8s ease-out 0.4s both; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

.gradient-text { background: linear-gradient(135deg, #c084fc 0%, #e879f9 50%, #fbbf24 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 4s ease-in-out infinite; }

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero p { font-size: 1.3rem; font-weight: 400; max-width: 600px; margin: 0 auto 40px; line-height: 1.6; opacity: 0.9; animation: fadeInUp 0.8s ease-out 0.6s both; }

.hero-cta { animation: fadeInUp 0.8s ease-out 0.8s both; }

.cta-primary { padding: 18px 36px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; background: var(--purple-gradient); color: white; box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3); }

    .cta-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }

    .cta-primary:hover::before { left: 100%; }

    .cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4); }

/* Features Section */
.features { padding: 100px 0; background: var(--darker-bg); position: relative; }

    .features::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-purple), transparent); }

.features-header { text-align: center; margin-bottom: 80px; opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }

    .features-header.visible { opacity: 1; transform: translateY(0); }

    .features-header h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; background: var(--purple-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    .features-header p { font-size: 1.1rem; color: var(--text-gray-light); max-width: 500px; margin: 0 auto; }

.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.feature-card { border-radius: 16px; background: var(--card-bg); padding: 24px 24px; transition: all 0.4s ease; position: relative; border: 1px solid rgba(139, 92, 246, 0.1); overflow: hidden; opacity: 0; transform: translateY(50px); }

    .feature-card.visible { opacity: 1; transform: translateY(0); }

    .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--purple-gradient); transform: scaleX(0); transition: transform 0.4s ease; }

    .feature-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; }

    .feature-card:hover { background: linear-gradient(145deg, var(--card-bg) 0%, rgba(139, 92, 246, 0.05) 100%); transform: translateY(-8px); border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2); }

        .feature-card:hover::before { transform: scaleX(1); }

        .feature-card:hover::after { opacity: 1; }

.feature-icon { width: 64px; height: 64px; background: var(--purple-gradient); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: white; position: relative; z-index: 1; }

.feature-card h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-light); margin-bottom: 16px; letter-spacing: -0.01em; line-height: 1.3; position: relative; z-index: 1; }

.feature-card p { font-size: 0.95rem; font-weight: 400; color: var(--text-gray-light); line-height: 1.6; position: relative; z-index: 1; }

/* Footer */
footer { padding: 80px 0 48px; background: var(--primary-black); color: var(--text-light); border-top: 1px solid rgba(139, 92, 246, 0.2); position: relative; }

.footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; margin-bottom: 48px; }

.footer-brand h3 { font-size: 1.5rem; font-weight: 600; color: var(--white); margin-bottom: 20px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }

.footer-brand p { color: var(--text-gray-light); line-height: 1.6; margin-bottom: 32px; font-weight: 400; }

.footer-section h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 20px; color: var(--light-purple); letter-spacing: -0.01em; }

.footer-section p { color: var(--text-gray-light); line-height: 1.6; margin-bottom: 12px; font-weight: 400; display: flex; align-items: center; /* flex-start yerine center */ gap: 8px; }

.social-links { display: flex; gap: 16px; margin-top: 24px; }

.social-link { width: 48px; height: 48px; background: var(--card-bg); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-light); text-decoration: none; transition: all 0.3s ease; }

    .social-link:hover { background: var(--primary-purple); border-color: var(--primary-purple); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3); }

.footer-bottom { border-top: 1px solid rgba(139, 92, 246, 0.1); padding-top: 32px; text-align: center; color: var(--text-gray-light); font-size: 0.875rem; font-weight: 400; }

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }

    .fade-in.visible { opacity: 1; transform: translateY(0); }

/* Parallax Elements */
.parallax-element { transition: transform 0.1s ease-out; }

/* Responsive Design */
@media (max-width: 1024px) {
    .blob, .wave, .particle { animation-duration: 20s !important; will-change: transform; transform: translateZ(0); }

    .parallax-element { transform: translate3d(0, 0, 0); }

    .hero h1 { font-size: 3.2rem; }

    .features-header h2 { font-size: 1.9rem; }

    .features-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

    .footer-content { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }

    .hero { padding: 100px 0 60px; min-height: 80vh; }

        .hero h1 { font-size: 2.2rem; }

        .hero p { font-size: 1.1rem; }

    .features { padding: 60px 0; }

    .features-header h2 { font-size: 1.7rem; }

    .features-grid { grid-template-columns: 1fr; gap: 20px; }

    .feature-card { padding: 32px 24px; }

    .footer-content { grid-template-columns: 1fr; gap: 40px; }

    .social-links { justify-content: flex-start;  }
}

@media (max-width: 480px) {
    .logo { font-size: 1.4rem; }

    .hero h1 { font-size: 1.8rem; }

    .hero p { font-size: 1rem; }

    .features-header h2 { font-size: 1.5rem; }

    .feature-card { padding: 24px 20px; }
}

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

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: var(--dark-bg); }

::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 4px; }

    ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.6); }

/* Selection color */
::selection { background: rgba(139, 92, 246, 0.3); color: var(--white); }

::-moz-selection { background: rgba(139, 92, 246, 0.3); color: var(--white); }
