@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Montserrat:wght@400;800&display=swap');

:root {
    --neon: #00f2ff;
    --bg: #050505;
    --card: #0a0a0a;
    --white: #ffffff;
}

body { background: var(--bg); color: var(--white); font-family: 'Inter', sans-serif; margin: 0; }

/* HEADER - Hiyerarşi düzenlendi */
.header-top { text-align: center; padding: 40px 5%; border-bottom: 1px solid #1a1a1a; }
.logo { font-family: 'Montserrat'; font-size: 48px; font-weight: 800; letter-spacing: 3px; }
.logo span { color: var(--neon); text-shadow: 0 0 15px var(--neon); }

.nav-bar { display: flex; justify-content: center; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
.nav-link { padding: 8px 18px; border: 1px solid #222; border-radius: 6px; font-size: 12px; cursor: pointer; transition: 0.3s; color: #aaa; }
.nav-link:hover { border-color: var(--neon); color: var(--neon); }

/* HERO - Slogan üstü küçük logo eklendi */
.hero-content { text-align: center; padding: 60px 5% 40px 5%; }
.small-logo { font-size: 14px; letter-spacing: 5px; color: var(--neon); font-family: 'Montserrat'; margin-bottom: 10px; text-transform: uppercase; }
.slogan { font-family: 'Montserrat'; font-size: 36px; margin: 0; }

/* HİZMETLER - Kutular Onarıldı */
.services-section { padding: 60px 5%; }
.hizmetler-head { text-align: center; margin-bottom: 40px; }
.hizmetler-head h2 { font-family: 'Montserrat'; color: var(--neon); letter-spacing: 3px; }

.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px; 
    max-width: 1200px; 
    margin: 0 auto; 
}
.card { background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid #1a1a1a; transition: 0.3s; }
.card:hover { border-color: var(--neon); transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.4); }
.btn { width: 100%; padding: 12px; background: transparent; border: 1px solid var(--neon); color: var(--neon); border-radius: 6px; cursor: pointer; margin-top: 20px; }
.btn:hover { background: var(--neon); color: #000; }
/* --- MOBİL UYUMLULUK (Responsive) --- */

/* Tabletler için (992px altı) */
@media (max-width: 992px) {
    .logo { font-size: 36px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Telefonlar için (600px altı) */
@media (max-width: 600px) {
    .logo { font-size: 28px; }
    .slogan { font-size: 24px; }
    .nav-bar { gap: 10px; }
    .nav-link { font-size: 10px; padding: 6px 12px; }
    
    /* Kartlar artık tek sütun */
    .grid { grid-template-columns: 1fr; padding: 20px 5%; }
    
    /* Mobil özel boşluklar */
    .header-top { padding: 30px 5%; }
    .hero-content { padding: 40px 5% 20px 5%; }
}
/* Ana CSS dosyana ekleyebilirsin veya yazilim.css oluşturabilirsin */
.software-container { padding: 50px 10%; max-width: 1000px; margin: auto; }
.section-title { font-family: 'Montserrat'; font-size: 28px; color: var(--neon); margin-bottom: 30px; }
.desc-box { 
    background: #0a0a0a; padding: 40px; border-radius: 16px; 
    border-left: 4px solid var(--neon); margin-bottom: 40px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.tech-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.tech-item { background: #111; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #222; }
/* --- FOOTER GELİŞMİŞ CSS YAPI --- */

.footer {
    text-align: center;
    padding: 60px 5% 30px 5%;
    border-top: 1px solid #1a1a1a;
    background: #050505; /* Sayfa rengiyle aynı */
    margin-top: 80px;
}

.social-links {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social-links a {
    color: #ffffff;
    font-size: 26px; /* İkonların belirgin olması için */
    transition: all 0.3s ease;
    padding: 10px;
}

/* İkonlara hover efekti - Neon parlaması */
.social-links a:hover {
    color: var(--neon);
    transform: translateY(-5px) scale(1.2);
    text-shadow: 0 0 15px var(--neon);
}

.footer-text {
    margin-top: 20px;
    font-size: 11px;
    color: #555;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Mobil için footer düzenlemesi */
@media (max-width: 600px) {
    .social-links { gap: 20px; }
    .social-links a { font-size: 22px; }
}
/* Sayfa yapısını footer'ı aşağı itecek şekilde ayarla */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* İçerik kısmını esnet */
.main-content {
    flex: 1;
}

/* Footer artık her zaman aşağıda */
.footer {
    margin-top: auto; 
    padding: 40px 0;
    border-top: 1px solid #1a1a1a;
    text-align: center;
}
/* Navigasyon düzeltme */
.header-top { text-align: center; padding: 30px 5%; border-bottom: 1px solid #1a1a1a; }
.logo { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.logo span { color: var(--neon); }
.nav-bar { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin-bottom: 20px; }
.nav-link { cursor: pointer; font-size: 14px; color: #888; font-weight: 600; transition: 0.3s; }
.nav-link:hover { color: var(--neon); }

/* Plan kartları düzeltme */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 40px; }
.plan-card { 
    background: #050505; 
    border: 1px solid #1a1a1a; 
    padding: 30px; 
    border-radius: 12px; 
    text-align: center; 
    transition: 0.3s;
}
.plan-card:hover { border-color: var(--neon); box-shadow: 0 0 15px rgba(0, 255, 150, 0.1); }
.plan-card h3 { color: #fff; margin-bottom: 15px; }
.plan-card ul { list-style: none; padding: 0; text-align: left; margin: 20px 0; }
.plan-card li { margin-bottom: 10px; font-size: 13px; color: #aaa; }
.plan-card li::before { content: "✓ "; color: var(--neon); font-weight: bold; }
/* Neon Arkaplan Kapsayıcısı */
.neon-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* İçeriklerin arkasında kalmasını sağlar */
    overflow: hidden;
    pointer-events: none; /* Tıklamaları engellemez */
}

/* Neon Parçacıklarının Ortak Özellikleri */
.neon-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: var(--neon);
    border-radius: 50%;
    filter: blur(140px); /* Işığın yumuşakça dağılmasını sağlar */
    opacity: 0.25; /* Gözü yormayacak tatlı bir opaklık */
    mix-blend-mode: screen;
}

/* Farklı konumlama, hız ve gecikmeler ile rastgelelik illüzyonu */
.neon-glow:nth-child(1) {
    top: 15%;
    left: 10%;
    animation: floatAround1 25s infinite ease-in-out alternate;
}

.neon-glow:nth-child(2) {
    top: 65%;
    left: 75%;
    animation: floatAround2 35s infinite ease-in-out alternate;
}

.neon-glow:nth-child(3) {
    top: 40%;
    left: 45%;
    animation: floatAround1 28s infinite ease-in-out alternate-reverse;
    animation-delay: -7s;
}

/* Rastgele Hareket Rotaları (Keyframes) */
@keyframes floatAround1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(150px, 80px) scale(1.2); }
    66% { transform: translate(-50px, 180px) scale(0.8); }
    100% { transform: translate(80px, -40px) scale(1.1); }
}

@keyframes floatAround2 {
    0% { transform: translate(0, 0) scale(0.9); }
    50% { transform: translate(-180px, -120px) scale(1.3); }
    100% { transform: translate(60px, 70px) scale(1); }
}
/* Lazer Kapsayıcısı */
.laser-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Genel Neon Çizgi Özellikleri */
.laser-beam {
    position: absolute;
    background: linear-gradient(90deg, transparent, var(--neon), #fff, var(--neon), transparent);
    height: 2px; /* Çizginin kalınlığı */
    opacity: 0.8; /* Oldukça belirgin parlaklık */
    border-radius: 100px;
    filter: drop-shadow(0 0 8px var(--neon)); /* Neon ışıma efekti */
}

/* Çizgi 1: Soldan sağa düz giden kalın ışın */
.laser-beam:nth-child(1) {
    top: 20%;
    left: -300px;
    width: 250px;
    height: 3px;
    animation: laserX 8s infinite linear;
}

/* Çizgi 2: Sağdan sola ters giden hızlı ışın */
.laser-beam:nth-child(2) {
    top: 55%;
    right: -400px;
    width: 350px;
    animation: laserXReverse 6s infinite linear;
    animation-delay: 2s;
}

/* Çizgi 3: Yukarıdan aşağıya çapraz kayan ışın */
.laser-beam:nth-child(3) {
    top: -100px;
    left: 15%;
    width: 200px;
    transform: rotate(45deg); /* Çapraz açı */
    animation: laserDiagonal 10s infinite linear;
    animation-delay: 1s;
}

/* Çizgi 4: Aşağıdan yukarıya çapraz kayan kısa/hızlı ışın */
.laser-beam:nth-child(4) {
    bottom: -100px;
    right: 20%;
    width: 150px;
    transform: rotate(-35deg);
    animation: laserDiagonalUp 7s infinite linear;
    animation-delay: 4s;
}

/* --- Animasyon Rotaları (Keyframes) --- */

/* Yatay Düz Hareket (Soldan Sağa) */
@keyframes laserX {
    0% { left: -400px; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { left: 100vw; opacity: 0; }
}

/* Yatay Düz Hareket (Sağdan Sola) */
@keyframes laserXReverse {
    0% { right: -400px; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { right: 100vw; opacity: 0; }
}

/* Çapraz Aşağı Hareket */
@keyframes laserDiagonal {
    0% { top: -200px; left: 10%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 100vh; left: 60%; opacity: 0; }
}

/* Çapraz Yukarı Hareket */
@keyframes laserDiagonalUp {
    0% { bottom: -200px; right: 10%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { bottom: 100vh; right: 70%; opacity: 0; }
}
/* Kozmik Arkaplan Alanı */
.cosmic-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Kalın, Bükülebilir Neon Akımları */
.plasma-stream {
    position: absolute;
    background: linear-gradient(135deg, transparent, var(--neon), #ffffff, var(--neon), transparent);
    background-size: 200% 200%;
    filter: drop-shadow(0 0 25px var(--neon)) blur(2px); /* Hem net hem de derinlikli parlama */
    opacity: 0.65;
    mix-blend-mode: screen;
}

/* Akım 1: Ekranın üst yarısında serbest dalgalanan kalın dalga */
.plasma-stream:nth-child(1) {
    top: 10%;
    left: -20%;
    width: 600px;
    height: 35px; /* Kalınlık artırıldı */
    border-radius: 40% 60% 30% 70% / 50% 60% 40% 50%; /* Doğal organik eğri formu */
    animation: organicFloat1 22s infinite ease-in-out alternate;
}

/* Akım 2: Çapraz ve büyük, yavaşça kıvrılan plazma */
.plasma-stream:nth-child(2) {
    bottom: 15%;
    right: -10%;
    width: 700px;
    height: 45px; /* Daha kalın */
    border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
    animation: organicFloat2 28s infinite ease-in-out alternate;
    animation-delay: -5s;
}

/* Akım 3: Merkezde daha hızlı form değiştiren neon akıntı */
.plasma-stream:nth-child(3) {
    top: 45%;
    left: 20%;
    width: 500px;
    height: 30px;
    border-radius: 50%;
    animation: organicFloat3 18s infinite linear;
}

/* --- Gelişmiş Doğal Hareket Animasyonları (Keyframes) --- */

@keyframes organicFloat1 {
    0% {
        transform: translate(0, 0) rotate(0deg) scaleX(1);
        border-radius: 40% 60% 30% 70% / 50% 60% 40% 50%;
        background-position: 0% 50%;
    }
    50% {
        transform: translate(150px, 80px) rotate(15deg) scaleX(1.2);
        border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%; /* Hareket ederken şekil değiştirir */
        background-position: 100% 50%;
    }
    100% {
        transform: translate(300px, -40px) rotate(-10deg) scaleX(0.9);
        border-radius: 30% 70% 40% 60% / 40% 70% 30% 60%;
        background-position: 0% 50%;
    }
}

@keyframes organicFloat2 {
    0% {
        transform: translate(0, 0) rotate(-5deg) scale(0.9);
        border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
    }
    50% {
        transform: translate(-200px, -100px) rotate(25deg) scale(1.1);
        border-radius: 40% 60% 30% 70% / 50% 30% 70% 40%;
    }
    100% {
        transform: translate(-100px, 150px) rotate(5deg) scale(1);
        border-radius: 70% 30% 50% 50% / 30% 60% 40% 75%;
    }
}

@keyframes organicFloat3 {
    0% {
        transform: rotate(0deg) translate(0, 0) scaleX(1);
        border-radius: 50% 40% 60% 40% / 40% 60% 40% 60%;
    }
    50% {
        transform: rotate(180deg) translate(50px, -50px) scaleX(1.3);
        border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
    }
    100% {
        transform: rotate(360deg) translate(0, 0) scaleX(1);
        border-radius: 50% 40% 60% 40% / 40% 60% 40% 60%;
    }
}
/* Arkaplan Sabitleyici */
.ultra-led-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Premium LED Şerit Temeli */
.led-streak {
    position: absolute;
    /* Ultra parlak merkez beyazı ve dışa doğru dağılan neon mavi */
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(0, 242, 255, 0.3) 20%, 
        var(--neon) 50%, 
        #ffffff 60%, 
        var(--neon) 70%, 
        rgba(0, 242, 255, 0.3) 80%, 
        transparent 100%
    );
    height: 6px; /* İdeal ultra lüks kalınlık: Ne çok ince, ne çok kaba */
    border-radius: 4px;
    /* Katmanlı Neon Parlaması (Glow Effect) */
    filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 25px rgba(0, 242, 255, 0.6));
    will-change: transform; /* Tarayıcı performansını maksimize eder */
    opacity: 0.85;
}

/* --- Işın Varyasyonları ve Zamanlamaları --- */

/* 1. Üst Kısım: Ağır ve Görkemli Yatay Akan LED */
.led-streak.horizontal.slow {
    top: 15%;
    width: 450px;
    animation: flowX 14s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Orta-Alt Kısım: Hızlı ve Akışkan Yatay LED */
.led-streak.horizontal.fast {
    top: 70%;
    width: 300px;
    animation: flowX 8s infinite cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 3s;
}

/* 3. Sağ Üstten Sol Aşağıya Keskin Çapraz LED */
.led-streak.diagonal-down {
    top: -100px;
    width: 400px;
    transform: rotate(-35deg);
    transform-origin: left center;
    animation: flowDiagonalDown 11s infinite linear;
    animation-delay: 1s;
}

/* 4. Sol Alttan Sağ Yukarıya Keskin Çapraz LED */
.led-streak.diagonal-up {
    bottom: -100px;
    width: 350px;
    transform: rotate(-35deg);
    transform-origin: right center;
    animation: flowDiagonalUp 13s infinite linear;
    animation-delay: 5s;
}

/* --- Akış Animasyonları (Keyframes) --- */

@keyframes flowX {
    0% {
        transform: translateX(-500px);
    }
    50%, 100% {
        transform: translateX(100vw);
    }
}

@keyframes flowDiagonalDown {
    0% {
        top: -100px;
        left: 80%;
    }
    70%, 100% {
        top: 100vh;
        left: -20%;
    }
}

@keyframes flowDiagonalUp {
    0% {
        bottom: -100px;
        left: -10%;
    }
    70%, 100% {
        bottom: 100vh;
        left: 90%;
    }
}
/* Kuantum Işık Alanı Konteyneri */
.quantum-led-space {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px; /* 3D derinlik hissi için */
}

/* Ana Işın Gövdesi */
.lux-beam {
    position: absolute;
    height: 4px;
    border-radius: 50px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 242, 255, 0.1) 15%, 
        var(--neon) 50%, 
        #ffffff 65%, 
        var(--neon) 80%, 
        transparent 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

/* Işınların İçindeki Akıcı Çekirdek Parlaması (Robotikliği yıkan efekt) */
.led-core {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    filter: drop-shadow(0 0 10px var(--neon)) drop-shadow(0 0 25px rgba(0, 242, 255, 0.8));
    animation: internalFlux 4s infinite linear;
}

/* --- Benzersiz Özgür Rotalar ve İvmelenmeler --- */

/* Işın 1: Sol üstten sağ alta, lüks bir ivmeyle akan ana hat */
.lux-beam.beam-alpha {
    top: 20%;
    left: -20%;
    width: 500px;
    transform: rotate(15deg);
    animation: luxFlowAlpha 16s infinite cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Işın 2: Sağ ortadan sol üste doğru ters akıntı (Derinlik için daha silik) */
.lux-beam.beam-beta {
    bottom: 30%;
    right: -20%;
    width: 350px;
    transform: rotate(25deg);
    opacity: 0.5;
    animation: luxFlowBeta 12s infinite cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 3s;
}

/* Işın 3: Merkezden geçen, aniden hızlanan agresif spor ışık */
.lux-beam.beam-gamma {
    top: 45%;
    left: -30%;
    width: 600px;
    transform: rotate(-10deg);
    animation: luxFlowAlpha 9s infinite cubic-bezier(0.76, 0, 0.24, 1);
    animation-delay: 5s;
}

/* Işın 4: Alt kısımda yatay, kendi içinde bükülme hissi veren yavaş şerit */
.lux-beam.beam-delta {
    bottom: 15%;
    left: -25%;
    width: 400px;
    animation: luxFlowAlpha 22s infinite ease-in-out;
    animation-delay: 1s;
}

/* Işın 5: Çok hızlı geçen, mikro detay siber parlaması */
.lux-beam.beam-epsilon {
    top: 10%;
    right: 15%;
    width: 200px;
    transform: rotate(45deg) scale(0.7);
    animation: luxFlowBeta 7s infinite cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 8s;
}

/* --- Akış ve İvme Animasyon Kalıpları --- */

/* Çizginin içindeki ışığın da kendi içinde akması için */
@keyframes internalFlux {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Soldan Sağa Akış (Giriş ve çıkışlarda yumuşak opaklık geçişli) */
@keyframes luxFlowAlpha {
    0% {
        transform: translateX(0) rotate(inherit) scaleX(0.8);
        opacity: 0;
    }
    10% { opacity: 0.9; }
    50% { transform: translateX(60vw) rotate(inherit) scaleX(1.2); opacity: 0.7; }
    90% { opacity: 0.9; }
    100% {
        transform: translateX(120vw) rotate(inherit) scaleX(0.8);
        opacity: 0;
    }
}

/* Sağdan Sola Akış */
@keyframes luxFlowBeta {
    0% {
        transform: translateX(0) rotate(inherit) scaleX(0.7);
        opacity: 0;
    }
    15% { opacity: 0.85; }
    85% { opacity: 0.85; }
    100% {
        transform: translateX(-120vw) rotate(inherit) scaleX(1.1);
        opacity: 0;
    }
}
#neon-cinema-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* İçeriklerin arkasında kalır */
    pointer-events: none; /* Tıklamalara engel olmaz */
    background: transparent;
}