@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Ubuntu:wght@300;400;500;700&display=swap');

a,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif !important;
}

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif !important;
}

html {
    float: left;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

body {
    float: left;
    width: 100%;
    margin: 0;
    color: #222;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #222;
}

p {
    margin: 5px 0;
}

header {
    float: left;
    width: 100%;
    padding: 10px 0;
    background-color: #cdd7f5
}

.container {
    max-width: 1300px;
    margin: 0 calc(50% - 650px);
}

.logo {
    float: left;
    width: 100px;
}

.logo img {
    width: 100%;
}

.search {
    float: left;
    width: 200px;
    margin-left: 30px;
    position: relative;
}

.search input {
    float: left;
    width: 100%;
    padding: 0 5px;
    line-height: 22px;
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.search a {
    float: left;
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url("/uploads/search.png");
    background-size: cover;
    background-position: center;
    right: 3px;
    top: 7px
}

.dsearch {
    float: left;
    margin: 6px 10px;
    font-weight: 600;
}

.menu {
    float: right;
    width: calc(100% - 500px);
    text-align: right;
    margin: 7px 0;
}

.menu a {
    margin: 0 10px;
    font-size: 16px;
    font-weight: 500;
}

.toparea {
    float: left;
    width: 100%;
    margin: 30px 0;
}

.leftmenu {
    float: left;
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 7px 5px #cdd7f530;
}

.leftmenu a {
    float: left;
    width: 100%;
    color: #8691b1;
    font-weight: 500;
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
}

.slide {
    float: left;
    width: 95%;
    margin: 0 0 0 5%;
}

.mySlides {
    display: none
}

.slide-text {
    position: absolute;
    top: 35%;
    color: white;
    max-width: 500px;
    left: 5%;
    cursor: pointer;
}

.slide-text h2 {
    font-size: 32px;
}

.slide-text p {
    font-size: 16px;
}

.mySlides img {
    vertical-align: middle;
    filter: brightness(90%);
    width:100%;
    height:425px;
    object-fit: cover;
}

.slideshow-container {
    max-width: 1250px;
    position: relative;
    margin: auto;
    width: 100%;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    bottom: 7%;
    width: auto;
    padding: 5px 20px;
    margin-top: -22px;
    background-color: #2f374d;
    color: #d8d8d8;
    font-weight: 300;
    font-size: 36px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
    left: 30px
}

.next {
    left: 100px;
}

.prev:hover,
.next:hover {
    color: #8691b1;
}

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}


.urunler {
    float: left;
    width: 100%;
    height: auto;
    margin: 2% 0 5%;
}

.urun {
    float: left;
    width: 23%;
    margin: 1%;
    box-shadow: 0 0 10px 10px #f2f2f2;
    padding: 10px;
}

.urun-resim {
    float: left;
    width: 100%;
}

.urun-resim img {
    float: left;
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.urun-baslik {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}
.urun-ucret{float:left;width:100%;text-align: center;display: flex;justify-content: center;margin:10px 0;}
.exprice{float:left;color:#ccc;text-decoration: line-through;margin-left:5px;}
.newprice{float:left;font-weight:600;}
.link-btn{float:left;width:100px;margin:10px calc(50% - 50px);background-color: #cdd7f5;padding:7px 15px;text-align: center;border-radius: 5px;color:#2f374d;font-weight: 600;}

footer{
    float:left;
    background-color:#cdd7f5;
    width:100%;
    padding:5% 0 0;
}
.f-left{float:left;width:20%;height:auto;margin-right:10%;}
.f-left img{float:left;width:70%;height:auto;}
.f-left p{float:left;width:90%;margin:5% 0;}
.f-menu{float:left;width:20%;margin:0 0 0 3%;}
.f-menu h3{float:left;width:100%;font-size:20px;font-weight: 600;}
.f-menu a{float:left;width:100%;margin:2% 0;}
.copyright{float:left;width:100%;height:auto;text-align: center;margin:5% 0 0;font-weight: 500;}
.copyright a{font-weight: 700;}
.breadcrump{float:left;width:100%;padding:0 0 10px 0;color:#2f374d;font-weight: 600;letter-spacing: 2px;}
.products{padding-left:2%;margin:10px 0 0;}
.productleft{margin:20px 0;}

.udet-area{float:left;width:100%;margin:5% 0;}
.u-images{float:left;width:20%;height:400px;overflow-y:scroll;overflow-x:hidden;}
.u-images::-webkit-scrollbar {display: none;}
.u-images img{float:left;width:100%;height:auto;}
.m-images{float:left;width:75%;margin-left:5%;box-shadow: 0 0 10px 10px #ebebeb;}
.m-images img{float:left;width:100%;height:400px;object-fit: cover;}
.product-desc{float:left;width:95%;margin:0 0 0 5%;}
.product-desc p{float:left;width:100%;}
.u-price{float:left;width:100%;margin:0 0 3%;}
.nprice{float:left;font-size:24px;color:#2f374d;font-weight: 600;}
.eprice{float:left;font-size:20px;color:#8691b1;text-decoration: line-through;font-weight: 500;margin-left:10px;}
.stok{float:left;width:100%;font-size:16px;color:#2f374d;font-weight: 600;}
.padd{float:left;width:100%;margin:5% 0 2%;}
.padd p{float:left;width:100%;font-size:20px;font-weight: 600;color:#2f374d;margin:0 0 10px;display:none;}
.p-quan{float:left;width:70px;border:1px solid #8691b1;border-radius:5px;line-height: 30px;text-align:center;font-size:18px;}
.padd a{float:left;cursor:pointer;border:1px solid #2f374d;background-color:#2f374d;color:white;padding:5px 15px;margin-left:10px;border-radius:10px;}

.about-area{float:left;width:100%;margin:5% 0;box-shadow: 0 0 15px 5px #ebebeb;padding:20px 20px 30px 20px;}
.about-area h1, h2, h3, h4, h5, h6, a, span, p{color:#2f374d;}
.about-area h1{font-size:24px;}
.about-area h2, h3{font-size:20px;}

.iarea{float:left;width:95%;margin:2% 2.5%;}
.iarea h3{float:left;width:100%;font-size:20px;color:#2f374d;font-weight: 600;}
.iarea a{float:left;width:100%;font-size:15px;color:#2f374d;font-weight: 500;}
.iform{float:left;width:100%;border:1px solid #2f374d;border-radius:10px;padding:10px 20px;margin:50px 0 0;}
.iformarea{float:left;width:97%;margin:0 3% 2% 0;}
.iformarea p{float:left;width:100%;font-weight: 600;margin:5px 0;}
.iformarea input{float:left;width:100%;border:1px solid #2f374d;border-radius:5px;line-height: 30px;padding:5px 10px;}
.iformarea textarea{float:left;width:100%;border:1px solid #2f374d;border-radius:5px;line-height: 20px;padding:10px;}
.iform button{float:left;padding:10px 25px;background-color:#2f374d;border: 1px solid #2f374d;color:white;border-radius:5px;margin:10px 0;}
.imap{float:left;width:95%;margin:50px 0 0 5%;border:1px solid #2f374d;padding:10px;border-radius:5px;}

.sepet{float:left;min-height: 500px;}
.checkoutbtn{float:right;background-color:#2f374d;color:white;padding:10px 10px;border-radius:5px;margin-top:20px;}

.paymentform{float:left;width:100%;background-color:white;}
.pinput{float:left;width:95%;margin:2% 0%;}
.pinput2{width:97.5%;margin:2% 0; }
.pinput label{float:left;width:100%;margin:0 0 3%;}
.pinput input{float:left;width:100%;line-height: 32px;border:1px solid #35353540;border-radius:5px;padding:0 5%;font-size:18px;color:#353535;}
.pinput2 input{padding:0 2%;}

.basarili{float:left;width:100%;text-align: center;padding:10% 0;}
.basarili p{float:left;width:100%;margin:10px 0;color:#2f374d;font-weight: 500;}
.bbuttons{float:left;width:100%;text-align: center;margin:50px 0 10px;}
.bbuttons a{padding:10px 15px;background-color:#2f374d;color:white;font-weight: 600;margin:15px 10px;}

.accleft{float:left;width:20%;margin:2% 0;}
.accleft h3{float:left;width:200px;border-bottom: 2px solid #D71920;padding:0 0 10px 5px;font-size:16px;font-weight: 700;}
.accleft a{float:left;width:100%;padding-left:35px;position:relative;line-height: 40px;}
.accleft img{max-height: 20px;max-width:20px;position: absolute;left:0;top:10px;}

.accright{float:left;width:75%;margin:2% 0 2% 5%;position: relative;}
.accright h3{float:left;width:100%;border-bottom: 2px solid #f8f8f8;padding:0 0 10px 5px;font-size:16px;font-weight: 700;}

.accorders{float:left;width:100%;margin:2% 0;}
.accorder{float:left;width:92%;background-color:white;border:1px solid #35353540;border-radius:10px;padding:10px 4%;margin:0 0 15px 0;box-shadow: 0 0 5px 1px #35353540;}
.aoname{float:left;width:35%;font-size:16px;font-weight: 600;display: flex;align-items: center;line-height: 35px;}
.aodurum{float:left;width:30%;margin:10px 0 10px 5%;font-size:16px;font-weight: 600;}
.aodurum img{float:left;width:20px;margin-right:10px;}
.aoodeme{float:left;width:10%;margin:0 0 0 1%;font-size:12px;font-weight: 600;}
.aoodeme h4{float:right;width:100%;margin:0;font-size:16px;font-weight: 700;text-align: right;}
.aoodeme p{float:right;width:100%;margin:0;font-size:16px;font-weight: 600;text-align: right;}
.accbtn{float:right;width:25px;margin:7px 0;}
.accbtn img{float:left;width:100%;}

.accpanel{float:left;width:100%;display:none;margin:20px 0 10px;}
.accpanel img{float:left;width:50px;margin-right: 20px;}
.accpanel a{float:left;line-height: 50px;margin-left:50px;width:16%;text-align: right;}

.accbtn2{float:left;width:90%;background-color:#35353540;color:white;border:none;border-radius:10px;line-height: 40px;margin:5%;font-size:16px;cursor:pointer;}
.accbtn2:hover{background-color:#353535bf;}

.hata{float:left;width:100%;text-align: center;}
.hesiurun{float:left;width:100%;height:auto;}

.abonelik{float:left;width:400px;margin:5% calc(50% - 200px);}
.tab {overflow: hidden;background-color: #d3d3d3;}
.tab button {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;transition: 0.3s;font-size: 17px;width:50%;}
.tab button:hover {background-color: #353535;color:white;}
.tab button.active {background-color: #353535;color:white;}
.tabcontent {display: none;padding: 6px 0;border-top: none;float:left;width:100%;margin-left:12px;}
.aboneform input{float:left;width:100%;height:40px;background-color:white;margin:1% 0 1% -3%;box-shadow: none;border:1px solid #ccc;padding:0 3%;border-radius:5px;box-sizing: border-box;}
.aboneform button{float:left;width:100%;background-color:#2f374d;color:white;padding:15px;border:none;margin:2% 0 2% -2.5%;border-radius:5px;}
.abone-sozlesme{float:left;width:105%;margin:1% 0;}
.abone-sozlesme input{float:left;width:20px;background-color:white;border:1px solid #d8d8d8;}
.abone-sozlesme p{float:left;width:95%;margin:3.5% 0 0 2%;font-size:12px;}
.abone-sozlesme a{font-weight: 700;}
.forgot{float:right;color:red;font-size:12px;font-weight: 600;}
.web-menu{float:left;width:100%;display:block;}
.web{display:block;}
.mobile{display:none;}
.mobil-menu{display:none;}
@media only screen and (max-width:1367px){
    .container{width:1100px;margin:0 calc(50% - 550px);}
}
@media only screen and (max-width:1150px){
    .container{width:900px;margin:0 calc(50% - 450px);}
    .logo{width:85px;}
    .search{width:150px;}
    .dsearch{font-size:14px;}
    .menu a{font-size:14px;}
    .urun-resim img{height:180px;}
    .urun-ucret{margin:5px 0;}
    .link-btn{width:80px;margin:5px calc(50% - 40px);padding:5px 10px;}
    .f-left p{font-size:14px;}
    .f-menu h3{font-size:17px;}
    .f-menu a{font-size:14px;}
    .menu{display:none;}
    .mobil-menu{display:block;}
    .mmenu{display:block;position: fixed;right:-400px;top:0;height:100vh;background-color:#8691b1;width:380px;z-index:999;text-align: center;transition:1s;}
    .m-btn{float:right;cursor:pointer;width:30px;height:30px;display: flex;align-items: center;}
    .m-btn img{float:left;width:100%;}
    .mmenu-top{float:left;width:100%;background-color:white;}
    .mmenu img{float:left;width:100px;margin:5%;}
    .mmenu span{float:right;width:40px;margin-top:15px;cursor:pointer;}
    .mmenu span>img{float:left;width:30px;}
    .mmenu li{float:left;width:100%;text-align: center;text-decoration: none;list-style: none;background-color:white;border-top:1px solid #d5d5d5;line-height: 40px;font-weight: 600;}
    .leftmenu a{font-size:14px;padding:8px 5px;}
    .mySlides img{height:365px;}
}
@media only screen and (max-width:930px){
    .container{width:800px;margin:0 calc(50% - 400px)}
    .web{display:none;}
    .mobile{display:block;}
    .sweb{width:100%!important;}
    .slide{width:100%;margin:0;}
}
@media only screen and (max-width:830px){
    .container{width:700px;margin:0 calc(50% - 350px)}
    .urun{width:29.3%;margin:2%}
    .urun-resim img{height:200px;}
}
@media only screen and (max-width:730px){
    .container{width:600px;margin:0 calc(50% - 300px)}
    .urun{width:46%;margin:2%}
    .urun-resim img{height:280px;}
    .accleft{width:100%;}
    .accright{width:100%;}
}
@media only screen and (max-width:630px){
    .container{width:520px;margin:0 calc(50% - 260px)}
    .urun{width:48%;margin:2% 2% 2% 0;}
    .urun-resim img{height:280px;}
    .mySlides img{height:250px;}
    .prev, .next{padding:5px 15px;font-size:28px;left:20px;}
    .next{left:70px;}
    .u-images{height:450px;width:15%;}
    .m-images{width:80%;}
    .m-images img{height:450px;}
    .sepet{font-size:14px;}
}
@media only screen and (max-width:550px){
    .container{width:420px;margin:0 calc(50% - 210px)}
    .urun{width:100%;margin:2% 0;}
    .urun-resim img{height:380px;}
    .f-left{width:100%;display: flex;align-items: center;justify-content: center;}
    .f-left p{display:none;}
    .f-menu{width:100%;text-align: center;margin:10% 0 0;}
}
@media only screen and (max-width:440px){
    .container{width:360px;margin:0 calc(50% - 180px)}
    .dsearch{display:none;}
}
@media only screen and (max-width:380px){
    .container{width:320px;margin:0 calc(50% - 160px)}
}