


/* Story Slider */
.story-slider {
width: 100%;
height: 100%;
position: relative;
}
.story-slider .swiper-slide {
text-align: center;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.story-slider:hover .swiper-button-next{
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f9f9f9 100%) !important;
}
.story-slider .swiper-button-next {
background-image: none;
}
.story-slider .swiper-button-next:before{
font-family: FontAwesome;
content: "\f105";
font-size: 35px ;
position: absolute;
right: 10px;
margin-top: 40px;
color: #000000;
}
.story-slider:hover .swiper-button-next {
box-sizing:border-box;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
position: absolute;
width: 125px;
height: 290px;
top:0;
z-index: 9;
cursor: pointer;
background-size: 15px 100px;
background-position: center;
background-repeat: no-repeat;
margin-right: -10px;
}
.story-slider .swiper-button-next {
top: 0;
margin-right: -40px;
}


@media screen and (max-width:768px) and (min-width:0) {
.story-slider .swiper-button-next {
opacity: 1;
visibility: visible;
width: 145px;
height: 290px;
right: -12px;
}
.story-slider .swiper-button-next{
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f9f9f9 100%) !important;
}
}





.about-module-main-div-boxed{
    background-image:url("../../images/uploads/") ;
    background-size: cover;
    background-position:top center;
            background-attachment: fixed;
    border:1px solid #;
padding:60px 0;
margin-top: 0px;
margin-bottom: 0px;
}

.about-module-main-div{
    background-image:url("../../images/uploads/") ;
    background-size: cover;
    background-position:top center;
            background-attachment: fixed;
    border-top:1px solid #;
border-bottom:1px solid #;
padding:60px 0;
margin-top: 0px;
margin-bottom: 0px;
}
.about-module-leftside-txt{
font-family : '',sans-serif ;
}
.about-module-rightside-txt{
font-family : '',sans-serif ;
}


.about-module-main-div{
    background-image:url("../../images/uploads/") ;
    background-size: cover;
    background-position:top center;
            background-attachment: fixed;
    border-top:1px solid #;
border-bottom:1px solid #;
padding:60px 0;
margin-top: 0px;
margin-bottom: 0px;
}
.about-module-leftside-txt{
font-family : '',sans-serif ;
}
.about-module-center-txt{
font-family : '',sans-serif ;
}
.about-module-rightside-txt{
font-family : '',sans-serif ;
}



.marka-module-main-div{
    background:#f9f9f9 ;
padding:20px 0;
margin: 0px 0;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}

