* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: white;
    font-family: Arial;
}

header {
    background-color: rgb(233, 233, 233);
    display: flex;
    justify-content: space-around;
    margin: 12px auto;
    padding: 8px;
    border-radius: 34px;
    align-items: center;
    border: solid 3px black;
    width: 98%;
}
.header-baslik-link {
    color: black;
    text-decoration: none;
}
.header-baslik {
    font-size: 22px;
}
.header-liste {
    display: flex;
}
.header-liste a {
    text-decoration: none;
    margin: 14px;
    color: black;
}
.header-liste li {
    list-style: none;
    font-size: 18px;
    transition: all ease-in-out .2s;
}

.header-liste li.different{
  border:none;
  position: relative;
}
.header-liste li.different:hover{
  border: none;
}
.header-liste li:hover {
  border-bottom: 2px solid black;
}
.different::after{
  content: '';
  position: absolute;
  width: 0px;
  height: 2px;
  left: 50%;
  bottom:0;
  background-color: black;
  transition: all ease-in-out .2s;
}
.different:hover::after{
  width: 100%;
  left: 0;
}
.benKimimBtn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    background-color: rgb(0, 0, 0);
    padding: 8px;
    border-radius: 8px;
    transition: 0.3s;
}
.benKimimBtn:hover {
    color:rgb(206, 206, 206);
    border-radius: 14px;
}
@media only screen and (max-width: 670px) {
    header {
        flex-direction: column;
        align-items: center;
    }
    .header-baslik {
    }
    
}