/* NOT (2026-09-08 — baslik seviyesi duzeltmesiyle birlikte): Kart basliklari h3'ten
   h2'ye cekildi (sayfada h1'den sonra dogrudan h3 geliyordu, HTML validator "1 baslik
   seviyesi atlanir" hatasi veriyordu). Bu dosyadaki kurallar ETIKET uzerinden secim
   yaptigi icin secicilere h2 de eklendi. ":is(h2, h3)" yazildi, eski etiket de kapsamda
   kalsin diye — bir yerde h3 kaldiysa gorunum bozulmaz. */

.h2, h2 {
    font-size: 38px;
    line-height: 1.227;
}
.arck-blog-content {
    padding-top: 65px;
}

.arck-blog-item, .arck-blog-item-2 {
    margin-bottom: 32px;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.tek-col {
    min-height: 270px;
    padding: 25px 20px !important;
}

.arck-blog-item .inner-img, .arck-blog-item-2 .inner-img {
    overflow: hidden;
    aspect-ratio: 413 / 383;
}

    .arck-blog-item .inner-img img, .arck-blog-item-2 .inner-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 500ms ease;
    }

.arck-blog-item:hover .inner-img img, .arck-blog-item-2:hover .inner-img img {
    transform: scale(1.1);
}

.arck-blog-item .inner-text, .arck-blog-item-2 .inner-text {
    padding: 30px 25px 28px;
    display: flex;
    flex-direction: column;
}

.arck-blog-item-2 .inner-text {
    padding-right: 30px;
}

    .arck-blog-item .inner-text :is(h2, h3), .arck-blog-item-2 .inner-text :is(h2, h3) {
        font-size: 21px;
        font-weight: 600;
        line-height: 1.333;
        padding-bottom: 25px;
        color: #000;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 71px;
    }

        .arck-blog-item .inner-text :is(h2, h3) a, .arck-blog-item-2 .inner-text :is(h2, h3) a {
            color: #000;
            text-decoration: none;
        }

        .arck-blog-item .inner-text :is(h2, h3):hover a, .arck-blog-item-2 .inner-text :is(h2, h3):hover a {
            color: #D28F51;
        }

    .arck-blog-item .inner-text p, .arck-blog-item-2 .inner-text p {
        line-height: 1.875;
        padding-bottom: 8px;
        color: #61625f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        min-height: 90px;
    }

    .arck-blog-item .inner-text .read-more-btn, .arck-blog-item-2 .inner-text .read-more-btn {
        color: #000;
        font-weight: 600;
        text-decoration: none;
        margin-top: auto;
    }

        .arck-blog-item .inner-text .read-more-btn i, .arck-blog-item-2 .inner-text .read-more-btn i {
            margin-right: 3px;
            transition: all 500ms ease;
        }

        .arck-blog-item .inner-text .read-more-btn:hover, .arck-blog-item-2 .inner-text .read-more-btn:hover {
            color: #D28F51;
        }

            .arck-blog-item .inner-text .read-more-btn:hover i, .arck-blog-item-2 .inner-text .read-more-btn:hover i {
                margin-right: 8px;
            }

.col-lg-4 {
    display: flex;
}

    .col-lg-4 > .arck-blog-item-2 {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .col-lg-4 > .arck-blog-item-2 .inner-text.tek-col {
            flex: 1;
        }

.blog-meta-1 {
    margin-bottom: 25px;
}

    .blog-meta-1 .blog-cat {
        color: #61625f;
        font-size: 15px;
        padding: 0;
        background-color: transparent;
        margin-left: 10px;
        font-weight: 700;
    }

/* NOT (2026-09-09 KONTRAST — Lighthouse /blog: "Background and foreground colors do not
   have a sufficient contrast ratio", hatali ogeler kart icindeki span'ler (tarih ve
   goruntulenme sayisi), kapsayici div.arck-blog-item / .arck-blog-item-2).
   OLCULDU: #9aa0b0 / beyaz = 2.62 : 1 — AA esigi 4.5. Bu "az kaliyor" degil, yarisi.
   #6c7282 -> 4.81 : 1. Ayni gri tonu korundu, yalnizca koyulastirildi.
   Ayni renk asagida .blog-detail-meta'da da vardi; o kural su an HICBIR markup tarafindan
   kullanilmiyor (arama yapildi, .cshtml'lerde gecmiyor) ama ileride canlandirilirsa ayni
   hatayi tasimasin diye o da duzeltildi. */
.blog-stats {
    font-size: 13px;
    color: #6c7282;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

    .blog-stats span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .blog-stats i {
        color: #D28F51;
    }

.pagination-custom .page-link {
    border-radius: 8px;
    margin: 0 4px;
    color: #4a5568;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
}

.pagination-custom .page-item.active .page-link {
    background: #4e73df;
    border-color: #4e73df;
    color: #fff;
}

.pagination-custom .page-item.disabled .page-link {
    color: #c1c7d0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
}

    .empty-state .empty-icon {
        font-size: 64px;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    .empty-state .empty-title {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a2e;
    }

    .empty-state .empty-text {
        color: #6c757d;
        margin-top: 8px;
    }

#blogDetailModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
}

#blogDetailModal .modal-header {
    border-bottom: none;
    padding: 15px 20px 0;
}

#blogDetailModal .modal-body {
    padding: 10px 30px 35px;
}

