/* === kaynak: components.css 1553-2105 - Z-2 sprint === */

   SECTION 39 — CATEGORY PAGE: Breadcrumb, Toolbar, Filters,
                 Pagination, Empty State
   ═══════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.th-breadcrumb {
  padding: var(--th-space-3) 0;
  font-size: var(--th-breadcrumb-font, var(--th-text-xs));
}
.th-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.th-breadcrumb li {
  display: inline-flex;
  align-items: center;
  color: var(--th-breadcrumb-text, var(--th-color-text-muted));
}
.th-breadcrumb li + li::before {
  content: "\203A";
  margin: 0 var(--th-space-2);
  color: var(--th-breadcrumb-separator, var(--th-neutral-300));
  font-size: 1.1em;
}
.th-breadcrumb a {
  color: var(--th-breadcrumb-link, var(--th-color-text-muted));
  text-decoration: none;
  transition: color .15s ease;
}
.th-breadcrumb a:hover {
  color: var(--th-breadcrumb-link-hover, var(--th-color-primary));
}
.th-breadcrumb [aria-current="page"] {
  color: var(--th-breadcrumb-current, var(--th-color-text));
  font-weight: var(--th-font-medium);
}

/* ══ Kategori Başlık + Ürün Sayısı ══ */
.th-category-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 6px;
}
.th-category-header__title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.3;
}
.th-category-header__count {
  font-size: 13px;
  color: #999;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .th-category-header { padding: 6px 0 4px; }
  .th-category-header__title { font-size: 14px; }
  .th-category-header__count { font-size: 11px; }
}

/* ══ TOOLBAR — Tek Satir Profesyonel ══ */
.th-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 20;
  transition: box-shadow 0.2s;
  min-height: 48px;
  overflow: visible;
}
.th-toolbar--scrolled { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.th-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
}
.th-toolbar__left::-webkit-scrollbar { display: none; }

.th-toolbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
  overflow: visible;
  position: relative;
}

/* Eski toolbar count — artik kullanilmiyor */
.th-toolbar__count { display: none; }
.th-toolbar__divider { display: none; }

/* Chip'ler */
.th-toolbar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.th-toolbar__chips::-webkit-scrollbar { display: none; }

