/* Floortrim UK — bileşen CSS 09/19: Varyantlı ürün (renk seçici, fiyat), kart taban hizası, ürün galerisi, benzer ürünler maskesi.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* --- Varyantlı ürün: renk seçici + fiyat. WooCommerce'in native <select>'i ve fiyat
   çıktısı monokrom deriye boyanır; seçici, katalog sıralama kutusuyla
   (07-catalog-toolbar-share.css .ft-shop-toolbar .woocommerce-ordering select) aynı dilde:
   "koyu chip + çizilmiş ok". --- */
.ft-product-single__summary .variations {
	width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0 0;
}

.ft-product-single__summary .variations th,
.ft-product-single__summary .variations td {
	padding: 0 0 0.75rem;
	text-align: left;
	vertical-align: middle;
	border: 0;
}

.ft-product-single__summary .variations th.label {
	width: 1%;
	white-space: nowrap;
	padding-right: 1rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-spec-muted);
}

body.ft-skin-spec .ft-product-single__summary .variations select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background-color: var(--color-spec-1);
	background-image: linear-gradient(45deg, transparent 50%, var(--color-on-spec-muted) 50%), linear-gradient(135deg, var(--color-on-spec-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--color-spec-line);
	border-radius: var(--radius);
	color: var(--color-on-spec);
	font-family: var(--font-body);
	font-size: 0.85rem;
	min-height: 44px;
	padding: 0 2.25rem 0 1rem;
	cursor: pointer;
	transition: border-color var(--dur-press) var(--ease-out);
}

body.ft-skin-spec .ft-product-single__summary .variations select:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	body.ft-skin-spec .ft-product-single__summary .variations select:hover {
		border-color: var(--color-orange-bright);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ft-skin-spec .ft-product-single__summary .variations select {
		transition: none;
	}
}

/* "Clear" (secimi sifirla) baglantisi — varyasyon secilene kadar gizli kalir */
.ft-product-single__summary .reset_variations {
	display: inline-block;
	margin-bottom: 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-spec-muted);
}

/* Fiyat: başlık altında tek satır, display font.
   RENK KURALI: WooCommerce kendi woocommerce.css'inde
   `.woocommerce div.product p.price, .woocommerce div.product span.price`
   icin yesil #77a464 tanimlar (0,3,2). Monokrom kimlikte renk YASAK oldugu icin
   asagidaki secici bilerek `body.ft-skin-spec.woocommerce div.product` ile
   ozgullugu yukseltir (0,4,1) — temanin sekme/breadcrumb kurallarindaki desenin
   aynisi. Kisaltilirsa fiyat yesile doner. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__summary .price,
body.ft-skin-spec.woocommerce div.product .ft-product-single__summary .woocommerce-variation-price .price,
.ft-product-single__summary .price,
.ft-product-single__summary .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--color-on-spec);
}

.ft-product-single__summary .woocommerce-variation-price {
	margin-top: 0.25rem;
}

.ft-product-single__summary .price del {
	opacity: 0.55;
	margin-right: 0.4rem;
}

/* Urun kartlarinda fiyat (kategori/arama/shop listeleri).
   Sarmalayıcı .ft-product-card__price (content-product.php), içerideki
   .woocommerce-Price-amount WooCommerce'indir. Sayısal değer → mono (sonuç sayacıyla aynı dil). */
.ft-product-card__price {
	margin: 0.15rem 0 0.65rem;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--color-on-spec-muted);
}

.ft-product-card__price .woocommerce-Price-amount {
	color: var(--color-on-spec);
}

.ft-product-card__price del {
	opacity: 0.55;
	margin-right: 0.35rem;
}


/* ===========================================================================
   Kart taban hizası + ürün galerisi küçük resim şeridi
   =========================================================================== */