#blogDetailModal .blog-detail-loading {
    text-align: center;
    padding: 80px 20px;
    color: #6c757d;
}

.blog-detail-cover {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    aspect-ratio: 16 / 9;
}

    .blog-detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.blog-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: #6c7282; /* bkz. yukaridaki 2026-09-09 kontrast notu */
    margin-bottom: 12px;
}

    .blog-detail-meta i {
        color: #D28F51;
        margin-left: 4px;
    }

.blog-detail-category {
    background: #f4ede4;
    color: #D28F51;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
}

.blog-detail-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 18px;
}

.blog-detail-body {
    color: #4a4a4a;
    line-height: 1.9;
}

    .blog-detail-body img {
        max-width: 100%;
        height: auto;
    }

.blog-load-more {
    margin-top: 10px;
    margin-bottom: 60px;
}

#blogLoadMoreBtn {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color);
    border-radius: 50px;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: all .3s ease;
}

    #blogLoadMoreBtn:hover,
    #blogLoadMoreBtn:focus {
        background-color: var(--theme-dark);
        border-color: var(--theme-dark);
        color: var(--white-color);
    }

    #blogLoadMoreBtn:disabled {
        opacity: .7;
        cursor: not-allowed;
    }

#blogLoadMoreLoader {
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 600;
}

    #blogLoadMoreLoader i {
        margin-left: 6px;
    }


@media screen and (max-width: 1024px) {
    .arck-blog-item-2 .inner-text {
        padding: 45px 15px 40px;
    }
}

@media screen and (max-width: 991px) {
    .arck-blog-item, .arck-blog-item-2 {
        display: flex;
        margin: 0 auto;
        max-width: 770px;
        align-items: center;
        margin-bottom: 40px;
    }

    .arck-blog-item-wrapper .row {
        align-items: center;
    }
}

@media screen and (max-width: 767px) {
    .arck-blog-item, .arck-blog-item-2 {
        margin: 0 auto;
        display: block;
        max-width: 370px;
        margin-bottom: 40px;
        text-align: center;
    }

        .arck-blog-item .inner-text :is(h2, h3), .arck-blog-item-2 .inner-text :is(h2, h3) {
            font-size: 18px;
        }

    .tek-col {
        min-height: 200px;
        height: auto;
    }
}
/* ---------------------------------------------------------------------------
   NOT (2026-09-09 — MOBIL SATRANC DESENI / kart duzeni)

   SORUN: Blog ve Haber liste sayfalarinda kartlar bilerek "satranc" (zigzag)
   diziliyor: _BlogPostsGrid.cshtml / _HaberPostsGrid.cshtml icinde
   ImgFirstCard  -> .arck-blog-item    (once resim sutunu, sonra metin sutunu)
   TextFirstCard -> .arck-blog-item-2  (once metin sutunu, sonra resim sutunu)
   Genis ekranda bu YAN YANA iki sutun oldugu icin sag/sol donusumlu, guzel
   duruyor. 767px altinda kart "display: block" oluyor ve Bootstrap'in
   ".row > *" kurali sutunlari %100 gene cekiyor; sutunlar ALT ALTA diziliyor.
   O anda "solda/sagda" ayrimi kalmiyor, sirf DOM sirasi kaliyor: bir kartta
   resim ustte, bir sonrakinde altta. Desen degil, tutarsizlik gibi gorunuyor.

   COZUM: 767px altinda .arck-blog-item-2 icindeki resim sutununu (satirin
   IKINCI cocugu) order: -1 ile one aliyoruz. Boylece her kartta resim ustte.
   - Markup'a dokunulmadi: genis ekranda satranc deseni oldugu gibi duruyor.
   - flex-direction degistirilmedi; sadece order — sarma (wrap) davranisi
     bozulmasin diye.
   - StackedCard (col-lg-4 icindeki .arck-blog-item-2) bu kuraldan ETKILENMEZ:
     onun icinde .row yok, resim zaten dogrudan ilk cocuk.

   AYRICA baslik-tarih araligi: baslikta padding-bottom 25px + min-height 71px
   var (genis ekranda yan yana kartlarin basliklarini hizalamak icin). Tek
   sutuna dusunce bu bosluk islevini kaybediyor, tek satirlik basliklarda
   ~40px bos alan biraktigi olculdu (baslik alti -> .blog-stats ustu = 40px).
   Mobilde sifirlandi (olculdu: 40px -> 6px) ve .blog-stats ortalandi; kart
   zaten "text-align: center" oldugu icin sola yaslanmis tarih satiri
   ortadaki metne gore kacik duruyordu.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .arck-blog-item-2 > .row > .col-md-6:nth-child(2) {
        order: -1;
    }

    .arck-blog-item .inner-text :is(h2, h3),
    .arck-blog-item-2 .inner-text :is(h2, h3) {
        padding-bottom: 0;
        min-height: 0;
        margin-bottom: 6px;
    }

    .blog-stats {
        justify-content: center;
        margin-bottom: 14px;
    }
}