/* Catalogue pages (/urunler, brand and category): rules only these pages use. Loaded after style.css through the pageCss prop of Layout. */

/* ==========================================================================
   Catalog Page Layout (urunler.html Filters & Layout)
   ========================================================================== */
.catalog-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.sidebar-widget {
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-widget:last-child {
  border: none;
  margin: 0;
  padding: 0;
}

.widget-title {
  margin-top: 0;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

/* Search widget */
.search-wrapper {
  position: relative;
}

.search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px var(--accent-glow-strong);
}

.search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* Filters List */
.filter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-item:hover, .filter-item.active {
  background-color: var(--bg-secondary);
  color: var(--accent-blue);
  padding-left: 1.15rem;
  border-left: 3px solid var(--accent-blue);
}

.filter-item.active {
  font-weight: 700;
}

.filter-count {
  font-size: 0.75rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  color: var(--text-muted);
}

/* Yan menü bölümlerinin görünürlüğünü sunucu belirler (src/pages/CatalogPage.tsx) */
/* Header sort catalog */
.catalog-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.25rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.sort-select:focus {
  border-color: var(--accent-blue);
}

@media (max-width: 968px) {
  .catalog-layout {
      grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pagination Controls
   ========================================================================== */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.page-btn.num-btn {
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

.page-btn:hover {
  border-color: var(--border-hover);
  background-color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px var(--shadow-hover);
}

.page-btn.active {
  background-color: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
  box-shadow: 0 6px 20px var(--accent-glow-strong);
}

.page-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  box-shadow: none;
}

.page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   Katalog (js/catalog.js): yükleniyor iskeleti, hızlı ekle, erişilebilirlik
   ========================================================================== */
.product-skeleton { pointer-events: none; cursor: default; }

.skeleton-line { height: 0.9rem; margin-top: 0.85rem; }

.filter-empty { padding: 0.5rem; font-size: 0.85rem; opacity: 0.7; font-style: italic; }

.filter-item.back-btn-item {
  border-bottom: 1px dashed var(--border-color);
  margin-bottom: 0.5rem; padding-bottom: 0.5rem;
  font-weight: 700; color: var(--accent-blue);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block, .skeleton-line { animation: none; }
}

.catalog-heading { margin-bottom: 1.25rem; }

.catalog-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 0.35rem; }

.catalog-intro { color: var(--text-secondary); max-width: 70ch; margin: 0; line-height: 1.6; }

.catalog-intro:empty { display: none; }

.all-products-title { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0 0 1rem; }

.all-products-title[hidden] { display: none; }

[data-theme="dark"] .product-card-off .product-img { padding: 0.75rem; border-radius: var(--radius-sm); }

.product-card-off .product-brand { color: var(--text-secondary); }

.product-card-off:hover .product-img { transform: none; }

/* Card footer: same row height as an active card; the muted state and the way on to products for sale take the place of "Teklif Alın" */
.product-card-off .product-footer { min-height: 36px; }

.product-alt { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; min-height: 36px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; }

.product-alt-go, .product-alt-arrow { flex: 0 0 auto; }

.product-alt-go { color: var(--accent-blue); font-weight: 700; white-space: nowrap; }

.product-alt-arrow { width: 14px; height: 14px; color: var(--accent-blue); transition: transform 0.2s ease; }

a.product-alt:hover .product-alt-go { text-decoration: underline; }

a.product-alt:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 6px; }

[dir="rtl"] a.product-alt:hover .product-alt-arrow { transform: scaleX(-1) translateX(3px); }

/* ==========================================================================
   Katalog araç çubuğu (arama + filtre düğmesi + sıralama)
   ========================================================================== */
.catalog-search { width: 100%; min-width: 0; }

.catalog-toolbar-row { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }

/* Masaüstü: arama sol sütunda markaların üstünde; başlık solda, sıralama başlığın sağında */
.catalog-layout { grid-template-rows: auto 1fr; row-gap: 0; }

.catalog-search-slot { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 1.5rem; }

.catalog-sidebar { grid-column: 1; grid-row: 2; }

.catalog-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }

.catalog-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }

.catalog-heading-row .catalog-heading { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.catalog-heading-row .catalog-toolbar-row { flex: 0 0 auto; padding-top: 0.2rem; }

.sort-wrapper { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }

.catalog-content-header { margin-bottom: 1.25rem; }

@media (max-width: 968px) {
  /* Telefon/tablet: başlık, arama, (Markalar + sıralama), sonuçlar sırasıyla alt alta */
  .catalog-layout { grid-template-rows: none; gap: 0; }
  .catalog-main, .catalog-heading-row { display: contents; }
  .catalog-heading { order: 1; margin-bottom: 0.9rem; }
  .catalog-search-slot { order: 2; grid-column: auto; grid-row: auto; margin-bottom: 0.6rem; }
  .catalog-heading-row .catalog-toolbar-row { order: 3; flex: none; padding-top: 0; margin-bottom: 0.75rem; }
  .all-products-title { order: 4; }
  .catalog-content-header { order: 5; }
  .products-grid { order: 6; }
  .pagination-controls { order: 7; }
  .catalog-toolbar-row { gap: 0.6rem; }
  /* Markalar düğmesi ve sıralama kutusu birebir aynı yükseklikte (iOS Safari yerel select boyutunu kullanmasın) */
  .catalog-toolbar-row { align-items: stretch; }
  .sort-wrapper { align-items: stretch; }
  .sort-select {
      -webkit-appearance: none; appearance: none;
      padding: 0 2rem 0 0.75rem; text-overflow: ellipsis;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px 8px;
    }
  .filter-toggle[aria-expanded="true"] { border-color: var(--accent-blue); }
  .sort-wrapper { flex: 1 1 0; min-width: 0; }
  .sort-wrapper label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sort-select { width: 100%; min-height: 46px; padding: 0 0.75rem; font-size: 0.85rem; }
  .search-input { min-height: 46px; font-size: 1rem; /* iOS yakınlaştırmayı önler */ }
  .catalog-content-header { margin-bottom: 0.9rem; font-size: 0.85rem; }
  .catalog-sidebar.open { transform: none; visibility: visible; transition-delay: 0s; }
  /* one list per sheet: the Categories button opens brands/categories only, the Tags button the tags only */
  .catalog-sidebar[data-sheet="filters"] #tag-widget { display: none; }
  .catalog-sidebar[data-sheet="tags"] #brand-widget, .catalog-sidebar[data-sheet="tags"] #category-widget { display: none !important; }
  .tag-toggle[hidden] { display: none; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--bg-primary); padding: 0.9rem 0 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border-color); font-size: 1.05rem; }
  .sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; border-radius: 4px; background: var(--border-hover); transform: translateX(-50%); }
  .sheet-close { width: 40px; height: 40px; display: grid; place-items: center; border: none; background: var(--bg-secondary); border-radius: 50%; color: var(--text-primary); cursor: pointer; }
  .sheet-backdrop.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sidebar-widget { margin: 0; padding: 0; border: none; }
  .sidebar-widget .widget-title { display: none; }
  .filter-list { gap: 0.15rem; }
  .filter-item { min-height: 48px; padding: 0 0.85rem; font-size: 0.95rem; }
  .filter-item:hover, .filter-item.active { padding-left: 0.85rem; }
}

@media (max-width: 680px) {
  .catalog-heading { margin-bottom: 0.9rem; }
  .catalog-title { font-size: 1.35rem; }
  .catalog-intro { font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pagination-controls { flex-wrap: wrap; gap: 0.35rem; }
  .page-btn { min-width: 40px; min-height: 40px; }
}

@media (min-width: 681px) and (max-width: 968px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

/* ==========================================================================
   Etiket filtresi (üretici etiketleri): kenar çubuğunda çip listesi, listenin üstünde seçili etiketler
   ========================================================================== */
.sidebar-widget[hidden], .active-tags[hidden] { display: none; }

.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag-item { max-width: 100%; }

.tag-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; min-height: 44px; padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 0.875rem; line-height: 1.25; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tag-chip .tag-name { min-width: 0; overflow-wrap: anywhere; }

.tag-chip .filter-count { flex: none; padding: 0.1rem 0.5rem; }

.tag-chip:hover { border-color: var(--border-hover); color: var(--accent-blue); }

.tag-chip.selected { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; font-weight: 600; }

.tag-chip.selected .filter-count { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: #fff; }

.tag-chip.selected:hover { background: var(--accent-blue-hover); color: #fff; }

.tag-chip.disabled { opacity: 0.5; cursor: not-allowed; }

.tag-chip .tag-x { font-size: 1.1rem; line-height: 1; }

.tag-chip:focus-visible, .tag-clear:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.tag-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; color: var(--accent-blue); font-size: 0.875rem; font-weight: 600; text-decoration: underline; }

.active-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }

@media (prefers-reduced-motion: reduce) {
  .tag-chip { transition: none; }
}