Metehan

84 Metehan

HTML

<!DOCTYPE html>
<html lang="tr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>NEXUS // QUANTUM PROTOCOL</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        nxs: {
                            base: '#02050A',
                            surface: '#0A111F',
                            cyan: '#00F0FF',
                            orange: '#FF4500',
                            blue: '#0A1930',
                            text: '#E2E8F0',
                            muted: '#64748B'
                        }
                    },
                    fontFamily: {
                        sans: ['Outfit', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace'],
                    },
                    backgroundImage: {
                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                    }
                }
            }
        }
    </script>

/* --- TEMEL AYARLAR --- */
        body {
            background-color: theme('colors.nxs.base');
            color: theme('colors.nxs.text');
            overflow-x: hidden;
            cursor: none; /* Özel imleç kullanacağız */
            -webkit-font-smoothing: antialiased;
        }

::selection {
            background: theme('colors.nxs.cyan');
            color: theme('colors.nxs.base');
        }

/* Özel Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: theme('colors.nxs.base'); }
        ::-webkit-scrollbar-thumb { background: theme('colors.nxs.blue'); border-radius: 4px; border: 1px solid theme('colors.nxs.cyan'); }
        ::-webkit-scrollbar-thumb:hover { background: theme('colors.nxs.cyan'); }

/* --- GÖRSEL EFEKTLER (HUD & OVERLAYS) --- */
        #scanlines {
            position: fixed; inset: 0; z-index: 40; pointer-events: none;
            background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25) 51%);
            background-size: 100% 4px;
            opacity: 0.4;
        }
        
        #vignette {
            position: fixed; inset: 0; z-index: 39; pointer-events: none;
            background: radial-gradient(circle at center, transparent 30%, #02050A 100%);
        }

/* --- İNTERAKTİF SİBER AĞ ARKA PLANI (Fare Takip Eden Işık) --- */
        .cyber-grid {
            position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
            background-image: 
                linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            transform: perspective(500px) rotateX(60deg);
            animation: gridMove 20s linear infinite;
            z-index: 0; pointer-events: none;
        }
        @keyframes gridMove {
            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
            100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
        }

.mouse-light {
            position: fixed; inset: 0; z-index: 1; pointer-events: none;
            background: radial-gradient(circle 600px at var(--cursor-x) var(--cursor-y), rgba(0, 240, 255, 0.08), transparent 80%);
            transition: background 0.1s ease;
        }

/* --- ÖZEL İMLEÇ (HUD STYLE) --- */
        .cursor-dot, .cursor-ring {
            position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
            border-radius: 50%; pointer-events: none; z-index: 9999;
        }
        .cursor-dot {
            width: 4px; height: 4px; background: theme('colors.nxs.cyan');
            box-shadow: var(--cyan-glow);
        }
        .cursor-ring {
            width: 30px; height: 30px; border: 1px solid rgba(0, 240, 255, 0.5);
            transition: width 0.2s, height 0.2s, border-color 0.2s;
        }
        body.hovering .cursor-ring {
            width: 50px; height: 50px; border-color: theme('colors.nxs.orange');
            border-style: dashed; animation: spin 4s linear infinite;
        }
        @keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* --- UI BİLEŞENLERİ (GLASSMORPHISM & NEON) --- */
        .glass-panel {
            background: rgba(10, 17, 31, 0.6);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 240, 255, 0.1);
            position: relative; overflow: hidden;
        }
        
        /* Kart Köşelerindeki Siber Çizgiler */
        .glass-panel::before {
            content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px;
            border-top: 2px solid theme('colors.nxs.cyan'); border-left: 2px solid theme('colors.nxs.cyan');
            transition: all 0.3s ease;
        }
        .glass-panel::after {
            content: ''; position: absolute; bottom: 0; right: 0; width: 15px; height: 15px;
            border-bottom: 2px solid theme('colors.nxs.cyan'); border-right: 2px solid theme('colors.nxs.cyan');
            transition: all 0.3s ease;
        }
        .glass-panel:hover::before, .glass-panel:hover::after {
            width: 100%; height: 100%; opacity: 0.1;
        }

