body {
  height: 680px;
  background-image: url("../fotolar/Yeni_Proje.png");
  background-size:auto;
  box-sizing: border-box;
  justify-content: center;
  flex-direction: column;
  display: flex;
  align-items:center;
  gap: 20px;
  z-index: 1;
}



.astrabig {
  width: 550px;
  height: auto;
  left: -110px;
  top: 210px;
  position: fixed;
  filter: drop-shadow(10px 10px 10px) rgb(rgb(255, 140, 0));
  z-index: 1;
  transition: 0.6s;
  cursor: pointer;
}
.astrabig:hover:first-child {
  margin: 10px;
  padding: 10px;
  filter: drop-shadow(10px 10px 10px) rgb(rgb(255, 153, 0));
}
.astrabig:hover:last-child {
  margin: 0px;
  padding: 0px;
  filter: drop-shadow(0px 0px 25px #ff88006b);
  transform: scale(1.2);
}
.fjlogo {
  margin-top: 200px;
  z-index: 1;
  width: 293px;
  height: 117px;
  filter: drop-shadow(0px 0px 19px #ffbb0042);
  animation: logoyukariasagi 1s ease-out;
}
.astrabig {
  z-index: 0;
  animation: kjindex 0.5s ease-out;
}


.anamenu > img > a > a > a {
align-items: center;

}


.menuarkaplan{
  width: 460px;
  height: 4000px;
  z-index: 0;
  background-color: rgb(0, 0, 0);
  position: fixed;
  filter: drop-shadow(0px 0px 30px #000000b1);
}


.duyuruindex{
  justify-content: center;
  position: fixed;
  top: 0px;
  flex-direction: column;
  display: flex;
  align-items:center;
  width: 100%;
  height: 40px;
  background-color: #fe8300;
  color: #ffffff;
  z-index: 3;
  filter: drop-shadow(10px 10px 9px #00000033);
}

.duyuruindex p{
  align-items: center;
  font-size: 25px;
}

.duyuruindex2{
  justify-content: center;
  position: fixed;
  top: 0px;
  bottom: 10380px;
  flex-direction: column;
  display: flex;
  align-items:center;
  width: 100%;
  height: 70px;
  background-color: #fe8300;
  color: #ffffff;
  z-index: 3;
  filter: drop-shadow(10px 10px 9px #00000075);
}

.duyuruindex2 p{
  align-items: center;
  font-size: 15px;
}

.duyuruindex3{
  justify-content: center;
  position: fixed;
  top: 0px;
  flex-direction: column;
  display: flex;
  align-items:center;
  width: 100%;
  height: 90px;
  background-color: #fe8300;
  color: #ffffff;
  z-index: 3;
  filter: drop-shadow(10px 10px 9px #00000075);
}

.duyuruindex3 p{
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 15px;
  
}

.isik {
  width: 460px;
  height: 460px;
  rotate: 120px;
  animation: isik1 1.7s ease-in-out ;
  position: fixed;
  z-index: 0;
  top: 0;
  right: 10;
  opacity: 40%
}


.menuu {
  animation: sagmenuindex 0.9s ease-in-out;
  position: fixed;
  right: -10px;
  width: 250px;
  height: 125px;
  background-color: #000000ba;
  border-left: 2px solid #fe7f00;
  border-right: 0;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.menuu ul {
  color: #108f3c;
  animation: butonlarglobals 1.3s ease-in-out;
  list-style:outside;
  margin: 20px;
}

.menuu li { 
  box-shadow: 10 0 120px, #0dff00;
  cursor: pointer;
   color: #fe7f00;
  margin: 25px;
  z-index: 0;
  
}

.menuu a{
 font-size: 20px;
  color: white;
  text-decoration: none;
}

@keyframes isik1 {
  
  from {
    
    opacity: 0%;
    transform: translateY(-190px);
  }
}

@keyframes menu {
  
  from {
    scale: 80%;
    opacity: 0%;
    transform: translateY(-80px);
  }
}

@keyframes menu2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media screen and (max-width: 1114px){
  .duyuruindex{
    display: none;
  }
}

@media screen and (min-width: 1114px){
  .duyuruindex2{
    display: none;
  }
}

@media screen and (max-width: 686px){
  .duyuruindex2{
    display: none;
  }
}

@media screen and (min-width: 686px){
  .duyuruindex3{
    display: none;
  }
}

@media screen and (max-width: 600px){
.menu{
  display: none;
}
}
@media screen and (max-width: 600px){
  .mute-button{
    display: none;
  }
  }

@media screen and (max-width: 600px){
  .styledindex{
    display: none;
  }
  }
  @media screen and (min-width: 600px){
    .styledindex2{
      display: none;
    }
    }
    @media screen and (min-width: 600px){
      .styledyt2{
        display: none;
      }
      }
      @media screen and (min-width: 600px){
        .styleddiscord2{
          display: none;
        }
        }
        @media screen and (min-width: 600px){
          .hakkindabtn2{
            display: none;
          }
          }
  @media screen and (max-width: 600px){
    .styledyt{
      display: none;
    }
    }
    @media screen and (min-width: 1049px){
      .styledyt{
        display: none;
      }
    }


    @media screen and (max-width: 600px){
      .styleddiscord{
        display: none;
      }
      }

@media screen and (max-width: 1050px){
  .astrabig{
    display: none;
  }
  }


  @media screen and (max-width: 962px){
    .menuu{
      display: none;
    }
    }



  
    
   


    @media screen and (max-width: 600px){
      .hakkindabtn{
        display: none;
      }
      }

    @media screen and (min-width: 963px){
        .hakkindabtn{
          display: none;
        }
      }

  
  
      @keyframes videoisik{
        0% {filter: drop-shadow(0px 0px 0px #c2810000);}
        50%{filter: drop-shadow(0px 0px 89px #ff9d00a9);}
        100%{filter: drop-shadow(0px 0px 0px #ff950000);}
      }

      @keyframes videoisik2{
        0% {filter: drop-shadow(0px 0px 0px #da6e0800);}
        50%{filter: drop-shadow(0px 0px 80px #ff9d00a9);}
        70%{filter: drop-shadow(0px 0px 209px #ff9d00);}
        80%{filter: drop-shadow(0px 0px 80px #dd82037c);}
        100%{filter: drop-shadow(0px 0px 0px #dd820300);}
      }


      @keyframes voicebutton {
  
        from {
          
          opacity: 0;
          transform: translateY(90px);
        }
        to{
          opacity: 1;
        }
      }

      .mute-button {
        opacity: 0;
        animation: voicebutton 1.2s forwards 1s;
        margin-bottom: -50px;
        margin-right: -400px;
        padding: 0;
        background-color: transparent;
        border: none;
        cursor: pointer;
        z-index: 2;
      }
        .mute-icon-on {
        display: block;
      }
      
      
      .mute-icon-off {
        
        display: none;
      }