Metehan

44 Metehan

<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=JetBrains+Mono:wght@100..800&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap" rel="stylesheet">
    
    
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        aura: {
                            black: '#030303',
                            white: '#F4F4F5',
                            neon: '#CCFF00', /* Görsel 3 & 4'ten elektrik yeşili */
                            amber: '#FF5E00', /* Görsel 1'den uyarı turuncusu/altını */
                            gray: '#1E1E1E',
                            text: '#A1A1AA'
                        }
                    },
                    fontFamily: {
                        display: ['Syne', 'sans-serif'], // Görsel 5'teki gibi dev başlıklar için
                        sans: ['Space Grotesk', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace'], // Görsel 1'deki HUD hissi için
                    },
                    backgroundImage: {
                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                    }
                }
            }
        }
    </script>

/* Özel Kaydırma Çubuğu */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: theme('colors.aura.black'); }
        ::-webkit-scrollbar-thumb { background: theme('colors.aura.gray'); }
        ::-webkit-scrollbar-thumb:hover { background: theme('colors.aura.neon'); }

/* === GÜRÜLTÜ (GRAIN) EFEKTİ === */
        .noise-overlay {
            position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

/* === ÖZEL İMLEÇ === */
        #cursor-dot {
            position: fixed; top: 0; left: 0; width: 6px; height: 6px;
            background: theme('colors.aura.neon'); border-radius: 50%;
            transform: translate(-50%, -50%); pointer-events: none; z-index: 9999;
            mix-blend-mode: difference; transition: width 0.2s, height 0.2s;
        }
        #cursor-ring {
            position: fixed; top: 0; left: 0; width: 40px; height: 40px;
            border: 1px solid theme('colors.aura.neon'); border-radius: 50%;
            transform: translate(-50%, -50%); pointer-events: none; z-index: 9998;
            transition: all 0.15s ease-out; mix-blend-mode: difference;
        }
        body.hovering #cursor-dot { width: 0; height: 0; }
        body.hovering #cursor-ring {
            width: 60px; height: 60px; background: theme('colors.aura.white');
            border-color: transparent; mix-blend-mode: difference;
        }

/* === Görsel 1: HUD & HEDEF KÖŞEBENTLERİ === */
        .target-brackets { position: relative; }
        .target-brackets::before, .target-brackets::after {
            content: ''; position: absolute; width: 20px; height: 20px;
            transition: all 0.3s ease; opacity: 0.5;
        }
        .target-brackets::before {
            top: -10px; left: -10px;
            border-top: 2px solid theme('colors.aura.neon'); border-left: 2px solid theme('colors.aura.neon');
        }
        .target-brackets::after {
            bottom: -10px; right: -10px;
            border-bottom: 2px solid theme('colors.aura.neon'); border-right: 2px solid theme('colors.aura.neon');
        }
        .target-brackets:hover::before { top: -5px; left: -5px; opacity: 1; }
        .target-brackets:hover::after { bottom: -5px; right: -5px; opacity: 1; }

/* === ANİMASYONLAR === */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .parallax-bg {
            transform: translateY(0);
            will-change: transform;
        }