/* Siber Buton */
        .cyber-btn {
            position: relative; padding: 12px 24px; font-family: 'JetBrains Mono', monospace;
            font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em;
            color: theme('colors.nxs.cyan'); border: 1px solid theme('colors.nxs.cyan');
            background: transparent; overflow: hidden; transition: all 0.3s ease;
            text-transform: uppercase; cursor: none;
        }
        .cyber-btn::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: theme('colors.nxs.cyan'); transition: left 0.3s ease; z-index: -1;
        }
        .cyber-btn:hover { color: theme('colors.nxs.base'); box-shadow: var(--cyan-glow); }
        .cyber-btn:hover::before { left: 0; }
        .cyber-btn.orange { color: theme('colors.nxs.orange'); border-color: theme('colors.nxs.orange'); }
        .cyber-btn.orange::before { background: theme('colors.nxs.orange'); }
        .cyber-btn.orange:hover { color: theme('colors.nxs.base'); box-shadow: var(--orange-glow); }

/* Glitch Başlık Efekti */
        .glitch { position: relative; }
        .glitch::before, .glitch::after {
            content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0.8; z-index: -1;
        }
        .glitch::before {
            color: theme('colors.nxs.cyan'); transform: translate(-2px, 2px);
            animation: glitch-anim 3s infinite alternate-reverse;
        }
        .glitch::after {
            color: theme('colors.nxs.orange'); transform: translate(2px, -2px);
            animation: glitch-anim 2.5s infinite alternate-reverse;
        }
        @keyframes glitch-anim {
            0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
            20% { clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); }
            40% { clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%); }
        }

