/* ============================================================
   LİSTELEME SAYFASI — KumandaCenter

   DEVRALINAN DOSYA İÇERİ ALINIYOR, ATILMIYOR.
   themes/default/mods/products/products.css 1.439 satır ve kartın
   dışında da iş yapıyor: filtre paneli (.product-filter-content,
   23 kural), ürün rozetleri (.product-list-badges, 22 kural),
   fiyat aralığı kaydırıcısı (bootstrap-slider .slider*), sayfalama.
   Bu dosyayı tümüyle değiştirmek o düzeneği de siler.

   Bu yüzden önce @import ile devralınan yükleniyor, sonra yalnız
   GÖRÜNÜM tasarıma çekiliyor. Yol sabit yazıldı: temel tema
   theme.settings.php'de 'default' olarak tanımlı.

   Not: ürün KARTI burada değil; kartın kendi stil dosyasında
   (layouts/products/product-list-item.default.css) — o dosya daha
   sonra yüklendiği için kart kuralları orada olmalı.
   ============================================================ */
@import url("/themes/default/mods/products/products.css");

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 14px 0 0;
	font-size: 12.5px;
	background: var(--breadcrumb-bg-color);
	color: var(--breadcrumb-color);
}
.breadcrumb a { color: var(--breadcrumb-color); font-weight: 500; }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before {
	content: "/"; color: var(--breadcrumb-seperator-color); padding-right: 8px;
}
.breadcrumb-item.active, .breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ---------- Kategori başlığı ---------- */
.products-area-header {
	background: var(--products-header-bg-color);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	margin: 16px 0 18px;
}
.products-area-header h1,
.products-area-header .h1 {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 700;
	color: var(--ink);
	margin: 0;
}
.products-area-header p { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); max-width: 680px; line-height: 1.6; }
.products-area-header .count,
.products-area-header .total { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* ---------- Araç çubuğu (sıralama / görünüm) ---------- */
/* YIĞILMA SIRASI — mega menü bu barın ALTINDA kalıyordu

   Devralınan tema (themes/default/mods/products/products.css:34)
   bu barı `position:sticky; z-index:1050` yapıyor. Ataları static
   olduğu için bar KÖK yığılma bağlamında 1050'de duruyor.

   Mega menü ise header'ın içinde: `#header{position:relative;
   z-index:50}` bir yığılma bağlamı açıyor, dolayısıyla `.mega`nın
   kendi z-index:60 değeri o bağlamın İÇİNDE anlamlı — dışarıya
   karşı header'ın 50'si geçerli. 50 < 1050, mega barın altında
   kalıyordu. İç değeri büyütmek çözmez; bağlam aşılamaz.

   Barın 1050'ye ihtiyacı yok: yalnız ürün ızgarasının (auto/0)
   üstünde olması yeterli. 20 veriliyor; header'ın durağan hâli (50)
   ve kaydırınca aldığı sabit hâli (200) artık barın üstünde kalıyor.
   Ölçüldü: kaydırınca header `position:fixed; z-index:200; yükseklik
   120px` oluyor ve bar zaten `top:120` ile tam altına oturuyor. */
.products-toolbar {
	z-index: 20;
	background: var(--products-toolbar-bg-color);
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 16px;
}
.products-toolbar .custom-select,
.products-toolbar select {
	border-color: var(--seperator-color);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}
.products-toolbar .btn {
	border-radius: var(--radius-sm);
	border-color: var(--seperator-color);
	color: var(--muted);
}
.products-toolbar .btn.active,
.products-toolbar .btn:hover { color: var(--primary-color); background: var(--light-gray); }

/* ---------- Filtre sütunu ---------- */
.product-filter {
	background: #fff;
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius);
	margin-bottom: 14px;
	overflow: hidden;
}
.product-filter-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 15px;
	border-bottom: 1px solid var(--seperator-color);
	background: transparent;
}
.product-filter-header-title {
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 800;
	color: var(--ink);
	margin: 0;
}
.product-filter-header-actions a,
.product-filter-header-actions .btn { font-size: 11.5px; color: var(--accent-color); font-weight: 600; }
.product-filter-content { padding: 10px 13px 13px; }

/* filtre satırları — tasarımdaki .f-check dili */
.product-filter-content label,
.product-filter-content .custom-control-label {
	display: flex; align-items: center; gap: 9px;
	padding: 5px 2px;
	font-size: 13px; font-weight: 500; color: var(--ink);
	cursor: pointer;
	margin: 0;
}
.product-filter-content input[type="checkbox"],
.product-filter-content input[type="radio"] { accent-color: var(--accent-color); cursor: pointer; }
.product-filter-content .total,
.product-filter-content .count {
	margin-left: auto;
	font-size: 11.5px; font-weight: 600; color: var(--muted-soft);
}
.product-filter-content a { color: var(--muted); }
.product-filter-content a:hover { color: var(--primary-color); }