.th-toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.th-toolbar__chip i { font-size: 11px; }
.th-toolbar__chip:hover { border-color: #ccc; background: #fafafa; color: #333; text-decoration: none; }
.th-toolbar__chip:active { transform: scale(0.96); }
.th-toolbar__chip--active { border-color: #FF6B2C; background: rgba(255,107,44,0.05); color: #FF6B2C; font-weight: 600; }

/* Sort Dropdown */
.th-toolbar__sort { position: relative; flex-shrink: 0; }
.th-toolbar__sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.th-toolbar__sort-btn:hover { border-color: #FF6B2C; }
.th-toolbar__sort-btn i { font-size: 10px; color: #999; transition: transform 0.2s; }
.th-toolbar__sort--open .th-toolbar__sort-btn i { transform: rotate(180deg); }

.th-toolbar__sort-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  min-width: 180px;
  z-index: 100;
  overflow: hidden;
}
.th-toolbar__sort--open .th-toolbar__sort-dropdown {
  display: block;
  animation: thDropIn 0.15s ease;
}
@keyframes thDropIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.th-toolbar__sort-dropdown .lag-checkbox { display: block; padding: 10px 16px; cursor: pointer; transition: background 0.1s; }
.th-toolbar__sort-dropdown .lag-checkbox:hover { background: #f8f8f8; }
.th-toolbar__sort-dropdown .lag-checkbox input[type="radio"] { display: none; }
.th-toolbar__sort-dropdown .lag-checkbox input[type="radio"]:checked + label { color: #FF6B2C; font-weight: 600; }
.th-toolbar__sort-dropdown .lag-checkbox label { cursor: pointer; margin: 0; font-size: 13px; color: #444; display: flex; align-items: center; gap: 8px; }
.th-toolbar__sort-dropdown .lag-checkbox label i { width: 16px; text-align: center; font-size: 12px; color: #999; flex-shrink: 0; }
.th-toolbar__sort-dropdown .lag-checkbox input[type="radio"]:checked + label i { color: #FF6B2C; }
.th-toolbar__sort-dropdown .lag-checkbox span { display: none; }

/* View Toggle */
.th-toolbar__view { display: flex; gap: 6px; border-radius: 8px; padding: 2px; flex-shrink: 0; }
.th-toolbar__view-btn {
  width: 32px; height: 32px;
  border: none; border-radius: 6px;
  background: #6c757d; color: #fafafa;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all 0.15s;
}
.th-toolbar__view-btn:hover { color: #666; }
.th-toolbar__view-btn.active,
.th-toolbar__view-btn--active { background: #6c757d; color: #fff; }

/* Eski kodlar gizle */
.qsf-topbar { display: none !important; }
.category-filter-order .list-wrap { display: none !important; }
.th-view-toggle { display: none !important; }

/* Sort bottom sheet header — desktop'ta gizli */
.th-sort-sheet-header { display: none; }
.th-sort-sheet-close { background: none; border: none; font-size: 18px; color: #666; cursor: pointer; padding: 0; }

/* Sort backdrop — gizli */
.th-sort-backdrop { display: none; }

/* Filtre butonu — desktop'ta gizli */
.th-toolbar__filter-btn { display: none; }

/* ══ TOOLBAR MOBİL ══ */
@media (max-width: 768px) {
  .th-toolbar {
    flex-direction: column;
    gap: 0;
    /* padding: 0 12px; */
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* ROW 1: Chip'ler — horizontal scroll */
  .th-toolbar__left {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    overflow: visible;
  }
  .th-toolbar__count { display: none; }
  .th-toolbar__divider { display: none; }
  .th-toolbar__chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
  }
  .th-toolbar__chips::-webkit-scrollbar { display: none; }
  .th-toolbar__chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 5px 10px;
    font-size: 11px;
    scroll-snap-align: start;
  }
  .th-toolbar__chip i { font-size: 10px; }

  /* ROW 2: Sıralama + Filtre yan yana tam genişlik */
  .th-toolbar__right {
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: 0;
    padding: 8px 0;
    gap: 8px;
  }

  /* View toggle mobilde gizle */
  .th-toolbar__view { display: none !important; }

  /* Sort ve Filter eşit genişlik */
  .th-toolbar__sort { flex: 1; }
  .th-toolbar__sort-btn { width: 100%; justify-content: center; padding: 10px 12px; font-size: 13px; font-weight: 600; }
  .th-toolbar__filter-btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: 13px; font-weight: 600; }
  .th-toolbar__sort-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 60vh;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15) !important;
    z-index: 1001 !important;
    overflow-y: auto;
    min-width: 100% !important;
  }
  .th-toolbar__sort--open .th-toolbar__sort-dropdown {
    animation: thMobileSlideUp 0.25s ease;
  }
  @keyframes thMobileSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .th-toolbar__sort-dropdown .lag-checkbox {
    padding: 14px 20px;
  }
  .th-toolbar__sort-dropdown .lag-checkbox label {
    font-size: 15px;
  }

  /* Sort bottom sheet header */
  .th-sort-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
  }

  /* Sort backdrop */
  .th-sort-backdrop.active {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
  }

  /* Filtre butonu — mobilde göster */
  .th-toolbar__filter-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Eski mobil toolbar (responsive_butonlar) gizle */
  .th-mobile-toolbar { display: none !important; }
}

@media (max-width: 480px) {
  .th-toolbar__chip { padding: 4px 8px; font-size: 10px; gap: 3px; }
  .th-toolbar__sort-btn { padding: 5px 8px; font-size: 11px; }
  .th-toolbar__filter-btn { padding: 5px 8px; font-size: 11px; }
}

/* ── Filter Sidebar (Desktop) ── */
.th-filter-panel {
  background: var(--th-filter-bg, var(--th-color-bg));
  border: var(--th-border-width-default) solid var(--th-filter-border, var(--th-color-border-light));
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.th-filter-group {
  border-bottom: 1px solid var(--th-color-border-light);
}
.th-filter-group:last-child {
  border-bottom: 0;
}
.th-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--th-space-4) var(--th-space-5);
  font-size: var(--th-filter-heading-font, var(--th-text-sm));
  font-weight: var(--th-filter-heading-weight, var(--th-font-semibold));
  color: var(--th-filter-heading, var(--th-color-text));
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.th-filter-heading:hover {
  background: var(--th-color-bg-secondary);
}
.th-filter-heading i {
  font-size: var(--th-text-2xs);
  color: var(--th-color-text-muted);
  transition: transform .2s ease;
}
.th-filter-group.is-open .th-filter-heading i {
  transform: rotate(180deg);
}
.th-filter-body {
  padding: 0 var(--th-space-5) var(--th-space-4);
}
.th-filter-body .lag-checkbox {
  padding: var(--th-space-1-5) var(--th-space-2);
  border-radius: var(--th-radius-md);
  transition: background .15s ease;
}
.th-filter-body .lag-checkbox:hover {
  background: var(--th-color-bg-secondary);
}
.th-filter-body .lag-checkbox label {
  font-size: var(--th-text-sm);
  color: var(--th-filter-option-text, var(--th-color-text-secondary));
  cursor: pointer;
}
.th-filter-body .lag-checkbox input:checked + label {
  font-weight: var(--th-font-medium);
  color: var(--th-filter-option-hover, var(--th-color-primary));
}

/* ── Filter Tags (active filters) ── */
.th-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--th-space-2);
  padding: var(--th-space-3) 0;
}
.th-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  padding: 6px 12px;
  font-size: var(--th-text-xs);
  background: var(--th-neutral-100);
  color: var(--th-color-text);
  border: none;
  border-radius: var(--th-radius-full);
  font-weight: var(--th-font-medium);
  cursor: pointer;
  transition: background .15s;
}
.th-filter-tag:hover {
  background: var(--th-neutral-200);
}
.th-filter-tag__remove {
  cursor: pointer;
  font-size: var(--th-text-sm);
  line-height: 1;
  color: var(--th-color-text-muted);
  opacity: .7;
  transition: opacity .15s ease;
  margin-left: 2px;
}
.th-filter-tag__remove:hover { opacity: 1; }
/* Tümünü temizle chip */
.th-filter-tag--clear {
  background: transparent;
  color: var(--th-color-primary);
  font-weight: var(--th-font-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.th-filter-tag--clear:hover {
  background: transparent;
  color: var(--th-color-primary-hover);
}

/* ── Mobile Filter Drawer ── */
.th-filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--th-filter-drawer-width, 320px);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--th-filter-drawer-bg, var(--th-neutral-0));
  box-shadow: var(--th-filter-drawer-shadow, 8px 0 32px color-mix(in srgb, var(--th-ink-900) 15%, transparent));
  z-index: var(--th-z-drawer, 1040);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-filter-drawer.is-open {
  transform: translateX(0);
}
.th-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--th-space-4);
  border-bottom: 1px solid var(--th-color-border-light);
  flex-shrink: 0;
}
.th-filter-drawer__title {
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-bold);
  color: var(--th-color-text);
  margin: 0;
}
.th-filter-drawer__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--th-color-bg-secondary);
  border-radius: var(--th-radius-full);
  cursor: pointer;
  font-size: var(--th-text-lg);
  color: var(--th-color-text);
  transition: background .15s ease;
}
.th-filter-drawer__close:hover {
  background: var(--th-color-border-light);
}
.th-filter-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--th-space-4);
}
.th-filter-drawer__footer {
  padding: var(--th-space-3) var(--th-space-4);
  border-top: 1px solid var(--th-color-border-light);
  display: flex;
  gap: var(--th-space-2);
  flex-shrink: 0;
}
.th-filter-drawer__footer .btn {
  flex: 1;
}

/* Drawer backdrop */
.th-filter-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--th-ink-900) 40%, transparent);
  z-index: calc(var(--th-z-drawer, 1040) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.th-filter-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Pagination ── */
.th-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--th-space-1);
  padding: var(--th-space-8) 0 var(--th-space-4);
}
.th-pagination a,
.th-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--th-pagination-size, 36px);
  height: var(--th-pagination-size, 36px);
  padding: 0 var(--th-space-2-5);
  font-size: var(--th-text-sm);
  border-radius: var(--th-pagination-radius, var(--th-radius-md));
  border: 1px solid var(--th-pagination-border, var(--th-color-border));
  background: var(--th-pagination-bg, var(--th-neutral-0));
  color: var(--th-pagination-text, var(--th-color-text-secondary));
  text-decoration: none;
  transition: all .15s ease;
}
.th-pagination a:hover {
  background: var(--th-pagination-bg-hover, var(--th-neutral-50));
  border-color: var(--th-color-primary);
  color: var(--th-color-primary);
}
.th-pagination .active,
.th-pagination [aria-current="page"] {
  background: var(--th-pagination-bg-active, var(--th-color-primary));
  color: var(--th-pagination-text-active, var(--th-neutral-0));
  border-color: var(--th-pagination-bg-active, var(--th-color-primary));
  font-weight: var(--th-font-semibold);
}
.th-pagination .disabled {
  opacity: .4;
  pointer-events: none;
}

