/**
 * shop.css — Ürün kataloğu (woocommerce/archive-product.php): mağaza + kategori (TEK tasarım).
 *
 * Ürün kartı (.product-card / .product-grid) product.css'ten gelir (birlikte enqueue).
 * Burada: sayfa düzeni (kenar çubuğu + ana alan), kategori filtresi, araç çubuğu,
 * anahtar-kelime arama kutusu, sayfalama. Genel sınıflar yeniden tanımlanmaz.
 */

.shop { padding-block: clamp(var(--space-8), 4vw, var(--space-16)); }
.shop > .container { max-width: var(--container-xl); }

/* ═══════ Düzen: kenar çubuğu + ana alan ═══════ */
.shop__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
    align-items: start;
}

/* ── Kenar çubuğu (kategori filtresi) ── */
.shop__sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
/* ── Genel katalog kartı (kategori filtresinin ÜSTÜNDE) ──────────────────────
   Ürün sayfasındaki teknik doküman satırıyla aynı dil: geniş "aç" alanı +
   ondan ince bir çizgiyle ayrılmış indirme butonu.

   DÜZEN KARTIN KENDİ ENİNE GÖRE: kenar çubuğu masaüstünde 260px, ≤860px'te
   tam genişlik. Viewport sorgusuyla ayarlanamaz — aynı viewport'ta kart iki
   farklı genişlikte olabiliyor. Dar durumda yan yana düzen "General Catalogue"
   gibi uzun etiketlere yer bırakmıyordu (İngilizcede "DOWNLOAD" da uzun). */
.shop-catalog-wrap { container-type: inline-size; container-name: catalog; }

.shop-catalog {
    display: flex;
    align-items: stretch;
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-background);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.shop-catalog:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--color-navy) 50%, transparent);
}
.shop-catalog__open {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-4);
    color: var(--color-navy);
    text-decoration: none;
}
.shop-catalog__open > .icon:first-child {
    flex: 0 0 auto;
    box-sizing: content-box;
    font-size: 1.15rem;
    width: 1em; height: 1em;
    padding: .45em;
    border-radius: 10px;
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.shop-catalog__text { flex: 1 1 auto; min-width: 0; }
.shop-catalog__title {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    /* `anywhere` DEĞİL: min-content genişliğini tek harfe indirdiği için düzen
       sütuna hiç yer ayırmıyor ve kelime ortadan bölünüyordu ("Catalog|ue").
       `break-word` yalnız kelime gerçekten sığmazsa böler. */
    overflow-wrap: break-word;
}
.shop-catalog__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.shop-catalog__open > .icon:last-child {
    flex: 0 0 auto;
    color: var(--color-primary);
    opacity: .5;
    transition: transform var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default);
}
.shop-catalog:hover .shop-catalog__open > .icon:last-child { opacity: 1; transform: translate(2px, -2px); }
.shop-catalog__dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: var(--space-3);
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.shop-catalog__dl:hover,
.shop-catalog__dl:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}
.shop-catalog__dl .icon { font-size: 1.05rem; }

/* Dar kart (≈kenar çubuğu genişliği): yan yana düzende başlık sütununa
   ~70px kalıyordu. Alt alta geçilir — başlık tüm genişliği alır, indirme
   tam genişlikte ikinci satır olur (dokunma hedefi de büyür). */
