/* ============================================
   PH Yazılım - Yazılımlar Sayfası CSS
   Tüm stiller .yazilimlar scope altında.
   ============================================ */


/* ============================================
   PATHS HERO — Kompakt animasyonlu SVG hero
   Açılış: büyük → 2 sn'de toplanır (kibar karşılama)
   Renkler: neon turkuaz
   ============================================ */
/* PERDE: bant tepeye yapışır, .perde-icerik üzerine kayar (style.css + perde.js) */
.yazilimlar .paths-hero {
    position: sticky;
    top: 0;
    z-index: 0;
    background: linear-gradient(135deg, #07101f 0%, #0d1b2e 50%, #07101f 100%);
    padding: 280px 0 160px;      /* açılışta çok geniş — settle animasyonu küçültecek */
    overflow: hidden;
    animation: heroSettle 1.8s 2.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes heroSettle {
    to { padding: 130px 0 60px; }
}

/* Kategori SEÇİLİYKEN selamlama atlanır: hero doğrudan küçük hâlde açılır
   (kategori gezinmesinde her tıklamada 4 sn'lik dev hero beklenmesin). */
.yazilimlar .paths-hero.hero-sakin {
    padding: 130px 0 60px;
    animation: none;
}

/* Kategori çapasıyla (#urun-listesi) gelindiğinde başlık navbar'ın altına girmesin */
.yazilimlar .products-section {
    scroll-margin-top: 90px;
}

/* ════════════════════════════════════════════
   FALLING PATTERN — Düşen neon turkuaz pattern
   Saf CSS: radial-gradient + background-position
   ════════════════════════════════════════════ */
.yazilimlar .falling-pattern {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Merkezde fade-out → başlık net okunur, pattern kenarlarda */
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 5%, rgba(0,0,0,0.6) 60%, #000 100%);
    mask-image: radial-gradient(ellipse at center, transparent 5%, rgba(0,0,0,0.6) 60%, #000 100%);
}

/* Düşen çizgi/nokta katmanı */
.yazilimlar .falling-streaks {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(4px 100px at 0px 235px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 235px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 117.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 252px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 252px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 126px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 150px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 150px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 75px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 253px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 253px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 126.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 204px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 204px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 102px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 134px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 134px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 67px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 179px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 179px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 89.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 299px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 299px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 149.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 215px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 215px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 107.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 281px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 281px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 140.5px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 158px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 158px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 79px, #0dcaf0 100%, transparent 150%),
        radial-gradient(4px 100px at 0px 210px, #0dcaf0, transparent),
        radial-gradient(4px 100px at 300px 210px, #0dcaf0, transparent),
        radial-gradient(1.5px 1.5px at 150px 105px, #0dcaf0 100%, transparent 150%);
    background-size:
        300px 235px, 300px 235px, 300px 235px,
        300px 252px, 300px 252px, 300px 252px,
        300px 150px, 300px 150px, 300px 150px,
        300px 253px, 300px 253px, 300px 253px,
        300px 204px, 300px 204px, 300px 204px,
        300px 134px, 300px 134px, 300px 134px,
        300px 179px, 300px 179px, 300px 179px,
        300px 299px, 300px 299px, 300px 299px,
        300px 215px, 300px 215px, 300px 215px,
        300px 281px, 300px 281px, 300px 281px,
        300px 158px, 300px 158px, 300px 158px,
        300px 210px, 300px 210px, 300px 210px;
    background-position:
        0px 220px, 3px 220px, 151.5px 337.5px,
        25px 24px, 28px 24px, 176.5px 150px,
        50px 16px, 53px 16px, 201.5px 91px,
        75px 224px, 78px 224px, 226.5px 230.5px,
        100px 19px, 103px 19px, 251.5px 121px,
        125px 120px, 128px 120px, 276.5px 187px,
        150px 31px, 153px 31px, 301.5px 120.5px,
        175px 235px, 178px 235px, 326.5px 384.5px,
        200px 121px, 203px 121px, 351.5px 228.5px,
        225px 224px, 228px 224px, 376.5px 364.5px,
        250px 26px, 253px 26px, 401.5px 105px,
        275px 75px, 278px 75px, 426.5px 180px;
    /* Statik desen — sürekli background-position repaint'i kaldırıldı (perf). */
}

@keyframes fallingStreaks {
    to {
        background-position:
            0px 6800px, 3px 6800px, 151.5px 6917.5px,
            25px 13632px, 28px 13632px, 176.5px 13758px,
            50px 5416px, 53px 5416px, 201.5px 5491px,
            75px 17175px, 78px 17175px, 226.5px 17301.5px,
            100px 5119px, 103px 5119px, 251.5px 5221px,
            125px 8428px, 128px 8428px, 276.5px 8495px,
            150px 9876px, 153px 9876px, 301.5px 9965.5px,
            175px 13391px, 178px 13391px, 326.5px 13540.5px,
            200px 14741px, 203px 14741px, 351.5px 14848.5px,
            225px 18770px, 228px 18770px, 376.5px 18910.5px,
            250px 5082px, 253px 5082px, 401.5px 5161px,
            275px 6375px, 278px 6375px, 426.5px 6480px;
    }
}

/* Üst halftone nokta katmanı — pattern'i nokta nokta gösterir */
.yazilimlar .falling-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, #07101f 2px);
    background-size: 14px 14px;
    pointer-events: none;
}

/* ── Üst & alt karartma overlay'leri ── */
.yazilimlar .paths-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(7,16,31,0.45) 0%, transparent 25%, transparent 75%, rgba(7,16,31,0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── İçerik — kibar karşılama: önce çok büyük, sonra toplanır ── */
.yazilimlar .paths-content {
    position: relative;
    z-index: 5;
    text-align: center;
    transform-origin: center top;
    will-change: transform;
    animation: pathsContentShow 4.5s 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes pathsContentShow {
    0%   { opacity: 0; transform: scale(1.5) translateY(30px); }
    18%  { opacity: 1; transform: scale(1.5) translateY(0); }
    60%  { opacity: 1; transform: scale(1.5) translateY(0); }   /* "şov" bekleme — uzun */
    100% { opacity: 1; transform: scale(1) translateY(0); }      /* yumuşak toplanma */
}

/* ════════════════════════════════════════════
   Zayıf cihaz / kullanıcı tercihi: animasyonları kapat
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .yazilimlar .paths-hero,
    .yazilimlar .paths-content,
    .yazilimlar .falling-streaks {
        animation: none !important;
        opacity: 1;
    }
    .yazilimlar .paths-hero    { padding: 130px 0 60px; }
    .yazilimlar .paths-content { transform: none; }
}

/* Breadcrumb */
.yazilimlar .breadcrumb          { background: none; padding: 0; margin: 0; }
.yazilimlar .breadcrumb-item a   { color: rgba(255,255,255,0.45); font-weight: 500; text-decoration: none; transition: color 0.2s; font-size: 0.88rem; }
.yazilimlar .breadcrumb-item a:hover  { color: #fff; }
.yazilimlar .breadcrumb-item.active   { color: rgba(255,255,255,0.30); font-size: 0.88rem; }
.yazilimlar .breadcrumb-item + .breadcrumb-item::before { content: '›'; color: rgba(255,255,255,0.25); }

/* Rozet */
.yazilimlar .paths-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(13,110,253,0.18);
    border: 1px solid rgba(13,110,253,0.35);
    color: #93c5fd;
    border-radius: 50px;
    padding: 6px 22px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* Ana başlık — kompakt ama gösterişli */
.yazilimlar .paths-title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    color: #f1f5f9;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 14px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.yazilimlar .paths-gradient {
    display: inline-block;
    margin-left: 12px;
    background: linear-gradient(135deg, #7dd3fc 0%, #0dcaf0 45%, #0d6efd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Açıklama */
.yazilimlar .paths-desc {
    font-size: 1.02rem;
    color: rgba(241,245,249,0.7);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
    font-weight: 400;
}


/* ============================================
   ÖDEME AVANTAJLARI BANNER
   ============================================ */
.yazilimlar .payment-banner {
    background: linear-gradient(135deg, #0d6efd 0%, #06b6d4 100%);
    padding: 26px 0;
    position: relative;
    overflow: hidden;
}

    .yazilimlar .payment-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%);
        pointer-events: none;
    }

/* GRID DEĞİL FLEX (27.07.2026): madde sayısı artık sabit değil — havale/taksit
   maddeleri panelden kapatılabiliyor (bkz. OdemeAvantajHelper). Sabit "1fr auto
   1fr auto 1fr" şablonunda bir madde eksilince kalan sütunlar boş kalıp bant
   sola yaslanıyordu. Flex'te madde sayısı kaç olursa olsun eşit paylaşır;
   beş maddeli bugünkü görünüm birebir aynıdır. */
.yazilimlar .payment-grid {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
}

.yazilimlar .payment-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    gap: 14px;
    color: #fff;
    opacity: 0;
    transform: translateY(15px);
}

    .yazilimlar .payment-item.animate-in {
        animation: yazFadeInUp 0.5s ease forwards;
    }

.yazilimlar .payment-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    backdrop-filter: blur(8px);
}

.yazilimlar .payment-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .yazilimlar .payment-text strong {
        font-size: 0.98rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 2px;
    }

    .yazilimlar .payment-text span {
        font-size: 0.78rem;
        color: rgba(255,255,255,0.78);
    }

.yazilimlar .payment-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,0.22);
}


/* ============================================
   KATEGORİ TABS + ÜRÜNLER
   ============================================ */
.yazilimlar .products-section {
    padding: 70px 0 90px;
    background: #f8fafc;
}

.yazilimlar .section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 10px;
}

.yazilimlar .section-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
}

.yazilimlar .text-gradient {
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.yazilimlar .category-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.yazilimlar .category-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    color: #475569;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,0.03);
}

    .yazilimlar .category-tab i {
        font-size: 1.05rem;
        color: #94a3b8;
        transition: color 0.25s ease;
    }

    .yazilimlar .category-tab:hover {
        border-color: #0d6efd;
        color: #0d6efd;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(13,110,253,0.12);
    }

        .yazilimlar .category-tab:hover i { color: #0d6efd; }

    .yazilimlar .category-tab.active {
        background: linear-gradient(135deg, #0d6efd, #0dcaf0);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 22px rgba(13,110,253,0.30);
    }

        .yazilimlar .category-tab.active i { color: #fff; }


/* ============================================
   ÜRÜN KARTI
   ============================================ */
.yazilimlar .product-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.35s ease;
    opacity: 0;
    transform: translateY(25px);
}

    .yazilimlar .product-card.animate-in {
        animation: yazFadeInUp 0.55s ease forwards;
    }

    .yazilimlar .product-card:hover {
        transform: translateY(-6px);
        border-color: rgba(13,110,253,0.25);
        box-shadow: 0 16px 40px rgba(15,23,42,0.10);
    }

.yazilimlar .product-image {
    position: relative;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .yazilimlar .product-image i {
        font-size: 4.2rem;
        opacity: 0.95;
        transition: transform 0.4s ease;
    }

    .yazilimlar .product-card:hover .product-image i {
        transform: scale(1.12) rotate(-4deg);
    }

.yazilimlar .product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    color: #1a1a2e;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 5px 12px;
    border-radius: 50px;
    text-transform: uppercase;
}

.yazilimlar .product-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.yazilimlar .product-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 10px;
}

.yazilimlar .product-desc {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 20px;
    flex: 1;
}

.yazilimlar .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.yazilimlar .product-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .yazilimlar .product-price .price-label {
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 500;
        letter-spacing: 0.3px;
        margin-bottom: 2px;
    }

    .yazilimlar .product-price .price-value {
        font-size: 1.3rem;
        font-weight: 800;
        color: #0d6efd;
        letter-spacing: -0.5px;
    }

        .yazilimlar .product-price .price-value small {
            font-size: 0.68rem;
            font-weight: 600;
            color: #94a3b8;
            margin-left: 3px;
        }

/* ── KAMPANYA FİYATI (28.07.2026) ─────────────────────────────────────────
   Ürüne indirimli fiyat girildiğinde kartta "kampanya fiyatı" büyük yazar,
   ALTINDA eski fiyat üstü çizili + yüzde rozeti durur.
   ⚠ Eski fiyat önce .price-value içinde soluk bir <small> idi (0.68rem,
   #94a3b8): okunmuyordu, "aslında şu kadardı" algısı oluşmuyordu. Boyut
   büyütüldü, renk koyulaştı ve çizgi kırmızıya alındı — indirim, yüzde
   rozetiyle birlikte ilk bakışta görülüyor. */
.yazilimlar .product-price .price-indirim-satir {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 3px;
}

.yazilimlar .product-price .price-eski {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

.yazilimlar .product-price .price-indirim-rozet {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.yazilimlar .product-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(13,110,253,0.25);
}

    .yazilimlar .product-btn:hover {
        color: #fff;
        transform: translateX(3px) scale(1.05);
        box-shadow: 0 8px 22px rgba(13,110,253,0.40);
    }


/* ============================================
   CTA
   ============================================ */
.yazilimlar .cta-section {
    padding: 90px 0;
    background: #0f172a;
    position: relative;
    overflow: hidden;
}

    .yazilimlar .cta-section::before {
        content: '';
        position: absolute;
        top: -60%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .yazilimlar .cta-section::after {
        content: '';
        position: absolute;
        bottom: -50%;
        left: -10%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(13,110,253,0.10), transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

.yazilimlar .cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

    .yazilimlar .cta-content h2 {
        font-size: 2.4rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 14px;
        letter-spacing: -1px;
    }

    .yazilimlar .cta-content p {
        font-size: 1.05rem;
        color: rgba(255,255,255,0.65);
        max-width: 520px;
        margin: 0 auto 32px;
        line-height: 1.7;
    }

.yazilimlar .cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.yazilimlar .btn-cta-primary {
    background: linear-gradient(135deg, #06b6d4, #0d6efd);
    color: #fff;
    padding: 14px 34px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .yazilimlar .btn-cta-primary:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(6,182,212,0.4);
    }

.yazilimlar .btn-cta-outline {
    background: transparent;
    color: #fff;
    padding: 14px 34px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid rgba(255,255,255,0.25);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .yazilimlar .btn-cta-outline:hover {
        color: #fff;
        border-color: rgba(255,255,255,0.8);
        transform: translateY(-3px);
    }


/* ============================================
   ANİMASYON
   ============================================ */
@keyframes yazFadeInUp {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .yazilimlar .paths-hero { padding: 110px 0 50px; }
    .yazilimlar .paths-title { font-size: clamp(1.8rem, 5vw, 2.6rem); }

    .yazilimlar .payment-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
    /* Dikey dizilimde flex-basis YÜKSEKLİĞE uygulanır — maddeler gereksiz uzar. */
    .yazilimlar .payment-item { flex: 0 0 auto; }
    .yazilimlar .payment-divider { display: none; }
}

@media (max-width: 767.98px) {
    .yazilimlar .paths-hero { padding: 100px 0 40px; }
    .yazilimlar .paths-title { font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: -0.5px; }
    .yazilimlar .paths-gradient { display: block; margin-left: 0; margin-top: 4px; }
    .yazilimlar .paths-desc  { font-size: 0.92rem; }

    .yazilimlar .products-section,
    .yazilimlar .cta-section { padding: 50px 0; }

    .yazilimlar .section-title { font-size: 1.7rem; }

    .yazilimlar .category-tab {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    .yazilimlar .cta-content h2 { font-size: 1.8rem; }
    .yazilimlar .cta-buttons { flex-direction: column; align-items: center; }
}

@media (max-width: 575.98px) {
    .yazilimlar .paths-hero { padding: 90px 0 36px; }
    .yazilimlar .paths-badge { font-size: 0.68rem; padding: 5px 16px; letter-spacing: 1.5px; }

    .yazilimlar .payment-item { justify-content: flex-start; }
    .yazilimlar .product-image { height: 140px; }
    .yazilimlar .product-image i { font-size: 3.3rem; }
}


/* ===== KARANLIK TEMA — Yazılımlar ===== */
/* Yalnızca AÇIK yüzeyler çevrilir. Koyu hero, marka gradyanlı banner,
   koyu CTA bölümü ve tüm marka renkleri/gradyanları olduğu gibi bırakıldı. */

/* Ürünler bölümü — açık zemin (#f8fafc) → alternatif koyu zemin */
[data-bs-theme="dark"] .yazilimlar .products-section {
    background: var(--darker-bg);
}

/* Bölüm başlığı / alt başlık */
[data-bs-theme="dark"] .yazilimlar .section-title {
    color: var(--text-color);
}

[data-bs-theme="dark"] .yazilimlar .section-subtitle {
    color: var(--text-muted);
}

/* Kategori tab'ları — beyaz kart → surface */
[data-bs-theme="dark"] .yazilimlar .category-tab {
    background: var(--surface);
    border-color: var(--surface-border);
    color: var(--text-muted);
    box-shadow: var(--shadow-soft);
}

[data-bs-theme="dark"] .yazilimlar .category-tab i {
    color: var(--text-muted);
}

/* Hover ve aktif (marka gradyanlı) durum değiştirilmedi — marka renkleri korunur */

/* Ürün kartı — beyaz kart → surface */
[data-bs-theme="dark"] .yazilimlar .product-card {
    background: var(--surface);
    border-color: var(--surface-border);
}

[data-bs-theme="dark"] .yazilimlar .product-card:hover {
    border-color: rgba(13,110,253,0.35);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Ürün rozeti — açık yarı saydam zemin → koyu surface */
[data-bs-theme="dark"] .yazilimlar .product-badge {
    background: rgba(13,28,48,0.85);
    color: var(--text-color);
}

/* Ürün metinleri */
[data-bs-theme="dark"] .yazilimlar .product-title {
    color: var(--text-color);
}

[data-bs-theme="dark"] .yazilimlar .product-desc {
    color: var(--text-muted);
}

/* Kart alt ayraç çizgisi */
[data-bs-theme="dark"] .yazilimlar .product-footer {
    border-top-color: var(--surface-border);
}

/* Fiyat yardımcı metinleri (etiket + birim) — gri → muted.
   .price-value marka mavisi olduğu için dokunulmadı. */
[data-bs-theme="dark"] .yazilimlar .product-price .price-label,
[data-bs-theme="dark"] .yazilimlar .product-price .price-value small {
    color: var(--text-muted);
}

/* Kampanya fiyatı — koyu zeminde #64748b okunmuyor, bir ton açılır.
   Üstündeki kırmızı çizgi ve yeşil rozet iki temada da aynı kalır: ikisi de
   anlam taşıyan renkler (indirim), tema rengi değil. */
[data-bs-theme="dark"] .yazilimlar .product-price .price-eski {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .yazilimlar .product-price .price-indirim-rozet {
    background: rgba(74, 222, 128, 0.14);
    border-color: rgba(74, 222, 128, 0.35);
    color: #4ade80;
}