Webleb - Code-Snippets

HTML

CSS

<!DOCTYPE html>

<head>

<title>AURA | Geleceği Tasarla</title>

<style>

/* -----------------------------------------------------------

1. CORE VARIABLES & RESET (Modern Renk Paleti)

----------------------------------------------------------- */

:root {

/* Renkler: Koyu Zemin + Gradient Vurgular */

--bg-color: #0f1115;

--surface-color: #181b21;

--surface-glass: rgba(24, 27, 33, 0.7);

--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

--secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);

--text-glow: 0 0 20px rgba(168, 85, 247, 0.5);

--text-main: #ffffff;

--text-muted: #94a3b8;

--border-glass: 1px solid rgba(255, 255, 255, 0.1);

--shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

--transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

--transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

scroll-behavior: smooth;

}

body {

font-family: 'Outfit', sans-serif;

background-color: var(--bg-color);

color: var(--text-main);

overflow-x: hidden;

line-height: 1.6;

}

/* Scrollbar Özelleştirme */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--bg-color);

}

::-webkit-scrollbar-thumb {

background: #334155;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #475569;

}

/* -----------------------------------------------------------

2. UTILITIES & ANIMATIONS (AOS Style without Library)

----------------------------------------------------------- */

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

}

.gradient-text {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: 800;

}

.btn {

display: inline-block;

padding: 12px 32px;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 0.95rem;

letter-spacing: 0.5px;

transition: var(--transition-smooth);

position: relative;

overflow: hidden;

z-index: 1;

border: none;

cursor: pointer;

}

.btn-primary {

background: var(--primary-gradient);

color: white;

box-shadow: 0 10px 20px -10px rgba(168, 85, 247, 0.5);

}

.btn-primary:hover {

transform: translateY(-3px);

box-shadow: 0 20px 30px -10px rgba(168, 85, 247, 0.7);

}

.btn-glass {

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border: var(--border-glass);

color: white;

}

.btn-glass:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateY(-3px);

}

/* Scroll Animation Classes (JS ile tetiklenir) */

.hidden {

opacity: 0;

transform: translateY(50px);

transition: opacity 1s ease, transform 1s ease;

}

.show {

opacity: 1;

transform: translateY(0);

}

.delay-100 { transition-delay: 100ms; }

.delay-200 { transition-delay: 200ms; }

.delay-300 { transition-delay: 300ms; }

.section-title {

font-size: 2.5rem;

text-align: center;

margin-bottom: 1rem;

position: relative;

display: inline-block;

left: 50%;

transform: translateX(-50%);

}

.section-subtitle {

text-align: center;

color: var(--text-muted);

margin-bottom: 4rem;

font-weight: 300;

}

/* -----------------------------------------------------------

3. HEADER & NAVIGATION

----------------------------------------------------------- */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

transition: var(--transition-smooth);

padding: 1.5rem 0;

}

header.scrolled {

padding: 1rem 0;

background: rgba(15, 17, 21, 0.85);

backdrop-filter: blur(20px);

border-bottom: var(--border-glass);

box-shadow: 0 10px 30px rgba(0,0,0,0.2);

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 900;

color: white;

text-decoration: none;

letter-spacing: -1px;

display: flex;

align-items: center;

gap: 10px;

}