@container catalog (max-width: 340px) {
    .shop-catalog { flex-direction: column; align-items: stretch; }
    .shop-catalog__open { padding-bottom: var(--space-3); }
    .shop-catalog__dl {
        flex-direction: row;
        gap: var(--space-2);
        padding: var(--space-3);
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
}

/* Container query desteklenmiyorsa (eski tarayıcı) kart yine kırılmasın:
   dar kenar çubuğunda etiket gizlenir, ikon + aria-label kalır. */
@supports not (container-type: inline-size) {
    @media (min-width: 861px) {
        .shop-catalog__dl span { display: none; }
    }
}

.shop-filter {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    background-color: var(--color-background);
}
.shop-filter__title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: var(--space-4);
}
.shop-filter__title .icon { color: var(--color-accent); }
.shop-filter__list { display: flex; flex-direction: column; gap: 2px; }
.shop-filter__link,
.shop-filter__sublink {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}
.shop-filter__link { font-weight: 600; }
.shop-filter__link:hover,
.shop-filter__sublink:hover { background-color: var(--color-surface); color: var(--color-primary); }
.shop-filter__link.is-active,
.shop-filter__sublink.is-active { background-color: var(--color-primary); color: #fff; }
.shop-filter__count {
    flex-shrink: 0; font-size: var(--text-xs); font-weight: 600;
    color: var(--color-text-muted);
}
.shop-filter__link.is-active .shop-filter__count,
.shop-filter__sublink.is-active .shop-filter__count { color: rgb(255 255 255 / 0.8); }
.shop-filter__sublist {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 var(--space-2) var(--space-3);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}
/* Alt kategoriler: varsayılan kapalı; üzerine gelince (veya aktif kategoride) animasyonla açılır. */
.shop-filter__item.has-subs > .shop-filter__sublist {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: max-height var(--duration-normal) var(--ease-default),
                margin var(--duration-normal) var(--ease-default),
                opacity var(--duration-normal) var(--ease-default);
}
.shop-filter__item.has-subs:hover > .shop-filter__sublist,
.shop-filter__item.has-subs:focus-within > .shop-filter__sublist,
.shop-filter__item.is-open > .shop-filter__sublist {
    max-height: 40rem;
    margin-top: 2px;
    margin-bottom: var(--space-2);
    opacity: 1;
}
.shop-filter__sublink { font-size: var(--text-xs); padding-block: var(--space-1); }

/* Alt kategori kutusu (archive-product.php basar) — yalnız mobilde görünür;
   masaüstünde kenar çubuğu listesi aktif dalın altlarını zaten açık gösterir. */
.shop-subcats { display: none; }

/* ── Ana alan ── */
.shop__toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.shop__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.shop__count strong { color: var(--color-navy); font-size: var(--text-base); }
.shop__search {
    display: inline-flex; align-items: center; gap: var(--space-2);
    flex: 1 1 280px; max-width: 380px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-background);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.shop__search:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.shop__search .icon { color: var(--color-text-muted); flex-shrink: 0; }
.shop__search input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-size: var(--text-sm); color: var(--color-text); }

.shop__products { margin-top: 0; }

/* Ürün ızgarası kategori sayfasında 3 sütun; kenar çubuğu daralttığı için */
.shop .product-grid { grid-template-columns: repeat(3, 1fr); }

.shop__noresults,
.shop__empty {
    padding-block: var(--space-16); text-align: center;
    color: var(--color-text-muted); font-size: var(--text-lg);
}
.shop__empty a,
.shop__noresults a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Sayfalama ── */
.shop__pagination { margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
.shop__pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.shop__pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-weight: 600; font-size: var(--text-sm); color: var(--color-text);
    transition: background-color var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
}
.shop__pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop__pagination .page-numbers.current { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.shop__pagination .page-numbers.dots { border-color: transparent; }

/* ── Kategori metni (ızgaranın altında) ──
   Ürünleri aşağı itmemek için hero'da yalnız ilk paragraf var; derinlik burada.
   Okunabilirlik için satır uzunluğu sınırlı — ızgara 3 sütun geniş, metin değil. */
.shop__copy {
    margin-top: clamp(var(--space-12), 6vw, var(--space-20));
    padding-top: clamp(var(--space-8), 4vw, var(--space-12));
    border-top: 1px solid var(--color-border);
}
.shop__copy-title {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700;
    color: var(--color-navy);
}
.shop__copy-body { max-width: 68ch; color: var(--color-text-muted); }
.shop__copy-body p { margin: 0 0 var(--space-4); line-height: 1.75; }
.shop__copy-body p:last-child { margin-bottom: 0; }
.shop__copy-body a {
    color: var(--color-primary); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
}

/* ── Duyarlı ── */
@media (max-width: 1100px) {
    .shop .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .shop__layout { grid-template-columns: 1fr; }
    .shop__sidebar { position: static; }
    .shop-filter__list { flex-flow: row wrap; }
    .shop-filter > .shop-filter__title { margin-bottom: var(--space-3); }
    .shop-filter__link { border: 1px solid var(--color-border); }
    .shop-filter__sublist { display: none; } /* pill listesinde alt kategori açılmaz — ayrı kutu var */
    /* Görüntülenen kategorinin alt kategorileri — filtrenin altında ayrı kutu */
    .shop-subcats { display: block; margin-top: var(--space-4); }
}
@media (max-width: 520px) {
    .shop .product-grid { grid-template-columns: 1fr 1fr; }
    .shop__search { max-width: none; }
}
@media (max-width: 400px) {
    /* Dar ekranda kartlar tek sütun — iki sütunda içerik okunmaz sıkışıyor */
    .shop .product-grid { grid-template-columns: 1fr; }
}