/* ==========================================================================
   benomtech TEMASI (P1) - varliklar/sayfa-anasayfa.css
   (kayit anahtari: sayfa_anasayfa_css; BS_TEMA_SAYFALAR slug 'anasayfa')
   Birlestirilen parcalar: header.css BOLUM B, anasayfa.css [A],
   kart_kategori.css BOLUM B.

   YUKLEME SIRASI: header_libs.php sonunda ayri link; modules_style.css'ten
   ONCE. Bu yuzden seciciler "html body" onekli; modules_style / satir ici
   stilde !important olan ozelliklerde !important var.
   Yasak desenler YOK.
   ========================================================================== */


/* ==========================================================================
   1) HEADER - "Tum Kategoriler" listesi ana sayfada surekli acik
   parca/header.css BOLUM B. Liste ozel.css 2. bolumde (A3) hover ile acilir;
   burada daha yuksek ozgullukle hep acik. Slider (2. bolum) solda bu
   listeye yer birakir; header parcasinin yorumdaki yedek slider kurali atildi.
   ========================================================================== */


/* Ana sayfada "Tum Kategoriler" listesi surekli acik (canli: bt header.php
   isHomepage -> dropdown.style.display = block). Ozgulluk ozel.css'teki
   gizleme kuralindan yuksek (yukleme sirasina bagli kalmasin). */
html body .header-main-div .desktop-header-area .head-new-area-left > ul.top-level-menu {
    display: flex;
}


/* ==========================================================================
   2) SLIDER yerlesimi (parca/anasayfa.css A1)
   Canli: sol 382 px (1440 genislikte), 1000x660, ust bosluk 0; mobilde yapisik.
   ========================================================================== */


/* ---- A1. Ana slider yerleşimi -------------------------------------------
   Kaynak: bt includes/template/_modules/slider.php:13-34 (satır içi style bloğu)
   + style="max-width:1000px". Canlıda slider soldaki "Tüm Kategoriler"
   dikey menüsüne yer bırakır: 1440'ta sol 382 px, 1000x660, üst boşluk 0.
   Çekirdekte bu blok yok -> slider tam genişlik 1440x600, üst/alt 25 px.
   Bağımlılık: soldaki boşluğu bu dosyanın 1. bölümü doldurur (ana sayfada
     "Tüm Kategoriler" listesi sürekli açık). header parçasının yorumdaki
     koordinasyon kuralı birleştirmede ATILDI, yerine bu blok. 1. bölüm
     kaldırılırsa yalnız margin-left satırlarını da kaldırın.
   Not: 1024-1300 ve mobil aralıklarda modules_style'ın !important
   yükseklikleri (slider_ayar) canlıdaki gibi geçerli kalır. */
html body .slider-main-div .swiper-container{
    max-width:1000px;
    margin-left:clamp(10%, calc((101vw - 720px) * 0.285 + 12%), 31%);
    margin-top:0;
    height:660px;
}
@media (min-width:1029px){
    html body .slider-main-div .swiper-container{
        --sl-mlv:clamp(10vw, calc((101vw - 720px) * 0.285 + 12vw), 31vw);
        max-width:min(1000px, calc(100vw - var(--sl-mlv) - 24px)) !important;
        height:min(660px, calc((100vw - var(--sl-mlv) - 24px) * 0.66));
    }
}
@media (max-width:1028px){
    /* canlı: mobilde üst/alt boşluk yok, slider header'a yapışık */
    html body .slider-main-div .swiper-container{
        margin:0 auto !important;
    }
}


/* ==========================================================================
   3) SEKMELI URUN VITRINI - gorsel kosesi (parca/kart_kategori.css BOLUM B: B1)
   Yalniz ana sayfa sekme kabi; kategori sayfasinda canli kose yok.
   ========================================================================== */


/* ---- B1. Ana sayfa sekmeli urun vitrini: gorsel kosesi 16px ----------
   Canli yalniz ana sayfadaki kartlarda gorseli yuvarliyor (kategori
   sayfasinda kose YOK) -> sayfa dosyasina konur, sekme kabiyla sinirli.
   overflow:hidden cekirdekte zaten var (hover'daki scale(1.03) kirpilir). */
html body .home-product-tabcontent .cat-detail-products-box-img{border-radius:16px;overflow:hidden;}
html body .home-product-tabcontent .cat-detail-products-box-img img{border-radius:16px;}


