/* Genel Ayarlar */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: #000; color: #fff; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Header */
header { display: flex; justify-content: space-between; padding: 20px 50px; background-color: #111; position: fixed; width: 100%; z-index: 10; }
header .logo { font-size: 26px; font-weight: bold; color: gold; letter-spacing: 1px; }
header nav ul { display: flex; gap: 30px; }
header nav ul li a { font-weight: 500; padding: 5px 10px; transition: 0.3s; }
header nav ul li a:hover, header nav ul li a.active { color: #ffc107; }

/* Hero */
.hero { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #111 0%, #222 100%); }
.hero h1 { font-size: 60px; margin-bottom: 20px; }
.hero h1 span { color: gold; text-shadow: 0 0 10px gold; }
.hero p { font-size: 24px; margin-bottom: 30px; }
.hero .btn { padding: 15px 40px; background-color: gold; color: #000; font-weight: bold; border-radius: 5px; transition: 0.3s; }
.hero .btn:hover { background-color: #ffc107; transform: scale(1.05); }

/* About */
.about { padding: 100px 50px; text-align: center; background-color: #252B36; }
.about h2 { font-size: 40px; margin-bottom: 20px; color: gold; }
.about p { max-width: 800px; margin: auto; font-size: 18px; color: #ccc; }

/* Features */
.features { padding: 100px 50px; background-color: #252B36; text-align: center; }
.features h2 { font-size: 40px; margin-bottom: 50px; color: gold; }
.features-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.feature-card { background-color: #222; padding: 20px; border-radius: 10px; width: 250px; transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 0 20px gold; }
.feature-card h3 { margin-bottom: 10px; color: gold; }
.feature-card p { color: #ccc; }

/* Team Section */
.team-section { padding: 100px 50px; background-color: #252B36; text-align: center; }
.team-section h2 { font-size: 40px; margin-bottom: 50px; color: gold; }
.team-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; }
.team-member { background-color: #222; padding: 20px; border-radius: 10px; width: 220px; transition: transform 0.3s, box-shadow 0.3s; }
.team-member:hover { transform: translateY(-10px); box-shadow: 0 0 20px gold; }
.team-member img { width: 100%; border-radius: 50%; margin-bottom: 15px; }
.team-member h3 { margin-bottom: 5px; color: gold; }
.team-member p { color: #fff; }

/* Leaderboard */
.leaderboard-section { padding: 100px 50px; text-align: center; background-color: #252B36; }
.leaderboard-section h2 { font-size: 40px; margin-bottom: 30px; color: gold; }
#leaderboard { margin: auto; width: 80%; border-collapse: collapse; background-color: #222; border-radius: 10px; overflow: hidden; }
#leaderboard th, #leaderboard td { padding: 15px; border-bottom: 1px solid #333; }
#leaderboard th { background-color: #252B36; color: gold; }
#leaderboard td { color: #ccc; }
#leaderboard td[contenteditable="true"] { background-color: #111; }

.btn { cursor: pointer; }

.slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.5s ease-out; /* 0.8s -> 1.5s ile yavaşlatıldı */
}


.slide-up.show {
  opacity: 1;
  transform: translateY(0);
}