/* Genel Kart Yapısı */
.elementor-widget-wc-archive-products ul.products li.product {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 12px !important;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left !important;
    /* Elementor ortalıyor olabilir */
    overflow: hidden;
}

.elementor-widget-wc-archive-products ul.products li.product:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Link yapısını düzenle - tüm kart tıklanabilir olmalı mı? 
   Varsayılan woocommerce yapısında görsel ve başlık link içinde.
*/
.elementor-widget-wc-archive-products ul.products li.product a.woocommerce-LoopProduct-link {
    text-decoration: none;
    display: block;
}

/* Görsel */
.elementor-widget-wc-archive-products ul.products li.product img {
    border-radius: 8px;
    width: 100%;
    height: 250px;
    /* Sabit yükseklik verip cover yapalım */
    object-fit: cover;
    margin-bottom: 15px !important;
}

/* Başlık */
.elementor-widget-wc-archive-products ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    line-height: heading;
}

/* Fiyatı gizle (görselde fiyat yok gibi veya "Fiyat İletilecek" yazıyor ama kart tasarımında dominant değil) 
   Kullanıcı görselde fiyata dair bir şey göstermemiş, metin odaklı.
   Varsa bile en alta veya yana alabiliriz. Şimdilik gizleyelim veya sona atalım.
*/
.elementor-widget-wc-archive-products ul.products li.product .price {
    display: none !important;
    /* Eğer gösterilecekse: 
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
    display: block;
    */
}

/* Sepete Ekle Butonu */
/* Görselde "Devamını oku" vb butonlar yok, sadece temiz bir kart var. 
   Muhtemelen ürün detayına gidilmesi istenir.
   Butonu gizleyelim.
*/
.elementor-widget-wc-archive-products ul.products li.product .add_to_cart_button,
.elementor-widget-wc-archive-products ul.products li.product .button {
    display: none !important;
}

/* Eklediğimiz Açıklama */
.creatortr-loop-description {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 3 satırla sınırla */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kategoriler Wrapper */
.creatortr-loop-categories-wrapper {
    /* margin-top: auto; Kaldırıldı */
    border-top: 1px solid #eee;
    /* İsteğe bağlı, görselde yok gibi */
    padding-top: 10px;
    border: none !important;
    margin-bottom: 15px;
}

/* Kategoriler Wrapper - Relative for Popover */
.creatortr-popover-wrapper {
    position: relative;
    cursor: pointer;
}

/* Trigger (Tetikleyici) */
.creatortr-cat-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    padding: 5px 0;
    transition: color 0.2s;
}

.creatortr-cat-trigger svg {
    width: 14px;
    height: 14px;
    color: #888;
}

.creatortr-cat-trigger:hover {
    color: #8630d9;
}

.creatortr-cat-trigger:hover svg {
    color: #8630d9;
}

.creatortr-cat-trigger .arrow {
    font-size: 10px;
    margin-left: 2px;
    color: #aaa;
}

/* Popover Kutusu */
.creatortr-cat-popover {
    display: none;
    /* Varsayılan gizli */
    position: absolute;
    bottom: 100%;
    /* Üste açılır */
    left: 0;
    width: 200px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 10px;
    margin-bottom: 10px;
    /* Trigger ile mesafe */
}

/* Hover veya Active ile Açılma */
.creatortr-popover-wrapper:hover .creatortr-cat-popover,
.creatortr-popover-wrapper.active .creatortr-cat-popover {
    display: block;
    animation: fadeIn 0.2s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ok işareti (Popover altına) */
.creatortr-cat-popover::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    transform: rotate(45deg);
}

/* Popover İçindeki Linkler */
.creatortr-cat-item {
    display: block;
    font-size: 13px;
    color: #333;
    padding: 6px 10px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 0.2s;
}

.creatortr-cat-item:hover {
    background-color: #f5f5f5;
    color: #8630d9;
}

/* Buton Wrapper and Button Style */
.creatortr-loop-button-wrapper {
    width: 100%;
    margin-top: auto;
}

.creatortr-loop-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: #8630d9;
    /* Mor Renk */
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.2s;
}

.creatortr-loop-btn:hover {
    background-color: #6c1eb5;
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Filtreleme Sistemi (Sahibinden Tarzı Sidebar)
/* -------------------------------------------------------------------------- */

/* Mobil Tetikleyici (Desktopta gizli !important) */
.creatortr-mobile-filter-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    background-color: #8630d9;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 500;
    margin-bottom: 20px;
    width: fit-content;
}

/* Desktop Sidebar Listesi */
.creatortr-sidebar-filter {
    display: block;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    margin-bottom: 30px;
}

.creatortr-sidebar-filter .widget-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    text-transform: uppercase;
}

.creatortr-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.creatortr-sidebar-list .creatortr-filter-item,
.creatortr-sidebar-list .creatortr-filter-item-platform {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    color: #555;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s;
}

