/* Ürünler sayfası (page-urunler.php): başlık bandı, kategori filtresi, ızgara, Trendyol bandı.
   Şekil kuralı: etkileşimli öğeler (chip, buton) hap, kartlar 8px. Gölge kullanılmaz. */

/* --- Liste --- */
.product-listing { padding: 2.5rem 0 5rem; }

.product-filter {
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter) 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.product-filter::-webkit-scrollbar { display: none; }
.product-filter[hidden] { display: none; }
.product-filter .product-filter__chip { /* özgüllük: genel button/Kit stillerini geçer */
	flex: none;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy);
	transition: background-color .2s, color .2s, border-color .2s;
}
.product-filter .product-filter__chip:hover { background: var(--color-white); border-color: var(--color-navy); color: var(--color-navy); }
.product-filter .product-filter__chip:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.product-filter .product-filter__chip.is-active,
.product-filter .product-filter__chip.is-active:hover {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.product-listing__count {
	margin: 20px 0 20px;
	font-size: 14px;
	color: var(--color-muted);
}
.product-listing__count[hidden] { display: none; }
.product-filter[hidden] ~ .product-grid { margin-top: 0; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-grid__item[hidden] { display: none; }

/* Görünme animasyonu: yalnızca JS çalışır ve hareket azaltılmamışsa. */
.has-reveal .product-grid__item:not(.is-in) { opacity: 0; transform: translateY(16px); }
.has-reveal .product-grid__item.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
	transition-delay: calc(var(--i, 0) * 60ms);
}

/* --- Trendyol bandı (gri zemin, koyu logo; anasayfada da kullanılır) --- */
.trendyol-band { padding: 3.5rem 0; background: #f3f3f5; color: var(--color-navy); }
.trendyol-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.trendyol-band__text { max-width: 44rem; }
.trendyol-band__logo { display: block; width: 120px; height: auto; margin-bottom: 18px; }
.trendyol-band .trendyol-band__title { margin: 0 0 8px; color: var(--color-navy); font-size: 1.75rem; line-height: 1.25; letter-spacing: -.01em; }
.trendyol-band__text p { margin: 0; color: #5b5b73; }
.trendyol-band__btn { flex: none; height: 48px; padding: 0 26px; font-size: 15px; }

/* --- Duyarlı --- */
@media (max-width: 1199px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
	.product-listing { padding: 1.5rem 0 3rem; }
	.product-grid { gap: 12px; }
	.trendyol-band { padding: 2.5rem 0; }
	.trendyol-band__inner { flex-direction: column; align-items: flex-start; }
	.trendyol-band__title { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal .product-grid__item:not(.is-in), .has-reveal .product-grid__item.is-in { opacity: 1; transform: none; transition: none; }
	.product-filter .product-filter__chip { transition: none; }
}

/* --- Kategori sayfası (taxonomy-urun-kategorisi.php) --- */
.product-filter a.product-filter__chip { display: inline-flex; align-items: center; } /* bağlantı çipi: buton çipiyle aynı görünüm */
.product-filter a.product-filter__chip:hover { border-color: var(--color-navy); color: var(--color-navy); }
.product-filter a.product-filter__chip.is-active:hover { color: var(--color-white); }

.product-empty { padding: 3rem 0; text-align: left; }
.product-empty p { margin: 0 0 20px; color: var(--color-text); }