/* Platform fallback — modul.sayfalar Bootstrap .pagination desteği */
.pagination-wrapper .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--th-space-1, 4px);
  padding: var(--th-space-8) 0 var(--th-space-4);
  list-style: none;
  margin: 0;
  flex-wrap: wrap;
}
.pagination-wrapper .pagination li a,
.pagination-wrapper .pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--th-pagination-size, 36px);
  height: var(--th-pagination-size, 36px);
  padding: 0 var(--th-space-2-5);
  font-size: var(--th-text-sm);
  border-radius: var(--th-pagination-radius, var(--th-radius-md));
  border: 1px solid var(--th-pagination-border, var(--th-color-border));
  background: var(--th-pagination-bg, var(--th-neutral-0));
  color: var(--th-pagination-text, var(--th-color-text-secondary));
  text-decoration: none;
  transition: all .15s ease;
}
.pagination-wrapper .pagination li a:hover {
  background: var(--th-pagination-bg-hover, var(--th-neutral-50));
  border-color: var(--th-color-primary);
  color: var(--th-color-primary);
}
.pagination-wrapper .pagination li.active a,
.pagination-wrapper .pagination li.active span {
  background: var(--th-pagination-bg-active, var(--th-color-primary));
  color: var(--th-pagination-text-active, var(--th-neutral-0));
  border-color: var(--th-pagination-bg-active, var(--th-color-primary));
  font-weight: var(--th-font-semibold);
  pointer-events: none;
}
.pagination-wrapper .pagination li.disabled a,
.pagination-wrapper .pagination li.disabled span {
  opacity: .4;
  pointer-events: none;
}

@media (max-width: 576px) {
  .th-pagination { gap: var(--th-space-0-5); }
  .th-pagination a,
  .th-pagination span { min-width: 32px; height: 32px; font-size: var(--th-text-sm); }
  .pagination-wrapper .pagination { gap: var(--th-space-0-5); }
  .pagination-wrapper .pagination li a,
  .pagination-wrapper .pagination li span { min-width: 32px; height: 32px; }
}

/* ── Infinite Scroll Loader ── */
.th-infinite-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--th-space-3);
  padding: var(--th-space-8) 0;
}
.th-infinite-loader__spinner {
  width: var(--th-pagination-infinite-size, 24px);
  height: var(--th-pagination-infinite-size, 24px);
  border: var(--th-border-width-thick, 2px) solid var(--th-color-border-light);
  border-top-color: var(--th-pagination-infinite-color, var(--th-color-primary));
  border-radius: var(--th-radius-full);
  animation: th-spin 0.6s linear infinite;
}
.th-infinite-loader__text {
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text-muted);
}
@keyframes th-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .th-infinite-loader__spinner { animation: none; opacity: var(--th-opacity-50, 0.5); }
}

/* ── Empty State ── */
.th-empty-state {
  text-align: center;
  padding: var(--th-space-16) var(--th-space-6);
  max-width: 480px;
  margin: 0 auto;
}
.th-empty-state__icon {
  font-size: var(--th-text-5xl);
  color: var(--th-color-text-muted);
  margin-bottom: var(--th-space-4);
}
.th-empty-state__title {
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
  margin: 0 0 var(--th-space-2);
}
.th-empty-state__desc {
  font-size: var(--th-text-sm);
  color: var(--th-color-text-secondary);
  margin: 0 0 var(--th-space-6);
}
.th-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1-5);
  padding: var(--th-space-2-5) var(--th-space-6);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text-inverse);
  background: var(--th-color-primary);
  border-radius: var(--th-radius-md);
  text-decoration: none;
  transition: background .15s ease;
}
.th-empty-state__cta:hover {
  background: var(--th-color-primary-hover);
  color: var(--th-color-text-inverse);
}

/* ── Category Description (SEO) ── */
.th-category-desc {
  margin-top: var(--th-section-gap-md);
  padding: var(--th-space-6);
  background: var(--th-color-bg-secondary);
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-sm);
  color: var(--th-color-text-secondary);
  line-height: 1.7;
}
.th-category-desc h1,
.th-category-desc h2,
.th-category-desc h3 {
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-bold);
  color: var(--th-color-text);
  margin: 0 0 var(--th-space-3);
}
.th-category-desc.is-collapsed {
  max-height: 120px;
  overflow: hidden;
  position: relative;
}
.th-category-desc.is-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(transparent, var(--th-color-bg-secondary));
  pointer-events: none;
}
.th-category-desc__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1);
  margin-top: var(--th-space-2);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-primary);
  cursor: pointer;
  border: 0;
  background: 0;
  padding: 0;
  transition: color .15s ease;
}
.th-category-desc__toggle:hover {
  color: var(--th-color-primary-hover);
}

/* ── Mobile responsive buttons ── */
.th-mobile-toolbar {
  display: none;
  gap: var(--th-space-2);
  padding: var(--th-space-3) 0;
}
.th-mobile-toolbar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--th-space-1-5);
  padding: var(--th-space-2-5) var(--th-space-4);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-medium);
  color: var(--th-color-text);
  background: var(--th-color-bg);
  border: 1px solid var(--th-color-border);
  border-radius: var(--th-radius-md);
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.th-mobile-toolbar__btn:hover {
  border-color: var(--th-color-primary);
  color: var(--th-color-primary);
}
.th-mobile-toolbar__btn i { font-size: var(--th-text-base); }

@media (max-width: 992px) {
  .th-mobile-toolbar { display: flex; }
}

/* ── Product Grid (category page, responsive 2→4 col) ── */
.th-grid--products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--th-space-4);
}
@media (max-width: 1240px) {
  .th-grid--products { grid-template-columns: repeat(3, 1fr); gap: var(--th-space-3); }
}
@media (max-width: 768px) {
  .th-grid--products { grid-template-columns: repeat(2, 1fr); gap: var(--th-space-3); }
}
@media (max-width: 576px) {
  .th-grid--products { grid-template-columns: repeat(2, 1fr); gap: var(--th-space-2); }
}

/* ── Banner Grid (promo-banner enhanced) ── */
.th-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--th-space-4);
  max-width: 1440px;
  margin: 0 auto;
}
.th-banner-grid a,
.th-banner-grid > div {
  border-radius: var(--th-radius-lg);
  overflow: hidden;
  display: block;
}
.th-banner-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.th-banner-grid a:hover img,
.th-banner-grid > div:hover img {
  transform: scale(1.03);
}

@media (max-width: 992px) {
  .th-banner-grid { grid-template-columns: repeat(2, 1fr); gap: var(--th-space-3); }
}
@media (max-width: 576px) {
  .th-banner-grid { grid-template-columns: 1fr; gap: var(--th-space-2); }
}