.creatortr-sidebar-list .creatortr-filter-item:hover,
.creatortr-sidebar-list .creatortr-filter-item-platform:hover {
    background-color: transparent;
    color: #8630d9;
    padding-left: 5px;
}

.creatortr-sidebar-list .creatortr-filter-item.active,
.creatortr-sidebar-list .creatortr-filter-item-platform.active {
    background-color: transparent;
    color: #8630d9 !important;
    font-weight: 700;
    padding-left: 5px;
}

/* Ok İkonu */
.creatortr-sidebar-list .creatortr-filter-item::after,
.creatortr-sidebar-list .creatortr-filter-item-platform::after {
    content: '›';
    font-size: 18px;
    line-height: 1;
    color: #ccc;
    margin-left: auto;
}

.creatortr-sidebar-list .creatortr-filter-item.active::after,
.creatortr-sidebar-list .creatortr-filter-item:hover::after,
.creatortr-sidebar-list .creatortr-filter-item-platform.active::after,
.creatortr-sidebar-list .creatortr-filter-item-platform:hover::after {
    color: #8630d9;
}

/* Mobil Popup Overlay */
.creatortr-filter-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: flex-end;
    justify-content: center;
}

.creatortr-filter-popup-overlay.active {
    display: flex;
}

/* Popup İçeriği */
.creatortr-filter-popup-content {
    background-color: #fff;
    width: 100%;
    max-height: 80vh;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.creatortr-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.creatortr-popup-header h3 {
    margin: 0;
    font-size: 18px;
}

.creatortr-popup-close {
    font-size: 28px;
    line-height: 1;
    color: #333;
    text-decoration: none !important;
}

.creatortr-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.creatortr-popup-body .creatortr-filter-item,
.creatortr-popup-body .creatortr-filter-item-platform {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    background-color: transparent !important;
    color: #333;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 15px;
}

/* Mobilde de Aktif Eleman */
.creatortr-popup-body .creatortr-filter-item.active,
.creatortr-popup-body .creatortr-filter-item-platform.active {
    color: #8630d9 !important;
    font-weight: 700;
    padding-left: 5px;
    border-bottom: 1px solid #f5f5f5;
}

/* Mobilde Ok İkonu */
.creatortr-popup-body .creatortr-filter-item::after,
.creatortr-popup-body .creatortr-filter-item-platform::after {
    content: '›';
    font-size: 20px;
    line-height: 1;
    color: #ccc;
    margin-left: auto;
}

.creatortr-popup-body .creatortr-filter-item.active::after,
.creatortr-popup-body .creatortr-filter-item-platform.active::after {
    color: #8630d9;
}

/* Responsive (Double Listing Fix) */
@media (max-width: 768px) {
    .creatortr-sidebar-filter {
        display: none !important;
    }

    .creatortr-mobile-filter-trigger {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .creatortr-sidebar-filter {
        display: block !important;
    }

    .creatortr-mobile-filter-trigger {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Pagination (Sayfalama) Stilleri - Modern Mor Kutu Tasarım
/* -------------------------------------------------------------------------- */

.woocommerce-pagination,
.elementor-widget-wc-archive-products .woocommerce-pagination {
    margin-top: 50px !important;
    text-align: center !important;
    width: 100%;
}

.woocommerce-pagination ul.page-numbers {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 8px;
    /* Kutular arası boşluk */
}

.woocommerce-pagination ul.page-numbers li {
    float: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: inline-block;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    color: #555 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transition: all 0.2s ease;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    /* Hafif yuvarlak köşe */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Hover Durumu */
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li a:focus {
    background-color: #8630d9 !important;
    /* Mor */
    color: #fff !important;
    border-color: #8630d9 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(134, 48, 217, 0.3);
}

/* Aktif Sayfa - Span.current */
.woocommerce-pagination ul.page-numbers li span.current {
    background-color: #8630d9 !important;
    /* Mor */
    color: #fff !important;
    border-color: #8630d9 !important;
    cursor: default;
    box-shadow: 0 4px 10px rgba(134, 48, 217, 0.3);
}

/* Önceki/Sonraki Okları */
.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce-pagination ul.page-numbers li a.prev {
    width: auto !important;
    padding: 0 15px !important;
    /* Genişlik için */
    font-size: 18px !important;
}

/* -------------------------------------------------------------------------- */
/* Select Filter Styling
/* -------------------------------------------------------------------------- */
.creatortr-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.creatortr-filter-select:hover {
    border-color: #ccc;
}

.creatortr-filter-select:focus {
    border-color: #8630d9;
    box-shadow: 0 0 0 3px rgba(134, 48, 217, 0.1);
}

/* Remove default sidebar list padding/margin for cleaner look with selects */
.creatortr-sidebar-list {
    gap: 10px; /* Add gap between elements if multiple exist */
}