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

body{
  background: radial-gradient(circle at center, #03060f, #000);
  overflow:hidden;
  color:white;
}

/* canvas */
#bg{
  position:absolute;
  width:100%;
  height:100%;
  z-index:0;
}

/* container */
.container{
  position:relative;
  z-index:2;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* logo alanı */
.logo-area{
  display:flex;
  align-items:center;
  gap:30px;
}

/* logo wrapper */
.logo-wrapper{
  position:relative;
}

/* logo */
.logo{
  width:130px;
  z-index:2;
  position:relative;
  filter:
    drop-shadow(0 0 10px rgba(0,255,255,0.7))
    drop-shadow(0 0 30px rgba(0,255,255,0.3));
  animation: float 4s ease-in-out infinite;
}

/* orbit */
.orbit{
  position:absolute;
  top:50%;
  left:50%;
  width:180px;
  height:180px;
  border:1px solid rgba(0,255,255,0.2);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation: rotate 8s linear infinite;
}

.orbit::before{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  width:8px;
  height:8px;
  background:cyan;
  border-radius:50%;
  box-shadow:0 0 10px cyan;
}

/* title */
.title{
  font-size:3.5rem;
  letter-spacing:5px;
  color:#7df9ff;
  position:relative;
  cursor:pointer;
  text-shadow:
    0 0 10px rgba(0, 255, 255, 0.339),
    0 0 25px rgba(0,255,255,0.5),
    0 0 50px rgba(0,255,255,0.3);
}

/* hover enerji */
.title:hover{
  animation: energyWave 0.6s ease;
}

@keyframes energyWave{
  0%{transform:scale(1);}
  50%{transform:scale(1.08);}
  100%{transform:scale(1);}
}

/* soft glitch */
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  opacity:0.05;
}

.glitch::before{
  animation: glitchSoft 4s infinite;
}

.glitch::after{
  animation: glitchSoft 4s infinite reverse;
}

@keyframes glitchSoft{
  0%,90%,100%{transform:translate(0);}
  92%{transform:translate(2px,-1px);}
  94%{transform:translate(-2px,1px);}
}

/* subtitle */
.subtitle{
  margin-top:40px;
  font-size:1.4rem;
  color:#9aa4ad;
  letter-spacing:4px;
  text-shadow:0 0 8px rgba(255,255,255,0.2);
  animation: fadePulse 3s infinite;
}

@keyframes fadePulse{
  0%,100%{opacity:0.6;}
  50%{opacity:1;}
}

/* animasyonlar */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

@keyframes rotate{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}