/* Kategori sayfasi urun listesi + sayfalama (2026-08-08).
   Yalniz urun bolumu render edildiginde yuklenir (Category.cshtml StylesBottom).
   nest-blog.css'e BILEREK baglanmadi: 77 KB'lik blog paketini kategoriye tasimamak icin
   sayfalama stilleri kt- onekiyle kendi kendine yeterli kopyalandi (CSS degiskeni yok). */

.category-products {
    padding: 2.5rem 0 3rem;
}

/* --- Bolum basligi (blog bl-bolum deseninin kt- kopyasi; degerler literal,
   --bl-* degiskenleri BILEREK kullanilmadi - nest-blog.css yuklenmiyor) --- */
.kt-bolum {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.35rem;
}

.kt-bolum__ad {
    margin: 0;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1f1f1f;
}

.kt-bolum__cizgi {
    flex: 1 1 auto;
    height: 7px;
    background-image: repeating-linear-gradient(135deg, #c9c9c4 0 1px, transparent 1px 5px);
}

.kt-urunler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem 1.25rem;
    margin-top: 1.5rem;
}

/* Baslik basildiginda grid'in kendi ust bosluguna gerek yok (cift bosluk olmasin). */
.kt-bolum + .kt-urunler {
    margin-top: 0;
}

/* --- Urun karti: AramaStokSonucCard'in GORSEL DILI (cerceveli gorsel, "Urunu Incele"
   hapi, ince ayirici, kod+kisa ad) - isaretlemesi DEGIL (orada 3x href; burada tek <a>).
   Degerler arama kartinin computed CSS'inden birebir olculdu. --- */
.kt-urun__box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    height: 100%;
    text-align: start;
    text-decoration: none;
    color: #000;
}

    .kt-urun__box:hover {
        color: #000;
    }

.kt-urun__cerceve {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid #F2F2F2;
    border-radius: 15px;
    background: transparent;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .kt-urun__cerceve img {
        width: 200px;
        max-width: 88%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

.kt-urun__box:hover .kt-urun__cerceve {
    background: #fff;
    box-shadow: 0 10px 10px 0 #00000013;
}

.kt-urun__btn {
    align-self: flex-start;
    padding: 0.65rem 0.9rem;
    border-radius: 5px;
    background: #F6F6F6;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #000;
    transition: background-color .15s ease, color .15s ease;
}

.kt-urun__box:hover .kt-urun__btn {
    background: #d32f2f;
    color: #fff;
}

.kt-urun__hr {
    height: 1px;
    background: #dfdfdf;
}

.kt-urun__kod {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

.kt-urun__ad {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
}

/* --- Sayfalama (blog bl-sayfalama deseninin bagimsiz kopyasi) --- */
.kt-sayfalama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #1a1a1a;
}

.kt-sayfalama__durum {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.kt-sayfalama__durum-deger {
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.kt-sayfalama__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .kt-sayfalama__liste a,
    .kt-sayfalama__aktif,
    .kt-sayfalama__bosluk {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        border: 1px solid transparent;
        font-size: 0.85rem;
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        text-decoration: none;
        color: #333;
    }

        .kt-sayfalama__liste a:hover {
            border-color: #1a1a1a;
            color: #1a1a1a;
        }

.kt-sayfalama__aktif {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.kt-sayfalama__bosluk {
    min-width: 1.5rem;
    color: #8a8a8a;
}

.kt-sayfalama__liste .kt-sayfalama__ok {
    padding-inline: 0.85rem;
    border-color: #d9d9d9;
    background-color: #f7f7f7;
}

    .kt-sayfalama__liste .kt-sayfalama__ok:hover {
        border-color: #b30000;
        color: #b30000;
    }