* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
  }

body {
background: linear-gradient(135deg, #0a0a0f, #001f2f);
color: white;
}

/* Navbar */
header {
display: flex;
justify-content: space-between;
padding: 20px 50px;
}

header h1 {
color: #00ffd5;
text-shadow: 0 0 15px #00ffd5;
}

nav a {
margin-left: 20px;
text-decoration: none;
color: white;
transition: 0.3s;
}

nav a:hover {
color: #00ffd5;
}

/* Hero */
.hero {
text-align: center;
padding: 120px 20px;
}

.hero h2 {
font-size: 36px;
}

.hero p {
opacity: 0.7;
margin: 10px 0 20px;
}

/* Server Box */
.server-box {
display: inline-flex;
gap: 10px;
background: rgba(255,255,255,0.05);
padding: 12px 20px;
border-radius: 12px;
backdrop-filter: blur(10px);
}

.server-box span {
color: #00ffd5;
font-weight: bold;
}

/* Butonlar */
button {
cursor: pointer;
border: none;
border-radius: 10px;
padding: 10px 15px;
background: linear-gradient(45deg, #00ffd5, #00aaff);
font-weight: bold;
transition: 0.3s;
}

button:hover {
transform: scale(1.05);
box-shadow: 0 0 15px #00ffd5;
}

/* Status */
.status {
margin-top: 20px;
}

.dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}

/* Cards */
.features {
padding: 80px 20px;
text-align: center;
}

.cards {
display: flex;
justify-content: center;
gap: 25px;
margin-top: 30px;
}

.card {
background: rgba(255,255,255,0.05);
padding: 25px;
border-radius: 15px;
width: 250px;
backdrop-filter: blur(10px);
transition: 0.3s;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 0 20px #00ffd5;
}

/* Join */
.join {
text-align: center;
padding: 80px;
}

.big-btn {
margin-top: 20px;
font-size: 18px;
}

/* Footer */
footer {
text-align: center;
padding: 30px;
opacity: 0.8;
}

.booster {
color: gold;
text-shadow: 0 0 10px gold;
}

/* Mobil */
@media (max-width: 768px) {
.cards {
flex-direction: column;
align-items: center;
}
}