.logo i {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.nav-links {

display: flex;

gap: 2rem;

list-style: none;

}

.nav-links a {

color: var(--text-muted);

text-decoration: none;

font-weight: 500;

transition: 0.3s;

position: relative;

}

.nav-links a:hover, .nav-links a.active {

color: white;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: var(--primary-gradient);

transition: 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

.hamburger {

display: none;

cursor: pointer;

font-size: 1.5rem;

color: white;

}

/* -----------------------------------------------------------

4. HERO SECTION

----------------------------------------------------------- */

.hero {

height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

padding-top: 80px;

}

/* Arkaplan Işık Efektleri */

.glow-blob {

position: absolute;

width: 600px;

height: 600px;

background: var(--primary-gradient);

border-radius: 50%;

filter: blur(120px);

opacity: 0.2;

z-index: -1;

animation: blobFloat 10s infinite alternate;

}

.blob-1 { top: -100px; left: -100px; }

.blob-2 { bottom: -100px; right: -100px; background: var(--secondary-gradient); animation-delay: -5s; }

@keyframes blobFloat {

0% { transform: translate(0, 0) scale(1); }

100% { transform: translate(50px, 50px) scale(1.1); }

}

.hero-content {

max-width: 800px;

z-index: 2;

}

.hero h1 {

font-size: 5rem;

line-height: 1.1;

margin-bottom: 1.5rem;

letter-spacing: -2px;

}

.hero p {

font-size: 1.25rem;

color: var(--text-muted);

margin-bottom: 2.5rem;

max-width: 600px;

}

.hero-stats {

display: flex;

gap: 3rem;

margin-top: 3rem;

border-top: 1px solid rgba(255,255,255,0.1);

padding-top: 2rem;

}

.stat h3 { font-size: 2rem; font-weight: 700; color: white; }

.stat p { font-size: 0.9rem; color: var(--text-muted); }

/* -----------------------------------------------------------

5. ABOUT SECTION (Timeline Style)

----------------------------------------------------------- */

.section {

padding: 8rem 0;

position: relative;

}

.timeline {

position: relative;

max-width: 900px;

margin: 0 auto;

}

.timeline::after {

content: '';

position: absolute;

width: 2px;

background: rgba(255,255,255,0.1);

top: 0;

bottom: 0;

left: 50%;

margin-left: -1px;

}

.timeline-item {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: 50%;

}

.timeline-item::after {

content: '';

position: absolute;

width: 20px;

height: 20px;

right: -10px;

background: var(--bg-color);

border: 4px solid #a855f7;

top: 25px;

border-radius: 50%;

z-index: 1;

transition: var(--transition-bounce);

}

.left { left: 0; text-align: right; }

.right { left: 50%; text-align: left; }

.left::after { right: -10px; }

.right::after { left: -10px; }

.content-card {

padding: 2rem;

background: var(--surface-glass);

border: var(--border-glass);

border-radius: 16px;

position: relative;

transition: var(--transition-smooth);

backdrop-filter: blur(5px);

}

.content-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 40px rgba(168, 85, 247, 0.15);

border-color: rgba(168, 85, 247, 0.3);

}

.timeline-item:hover::after {

background: #a855f7;

box-shadow: 0 0 15px #a855f7;

transform: scale(1.2);

}

/* -----------------------------------------------------------

6. VIDEO SECTION (Dark & Cinematic)

----------------------------------------------------------- */

.video-section {

background: #000;

position: relative;

}

.video-grid {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 20px;

height: 500px;

}

.video-item {

position: relative;

border-radius: 16px;

overflow: hidden;

cursor: pointer;

}

.video-item.main { grid-row: span 2; }

.video-thumb {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.video-overlay {

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0,0,0,0.4);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: 0.3s;

}

.play-btn {

width: 70px;

height: 70px;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

color: white;

transition: var(--transition-bounce);

}

.video-item:hover .video-thumb { transform: scale(1.05); }

.video-item:hover .video-overlay { opacity: 1; }

.video-item:hover .play-btn { transform: scale(1.1); background: var(--primary-gradient); }

/* Video Modal */

.modal {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background: rgba(0,0,0,0.95);

z-index: 2000;

display: none;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.3s;

}

.modal.active { display: flex; opacity: 1; }

.modal-content {

width: 80%;

max-width: 900px;

position: relative;

background: #000;

border-radius: 16px;

overflow: hidden;

box-shadow: 0 0 50px rgba(168, 85, 247, 0.3);

}

.close-modal {

position: absolute;

top: -50px;

right: 0;

color: white;

font-size: 2rem;

cursor: pointer;

transition: 0.3s;

}

.close-modal:hover { color: #ec4899; transform: rotate(90deg); }

/* -----------------------------------------------------------

7. BLOG SECTION (Cards)

----------------------------------------------------------- */

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.blog-card {

background: var(--surface-color);

border-radius: 16px;

overflow: hidden;

border: var(--border-glass);

transition: var(--transition-smooth);

group: 1;

}

.blog-img-wrapper {

height: 220px;

overflow: hidden;

position: relative;

}

.blog-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.blog-card:hover { transform: translateY(-10px); }

.blog-card:hover .blog-img { transform: scale(1.1); }

.blog-content { padding: 1.5rem; }

.blog-tag {

font-size: 0.75rem;

color: #a855f7;

text-transform: uppercase;

font-weight: 700;

letter-spacing: 1px;

margin-bottom: 0.5rem;

display: block;

}

.blog-title {

font-size: 1.25rem;

margin-bottom: 1rem;

color: white;

line-height: 1.4;

}

.blog-link {

color: white;

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 5px;

transition: 0.3s;

}

.blog-link:hover { color: #ec4899; gap: 10px; }

/* -----------------------------------------------------------

8. GALLERY (Masonry & Lightbox)

----------------------------------------------------------- */

.gallery-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-auto-rows: 200px;

gap: 15px;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: zoom-in;

}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }

.gallery-item:nth-child(4) { grid-column: span 2; }

.gallery-item:nth-child(5) { grid-row: span 2; }

.gallery-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: filter 0.3s, transform 0.5s;

}

.gallery-item:hover .gallery-img {

transform: scale(1.05);

filter: brightness(1.1);

}

/* Lightbox (Reusing Modal Logic mostly) */

.lightbox-img {

max-height: 80vh;

max-width: 100%;

border-radius: 8px;

}

/* -----------------------------------------------------------

9. CONTACT SECTION

----------------------------------------------------------- */

.contact-wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

padding: 3rem;

border-radius: 24px;

border: var(--border-glass);

backdrop-filter: blur(10px);

}

.contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }

.info-item {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 1.5rem;

font-size: 1.1rem;

color: var(--text-muted);

}

.info-item i {

width: 40px;

height: 40px;

background: rgba(255,255,255,0.05);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #a855f7;

font-size: 1.2rem;

}

.form-group { margin-bottom: 1.5rem; position: relative; }

