* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
background:
radial-gradient(circle at top, #1b2340, #090d1a 60%);
color: white;
font-family:
"Poppins",
"Segoe UI",
sans-serif;
text-align: center;
overflow-x: hidden;
}
/* Yıldız katmanı */
#stars {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
/* Açılış ekranı */
.intro {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
animation:
introFade 4s forwards;
}
.intro h1 {
font-size: 42px;
font-weight: 300;
letter-spacing: 2px;
line-height: 1.5;
}
/* Genel bölümler */
section {
max-width: 700px;
margin:auto;
padding:
70px 25px;
}
h1 {
font-size: 40px;
}
h2 {
color:#d4af37;
font-size:30px;
margin-bottom:30px;
}
p {
font-size:18px;
line-height:1.8;
color:#dddddd;
}
/* Cam kart efekti */
.hero,
.gallery,
.message,
.music,
.end {
background:
rgba(255,255,255,0.06);
backdrop-filter:
blur(12px);
border-radius:25px;
margin:
25px auto;
box-shadow:
0 0 40px rgba(0,0,0,.3);
}
/* Fotoğraflar */
.photos {
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}
.photos img {
width:30%;
min-width:100px;
border-radius:20px;
transition:.4s;
cursor:pointer;
}
.photos img:hover {
transform:
scale(1.05);
box-shadow:
0 0 25px #d4af37;
}
/* Buton */
button {
background:
linear-gradient(
135deg,
#d4af37,
#f5d76e
);
border:none;
padding:
15px 35px;
border-radius:50px;
font-size:17px;
cursor:pointer;
color:#111;
transition:.3s;
}
button:hover {
transform:
scale(1.08);
}
/* Son bölüm */
.end {
padding-bottom:100px;
}
/* Açılış animasyonu */
@keyframes introFade {
0% {
opacity:1;
}
75% {
opacity:1;
}
100% {
opacity:0;
pointer-events:none;
}
}
/* Mobil */
@media(max-width:600px){
h1 {
font-size:32px;
}
h2 {
font-size:25px;
}
.photos img {
width:90%;
}
p {
font-size:16px;
}
}