/* Kayan Metin (Marquee) */
        .marquee-container { overflow: hidden; white-space: nowrap; display: flex; }
        .marquee-content { display: inline-flex; animation: marquee 20s linear infinite; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Parlama Efektleri */
        .glow-neon { box-shadow: 0 0 30px rgba(204, 255, 0, 0.15); }
        .glow-amber { box-shadow: 0 0 40px rgba(255, 94, 0, 0.2); }

/* Editoryal Kesim (Görsel 5 İlhamı) */
        .text-intersect {
            mix-blend-mode: difference;
            color: #fff;
            z-index: 10;
        }
    </style>
</head>
<body class="antialiased">

<nav class="fixed top-0 w-full z-40 px-6 md:px-12 py-6 flex justify-between items-center mix-blend-difference text-white">
        <a href="#" class="font-display font-bold text-2xl tracking-tighter interactive">AURA.</a>
        
        <div class="hidden md:flex gap-12 font-mono text-xs uppercase tracking-widest">
            <a href="#vision" class="hover:text-aura-neon transition-colors interactive">Vision</a>
            <a href="#systems" class="hover:text-aura-neon transition-colors interactive">Systems</a>
            <a href="#editorial" class="hover:text-aura-neon transition-colors interactive">Editorial</a>
        </div>

<button class="font-mono text-xs border border-white/30 px-4 py-2 rounded-full hover:bg-white hover:text-black transition-all interactive">
            [ UPLINK ]
        </button>
    </nav>

<div class="absolute top-1/4 left-10 md:left-24 z-20 hidden lg:block">
                <div class="backdrop-blur-md bg-aura-gray/40 border border-white/10 p-4 rounded-xl font-mono text-[10px] w-48 target-brackets">
                    <div class="flex justify-between text-aura-neon mb-2">
                        <span>SYS.STATUS</span>
                        <i class="ri-radar-line animate-spin"></i>
                    </div>
                    <div class="text-aura-text mb-2">Biometric Scan: ACTIVE</div>
                    <div class="h-1 w-full bg-white/10 rounded overflow-hidden">
                        <div class="h-full bg-aura-neon w-3/4"></div>
                    </div>
                </div>
            </div>

<div class="absolute bottom-1/4 right-10 md:right-24 z-20 hidden lg:block">
                <div class="backdrop-blur-md bg-aura-amber/10 border border-aura-amber/30 p-4 rounded-xl font-mono text-[10px] w-56 glow-amber target-brackets">
                    <div class="flex items-center gap-2 text-aura-amber mb-2">
                        <i class="ri-alert-line text-lg"></i>
                        <span>SECTOR C-12</span>
                    </div>
                    <div class="text-aura-white">Neural network adapting to spatial frequencies.</div>
                </div>
            </div>

<div class="relative z-10 text-center flex flex-col items-center">
                <div class="font-mono text-aura-neon text-xs tracking-[0.5em] mb-6 uppercase reveal">
                    Ai Powered Ecosystems
                </div>
                <h1 class="font-display text-[12vw] md:text-[8vw] font-extrabold leading-[0.8] tracking-tighter reveal" style="transition-delay: 100ms;">
                    SYNTHETIC<br>
                    <span class="text-transparent border-text" style="-webkit-text-stroke: 1px rgba(255,255,255,0.5);">VISION</span>
                </h1>
                <p class="mt-8 font-sans text-aura-text max-w-md mx-auto text-sm md:text-base reveal" style="transition-delay: 200ms;">
                    Sınırları ortadan kaldıran, çevresel adaptasyonlu yapay zeka mimarileri. Güçlü görünmek yetmez, kusursuz çalışmalı.
                </p>
            </div>

<div class="absolute bottom-10 left-1/2 -translate-x-1/2 font-mono text-[10px] uppercase tracking-widest text-aura-text flex flex-col items-center gap-2 reveal">
                <span>Scroll to Ignite</span>
                <div class="w-[1px] h-12 bg-gradient-to-b from-aura-neon to-transparent"></div>
            </div>
        </section>

<div class="border-y border-white/5 py-4 bg-aura-neon text-aura-black font-display font-bold text-2xl uppercase tracking-wider marquee-container interactive">
            <div class="marquee-content">
                <span class="mx-8">Advanced Robotics</span> • <span class="mx-8">Neural Networks</span> • <span class="mx-8">Quantum Computing</span> • <span class="mx-8">Cyber Security</span> • 
                <span class="mx-8">Advanced Robotics</span> • <span class="mx-8">Neural Networks</span> • <span class="mx-8">Quantum Computing</span> • <span class="mx-8">Cyber Security</span> • 
            </div>
        </div>

<section id="editorial" class="theme-trigger relative py-32 md:py-48 bg-aura-white text-aura-black transition-colors duration-1000">
            <div class="container mx-auto px-6 md:px-12">
                <div class="grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
                    
                    
                    <div class="md:col-span-3 font-mono text-xs text-aura-gray/70 uppercase space-y-8 reveal">
                        <div>
                            <span class="text-aura-black font-bold mb-2 block">01 / Foundation</span>
                            Zihinleri makinelere, makineleri zihinlere bağlayan bir köprü.
                        </div>
                        <div>
                            <span class="text-aura-black font-bold mb-2 block">02 / Discovery</span>
                            Aktif veya geçmiş algoritmik hareketlerin bulunduğu bölgelerde yoğunlaşır.
                        </div>
                    </div>

<div class="md:col-span-9 relative">
                        
                        <h2 class="font-display text-[15vw] md:text-[10vw] font-extrabold leading-[0.8] tracking-tighter text-intersect absolute top-1/2 left-0 -translate-y-1/2 pointer-events-none whitespace-nowrap">
                            PURE MIND.
                        </h2>
                        
                        
                        <div class="ml-auto w-[80%] md:w-[60%] aspect-[3/4] overflow-hidden rounded-sm reveal target-brackets">
                            <img src="https://images.unsplash.com/photo-1614729939124-032f0b56c9ce?q=80&w=2487&auto=format&fit=crop" 
                                 class="w-full h-full object-cover grayscale hover:grayscale-0 hover:scale-105 transition-all duration-700" alt="Cyber Portrait">
                        </div>
                    </div>

</div>
            </div>
        </section>

<section id="systems" class="theme-trigger-dark relative py-32 bg-aura-black text-aura-white transition-colors duration-1000">
            <div class="container mx-auto px-6 md:px-12">
                
                <div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal">
                    <div>
                        <div class="font-mono text-aura-neon text-xs tracking-widest mb-4">/// HARDWARE & SOFTWARE</div>
                        <h2 class="font-display text-5xl md:text-7xl font-bold">THE ARSENAL</h2>
                    </div>
                    <a href="#" class="mt-6 md:mt-0 font-mono text-xs uppercase border-b border-aura-neon pb-1 text-aura-neon hover:text-white transition-colors interactive">
                        View All Assets ->
                    </a>
                </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    
                    <div class="group relative bg-aura-gray/30 border border-white/5 rounded-3xl p-8 overflow-hidden hover:border-aura-neon/50 transition-all duration-500 reveal interactive">
                        
                        <div class="absolute inset-0 bg-gradient-to-br from-aura-neon/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                        
                        
                        <div class="flex justify-between items-start relative z-10">
                            <h3 class="font-display text-3xl font-bold">NEXUS-V</h3>
                            <span class="bg-aura-neon text-aura-black font-mono text-[10px] px-3 py-1 rounded-full font-bold">ONLINE</span>
                        </div>
                        
                        
                        <div class="relative h-64 my-8 flex justify-center items-center">
                            
                            <div class="absolute w-48 h-48 rounded-full border border-aura-neon/20 group-hover:scale-110 transition-transform duration-700"></div>
                            <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2670&auto=format&fit=crop" 
                                 class="w-full h-full object-cover rounded-xl mix-blend-luminosity group-hover:mix-blend-normal transition-all duration-500 transform group-hover:-translate-y-2" alt="Server">
                            
                            
                            <div class="absolute -right-4 bottom-4 bg-aura-black/80 backdrop-blur border border-aura-neon/30 p-3 rounded-lg font-mono text-[10px] transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 shadow-lg shadow-aura-neon/20">
                                <div class="text-aura-text">Power Output</div>
                                <div class="text-aura-neon text-lg font-bold">150 T/s</div>
                            </div>
                        </div>

<div class="relative z-10 grid grid-cols-3 gap-4 border-t border-white/10 pt-6">
                            <div>
                                <div class="font-mono text-[9px] text-aura-text mb-1 uppercase">Sustainability</div>
                                <div class="font-bold text-sm">Zero CO2</div>
                            </div>
                            <div>
                                <div class="font-mono text-[9px] text-aura-text mb-1 uppercase">Capacity</div>
                                <div class="font-bold text-sm">10.000 TB</div>
                            </div>
                            <div class="text-right">
                                <button class="w-10 h-10 rounded-full bg-white/5 hover:bg-aura-neon hover:text-black flex items-center justify-center ml-auto transition-colors">
                                    <i class="ri-arrow-right-line"></i>
                                </button>
                            </div>
                        </div>
                    </div>

<div class="group relative bg-aura-gray/30 border border-white/5 rounded-3xl p-8 overflow-hidden hover:border-aura-amber/50 transition-all duration-500 reveal interactive" style="transition-delay: 200ms;">
                        <div class="absolute inset-0 bg-gradient-to-bl from-aura-amber/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                        
                        <div class="flex justify-between items-start relative z-10">
                            <h3 class="font-display text-3xl font-bold">ECHO-UNIT</h3>
                            <span class="bg-aura-amber text-aura-black font-mono text-[10px] px-3 py-1 rounded-full font-bold">DEPLOYED</span>
                        </div>
                        
                        <div class="relative h-64 my-8 flex justify-center items-center">
                            <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=2574&auto=format&fit=crop" 
                                 class="w-48 h-48 object-cover rounded-full border-4 border-aura-amber/20 group-hover:border-aura-amber transition-all duration-500 transform group-hover:rotate-12" alt="3D Avatar">
                            
                             <div class="absolute -left-4 top-1/2 bg-aura-black/80 backdrop-blur border border-aura-amber/30 p-3 rounded-lg font-mono text-[10px] transform -translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500 shadow-lg shadow-aura-amber/20">
                                <div class="text-aura-text">Behavior</div>
                                <div class="text-aura-amber font-bold">Adaptive AI</div>
                            </div>
                        </div>

<div class="relative z-10 grid grid-cols-3 gap-4 border-t border-white/10 pt-6">
                            <div>
                                <div class="font-mono text-[9px] text-aura-text mb-1 uppercase">Evolution</div>
                                <div class="font-bold text-sm">Self-Learning</div>
                            </div>
                            <div>
                                <div class="font-mono text-[9px] text-aura-text mb-1 uppercase">Response</div>
                                <div class="font-bold text-sm">0.02ms</div>
                            </div>
                            <div class="text-right">
                                <button class="w-10 h-10 rounded-full bg-white/5 hover:bg-aura-amber hover:text-black flex items-center justify-center ml-auto transition-colors">
                                    <i class="ri-arrow-right-line"></i>
                                </button>
                            </div>
                        </div>
                    </div>

</div>
            </div>
        </section>

<footer class="bg-aura-black border-t border-white/10 pt-20 pb-10 text-aura-text font-mono text-xs">
            <div class="container mx-auto px-6 md:px-12">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-10 mb-20 reveal">
                    <div class="col-span-1 md:col-span-2">
                        <h2 class="font-display text-3xl text-white font-bold mb-6">AURA.</h2>
                        <p class="max-w-xs leading-relaxed">
                            Most platforms look powerful but feel impossible to use. We build synthetics that understand you.
                        </p>
                    </div>
                    <div>
                        <div class="text-white font-bold mb-4 uppercase">Terminals</div>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Core Engine</a></li>
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Neural Web</a></li>
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Documentation</a></li>
                        </ul>
                    </div>
                    <div>
                        <div class="text-white font-bold mb-4 uppercase">Communicate</div>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Initialize Link</a></li>
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Twitter / X</a></li>
                            <li><a href="#" class="hover:text-aura-neon transition-colors interactive">Github</a></li>
                        </ul>
                    </div>
                </div>
                
                <div class="flex flex-col md:flex-row justify-between items-center border-t border-white/10 pt-8">
                    <div>© 2026 AURA SYNTHETICS. ALL SYSTEMS NOMINAL.</div>
                    <div class="flex gap-4 mt-4 md:mt-0 text-white text-lg">
                        <i class="ri-fingerprint-line"></i>
                        <i class="ri-qr-code-line"></i>
                    </div>
                </div>
            </div>
        </footer>
    </main>

// Hover edilebilir elemanlar için class ekle/çıkar
        interactives.forEach(el => {
            el.addEventListener('mouseenter', () => document.body.classList.add('hovering'));
            el.addEventListener('mouseleave', () => document.body.classList.remove('hovering'));
        });

// --- 2. Scroll Ortaya Çıkma (Reveal) Animasyonları ---
        const revealElements = document.querySelectorAll('.reveal');
        
        const revealObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    // Bir kere çalıştıktan sonra takibi bırak
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.15,
            rootMargin: "0px 0px -50px 0px"
        });

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

// --- 3. Tema Rengi Değişimi (Scroll'a bağlı Karanlık <-> Aydınlık Geçişi) ---
        // Görsel 5 ve Görsel 2'deki gibi vurucu kontrast yaratmak için arka plan rengini değiştirir.
        const body = document.body;
        const themeTriggers = document.querySelectorAll('.theme-trigger');
        const themeTriggersDark = document.querySelectorAll('.theme-trigger-dark');

themeTriggers.forEach(el => themeObserver.observe(el));
        themeTriggersDark.forEach(el => themeObserverDark.observe(el));

// --- 4. Basit Parallax Efekti ---
        window.addEventListener('scroll', () => {
            const scrolled = window.scrollY;
            const parallaxImg = document.querySelector('.parallax-img');
            if(parallaxImg) {
                parallaxImg.style.transform = `translateY(${scrolled * 0.3}px)`;
            }
        });
    </script>
</body>
</html>

```

CSS

Metehan

Recommended