.form-control {

width: 100%;

padding: 1rem;

background: rgba(0,0,0,0.3);

border: 1px solid rgba(255,255,255,0.1);

border-radius: 12px;

color: white;

font-family: inherit;

transition: 0.3s;

}

.form-control:focus {

outline: none;

border-color: #a855f7;

box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);

background: rgba(0,0,0,0.5);

}

.form-label {

position: absolute;

left: 1rem;

top: 1rem;

color: #64748b;

pointer-events: none;

transition: 0.3s;

font-size: 0.9rem;

}

.form-control:focus ~ .form-label,

.form-control:not(:placeholder-shown) ~ .form-label {

top: -0.7rem;

left: 0.8rem;

font-size: 0.75rem;

color: #a855f7;

background: var(--bg-color);

padding: 0 5px;

}

/* -----------------------------------------------------------

10. FOOTER

----------------------------------------------------------- */

footer {

background: #050505;

padding: 5rem 0 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

position: relative;

}

footer::before {

content: '';

position: absolute;

top: 0; left: 0; width: 100%; height: 1px;

background: linear-gradient(90deg, transparent, #a855f7, transparent);

}

.footer-grid {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

gap: 4rem;

margin-bottom: 4rem;

}

.footer-col h4 {

color: white;

margin-bottom: 1.5rem;

font-size: 1.2rem;

}

.footer-col p { color: #64748b; margin-bottom: 1.5rem; }

.social-links { display: flex; gap: 1rem; }

.social-links a {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255,255,255,0.05);

display: flex;

align-items: center;

justify-content: center;

color: white;

text-decoration: none;

transition: 0.3s;

}

.social-links a:hover {

background: var(--primary-gradient);

transform: translateY(-3px);

}

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: 0.8rem; }

.footer-links a {

color: #94a3b8;

text-decoration: none;

transition: 0.3s;

}

.footer-links a:hover { color: #a855f7; padding-left: 5px; }

.copyright {

text-align: center;

color: #475569;

font-size: 0.9rem;

padding-top: 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

}

/* -----------------------------------------------------------

11. RESPONSIVE DESIGN

----------------------------------------------------------- */

@media (max-width: 992px) {

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

.timeline::after { left: 31px; }

.timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }

.timeline-item::after { left: 21px; }

.left::after { left: 21px; }

.right { left: 0; }

.left { text-align: left; }

.gallery-grid { grid-template-columns: repeat(2, 1fr); }

.contact-wrapper { grid-template-columns: 1fr; gap: 2rem; }

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }

}

@media (max-width: 768px) {

.hamburger { display: block; z-index: 1001; }

.nav-links {

position: fixed;

top: 0; right: -100%;

width: 100%; height: 100vh;

background: #0f1115;

flex-direction: column;

justify-content: center;

align-items: center;

transition: 0.4s ease-in-out;

z-index: 1000;

}

.nav-links.active { right: 0; }

.hero-stats { flex-direction: column; gap: 1.5rem; }

.video-grid { grid-template-columns: 1fr; height: auto; }

.video-item { height: 250px; }

.gallery-grid { grid-template-columns: 1fr; }

}

</style>

</head>

<body>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<li><a href="#home" class="active">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#portfolio">Galeri</a></li>

<li><a href="#contact">İletişim</a></li>

<li><a href="#" class="btn btn-primary" style="padding: 8px 20px;">Giriş Yap</a></li>

</ul>

</div>

</header>

<h1>Sınırları Aşan<br><span class="gradient-text">Dijital Deneyimler.</span></h1>

<p>Aura, markanızı geleceğe taşıyan, premium tasarım anlayışını en son web teknolojileriyle buluşturan kreatif bir stüdyodur.</p>

<a href="#contact" class="btn btn-primary">Projeye Başla</a>

<a href="#video" class="btn btn-glass"><i class="fa-solid fa-play"></i> Tanıtımı İzle</a>

</div>

<p>Tamamlanan Proje</p>

</div>

<p>Müşteri Memnuniyeti</p>

</div>

<p>Global Ödül</p>

</div>

</section>

<h2 class="section-title hidden">Yolculuğumuz</h2>

<p class="section-subtitle hidden delay-100">Dünden bugüne değişmeyen vizyonumuz.</p>

<h4>Başlangıç</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Küçük bir garaj ofisinde, iki kişilik bir ekiple büyük hayaller kurarak yola çıktık.</p>

</div>

<h4>Global Açılım</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Avrupa ve Amerika pazarına açılarak ilk uluslararası ödülümüzü kazandık.</p>

</div>

<h4>Teknoloji Devi</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Yapay zeka entegrasyonlu tasarım sistemlerimizle sektöre yön vermeye başladık.</p>

</div>

<p style="color: var(--text-muted); margin-top: 10px;">Kendi geliştirdiğimiz ekosistem ile tasarım dünyasında yeni bir standart belirledik.</p>

</div>

</section>

<h2 class="section-title hidden" style="color:white;">Sinematik Vizyon</h2>

<p class="section-subtitle hidden">Hikayenizi anlatmanın en güçlü yolu.</p>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Seçkin İşler</h2>

<p class="section-subtitle hidden">Sanat ve teknolojinin kesişim noktası.</p>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Görüşler & Haberler</h2>

<p class="section-subtitle hidden">Sektörden en son trendler ve analizler.</p>

</div>

<span class="blog-tag">Yapay Zeka</span>

<h3 class="blog-title">AI Destekli Tasarımın Geleceği</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Analiz</span>

<h3 class="blog-title">Veri Görselleştirmede Yeni Çağ</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Yazılım</span>

<h3 class="blog-title">Web 3.0 ve Glassmorphism</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

</section>

<h2 class="section-title hidden">İletişime Geçin</h2>

<p class="section-subtitle hidden">Bir sonraki büyük projenizi birlikte hayata geçirelim.</p>

<h3 class="gradient-text">Aura Studio HQ</h3>

<p style="color:#94a3b8; margin-bottom: 2rem;">San Francisco ve İstanbul ofislerimizle, global ölçekte premium hizmet veriyoruz.</p>

<span>Levent 199, Büyükdere Cd. İstanbul</span>

</div>

<span>hello@aurastudio.com</span>

</div>

</div>

</div>

<label for="name" class="form-label">Adınız Soyadınız</label>

</div>

<label for="email" class="form-label">E-posta Adresiniz</label>

</div>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary" style="width: 100%;">Mesajı Gönder</button>

</form>

</div>

</section>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<p>Teknolojiyi sanatla, tasarımı fonksiyonla birleştiriyoruz. Geleceğin dijital dünyasını bugün inşa ediyoruz.</p>

</div>

<h4>Hızlı Bağlantılar</h4>

<ul>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#portfolio">Projeler</a></li>

<li><a href="#contact">Kariyer</a></li>

</ul>

</div>

<h4>Yasal</h4>

<ul>

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Hizmet Şartları</a></li>

<li><a href="#">Çerez Politikası</a></li>

</ul>

</div>

</div>

</footer>

</div>

</div>

// 1. Scroll Animation Logic (Intersection Observer) - AOS alternatifi

const observerOptions = {

threshold: 0.15, // %15'i göründüğünde tetikle

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('show');

// Bir kere animasyon oynadıktan sonra gözlemlemeyi bırakabiliriz (opsiyonel)

// observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.hidden').forEach((el) => observer.observe(el));

// 2. Sticky Header & Active Link Highlighting

const header = document.getElementById('header');

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('.nav-links a');

window.addEventListener('scroll', () => {

// Sticky Header Effect

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

// Active Link Highlighter

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

if (scrollY >= (sectionTop - 200)) {

current = section.getAttribute('id');

}

});

navLinks.forEach(a => {

a.classList.remove('active');

if (a.getAttribute('href').includes(current)) {

a.classList.add('active');

}

});

// 3. Mobile Menu Toggle

const hamburger = document.querySelector('.hamburger');

const navMenu = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {

navMenu.classList.toggle('active');

hamburger.querySelector('i').classList.toggle('fa-bars');

hamburger.querySelector('i').classList.toggle('fa-xmark');

});

// Linklere tıklandığında menüyü kapat

document.querySelectorAll('.nav-links a').forEach(link => {

link.addEventListener('click', () => {

navMenu.classList.remove('active');

hamburger.querySelector('i').classList.add('fa-bars');

hamburger.querySelector('i').classList.remove('fa-xmark');

});

// 4. Video Modal Logic

const modal = document.getElementById('videoModal');

const videoFrame = document.getElementById('videoFrame');

function openModal(url) {

videoFrame.src = url;

modal.classList.add('active');

document.body.style.overflow = 'hidden'; // Arka plan scroll'u engelle

}

function closeModal() {

modal.classList.remove('active');

videoFrame.src = ''; // Videoyu durdur

document.body.style.overflow = 'auto';

}

// Modal dışına tıklayınca kapatma

modal.addEventListener('click', (e) => {

if (e.target === modal) closeModal();

});

// 5. Lightbox Logic

const lightbox = document.getElementById('lightboxModal');

const lightboxImg = document.getElementById('lightboxImage');

function openLightbox(src) {

lightboxImg.src = src;

lightbox.classList.add('active');

document.body.style.overflow = 'hidden';

}

function closeLightbox() {

lightbox.classList.remove('active');

document.body.style.overflow = 'auto';

}

// Load Event - Sayfa yüklendiğinde Hero bölümünü yumuşakça getir

window.addEventListener('load', () => {

document.querySelector('.hero-content').classList.add('show');

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>AURA | Geleceği Tasarla</title>

<style>

/* -----------------------------------------------------------

1. CORE VARIABLES & RESET (Modern Renk Paleti)

----------------------------------------------------------- */

:root {

/* Renkler: Koyu Zemin + Gradient Vurgular */

--bg-color: #0f1115;

--surface-color: #181b21;

--surface-glass: rgba(24, 27, 33, 0.7);

--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

--secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);

--text-glow: 0 0 20px rgba(168, 85, 247, 0.5);

--text-main: #ffffff;

--text-muted: #94a3b8;

--border-glass: 1px solid rgba(255, 255, 255, 0.1);

--shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

--transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

--transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

scroll-behavior: smooth;

}

body {

font-family: 'Outfit', sans-serif;

background-color: var(--bg-color);

color: var(--text-main);

overflow-x: hidden;

line-height: 1.6;

}

/* Scrollbar Özelleştirme */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: var(--bg-color);

}

::-webkit-scrollbar-thumb {

background: #334155;

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: #475569;

}

/* -----------------------------------------------------------

2. UTILITIES & ANIMATIONS (AOS Style without Library)

----------------------------------------------------------- */

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

}

.gradient-text {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: 800;

}

.btn {

display: inline-block;

padding: 12px 32px;

border-radius: 50px;

text-decoration: none;

font-weight: 600;

font-size: 0.95rem;

letter-spacing: 0.5px;

transition: var(--transition-smooth);

position: relative;

overflow: hidden;

z-index: 1;

border: none;

cursor: pointer;

}

.btn-primary {

background: var(--primary-gradient);

color: white;

box-shadow: 0 10px 20px -10px rgba(168, 85, 247, 0.5);

}

.btn-primary:hover {

transform: translateY(-3px);

box-shadow: 0 20px 30px -10px rgba(168, 85, 247, 0.7);

}

.btn-glass {

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border: var(--border-glass);

color: white;

}

.btn-glass:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateY(-3px);

}

