@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Bitter:ital,wght@0,100..900;1,100..900&family=Cinzel+Decorative:wght@400;700;900&family=Great+Vibes&family=Indie+Flower&family=Kaushan+Script&family=Merienda:wght@300..900&family=Permanent+Marker&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Reenie+Beanie&family=Rubik+Vinyl&display=swap');

*{
  margin: 0;
  padding: o;
  box-sizing: border-box;
}


.header{
    width: 100%;
    height: 9vh;
    background: none;
    display: flex;
    justify-content: space-between;
    user-select: none;
            -webkit-user-select: none; 
            -moz-user-select: none;
            -ms-user-select: none; 
            z-index: 1;
  }

  /* Logo kısmı başlangıç */
.logo{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
  }
  .logo img{
  width: 40%;
  }
  
  /* Logo kısmı sonu*/
  
  /* navbar kısmı başlangıç */
  .navbar{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
  }
  
  .navbar ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
   .navbar ul li{
    list-style: none;
    padding: 5px;
    position: relative;
    max-width: max-content;
   }
   
   @media (max-width: 400px){
    .navbar ul li{padding: 0px;}
   }
  
   .navbar ul li:after{
    content: '';
    position: absolute;
    background:rgba(81, 68, 0, 0.719);
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    transition: 1s ease;
    transform: scaleX(0);
   }
  
   .navbar ul li:hover::after{
  transform: scaleX(1);
   }
  
   .navbar ul li a{
    text-decoration: none;
    font-family: "Playfair Display", serif;
    color: rgb(255, 255, 255);
    font-size: 15px;
}
  
.barsbuton{
  width: 10%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.barsbuton i{
  font-size: 28px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  margin-right: 5px;
}


@media (max-width: 600px){

  .navbar ul{
    visibility: hidden;
  }
  .logo{
    width: 30%;
  }
.barsbuton i{
  margin-right: 10px;
}
    
}

    /* navbar kısmı son */

    /** Sidebar başlangıç **/

    .sidebar{
      position: fixed;
      transform: translate(-100%);
      width: 30%;
      height: 100%;
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.366);
      backdrop-filter: blur(5px);
      top: 0;
      left: 0;
      border-right: 2px solid rgba(0, 0, 0, 0.413);
      -webkit-box-shadow: 7px 5px 32px 0px rgba(0, 0, 0, 0.453);
      -moz-box-shadow: 7px 5px 32px 0px rgba(0,0,0,0.453);
      box-shadow: 7px 5px 32px 0px rgba(0, 0, 0, 0.453);
      transition: 1s ease-in;
      display: block;
    }

    .sidebarlogo{
      width: 100%;
      height: 12vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .sidebarlogo img{
      width: 40%;
      margin: 5px;
  filter: drop-shadow(4px 4px 8px rgba(81, 68, 0, 0.719));
    }

    .sidebarbasliklar{
      width: 100%;
      height: 85vh;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

   .cevirikutusu{
    width: 100%;
    height: auto;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.168) 10%, rgba(128, 79, 0, 0) 70%);
    display: flex;
    justify-content: center;
    align-items: center;
   }

   .cevirikutusu button{
    width: 80px;
    height: 40px;
    margin: 0 10px;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    background-color: white;
    transition: 0.3s ease;
   }

   .cevirikutusu button:hover{
    transform: scale(1.1);
    box-shadow: 0px 48px 19px -17px rgba(0,0,0,0.1);
    background-color: wheat;
   }

    .sidebarbasliklar ul{
      width: 100%;
      margin-top: 20px;
    }

    .sidebarbasliklar ul li{
      padding: 5px 0 5px 15px;
      margin: 20px 0px 20px 20px;
      list-style: none;
      border-radius: 20px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.168) 10%, rgba(128, 79, 0, 0) 70%);
      transition: 0.4s ease-in;
    }

    .sidebarbasliklar ul li:hover{

      transform: scale(1.1);
      box-shadow: 0px 48px 19px -17px rgba(0,0,0,0.1);
    }

    .sidebarbasliklar ul li span{
      font-size: 20px;
      opacity: 0.8;
      color: rgba(255, 255, 255, 0.702);
    }
    .sidebarbasliklar ul li a{
      text-decoration: none;
      font-size: 20px;
      font-family: "Raleway", serif;
      color: rgba(255, 255, 255, 0.636);
      margin-left: 10px;
    }
  


    @media (max-width: 1090px){
      .sidebarlogo img{
        width: 60%;
      }
      .sidebar{
        width: 45%;
      }
    }
    @media (max-width:650px ){
      .sidebarlogo img{
        width: 80%;
      }
      .sidebar{
        width: 65%;
      }
      .sidebarbasliklar ul li a{
        font-size: 15px;
      }
    }

    @media (min-width:1800px ){
      .sidebarlogo img{
        width: 30%;
      }
    }
    @media (min-width:2250px ){
      .sidebarlogo img{
        width: 25%;
      }
    }

    .showSidebar{
      transform: translate(0%);
    }

   .openbuton{
    width: 22px;
    height: 25px;
    background-color: rgb(201, 201, 201);
    position: absolute;
    left: 100%;
    top: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0% 50% 50% 0%;
    box-shadow: 3px 0px 7px 1px rgba(0, 0, 0, 0.719);
    cursor: pointer;
  }

  .closebuton{
    width: 22px;
    height: 25px;
    background-color: rgb(201, 201, 201);
    position: absolute;
    left: 100%;
    top: 15%;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 0% 50% 50% 0%;
    box-shadow: 3px 0px 7px 1px rgba(0, 0, 0, 0.719);
    cursor: pointer;
  }


   .openbuton .fa-angle-right{
    font-size: 25px;
    color: #000000;
   }
   .closebuton .fa-angle-left{
    font-size: 25px;
    color: #000000;
   }
   .clickclose{
    display: flex;
   }

   /* sidebar sonu */