.swiper-clients {
width: 100%;
height: 100%;
position: relative;
}
.swiper-clients .swiper-slide {
text-align: center;
padding: 5px 10px;
height: 85px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-clients .swiper-slide img{
max-height: 90px;
max-width: 90%;
}



/* Üst Slider için devam */
@media screen and (max-width:374px) and (min-width:0px) {
.swiper-container {
    width: 93% !important;
height: 160px !important;
}
}
@media screen and (max-width:409px) and (min-width:375px) {
.swiper-container {
    width: 93% !important;
height: 200px !important;
}
}
@media screen and (max-width:599px) and (min-width:410px) {
.swiper-container {
    width: 93% !important;
height: 220px !important;
}
}
@media screen and (max-width:767px) and (min-width:600px) {
.swiper-container {
    width: 93% !important;
height: 250px !important;
}
}
@media screen and (max-width:1023px) and (min-width:768px) {
.swiper-container {
    width: 93% !important;
height: 270px !important;
}
.slider_text_inside_box_h{
    font-size: 42px !important ;
    line-height: 42px !important ;
}
}
@media screen and (max-width:1151px) and (min-width:1024px) {
.swiper-container {
    width: 93% !important;
height: 370px !important;
}
.slider_text_inside_box_h{
    font-size: 42px !important ;
    line-height: 42px !important ;
}
}
@media screen and (max-width:1279px) and (min-width:1152px) {
.swiper-container {
    width: 93% !important;
height: 385px !important;
}
.slider_text_inside_box_h{
    font-size: 42px !important ;
    line-height: 42px !important ;
}
}

@media screen and (max-width:1300px) and (min-width:1280px) {
.swiper-container {
    width: 1200px !important;
height: 415px !important;
}
.slider_text_inside_box_h{
    font-size: 42px !important ;
    line-height: 42px !important ;
}
}

@media screen and (max-width:1600px) and (min-width:1441px) {
.swiper-container{  height: 425px; }
}
@media screen and (max-width:1680px) and (min-width:1601px) {
.swiper-container{  height: 425px; }
}
.swiper-container {
height: 425px;
    width: 1300px;
margin: 0 auto;
margin-bottom: 0px;
margin-top: 0px;
}


.swiper-slide {
width: 100% ;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
}


[class^="swiper-button-"] {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
[class^="swiper-button-"] {
width: 44px;
opacity: 0;
visibility: hidden;
}
.swiper-button-prev {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
.swiper-button-next {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1 !important;
visibility: visible;
}
.swiper-pagination-bullet-active {
width: 28px!important;
height: 7px!important;
opacity: 1 !important;
background-color: #ebd445 !important;
}
.swiper-container [class^="swiper-pagination-bullet"]{
width: 13px;
height: 7px;
border-radius:100px !important;
transition: all .3s ease;
opacity:.7;
background: #fff
}
/*  <========SON=========>>> Üst Slider için devam SON */









/* Sayaç */
.counter-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
    background:#ffffff ;
padding:50px 0;
margin: 0px 0;
font-family : 'Roboto Condensed',sans-serif ;
}



/* Blog */
.bloglar-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
font-family : 'Open Sans',sans-serif ;
    background:#ffffff ;
padding:35px 0;
margin: 0px 0;
}


/* Comments */
.yorumlar-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
font-family : 'Open Sans',sans-serif ;
    background:#ffffff ;
padding:55px 0;
margin: 0px 0;
}
.swiper-comments .swiper-slide {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
cursor: grab;
}
.swiper-comments .swiper-pagination-bullet-active {
width: 22px!important;
height: 8px!important;
border-radius: 100px !important;
background-color: #e68484 !important;
}
.swiper-comments [class^="swiper-pagination-bullet"]{
width: 13px;
height: 8px;
border-radius: 100px !important;
transition: all .3s ease;
opacity:.2;
}


/* Hizmetler */
.hizmetler-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;

font-family : 'Open Sans',sans-serif ;
    background:#ffffff ;
padding:30px 0;
margin: 0px 0;
}




/* Tanıtım Videosu */
.intro-video-module-main-div{
    background:#eb3e68 ;
padding:125px 0;
margin: 0px 0;
}
.video-play-button:before {
background: #ba1f24;
}
.video-play-button:after {
background: #fa183d;
}
.video-play-button:hover:after {
background-color: #da0528;
}
.video-play-button span {
border-left: 32px solid #ffffff;
}

/* foto galeri */
.pgallery-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
    background:#ffffff ;
padding:0px 0;
margin: 0px 0;
}
    .pgallery-module-inside-area{
    width: 93%;
    }

/* E-bülten */
.bultenn-module-main-div{
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
font-family : 'Roboto Condensed',sans-serif ;
    background:#f9f9f9 ;
padding:50px 0;
margin: 0px 0;
}



/* orta slider */
@media screen and (max-width:374px) and (min-width:0px) {
.swiper-middle-container {
width: 93% !important; margin: 0 auto;
height: 170px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:170px !important;
}
}
@media screen and (max-width:409px) and (min-width:375px) {
.swiper-middle-container {
width: 93% !important; margin: 0 auto;
height: 190px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:190px !important;
}
}
@media screen and (max-width:599px) and (min-width:410px) {
.swiper-middle-container {
width:  93% !important; margin: 0 auto;
height: 205px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:205px !important;
}
}
@media screen and  (max-width:599px ) and (min-width:540px ){
.swiper-middle-container {
width:  93% !important; margin: 0 auto;
height: 245px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:245px !important;
}
}
@media screen and (max-width:767px) and (min-width:600px) {
.swiper-middle-container {
width:  93% !important; margin: 0 auto;
height: 270px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:270px !important;
}
}
@media screen and (max-width:1023px) and (min-width:768px) {
.swiper-middle-container .swiper-slide .middle-slider-img-mobile,
.swiper-middle-container .swiper-slide{
width:100% !important;
}
.swiper-middle-container {
width:  93% !important;
height: 325px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:325px !important;
}
}
@media screen and (max-width:1151px) and (min-width:1024px) {
.swiper-middle-container .swiper-slide .middle-slider-img-mobile,
.swiper-middle-container .swiper-slide{
width:100% !important;
}
.swiper-middle-container {
width:  93% !important;
height: 295px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:295px !important;
}
}