/* Scroll Animation Classes (JS ile tetiklenir) */

.hidden {

opacity: 0;

transform: translateY(50px);

transition: opacity 1s ease, transform 1s ease;

}

.show {

opacity: 1;

transform: translateY(0);

}

.delay-100 { transition-delay: 100ms; }

.delay-200 { transition-delay: 200ms; }

.delay-300 { transition-delay: 300ms; }

.section-title {

font-size: 2.5rem;

text-align: center;

margin-bottom: 1rem;

position: relative;

display: inline-block;

left: 50%;

transform: translateX(-50%);

}

.section-subtitle {

text-align: center;

color: var(--text-muted);

margin-bottom: 4rem;

font-weight: 300;

}

/* -----------------------------------------------------------

3. HEADER & NAVIGATION

----------------------------------------------------------- */

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

transition: var(--transition-smooth);

padding: 1.5rem 0;

}

header.scrolled {

padding: 1rem 0;

background: rgba(15, 17, 21, 0.85);

backdrop-filter: blur(20px);

border-bottom: var(--border-glass);

box-shadow: 0 10px 30px rgba(0,0,0,0.2);

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 1.8rem;

font-weight: 900;

color: white;

text-decoration: none;

letter-spacing: -1px;

display: flex;

align-items: center;

gap: 10px;

}

