/* ════════════════════════════════════════════════════════════════════════════
   ÜRÜNLER — /Urunler liste sayfası (25.10.2026)

   Sayfa Yazılımlar'ın tasarımını AYNEN kullanır: yazilimlar.css önce yüklenir ve
   kapsayıcı ".yazilimlar urunler" sınıflarını birlikte taşır. Bu dosyada YALNIZ
   Ürünler'e özgü iki parça vardır:
     1) kategori sekmesindeki ürün sayısı rozeti  ("Yazıcılar  5")
     2) ürün fotoğraflı kart görseli (galerinin ilk karesi; yoksa simgeli zemin kalır)
   ⚠ Yazılımlar'da görünmesi gereken bir değişiklik buraya DEĞİL yazilimlar.css'e yazılır.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Kategori sekmesi: ürün sayısı ── */
.urunler .category-sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease;
}

    .urunler .category-tab:hover .category-sayi {
        background: rgba(13, 110, 253, 0.12);
        color: #0d6efd;
    }

    .urunler .category-tab.active .category-sayi {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

/* ── 2) Fotoğraflı ürün kartı ──
   Ürün görselleri çoğunlukla beyaz zeminli çekilir; görsel kırpılmadan (contain)
   kartın üst alanına sığdırılır. Simgeli kart (fotoğraf yoksa) yazilimlar.css'ten gelir. */
.urunler .product-image-foto {
    background: #fff;
    border-bottom: 1px solid #eef2f7;
}

    .urunler .product-image-foto img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 14px 18px;
        transition: transform 0.4s ease;
    }

.urunler .product-card:hover .product-image-foto img {
    transform: scale(1.05);
}


/* ===== KARANLIK TEMA — Ürünler ===== */
[data-bs-theme="dark"] .urunler .category-sayi {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}

[data-bs-theme="dark"] .urunler .category-tab.active .category-sayi {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Fotoğraf zemini koyu temada da AÇIK kalır: beyaz zeminli ürün fotoğrafı koyu kutuda
   "yamalı" görünürdü. Kenar çizgisi temaya uyar. */
[data-bs-theme="dark"] .urunler .product-image-foto {
    background: #f8fafc;
    border-bottom-color: var(--surface-border);
}