/* --- (1) Kart tabani: fiyat + CTA satir boyunca AYNI y'de ---------------
   Kartlar zaten grid ogesi olarak ayni yukseklige geriliyor (olculdu: satir
   ici cardH esit). Sorun icerigin ustte toplanmasi: 2 satirlik baslikta CTA
   yukarida, 3 satirlik baslikta asagida kaliyordu (1440'ta 23px sapma
   olculdu). Sabit yukseklik/sihirli sayi YOK: fiyat blogu `margin-top:auto`
   ile kartin tabanina itilir, CTA onun ardindan geldigi icin ikisi de satir
   boyunca hizalanir. Tema genelinde box-sizing sifirlamasi olmadigi icin
   height:100% ile birlikte border-box ACIKCA verilir. */
.ft-product-card {
	box-sizing: border-box;
	height: 100%;
}

.ft-product-card__price {
	margin-top: auto;
}

/* Karttaki CTA: `inline-block` genisligi metne baglıydi ve dar kartta kart
   ic genisligini asiyordu (375'te kart ici 295px, buton 325px olculdu).
   Kart icinde blok CTA -> her kartta ayni genislik, tasma yok, 44px dokunma
   hedefi. Kart disindaki .ft-quote-cta kullanimlari (urun ozeti, formlar)
   ETKILENMEZ. */
.ft-product-card .ft-quote-cta {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1rem;
	text-align: center;
}

/* --- (2) Urun galerisi: ana gorsel kutusu + kucuk-resim tile'lari -------
   Kok neden (olculdu): WooCommerce'in kendi kurali
   `.woocommerce div.product div.images .flex-control-thumbs li { width:25%; float:left }`
   ozgullukte (0,4,3) temanin (0,2,1) kuralini yeniyordu -> grid hucresi 131px
   olmasina ragmen <li> hucrenin %25'ine (32,75px) dusuyor, gorsel de onun
   %100'u kadar kaliyordu. 1440'ta 143px'lik hucrede 35px'lik kucuk resim.
   Cozum ozgullugu Woo'nun ustune cikarmak + tile'i sabit oranli kutuya
   oturtmak. `contain` (cover DEGIL): bunlar beyaz zeminde profil kesiti
   fotograflari, kirpmak urunu keser. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs li,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs li {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Tile: kare kutu, ic dolgu, notr yuzey. FlexSlider `onload` ile img'in
   width/height NITELIKLERINI dogal olcuye yaziyor (100x100) — CSS bunu ezer. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs img,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6px;
	background: var(--color-spec-1);
	border: 1px solid var(--color-spec-line);
	border-radius: var(--radius);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--dur-press) var(--ease-out);
}

/* Aktif tile göstergesi: --color-orange (→ --accent-deco) koyu temada beyaz; kenarlık + iç halka. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs img.flex-active,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--color-orange);
	box-shadow: inset 0 0 0 1px var(--color-orange);
}

@media (hover: hover) {
	body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs img:hover,
	body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs img:hover {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery ol.flex-control-thumbs img,
	body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery ol.flex-control-thumbs img {
		transition: none;
	}
}

/* Ana gorsel: urunun 5 fotografinin oranlari cok farkli (600x128, 600x400,
   600x900, 560x373, 600x450) -> FlexSlider smoothHeight aktif slaytin
   yuksekligine gore kutuyu yeniden olculendiriyordu, slayt degisince duzen
   zipliyordu (1440'ta 119px <-> 560px olculdu). Slayt kutusu sabit en-boy
   oranina alinir; gorsel kutunun icine `contain` ile oturur.
   DIKKAT — box-sizing BILEREK content-box: FlexSlider slayt genisligini
   `viewport - (slaytin border+padding'i)` olarak hesaplayip inline `width`
   yaziyor (olculdu: 560px viewport -> `width:558px`). Slaytta border-box
   olsaydi 558px TOPLAM genislik olur, viewport'un sagında 2px'lik bir seritten
   bir sonraki slayt sizardi (375'te goruldu). content-box'ta 558 + 2px
   kenarlik = 560 -> tam oturur. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery .woocommerce-product-gallery__image,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery .woocommerce-product-gallery__image {
	box-sizing: content-box;
	aspect-ratio: 4 / 3;
	background: var(--color-spec-1);
	border: 1px solid var(--color-spec-line);
}

/* CLS: FlexSlider kurulurken slaytlari ~90 ms boyunca alt alta
   dizip .flex-viewport'u ~3.150 px'e uzatiyor, alttaki sekmeler itilip geri geliyordu
   (Lighthouse masaustu CLS 0,157). Gorunum alani slaytla ayni 4:3 oranina baştan
   sabitlenir; FlexSlider'in kendi inline overflow:hidden'i fazlasini kirpar. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery .flex-viewport,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery .flex-viewport {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery .woocommerce-product-gallery__image > a,
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

body.ft-skin-spec.woocommerce div.product .ft-product-single__gallery .woocommerce-product-gallery__image img:not(.zoomImg),
body.ft-skin-spec.woocommerce-page div.product .ft-product-single__gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	background: transparent;
}

/* --- Benzer ürünler şeridi — kaydırmaya duyarlı maske + erişilebilir scrollbar ---
   06-product-sections.css "Benzer ürünler şeridi" (.related ul.products; statik yedek:
   yalnız sağ solma) üzerine iki katman:
   1) @supports (animation-timeline: scroll(self inline)) — destekleyen
      tarayicida maske kaydirma konumuna baglanir: basta sol solma yok (ilk
      kart hep tam gorunur), sonda sag solma yok (son kart hep tam gorunur),
      ikisi arada. prefers-reduced-motion altinda animasyon kapanir, sabit
      SAG-solma-yalniz fallback'e duser.
   2) Gizli scrollbar yerine ince/monokrom scrollbar (scrollbar-color +
      webkit ince cubuk) — "daha fazla urun var" ipucu artik sadece maskeye
      degil gorunur bir iz'e de dayanir. NOT: klavye ile odaklanip oklarla
      kaydirma icin <ul> uzerinde tabindex="0" gerekir — bu CSS'ten
      cozulemez, sablon (template-parts) tarafinda degil (bkz. rapor). --- */

