*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}
html{scroll-behavior:smooth}
body{background:#0b0b0b;color:#fff}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.brand{font-weight:800;letter-spacing:1px}
.nav a{color:#ddd;text-decoration:none;margin-left:14px;font-size:14px}
.nav a:hover{color:#fff}

.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center}
.heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.heroOverlay{position:absolute;inset:0;background:rgba(0,0,0,.65);z-index:-1}
.heroContent{text-align:center;padding:0 18px;max-width:900px}
.heroContent h1{font-size:64px}
.heroContent p{margin-top:10px;color:#cfcfcf;font-size:20px}
.buttons{margin-top:28px}

.btn{
  display:inline-block;padding:14px 26px;border-radius:999px;
  background:#7b2cff;color:#fff;text-decoration:none;font-weight:800;
  margin:8px;transition:.25s
}
.btn:hover{transform:translateY(-2px) scale(1.03)}
.btn.secondary{background:transparent;border:2px solid rgba(255,255,255,.8)}

.section{padding:90px 0}
.section.alt{background:#111}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.sectionTitle{font-size:34px;margin-bottom:10px}
.sectionText{color:#cfcfcf;max-width:800px;line-height:1.6;margin-bottom:20px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.card{background:#171717;border:1px solid #262626;border-radius:12px;padding:16px}
.card p{color:#bdbdbd;margin-top:6px;font-size:14px;line-height:1.5}

.rules{margin-top:14px;line-height:1.9;color:#cfcfcf;padding-left:18px}

.staffGrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin-top:18px
}
.staffCard{
  display:flex;gap:12px;align-items:center;
  background:#171717;border:1px solid #262626;border-radius:12px;padding:12px
}
.avatar{width:44px;height:44px;border-radius:50%;background:#333;object-fit:cover}
.staffName{font-weight:800}
.staffStatus{font-size:12px;color:#bdbdbd;margin-top:4px}

.hint{margin-top:12px;color:#9c9c9c;font-size:13px}

.footer{padding:26px 18px;text-align:center;color:#777;border-top:1px solid rgba(255,255,255,.08)}

/* Reveal animasyonu */
.reveal{opacity:0;transform:translateY(18px);transition:all .7s ease}
.reveal.show{opacity:1;transform:translateY(0)}
.delay1{transition-delay:.2s}
.delay2{transition-delay:.4s}

@media (max-width:640px){
  .heroContent h1{font-size:44px}
  .nav{display:none}
}