/*
 * Showcase Filter & Sort v1.0 (c8 teması)
 * NOT: Bu dosyada hiçbir yerde font-family EXPLICIT olarak site fontu
 * dışında bir değere ayarlanmıyor — ama <button>/<select>/<input>
 * tarayıcılarda VARSAYILAN OLARAK sayfa fontunu miras ALMAZ (kendi
 * platform UI fontunu kullanır), font-family:inherit YAZILMADIKÇA.
 * Panelde çoğu tetikleyici <button> olduğu için (Filtrele ve Sırala,
 * akordeon başlıkları, Ürünleri Göster) bunlar site fontundan FARKLI
 * bir fontla render oluyor, span/link'ler (varsayılan olarak miras
 * alan elemanlar) ise doğru fontta kalıp göze batan bir tutarsızlık
 * yaratıyordu. Aşağıdaki kural TÜM form elemanlarını (bu panel
 * kapsamında) sayfanın kendi fontuna zorluyor. */
.showcase2-toolbar button,
.showcase2-toolbar select,
.showcase2-filter-section button,
.showcase2-filter-section select,
.showcase2-filter-section input {
    font-family: inherit;
}

/* =========================================================
   1. TOOLBAR — web + mobil, sağa yaslı [breadcrumbs] [Filtrele ve Sırala]
   ========================================================= */
.showcase2-toolbar {
    margin-bottom: 16px;
    background: #fff;
}

.showcase2-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ORJ: flex-end — breadcrumbs solda, buton sağda olmalıydı */
    gap: 20px;
    flex-wrap: wrap;
}

/* Breadcrumbs'ın kendi .container'ı (yan padding'li) toolbar içinde
 * fazladan boşluk bırakıyordu; scope'lu olarak sıfırlanıyor. */
.showcase2-crumbs .breadcrumbs {
    margin: 0;
}
.showcase2-crumbs .breadcrumbs .container {
    padding: 0;
    width: auto;
}
.showcase2-crumbs .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* "Filtrele ve Sırala" tetikleyicisi: temanın .filter-btn stilini
 * (ORJ: style.css satır ~3520, altı çizgili minimal buton) miras alır;
 * sadece ikon için düzen eklenir, font'a dokunulmaz. */
.showcase2-filter-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}
.showcase2-filter-trigger svg {
    flex: 0 0 auto;
    color: currentColor;
}

@media (max-width: 767px) {
    .showcase2-toolbar-row {
        justify-content: space-between; /* ORJ: flex-end + crumbs gizli — artık web ile aynı: sol breadcrumbs, sağ buton */
    }
}

/* =========================================================
   2. FİLTRE PANELİ — temanın .filter-section'ı SAĞDAN açılır hale getirilir
   ORJ (style.css ~3575): left:0, translateX(-100%) (soldan).
   Buradaki kurallar aynı seçiciyi (aynı specificity + !important) daha
   SONRA yükleyerek override eder; JS mekanizması (.open class toggle,
   #c8-filter-ov overlay) hiç değişmez.
   ========================================================= */
.filter-section.showcase2-filter-section {
    left: auto !important;
    right: 0 !important;
    width: 420px !important;
    max-width: 92vw !important;
    transform: translateX(100%) !important;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    /* ORJ: yalnızca height:100vh !important (tema kuralı, ezilmedi).
     * Mobil tarayıcılarda (adres çubuğu açıkken) 100vh gerçek görünen
     * ekrandan BÜYÜK olabiliyor; panel bu fazla yükseklikte render
     * olup en alttaki "Filtreleri Kaldır" butonu ekranın dışına
     * taşıyor, görünmez kalıyordu. 100dvh (dynamic viewport height)
     * tarayıcının o an GERÇEKTEN gösterdiği alanı baz alır; eski
     * tarayıcılarda dvh desteklenmezse 100vh olarak kalır (fallback,
     * zararsız iki satır). */
    height: 100vh !important;
    height: 100dvh !important;
}
.filter-section.showcase2-filter-section.open {
    transform: translateX(0) !important;
}

@media (max-width: 767px) {
    .filter-section.showcase2-filter-section {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

.showcase2-panel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #eee;
}
.showcase2-panel-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.showcase2-panel-close {
    border: 0;
    background: transparent;
    padding: 4px;
    margin: -4px;
    line-height: 0;
    cursor: pointer;
    box-shadow: none;
    color: #111;
}

.showcase2-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* panel scroll sınırına gelince arka sayfaya sızmasın */
    padding: 0 22px 20px;
    /* ORJ: tarayıcı varsayılan (kalın, gri) scrollbar — temanın kendi
     * #c8-thumbs scrollbar stiliyle (style.css ~3107) aynı mantıkta
     * ince bir çubuğa çevrildi. */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.showcase2-panel-body::-webkit-scrollbar {
    width: 5px;
}
.showcase2-panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.showcase2-panel-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}
.showcase2-panel-body::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