@supports (animation-timeline: scroll(self inline)) {
	@property --ft-related-fade-l {
		syntax: '<length>';
		inherits: true;
		initial-value: 0px;
	}
	@property --ft-related-fade-r {
		syntax: '<length>';
		inherits: true;
		initial-value: 1.5rem;
	}

	@keyframes ft-related-scroll-fade {
		0% {
			--ft-related-fade-l: 0px;
			--ft-related-fade-r: 1.5rem;
		}
		8% {
			--ft-related-fade-l: 1.5rem;
			--ft-related-fade-r: 1.5rem;
		}
		92% {
			--ft-related-fade-l: 1.5rem;
			--ft-related-fade-r: 1.5rem;
		}
		100% {
			--ft-related-fade-l: 1.5rem;
			--ft-related-fade-r: 0px;
		}
	}

	body.ft-skin-spec .ft-product-single > .related ul.products {
		animation: ft-related-scroll-fade linear both;
		animation-timeline: scroll(self inline);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--ft-related-fade-l), #000 calc(100% - var(--ft-related-fade-r)), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ft-related-fade-l), #000 calc(100% - var(--ft-related-fade-r)), transparent 100%);
	}

	@media (prefers-reduced-motion: reduce) {
		body.ft-skin-spec .ft-product-single > .related ul.products {
			animation: none;
			mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
			-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
		}
	}
}

body.ft-skin-spec .ft-product-single > .related ul.products {
	scrollbar-width: thin;
	scrollbar-color: var(--color-on-spec-muted) var(--color-spec-1);
}

body.ft-skin-spec .ft-product-single > .related ul.products::-webkit-scrollbar {
	display: block;
	height: 5px;
}

body.ft-skin-spec .ft-product-single > .related ul.products::-webkit-scrollbar-track {
	background: var(--color-spec-1);
}

body.ft-skin-spec .ft-product-single > .related ul.products::-webkit-scrollbar-thumb {
	background: var(--color-on-spec-muted);
	border-radius: var(--radius);
}