/* fiyat aralığı kaydırıcısı — token'lara bağlanıyor */
.slider-track-high { background: var(--range-slider-high); }
.slider-track-low { background: var(--range-slider-low); }
.slider-selection { background: var(--range-slider-selection); }
.slider-handle { background: var(--range-slider-handle); border: 2px solid #fff; box-shadow: var(--shadow-sm); }

/* seçili filtre çipleri */
.products-filter-selecteds .badge,
.product-filter-selected {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--primary-tint);
	color: var(--primary-color);
	font-size: 12.5px; font-weight: 600;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	margin: 0 6px 6px 0;
}

/* ---------- Ürün ızgarası ----------
   Devralınan şablon kartları Bootstrap kolonlarına koyuyor; eşit
   yükseklik için satır esnetilir. */
.products-list .row,
.products-row { align-items: stretch; }
.products-list .row > [class*="col-"],
.products-row > [class*="col-"] { display: flex; margin-bottom: 18px; }
.products-list .row > [class*="col-"] > * { width: 100%; }

/* ---------- Sayfalama ---------- */
.products-pagination { margin: 26px 0 8px; }
.pagination { gap: 5px; }
.page-link {
	border-radius: var(--radius-sm);
	border-color: var(--seperator-color);
	color: var(--ink);
	font-weight: 600;
	font-size: 13.5px;
}
.page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
.page-link:hover { background: var(--light-gray); color: var(--primary-color); }

/* ---------- Boş sonuç ---------- */
.products-empty,
.product-list-empty {
	text-align: center;
	padding: 48px 20px;
	background: #fff;
	border: 1px solid var(--seperator-color);
	border-radius: var(--radius-lg);
	color: var(--muted);
}

@media (max-width: 991px) {
	.products-area-header { padding: 18px; }
	.products-area-header h1 { font-size: 21px; }
}

/* ============================================================
   SIRALAMA DÜĞMESİ — boş basılıyordu

   Products::getSortList() geçerli sıralamayı
   $sorters[$this->sort_default] üzerinden alıyor; sort_default = 0 ve
   0 anahtarlı bir sıralayıcı TANIMLI DEĞİL. Bu yüzden hiçbir sıralama
   seçilmemişken products.sort.current boş geliyor ve şablon
       <i class=""></i> <span class="…"></span>
   basıyor. Ölçüldü (1440px, kategori sayfası): düğme 59×21px ve
   içinde tek karakter yok — kullanıcının tıklayabileceği bir şey
   görünmüyor. ?sort=1 ile gelindiğinde düzgün doluyor ("Artan Fiyat").

   sort_default'u 1 yapmak düğmeyi doldururdu ama listenin varsayılan
   sırasını fiyata çevirirdi; stokta olanı öne alan mevcut sıra daha
   iyi. Bu yüzden eksik olan yalnız ETİKET, onu burada veriyoruz.
   Dolu geldiğinde :empty tutmaz, kural kendiliğinden devre dışı kalır.
   ============================================================ */
#productsSortMenu > span:empty::before {
	content: "Sırala";
}
#productsSortMenu > span:empty {
	display: inline !important;   /* d-none d-md-inline-block'u aş */
}

/* İkon basılmıyor: sınıfsız <i> için FontAwesome glifini CSS'ten
   vermeyi denedim, kural eşleşti ama içerik boş kaldı. Metin etiketi
   zaten yeterli bir tutamak; süs için çalışmayan bir kural
   bırakmıyoruz. Sıralama seçildiğinde platform kendi ikonunu basıyor. */

/* ============================================================
   UZUN FİLTRE LİSTELERİ — kaydırmalı

   Gruplar artık açık başlıyor (assets/js/kumandacenter.js). Bu,
   kapalıyken görünmeyen bir sorunu ortaya çıkardı: ölçüldü
   (1440px, /Uzaktan-Kumandalar.html) marka grubu 2.531px —
   yan sütun 3.057px, ürün listesi 2.739px. Yani marka listesi
   sayfadan uzun.

   Tasarımda böyle bir sınır yok çünkü örneğindeki marka listesi
   kısa; bu katalogda tek kategoride yüzlerce marka var. Veriye
   göre uyarlama.

   max-height kısa listeleri etkilemez — kendiliğinden devre dışı.
   ============================================================ */
