/* kartify-blog.css — Paket 281
   blog/listele.tpl icindeki KOSULSUZ ve STATIK gomulu stil blogu
   (17.212 karakter) buraya alindi. blog/category.tpl de ayni dosyayi
   kullaniyor: kurallarinin 25'i bu dosyada birebir var ve SIRALARI
   korunuyor. Category'ye ozel iki kural sablonda, bu dosyanin
   ARDINDAN gelen kucuk bir blokta duruyor.
   Tek bir kural silinmedi veya degistirilmedi. */

    /* Blog kartinin basligi ve "Devamini Oku" baglantisi <a> icinde
       oldugu icin sitenin genel SARI baglanti rengini aliyordu
       (karsilastirma sayfasinda da ayni tuzak yasanmisti, Paket 170).
       Renkler duz yaziliyor: --primary-color bazi kapsamlarda sari
       cozuluyor (Paket 154'te canlida olculdu). */
    .kartify-blog-page .blog-contain a {
        text-decoration: none;
    }

    .kartify-blog-page .blog-contain h3 {
        margin: 0;
        color: #20242c;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
    }

    .kartify-blog-page .blog-box:hover .blog-contain h3,
    .kartify-blog-page .blog-box:hover .blog-contain > a > i {
        color: #ff9900;
    }

    .kartify-blog-page .blog-contain .blog-desc {
        margin: 8px 0 0;
        display: -webkit-box;
        overflow: hidden;
        color: #666c7a;
        font-size: 14px;
        line-height: 1.6;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .kartify-blog-page .kartify-blog-date {
        margin: 8px 0 0;
        display: flex;
        align-items: center;
        gap: 6px;
        color: #8a909e;
        font-size: 13px;
        font-weight: 400;
    }

    .kartify-blog-page .kartify-blog-more {
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #ff9900 !important;
        font-size: 14px;
        font-weight: 600;
    }

    .kartify-blog-page .kartify-blog-more:hover {
        gap: 10px;
    }

    /* Kart: beyaz kutu, gri sayfa zemininde ayrisir. */
    .kartify-blog-page .blog-box {
        box-sizing: border-box;
        padding: 12px;
        background: #fff;
        border-radius: 8px;
    }

    .kartify-blog-page .blog-image {
        margin-bottom: 12px;
    }

    .kartify-blog-page .blog-image img {
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
    }

    /* --- Sol sutun: arama + sunucudan gelen kategori agaci --- */
    /* Kenar cubugu kartlari: Kartify'nin blog kenar cubugu olculeri
       (assets/scss/pages/_blog_page.scss -> .left-accordion-box
       .accordion-item): 6 px kose, cerceve yok, ic bosluk 18px 23px,
       kartlar arasi 30 px. */
    .kartify-blog-page .left-sidebar-box {
        padding: 18px 23px;
        background: #fff;
        border-radius: 6px;
    }

    .kartify-blog-page .left-sidebar-box + .left-sidebar-box {
        margin-top: 30px;
    }

    @media (max-width: 1199.98px) {
        .kartify-blog-page .left-sidebar-box + .left-sidebar-box {
            margin-top: 18px;
        }
    }

    /* Arama kutusuna KURAL YAZILMIYOR.
       Onceki surumde .form-control ve .input-group-text icin kendi
       kurallarimi yazmistim; Kartify'nin kendi
       .left-search-box .search-box .form-control kurali daha ozgul
       oldugu icin onlari eziyordu ve ortaya yarim bicimlenmis bir kutu
       cikiyordu (canlida olculdu: input'un border'i 0px none, zemini
       seffaf, ama kose yariciapi benim kuralimdan geliyordu).

       Ayrica Kartify .search-box'a ::after ile sagdan 51px iceride
       dikey bir ayirici cizgi koyuyor -- yani ikon dugme bekliyor.
       Metin dugme ("Blog Ara") 51px'ten genis oldugu icin cizgi
       dugmenin ortasina dusuyordu.

       Cozum: Kartify'nin isaretlemesine uyuldu (ikon dugme) ve
       cakisan kurallar kaldirildi; kutuyu Kartify'nin kendi CSS'i
       bicimlendiriyor. Dugmenin metni aria-label / title olarak
       korunuyor. */
    .kartify-blog-page .left-search-box .search-box .input-group-text {
        cursor: pointer;
    }

    .kartify-blog-page .left-search-box .search-box .input-group-text:hover i {
        color: #ff9900;
    }

    /* Arama kutusunun altinda ve koselerinde gri serit goruluyordu.
       Canlida olculdu (2195 px):
         .search-box  -> zemin #f2f3f8, yukseklik 59 px, kose yariciapi 0
         input        -> zemin BEYAZ,   yukseklik 53 px, kose 6px 0 0 6px
         button       -> zemin BEYAZ,   yukseklik 59 px
       Yani kapsayicinin grisi, beyaz girdinin ALTINDAN 6 px serit olarak
       ve yuvarlatilmis koselerin disindan cikiyordu. (Dogrulama: kapsayiciya
       gecici kirmizi zemin verildiginde serit ve koseler kirmizi oldu.)

       Girdinin yuksekligi CSS'te sabit oldugu icin flex'in align-items:
       stretch'i ise yaramiyordu; yukseklik otomatige alinip esnetiliyor ve
       kapsayici kendi kose yariciapiyla kirpiliyor. */
    .kartify-blog-page .left-search-box .search-box {
        overflow: hidden;
        border-radius: 6px;
    }

    /* Paket 186'da girdiyi kapsayici boyuna ESNETMEYI denemistim; olmadi.
       Canlida olculdu (Paket 186 yuklendikten SONRA):
         .search-box  58.52 px  ·  button 58.52 px  ·  input 53 px
       Girdiye height veren bir CSS kurali YOK (tum stil sayfalari tarandi,
       satir ici stil de yok) - 53 px girdinin kendi ic yuksekligi
       (line-height 24 + dolgu). align-self: stretch de yeterli olmadi.
       Yani bu bir "ezen kural" sorunu degil; kapsayici dugmenin dolgusu
       yuzunden girdiden birkac piksel daha uzun.

       Yukseklikleri esitlemeye calismak yerine SORUNU ORTADAN KALDIRIYORUZ:
       ic ogelerin beyaz zemini kaldiriliyor, boylece kapsayicinin grisi tek
       ve tek duzey yuzey oluyor. Yukseklikler ne olursa olsun serit olusamaz.
       (Canlida denendi ve dogrulandi: serit ve kose artiklari tamamen gitti.) */
    .kartify-blog-page .left-search-box .search-box .form-control,
    .kartify-blog-page .left-search-box .search-box .input-group-text {
        background: transparent !important;
        border-radius: 0;
    }

    .kartify-blog-page .left-search-box .search-box .form-control {
        height: auto;
        align-self: stretch;
        padding: 12px 14px;
    }

    .kartify-blog-page .left-search-box .search-box .input-group-text {
        align-self: stretch;
    }

    /* Arama onerileri kutusu. Sunucu isaretlemesi satir ici stil
       tasiyordu (position:absolute; max-width:515px) - dar sol sutunda
       tasiyordu, normal akisa alindi. Satir ici stil !important ile
       eziliyor; display:none satir ici kalmali, jQuery .show() onu
       kullaniyor. */
    .kartify-blog-page .searchlistblog {
        position: static !important;
        max-width: none !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        border: 1px solid #eceef3 !important;
        border-radius: 6px;
        list-style: none;
    }

    /* Sunucudan gelen kategori agaci.
       Sunucu bunu kendi .side-nav-categories kutusuyla veriyor: 1 px
       cerceve, 30 px alt bosluk ve 5 px duz gri golge (hepsi canlida
       olculdu). Kartify'da bu bir kartin ICI oldugu icin hepsi sifirlanip
       govdesi Kartify'nin .accordion-body dilinde yeniden bicimlendiriliyor. */
    .kartify-blog-page .kartify-blog-cats {
        margin: 0;
        padding: 0;
        border: none;
    }

    /* Baslik: Kartify .accordion-button (17-19 px, agirlik 500, koyu).

       Canlida olculdu: baslik DOM'da tek cocuk tasiyor -> <strong>Blog Kategori</strong>.
       Buyuk harf gorunumu sunucunun text-transform: uppercase kuralindan
       geliyor; Kartify'nin bolum basliklari normal yazimda ("Category",
       "Recent Post") oldugu icin sifirlandi -> "Blog Kategori".

       Hamburger ikonu bir ELEMENT DEGIL: .title::before uzerinde
       font-family: FontAwesome ile basilan bir glif. Onceki pakette
       i / .fa / [class*=icon] hedeflenmisti, bu yuzden tutmamisti.
       Dogru hedef ::before.

       justify-content: space-between de kaldirildi: Kartify'da o kural
       baslik + sagdaki akordiyon oku icindir; bizde ok olmadigi icin
       basligi saga itiyordu. */
    .kartify-blog-page .kartify-blog-cats .title {
        width: 100%;
        margin: 0 0 10px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        color: #20242c !important;
        background: transparent !important;
        font-size: clamp(17px, 1.1vw, 19px) !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .kartify-blog-page .kartify-blog-cats .title strong {
        font-weight: 500 !important;
        text-transform: none !important;
    }

    .kartify-blog-page .kartify-blog-cats .title::before {
        content: none !important;
    }

    /* --- Arama onerileri listesi ---
       Bu isaretlemeyi searchblog() JS'i uretiyor ve Bootstrap row/col-2/col-10
       ile kuruyor; gorsele de satir ici width:90px veriyor. Genis bir alan
       icin yazilmis, dar kenar cubugunda gorsel basligin uzerine biniyordu
       (canlida olculdu: gorsel kutusu x=226'dan basliyor, baslik x=291'de --
       90 px'lik gorsel col-2'yi tasiyor). Tarih de kalin (700) basiliyordu.
       Satir ici genislik !important ile eziliyor, satir yatay ve tasmasiz
       kuruluyor. */
    .kartify-blog-page .searchlistblog {
        overflow: hidden;
    }

    .kartify-blog-page .searchlistblog li {
        margin: 0 !important;
        padding: 10px !important;
    }

    .kartify-blog-page .searchlistblog li + li {
        border-top: 1px solid #eceef3;
    }

    .kartify-blog-page .searchlistblog .searchLia {
        display: block;
        text-decoration: none;
    }

    .kartify-blog-page .searchlistblog .row {
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 10px;
        margin: 0 !important;
    }

    .kartify-blog-page .searchlistblog .col-2 {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .kartify-blog-page .searchlistblog .col-10 {
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .kartify-blog-page .searchlistblog .searchImg {
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        object-fit: cover;
        border-radius: 6px;
    }

    .kartify-blog-page .searchlistblog .searchProductname {
        display: -webkit-box;
        overflow: hidden;
        color: #20242c !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .kartify-blog-page .searchlistblog .searchProductpriceNew {
        margin-top: 2px;
        display: block;
        color: #8a909e !important;
        font-size: 12px;
        font-weight: 400 !important;
    }

    .kartify-blog-page .searchlistblog hr {
        display: none;
    }

    /* Govde: baslik altinda ince ayirici, sonra liste. */
    .kartify-blog-page .kartify-blog-cats ul {
        margin: 0 !important;
        padding: 16px 0 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-top: 1px solid rgba(102, 108, 122, .1);
        list-style: none;
    }

    .kartify-blog-page .kartify-blog-cats ul + ul {
        padding-top: 0 !important;
        border-top: none;
    }

    /* Kartify'da ogeler arasi cizgi yok, 10 px bosluk var. */
    .kartify-blog-page .kartify-blog-cats li {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        border: none !important;
    }

    .kartify-blog-page .kartify-blog-cats li > a {
        padding: 0 !important;
        display: block;
        color: #20242c !important;
        background: none !important;
        font-size: clamp(14px, 0.95vw, 16px) !important;
        font-weight: 400 !important;
        text-decoration: none;
    }


    .kartify-blog-page .kartify-blog-cats .side-nav-categories {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        /* Kutunun altindaki gri serit buydu: sunucu bu kutuya
           box-shadow: rgba(200,200,200,.2) 0 5px 0 0 veriyor -- 5 px'lik duz
           gri golge. Border sifirlamak yetmiyor, golge border degil. */
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Sol kenardaki kucuk SIYAH KARE'nin kaynagi bulundu.
       Sunucu, kategori kutusunun kendi stil blogunda su kurali basiyor:
         .title:after { content:""; height:1px; width:1px;
                        border-style:solid; border-width:5px;
                        position:absolute; bottom:-10px; left:0;
                        border-color: var(--menuBgColor) var(--menuBgColor)
                                      transparent transparent; }
       Eski tasarimda baslik cubugu koyu zeminliydi ve bu, kivrik kose
       suslemesiydi. Kartify duzeninde baslik koyu zeminli olmadigi icin
       kucuk koyu bir kare olarak tek basina kaliyor (canlida olculdu:
       10x10 px, border-color rgb(32,35,38), position:absolute, left:0).
       Yalnizca bu sayfada gizleniyor. */
    .kartify-blog-page .kartify-blog-cats .side-nav-categories .title::after {
        display: none !important;
    }

    /* Listenin son ogesinin alt cizgisi kutunun dibinde tek basina
       kaliyordu (her li'de border-bottom:1px #ececec var). */
    .kartify-blog-page .kartify-blog-cats li:last-child {
        border-bottom: none !important;
    }

    .kartify-blog-page .kartify-blog-cats ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .kartify-blog-page .kartify-blog-cats li > a {
        padding: 9px 10px;
        display: block;
        color: #555b68 !important;
        border-radius: 6px;
        font-size: 14px;
        text-decoration: none;
    }

    .kartify-blog-page .kartify-blog-cats li > a:hover {
        color: #20242c !important;
        background: #f7f8fb;
    }

    /* Sayfalama: Paket 115'te kategori sayfasinda kanitlanan duzen,
       renkler duz deger olarak yazildi. */
    .kartify-blog-page ul.pagination,
    .kartify-blog-page .pagination {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center !important;
        gap: 8px;
        width: 100%;
        margin: 26px 0 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .kartify-blog-page ul.pagination li,
    .kartify-blog-page .pagination li {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .kartify-blog-page ul.pagination li a,
    .kartify-blog-page .pagination li a {
        min-width: 42px;
        height: 42px;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #20242c !important;
        background-color: #fff !important;
        border: 1px solid #dfe2e8 !important;
        border-radius: 8px !important;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        text-decoration: none !important;
    }

    .kartify-blog-page ul.pagination li a:hover,
    .kartify-blog-page .pagination li a:hover {
        color: #ff9900 !important;
        border-color: #ff9900 !important;
    }

    .kartify-blog-page ul.pagination li.active a,
    .kartify-blog-page .pagination li.active a {
        color: #fff !important;
        background-color: #ff9900 !important;
        border-color: #ff9900 !important;
    }

    /* --- Sayfa genisletme: anasayfa (69/70), kategori (107), urun detay
       (155), sepet (173) ve uye giris (179) ile ayni olculer. --- */
    @media (min-width: 1200px) and (max-width: 1920px) {
        #kartify-blog-wrapper .custom-container {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
            padding-right: 10px !important;
            padding-left: 10px !important;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        #kartify-blog-wrapper .custom-container {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
            padding-right: 5px !important;
            padding-left: 5px !important;
        }
    }

    @media (max-width: 991.98px) {
        #kartify-blog-wrapper .custom-container {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
            padding-right: 2px !important;
            padding-left: 2px !important;
        }
    }

    /* Paket 155/173'te ogrenilen yan etki: kapsayici ic boslugu Bootstrap
       satirinin negatif kenar boslugundan kucuk kalinca yatay kaydirma
       cubugu cikiyordu. */
    #kartify-blog-wrapper .custom-container > .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }