/* =========================================================
   Jeebna — KATEGORİ / LİSTE / ARAMA ekranları (sunum katmanı)
   Tasarım importu: Jeebna Marketplace · LIST bölümü
   Sadece görünüm; tüm PHP/işlev/markup aynen korunur.
   Bu dosya, sayfaların kendi inline <style> bloklarını
   görsel olarak Jeebna temasına çeker (specificity ile override).
   Tokenlar: accent #E2611C · bg #FAF8F5 · ink #1F1B17
   ========================================================= */

:root {
    --rl-accent: #E2611C;
    --rl-bg: #FAF8F5;
    --rl-ink: #1F1B17;
    --rl-muted: #6E665D;
    --rl-muted-2: #8C8178;
    --rl-muted-3: #A89E93;
    --rl-line: #EDE8E2;
    --rl-line-2: #E2DBD2;
    --rl-radius: 14px;
    --rl-shadow: 0 14px 32px rgba(31, 27, 23, .08);
    --rl-shadow-soft: 0 8px 22px rgba(31, 27, 23, .05);
    --rl-shadow-hover: 0 18px 40px rgba(31, 27, 23, .12);
}

body {
    background: var(--rl-bg) !important;
    color: var(--rl-ink);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.bg-light,
body.jeebna-soft-body {
    background: var(--rl-bg) !important;
}

/* Sora başlıklar */
.products-modern-page h1,
main h1,
main h2,
.filter-sidebar h5,
.filter-sidebar h6 {
    font-family: 'Sora', 'Manrope', system-ui, sans-serif;
    letter-spacing: -.02em;
}

/* =========================================================
   1) BREADCRUMB  (Ana Sayfa / Başlık)
   ========================================================= */
main .breadcrumb {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    font-size: 13px;
}

main .breadcrumb.jeebna-breadcrumb {
    background: transparent !important;
    backdrop-filter: none;
    border-radius: 0 !important;
}

main .breadcrumb .breadcrumb-item a {
    color: var(--rl-muted-2) !important;
    text-decoration: none;
}
main .breadcrumb .breadcrumb-item a:hover { color: var(--rl-accent) !important; }
main .breadcrumb .breadcrumb-item.active {
    color: var(--rl-ink) !important;
    font-weight: 600;
}
main .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--rl-muted-3);
}

/* =========================================================
   2) SAYFA BAŞLIĞI + "{n} ürün listeleniyor"
      (hero / category-hero / top-bar başlık alanları)
   ========================================================= */
.products-hero,
.category-hero,
.top-bar-modern {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.products-hero {
    padding: 24px 26px !important;
}
.products-hero::after { display: none !important; }

.products-hero .eyebrow {
    color: var(--rl-accent) !important;
    background: color-mix(in srgb, var(--rl-accent) 11%, #fff) !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

.products-hero h1,
.category-hero h1 {
    font-family: 'Sora', 'Manrope', sans-serif;
    font-weight: 700 !important;
    color: var(--rl-ink) !important;
    letter-spacing: -.02em !important;
}

.products-hero p,
.category-hero p { color: var(--rl-muted-2) !important; }

.category-hero {
    padding: 26px 28px !important;
}

/* Hero sayaç kartı */
.hero-stat-card {
    background: var(--rl-bg) !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
}
.hero-stat-card .number { color: var(--rl-ink) !important; font-family: 'Sora', sans-serif; }
.hero-stat-card .label  { color: var(--rl-muted-2) !important; }

/* top-bar (tum-urunler içerik başlığı) */
.top-bar-modern { padding: 16px 18px !important; }
.top-bar-modern h1 { color: var(--rl-ink) !important; }
.results-badge {
    background: color-mix(in srgb, var(--rl-accent) 11%, #fff) !important;
    color: var(--rl-accent) !important;
    border: none !important;
    font-weight: 800;
}

/* Liste başlık satırı (genel) */
.jeebna-list-head h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -.02em;
    color: var(--rl-ink);
    margin: 0;
}
.jeebna-list-head .jeebna-list-count {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--rl-muted-2);
}

/* =========================================================
   3) "SIRALA" PILL SELECT
   ========================================================= */
.modern-select,
select.form-select-sm.rounded-pill,
.jeebna-list-sort select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff !important;
    border: 1px solid var(--rl-line-2) !important;
    border-radius: 999px !important;
    padding: 11px 38px 11px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--rl-ink) !important;
    cursor: pointer;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%231F1B17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}