.product-filter-content .list-group {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.product-filter-content .list-group::-webkit-scrollbar { width: 8px; }
.product-filter-content .list-group::-webkit-scrollbar-thumb {
	background: var(--seperator-dark-color);
	border-radius: 4px;
}
.product-filter-content .list-group::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   YERLEŞİM — tasarımın .plp-layout / .plp-grid ölçüleri

   Köprü şimdiye kadar yalnız RENK ve ÇERÇEVE veriyordu; yerleşim
   devralınan temadan geliyordu (yan sütun 300px, ızgara 4 kolon,
   flex). Tasarım 262px yan sütun ve 3 kolonluk ızgara istiyor —
   kullanıcı "tasarımla çok farklı" derken görünen fark büyük
   ölçüde buydu.

   Tasarımın kendi pages/products.css dosyası YÜKLENMİYOR ve
   yüklense de işe yaramaz: platform .plp-* sınıflarını hiç
   basmıyor (ölçüldü: sayfada 0 tane). Bu yüzden kurallar
   platformun gerçek sınıflarına port ediliyor.
   ============================================================ */

/* ÖZGÜLLÜK NOTU
   Devralınan kurallar bu dosyanın başındaki @import ile geliyor ve
   NİTELENMİŞ seçiciler kullanıyor:
       .products-row .products-row-inner
       .products-row .products-list
       .products-area.filters-active .products-filters
   Tek sınıflı bir kural bunları yenemez. İlk sürümde .products-list
   yazıldı ve display sessizce uygulanmadı; ızgara ölçüleri geçti ama
   display geçmedi, sayfa yarı taşınmış hâlde kaldı. Aşağıdaki
   seçiciler devralınanlarla aynı nitelikte. */

/* .plp-layout → .products-row-inner */
.products-row .products-row-inner {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding-bottom: 40px;
}
@media (max-width: 991px) {
	.products-row .products-row-inner { display: block; }
}

/* .plp-filters → .products-filters
   DİKKAT: mobilde bu öğe position:fixed bir çekmece ve platform onu
   display none/block ile açıp kapıyor; display kuralı yalnız
   masaüstünde. */
@media (min-width: 992px) {
	.products-area.filters-active .products-filters,
	.products-row .products-filters {
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: auto;
		max-width: none;
	}
	.products-row .products-filters .product-filter { margin-bottom: 0; }
}

/* .plp-grid → .products-list */
.products-row .products-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
	width: auto;
}
@media (max-width: 1100px) { .products-row .products-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px)  { .products-row .products-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .products-row .products-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Izgara kolonu genişliği verir; kartın kendi flex-basis'i karışmasın */
.products-row .products-list > .product-list-item {
	width: auto;
	max-width: none;
	margin: 0;
	flex: initial;
}

/* Tam genişlik isteyen satırlar */
.products-row .products-list > .list-basics { grid-column: 1 / -1; }

/* ============================================================
   HIZLI FİLTRE — uzun listelerin üstündeki arama kutusu
   assets/js/kumandacenter.js takıyor (8+ seçenekli gruplara).
   Tasarımın .f-search biçimi.
   ============================================================ */
.product-filter-content .f-search-wrap { padding: 2px 0 8px; }

.product-filter-content .f-search {
	width: 100%;
	border: 1px solid var(--seperator-color);
	border-radius: 9px;
	padding: 8px 11px;
	font-family: inherit;
	font-size: 12.5px;
	outline: none;
	background: var(--light-gray);
	-webkit-appearance: none;
	appearance: none;
}
.product-filter-content .f-search:focus {
	border-color: var(--primary-color);
	background: #fff;
}
/* iOS'ta 16px altı yazı tipi alana odaklanınca sayfayı yakınlaştırır */
@media (max-width: 991px) {
	.product-filter-content .f-search { font-size: 16px; padding: 10px 12px; }
}

.product-filter-content .f-search-durum {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--muted-soft);
	padding: 5px 2px 0;
	min-height: 17px;
}
.product-filter-content .f-search-durum.bos { color: var(--danger-color); }

/* Gizlenen seçenek kaydırma yüksekliğini de bırakmalı */
.product-filter-content .list-group-item[hidden] { display: none !important; }

/* ============================================================
   BAŞLIK BÖLGESİ — tasarımın .breadcrumb-bar + .plp-header'ı
   Kırıntı artık başlığın ÜSTÜNDE, ayrı bir şeritte (şablon
   block.products.area-header değiştirildi).
   ============================================================ */
