Tekil Mesaj gösterimi - Kimi 2.5 çıkmış

Konu Kimi 2.5 çıkmış

28-01-2026, 18:09:16

#6

İbrahimH

Hocam
bana profesyonel bir yapım aşamasında sayfası yap dedim.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yapım Aşamasında | Çok Yakında Hizmetinizde</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0a0a0a;
color: #fff;
overflow-x: hidden;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

/* Animated Background */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
opacity: 0.1;
}

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

/* Floating Shapes */
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.05);
animation: animate 25s linear infinite;
bottom: -150px;
border-radius: 50%;
}

.circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
.circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
.circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes animate {
0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }
100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
}

/* Main Container */
.container {
text-align: center;
padding: 2rem;
max-width: 800px;
width: 100%;
position: relative;
z-index: 1;
}

/* Glass Card */
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 4rem 3rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
}

/* Logo Area */
.logo {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
letter-spacing: -2px;
}

.subtitle {
color: #9ca3af;
font-size: 1.1rem;
margin-bottom: 3rem;
font-weight: 300;
}

/* Main Title */
h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(to right, #fff, #a5b4fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
line-height: 1.1;
}

.description {
font-size: 1.25rem;
color: #d1d5db;
margin-bottom: 3rem;
line-height: 1.6;
font-weight: 300;
}

/* Timer */
.countdown {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}

.countdown-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1.5rem;
min-width: 100px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
transition: transform 0.3s ease, background 0.3s ease;
}

.countdown-item:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.08);
}

.countdown-value {
font-size: 3rem;
font-weight: 700;
display: block;
color: #fff;
line-height: 1;
margin-bottom: 0.5rem;
font-variant-numeric: tabular-nums;
}

.countdown-label {
font-size: 0.875rem;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
}

/* Progress Bar */
.progress-container {
margin: 3rem 0;
text-align: left;
}

.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: #9ca3af;
}

.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 75%;
border-radius: 4px;
position: relative;
animation: shimmer 2s infinite;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

@keyframes shimmer {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}

/* Newsletter Form */
.newsletter {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: #fff;
font-weight: 600;
}

.form-group {
display: flex;
gap: 0.5rem;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
}

input[type="email"] {
flex: 1;
padding: 1rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: #fff;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
min-width: 250px;
}

input[type="email"]:focus {
border-color: #667eea;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

input[type="email"]:laceholder {
color: #6b7280;
}

button {
padding: 1rem 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.4);
}

button:active {
transform: translateY(0);
}

button::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.5s;
}

button:hover::after {
left: 100%;
}

/* Social Links */
.social {
margin-top: 3rem;
display: flex;
justify-content: center;
gap: 1.5rem;
}

.social a {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.social a:hover {
background: rgba(102, 126, 234, 0.2);
color: #fff;
transform: translateY(-3px);
border-color: #667eea;
}

/* Status Indicator */
.status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 2rem;
border: 1px solid rgba(34, 197, 94, 0.2);
}

