*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    word-break: normal;
    user-select: none;
}

body{
    background-color: rgb(228, 228, 228);
}

.header{
    background-color: white;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
}

.header_a{
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-top: 1.5%;
    float: left;
    color: orange;
    text-decoration: none;
    font-size: 100%;
    font-weight: bold;
    transition: color 0.5s ease, font-size 0.5s ease, transform 2s;
}
.header_a2{
    width: 7%;
    padding: 0.5%;
    margin-top: 2%;
    background-color: orange;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    float: right;
    margin-top: 1%;
    margin-right: 3%;
    transition: background-color 0.5s ease, padding 0.5s ease, width 0.5s ease, font-size 0.5s ease;
    word-break: break-all;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.header_a2:hover, .button2:hover{
    cursor: pointer;
    background-color: rgb(255, 102, 0);
}

.header_a:hover{
    font-size: 105%;
    color: rgb(255, 102, 0);
    cursor: pointer;
    border-bottom: 0.1rem solid orange;
    padding-bottom: 0.5rem;
}

.header_logo{
    width: 3.8%;
    margin-top: 0.1%;
    float: left;
    margin-left: 3%;
}

.header_logo:hover{
    cursor: pointer;
}

#anasayfa{
    margin-left: 3%;
}

.kategoriler_section{
    overflow-y: auto;
    max-height: 700px;
    height: 700px;
    margin-bottom: 3%;
    overflow-y: auto;
}

.footer{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    background-color: white;
}


.footer_logo{
    width: 17%;
}

.footer_left{
    float: left;
    margin-left: 3%;
    margin-top: 2%;
}

.footer_right{
    float: right;
    margin-right: 3%;
    margin-bottom: 2%;
    margin-top: 2%;
}

.footer_left_label{
    color: orange;
    font-weight: bold;
}

.footer_right_label:hover{
    color: rgb(255, 102, 0);
}

.footer_right_label{
    color: orange;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.5s ease;
}

.footer_right_baslik{
    color: rgb(255, 102, 0);
    font-weight: bold;
    text-decoration: none;
    font-size: 120%;
}

.footer_right_td{
    text-align: center;
}


.footer_slider{
    margin-top: 3%;
    border: solid 3px black;
    width: 50%;
    margin-left: -15%;
}




.slider {
    position: absolute;
    margin-top: 2.5%;
    width: 50%;
    height: 125px;
    margin-left: 25%;
    overflow: hidden;
    border-radius: 25px;
}

.slides {
    display: flex;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

#button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 123, 0, 0.7);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.giris{
    margin-top: 5%;
    background-color: white;
    border-radius: 25px;
    width: 50%;
}

.textbox1{
    margin-top: 1%;
    border-radius: 25px;
    width: 5%;
    border: solid 3px transparent;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: orange;
    font-size: 125%;
}

.textbox1::placeholder{
    color: white;
    font-weight: bold;
}

.textbox1:hover{
    cursor: pointer;
}

.textbox1:focus{
    outline: none;
}

.label{
    color: orange;
    font-weight: bold;
    font-size: 145%;
}

.minilabel{
    color: orange;
    font-weight: bold;
    font-size: 115%;
    margin-top: 1%;
    margin-bottom: 0.3%;
}

.radiobtn{
    color: orange;
    font-weight: bold;
    font-size: 115%;
}

.button2{
    margin-top: 1%;
    padding: 0.5%;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 120%;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.5s ease;
}

.textbox2{
    border-radius: 25px;
    width: 30%;
    border: solid 3px transparent;
    text-align: center;
    font-weight: bold;
    color: white;
    background-color: orange;
    font-size: 125%;
}

.textbox2::placeholder{
    color: white;
    font-weight: bold;
}

.textbox2:hover{
    cursor: pointer;
}

.textbox2:focus{
    outline: none;
}

.section{
    margin-top: 5%;
    width: 80%;
}

.kategori_img{
    width: 75%;
    border-radius: 25px;
}

.kategori{
    margin-bottom: 5%;
    display: inline-block;
    transition: transform 0.5s ease;
    background-color: transparent;
    border: solid 3px transparent;
    width: 17%;
    border-radius: 50px;
    padding: 1%;
}

.kategori:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.kategori_label{
    color: white;
    background-color: orange;
    padding: 3%;
    width: 75%;
    border-radius: 15px;
    font-weight: bold;
    font-size: 115%;
    display: table;
    margin-top: 0.5%;
    margin-bottom: 0.3%;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.section_baslik{
    color: white;
    background-color: orange;
    border-radius: 15px;;
    padding: 1%;
    font-weight: bold;
    width: 30%;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

body{
    background-Image: url('resim/default.png');
    background-Repeat: no-repeat;
    background-Size: cover;
    background-Position: center;
}


.header_textbox{
    border-radius: 25px;
    width: 0%;
    visibility: hidden;
    padding: 0.3%;
    border: solid 3px transparent;
    text-align: center;
    font-weight: bold;
    background-color: orange;
    color: white;
    font-size: 105%;
    transition: background-color 0.5s ease;
    transition: width 1s ease;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.header_textbox::placeholder{
    color: white;
    font-weight: bold;
}

.header_textbox:hover{
    cursor: pointer;
}

.header_textbox:focus{
    background-color: rgb(255, 102, 0);
    outline: none;
}

.header_submit{
    margin-top: 1%;
    padding: 0.5%;
    width: 5%;
    background-color: orange;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.5s ease, width 0.5s ease;
    word-break: break-all;
    border: transparent;
    font-size: 105%;
    text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.header_submit:hover{
    background-color: rgb(255, 102, 0);
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 5px;
}

@media only screen and (min-width: 1024px) and (max-width: 1440px) {
    .header_a{
        margin-top: 1%;
    }
    .header_a2{
        font-size: 85%;
    }
    .header_submit{
        font-size: 75%;
    }
    .header_textbox{
        padding: 0.2%;
        margin-top: 1%;
    }

}

@media only screen and (max-width: 768px) {
    .header_logo{
        width: 10%;
        margin-top: 1%;
    }
    .header_a{
        font-size: 70%;
    }
    .header_a2{
        font-size: 70%;
        width: 20%;
    }
    
    
    .header_submit{
        font-size: 70%;
        margin-right: -10%;
        width: 15%; 
    }

    .header_textbox{
        font-size: 70%;
        padding: 0%;
        height: 20px;
    }
    
    .section_baslik{
        width: 100%;
        margin-top: 20%;
        font-size: 130%;
    }

    .section{
        width: 90%;
    }

    .kategori{
        width: 40%;
    }

    .kategoriler_section{
        width: 100%;
    }

    .footer_left{
        margin-left: 1%;
        width: 30%;
    }

    .footer_right_baslik{
        font-size: 100%;
    }

    .footer_left_label, .footer_right_label{
        font-size: 70%;
    }

    .footer_logo{
        width: 40%;
    }

    h2{
        font-size: 50%;
    }

    .content p{
        font-size: 90%;
    }

    .header_a:hover{
        font-size: 70%;
        border-bottom: none;
        padding-bottom: 0%;
    }

    .slider{
        margin-top: 12%;
        width: 55%;
        margin-left: 22%;
        height: 60px;
        border-radius: 5px;

    }

    #button{
        padding: 3%;
    }

    .slide img {

        width: 100%;
    }

}