/* footer */

   footer{
    width: 100%;
    height: auto;
    background-color: #000000a8;
    
    display: flex;
    flex-direction: column;
    padding: 10px;
    -webkit-box-shadow: 0px -7px 15px -8px rgba(102,102,102,1);
-moz-box-shadow: 0px -7px 15px -8px rgba(102,102,102,1);
box-shadow: 0px -7px 15px -8px rgba(102,102,102,1);
border-radius: 10px 10px 0 0;
margin-top: 15px;
  }

  .footerup{
    display: flex;
    justify-content: space-around;
  }

  .footerup .footerleft{
    width: 45%;
    padding: 5px;
  }

  .footerup .footerleft li{
    list-style: none;
    margin: 5px;
  }
  .footerup .footerleft li a{
    text-decoration: none;
    color: white;
    font-family: "Raleway", serif;

  }


  .footerup .footerright{
    width: 45%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
  }

  .footerup .footerright h1{
    color: white;
    font-family: "Raleway", serif;
    letter-spacing: 5px;
  }

  .footerup .footerright div{
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .footerup .footerright div i{
    font-size: 20px;
    color: white;
  }

  .footerdown{
    display: flex;
    justify-content: center;
  }
  .footerdown p{
    color: white;
    font-size: 12px;
  }

  @media (max-width:596px ){
  .footerup .footerright h1{
    font-size: 20px;
  }
  .footerup .footerleft li a{
    font-size: 13px;
  }
  .cevirikutusu{
    padding-bottom: 70px;
  }
  }

  @media (max-width:436px ){
    .footerup{
      flex-direction: column;
    }
    .footerup .footerleft{
      width: 100%;
      text-align: center;
    }
    .footerup .footerright{
      width: 100%;
      align-items: space-around;
     justify-content: center;
    }
    .footerup .footerright div{
padding: 15px;
    }
  }