html[dir="rtl"] .modern-select,
html[dir="rtl"] select.form-select-sm.rounded-pill,
html[dir="rtl"] .jeebna-list-sort select {
    padding: 11px 18px 11px 38px !important;
    background-position: left 14px center !important;
}
.modern-select:focus,
select.form-select-sm.rounded-pill:focus,
.jeebna-list-sort select:focus {
    border-color: var(--rl-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(226, 97, 28, .14) !important;
}

/* =========================================================
   4) FİLTRE SIDEBAR  (sol 248px sticky)
   ========================================================= */
.filter-sidebar {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 22px !important;
    position: sticky;
    top: 100px;
    overflow: hidden;
}

.filter-sidebar h5,
.filter-sidebar h6,
.filter-sidebar .filter-title {
    color: var(--rl-ink) !important;
}

.filter-sidebar h5 {
    font-family: 'Sora', sans-serif;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Sidebar bölüm başlıkları */
.filter-section-title,
.filter-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rl-muted-3) !important;
}

/* tum-urunler: filtre başlık ikonu */
.filter-title-icon {
    background: color-mix(in srgb, var(--rl-accent) 12%, #fff) !important;
    color: var(--rl-accent) !important;
    border-radius: 11px !important;
}

/* arama-sonuc: bölüm ayraçları */
.filter-section {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
}
.filter-section:first-of-type { padding-top: 0 !important; }
.filter-section:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.filter-section.bg-primary,
.filter-section.bg-opacity-10 {
    background: color-mix(in srgb, var(--rl-accent) 8%, #fff) !important;
    border-radius: 12px;
    padding: 14px 14px !important;
    border-bottom: none !important;
}
.filter-section .form-check-label.text-primary { color: var(--rl-accent) !important; }

/* Kategori link listesi (kategori.php) */
.filter-link { color: var(--rl-muted) !important; transition: color .15s ease; }
.filter-link:hover,
.filter-link.active {
    color: var(--rl-accent) !important;
    font-weight: 700;
}

/* Radio / checkbox accent */
.custom-radio:hover { background: rgba(31, 27, 23, .035) !important; }
.form-check-input:checked {
    background-color: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 .18rem rgba(226, 97, 28, .18) !important;
    border-color: var(--rl-accent) !important;
}
.form-check-label { color: var(--rl-muted) !important; }
.form-check-input:checked ~ .form-check-label,
.custom-radio .form-check-input:checked ~ .form-check-label {
    color: var(--rl-ink) !important;
    font-weight: 700;
}

/* Fiyat input */
.price-input,
.filter-section input[type="number"] {
    border: 1px solid var(--rl-line-2) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.price-input:focus,
.filter-section input[type="number"]:focus {
    border-color: var(--rl-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(226, 97, 28, .14) !important;
}

/* Beden kutuları (arama) */
.size-box input:checked ~ span {
    background-color: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(226, 97, 28, .2) !important;
}

/* Yıldız filtresi */
.star-rating i { color: var(--rl-accent) !important; }

/* Filtre butonları → accent pill */
.btn-filter,
.filter-section .btn-primary,
.filter-sidebar .btn-primary {
    background: var(--rl-accent) !important;
    border: 1px solid var(--rl-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transition: filter .15s ease;
}
.btn-filter:hover,
.filter-section .btn-primary:hover,
.filter-sidebar .btn-primary:hover {
    background: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
    filter: brightness(.93);
    transform: none !important;
    box-shadow: none !important;
    color: #fff !important;
}
.btn-clear-filter {
    color: var(--rl-accent) !important;
    background: color-mix(in srgb, var(--rl-accent) 8%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--rl-accent) 24%, #fff) !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}
.btn-clear-filter:hover {
    background: var(--rl-accent) !important;
    color: #fff !important;
    border-color: var(--rl-accent) !important;
}

/* =========================================================
   5) ÜRÜN KARTI  (mevcut .product-card markup'ını Jeebna'ya çek)
   ========================================================= */
.product-card {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.product-card:hover {
    box-shadow: var(--rl-shadow-hover) !important;
    transform: translateY(-3px);
    border-color: var(--rl-line-2) !important;
}

.product-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin: 0 !important;
    border-radius: 0 !important;
    background: repeating-linear-gradient(135deg, #F1ECE6 0 13px, #F7F3EE 13px 26px) !important;
}
.product-img-wrapper::after { display: none !important; }
.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.product-card:hover .product-img-wrapper img { transform: scale(1.04); }

/* Kart gövdesi */
.product-card .card-body { background: #fff; padding: 14px 14px 16px !important; }

/* Marka etiketi */
.product-brand {
    color: var(--rl-muted-3) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-card .small.text-primary.fw-bold {
    color: var(--rl-muted-3) !important;
    font-size: 11px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Ürün adı */
.product-card .card-title { color: var(--rl-ink) !important; font-weight: 600 !important; }
.product-title-link:hover h5,
.product-title-link:hover .card-title { color: var(--rl-ink) !important; }

/* Fiyat */
.price-current,
.product-card .fs-5 {
    color: var(--rl-ink) !important;
    font-family: 'Sora', sans-serif;
    font-weight: 700 !important;
    letter-spacing: -.02em;
}
.product-card del { color: #B0A69B !important; font-weight: 600 !important; }

/* Yıldızlar */
.product-card .text-warning i,
.product-card .star-rating i { color: var(--rl-accent) !important; }

/* Rozetler → Jeebna stili */
.product-card .badge.badge-soft-new,
.product-card .badge.bg-success {
    background: var(--rl-ink) !important;
    color: #fff !important;
    border: none !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}
.product-card .badge.badge-soft-sale,
.product-card .badge.bg-danger {
    background: var(--rl-accent) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800;
}

/* Favori butonu (yuvarlak) */
.card-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92) !important;
    border: none !important;
    color: var(--rl-ink) !important;
    box-shadow: 0 2px 8px rgba(31, 27, 23, .10) !important;
    transition: background .15s, color .15s;
}
.card-action-btn:hover {
    background: #fff !important;
    color: var(--rl-accent) !important;
    transform: none;
}
.fav-btn.is-favorited,
.fav-btn .fa-heart.text-danger { color: var(--rl-accent) !important; }

/* Hızlı sepete ekle butonu → accent pill */
.quick-add-cart .btn,
.quick-add-cart .btn-primary {
    background: var(--rl-accent) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.quick-add-cart .btn:hover,
.quick-add-cart .btn-primary:hover {
    filter: brightness(.93);
    background: var(--rl-accent) !important;
    color: #fff !important;
    transform: none !important;
}

/* =========================================================
   6) PAGINATION  (yuvarlak kare butonlar; aktif accent)
   ========================================================= */
.pagination { gap: 8px; flex-wrap: wrap; }
.pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1px solid var(--rl-line-2) !important;
    background: #fff !important;
    color: var(--rl-ink) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.pagination .page-link:hover {
    background: color-mix(in srgb, var(--rl-accent) 10%, #fff) !important;
    border-color: color-mix(in srgb, var(--rl-accent) 38%, #fff) !important;
    color: var(--rl-accent) !important;
}
.pagination .page-item.active .page-link {
    background: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.pagination .page-item.disabled .page-link {
    color: var(--rl-muted-3) !important;
    background: #fff !important;
    border-color: var(--rl-line) !important;
    opacity: 1;
}

/* =========================================================
   7) BOŞ DURUM KARTI
   ========================================================= */
.empty-state-card,
.bg-white.rounded-4.shadow-sm.text-center {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.empty-icon {
    background: var(--rl-bg) !important;
    color: var(--rl-muted-3) !important;
    border: 1px solid var(--rl-line) !important;
}

/* Genel accent metin/buton uyumları */
.text-primary { color: var(--rl-accent) !important; }
.btn-primary {
    background: var(--rl-accent);
    border-color: var(--rl-accent);
}
.btn-primary:hover {
    background: var(--rl-accent);
    border-color: var(--rl-accent);
    filter: brightness(.93);
}
.btn-outline-danger { color: var(--rl-accent); border-color: var(--rl-accent); }
.btn-outline-danger:hover { background: var(--rl-accent); border-color: var(--rl-accent); }

/* Dokunmatik / hareket azaltma uyumu */
@media (hover: none) {
    .product-card:hover { transform: none !important; }
    .product-card:hover .product-img-wrapper img { transform: none !important; }
}