*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Segoe UI',sans-serif;color:#fff;overflow:hidden;background:#000}

.background,.overlay,#starfield,.content{position:fixed;inset:0}

.background{
  z-index:0;
  background:url('../background.webp') center/cover no-repeat fixed;
}

.overlay{z-index:1;background:rgba(0,0,0,.15)}

#starfield{
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none
}

.content{z-index:3}

.logo{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:0;
  animation:fadeInZoom 3s ease-out forwards;
  width:975px;
  max-width:98vw;
  transition:transform .4s ease,filter .4s ease;
  filter:drop-shadow(0 0 8px #000)
}
.logo:hover{transform:translate(-50%,-50%) scale(1.07);filter:drop-shadow(0 0 24px #FFD700)}
@keyframes fadeInZoom{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.buttons{
  position:absolute;
  top:calc(50% + 300px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center
}
.buttons a{
  opacity:0;
  transform:translateY(30px);
  animation:fadeInUp 1s ease-out forwards;
  background:#111;
  color:#FFD700;
  border:2px solid #FFD700;
  border-radius:8px;
  font-size:16px;
  padding:15px 25px;
  text-decoration:none;
  min-width:200px;
  text-align:center;
  box-shadow:0 0 10px rgba(255,215,0,.3);
  transition:background .3s,color .3s,box-shadow .3s,transform .2s
}
.buttons a:nth-child(1){animation-delay:.3s}
.buttons a:nth-child(2){animation-delay:.6s}
.buttons a:nth-child(3){animation-delay:.9s}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.buttons a:hover{background:#FFD700;color:#000;box-shadow:0 0 15px rgba(255,215,0,.8);transform:translateY(-2px)}

.frat-logo{position:absolute;bottom:28px;right:28px}
.frat-logo a{display:flex;align-items:center;gap:14px;text-decoration:none}
.frat-logo img{width:85px;height:85px;transition:transform .3s,filter .3s;filter:drop-shadow(0 0 8px #000)}
.frat-logo span{font-weight:700;font-size:30px;color:#fff;text-shadow:1px 1px 3px #000;transition:text-shadow .3s}
.frat-logo a:hover img{transform:scale(1.1);filter:drop-shadow(0 0 15px #fff)}
.frat-logo a:hover span{text-shadow:0 0 10px #fff}

#volumeControl{
  position:absolute;
  left:30px;
  bottom:30px;
  display:flex;
  gap:10px;
  align-items:center;
  filter:drop-shadow(0 0 8px #000)
}
#volumeControl img{width:40px;height:40px;cursor:pointer;filter:drop-shadow(0 0 5px #000)}

/* Sol panel: Useful Links */
.side-panel{
  position:absolute;
  left:24px;
  top:50%;
  display:flex;
  flex-direction:column;
  gap:10px;

  /* Animasyon eklendi */
  opacity:0;
  transform:translateY(-50%) translateY(30px);
  animation:fadeInUp 1s ease-out forwards;
  animation-delay:1.2s; /* Gecikme */
}

.side-title{
  font-weight:700;
  letter-spacing:.04em;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,215,0,.3);
  padding:10px 14px;
  border-radius:10px;
  color:#FFD700;
  text-align:center;
  box-shadow:0 0 10px rgba(0,0,0,.35);
  font-size:20px
}
.side-links{display:flex;flex-direction:column;gap:10px}
.side-links a{
  text-decoration:none;
  background:#0b0b0bcc;
  color:#FFD700;
  border:2px solid #FFD700;
  padding:10px 14px;
  border-radius:10px;
  min-width:220px;
  box-shadow:0 0 10px rgba(255,215,0,.25);
  transition:background .25s,color .25s,transform .15s,box-shadow .25s;
  font-size:14px
}
.side-links a:hover{
  background:#FFD700;
  color:#000;
  transform:translateY(-1px);
  box-shadow:0 0 16px rgba(255,215,0,.8)
}

@media (max-width:800px){
  .side-panel{left:50%;top:auto;bottom:14px;transform:translateX(-50%);width:calc(100vw - 28px);align-items:center}
  .side-links{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .side-links a{min-width:auto}
  .buttons{top:calc(50% + 220px)}
}
@media (max-width:600px){
  .buttons a{font-size:14px;padding:12px 20px}
  .frat-logo img{width:55px;height:55px}
  .frat-logo span{font-size:18px}
}