.status::before {
content: '';
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

/* Responsive */
@media (max-width: 640px) {
h1 { font-size: 2.5rem; }
.countdown { gap: 1rem; }
.countdown-item { min-width: 70px; padding: 1rem; }
.countdown-value { font-size: 2rem; }
.glass-card { padding: 2rem 1.5rem; }
.form-group { flex-direction: column; }
input[type="email"], button { width: 100%; }
}

/* Success Message */
.success-message {
display: none;
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
border: 1px solid rgba(34, 197, 94, 0.2);
animation: slideIn 0.3s ease;
}

@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>

<div class="bg-animation"></div>
<ul class="circles">
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>

<div class="container">
<div class="glass-card">

<div class="status">
<span>Canlı Geliştirme</span>
</div>


<div class="logo">BRAND</div>
<div class="subtitle">Yenilikçi Çözümler</div>


<h1>Çok Yakında</h1>
<p class="description">
Muhteşem bir deneyim için son rötuşları yapıyoruz.
Yeni web sitemiz çok yakında sizlerle olacak.
</p>


<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-value" id="days">00</span>
<span class="countdown-label">Gün</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="hours">00</span>
<span class="countdown-label">Saat</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="minutes">00</span>
<span class="countdown-label">Dakika</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="seconds">00</span>
<span class="countdown-label">Saniye</span>
</div>
</div>


<div class="progress-container">
<div class="progress-label">
<span>Geliştirme Durumu</span>
<span>%75</span>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>


<div class="newsletter">
<h3>Açılışta Haberdar Olun</h3>
<form id="notifyForm" class="form-group">
<input
type="email"
id="email"
placeholder="E-posta adresinizi girin..."
required
autocomplete="email"
>
<button type="submit">Bildirim Al</button>
</form>
<div id="successMessage" class="success-message">
✓ Teşekkürler! Açılışta size haber vereceğiz.
</div>
</div>


<div class="social">
<a href="#" aria-label="Twitter">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
</svg>
</a>
<a href="#" aria-label="LinkedIn">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
<rect x="2" y="9" width="4" height="12"/>
<circle cx="4" cy="4" r="2"/>
</svg>
</a>
<a href="#" aria-label="Instagram">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
<a href="#" aria-label="GitHub">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
</a>
</div>
</div>
</div>

<script>
// Countdown Timer
function updateCountdown() {
// 30 gün sonrası için tarih ayarlama
const launchDate = new Date();
launchDate.setDate(launchDate.getDate() + 30);

const now = new Date().getTime();
const distance = launchDate - now;

const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("days").textContent = String(days).padStart(2, '0');
document.getElementById("hours").textContent = String(hours).padStart(2, '0');
document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();

// Form Handling
document.getElementById('notifyForm').addEventList ener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const btn = this.querySelector('button');
const originalText = btn.textContent;

btn.textContent = 'Gönderiliyor...';
btn.disabled = true;

setTimeout(() => {
document.getElementById('successMessage').style.di splay = 'block';
document.getElementById('email').value = '';
btn.textContent = originalText;
btn.disabled = false;

setTimeout(() => {
document.getElementById('successMessage').style.di splay = 'none';
}, 5000);
}, 1500);
});

// Parallax Effect for Mouse Movement
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;

const card = document.querySelector('.glass-card');
if (card) {
card.style.transform = `perspective(1000px) rotateY(${(x - 0.5) * 5}deg) rotateX(${(y - 0.5) * -5}deg) translateY(-5px)`;
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yapım Aşamasında | Çok Yakında Hizmetinizde</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0a0a0a;
color: #fff;
overflow-x: hidden;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

/* Animated Background */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
opacity: 0.1;
}

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

/* Floating Shapes */
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.05);
animation: animate 25s linear infinite;
bottom: -150px;
border-radius: 50%;
}

.circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
.circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
.circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
.circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
.circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
.circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes animate {
0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; }
100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
}

/* Main Container */
.container {
text-align: center;
padding: 2rem;
max-width: 800px;
width: 100%;
position: relative;
z-index: 1;
}

/* Glass Card */
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 4rem 3rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
}

/* Logo Area */
.logo {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
letter-spacing: -2px;
}

.subtitle {
color: #9ca3af;
font-size: 1.1rem;
margin-bottom: 3rem;
font-weight: 300;
}

/* Main Title */
h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(to right, #fff, #a5b4fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
line-height: 1.1;
}

.description {
font-size: 1.25rem;
color: #d1d5db;
margin-bottom: 3rem;
line-height: 1.6;
font-weight: 300;
}

/* Timer */
.countdown {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}

.countdown-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1.5rem;
min-width: 100px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
transition: transform 0.3s ease, background 0.3s ease;
}

.countdown-item:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.08);
}

.countdown-value {
font-size: 3rem;
font-weight: 700;
display: block;
color: #fff;
line-height: 1;
margin-bottom: 0.5rem;
font-variant-numeric: tabular-nums;
}

.countdown-label {
font-size: 0.875rem;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
}

/* Progress Bar */
.progress-container {
margin: 3rem 0;
text-align: left;
}

.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: #9ca3af;
}

.progress-bar {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 75%;
border-radius: 4px;
position: relative;
animation: shimmer 2s infinite;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

@keyframes shimmer {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}

/* Newsletter Form */
.newsletter {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: #fff;
font-weight: 600;
}

.form-group {
display: flex;
gap: 0.5rem;
max-width: 500px;
margin: 0 auto;
flex-wrap: wrap;
}

input[type="email"] {
flex: 1;
padding: 1rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: #fff;
border-radius: 8px;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
min-width: 250px;
}

input[type="email"]:focus {
border-color: #667eea;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

input[type="email"]:laceholder {
color: #6b7280;
}

button {
padding: 1rem 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.4);
}

button:active {
transform: translateY(0);
}

button::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.5s;
}