/* ==========================================================================
   4) FOOTER USTU BILGI KUTULARI + BLOG (parca/anasayfa.css A2-A3)
   Renk/metin veri.sql 5-7 (tkutu_ayar, ticaret_bilgi, blog_ayar); burada yerlesim.
   ========================================================================== */


/* ---- A2. Footer üstü bilgi kutuları (ticaret kutuları) -------------------
   Canlı: bt _modules/info_box.php -> .benom-info-box kartları (ortalı ikon,
   17px başlık, 14px metin, 14px köşe, gölge, hover'da yukarı kalkma).
   Çekirdek: .ticaret-kutulari-* (ikon solda, 13px ince başlık + 14px kalın
   metin, ayraç çizgili tek şerit). Metin/ikon/renkler anasayfa.sql'de
   (ticaret_bilgi + tkutu_ayar); burada yalnız yerleşim.
   ⚠ backdrop-filter BİLEREK yok (modal/katman kırıyor). */
html body .ticaret-kutulari-main-div{
    padding:24px 0 !important;
    background:linear-gradient(135deg, rgba(255,255,255,.9), #ffffff) !important;
}
html body .ticaret-kutulari-main-div .ticaret-kutulari-inside{
    width:auto;
    max-width:1140px;
    padding:0 12px;
    box-sizing:border-box;
    border:0;
    background:transparent;
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:center;
    gap:24px;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box{
    width:auto;
    flex:1 1 0;
    min-width:0;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    padding:28px 20px;
    background:rgba(255,255,255,.8);
    border:1px solid transparent;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(131,131,131,.12);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box:last-child{
    border-right:1px solid transparent !important;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box:hover{
    transform:translateY(-6px);
    border-color:#5bc5df !important;
    box-shadow:0 12px 28px rgba(91,197,223,.18);
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box-i{
    font-size:calc(36px * var(--tk-ikon-olcek, 1));
    line-height:1;
    width:auto;
    margin:0 0 12px 0;
    text-align:center;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box-text{
    flex:0 1 auto;
    width:100%;
    text-align:center;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box-text-h{
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:6px;
}
html body .ticaret-kutulari-main-div .ticaret-kutu-box-text-s{
    font-size:14px;
    font-weight:400;
    line-height:1.5;
}
@media (max-width:991px){
    html body .ticaret-kutulari-main-div .ticaret-kutulari-inside{
        flex-wrap:wrap;
        max-width:93%;
    }
    html body .ticaret-kutulari-main-div .ticaret-kutu-box{
        flex:0 0 calc(50% - 12px);
    }
}
@media (max-width:768px){
    html body .ticaret-kutulari-main-div .ticaret-kutu-box{
        padding:20px 16px;
    }
    html body .ticaret-kutulari-main-div .ticaret-kutu-box-i{
        font-size:calc(30px * var(--tk-ikon-olcek, 1));
    }
    html body .ticaret-kutulari-main-div .ticaret-kutu-box-text-h{
        font-size:16px;
    }
}
@media (max-width:575px){
    html body .ticaret-kutulari-main-div .ticaret-kutu-box{
        flex:0 0 100%;
    }
}


/* ---- A3. Blog bloğu ------------------------------------------------------
   Canlı: bt _modules/blog.php "jb-section" + blog.css:563-860 (sola yaslı
   başlık, sağda "TÜM BLOG YAZILARI" çerçeveli düğme, 3 sütun kart ızgarası,
   12px köşe, 170px görsel). Çekirdek: ortalı başlık + çizgi, metin kutusu
   görselin üstüne binen kart, düğme altta. Kategori çipleri / "Blog"
   üst etiketi bağlam taşımadığı için yok (T11, P2).
   anasayfa.sql blog_baslik_tip=0 yapar; tip=1 kalırsa da aşağıdaki
   forbg kuralları aynı görünümü verir. Bölüm zemini canlıda da beyaz
   (modules_style blog.css'i eziyor) -> zemin/dolguya dokunulmadı. */
html body .bloglar-module-main-div .bloglar-module-inside-area{
    display:block;
    width:auto;
    max-width:1220px;
    padding:0 16px;
    box-sizing:border-box;
    position:relative;
}
html body .bloglar-module-main-div .modules-head-text-main{
    width:100%;
    text-align:left;
    margin:0 0 30px 0;
    padding-right:260px;
    box-sizing:border-box;
}
html body .bloglar-module-main-div .modules-head-text-h,
html body .bloglar-module-main-div .modules-head-forbg-text{
    font-size:34px !important;
    line-height:1.18;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 8px 0 !important;
    padding:0;
    background:transparent !important;
}
html body .bloglar-module-main-div .modules-head-forbg-text-out{
    width:100%;
    height:auto;
    margin:0;
    border-bottom:0 !important;
}
html body .bloglar-module-main-div .modules-head-text-s{
    font-size:15px;
    line-height:1.6;
    letter-spacing:normal;
    opacity:.75;
}
html body .bloglar-module-main-div .pgallery-all-button-main{
    position:absolute;
    top:28px;
    right:16px;
    width:auto;
    padding:0;
    text-align:right;
}
html body .bloglar-module-main-div .pgallery-all-button-main a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:1px solid #0e7490;
    border-radius:8px;
    color:#0e7490;
    background:transparent;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:all .2s ease;
}
html body .bloglar-module-main-div .pgallery-all-button-main a:hover{
    transform:translateY(-1px);
    background:#0e7490;
    color:#fff !important;
}
html body .bloglar-module-main-div .bloglar-box-main-div{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
    align-items:stretch;
}
html body .bloglar-module-main-div .blog-box{
    width:auto;
    margin:0;
    display:flex;
    flex-direction:column;
    border:1px solid #e7e9ee;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    transition:transform .2s ease, box-shadow .2s ease;
}
html body .bloglar-module-main-div .blog-box:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}
html body .bloglar-module-main-div .blog-box-img{
    height:170px;
    margin:0;
    background:#eceff3;
    flex-shrink:0;
}
html body .bloglar-module-main-div .blog-box-img img{
    width:100%;
    height:100%;
    min-width:0;
    max-width:none;
    min-height:0;
    object-fit:cover;
    transition:transform .25s ease;
}
html body .bloglar-module-main-div .blog-box:hover .blog-box-img img{
    transform:scale(1.04);
    filter:none;
}
html body .bloglar-module-main-div .blog-box-overlay{
    display:none;
}
html body .bloglar-module-main-div .blog-box-text-area{
    width:100%;
    margin:0;
    padding:14px;
    text-align:left;
    box-shadow:none;
    flex:1;
    display:flex;
    flex-direction:column;
}
html body .bloglar-module-main-div .blog-box-text-area > div[style*="height: 15px"]{
    display:none;
}
html body .bloglar-module-main-div .blog-box-date{
    margin-bottom:8px;
    font-size:11px;
    font-weight:600;
    letter-spacing:normal;
    text-transform:none;
    opacity:.8;
}
html body .bloglar-module-main-div .blog-box-h{
    margin-bottom:8px;
    font-size:16px;
    line-height:1.4;
    font-weight:700;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
html body .bloglar-module-main-div .blog-box-button{
    margin-top:auto;
    font-size:12px;
    font-weight:700;
    letter-spacing:normal;
    text-transform:none;
}
@media (max-width:1024px){
    html body .bloglar-module-main-div .bloglar-box-main-div{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    html body .bloglar-module-main-div .modules-head-text-h,
    html body .bloglar-module-main-div .modules-head-forbg-text{
        font-size:30px !important;
    }
}
@media (max-width:767px){
    html body .bloglar-module-main-div .modules-head-text-main{
        padding-right:0;
        margin-bottom:14px;
    }
    html body .bloglar-module-main-div .modules-head-text-h,
    html body .bloglar-module-main-div .modules-head-forbg-text{
        font-size:25px !important;
    }
    html body .bloglar-module-main-div .modules-head-text-s{
        font-size:14px;
    }
    html body .bloglar-module-main-div .pgallery-all-button-main{
        position:static;
        text-align:left;
        margin:0 0 22px 0;
    }
    html body .bloglar-module-main-div .bloglar-box-main-div{
        grid-template-columns:minmax(0, 1fr);
        gap:14px;
    }
    html body .bloglar-module-main-div .blog-box-img{
        height:180px;
    }
}
/* mobilde düğme başlığın altına (canlıda flex-direction:column ile aynı
   sıra): ızgaradan önce gelmesi için düzen sırası. align-items:stretch
   şart: çekirdek style.css bu kaba align-items:center veriyor (düğme
   ortalanır, ızgara içerik genişliğine büzülürdü). */
@media (max-width:767px){
    html body .bloglar-module-main-div .bloglar-module-inside-area{
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:flex-start;
    }
    html body .bloglar-module-main-div .modules-head-text-main{ order:1; }
    html body .bloglar-module-main-div .pgallery-all-button-main{ order:2; }
    html body .bloglar-module-main-div .bloglar-box-main-div{ order:3; }
}