.dtk-shop {
            --primary: var(--bronze, #f76b07); /* tema vurgusu (2026-10-15 kullanıcı kararı; önceden sabit turuncu) */
            --text-dark: #333333;
            --text-muted: #777777;
            --border: #eeeeee;
            --bg-light: #f9f9f9;
        }

        .dtk-shop * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        /* KRİTİK DÜZELTME: aynı ikon-font ezme sorunu burada da var — bkz.
           shop-single-scoped.css'teki açıklama. */
        .dtk-shop .fa, .dtk-shop .fas, .dtk-shop .far,
        .dtk-shop .fal, .dtk-shop .fab, .dtk-shop .fa-brands, .dtk-shop .fa-solid, .dtk-shop .fa-regular, .dtk-shop [class*=" fa-"] {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
        }
        .dtk-shop .fas { font-weight: 900 !important; }
        .dtk-shop .fab, .dtk-shop .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
        .dtk-shop body { color: var(--text-dark); background-color: #fff; }
        .dtk-shop a { text-decoration: none; color: inherit; }
        .dtk-shop ul { list-style: none; }
        .dtk-shop img { max-width: 100%; height: auto; display: block; }
        .dtk-shop .container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

        /* Topbar */
        .dtk-shop .topbar { background: #111; color: #fff; font-size: 12px; padding: 10px 0; }
        .dtk-shop .topbar .container { display: flex; justify-content: space-between; align-items: center; }
        .dtk-shop .topbar-left span, .dtk-shop .topbar-right a { margin-right: 15px; color: #ccc; }

        /* Header */
        .dtk-shop .header-main { padding: 20px 0; border-bottom: 1px solid var(--border); }
        .dtk-shop .header-main .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
        .dtk-shop .logo { font-size: 28px; font-weight: 800; letter-spacing: -1px; color: #111; }
        .dtk-shop .logo span { color: var(--primary); }
        
        .dtk-shop .search-bar { flex: 1; max-width: 500px; display: flex; border: 2px solid var(--primary); border-radius: 4px; overflow: hidden; }
        .dtk-shop .search-bar input { width: 100%; padding: 12px; border: none; outline: none; }
        .dtk-shop .search-bar button { background: var(--primary); color: #fff; border: none; padding: 0 20px; cursor: pointer; }
        
        .dtk-shop .header-actions { display: flex; gap: 20px; align-items: center; font-size: 14px; font-weight: 600; }
        
        /* Navigation */
        .dtk-shop .main-nav { border-bottom: 1px solid var(--border); }
        .dtk-shop .main-nav ul { display: flex; justify-content: center; gap: 30px; padding: 15px 0; font-weight: 600; font-size: 14px; }
        .dtk-shop .main-nav a:hover { color: var(--primary); }

        /* Page Title */
        .dtk-shop .page-title { background: var(--bg-light); padding: 40px 0; text-align: center; margin-bottom: 40px; }
        .dtk-shop .page-title h1 { font-size: 32px; margin-bottom: 10px; text-transform: uppercase; }
        .dtk-shop .breadcrumb { font-size: 13px; color: var(--text-muted); }

        /* Main Layout */
        .dtk-shop .shop-layout { display: flex; gap: 30px; margin-bottom: 60px; }
        .dtk-shop .sidebar { width: 25%; }
        /* KRİTİK DÜZELTME: site genelindeki bare "main{max-width:880px}"
           kuralı, bu <main class="main-content"> elemanını da (herhangi bir
           <main> etiketi olduğu için) etkiliyordu — width:75% hesaplansa
           bile 880px'te tavan yapıyordu. Blog'da bulduğum "yapı dar"
           hatasıyla AYNI kök nedendi, burada da açıkça geçersiz kılıyoruz. */
        .dtk-shop .main-content { width: 75%; max-width: none; margin: 0; padding: 0; }

        /* Sidebar Widgets */
        .dtk-shop .widget { margin-bottom: 40px; }
        .dtk-shop .widget-title { font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
        .dtk-shop .category-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); cursor: pointer; }
        .dtk-shop .category-list li:hover { color: var(--primary); }
        
        .dtk-shop .top-rated-item { display: flex; gap: 15px; margin-bottom: 20px; }
        .dtk-shop .top-rated-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; }
        .dtk-shop .top-rated-info h4 { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
        .dtk-shop .stars { color: var(--primary); font-size: 12px; margin-bottom: 5px; }
        .dtk-shop .price { font-weight: 700; color: #111; }

        /* Toolbar */
        .dtk-shop .shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 14px; }
        .dtk-shop .shop-toolbar select { padding: 8px; border: 1px solid var(--border); border-radius: 4px; }

        /* Products Grid */
        .dtk-shop .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .dtk-shop .product-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; position: relative; transition: 0.3s; text-align: center; padding-bottom: 20px; }
        .dtk-shop .product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        
        /* Turuncu Badge */
        .dtk-shop .badge { position: absolute; top: 15px; left: 15px; background: var(--primary); color: #fff; padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: 4px; z-index: 2; }
        
        .dtk-shop .product-img { position: relative; height: 250px; overflow: hidden; margin-bottom: 15px; }
        .dtk-shop .product-img img { width: 100%; height: 100%; object-fit: cover; }
        
        .dtk-shop .product-category { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; display: block; }
        .dtk-shop .product-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0 15px; }
        .dtk-shop .product-price { font-weight: 700; color: #111; font-size: 16px; }
        .dtk-shop .product-price del { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-right: 5px; }

        /* Mobile Responsive */
        @media (max-width: 992px) {
            .dtk-shop .shop-layout { flex-direction: column; }
            .dtk-shop .sidebar { width: 100%; }
            .dtk-shop .main-content { width: 100%; }
            .dtk-shop .products-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .dtk-shop .topbar { display: none; }
            .dtk-shop .header-main .container { flex-direction: column; }
            .dtk-shop .search-bar { width: 100%; }
            .dtk-shop .products-grid { grid-template-columns: 1fr; }
            .dtk-shop .main-nav ul { flex-wrap: wrap; gap: 15px; }
        }

        /* ================= FAZ 2f: Kategori Tam Sayfa Hero ================= */
        .dtk-shop .dtk-cat-hero {
            position: relative; width: 100%; min-height: 340px; display: flex; align-items: center;
            background: #1a1a1a; padding: 60px 24px; overflow: hidden;
        }
        .dtk-shop .dtk-cat-hero__bg-img {
            position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
        }
        .dtk-shop .dtk-cat-hero__overlay {
            position: absolute; inset: 0; z-index: 0;
            background: linear-gradient(rgba(15,15,15,.55), rgba(15,15,15,.75));
        }
        .dtk-shop .dtk-cat-hero__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; width: 100%; color: #fff; }
        .dtk-shop .dtk-cat-hero__crumb { font-size: 12.5px; color: #cfcfcf; margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
        .dtk-shop .dtk-cat-hero__crumb a { color: #cfcfcf; text-decoration: none; }
        .dtk-shop .dtk-cat-hero__crumb a:hover { color: var(--primary); }
        .dtk-shop .dtk-cat-hero__crumb-sep { color: #6b6b6b; }
        .dtk-shop .dtk-cat-hero__crumb-current { color: var(--primary); font-weight: 600; }
        .dtk-shop .dtk-cat-hero h1 { font-size: 2.75rem; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
        .dtk-shop .dtk-cat-hero__bluf { font-size: 16px; color: #e5e5e5; max-width: 640px; line-height: 1.6; margin: 0 0 32px; }
        .dtk-shop .dtk-cat-hero__icons { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 16px; }
        .dtk-shop .dtk-cat-hero__icon-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 130px; }
        .dtk-shop .dtk-cat-hero__icon-item i { font-size: 26px; color: var(--primary); }
        .dtk-shop .dtk-cat-hero__icon-item img { filter: brightness(0) saturate(100%) invert(53%) sepia(76%) saturate(1200%) hue-rotate(340deg); }
        .dtk-shop .dtk-cat-hero__icon-item span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; line-height: 1.4; }

        .dtk-shop .dtk-cat-subnav { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
        /* DÜZELTME: "overflow-x: auto" burada VARDI (dar ekranlarda pill
           butonlarının yatay kaydırılabilmesi için eklenmişti) — ama CSS
           kuralı gereği, bir eksende overflow "visible" dışına çıkınca
           tarayıcı DİĞER ekseni de otomatik kırpıyor. Sonuç: dropdown
           menüsü (position:absolute ile aşağı doğru taşan) bu kutunun
           SINIRLARINDA kesiliyordu — ekran görüntüsünde görülen "gri
           alanın altında kalma" tam olarak buydu. flex-wrap:wrap zaten
           dar ekranlarda pilleri alt satıra geçirdiği için yatay scroll'a
           hiç gerek yoktu, overflow-x güvenle kaldırıldı.
        */
        .dtk-shop .dtk-cat-subnav__inner { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; gap: 10px; flex-wrap: wrap; }
        .dtk-shop .dtk-cat-subnav__pill {
            display: inline-block; padding: 8px 18px; border-radius: 20px; font-size: 12px; font-weight: 700;
            letter-spacing: .02em; white-space: nowrap; text-decoration: none; color: var(--text-dark);
            background: #f4f4f4; transition: .2s; text-transform: uppercase; /* dile duyarlı (html lang): tr'de i → İ */
        }
        .dtk-shop .dtk-cat-subnav__pill:hover { background: #e8e8e8; }
        .dtk-shop .dtk-cat-subnav__pill.is-active { background: #111; color: #fff; }

        /* "TÜM KATEGORİLER" açılır menü */
        .dtk-shop .dtk-cat-dropdown { position: relative; }
        .dtk-shop .dtk-cat-subnav__pill--dropdown { background: var(--primary); color: #fff; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
        .dtk-shop .dtk-cat-dropdown__arrow { font-size: 9px; transition: transform .2s; }
        .dtk-shop .dtk-cat-dropdown.is-open .dtk-cat-dropdown__arrow { transform: rotate(180deg); }
        .dtk-shop .dtk-cat-dropdown__menu {
            display: none; position: absolute; top: calc(100% + 8px); left: 0; background: #fff;
            border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
            min-width: 240px; max-height: 360px; overflow-y: auto; z-index: 200; padding: 8px;
        }
        .dtk-shop .dtk-cat-dropdown.is-open .dtk-cat-dropdown__menu { display: block; }
        .dtk-shop .dtk-cat-dropdown__menu a {
            display: block; padding: 10px 14px; border-radius: 6px; color: var(--text-dark); text-decoration: none;
            font-size: 13px; font-weight: 600; transition: background .15s;
        }
        .dtk-shop .dtk-cat-dropdown__menu a:hover { background: #f4f4f4; }
        .dtk-shop .dtk-cat-dropdown__menu a.is-current { background: var(--primary); color: #fff; }

        /* GÜNCELLEME: kullanıcı netleştirdi — masaüstünde 4, mobilde 2. */
        .dtk-shop .dtk-cat-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

        .dtk-shop .dtk-cat-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
        .dtk-shop .dtk-cat-toolbar__count { font-size: 14px; color: var(--text-muted); }
        .dtk-shop .dtk-cat-toolbar__search { display: flex; gap: 6px; }
        .dtk-shop .dtk-cat-toolbar__search input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; min-width: 220px; font-family: 'Inter', sans-serif; }
        .dtk-shop .dtk-cat-toolbar__search button { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
        .dtk-shop .dtk-cat-grid4 .product-card { border-radius: 10px; }
        .dtk-shop .dtk-cat-grid4 .product-img { height: 220px; }
        .dtk-shop .dtk-cat-grid4__btn {
            display: block; width: calc(100% - 30px); margin: 0 15px 15px; padding: 10px; text-align: center;
            background: #111; color: #fff; border: none; border-radius: 4px; font-size: 12px; font-weight: 700;
            letter-spacing: .04em; cursor: pointer; transition: .2s;
        }
        .dtk-shop .dtk-cat-grid4__btn:hover { background: var(--primary); }

        @media (max-width: 992px) {
            .dtk-shop .dtk-cat-hero { min-height: 280px; padding: 40px 20px; }
        }
        @media (max-width: 600px) {
            .dtk-shop .dtk-cat-hero { padding: 32px 16px; min-height: auto; }
            .dtk-shop .dtk-cat-hero h1 { font-size: 1.65rem; margin-bottom: 10px; }
            .dtk-shop .dtk-cat-hero__crumb { font-size: 11px; margin-bottom: 12px; }
            .dtk-shop .dtk-cat-hero__bluf { font-size: 14px; max-width: 100%; margin-bottom: 20px; }
            .dtk-shop .dtk-cat-hero__icons { gap: 16px; }
            .dtk-shop .dtk-cat-hero__icon-item { max-width: 100px; }
            .dtk-shop .dtk-cat-hero__icon-item span { font-size: 10px; }
            .dtk-shop .dtk-cat-grid4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .dtk-shop .dtk-cat-subnav__inner { padding: 10px 16px; }
            .dtk-shop .dtk-cat-dropdown__menu { min-width: 200px; left: 0; right: auto; }
            .dtk-shop .dtk-cat-toolbar { flex-direction: column; align-items: stretch; }
            .dtk-shop .dtk-cat-toolbar__search { width: 100%; }
            .dtk-shop .dtk-cat-toolbar__search input { flex: 1; min-width: 0; }
        }

        /* Kategori açıklaması — sayfanın en altında, SEO/GEO içeriği.
           350 kelimeyi aşan uzun açıklamalarda sabit yükseklikte scroll'a
           geçilir (sayfa aşırı uzamasın diye, kullanıcı isteği üzerine).
           HATA DÜZELTMESİ: önceden max-width:900px kullanıyordu — bu,
           .container'ın (1320px, 24px yatay padding — başlık ve ürün
           listesinin kullandığı AYNI genişlik sistemi) sol/sağ kenarlarıyla
           HİZALI DEĞİLDİ. Artık .container ile birebir aynı dış genişlik
           kullanıyor — "kart" görünümü (arka plan, border) korunuyor, box-
           sizing:border-box sayesinde padding genişliğe eklenmeden dış
           kenarlar sayfanın geri kalanıyla tam hizalı kalıyor. */
        .dtk-shop .category-description {
            box-sizing: border-box;
            max-width: 1320px;
            margin: 48px auto 32px;
            padding: 28px 24px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 10px;
            font-size: 14.5px;
            line-height: 1.75;
            color: #444;
        }
        .dtk-shop .category-description p:last-child { margin-bottom: 0; }
        .dtk-shop .category-description--scroll {
            max-height: 420px;
            overflow-y: auto;
        }
        /* HATA DÜZELTMESİ: dtk-editor.js'teki görsel araç çubuğunun sol/sağ/
           orta/tam-genişlik butonları .dtk-img-left/center/right/full CSS
           class'ları ekliyor (style="float:..." DEĞİL — WAF'ın style'a
           tepkisinden kaçınmak için bilinçli tasarım, bkz. dtk-editor.js) —
           ama bu class'lar önceden SADECE blog-single-scoped.css'te
           tanımlıydı, kategori sayfasında hiç karşılığı yoktu (buton
           tıklanıyor, class ekleniyor, hiçbir görsel etki olmuyordu).
           blog-single-scoped.css'teki AYNI kurallar. */
        .dtk-shop .category-description .dtk-img-left { float: left; margin: 4px 16px 12px 0; }
        .dtk-shop .category-description .dtk-img-right { float: right; margin: 4px 0 12px 16px; }
        .dtk-shop .category-description .dtk-img-center { display: block; margin: 12px auto; }
        .dtk-shop .category-description .dtk-img-full { display: block; width: 100% !important; height: auto !important; margin: 12px 0; }