button:hover::after {
left: 100%;
}

/* Social Links */
.social {
margin-top: 3rem;
display: flex;
justify-content: center;
gap: 1.5rem;
}

.social a {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.social a:hover {
background: rgba(102, 126, 234, 0.2);
color: #fff;
transform: translateY(-3px);
border-color: #667eea;
}

/* Status Indicator */
.status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 2rem;
border: 1px solid rgba(34, 197, 94, 0.2);
}

.status::before {
content: '';
width: 8px;
height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

/* Responsive */
@media (max-width: 640px) {
h1 { font-size: 2.5rem; }
.countdown { gap: 1rem; }
.countdown-item { min-width: 70px; padding: 1rem; }
.countdown-value { font-size: 2rem; }
.glass-card { padding: 2rem 1.5rem; }
.form-group { flex-direction: column; }
input[type="email"], button { width: 100%; }
}

/* Success Message */
.success-message {
display: none;
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
border: 1px solid rgba(34, 197, 94, 0.2);
animation: slideIn 0.3s ease;
}

@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>

<div class="bg-animation"></div>
<ul class="circles">
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>

<div class="container">
<div class="glass-card">

<div class="status">
<span>Canlı Geliştirme</span>
</div>


<div class="logo">BRAND</div>
<div class="subtitle">Yenilikçi Çözümler</div>


<h1>Çok Yakında</h1>
<p class="description">
Muhteşem bir deneyim için son rötuşları yapıyoruz.
Yeni web sitemiz çok yakında sizlerle olacak.
</p>


<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-value" id="days">00</span>
<span class="countdown-label">Gün</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="hours">00</span>
<span class="countdown-label">Saat</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="minutes">00</span>
<span class="countdown-label">Dakika</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="seconds">00</span>
<span class="countdown-label">Saniye</span>
</div>
</div>


<div class="progress-container">
<div class="progress-label">
<span>Geliştirme Durumu</span>
<span>%75</span>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>


<div class="newsletter">
<h3>Açılışta Haberdar Olun</h3>
<form id="notifyForm" class="form-group">
<input
type="email"
id="email"
placeholder="E-posta adresinizi girin..."
required
autocomplete="email"
>
<button type="submit">Bildirim Al</button>
</form>
<div id="successMessage" class="success-message">
✓ Teşekkürler! Açılışta size haber vereceğiz.
</div>
</div>


<div class="social">
<a href="#" aria-label="Twitter">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
</svg>
</a>
<a href="#" aria-label="LinkedIn">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
<rect x="2" y="9" width="4" height="12"/>
<circle cx="4" cy="4" r="2"/>
</svg>
</a>
<a href="#" aria-label="Instagram">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
<a href="#" aria-label="GitHub">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
</a>
</div>
</div>
</div>

<script>
// Countdown Timer
function updateCountdown() {
// 30 gün sonrası için tarih ayarlama
const launchDate = new Date();
launchDate.setDate(launchDate.getDate() + 30);

const now = new Date().getTime();
const distance = launchDate - now;

const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("days").textContent = String(days).padStart(2, '0');
document.getElementById("hours").textContent = String(hours).padStart(2, '0');
document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();

// Form Handling
document.getElementById('notifyForm').addEventList ener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const btn = this.querySelector('button');
const originalText = btn.textContent;

btn.textContent = 'Gönderiliyor...';
btn.disabled = true;

setTimeout(() => {
document.getElementById('successMessage').style.di splay = 'block';
document.getElementById('email').value = '';
btn.textContent = originalText;
btn.disabled = false;

setTimeout(() => {
document.getElementById('successMessage').style.di splay = 'none';
}, 5000);
}, 1500);
});

// Parallax Effect for Mouse Movement
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;

const card = document.querySelector('.glass-card');
if (card) {
card.style.transform = `perspective(1000px) rotateY(${(x - 0.5) * 5}deg) rotateX(${(y - 0.5) * -5}deg) translateY(-5px)`;
}
});
</script>
</body>
</html>