/* Floortrim UK — bileşen CSS 06/19: Ürün sayfası bölümleri: yorumlar, benzer ürünler, teknik çizim, ürün hero'su, çizim görüntüleyici.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* --- Ürün değerlendirme bölümü (#reviews, Spec derisi): Woo çekirdeğinin stilsiz
   formu site formlarıyla (wpcf7) aynı dile getirilir. --- */
.ft-product-single #reviews {
	border-top: 1px solid var(--color-spec-line);
	padding-top: 2rem;
	margin-top: 1rem;
}

.ft-product-single #reviews .woocommerce-Reviews-title,
.ft-product-single #reviews .comment-reply-title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	color: var(--color-on-spec);
	margin: 0 0 0.75rem;
	display: block;
}

.ft-product-single #reviews .woocommerce-noreviews {
	color: var(--color-on-spec-muted);
	margin: 0 0 1.75rem;
}

/* Yorum formu: kart icinde iki sutunlu (isim/e-posta), tam genislik metin alani */
.ft-product-single #review_form_wrapper {
	max-width: 44rem;
	background: var(--color-spec-1);
	border: 1px solid var(--color-spec-line);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.ft-product-single #reviews .comment-notes {
	color: var(--color-on-spec-muted);
	font-size: 0.85rem;
	margin: 0 0 1.25rem;
}

.ft-product-single #reviews .comment-form {
	display: grid;
	gap: 1rem;
}

.ft-product-single #reviews .comment-form > p {
	margin: 0;
}

@media (min-width: 640px) {
	.ft-product-single #reviews .comment-form {
		grid-template-columns: 1fr 1fr;
	}

	.ft-product-single #reviews .comment-form-rating,
	.ft-product-single #reviews .comment-form-comment,
	.ft-product-single #reviews .comment-form-cookies-consent,
	.ft-product-single #reviews .form-submit {
		grid-column: 1 / -1;
	}
}

.ft-product-single #reviews .comment-form label {
	display: block;
	font-size: 0.85rem;
	color: var(--color-on-spec-muted);
	margin-bottom: 0.4rem;
}

.ft-product-single #reviews .comment-form input[type="text"],
.ft-product-single #reviews .comment-form input[type="email"],
.ft-product-single #reviews .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--color-spec-0);
	border: 1px solid var(--spec-field-border);
	border-radius: var(--radius);
	padding: 0.7rem 0.85rem;
	color: var(--color-on-spec);
	font-family: var(--font-body);
	font-size: 0.95rem;
	min-height: 44px;
}

.ft-product-single #reviews .comment-form textarea {
	min-height: 8rem;
	line-height: 1.6;
	resize: vertical;
}

.ft-product-single #reviews .comment-form input:focus,
.ft-product-single #reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--color-orange-bright);
	box-shadow: 0 0 0 2px var(--focus-soft);
}

/* Yildiz secimi: Woo'nun ::before yildizlarini buyutup hizala */
.ft-product-single #reviews .comment-form-rating .stars {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1;
}

.ft-product-single #reviews .comment-form-rating .stars a {
	color: var(--color-orange);
	margin-right: 0.35rem;
}

/* Onay kutusu satiri: etiket kutunun yaninda, muted */
.ft-product-single #reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.ft-product-single #reviews .comment-form-cookies-consent input {
	margin: 0.15rem 0 0;
	accent-color: var(--color-orange);
	min-height: 0;
}

.ft-product-single #reviews .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
}

/* Gonder butonu: site CTA dili */
.ft-product-single #reviews #respond input#submit {
	appearance: none;
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	border: 0;
	border-radius: var(--radius);
	padding: 0.75rem 1.5rem;
	min-height: 44px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	cursor: pointer;
	transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.ft-product-single #reviews #respond input#submit:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.ft-product-single #reviews #respond input#submit:hover {
		opacity: 0.88;
	}
}

/* Mevcut yorumlar (bugun bos, ilerisi icin) */
.ft-product-single #reviews .commentlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.ft-product-single #reviews .commentlist .comment_container {
	background: var(--color-spec-1);
	border: 1px solid var(--color-spec-line);
	border-radius: var(--radius);
	padding: 1.25rem;
	display: flex;
	gap: 1rem;
}

.ft-product-single #reviews .commentlist img.avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-round);
	flex-shrink: 0;
}

.ft-product-single #reviews .commentlist .meta {
	color: var(--color-on-spec-muted);
	font-size: 0.85rem;
	margin: 0 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.ft-product-single #reviews #respond input#submit,
	.ft-product-single #reviews #respond input#submit:active {
		transition: none;
		transform: none;
	}
}

/* --- Benzer ürünler şeridi (.related, Spec derisi) ---
   Grid yerine yatay kaydirilabilir serit: kategorideki tum urunler sirayla,
   parmakla/trackpad ile saga sola kayar; kenarlarda maske fade kayacak icerik
   oldugunu hissettirir. Kart genisligi sabit -> satir yuksekligi tutarli. --- */
.ft-product-single > .related {
	/* min() -> dar ekranda 72rem sabiti tasmaya yol aciyordu (375'te 1152px) */
	width: min(72rem, 100%);
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 2.5rem 0 3rem;
}

.ft-product-single > .related > h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	color: var(--color-on-spec);
	margin: 0 0 1.25rem;
	padding: 0 1.5rem;
}

body.ft-skin-spec .ft-product-single > .related ul.products {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.25rem;
	max-width: none;
	margin: 0;
	padding: 0.25rem 1.5rem 1rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Yalnız sağ solma (sabit sol solma ilk kartı kırpıyordu). Statik yedek; kaydırmaya
	   duyarlı sürüm: 09-product-variations-gallery.css "Benzer ürünler şeridi" @supports bloğu. */
	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 li.product {
	flex: 0 0 auto;
	width: min(260px, 72vw);
	/* height:auto — kartın `height: 100%`'ü belirsiz yükseklikli flex şeritte `stretch`i
	   engelliyordu; auto ile kartlar eşit boy, fiyatın margin-top:auto'su CTA'yı tabana iter. */
	height: auto;
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	body.ft-skin-spec .ft-product-single > .related ul.products {
		scroll-snap-type: none;
	}
}

/* --- Teknik çizim bölümü (.ft-product-drawing) ---
   Cizimler siyah-beyaz ve beyaz zeminli: koyu sayfada okunur kalmalari icin
   ACIK kagit kart uzerinde, buyuk gosterilir (galerideki kucuk resim yerine). --- */
.ft-product-drawing {
	grid-column: 1 / -1;
	min-width: 0;
	margin-top: 1rem;
}

.ft-product-drawing__title {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-orange-bright);
	margin: 0 0 0.85rem;
}

/* Kart olcusu %50 kucultuldu (380px -> 190px tavan): cizim bir teknik ek,
   sayfanin agirlik merkezi degil. Buyugu "open full size" ile aciliyor. */
.ft-product-drawing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 190px));
	gap: 1rem;
}