.logo i {

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.nav-links {

display: flex;

gap: 2rem;

list-style: none;

}

.nav-links a {

color: var(--text-muted);

text-decoration: none;

font-weight: 500;

transition: 0.3s;

position: relative;

}

.nav-links a:hover, .nav-links a.active {

color: white;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: var(--primary-gradient);

transition: 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

.hamburger {

display: none;

cursor: pointer;

font-size: 1.5rem;

color: white;

}

/* -----------------------------------------------------------

4. HERO SECTION

----------------------------------------------------------- */

.hero {

height: 100vh;

display: flex;

align-items: center;

position: relative;

overflow: hidden;

padding-top: 80px;

}

/* Arkaplan Işık Efektleri */

.glow-blob {

position: absolute;

width: 600px;

height: 600px;

background: var(--primary-gradient);

border-radius: 50%;

filter: blur(120px);

opacity: 0.2;

z-index: -1;

animation: blobFloat 10s infinite alternate;

}

.blob-1 { top: -100px; left: -100px; }

.blob-2 { bottom: -100px; right: -100px; background: var(--secondary-gradient); animation-delay: -5s; }

@keyframes blobFloat {

0% { transform: translate(0, 0) scale(1); }

100% { transform: translate(50px, 50px) scale(1.1); }

}

.hero-content {

max-width: 800px;

z-index: 2;

}

.hero h1 {

font-size: 5rem;

line-height: 1.1;

margin-bottom: 1.5rem;

letter-spacing: -2px;

}

.hero p {

font-size: 1.25rem;

color: var(--text-muted);

margin-bottom: 2.5rem;

max-width: 600px;

}

.hero-stats {

display: flex;

gap: 3rem;

margin-top: 3rem;

border-top: 1px solid rgba(255,255,255,0.1);

padding-top: 2rem;

}

.stat h3 { font-size: 2rem; font-weight: 700; color: white; }

.stat p { font-size: 0.9rem; color: var(--text-muted); }

/* -----------------------------------------------------------

5. ABOUT SECTION (Timeline Style)

----------------------------------------------------------- */

.section {

padding: 8rem 0;

position: relative;

}

.timeline {

position: relative;

max-width: 900px;

margin: 0 auto;

}

.timeline::after {

content: '';

position: absolute;

width: 2px;

background: rgba(255,255,255,0.1);

top: 0;

bottom: 0;

left: 50%;

margin-left: -1px;

}

.timeline-item {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: 50%;

}

.timeline-item::after {

content: '';

position: absolute;

width: 20px;

height: 20px;

right: -10px;

background: var(--bg-color);

border: 4px solid #a855f7;

top: 25px;

border-radius: 50%;

z-index: 1;

transition: var(--transition-bounce);

}

.left { left: 0; text-align: right; }

.right { left: 50%; text-align: left; }

.left::after { right: -10px; }

.right::after { left: -10px; }

.content-card {

padding: 2rem;

background: var(--surface-glass);

border: var(--border-glass);

border-radius: 16px;

position: relative;

transition: var(--transition-smooth);

backdrop-filter: blur(5px);

}

.content-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 40px rgba(168, 85, 247, 0.15);

border-color: rgba(168, 85, 247, 0.3);

}

.timeline-item:hover::after {

background: #a855f7;

box-shadow: 0 0 15px #a855f7;

transform: scale(1.2);

}

/* -----------------------------------------------------------

6. VIDEO SECTION (Dark & Cinematic)

----------------------------------------------------------- */

.video-section {

background: #000;

position: relative;

}

.video-grid {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 20px;

height: 500px;

}

.video-item {

position: relative;

border-radius: 16px;

overflow: hidden;

cursor: pointer;

}

.video-item.main { grid-row: span 2; }

.video-thumb {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.video-overlay {

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: rgba(0,0,0,0.4);

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transition: 0.3s;

}

.play-btn {

width: 70px;

height: 70px;

background: rgba(255,255,255,0.2);

backdrop-filter: blur(10px);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

color: white;

transition: var(--transition-bounce);

}

.video-item:hover .video-thumb { transform: scale(1.05); }

.video-item:hover .video-overlay { opacity: 1; }

.video-item:hover .play-btn { transform: scale(1.1); background: var(--primary-gradient); }

/* Video Modal */

.modal {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background: rgba(0,0,0,0.95);

z-index: 2000;

display: none;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity 0.3s;

}

.modal.active { display: flex; opacity: 1; }

.modal-content {

width: 80%;

max-width: 900px;

position: relative;

background: #000;

border-radius: 16px;

overflow: hidden;

box-shadow: 0 0 50px rgba(168, 85, 247, 0.3);

}

.close-modal {

position: absolute;

top: -50px;

right: 0;

color: white;

font-size: 2rem;

cursor: pointer;

transition: 0.3s;

}

.close-modal:hover { color: #ec4899; transform: rotate(90deg); }

/* -----------------------------------------------------------

7. BLOG SECTION (Cards)

----------------------------------------------------------- */

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.blog-card {

background: var(--surface-color);

border-radius: 16px;

overflow: hidden;

border: var(--border-glass);

transition: var(--transition-smooth);

group: 1;

}

.blog-img-wrapper {

height: 220px;

overflow: hidden;

position: relative;

}

.blog-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.blog-card:hover { transform: translateY(-10px); }

.blog-card:hover .blog-img { transform: scale(1.1); }

.blog-content { padding: 1.5rem; }

.blog-tag {

font-size: 0.75rem;

color: #a855f7;

text-transform: uppercase;

font-weight: 700;

letter-spacing: 1px;

margin-bottom: 0.5rem;

display: block;

}

.blog-title {

font-size: 1.25rem;

margin-bottom: 1rem;

color: white;

line-height: 1.4;

}

.blog-link {

color: white;

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 5px;

transition: 0.3s;

}

.blog-link:hover { color: #ec4899; gap: 10px; }

/* -----------------------------------------------------------

8. GALLERY (Masonry & Lightbox)

----------------------------------------------------------- */

.gallery-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-auto-rows: 200px;

gap: 15px;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

cursor: zoom-in;

}

.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }

.gallery-item:nth-child(4) { grid-column: span 2; }

.gallery-item:nth-child(5) { grid-row: span 2; }

.gallery-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: filter 0.3s, transform 0.5s;

}

.gallery-item:hover .gallery-img {

transform: scale(1.05);

filter: brightness(1.1);

}

/* Lightbox (Reusing Modal Logic mostly) */

.lightbox-img {

max-height: 80vh;

max-width: 100%;

border-radius: 8px;

}

/* -----------------------------------------------------------

9. CONTACT SECTION

----------------------------------------------------------- */

.contact-wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));

padding: 3rem;

border-radius: 24px;

border: var(--border-glass);

backdrop-filter: blur(10px);

}

.contact-info h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }

.info-item {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 1.5rem;

font-size: 1.1rem;

color: var(--text-muted);

}

.info-item i {

width: 40px;

height: 40px;

background: rgba(255,255,255,0.05);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: #a855f7;

font-size: 1.2rem;

}

.form-group { margin-bottom: 1.5rem; position: relative; }

.form-control {

width: 100%;

padding: 1rem;

background: rgba(0,0,0,0.3);

border: 1px solid rgba(255,255,255,0.1);

border-radius: 12px;

color: white;

font-family: inherit;

transition: 0.3s;

}

.form-control:focus {

outline: none;

border-color: #a855f7;

box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);

background: rgba(0,0,0,0.5);

}

.form-label {

position: absolute;

left: 1rem;

top: 1rem;

color: #64748b;

pointer-events: none;

transition: 0.3s;

font-size: 0.9rem;

}

