/* ==================== GLOBAL ==================== */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}
body{background:#0f0f1a;color:white;overflow-x:hidden;}


/* ==================== DİL BUTONLARI ==================== */
.lang-switch{
position:absolute;top:20px;right:20px;z-index:10;
}
.lang-switch button{
background:transparent;border:1px solid #00c6ff;color:#00c6ff;
margin-left:5px;padding:5px 10px;cursor:pointer;border-radius:20px;transition:0.3s;
}
.lang-switch button:hover{background:#00c6ff;color:#000;}

/* ==================== HERO ==================== */
.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
padding:20px;
overflow:hidden;
/* Az siyahlaştırılmış arka plan */
background:linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85)), url('car.jpg') center/cover no-repeat;
}

/* Hareketli blur ışıklar */
.hero::before{
content:"";
position:absolute;
width:800px;
height:800px;
background:radial-gradient(circle, rgba(0,198,255,0.35), transparent 70%);
top:-300px;
left:-300px;
animation:moveLight 12s infinite alternate ease-in-out;
z-index:0;
filter:blur(40px);
}
.hero::after{
content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle, rgba(0,114,255,0.3), transparent 70%);
bottom:-200px;
right:-200px;
animation:moveLight2 14s infinite alternate ease-in-out;
z-index:0;
filter:blur(60px);
}
.hero *{position:relative;z-index:1;}

/* Partiküller layer */
.hero .particles{
position:absolute;
width:100%;
height:100%;
top:0; left:0;
pointer-events:none;
z-index:0;
}
.particle{
position:absolute;
background: rgba(0,198,255,0.6);
border-radius:50%;
animation:floatParticle linear infinite;
filter:blur(1px);
}

/* Animasyonlar */
@keyframes moveLight{
0%{transform:translate(0,0);}
100%{transform:translate(200px,200px);}
}
@keyframes moveLight2{
0%{transform:translate(0,0);}
100%{transform:translate(-200px,-150px);}
}
@keyframes floatParticle{
0%{transform: translateY(0) translateX(0);}
100%{transform: translateY(-100vh) translateX(50px);}
}

/* Hero başlık & alt yazı */
h1{
font-size:48px;
font-weight:900;
background:linear-gradient(90deg,#00c6ff,#0072ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-align:center;
margin-bottom:10px;
}
.subtitle{margin:15px 0;font-size:18px;}
.features{font-size:14px;margin-bottom:20px;}
.trust{margin-bottom:30px;font-size:14px;opacity:0.8;}

/* ==================== SAYAÇ ==================== */
.countdown{display:flex;gap:20px;margin-bottom:40px;flex-wrap:wrap;justify-content:center;}
.time-box{
background:linear-gradient(145deg,#111b2e,#0d1423);
border:1px solid rgba(0,198,255,0.3);
padding:22px;
border-radius:18px;
width:110px;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
transition:0.4s;
text-align:center;
}
.time-box h2{font-size:28px;}
.time-box span{font-size:12px;opacity:0.7;}
.time-box:hover{
box-shadow:0 0 35px rgba(0,198,255,0.5),0 0 60px rgba(0,198,255,0.2);
transform:translateY(-5px);
}

/* ==================== BUTON ==================== */
.btn{
padding:16px 40px;
border-radius:50px;
background:linear-gradient(90deg,#00c6ff,#0072ff);
color:white;
text-decoration:none;
font-weight:700;
letter-spacing:1px;
transition:0.3s, box-shadow 0.3s;
box-shadow:0 10px 30px rgba(0,114,255,0.4);
}
.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(0,198,255,0.6),0 0 60px rgba(0,198,255,0.3);
}

/* ==================== YORUMLAR ==================== */
.reviews{
padding:80px 20px;
background:#0a0a14;
text-align:center;
}
.review-container{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}
.review-box{
background: rgba(17,18,30,0.7);
backdrop-filter: blur(8px);
border:1px solid rgba(0,198,255,0.2);
box-shadow:0 10px 25px rgba(0,198,255,0.2);
padding:30px;
border-radius:18px;
opacity:0;
transform:translateY(40px);
transition:0.6s ease, box-shadow 0.3s, transform 0.3s;
}
.review-box:hover{
transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,198,255,0.5);
}

/* ==================== FOOTER ==================== */
footer{
background:#05050a;
padding:60px 20px 30px;
border-top:1px solid rgba(0,198,255,0.2);
text-align:center;
}

 

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
h1{font-size:32px;}
.subtitle{font-size:16px;}
.features{font-size:13px;}
.trust{font-size:13px;}
.time-box{width:80px;padding:15px;}
.countdown{gap:15px;}
.review-container{grid-template-columns:1fr;}
.btn{padding:14px 30px;}
}