/* =========================================================
   CUSTOM.CSS – PAYİDAR YAPI MİMARLIK
   UI/UX düzeltmeleri ve görsel iyileştirmeler.
   Bu dosya kitecx.css / kitecx-responsive.css dosyalarından
   SONRA yüklenir, orijinal tema dosyalarına dokunmadan
   override eder. Geri almak için sadece head.php'deki
   <link> satırını kaldırmak yeterli.
   ========================================================= */

/* ---------------------------------------------------------
   1) PROJE LİSTE/GALERİ KARTLARI – GÖRSELLERİ EŞİT BOYUTA GETİR
   Sorun: .project-one__img > img sadece width:100% kullanıyordu,
   bu yüzden dikey/yatay fotoğraflar farklı yüksekliklere
   sahip oluyor ve grid düzensiz görünüyordu.
   Çözüm: Sabit en-boy oranı + object-fit: cover.
   Bu düzeltme; tüm proje listeleri (inşaat/mimarlık/
   danışmanlık/statik), galeri sayfası ve proje detay
   sayfalarındaki galerileri kapsar çünkü hepsi aynı
   .project-one__img sınıfını kullanıyor.
   --------------------------------------------------------- */
.project-one__img {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
}

.project-one__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 600ms ease;
}

.project-one__single:hover .project-one__img > img {
    transform: scale(1.06);
}

/* ---------------------------------------------------------
   1b) ANA SAYFA "PROJELERİMİZ" KARTLARI
   Aynı sorun ana sayfada farklı bir sınıfla (.news-one-img)
   tekrar ediyordu, aynı çözümü burada da uyguluyoruz.
   --------------------------------------------------------- */
.news-one-img {
    aspect-ratio: 4 / 3;
}

.news-one-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 600ms ease;
}

.news-one__single:hover .news-one-img > img {
    transform: scale(1.06);
}

/* ---------------------------------------------------------
   2) KART ARALARI VE GÖLGE
   Sorun: Kartlar arası boşluk sadece 2px, kartlar birbirine
   yapışık ve düz görünüyordu.
   --------------------------------------------------------- */
.project-one .row {
    --bs-gutter-x: 24px;
    row-gap: 24px;
}

.project-one__img-box {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
    transition: box-shadow 400ms ease, transform 400ms ease;
}

.project-one__single:hover .project-one__img-box {
    box-shadow: 0px 20px 45px 0px rgba(0, 0, 0, 0.16);
    transform: translateY(-4px);
}

/* Hover overlay içeriği de yeni border-radius ile uyumlu olsun */
.project-one__hover {
    border-radius: 6px;
    margin: 20px;
    padding: 30px;
}

/* ---------------------------------------------------------
   3) FİLTRE BUTONLARI (Tüm / Tamamlanmış / Devam Eden)
   Aktif/hover durumunu daha belirgin ve tıklanabilir hissettir.
   --------------------------------------------------------- */
#myBtnContainer .btn {
    cursor: pointer;
    border-radius: 30px;
    margin: 0 6px 10px;
    transition: all 300ms ease;
}

#myBtnContainer .btn:hover {
    color: var(--thm-primary);
}

/* ---------------------------------------------------------
   4) GALERİ SAYFASI KART BOŞLUKLARI
   --------------------------------------------------------- */
.portfolio-details-page-project .row {
    row-gap: 24px;
}

/* ---------------------------------------------------------
   5) SAYFALAMA (PAGINATION) – ORTALA
   Sorun (kök neden): jquery.simplePagination.js "simple-
   pagination light-theme" sınıflarını LI'leri saran <ul>'a
   değil, dışarıdaki #pagination_new DIV'ine ekliyor; gerçek
   <ul><li> yapısı sınıfsız/plain olarak DIV'in içine ekleniyor
   (bkz. assets/js/jquery.simplePagination.js, satır ~145).
   Bir önceki denemede ".simple-pagination { display:flex }"
   kuralı bu yüzden yanlış elemanı (dış DIV'i) etkiledi ve
   sayfa numaraları content-center + block <li> davranışıyla
   alt alta dizildi.
   Doğru hedef: ".simple-pagination > ul" (plugin'in oluşturduğu
   gerçek liste).
   --------------------------------------------------------- */
.simple-pagination {
    display: block;
    text-align: center;
}

.simple-pagination > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.simple-pagination > ul > li {
    float: none;
    list-style: none;
}

.simple-pagination a,
.simple-pagination span {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    min-width: 20px;
}

.simple-pagination .current {
    background: var(--thm-black);
    color: #fff;
    border-color: var(--thm-black);
}

/* ---------------------------------------------------------
   6) SEO: BAŞLIK HİYERARŞİSİ (H1)
   Sitede hiçbir sayfada <h1> yoktu (hepsi h2 ile başlıyordu).
   Sayfa başlığı bölümü (.page-header__inner) orijinal temada
   tag bazlı (h2) stillendiği için, PHP dosyalarındaki h2
   etiketini h1 yapıp buradaki kuralla aynı görünümü koruyoruz.
   --------------------------------------------------------- */
.page-header__inner h1 {
    font-size: 60px;
    color: #ffffff;
    line-height: 70px;
    font-weight: 400;
    text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
    .page-header__inner h1 {
        font-size: 30px;
        line-height: 40px;
    }
}