.form-control:focus ~ .form-label,

.form-control:not(:placeholder-shown) ~ .form-label {

top: -0.7rem;

left: 0.8rem;

font-size: 0.75rem;

color: #a855f7;

background: var(--bg-color);

padding: 0 5px;

}

/* -----------------------------------------------------------

10. FOOTER

----------------------------------------------------------- */

footer {

background: #050505;

padding: 5rem 0 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

position: relative;

}

footer::before {

content: '';

position: absolute;

top: 0; left: 0; width: 100%; height: 1px;

background: linear-gradient(90deg, transparent, #a855f7, transparent);

}

.footer-grid {

display: grid;

grid-template-columns: 2fr 1fr 1fr;

gap: 4rem;

margin-bottom: 4rem;

}

.footer-col h4 {

color: white;

margin-bottom: 1.5rem;

font-size: 1.2rem;

}

.footer-col p { color: #64748b; margin-bottom: 1.5rem; }

.social-links { display: flex; gap: 1rem; }

.social-links a {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255,255,255,0.05);

display: flex;

align-items: center;

justify-content: center;

color: white;

text-decoration: none;

transition: 0.3s;

}

.social-links a:hover {

background: var(--primary-gradient);

transform: translateY(-3px);

}

.footer-links ul { list-style: none; }

.footer-links li { margin-bottom: 0.8rem; }

.footer-links a {

color: #94a3b8;

text-decoration: none;

transition: 0.3s;

}

.footer-links a:hover { color: #a855f7; padding-left: 5px; }

.copyright {

text-align: center;

color: #475569;

font-size: 0.9rem;

padding-top: 2rem;

border-top: 1px solid rgba(255,255,255,0.05);

}

/* -----------------------------------------------------------

11. RESPONSIVE DESIGN

----------------------------------------------------------- */

@media (max-width: 992px) {

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

.timeline::after { left: 31px; }

.timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }

.timeline-item::after { left: 21px; }

.left::after { left: 21px; }

.right { left: 0; }

.left { text-align: left; }

.gallery-grid { grid-template-columns: repeat(2, 1fr); }

.contact-wrapper { grid-template-columns: 1fr; gap: 2rem; }

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }

}

@media (max-width: 768px) {

.hamburger { display: block; z-index: 1001; }

.nav-links {

position: fixed;

top: 0; right: -100%;

width: 100%; height: 100vh;

background: #0f1115;

flex-direction: column;

justify-content: center;

align-items: center;

transition: 0.4s ease-in-out;

z-index: 1000;

}

.nav-links.active { right: 0; }

.hero-stats { flex-direction: column; gap: 1.5rem; }

.video-grid { grid-template-columns: 1fr; height: auto; }

.video-item { height: 250px; }

.gallery-grid { grid-template-columns: 1fr; }

}

</style>

</head>

<body>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<li><a href="#home" class="active">Ana Sayfa</a></li>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#services">Hizmetler</a></li>

<li><a href="#portfolio">Galeri</a></li>

<li><a href="#contact">İletişim</a></li>

<li><a href="#" class="btn btn-primary" style="padding: 8px 20px;">Giriş Yap</a></li>

</ul>

</div>

</header>

<h1>Sınırları Aşan<br><span class="gradient-text">Dijital Deneyimler.</span></h1>

<p>Aura, markanızı geleceğe taşıyan, premium tasarım anlayışını en son web teknolojileriyle buluşturan kreatif bir stüdyodur.</p>

<a href="#contact" class="btn btn-primary">Projeye Başla</a>

<a href="#video" class="btn btn-glass"><i class="fa-solid fa-play"></i> Tanıtımı İzle</a>

</div>

<p>Tamamlanan Proje</p>

</div>

<p>Müşteri Memnuniyeti</p>

</div>

<p>Global Ödül</p>

</div>

</section>

<h2 class="section-title hidden">Yolculuğumuz</h2>

<p class="section-subtitle hidden delay-100">Dünden bugüne değişmeyen vizyonumuz.</p>

<h4>Başlangıç</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Küçük bir garaj ofisinde, iki kişilik bir ekiple büyük hayaller kurarak yola çıktık.</p>

</div>

<h4>Global Açılım</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Avrupa ve Amerika pazarına açılarak ilk uluslararası ödülümüzü kazandık.</p>

</div>

<h4>Teknoloji Devi</h4>

<p style="color: var(--text-muted); margin-top: 10px;">Yapay zeka entegrasyonlu tasarım sistemlerimizle sektöre yön vermeye başladık.</p>

</div>

<p style="color: var(--text-muted); margin-top: 10px;">Kendi geliştirdiğimiz ekosistem ile tasarım dünyasında yeni bir standart belirledik.</p>

</div>

</section>

<h2 class="section-title hidden" style="color:white;">Sinematik Vizyon</h2>

<p class="section-subtitle hidden">Hikayenizi anlatmanın en güçlü yolu.</p>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Seçkin İşler</h2>

<p class="section-subtitle hidden">Sanat ve teknolojinin kesişim noktası.</p>

</div>

</div>

</div>

</div>

</div>

</section>