/* Drawer filtre bölümleri */
.th-filter-drawer__section {
  padding: var(--th-space-4);
  border-bottom: 1px solid var(--th-neutral-100);
}
.th-filter-drawer__section:last-child { border-bottom: none; }
.th-filter-drawer__section .p-g-m-h-i-title {
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-text);
  margin-bottom: var(--th-space-2);
}

/* ── Custom Checkbox (Trendyol tarzı yeşil check) ── */
.th-filter-body .lag-checkbox input[type="checkbox"],
.th-filter-drawer .lag-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--th-neutral-300);
  border-radius: var(--th-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  transition: all .15s ease;
  flex-shrink: 0;
  background: var(--th-neutral-0);
}
.th-filter-body .lag-checkbox input[type="checkbox"]:checked,
.th-filter-drawer .lag-checkbox input[type="checkbox"]:checked {
  background: var(--th-color-success);
  border-color: var(--th-color-success);
}
.th-filter-body .lag-checkbox input[type="checkbox"]:checked::after,
.th-filter-drawer .lag-checkbox input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--th-neutral-0);
  font-size: 12px;
  font-weight: var(--th-font-bold);
  line-height: 1;
}

/* ── Marka arama input (filtre içi) ── */
.th-filter-search {
  width: 100%;
  height: 34px;
  padding: 0 var(--th-space-3) 0 32px;
  border: 1px solid var(--th-color-border);
  border-radius: var(--th-radius-md);
  font-size: var(--th-text-xs);
  background: var(--th-neutral-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat;
  outline: none;
  transition: border-color .15s;
  margin-bottom: var(--th-space-2);
}
.th-filter-search:focus {
  border-color: var(--th-color-primary);
}
.th-filter-search::placeholder {
  color: var(--th-color-text-placeholder);
}

/* ── "Daha fazla göster" linki ── */
.th-filter-more {
  display: inline-flex;
  align-items: center;
  gap: var(--th-space-1);
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-semibold);
  color: var(--th-color-primary);
  cursor: pointer;
  padding: var(--th-space-1) 0;
  margin-top: var(--th-space-1);
  transition: color .15s;
}
.th-filter-more:hover {
  color: var(--th-color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════
   GRID/LİSTE TOGGLE
   ═══════════════════════════════════════════════════════════════ */
.th-view-toggle {
  display: flex;
  gap: var(--th-space-1);
  justify-content: flex-end;
  margin-bottom: var(--th-space-3);
}
.th-view-toggle__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--th-color-border);
  border-radius: var(--th-radius-md);
  background: var(--th-neutral-0);
  color: var(--th-color-text-muted);
  cursor: pointer;
  font-size: var(--th-text-sm);
  transition: all .15s ease;
}
.th-view-toggle__btn:hover {
  border-color: var(--th-color-primary);
  color: var(--th-color-primary);
}
.th-view-toggle__btn.active {
  background: var(--th-color-primary);
  border-color: var(--th-color-primary);
  color: var(--th-neutral-0);
}

/* ── Liste Görünüm ── */
.th-product-grid--list .col-list-p-v-1 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.th-product-grid--list .th-card__inner {
  flex-direction: row;
  border-radius: var(--th-radius-lg);
}
.th-product-grid--list .th-card__image-wrap {
  width: 200px;
  flex-shrink: 0;
}
.th-product-grid--list .th-card__image-wrap .image {
  aspect-ratio: 2 / 3;
  height: 100%;
  border-radius: var(--th-radius-lg) 0 0 var(--th-radius-lg);
}
.th-product-grid--list .th-card__body {
  padding: var(--th-space-4);
  justify-content: center;
}
.th-product-grid--list .th-card__title {
  -webkit-line-clamp: unset;
  font-size: var(--th-text-base);
}
.th-product-grid--list .th-card__price-sale {
  font-size: var(--th-text-lg);
}
.th-product-grid--list .th-card .th-card__overlay {
  display: none !important;
}
.th-product-grid--list .th-card__badge-strip {
  display: none;
}
@media (max-width: 768px) {
  .th-product-grid--list .th-card__image-wrap {
    width: 120px;
  }
  .th-product-grid--list .th-card__body {
    padding: var(--th-space-2-5);
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOAD MORE BUTONU
   ═══════════════════════════════════════════════════════════════ */
.th-load-more {
  text-align: center;
  padding: var(--th-space-6) 0 var(--th-space-2);
}
.th-load-more__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--th-space-1);
  padding: var(--th-space-3) var(--th-space-8);
  border: 2px solid var(--th-color-primary);
  border-radius: var(--th-radius-lg);
  background: var(--th-neutral-0);
  color: var(--th-color-primary);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
  transition: all .2s ease;
}
.th-load-more__btn:hover {
  background: var(--th-color-primary);
  color: var(--th-neutral-0);
}
.th-load-more__count {
  font-size: var(--th-text-xs);
  font-weight: var(--th-font-regular);
  opacity: .7;
}

/* ═══════════════════════════════════════════════════════════════
   KARŞILAŞTIRMA BAR (Floating)
   ═══════════════════════════════════════════════════════════════ */
.th-compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--th-neutral-0);
  border-top: 1px solid var(--th-color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  animation: th-slide-up .3s ease;
}
@keyframes th-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.th-compare-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--th-space-3) var(--th-space-5);
  display: flex;
  align-items: center;
  gap: var(--th-space-4);
}
.th-compare-bar__items {
  display: flex;
  gap: var(--th-space-2);
  flex: 1;
}
.th-compare-bar__item {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--th-radius-md);
  border: 1px solid var(--th-color-border);
  overflow: hidden;
}
.th-compare-bar__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.th-compare-bar__remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--th-color-danger);
  color: var(--th-neutral-0);
  border-radius: var(--th-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.th-compare-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--th-space-3);
  flex-shrink: 0;
}
.th-compare-bar__count {
  font-size: var(--th-text-sm);
  color: var(--th-color-text-secondary);
  white-space: nowrap;
}
.th-compare-bar__btn {
  padding: var(--th-space-2-5) var(--th-space-5);
  background: var(--th-color-primary);
  color: var(--th-neutral-0);
  border: none;
  border-radius: var(--th-radius-lg);
  font-size: var(--th-text-sm);
  font-weight: var(--th-font-semibold);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.th-compare-bar__btn:hover { background: var(--th-color-primary-hover); }
.th-compare-bar__btn:disabled { opacity: .5; cursor: not-allowed; }
.th-compare-bar__clear {
  background: none;
  border: none;
  color: var(--th-color-text-muted);
  font-size: var(--th-text-xs);
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 576px) {
  .th-compare-bar__inner { padding: var(--th-space-2) var(--th-space-3); gap: var(--th-space-2); }
  .th-compare-bar__item { width: 44px; height: 44px; }
  .th-compare-bar__count { display: none; }
}

/* ── Karşılaştırma Checkbox (kart içi) ── */
.th-card__compare {
  position: absolute;
  bottom: var(--th-space-2);
  left: var(--th-space-2);
  z-index: 5;
  width: 18px;
  height: 18px;
  accent-color: var(--th-color-primary);
  cursor: pointer;
}

/* ── Karşılaştırma Modal ── */
.th-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-compare-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.th-compare-modal__content {
  position: relative;
  background: var(--th-neutral-0);
  border-radius: var(--th-radius-xl);
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--th-shadow-2xl);
}
.th-compare-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--th-space-5);
  border-bottom: 1px solid var(--th-color-border-light);
}
.th-compare-modal__header h3 {
  margin: 0;
  font-size: var(--th-text-lg);
  font-weight: var(--th-font-bold);
}
.th-compare-modal__close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--th-color-bg-secondary);
  border-radius: var(--th-radius-full);
  font-size: var(--th-text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th-compare-modal__body {
  padding: var(--th-space-5);
}