/* --- ANİMASYONLU KUTULAR (Scroll Reveal CSS) --- */
        .reveal-up { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal-up.active { opacity: 1; transform: translateY(0); }
        
        /* Yanıp sönen durum noktası */
        .blink-dot {
            width: 8px; height: 8px; border-radius: 50%; background: theme('colors.nxs.orange');
            box-shadow: var(--orange-glow); animation: blink 1.5s infinite;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    </style>
</head>
<body class="antialiased">

<div class="cyber-grid"></div>
    <div class="mouse-light" id="mouse-light"></div>
    <div id="vignette"></div>
    <div id="scanlines"></div>

<div class="cursor-dot" id="cursor-dot"></div>
    <div class="cursor-ring" id="cursor-ring"></div>

<div class="fixed top-4 left-4 w-8 h-8 border-t-2 border-l-2 border-nxs-cyan/50 z-50 pointer-events-none hidden md:block"></div>
    <div class="fixed top-4 right-4 w-8 h-8 border-t-2 border-r-2 border-nxs-cyan/50 z-50 pointer-events-none hidden md:block"></div>
    <div class="fixed bottom-4 left-4 w-8 h-8 border-b-2 border-l-2 border-nxs-cyan/50 z-50 pointer-events-none hidden md:block"></div>
    <div class="fixed bottom-4 right-4 w-8 h-8 border-b-2 border-r-2 border-nxs-cyan/50 z-50 pointer-events-none hidden md:block"></div>

<header class="fixed top-0 w-full z-50 glass-panel border-b-nxs-cyan/20 px-6 py-4 flex justify-between items-center transition-all duration-300" id="navbar">
        <div class="flex items-center gap-3 interactive">
            <div class="blink-dot"></div>
            <span class="font-display font-bold text-xl tracking-widest text-white">NEXUS<span class="text-nxs-cyan">.OS</span></span>
        </div>

<nav class="hidden md:flex items-center gap-8 font-mono text-xs tracking-widest text-nxs-muted">
            <a href="#core" class="hover:text-nxs-cyan transition-colors interactive"><span class="text-nxs-cyan mr-1">01</span>CORE</a>
            <a href="#matrix" class="hover:text-nxs-cyan transition-colors interactive"><span class="text-nxs-cyan mr-1">02</span>MATRIX</a>
            <a href="#archives" class="hover:text-nxs-cyan transition-colors interactive"><span class="text-nxs-cyan mr-1">03</span>ARCHIVES</a>
            <a href="#uplink" class="cyber-btn interactive">UPLINK_ESTABLISH</a>
        </nav>

<div class="hidden lg:flex flex-col text-right font-mono text-[10px] text-nxs-cyan/70 leading-tight">
            <span>SYS.VER // 9.4.2a</span>
            <span>MEMBRANE // <span class="text-nxs-orange" id="live-ping">12ms</span></span>
        </div>

<button class="md:hidden text-nxs-cyan text-xl interactive">
            <i class="fas fa-bars"></i>
        </button>
    </header>

<main class="relative z-10">

<section id="core" class="min-h-screen flex items-center justify-center pt-20 relative px-6">
            <div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                
                
                <div class="order-2 lg:order-1 reveal-up">
                    <div class="font-mono text-nxs-cyan text-sm mb-4 tracking-[0.2em] flex items-center gap-2">
                        <i class="fas fa-terminal"></i> INITIALIZING SYSTEM
                    </div>
                    <h1 class="font-display text-5xl md:text-7xl font-bold text-white leading-tight mb-6 glitch uppercase" data-text="Global Matrix">
                        Global <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-nxs-cyan to-nxs-orange">Matrix</span>
                        <br>Architects
                    </h1>
                    
                    <div class="pl-4 border-l-2 border-nxs-orange mb-8">
                        <p class="text-nxs-muted font-sans text-lg leading-relaxed max-w-lg">
                            Yazılım mimarisi, siber güvenlik ve yapay zeka entegrasyonunda küresel standartları belirliyoruz. Geleceğin dijital ekosistemlerini inşa etmek için kuantum seviyesinde mühendislik.
                        </p>
                    </div>
                    
                    <div class="flex flex-wrap gap-4">
                        <a href="#matrix" class="cyber-btn interactive">SİSTEMLERİ İNCELE</a>
                        <a href="#uplink" class="cyber-btn orange interactive">AĞA KATIL</a>
                    </div>
                </div>

<div class="order-1 lg:order-2 flex justify-center relative h-[400px] reveal-up delay-200">
                    <div class="absolute inset-0 flex items-center justify-center">
                        
                        <div class="absolute w-64 h-64 border border-nxs-cyan/30 rounded-full animate-[spin_10s_linear_infinite]"></div>
                        <div class="absolute w-72 h-72 border border-dashed border-nxs-orange/40 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                        <div class="absolute w-48 h-48 bg-nxs-cyan/5 rounded-full backdrop-blur-sm border border-nxs-cyan/50 flex items-center justify-center shadow-[0_0_50px_rgba(0,240,255,0.2)]">
                            <i class="fas fa-microchip text-5xl text-nxs-cyan drop-shadow-[0_0_15px_rgba(0,240,255,0.8)] animate-pulse"></i>
                        </div>
                        
                        
                        <div class="absolute top-10 right-10 glass-panel px-3 py-2 font-mono text-[10px] text-nxs-cyan animate-bounce">
                            [ CPU: 12% ]
                        </div>
                        <div class="absolute bottom-10 left-10 glass-panel px-3 py-2 font-mono text-[10px] text-nxs-orange animate-bounce" style="animation-delay: 1s;">
                            [ SEC: SECURE ]
                        </div>
                    </div>
                </div>
            </div>

<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex flex-col items-center gap-2 opacity-50">
                <span class="font-mono text-[10px] tracking-[0.3em] text-nxs-cyan uppercase">Scroll Down</span>
                <div class="w-[1px] h-12 bg-gradient-to-b from-nxs-cyan to-transparent"></div>
            </div>
        </section>

<section id="matrix" class="py-32 relative px-6">
            <div class="max-w-7xl mx-auto">
                <div class="flex flex-col md:flex-row justify-between items-end mb-16 reveal-up">
                    <div>
                        <div class="font-mono text-nxs-cyan text-sm mb-2 tracking-[0.2em]">/// 02. PROTOKOLLER</div>
                        <h2 class="font-display text-4xl md:text-5xl font-bold text-white uppercase">Operasyonel<br>Matris</h2>
                    </div>
                    <div class="text-right font-mono text-xs text-nxs-muted mt-4 md:mt-0">
                        SİSTEM DURUMU: <span class="text-nxs-cyan">OPTİMİZE EDİLDİ</span><br>
                        AKTİF MODÜL SAYISI: 06
                    </div>
                </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    <div class="glass-panel p-8 group interactive reveal-up cursor-pointer">
                        <div class="flex justify-between items-start mb-8">
                            <i class="fas fa-network-wired text-3xl text-nxs-cyan group-hover:text-white transition-colors"></i>
                            <span class="font-mono text-[10px] text-nxs-muted border border-nxs-muted/30 px-2 py-1 rounded">SYS.01</span>
                        </div>
                        <h3 class="font-display text-xl font-bold text-white mb-3">Dağıtık Mimari</h3>
                        <p class="font-sans text-sm text-nxs-muted leading-relaxed mb-6">
                            Küresel ölçekte sıfır kesinti toleranslı mikroservis altyapıları. Yüksek trafikli sistemler için yük dengeleme.
                        </p>
                        <div class="w-full h-1 bg-nxs-blue mt-auto">
                            <div class="h-full bg-nxs-cyan w-0 group-hover:w-full transition-all duration-500"></div>
                        </div>
                    </div>

<div class="glass-panel p-8 group interactive reveal-up cursor-pointer" style="transition-delay: 100ms;">
                        <div class="flex justify-between items-start mb-8">
                            <i class="fas fa-shield-halved text-3xl text-nxs-orange group-hover:text-white transition-colors"></i>
                            <span class="font-mono text-[10px] text-nxs-orange border border-nxs-orange/30 px-2 py-1 rounded text-nxs-orange">SEC.ALERT</span>
                        </div>
                        <h3 class="font-display text-xl font-bold text-white mb-3">Siber Güvenlik</h3>
                        <p class="font-sans text-sm text-nxs-muted leading-relaxed mb-6">
                            Askeri standartlarda uçtan uca şifreleme. Yapay zeka destekli anomali tespiti ve penetrasyon önleme sistemleri.
                        </p>
                        <div class="w-full h-1 bg-nxs-blue mt-auto">
                            <div class="h-full bg-nxs-orange w-0 group-hover:w-full transition-all duration-500"></div>
                        </div>
                    </div>

<div class="glass-panel p-8 group interactive reveal-up cursor-pointer" style="transition-delay: 200ms;">
                        <div class="flex justify-between items-start mb-8">
                            <i class="fas fa-brain text-3xl text-nxs-cyan group-hover:text-white transition-colors"></i>
                            <span class="font-mono text-[10px] text-nxs-muted border border-nxs-muted/30 px-2 py-1 rounded">AI.CORE</span>
                        </div>
                        <h3 class="font-display text-xl font-bold text-white mb-3">Yapay Zeka & Veri</h3>
                        <p class="font-sans text-sm text-nxs-muted leading-relaxed mb-6">
                            Büyük veri analizi, makine öğrenimi modellerinin eğitilmesi ve otonom karar destek mekanizmaları entegrasyonu.
                        </p>
                        <div class="w-full h-1 bg-nxs-blue mt-auto">
                            <div class="h-full bg-nxs-cyan w-0 group-hover:w-full transition-all duration-500"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="archives" class="py-32 relative px-6 bg-nxs-surface/30">
            <div class="max-w-7xl mx-auto">
                <div class="text-center mb-16 reveal-up">
                    <div class="font-mono text-nxs-cyan text-sm mb-2 tracking-[0.2em]">/// 03. VERİBANKASI</div>
                    <h2 class="font-display text-4xl md:text-5xl font-bold text-white uppercase">Saha Kayıtları</h2>
                </div>

<div class="space-y-12">
                    
                    <div class="glass-panel grid grid-cols-1 lg:grid-cols-2 gap-0 overflow-hidden group interactive reveal-up">
                        
                        <div class="relative h-64 lg:h-auto overflow-hidden">
                            <div class="absolute inset-0 bg-nxs-cyan/40 mix-blend-color group-hover:opacity-0 transition-opacity duration-500 z-10"></div>
                            <div class="absolute inset-0 bg-gradient-to-t from-nxs-base to-transparent z-20"></div>
                            
                            <div class="absolute top-0 left-0 w-full h-[2px] bg-white shadow-[0_0_15px_#fff] z-30 transform -translate-y-[100%] group-hover:animate-[scan_2s_ease-in-out_infinite]"></div>
                            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Fintech" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 transform group-hover:scale-105">
                        </div>
                        
                        <div class="p-8 lg:p-12 flex flex-col justify-center">
                            <div class="font-mono text-nxs-cyan text-xs mb-2">PROJE_ID: AEGIS_FN</div>
                            <h3 class="font-display text-3xl font-bold text-white mb-4">HFT Finans Ağı</h3>
                            <p class="font-sans text-nxs-muted mb-6">
                                Küresel borsa düğümleri arasında milisaniyelik gecikmelerle çalışan, yapay zeka destekli otonom ticaret platformu. Milyarlarca veriyi gerçek zamanlı işler.
                            </p>
                            <div class="flex flex-wrap gap-2 mb-8 font-mono text-[10px]">
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-cyan rounded border border-nxs-cyan/20">C++</span>
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-cyan rounded border border-nxs-cyan/20">KUBERNETES</span>
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-cyan rounded border border-nxs-cyan/20">WEBSOCKET</span>
                            </div>
                            <div><a href="#" class="text-white hover:text-nxs-cyan font-mono text-sm tracking-wider flex items-center gap-2 transition-colors">VERİYİ ÇÖZÜMLE <i class="fas fa-arrow-right"></i></a></div>
                        </div>
                    </div>

<div class="glass-panel grid grid-cols-1 lg:grid-cols-2 gap-0 overflow-hidden group interactive reveal-up">
                        
                        <div class="p-8 lg:p-12 flex flex-col justify-center order-2 lg:order-1">
                            <div class="font-mono text-nxs-orange text-xs mb-2">PROJE_ID: NEBULA_CITY</div>
                            <h3 class="font-display text-3xl font-bold text-white mb-4">Akıllı Şehir Sensör Ağı</h3>
                            <p class="font-sans text-nxs-muted mb-6">
                                Metropollerin enerji, trafik ve güvenlik altyapısını tek bir merkezden yöneten IoT (Nesnelerin İnterneti) ekosistemi. Edge computing mimarisi ile donatılmıştır.
                            </p>
                            <div class="flex flex-wrap gap-2 mb-8 font-mono text-[10px]">
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-orange rounded border border-nxs-orange/20">PYTHON</span>
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-orange rounded border border-nxs-orange/20">IoT MESH</span>
                                <span class="px-2 py-1 bg-nxs-blue text-nxs-orange rounded border border-nxs-orange/20">GRAPHQL</span>
                            </div>
                            <div><a href="#" class="text-white hover:text-nxs-orange font-mono text-sm tracking-wider flex items-center gap-2 transition-colors">VERİYİ ÇÖZÜMLE <i class="fas fa-arrow-right"></i></a></div>
                        </div>
                        
                        <div class="relative h-64 lg:h-auto overflow-hidden order-1 lg:order-2">
                            <div class="absolute inset-0 bg-nxs-orange/40 mix-blend-color group-hover:opacity-0 transition-opacity duration-500 z-10"></div>
                            <div class="absolute inset-0 bg-gradient-to-t from-nxs-base to-transparent z-20"></div>
                             
                             <div class="absolute top-0 left-0 w-full h-[2px] bg-white shadow-[0_0_15px_#fff] z-30 transform -translate-y-[100%] group-hover:animate-[scan_2s_ease-in-out_infinite]"></div>
                            <img src="https://images.unsplash.com/photo-1573804633927-bfcbcd909acd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Smart City" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 transform group-hover:scale-105">
                        </div>
                    </div>
                </div>
                
                <style>
                    @keyframes scan {
                        0% { transform: translateY(-100%); opacity: 0; }
                        10% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { transform: translateY(400px); opacity: 0; }
                    }
                </style>
            </div>
        </section>

<section id="uplink" class="py-32 relative px-6">
            <div class="max-w-4xl mx-auto">
                <div class="glass-panel p-1 border-nxs-cyan shadow-[0_0_30px_rgba(0,240,255,0.1)] reveal-up">
                    <div class="bg-nxs-base p-6 md:p-12 relative overflow-hidden">
                        
                        
                        <div class="flex items-center gap-2 mb-8 pb-4 border-b border-nxs-cyan/20">
                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            <span class="font-mono text-xs text-nxs-cyan ml-2">secure_uplink.exe</span>
                        </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                            
                            <div>
                                <h2 class="font-display text-3xl font-bold text-white mb-4">Sistem Bağlantısı Kur</h2>
                                <p class="font-mono text-sm text-nxs-muted mb-8 leading-relaxed h-24" id="typewriter">
                                    
                                </p>
                                <div class="space-y-4 font-mono text-sm">
                                    <div class="flex items-center gap-3 text-nxs-cyan">
                                        <i class="fas fa-satellite-dish"></i> <span>HQ: Istanbul / TR</span>
                                    </div>
                                    <div class="flex items-center gap-3 text-nxs-cyan">
                                        <i class="fas fa-envelope"></i> <span>sysadmin@nexus.com</span>
                                    </div>
                                    <div class="flex items-center gap-3 text-nxs-cyan">
                                        <i class="fas fa-shield-halved"></i> <span>ENC: RSA-4096 ACTIVE</span>
                                    </div>
                                </div>
                            </div>

<form class="space-y-6">
                                <div class="space-y-2">
                                    <label class="font-mono text-xs text-nxs-cyan">> GİRİŞ_KİMLİĞİ (İsim)</label>
                                    <input type="text" class="w-full bg-nxs-surface border border-nxs-cyan/30 text-white font-mono text-sm p-3 focus:outline-none focus:border-nxs-cyan focus:shadow-[0_0_10px_rgba(0,240,255,0.3)] transition-all cursor-none interactive">
                                </div>
                                <div class="space-y-2">
                                    <label class="font-mono text-xs text-nxs-cyan">> İLETİŞİM_DÜĞÜMÜ (Email)</label>
                                    <input type="email" class="w-full bg-nxs-surface border border-nxs-cyan/30 text-white font-mono text-sm p-3 focus:outline-none focus:border-nxs-cyan focus:shadow-[0_0_10px_rgba(0,240,255,0.3)] transition-all cursor-none interactive">
                                </div>
                                <div class="space-y-2">
                                    <label class="font-mono text-xs text-nxs-cyan">> VERİ_PAKETİ (Mesaj)</label>
                                    <input rows="3" class="w-full bg-nxs-surface border border-nxs-cyan/30 text-white font-mono text-sm p-3 focus:outline-none focus:border-nxs-cyan focus:shadow-[0_0_10px_rgba(0,240,255,0.3)] transition-all cursor-none interactive resize-none"/>
                                </div>
                                <button type="button" class="cyber-btn w-full interactive">PAKETİ GÖNDER</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<footer class="border-t border-nxs-cyan/10 bg-nxs-base py-8 relative z-20">
            <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="font-display font-bold tracking-widest text-white opacity-50">
                    NEXUS<span class="text-nxs-cyan">.OS</span> © 2026
                </div>
                <div class="flex gap-6 font-mono text-xl text-nxs-muted">
                    <a href="#" class="hover:text-nxs-cyan transition-colors interactive"><i class="fab fa-github"></i></a>
                    <a href="#" class="hover:text-nxs-cyan transition-colors interactive"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#" class="hover:text-nxs-cyan transition-colors interactive"><i class="fab fa-twitter"></i></a>
                </div>
                <div class="font-mono text-[10px] text-nxs-muted">
                    END_OF_FILE
                </div>
            </div>
        </footer>

</main>

<script>
        // --- ÖZEL İMLEÇ & IŞIK EFEKTİ ---
        const cursorDot = document.getElementById('cursor-dot');
        const cursorRing = document.getElementById('cursor-ring');
        const interactives = document.querySelectorAll('.interactive, a, button, input, textarea');
        
        document.addEventListener('mousemove', (e) => {
            // İmleç
            cursorDot.style.left = `${e.clientX}px`;
            cursorDot.style.top = `${e.clientY}px`;
            
            // Halka için hafif gecikme (Smoooth his)
            setTimeout(() => {
                cursorRing.style.left = `${e.clientX}px`;
                cursorRing.style.top = `${e.clientY}px`;
            }, 50);

// Arka plan el feneri (CSS değişkenini güncelle)
            document.documentElement.style.setProperty('--cursor-x', `${e.clientX}px`);
            document.documentElement.style.setProperty('--cursor-y', `${e.clientY}px`);
        });

// Hover Efektleri
        interactives.forEach(el => {
            el.addEventListener('mouseenter', () => document.body.classList.add('hovering'));
            el.addEventListener('mouseleave', () => document.body.classList.remove('hovering'));
        });

// --- SCROLL REVEAL (Yukarı Kayma Animasyonu) ---
        const revealElements = document.querySelectorAll('.reveal-up');
        
        const revealOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

revealElements.forEach(el => revealObserver.observe(el));

// --- NAVBAR SCROLL EFEKTİ ---
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'bg-nxs-surface/90');
                navbar.classList.remove('py-4');
            } else {
                navbar.classList.add('py-4');
                navbar.classList.remove('py-2', 'bg-nxs-surface/90');
            }
        });

// --- SAHTE CANLI VERİ (Ping Simulasyonu) ---
        const pingElement = document.getElementById('live-ping');
        setInterval(() => {
            const ping = Math.floor(Math.random() * 15) + 8; // 8-22ms arası
            pingElement.innerText = `${ping}ms`;
        }, 2000);

// --- TYPEWRITER EFEKTİ (İletişim Kısmı) ---
        const typewriterText = "Ağımıza sızmak veya profesyonel bir bağlantı kurmak için aşağıdaki terminali kullanın. Tüm veriler kuantum düzeyinde şifrelenmektedir...";
        const typewriterElement = document.getElementById('typewriter');
        let i = 0;

// Terminal bölümü ekrana gelince daktilo efektini başlat
        const terminalObserver = new IntersectionObserver((entries) => {
            if(entries[0].isIntersecting) {
                typeWriter();
                terminalObserver.disconnect();
            }
        });
        terminalObserver.observe(document.getElementById('uplink'));

</script>
</body>
</html>

CSS