html {overflow-x: hidden;}

.main-slider-area {float:left; width:100%; position:relative;}
.main-slider {float:left; width:100%; aspect-ratio: 24 / 7; overflow:hidden;}
.main-slider .item a picture {text-align: center;justify-content: center;display: flex; aspect-ratio: 24 / 7;}
.main-slider .item a picture img {max-height: 100%; height:auto; width:100%;}
.main-slider .item a {display:block; width:100%; float:left;}
.main-slider-area .ms-prev {position:absolute; top:calc(50% - 25px); left:0; cursor:pointer;}
.main-slider-area .ms-prev img {width:50px;}
.main-slider-area .ms-next {position:absolute; top:calc(50% - 25px); right:0; cursor:pointer;}
.main-slider-area .ms-next img {width:50px;}

.mainpage-search-area {float:left; width:100%; position:relative; z-index:1; margin-top:-40px;}
.mainpage-search-area .mainpage-search {float:left;width:100%;background:var(--white);padding:20px;border-radius:10px;box-shadow: var(--shadow);}
.mainpage-search-area h5 {float:left;width:100%;font-weight:500;font-size:16px;margin-bottom: 15px;}
.mainpage-search-area form {float:left; width:100%; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 110px; column-gap:10px; position:relative;}
.mainpage-search-area form details {float:left; width:100%; transition:var(--cubic);}
.mainpage-search-area form details summary {border:1px solid var(--border);height:48px;display:flex;align-items:center;font-size:12px;padding:0 15px;border-radius:3px;background: url(../images/down-arrow.svg) center right 7px no-repeat;}
.mainpage-search-area form details[open] summary:before {content:""; position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--overlay);}
.mainpage-search-area form details .dd-search-menu {position:absolute;top:100%;background:#fff;width:100%;padding: 30px;border-radius:0 0 10px 10px;transition: ease all .4s;transition-delay: .5s;margin-top:30px;opacity:0;}
.mainpage-search-area form details[open] .dd-search-menu {transition:var(--cubic); margin-top:0px; opacity:1; transition-delay:.3s;}
.mainpage-search-area form details .dd-search-categories {display:flex; float:left; width:100%; column-gap:5px;}
.mainpage-search-area form details .dd-search-categories a {width: 130px;height:100px;background:var(--bg);border:1px solid var(--border);border-radius:3px;font-size:10px;text-align:center;padding: 17px 10px;line-height:1.3em;font-weight:500;transition:var(--ease);}
.mainpage-search-area form details .dd-search-categories a:hover {background:var(--white); transition:var(--ease); border:var(--darkborder) 1px solid;}
.mainpage-search-area form details .dd-search-categories a figure {width:40px; height:40px; display:grid; align-items:center; justify-content:center; margin:0 auto 10px auto;}
.mainpage-search-area form > button {background:var(--orange);color:#fff;border:1px solid var(--orange);border-radius:3px;cursor: pointer;outline: none;}

.mainpage-category-area {float:left;width:100%;margin-top: 50px;}
.category-slider-wrapper {float:left; width:100%; position:relative; visibility:hidden; opacity:0;}
.category-slider .slick-slide {margin:0 10px;}
.category-slider .slick-list {margin:0 -10px;}
.category-slider .slick-slide a {display:block;text-align:center;font-size:10px;transition: var(--ease); font-weight:500;}
.category-slider .slick-slide a:hover {color:var(--orange);}
.category-slider .slick-slide a:hover picture {opacity:.8; transition:var(--ease);}
.category-slider .slick-slide picture {width:100%; display:grid; float:left; aspect-ratio:1 / 1; align-items:center; justify-content:center;}
.category-slider .slick-slide picture img {height:auto; max-height: 100%;}
.category-slider {float:left; width:100%; position:relative;}
.category-slider-wrapper .mc-prev {position:absolute;left: -50px;top:calc(50% - 20px);cursor:pointer;}
.category-slider-wrapper .mc-next {position:absolute;right: -50px;top:calc(50% - 20px);cursor:pointer;}
.mp-banners-area {float:left; width:100%; margin-top:80px;}
.mp-banners-area .container {display:grid; grid-template-columns:1fr 1fr; column-gap:30px;}
.mp-banners-area .container a {display:block; float:left; width:100%; aspect-ratio: 69 / 31;}
.mp-banners-area .container a img {float:left; height:auto; max-height:100%;}

.benefit-icons-area {float:left;width:100%;margin-top: 60px;}
.benefit-icons {float:left; width:100%;}
.benefit-icons .item {float:left; width:100%; text-align:center; position:relative;}
.benefit-icons .item:before {height:70%; width:1px; background:var(--darkborder); content:""; position:absolute; right:-15px; top:10%;}
.benefit-icons .item:last-child:before {display:none;}
.benefit-icons .item figure {width:60px; height:60px; display:grid; align-items:center;justify-content:center; margin:0 auto 15px auto;}
.benefit-icons .item .benefit-title {float:left; width:100%; font-size:14px; font-weight:600; margin-bottom:5px}
.benefit-icons .item p {font-size:13px; float:left; width:100%;}

.mp-bc-area {float:left;width:100%;margin-top: 70px;}
.banner-carousel-wrapper {float:left; width:100%; position:relative;}
.banner-carousel {float:left; width:100%;}
.banner-carousel .item {margin: 0 10px;}
.banner-carousel .slick-list {margin: 0 -10px;}
.banner-carousel .item a {float:left; width:100%; display:block; border-radius:5px; overflow:hidden; margin-bottom:15px; aspect-ratio: 61 / 74;}
.banner-carousel .item a img {height:auto; max-height: 100%;}
.banner-carousel .item h2 {float:left; width:100%; font-size:15px; font-weight:600; text-align:center; margin-bottom:5px;}
.banner-carousel .item p {float:left; width:100%; text-align:center; font-size:13px;}
.mp-bc-area .bc-prev {position:absolute;left: -50px;top: 175px;cursor:pointer;}
.mp-bc-area .bc-next {position:absolute;right: -50px;top: 175px;cursor:pointer;}

.mp-brands-area {float:left; width:100%; margin-top:80px;}
.mp-brands-area h2 {float:left; width:100%; font-size:24px; font-weight:600; margin-bottom:20px;}
.mp-brands-carousel-wrapper {float:left; width:100%; position:relative;}
.mp-brands-carousel {float:left; width:100%;}
.mp-brands-carousel .item {margin:0 5px;}
.mp-brands-carousel .item a {border:1px solid var(--border); border-radius:3px; display:flex; float:left; transition:var(--ease); align-items:center; justify-content: center; width:100%; aspect-ratio: 27 / 22;}
.mp-brands-carousel .item a:hover {border:1px solid var(--navy); transition:var(--ease); overflow:hidden;}
.mp-brands-carousel .slick-list {margin: 0 -4px;}
.mp-brands-carousel-wrapper .br-prev {position:absolute;left: -50px;top: calc(50% - 25px);cursor:pointer;}
.mp-brands-carousel-wrapper .br-next {position:absolute;right: -50px;top: calc(50% - 25px);cursor:pointer;}

.mp-benefit-area-2 {float:left; width:100%; margin-top:80px;}
.mp-benefit-area-2 .container {display:grid; grid-template-columns:1fr 1fr; column-gap:180px; padding:0 80px;}
.mp-benefit-area-2 .container .item {text-align:center;}
.mp-benefit-area-2 .container .item h4 {font-size:18px;font-weight: 500;float:left;width:100%;margin-bottom:5px;}
.mp-benefit-area-2 .container .item p {font-size:14px; line-height:1.8em;}

.mp-product-carousel-area {float:left; width:100%; margin-top:70px;}
.mp-product-carousel-area h2 {float: left;width: 100%; font-size: 24px; font-weight: 600; margin-bottom: 20px;}
.mp-product-carousel-wrapper {float:left; width:100%; position:relative;}
.mp-product-carousel-wrapper .pc-prev {position:absolute;left: -50px;top:calc(50% - 20px);cursor:pointer;}
.mp-product-carousel-wrapper .pc-next {position:absolute;right: -50px;top:calc(50% - 20px);cursor:pointer;}

.mp-product-carousel {float:left; width:100%;}
.mp-product-carousel .slick-list {margin:0 -15px;}
.mp-product-carousel .product-card {background:var(--white); transition:var(--ease);height: 414px;}
.mp-product-carousel .product-card:hover {background:var(--bg); transition:var(--ease);}
.mp-product-carousel .item {margin: 0 15px;}

.mainpage-search-close {position:absolute;top:25px;right:20px;width: 24px; display:none;}
.mainpage-search-close img {width:24px;}

.mainpage-search-trigger-wrapper {float:left; width:100%; margin-top:20px; display:none;}
.mainpage-search-trigger {float:left;width:100%;border-radius:5px;overflow:hidden;position:relative;aspect-ratio: 6 / 1;display: grid;align-items: center;}
.mainpage-search-trigger > img {width:100%;}
.mainpage-search-trigger span {position:absolute;left: 16px;color:#fff;font-size: 13px;width:80%;font-weight: 400;line-height: 18px;}
.mainpage-search-trigger figure {position:absolute; width:24px; top:calc(50% - 12px); right:15px;}
.mainpage-search-trigger figure img {width:24px;}

.mp-blog-carousel-area {float: left; width: 100%; margin-top: 90px;}
.mp-blog-carousel-wrapper {float:left; width:100%; position:relative;}
.mp-blog-carousel .slick-list {margin:0 -10px;}
.mp-blog-carousel {float:left; width:100%; }
.mp-blog-carousel .item {margin:0 10px;}
.mp-blog-carousel .item picture {display:block; aspect-ratio:3 / 2; overflow:hidden; float:left; width:100%; border-radius:5px;}
.mp-blog-carousel .item h3 {font-weight: 600; font-size: 18px; line-height: 23px; color: var(--navy); width: 100%; float: left; margin: 20px 0 10px 0; height: 46px;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box;}
.mp-blog-carousel .item .j-content {font-weight: 400; font-size: 14px; line-height: 28px; color: var(--navy); float: left; width: 100%; margin-bottom: 20px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box;}
.mp-blog-carousel .item a span {width: 160px; height: 44px; border: 1px solid var(--navy); border-radius: 53px; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--navy); transition: var(--ease);}
.mp-blog-carousel .item:hover a span {background:var(--navy); color:var(--white); transition:var(--ease);}
.mp-blog-carousel-area h2 {float: left; width: 100%; font-size: 24px; font-weight: 600; margin-bottom: 20px;}
.mp-blog-carousel-area h2 a {color:inherit;}
.mp-blog-carousel-area h2 span {color:var(--orange);}
.blg-next {position: absolute; right: -50px; top: calc(50% - 25px); cursor: pointer;}
.blg-prev {position: absolute; left: -50px; top: calc(50% - 25px); cursor: pointer;}

.mp-blog-carousel .item picture img {height: auto; max-height:100%;}

.jeb-home-seo-area {    float: left;width: 100%;text-align: left;line-height: 2em;margin-top: 80px;}
.jeb-home-seo-area .container {overflow: hidden;max-height: 95px;background: var(--bg);padding: 20px;}
.jeb-home-seo-area.active .container {max-height: none;}

.jeb-home-seo-area p {    float: left;width: 100%;font-size: 16px;font-weight: 400;}
.jeb-home-seo-area h2 {float: left;width: 100%;font-weight: 600;font-size: 18px;}
#cat-desc-toggle {width:40px; height:40px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; border-radius:50%; position:relative; left:calc(50% - 20px); transition:var(--ease); cursor:pointer;}
#cat-desc-toggle:hover {border:1px solid var(--navy); transition:var(--ease);}
#cat-desc-toggle img {width:30px; margin-bottom:-3px;}
#cat-desc-toggle.active {transform:rotate(180deg); transition:var(--ease);}



/* TABLET YATAY */
@media screen and (min-width : 992px) and (max-width : 1199px) {
	
}

/* TABLET DIK */
@media screen and (min-width : 768px) and (max-width : 991px) {
	.mainpage-search-area {position: fixed;top: 0;left: auto;width: 100%;margin: 0;z-index:5; right:-100vw; transition: var(--cubic);}
    .mainpage-search-area.active {right:0; transition:var(--cubic);}
    .mainpage-search-area .container {width:100%; padding:0;}
    .category-slider .slick-slide {width: 120px;margin: 0 5px 0 5px;}
    .category-slider .slick-slide picture {background:var(--bg);width:100%;float:left;aspect-ratio:1 / 1;padding: 10px;border: 1px solid var(--border);border-radius: 50%; mix-blend-mode:multiply; margin-bottom:15px; height:120px; width:120px;}
    .category-slider .slick-slide picture img {mix-blend-mode:multiply;}
    .mc-prev, .mc-next {display:none;}
    .category-slider .slick-list {margin:0 -15px 0 0;}
    .mp-banners-area .container {grid-template-columns: 1fr 1fr; column-gap:10px;}
    .mp-banners-area {margin-top: 30px;}
    .mainpage-category-area {margin-top: 30px;}
    .main-slider {aspect-ratio: 375 / 320;}

    .mainpage-search-area .mainpage-search {border-radius: 0; height: 100vh;}
    .mainpage-search-area form {grid-template-columns: 1fr; row-gap: 5px;}
    .mainpage-search-area form > button {height: 48px; font-size: 14px; font-weight: 500;}
    .mainpage-search-area form details .dd-search-menu {position: relative; float: left; width: calc(100vw - 40px); padding: 15px 0px; top: 0; border-radius: 0;}
    .mainpage-search-area form details .dd-search-categories {display: grid; grid-template-columns: 1fr 1fr 1fr; float: left; grid-gap: 5px;}
    .mainpage-search-area form details .dd-search-categories a {width: 100%;}
    .mainpage-search-area form details[open] summary:before {display: none;}
    .mainpage-search-area h5 {text-align:left; font-size:14px; width:80%;}
    .mainpage-search-close {display:block;}
    .mainpage-search-trigger-wrapper {display:block;}
    .mp-product-carousel-area {margin-top:30px;}
    .mp-product-carousel-area h2 {font-size: 18px;}
    .mp-product-carousel .product-card {background:var(--bg);}
    .mp-product-carousel .slick-list {margin:0 -15px 0 0px;}
    .mp-product-carousel .item {width:30vw; margin:0 5px 0 5px;}
    .mp-product-carousel-wrapper .pc-prev, .mp-product-carousel-wrapper .pc-next {display:none;}
    .benefit-icons .item:before {display: none;}
    .banner-carousel .slick-list {margin: 0 -15px 0 0;}
    .banner-carousel .item {width: 45vw; margin: 0 5px;}
    .mp-bc-area .bc-prev, .mp-bc-area .bc-next {display: none;}
    .mp-bc-area {margin-top: 40px;}
    .mp-brands-area {margin-top: 40px;}
    .mp-brands-area h2 {font-size: 18px; margin-bottom: 10px;}
    .mp-brands-carousel .slick-list {margin: 0 -15px 0 0;}
    .mp-brands-carousel-wrapper .br-prev, .mp-brands-carousel-wrapper .br-next {display: none;}
    .mp-benefit-area-2 .container {grid-template-columns: 1fr; padding: 0 20px; row-gap: 20px;}
    .mp-benefit-area-2 .container .item h4 {font-size: 14px;}
    .benefit-icons .item {float: left; width: calc(50vw - 30px); text-align: center; position: relative; margin: 0 10px;}
    .mp-brands-carousel .item {width:17vw;}
    .slick-slide img {width: 100% !important;}
    .mp-blog-carousel .item {width: 45vw; margin: 0 5px;}
    .mp-blog-carousel .slick-list {margin:0 -15px 0 0;}
    .blg-prev, .blg-next {display:none;}
}

/* TELEFON */
@media screen and (max-width :767px) {
    .mainpage-search-area {position: fixed;top: 0;left: auto;width: 100%;margin: 0;z-index:5; right:-100vw; transition: var(--cubic);}
    .main-slider .item a picture {aspect-ratio: 48 / 41;}
    .mainpage-search-area.active {right:0; transition:var(--cubic);}
    .mainpage-search-area .container {width:100%; padding:0;}
    .category-slider {display:flex;}
    .category-slider .slick-slide {width: 70px;margin: 0 5px 0 5px;}
    .category-slider .slick-slide picture {background:var(--bg);width:100%;float:left;aspect-ratio:1 / 1;padding: 10px;border: 1px solid var(--border);border-radius: 50%; mix-blend-mode:multiply; margin-bottom:15px; height:70px; width:70px; display:block;}
    .category-slider .slick-slide picture img {mix-blend-mode:multiply;}
    .mc-prev, .mc-next {display:none;}
    .category-slider .slick-list {margin:0 -15px 0 0;}
    .mp-banners-area .container {grid-template-columns: 1fr; row-gap: 10px;}
    .mp-banners-area {margin-top: 30px;}
    .mainpage-category-area {margin-top: 30px;}
    .main-slider {aspect-ratio: 375 / 320;}

    .mainpage-search-area .mainpage-search {border-radius: 0; height: 100vh;}
    .mainpage-search-area form {grid-template-columns: 1fr; row-gap: 5px;}
    .mainpage-search-area form > button {height: 48px; font-size: 14px; font-weight: 500;}
    .mainpage-search-area form details .dd-search-menu {position: relative; float: left; width: calc(100vw - 40px); padding: 15px 0px; top: 0; border-radius: 0;}
    .mainpage-search-area form details .dd-search-categories {display: grid; grid-template-columns: 1fr 1fr 1fr; float: left; grid-gap: 5px;}
    .mainpage-search-area form details .dd-search-categories a {width: 100%;}
    .mainpage-search-area form details[open] summary:before {display: none;}
    .mainpage-search-area h5 {text-align:left; font-size:14px; width:80%;}
    .mainpage-search-close {display:block;}
    .mainpage-search-trigger-wrapper {display:block;}
    .mp-product-carousel-area {margin-top:30px;}
    .mp-product-carousel-area h2 {font-size: 18px;}
    .mp-product-carousel .product-card {background:var(--bg);}
    .mp-product-carousel .slick-list {margin:0 -15px 0 0px;}
    .mp-product-carousel .item {width:40vw; margin:0 5px 0 5px;}
    .mp-product-carousel-wrapper .pc-prev, .mp-product-carousel-wrapper .pc-next {display:none;}
    .benefit-icons .item:before {display: none;}
    .banner-carousel .slick-list {margin: 0 -15px 0 0;}
    .banner-carousel .item {width: 75vw; margin: 0 5px;}
    .mp-bc-area .bc-prev, .mp-bc-area .bc-next {display: none;}
    .mp-bc-area {margin-top: 40px;}
    .mp-brands-area {margin-top: 40px;}
    .mp-brands-area h2 {font-size: 18px; margin-bottom: 10px;}
    .mp-brands-carousel .slick-list {margin: 0 -15px 0 0;}
    .mp-brands-carousel-wrapper .br-prev, .mp-brands-carousel-wrapper .br-next {display: none;}
    .mp-benefit-area-2 .container {grid-template-columns: 1fr; padding: 0 20px; row-gap: 20px;}
    .mp-benefit-area-2 .container .item h4 {font-size: 14px;}
    .benefit-icons .item {float: left; width: calc(50vw - 30px); text-align: center; position: relative; margin: 0 10px;}
    .mp-blog-carousel .item {width: 75vw; margin: 0 5px;}
    .mp-blog-carousel .slick-list {margin:0 -15px 0 0;}
    .blg-prev, .blg-next {display:none;}
    
}