.ft-product-drawing__item {
	margin: 0;
	background: #fff;
	border: 1px solid var(--color-spec-line);
	border-radius: var(--radius);
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ft-product-drawing__item img {
	width: 100%;
	height: auto;
	display: block;
}

.ft-product-drawing__item figcaption {
	text-align: right;
}

.ft-product-drawing__link {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-orange-text);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

@media (hover: hover) {
	.ft-product-drawing__link:hover { text-decoration: underline; }
}

/* --- Ürün sayfası hero'su: kategori hero'sunun DAR varyantı ---
   Ayni gorsel + scrim + eyebrow dili, yalniz yukseklik/padding kisilir; urun
   basligi zaten ozet sutununda oldugu icin hero yalniz breadcrumb + kategori
   adi tasir. --- */
.ft-shop-header--compact.ft-shop-header--visual {
	min-height: clamp(120px, 16dvh, 180px);
}

.ft-shop-header--compact .ft-shop-header__inner {
	padding: 1.5rem;
}

.ft-shop-header--compact .ft-shop-header__crumbs {
	margin-bottom: 0.5rem;
}

.ft-shop-header--compact .ft-section-eyebrow {
	margin-bottom: 0;
}

/* Hero geldigi icin urun izgarasinin ust bosluğu kisilir */
.ft-shop-header--compact + .ft-product-single {
	padding-top: 1.75rem;
}

/* Görselsiz ürün bandı: üst üste binen alt/üst boşluklar kırıntının altında ~115 px boşluk bırakıyordu. */
.ft-shop-header--compact:not(.ft-shop-header--visual) {
	padding-bottom: 0;
}

.ft-shop-header--compact:not(.ft-shop-header--visual) .ft-shop-header__inner {
	padding-bottom: 0.5rem;
}

/* Woo zoom eklentisi galeri gorselinin uzerine dogal boyutlu img.zoomImg birakiyor;
   kapsayici kirpmazsa dar ekranda sayfa yatay tasiyor (375'te olculdu). */
.ft-product-single .woocommerce-product-gallery__image {
	overflow: hidden;
}

.ft-product-single .woocommerce-product-gallery img.zoomImg {
	max-width: none;
}

/* Dar hero: kategori hero'sunun scrim'i 160px'lik bantta gorseli neredeyse
   tamamen yutuyordu -> daha hafif karartma + kadrajin ortasi. */
.ft-shop-header--compact.ft-shop-header--visual::after {
	background: linear-gradient(to right, rgba(19, 21, 23, 0.86) 12%, rgba(19, 21, 23, 0.5) 55%, rgba(19, 21, 23, 0.22));
}

.ft-shop-header--compact .ft-shop-header__bg {
	object-position: center 42%;
}

/* Urun fotograflari dikey (850x1362) — 1 sutunda sayfayi domine ediyordu.
   Yukseklik sinirlanir, gorsel kabin icinde tam gorunur (contain). */
/* Woo, galeri zoom ikonuna (.woocommerce-product-gallery__trigger) z-index:99 verir;
   bu deger kok yigin baglamina cikip yapiskan header'in (z-index:40) ONUNDE cizilirdi
   (ikon menünün üstünde asılı kalıyordu). Çözüm özgül seçici
   savasi degil, katman disiplini: galeri kapsayicisi kendi yigin baglamini acar, Woo'nun
   99'u ICERDE kalir, galeri butun olarak z-index:0 duzeyinde header'in ALTINDA olur.
   PhotoSwipe overlay'i <body>'ye eklendigi icin bu baglamdan etkilenmez. */
.ft-product-single__gallery {
	position: relative;
	z-index: 0;
}

.ft-product-single__gallery .woocommerce-product-gallery__image img {
	max-height: 560px;
	object-fit: contain;
	background: var(--color-spec-1);
	border-radius: var(--radius);
}

/* --- Çizim görüntüleyici (lightbox.js) --- */
.ft-product-drawing__zoom {
	display: block;
	cursor: zoom-in;
}

.ft-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem;
	background: rgba(8, 8, 8, 0.92);
	opacity: 0;
	transition: opacity 200ms var(--ease-out);
}

/* HAYATI: [hidden] tek basina yetmez — yukaridaki display:flex, UA stil sayfasinin
   [hidden]{display:none} kuralini ezer. O yuzden kapali overlay ekranda inset:0 ile
   duruyor (opacity:0) ve TUM tiklamalari yutuyordu; lightbox bir kez kapandiktan sonra
   tekrar açılamıyordu (elementFromPoint ile ölçüldü). */
.ft-lightbox[hidden] {
	display: none;
}

.ft-lightbox.is-open {
	opacity: 1;
}

.ft-lightbox__figure {
	margin: 0;
	max-width: min(760px, 92vw);
	max-height: 88dvh;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transform: scale(0.97);
	transition: transform 200ms var(--ease-out);
}

.ft-lightbox.is-open .ft-lightbox__figure {
	transform: none;
}

.ft-lightbox__figure img {
	max-width: 100%;
	max-height: 80dvh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: var(--radius);
	padding: 0.75rem;
	box-sizing: border-box;
}

.ft-lightbox__caption {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-surface-muted);
	text-align: center;
}

.ft-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--color-surface-3);
	border-radius: var(--radius);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.ft-lightbox__close:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.ft-lightbox__close:hover {
		border-color: var(--color-orange-bright);
	}
}

body.ft-lightbox-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ft-lightbox,
	.ft-lightbox__figure,
	.ft-lightbox__close {
		transition: none;
		transform: none;
	}
}