@media screen and (max-width:1279px) and (min-width:1152px) {
.swiper-middle-container {
width:  93% !important;
height: 330px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:330px !important;
}
}
@media screen and (max-width:1359px) and (min-width:1280px) {
.swiper-middle-container{  height: 380px; }
.swiper-middle-container {
width:  1200px !important;
height: 350px !important;
}
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:350px !important;
}
}
@media screen and (max-width:1600px) and (min-width:1441px) {
.swiper-middle-container{  height: 380px; }
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:380px !important;
}
}
@media screen and (max-width:1680px) and (min-width:1601px) {
.swiper-middle-container{  height: 380px; }
.swiper-middle-container .swiper-slide img{
width:100% !important;
height:380px !important;
}
}

.swiper-middle-container {
/* 1280px temanin kendi degeri; 1300'e cikarilirsa 1360-1379px viewport
   bandinda ~12px yatay kaydirma olusuyor (Swiper'in ic wrapper genisligi).
   Ust slider ile arada 20px fark kaliyor, bu bilincli bir tercih. */
width:1280px;
height: 380px;
margin: 0 auto;
margin-bottom: 25px;
margin-top: 25px;
}

.swiper-middle-container .swiper-slide img{
border-radius: 10px
}

.swiper-middle-container:hover .swiper-button-prev,
.swiper-middle-container:hover .swiper-button-next {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
}


/* Story İçerikleri */
.story-main-div{
width: 100%;
font-family : 'Open Sans',Arial ;
font-size: 13px ;
background-color: #f9f9f9;
margin: 0px 0;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
padding: 20px 0;
}