<h2 class="section-title hidden">Görüşler & Haberler</h2>

<p class="section-subtitle hidden">Sektörden en son trendler ve analizler.</p>

</div>

<span class="blog-tag">Yapay Zeka</span>

<h3 class="blog-title">AI Destekli Tasarımın Geleceği</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Analiz</span>

<h3 class="blog-title">Veri Görselleştirmede Yeni Çağ</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

<span class="blog-tag">Yazılım</span>

<h3 class="blog-title">Web 3.0 ve Glassmorphism</h3>

<a href="#" class="blog-link">Devamını Oku <i class="fa-solid fa-arrow-right"></i></a>

</div>

</article>

</div>

</section>

<h2 class="section-title hidden">İletişime Geçin</h2>

<p class="section-subtitle hidden">Bir sonraki büyük projenizi birlikte hayata geçirelim.</p>

<h3 class="gradient-text">Aura Studio HQ</h3>

<p style="color:#94a3b8; margin-bottom: 2rem;">San Francisco ve İstanbul ofislerimizle, global ölçekte premium hizmet veriyoruz.</p>

<span>Levent 199, Büyükdere Cd. İstanbul</span>

</div>

<span>hello@aurastudio.com</span>

</div>

</div>

</div>

<label for="name" class="form-label">Adınız Soyadınız</label>

</div>

<label for="email" class="form-label">E-posta Adresiniz</label>

</div>

</div>

<label for="message" class="form-label">Mesajınız</label>

</div>

<button type="submit" class="btn btn-primary" style="width: 100%;">Mesajı Gönder</button>

</form>

</div>

</section>

<i class="fa-solid fa-bolt"></i> AURA

</a>

<p>Teknolojiyi sanatla, tasarımı fonksiyonla birleştiriyoruz. Geleceğin dijital dünyasını bugün inşa ediyoruz.</p>

</div>

<h4>Hızlı Bağlantılar</h4>

<ul>

<li><a href="#about">Hakkımızda</a></li>

<li><a href="#portfolio">Projeler</a></li>

<li><a href="#contact">Kariyer</a></li>

</ul>

</div>

<h4>Yasal</h4>

<ul>

<li><a href="#">Gizlilik Politikası</a></li>

<li><a href="#">Hizmet Şartları</a></li>

<li><a href="#">Çerez Politikası</a></li>

</ul>

</div>

</div>

</footer>

</div>

</div>

// 1. Scroll Animation Logic (Intersection Observer) - AOS alternatifi

const observerOptions = {

threshold: 0.15, // %15'i göründüğünde tetikle

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('show');

// Bir kere animasyon oynadıktan sonra gözlemlemeyi bırakabiliriz (opsiyonel)

// observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.hidden').forEach((el) => observer.observe(el));

// 2. Sticky Header & Active Link Highlighting

const header = document.getElementById('header');

const sections = document.querySelectorAll('section');

const navLinks = document.querySelectorAll('.nav-links a');

window.addEventListener('scroll', () => {

// Sticky Header Effect

if (window.scrollY > 50) {

header.classList.add('scrolled');

} else {

header.classList.remove('scrolled');

}

// Active Link Highlighter

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

if (scrollY >= (sectionTop - 200)) {

current = section.getAttribute('id');

}

});

navLinks.forEach(a => {

a.classList.remove('active');

if (a.getAttribute('href').includes(current)) {

a.classList.add('active');

}

});

// 3. Mobile Menu Toggle

const hamburger = document.querySelector('.hamburger');

const navMenu = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {

navMenu.classList.toggle('active');

hamburger.querySelector('i').classList.toggle('fa-bars');

hamburger.querySelector('i').classList.toggle('fa-xmark');

});

// Linklere tıklandığında menüyü kapat

document.querySelectorAll('.nav-links a').forEach(link => {

link.addEventListener('click', () => {

navMenu.classList.remove('active');

hamburger.querySelector('i').classList.add('fa-bars');

hamburger.querySelector('i').classList.remove('fa-xmark');

});

// 4. Video Modal Logic

const modal = document.getElementById('videoModal');

const videoFrame = document.getElementById('videoFrame');

function openModal(url) {

videoFrame.src = url;

modal.classList.add('active');

document.body.style.overflow = 'hidden'; // Arka plan scroll'u engelle

}

function closeModal() {

modal.classList.remove('active');

videoFrame.src = ''; // Videoyu durdur

document.body.style.overflow = 'auto';

}

// Modal dışına tıklayınca kapatma

modal.addEventListener('click', (e) => {

if (e.target === modal) closeModal();

});

// 5. Lightbox Logic

const lightbox = document.getElementById('lightboxModal');

const lightboxImg = document.getElementById('lightboxImage');

function openLightbox(src) {

lightboxImg.src = src;

lightbox.classList.add('active');

document.body.style.overflow = 'hidden';

}

function closeLightbox() {

lightbox.classList.remove('active');

document.body.style.overflow = 'auto';

}

// Load Event - Sayfa yüklendiğinde Hero bölümünü yumuşakça getir

window.addEventListener('load', () => {

document.querySelector('.hero-content').classList.add('show');

});

</script>

</body>

</html>