*{margin:0;padding:0;box-sizing:border-box;font-family:'Space Grotesk',sans-serif}
body{
  height:100vh;
  background:url("bg.jpg") center/cover no-repeat;
  overflow:hidden;
  color:#fff;
}

#intro{
  position:fixed; inset:0;
  backdrop-filter:blur(14px);
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  cursor:pointer;
}
#intro h1{
  font-size:34px;
  letter-spacing:4px;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%,100%{opacity:.4}
  50%{opacity:1}
}

.overlay{position:absolute; inset:0; background:rgba(0,0,0,.55);}

.container{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card{
  --g:60px;
  width:320px;
  padding:30px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  text-align:center;
  transition:.15s;
  box-shadow:
    0 0 var(--g) rgba(34,0,255,.45),
    0 0 calc(var(--g)*1.4) rgba(19,219,255,.18);
}

.profile-wrap{
  position:relative;
  width:120px;height:120px;
  margin:0 auto 15px;
}
.profile-img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  filter:drop-shadow(0 0 40px rgba(255,0,0,.7));
}

.batuhan{
  filter:drop-shadow(0 0 40px rgba(0,81,255,.8));
}

.profile-wrap::after{
  content:"";
  position:absolute;
  inset:-60px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,0,0,.25),
    rgba(180,0,255,.18),
    transparent 75%);
}

.social{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none;
  margin:10px 0;
  transition:.3s;
}

.social:hover{transform:scale(1.04)}
.social.instagram:hover{background:linear-gradient(45deg,#feda75,#d62976,#962fbf,#4f5bd5)}
.social.tiktok:hover{background:linear-gradient(45deg,#69C9D0,#EE1D52)}
.social.discord:hover{background:linear-gradient(45deg,#7289DA,#99AAB5)}
.social.steam:hover{background:linear-gradient(45deg,#0B2A47,#1B5A88)}
.social.linkedin:hover{background:#0A66C2}
.social.spotify:hover{background:#1DB954}

.visitor-counter { 
  margin-top: 15px; 
  padding: 8px 14px; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; font-size: 14px; 
  color: #fff; 
  background: rgba(255, 255, 255, 0.15); 
  border-radius: 12px; 
  backdrop-filter: blur(6px); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
} 
.visitor-counter i { 
  color: #00e5ff; 
}

.footer{
  position: fixed;
  bottom: 25px;
  left: 0;
  width: 100%;
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 3;
}

.footer-item{
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  
  font-size: 13px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;

  box-shadow: 0 0 12px rgba(0,229,255,.35);
  transition: .25s ease;
}

.footer-item:hover{
  background: rgba(255,255,255,.25);
}


#haloVolume{
  position:fixed;
  top:20px;
  right:20px;
  z-index:2;
}

#haloIcon{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  box-shadow:0 0 18px rgba(255,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#haloPanel{
  margin-top:12px;
  width:60px;
  height:160px;
  background:rgba(0,0,0,.5);
  border-radius:30px;
  display:none;
  padding:12px;
  justify-content:space-between;
  align-items:flex-end;
}

#haloVolume:hover #haloPanel{
  display:flex;
}

.bar{
  width:6px;
  border-radius:10px;
  background:linear-gradient(to top,#ff0000,#ff8080);
  height:10%;
  transition:.15s;
}

#stopBtn{
  position:fixed;
  top:20px;
  left:20px;
  padding:10px 18px;
  border-radius:20px;
  background:rgba(255,0,0,.25);
  cursor:pointer;
  transition:.6s;
  z-index:2;
}


canvas{position:absolute; inset:0; z-index:1}