.story-group-box{
color:#000000}
.story-group-box:hover{
color:#000000;
text-decoration:none;
}

.item-link .info strong{
color:#000000}
.stories.snapgram .story > .item-link{
color:#000000 !important;
}

.stories.carousel::-webkit-scrollbar-track {
background-color: #f8f8f8;
}
.stories.carousel::-webkit-scrollbar {
height: 3px;
}
.stories.carousel::-webkit-scrollbar-thumb {
background-color: #f8f8f8;
}


/* Kategorili Ürün Vitrini */
.cat-detail-products-box-caturunvitrin {
border: 1px solid #ebebeb;
background-color: #ffffff;
border-radius: 5px;
}
    .cat-detail-products-box-caturunvitrin{
    width: 18.5%;
    }
    .cat-detail-products-box-caturunvitrin-img{
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    }
    .cat-detail-products-box-caturunvitrin-img img{
    width: 100%;
    transition-duration: 0.1s; transition-timing-function: linear;
    }
    .cat-detail-products-box-caturunvitrin-h{
    font-size: 13px ;
    min-height: 55px;
    margin-bottom: 5px;
    }
.group-urun-module-main-div{
font-family : 'Open Sans',sans-serif ;
background-color: #ffffff;
}
.group-product-main-box{
border-top: 1px solid #ebebeb;
}
.group-product-main-box:first-child{
border-top: 0;
}
.group-product-main-box-img{
border-radius: 4px;
}
.group-product-main-box-img:hover img{
    filter: blur(0);
}


.swiper-product-list {
width: 100%;
height: 100%;
position: relative;
}
@media screen and (max-width:1279px) and (min-width:1152px) {
.swiper-product-list .swiper-slide{
margin-left: -.1px !important;
}
}

.swiper-product-list:hover .swiper-button-prev,
.swiper-product-list:hover .swiper-button-next {
background-color: #333;
box-sizing:border-box;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
position: absolute;
top: 50%;
width: 30px;
height: 44px;
margin-top: -22px;
z-index: 9;
cursor: pointer;
background-size: 15px 100px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-product-list:hover .swiper-button-prev{
margin-left: -10px;
}
.swiper-product-list:hover .swiper-button-next{
margin-right: -10px;
}


/* Fırsatlar Vitrini */
.firsatlar-urun-module-main-div{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
    background:#fff ;
padding:20px 0;
margin: 0px 0;
font-family : 'Open Sans',sans-serif ;
}

.firsat-product-box {
border: 1px solid #ebebeb;
background-color: #ffffff;
border-radius: 5px;
}
.swiper-countdown-list {
width: 100%;
height: 100%;
position: relative;
}
@media screen and (max-width:1279px) and (min-width:1152px) {
.swiper-countdown-list .swiper-slide{
margin-left: -.1px !important;
}
}
.swiper-countdown-list:hover .swiper-button-prev,
.swiper-countdown-list:hover .swiper-button-next {
background-color: #333;
box-sizing:border-box;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
visibility: visible;
position: absolute;
top: 50%;
width: 30px;
height: 44px;
margin-top: -22px;
z-index: 9;
cursor: pointer;
background-size: 15px 100px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-countdown-list:hover .swiper-button-prev{
margin-left: -10px;
}
.swiper-countdown-list:hover .swiper-button-next{
margin-right: -10px;
}
/*  <========SON=========>>> Fırsatlar Vitrini SON */


/* Vitrin 2 */
.product-categories-main-div-vitrin2{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
    background:#ffffff ;
padding:30px 0 10px 0;
margin: 0px 0;
font-family : 'Open Sans',sans-serif ;
}



/* Vitrin 1 */

.product-categories-main-div{
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
    background:#ffffff ;
padding:30px 0;
margin: 0px 0;
font-family : 'Open Sans',sans-serif ;
}
.product-categories-box{
background-color: #ffffff;
border: 1px solid #ffffff;
}
.product-categories-box:hover .product-categories-box-img{
}
    @media screen and (max-width:1151px) and (min-width:1024px) {
    .product-categories-box{
    width: 23.6% !important;
    }
    .product-categories-box-img{
    height: 140px !important;
    }
    .product-categories-box-img-dis{
    height: 140px !important;
    }
    }


/* seçenekli ürün vitrini */
.urunler-module-main-div{
    background:#ffffff ;
padding:35px 0 5px 0;
margin: 0px 0;
font-family : 'Open Sans',sans-serif ;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

.home-product-tablinks.active {
background-color: #f96e51;
border: 1px solid #f96e51;
}
.home-product-tablinks.active::after{
border-color: #f96e51 transparent transparent transparent;
}
.home-product-tablinks {
background-color: #f8f8f8;
border-radius: 50px;
border: 1px solid #f8f8f8;
margin: 5px;
}
.home-product-tablinks p{
font-size: 13px ;
font-weight: 400;
}
.home-product-tablinks.active p,
.home-product-tablinks.active:hover p {
color: #ffffff;
}
.home-product-tablinks p{
color: #000000;
}



/* Ürün Kutuları */
.urun-box-special-area-caturunvitrin{
border: 1px dashed #ffffff;
background-color: #333333;
color: #ffffff;
}
.urun-box-special-area{
border: 1px dashed #ffffff;
background-color: #333333;
color: #ffffff;
}
.cat-detail-products-box {
border: 1px solid #ebebeb;
background-color: #ffffff;
border-radius: 5px;
}
.cat-detail-products-box-cart-2 {
border-top: 1px solid #ebebeb;
}
.cat-detail-products-box-stars .aktif-span {
color: #ffb400;
}

.cat-detail-products-box-stars .pasif-span {
color: #cccccc;
}

.cat-detail-products-box-kargo {
background-color: #ffffff;
color: #000000;
}
    .cat-detail-products-box{
    width: 15.15%;
    }
    .cat-detail-products-box-img{
    width: 100%;

    }
    .cat-detail-products-box-img img{
    width: 100%;
    }
    @media screen and (max-width:1151px) and (min-width:1023px) {
    .cat-detail-products-box-img{
    width: 100%;
    }
    .cat-detail-products-box-img img{
    width: 100%;
    }
    }
    @media screen and (max-width:1279px) and (min-width:1152px) {
    .cat-detail-products-box-img{
    width: 100%;
    height: 140px;
    }
    .cat-detail-products-box-img img{
    width: 100%;
    }
    }
    @media screen and (max-width:1359px) and (min-width:1280px) {
    .cat-detail-products-box-img{
    width: 100%;
    height: 160px;
    }
    .cat-detail-products-box-img img{
    width: 100%;
    }
    }

/* ============================================================
   Çadırcı Süleyman — mobil/tablet ızgara düzeltmesi
   Tema, ana sayfa vitrin kutuları için küçük ekranlarda geçerli bir
   genişlik kuralı üretmiyor; kutular masaüstündeki 23.6% oranında
   kalıp telefonda ~80px'e sıkışıyordu. Bu blok en son yüklendiği için
   kesin olarak geçerli olur.
   ============================================================ */
@media screen and (max-width: 767px) {
    /* ÜRÜN GRUPLARIMIZ (vitrin_tip3) — telefonda 2'li */
    .product-categories-box {
        width: 47% !important;
        margin: 1.5% !important;
    }
    .product-categories-box-img,
    .product-categories-box-img-dis {
        height: 150px !important;
    }
    /* ÇÖZÜM ALANLARIMIZ (vitrin_tip2) — telefonda 2'li */
    .product-categories-inside-vitrin2-boxarea .vitrin2-box {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .vitrin2-box-gradient {
        min-height: 120px !important;
        padding: 0 14px 14px 14px !important;
    }
    .vitrin2-box-h { font-size: 15px !important; line-height: 1.2 !important; }
    .vitrin2-box-s { font-size: 11px !important; line-height: 1.25 !important; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Tablet — 8 kutu 4+4 bölünsün diye 4'lü, vitrin2 2'li */
    .product-categories-box {
        width: 23% !important;
        margin: 1% !important;
    }
    .product-categories-inside-vitrin2-boxarea .vitrin2-box {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .vitrin2-box-gradient { min-height: 180px !important; }
}

/* 1280px sınıfı dizüstü ekranlarda yatay kaydırmayı önle:
   tema konteynerleri sabit 1300px; viewport daha darsa daraltılsın. */
@media screen and (min-width: 1024px) and (max-width: 1339px) {
    .topheader-html-main-in,
    .topheader-desktop-main-div-in,
    .header-desktop-main-div-in,
    .top-level-menu-main-div-in,
    .about-module-inside-area,
    .about-module-main-div-boxed,
    .marka-module-inside-area,
    .sss-faq-container-main,
    .tablolar-container-main,
    .product-categories-inside-vitrin2,
    .cart-main-div,
    .no-cart-items-in-div,
    .teslimat-page-main,
    .ccard-payment-page-main,
    .story-in-div-standart,
    .sablon2-level-menu {
        width: 100% !important;
        max-width: 1300px !important;
        box-sizing: border-box !important;
    }
    /* .swiper-container bilerek listede DEĞİL: slider boxed görünsün diye
       genişliğini slider_ayar.slider_width belirliyor. Taşmayı aşağıdaki
       max-width kuralı engelliyor. */
    .swiper-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media screen and (min-width:1024px){
    .swiper-container{
        aspect-ratio: 2.352137;
        height: auto !important;
    }
}
@media screen and (max-width:1023px){
    .swiper-container{
        aspect-ratio: 2.352137;
        height: auto !important;
    }
}
/* contain kullanıldığı için: arka plan tekrar etmesin, ortalansın */
.slide-top-desktop, .slide-top-mobile{
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* 1024-1151px bandında masaüstü başlık menüsü sığmayıp yatay kaydırma
   yaratıyordu (tema bu genişliğin altında mobil başlığa geçiyor).
   Menüyü bu bantta hafifçe sıkıştırıp taşmayı kesiyoruz. */
@media screen and (min-width: 1024px) and (max-width: 1151px) {
    .desktop-header-area,
    .top-level-menu-main-div,
    .top-level-menu-main-div-in {
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* overflow-x:hidden KULLANILMIYOR: tek eksene hidden vermek diğer ekseni
           otomatik "auto" yapar ve menü çubuğunun sağında kaydırma oku çıkarır. */
        overflow: visible !important;
    }
    .top-level-menu-main-div-in > ul > li > a,
    .top-level-menu-main-div-in a {
        font-size: 12px !important;
        letter-spacing: 0 !important;
    }
    .top-level-menu-main-div-in > ul > li {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}
@media screen and (min-width:1024px){
    .swiper-middle-container{
        aspect-ratio: 3.368421;
        height: auto !important;
    }
}
@media screen and (max-width:1023px){
    .swiper-middle-container{
        aspect-ratio: 3.368421;
        height: auto !important;
    }
}
.swiper-middle-container .swiper-slide,
.swiper-middle-container .swiper-slide a,
.swiper-middle-container .swiper-slide .middle-slider-img,
.swiper-middle-container .swiper-slide .middle-slider-img-mobile{
    height: 100% !important;
}
.swiper-middle-container .swiper-slide img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Not: orta slider genişliği artık taban kuralda 1300px (yukarıda),
   üst slider ile hizalı. Buraya ayrıca override konmuyor — Swiper
   slayt genişliklerini init anında hesapladığı için sonradan
   genişletmek 12px'lik yatay kaçak bırakıyordu. */

/* Tema <body>'ye overflow-x:hidden veriyor ama <html>'e vermiyor.
   Swiper .swiper-wrapper'a transform: translate3d(...) uyguladigi icin
   sonraki slaytlar belge genisligine yansiyor ve 1360-1379px bandinda
   ~12px gercek yatay kaydirma olusuyordu (1366px dizustu ekranlarda
   gorunur). Kok elemanda da kesiyoruz. Sitede position:sticky
   kullanilmadigi icin bu guvenli. */
html {
    overflow-x: hidden !important;
}

/* "Ürün Gruplarımız" (vitrin_tip3) — görsel gerilmesin.
   Tema .product-categories-box-img'e background-size:100% 100% veriyordu;
   bu, görseli kutuya zorla gerip ORANINI BOZUYORDU (kutu oranı kırılıma
   göre 1.62 / 1.54 / 0.99 arasında değişiyor). cover ile oran korunur,
   taşan kısım merkezden kırpılır. */
.product-categories-box-img{
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.pgallery-module-inside-area,
.pgallery-module-inside-box-area{
    max-width: 1300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.pgallery-module-inside-box{
    height: auto !important;
    aspect-ratio: 1.066667;
}
.pgallery-module-inside-box img{
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* =====================================================================
   MEGA MENÜ (header_menu.menu_sablon = 2)
   Tema panelin 1300px sabit genişliğini kullanıyor; içerik az olan
   menülerde kocaman boş panel kalıyordu. İçeriğe göre daralt, dar
   masaüstünde ekrandan taşmasını engelle.
   ===================================================================== */
.sablon2-level-menu{
    width: max-content !important;
    max-width: calc(100vw - 30px) !important;
    padding: 4px 18px 0 !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.13) !important;
}
.sablon2-level-menu-left{
    padding: 24px 0 18px !important;
    align-items: stretch !important;
}
.sablon2-level-menu-left-item{
    width: 218px !important;
    margin: 0 16px 26px !important;
}
.sablon2-level-menu-left-item-h{
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    text-transform: uppercase;
    line-height: 1.35;
    margin-bottom: 12px !important;
    padding-bottom: 9px !important;
}
.sablon2-level-menu-left-item-s{
    font-size: 13px !important;
    line-height: 1.4;
    margin-bottom: 9px !important;
    transition: color .15s ease, padding-left .15s ease;
}
.sablon2-level-menu-left-item-s:hover{
    text-decoration: none !important;
    padding-left: 4px;
    color: #ff8800 !important;
}
/* Sağdaki öne çıkan ürün alanı */
.sablon2-level-menu-right{ width: 330px !important; padding: 24px 22px !important; }
.sablon2-level-menu-right-product-box{ width: 40% !important; font-size: 12px !important; line-height: 1.35; }
.sablon2-level-menu-right-product-box img{ height: 92px !important; object-fit: cover; }

/* 1024–1365px: panel ekrana sığsın, sütunlar biraz daralsın */
@media screen and (min-width:1024px) and (max-width:1365px){
    .sablon2-level-menu{ padding-left: 12px !important; padding-right: 12px !important; }
    .sablon2-level-menu-left-item{ width: 196px !important; margin: 0 11px 22px !important; }
    .sablon2-level-menu-right{ display: none !important; }
}

/* =====================================================================
   BANNER VİTRİN 4 — tam 5 kutu varsa mozaik (1 büyük + 4 küçük 2x2),
   diğer adetlerde kutular kendi col-md sınıflarına göre dizilir.
   ===================================================================== */
.banner-vitrin4-alan.mozaik5{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}
.banner-vitrin4-alan.mozaik5 > a.vitrin2-box{
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 896 / 1195;
}
.banner-vitrin4-alan.mozaik5 > a.vitrin2-box:first-child{
    grid-column: span 2;
    grid-row: span 2;
}
.banner-vitrin4-alan.mozaik5 .vitrin2-box-img{
    height: 100% !important;
    overflow: hidden;
}
.banner-vitrin4-alan.mozaik5 .vitrin2-box-img img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media screen and (max-width: 1023px){
    .banner-vitrin4-alan.mozaik5{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .banner-vitrin4-alan.mozaik5 > a.vitrin2-box:first-child{ grid-column: span 2; grid-row: auto; }
}


/* =====================================================================
   SITE_GENISLIK_150_ANASAYFA — site genisligi %50 artirildi.
   Bu dosya site_style.css'ten SONRA yuklendigi icin anasayfaya ozel
   kapsayicilar burada guncelleniyor. Swiper genisligi init aninda
   okudugundan, head'de yuklu CSS ile birlikte dogru genislikle baslar.
   ===================================================================== */
@media screen and (min-width:1024px){
    .swiper-container,
    .swiper-middle-container,
    .pgallery-module-inside-area,
    .pgallery-module-inside-box-area{
        width:1950px !important;
        max-width:calc(100% - 32px) !important;
        box-sizing:border-box !important;
    }
}

/* =====================================================================
   REFERANSLAR MODULU
   Ayarlar: referans_ayar (id=1) · Modul: includes/template/_modules/referanslar.php
   Swiper 6 kapsayici temel kurallari burada tanimlanir; swiper.min.css yalnizca
   temanin kendi kapsayici siniflarini kapsadigi icin .swiper-referans orada yok.
   Swiper HIC yuklenmezse .swiper-hazir sinifi eklenmez ve serit duz bir flex
   satiri olarak dogru genisliklerde gorunmeye devam eder (yedek duzen).
   ===================================================================== */
.referans-module-main-div{
    width:100%;
    position:relative;
    padding:45px 0;
    margin:0px 0;
    background-color:#FFFFFF;
    border-top:1px solid #EBEBEB;
    border-bottom:1px solid #EBEBEB;
}
.referans-module-karartma{
    background:rgba(0,0,0,.6);
    width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:1;
}
.referans-module-inside-area{
    width:1300px;
    max-width:calc(100% - 32px);
    margin:0 auto;
    position:relative;
    z-index:2;
    box-sizing:border-box;
}

/* --- baslik alani --- */
.referans-module-head{
    width:100%;
    text-align:center;
    margin-bottom:30px;
}
.referans-module-baslik{
    font-family:'Poppins',sans-serif;
    font-size:26px;
    font-weight:600;
    letter-spacing:.08em;
    color:#1F2328;
    margin:0;
    line-height:1.25;
    text-transform:uppercase;
}
.referans-module-cizgi{
    display:block;
    width:54px; height:3px;
    border-radius:2px;
    background-color:#F39C1F;
    margin:12px auto 0;
}
.referans-module-spot{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;
    color:#6B7280;
    margin-top:10px;
    line-height:1.5;
}

/* --- serit --- */
.referans-module-slider-wrap{
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
}
.swiper-referans{
    margin:0 auto;
    position:relative;
    overflow:hidden;
    list-style:none;
    padding:0;
    z-index:1;
    width:100%;
    flex:1 1 auto;
    min-width:0;
}
/* Yedek duzen: Swiper baslamadan once (ve hic yuklenmezse) gecerlidir.
   swiper.min.css .swiper-slide'a width:100% verdigi icin, bu olmadan
   ilk cizimde tek bir logo tum seridi kaplar. */
.swiper-referans:not(.swiper-hazir) .swiper-wrapper{
    display:flex;
    flex-wrap:nowrap;
    gap:22px;
    transform:none !important;
}
.swiper-referans:not(.swiper-hazir) .swiper-slide{
    flex:0 0 calc((100% - (6 - 1) * 22px) / 6);
    width:auto;
    max-width:calc((100% - (6 - 1) * 22px) / 6);
}
.swiper-referans .swiper-slide{
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* --- logo kutusu --- */
.referans-kutu{
    width:100%;
    height:95px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    box-sizing:border-box;
    background-color:#FFFFFF;
    border:1px solid #EBEBEB;
    border-radius:8px;
    text-decoration:none;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.referans-kutu img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}
/* Gri filtre yalnizca fareyle gezinilebilen cihazlarda uygulanir; dokunmatikte
   hover ile geri alinamayacagi icin logolar orada tam renkli gosterilir. */
@media (hover:hover) and (pointer:fine){
    .referans-kutu img{
        filter:grayscale(100%);
        opacity:.78;
        transition:filter .25s ease, opacity .25s ease;
    }
    .referans-kutu:hover img,
    .referans-kutu:focus-visible img{
        filter:grayscale(0);
        opacity:1;
    }
}
a.referans-kutu:hover{
    border-color:#F39C1F;
    box-shadow:0 4px 14px rgba(0,0,0,.07);
    transform:translateY(-2px);
}
/* Klavye ile gezinirken gorunur odak gostergesi (WCAG 2.4.7) */
a.referans-kutu:focus-visible,
.referans-nav:focus-visible{
    outline:3px solid #F39C1F;
    outline-offset:2px;
}
.referans-kutu-pasif{ cursor:default; }

/* --- oklar --- */
.referans-nav{
    flex:0 0 38px;
    width:38px; height:38px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#fff;
    border:1px solid #EBEBEB;
    color:#1F2328;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.referans-nav i{ font-size:19px; line-height:1; }
.referans-nav:hover{
    background-color:#F39C1F;
    border-color:#F39C1F;
    color:#1F2328;
}
.referans-nav.swiper-button-disabled{
    opacity:.35;
    cursor:default;
}
.referans-nav.swiper-button-lock{ display:none; }

@media screen and (max-width:1279px){
    .swiper-referans:not(.swiper-hazir) .swiper-slide{
        flex-basis:calc((100% - 3 * 20px) / 4);
        max-width:calc((100% - 3 * 20px) / 4);
    }
}
@media screen and (max-width:1023px){
    .referans-module-main-div{ padding:32px 0; }
    .referans-module-baslik{ font-size:21px; letter-spacing:.06em; }
    .referans-module-spot{ font-size:13px; }
    .referans-module-head{ margin-bottom:22px; }
}
@media screen and (max-width:767px){
    .referans-module-main-div{ padding:26px 0; }
    .referans-module-baslik{ font-size:18px; }
    .referans-module-spot{ font-size:12.5px; margin-top:8px; }
    .referans-nav{ flex:0 0 30px; width:30px; height:30px; }
    .referans-nav i{ font-size:16px; }
    .referans-kutu{ height:75px; padding:8px 10px; }
    .swiper-referans:not(.swiper-hazir) .swiper-wrapper{ gap:12px; }
    .swiper-referans:not(.swiper-hazir) .swiper-slide{
        flex-basis:calc((100% - 12px) / 2);
        max-width:calc((100% - 12px) / 2);
    }
}
