/* Floortrim UK — bileşen CSS 05/19: Kategori arşiv hero'su ve kategori filtre chip'leri.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* --- Kategori arşiv hero'su: terim görseli başlığın arkasında, ana sayfa hero'suyla
   aynı scrim yaklaşımı (Spec derisi tonları). --- */
.ft-shop-header--visual {
	position: relative;
	overflow: hidden;
	max-width: none;
	padding: 0;
	display: flex;
	align-items: center;
	min-height: clamp(240px, 34dvh, 400px);
}

.ft-shop-header__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ft-shop-header--visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(19, 21, 23, 0.94) 15%, rgba(19, 21, 23, 0.62) 55%, rgba(19, 21, 23, 0.3));
}

.ft-shop-header--visual .ft-shop-header__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
}

.ft-shop-header--visual .ft-shop-header__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
	text-wrap: balance;
}

.ft-shop-header__desc {
	max-width: 44rem;
	color: var(--color-on-spec-muted);
	line-height: 1.7;
}

.ft-shop-header__desc p {
	margin: 0.5rem 0 0;
}

.ft-shop-filterbar {
	max-width: 72rem;
	margin: 0 auto;
	/* Yatay padding chip seridine (nav) tasindi: kenar fade mask'inin sonme payi
	   o padding'de yasar, chip hizasi 72rem kapsayiciyla ayni kalir. */
	padding: 1.25rem 0 0.5rem;
}

/* Kategori hero'su icindeki breadcrumb: sayfanin ustundeki ayri satir yerine
   basligin hemen ustunde ince iz (Woo'nun kendi merkezleme/padding kurallari
   hero icinde gecersiz kilinir). */
.ft-shop-header__crumbs {
	margin-bottom: 0.85rem;
}

body.ft-skin-spec .ft-shop-header__crumbs .woocommerce-breadcrumb {
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/* =========================================================================
   Kategori filtre şeridi — chip'ler
   Yapi: .ft-shop-filterbar > nav.ft-category-filter > a (chip).
   Chip = kategori gorselinden 28px yuvarlak thumb (varsa) + ad; koyu Spec
   deride --color-spec-1 zemin, Surface/acik deride beyaz zemin.
   Hareket sozlesmesi: YALNIZ transform+opacity gecisi (hover cerceve vurgusu
   ::after katmaninin opacity'siyle acilir, border-color ANIMASYONLANMAZ);
   sureler 160ms (sik kullanilan yuzey); hover'lar @media (hover:hover) icinde;
   prefers-reduced-motion motion.css'teki global anahtarla + asagidaki hedefli
   kuralla kapanir.
   ========================================================================= */

.ft-category-filter {
	display: flex;
	gap: 0.625rem;
	overflow-x: auto;
	/* Ust 2px pay: hover'daki translateY(-1px) mask/overflow'da kirpilmasin. */
	padding: 2px 1.5rem 0.75rem;
	margin: 0;
	list-style: none;
	/* Kaydirma hissi: yatayda chip'lere yumusak yaklasan snap. */
	scroll-snap-type: x proximity;
	scroll-padding-inline: 1.5rem;
	/* Kaydirma cubugu gizli; tasan icerigi kenar fade'i (mask) hissettirir. */
	scrollbar-width: none;
	/* Sol/sag kenarda 1.5rem fade — tasan chip yumusakca sonerek "devami var"
	   der; icerik sigiyorsa fade bolgesi bos padding'e denk gelir, gorunmez. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
}

.ft-category-filter::-webkit-scrollbar {
	display: none;
}

.ft-category-filter a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	flex: none;
	white-space: nowrap;
	/* Dokunma hedefi >= 44px (mobil). */
	min-height: 44px;
	padding: 0.375rem 1.125rem;
	border-radius: var(--radius);
	scroll-snap-align: start;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	background: var(--bg-raised);
	border: 1px solid var(--line);
	color: var(--fg);
	transition: transform 160ms var(--ease-out);
}

/* Thumb'li chip: yuvarlak gorsel sola yaslanir, sol padding daralir. */
.ft-category-filter a.ft-category-filter__chip--thumb {
	padding-left: 0.5rem;
}

.ft-category-filter__thumb {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-round);
	object-fit: cover;
	flex: none;
	/* Pasif chip'te hafif sonuk; hover/aktifte tam parlak (yalniz opacity). */
	opacity: 0.75;
	transition: opacity 160ms var(--ease-out);
}

/* Hover cercevesi: border-color animasyonu yerine ustte duran vurgu halkasi
   katmani opacity ile acilir (transform+opacity sozlesmesine uyar).
   --color-orange burada metin degil dekoratif cerceve -> kontrast kurali ihlal
   edilmez. */
.ft-category-filter a::after {
	content: '';
	position: absolute;
	inset: -1px;
	border: 1px solid var(--color-orange);
	border-radius: var(--radius);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms var(--ease-out);
}

@media (hover: hover) {
	.ft-category-filter a:hover {
		transform: translateY(-1px);
		color: var(--fg);
	}

	.ft-category-filter a:hover::after {
		opacity: 1;
	}

	.ft-category-filter a:hover .ft-category-filter__thumb {
		opacity: 1;
	}
}

.ft-category-filter a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Aktif chip = DOLGU rolü (açık zemin varsayımı); koyu derilerde ters dolgu:
   08-inverse-fill.css "Koyu deri: ters dolgu". */
.ft-category-filter a[aria-current='true'] {
	background: var(--fill-accent);
	border-color: var(--fill-accent);
	color: var(--on-fill-accent);
	font-weight: 600;
}

.ft-category-filter a[aria-current='true'] .ft-category-filter__thumb {
	opacity: 1;
}

/* Aktif chip'te hover halkasi anlamsiz (zemin zaten dolu vurgu). */
.ft-category-filter a[aria-current='true']::after {
	content: none;
}

/* — Spec derisi (koyu arsiv sayfalari): koyu chip zemini + soluk metin — */
body.ft-skin-spec .ft-category-filter a {
	background: var(--color-spec-1);
	border-color: var(--color-spec-line);
	color: var(--color-on-spec-muted);
}

@media (hover: hover) {
	body.ft-skin-spec .ft-category-filter a:hover {
		color: var(--color-on-spec);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ft-category-filter a:hover {
		transform: none;
	}
}