.breadcrumb-bar { padding: 16px 0 0; }
.breadcrumb-bar .breadcrumb {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 0;
	font-size: 12.5px;
	background: transparent;
}
.breadcrumb-bar .breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb-bar .breadcrumb li + li::before { content: "/"; color: var(--breadcrumb-seperator-color); }
.breadcrumb-bar .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: none; }
.breadcrumb-bar .breadcrumb .active { color: var(--ink); font-weight: 600; }

/* Başlıktaki ürün sayısı — tasarımda h1'in yanında, ikincil */
.products-area-header h1 {
	display: flex;
	align-items: baseline;
	gap: 11px;
	flex-wrap: wrap;
}
.products-area-header h1 .count {
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
}
@media (max-width: 575px) {
	.products-area-header { padding: 18px; }
	.products-area-header h1 { font-size: 21px; }
}

/* ---------- Sıralama seçicisi (tasarımın .pt-sort'u) ---------- */
.products-toolbar .pt-sort {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
	font-weight: 600;
}
.products-toolbar .pt-sort select {
	border: 1px solid var(--seperator-color);
	border-radius: 9px;
	padding: 7px 10px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
	outline: none;
	cursor: pointer;
}
.products-toolbar .pt-sort select:focus { border-color: var(--primary-color); }

@media (max-width: 575px) {
	.products-toolbar .pt-sort { flex: 1 1 auto; min-width: 0; }
	/* iOS yakınlaştırmasını önlemek için 16px */
	.products-toolbar .pt-sort select { width: 100%; min-width: 0; font-size: 16px; }
	.products-toolbar .pt-sort > span { flex: 0 0 auto; }
}

/* ============================================================
   AKTİF FİLTRE ÇİPLERİ (tasarımın .active-filters'ı)
   Kaynak: yan sütundaki "Seçimler" grubu — her satır o filtreyi
   KALDIRAN adrese bağlı. assets/js/kumandacenter.js türetiyor.
   ============================================================ */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.af-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--primary-color);
	background: var(--primary-tint);
	border-radius: var(--radius-pill);
	padding: 7px 8px 7px 13px;
}
.af-chip a {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: rgba(6, 25, 61, .12);
	color: var(--primary-color);
	font-size: 10px;
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.af-chip a:hover { background: var(--danger-color); color: #fff; }
.af-clear {
	font-size: 12.5px; font-weight: 700; color: var(--muted);
	text-decoration: underline; text-underline-offset: 3px;
}
.af-clear:hover { color: var(--danger-color); }

@media (max-width: 575px) {
	.active-filters { gap: 7px; }
	.af-clear { flex: 0 0 100%; }
}

/* Aktif filtre şeridi ızgaranın İÇİNDE, tüm kolonları kaplar */
.products-row .products-list > .active-filters { grid-column: 1 / -1; }

/* ============================================================
   KAP — listeleme sayfası BOXED olmalı

   Tasarım boxed: --container-max = 1240px. Sitede ürün detay ve
   içerik sayfaları bu kaba giriyor (.pd-wrap'in ebeveyni .container,
   ölçüldü: 1240px), ama LİSTELEME sayfasının içerik alanı hiçbir kaba
   sarılmamış — .products-area doğrudan main.body'nin çocuğu ve
   kenardan kenara açılıyordu (ölçüldü: 1425px @1440 görünüm).

   Yani fluid olan tek sayfa listelemeydi; tasarıma değil, sitenin
   kendi geri kalanına da aykırıydı.

   Şablona dokunmadan kabı burada veriyoruz; .container ile aynı
   değerler (themes/kumandacenter/assets/css/main.css:25).
   ============================================================ */
.products-area {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 18px;
}
/* İçerideki .container tekrar daraltıp iki kat boşluk vermesin */
.products-area > .container {
	max-width: none;
	padding-inline: 0;
	width: auto;
}

/* Devralınan genişlik payı ızgarada İKİ KEZ düşülüyordu.
   .products-area.filters-active .products-list { width: calc(100% - 300px) }
   kuralı eski yan yana yerleşim içindi; artık yan sütunun payını grid
   rayı veriyor, bu calc üstüne bir 300px daha kesiyordu. Ölçüldü:
   ray 820px, ızgara 520px, kart 163px.
   Devralınan seçici ÜÇ sınıflı; aynı niteliğe çıkılmadan ezilemiyor. */
.products-area.filters-active .products-list,
.products-area .products-row .products-list {
	width: auto;
}

/* Yan boşluğu artık kap veriyor; .products-row'un kendi margin'i
   (1200px üstünde 3rem) kabın içinde ikinci bir girinti yapıyordu. */
.products-area .products-row { margin-inline: 0; }