.showcase2-panel-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    background: #fff;
}
.showcase2-panel-footer .btn.showcase2-apply,
.showcase2-panel-footer .btn.showcase2-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    box-shadow: none;
}
.showcase2-panel-footer .btn.showcase2-apply {
    border: 1px solid #111;
    background: #111;
    color: #fff;
}
.showcase2-panel-footer .btn.showcase2-apply.is-loading {
    opacity: .6;
    pointer-events: none;
}
.showcase2-panel-footer .btn.showcase2-clear {
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #111;
}

/* =========================================================
   3. AKORDEON PANELLERİ (Kategoriler / Marka / Nitelik / Fiyat / Sıralama)
   ========================================================= */
.showcase2-fp {
    border-bottom: 1px solid #eee;
}
.showcase2-fp-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    color: #111;
}
.showcase2-fp-toggle small {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    color: #777;
}
.showcase2-fp-count {
    margin-left: 3px;
    top: -0.5em;
    font-size: 10px;
    font-weight: 700;
    color: #111;
}
.showcase2-fp-count:empty {
    display: none;
}
.showcase2-fp-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1.4px solid #111;
    border-bottom: 1.4px solid #111;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.showcase2-fp.is-open > .showcase2-fp-toggle .showcase2-fp-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}
.showcase2-fp-body {
    display: none;
    padding: 0 0 16px;
}
.showcase2-fp.is-open > .showcase2-fp-body {
    display: block;
}

/* Satır listeleri (kategori/marka/gelişmiş filtre) */
.showcase2-fp-rows,
.showcase2-fp-subrows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.showcase2-fp-rows > li {
    padding: 8px 0;
    cursor: pointer;
}
.showcase2-fp-rows > li a {
    font-size: 12px;
    color: #111;
    text-decoration: none;
}
.showcase2-fp-rows > li.active-filter > a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.showcase2-fp-subrows {
    padding: 4px 0 0 14px;
}
.showcase2-fp-subrows li {
    padding: 5px 0;
}
.showcase2-fp-subrows li a {
    font-size: 11.5px;
    color: #555;
    text-decoration: none;
}
.showcase2-fp-subrows li.active-filter a {
    color: #111;
    font-weight: 700;
}

/* Hücreli grid (nitelikler: renk swatch veya metin) */
.showcase2-fp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 2px 0 0;
}
.showcase2-fp-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid #e3e3e3;
    cursor: pointer;
}
.showcase2-fp-cell.active-filter {
    border-color: #111;
}
.showcase2-fp-cell .showcase2-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 50%;
}
.showcase2-fp-cell .hastext {
    font-size: 10.5px;
    letter-spacing: .2px;
}

/* Fiyat slider (jQuery UI) */
.price-filters-content {
    padding: 10px 6px 2px;
}
.showcase2-filter-section .ui-slider {
    height: 2px;
    border: 0;
    border-radius: 0;
    background: #e3e3e3;
    margin: 16px 8px 10px;
}
.showcase2-filter-section .ui-slider .ui-slider-range {
    background: #111;
}
.showcase2-filter-section .ui-slider .ui-slider-handle {
    width: 12px;
    height: 12px;
    top: -5px;
    margin-left: -6px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    outline: 0;
    cursor: pointer;
}

/* Stok */
.showcase2-stock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 13px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}
.showcase2-stock-row input {
    margin: 0;
}

/* Sıralama listesi */
.showcase2-sort-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.showcase2-sort-option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    font-size: 12px;
    cursor: pointer;
}
.showcase2-sort-check {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}
.showcase2-sort-option.is-selected {
    font-weight: 700;
}
.showcase2-sort-option.is-selected .showcase2-sort-check {
    visibility: visible;
}
/* ORJ native select görsel olarak Mango tarzı listeye çevrildi;
 * DOM'da kalır (apollo'nun change event hook'u için), gizlenir. */
/* ORJ: .showcase2-sort-native { display: none !important; }
 * Temanın kendi "#selectProductSort { display:inline-block !important; }"
 * kuralı (style.css ~3536) bir ID seçici olduğu için bizim class
 * seçicimizden DAHA SPESİFİK; ikisi de !important olsa da ID kazanıyor,
 * select görünür kalıp (temanın minimalist alt-çizgili stiliyle) hem
 * "mükerrer sıralama" görüntüsü hem tıklanabilir ama görünmez bir
 * kontrol yaratıyordu. Aynı ID'yi kullanarak override ediyoruz. */
#selectProductSort.showcase2-sort-native {
    display: none !important;
}