/* Floortrim UK — bileşen CSS 10/19: Alışveriş kontrolleri: sepete ekle, adet, birincil/ikincil eylem, satın alma bloğu, derili sayfalarda Woo bildirimleri; başlıktaki sepet bağlantısı.
   Yükleme sırası bağlayıcıdır: functions.php floortrim_uk_component_css_files(). */
/* ===========================================================================
   WooCommerce alışveriş kontrolleri — Add to cart, adet, sepet/checkout
   (woocommerce.css varsayılan moru #7f54b3 / Arial / 3px köşe yerine kimlik dili).

   DIL: birebir .ft-quote-cta — keskin kose (--radius: 0), Jost, 44px dokunma
   hedefi, basmada scale(0.97). Hareket: yalniz transform+opacity,
   --dur-press (120ms) + --ease-out, hover yalniz (hover: hover),
   prefers-reduced-motion'da kapali.

   ⚠️ SECICI TUZAGI (bu blok yazilirken iki kez yakalandi):
   1) `.woocommerce` sinifi BODY'NIN KENDISINDE duruyor, ayri bir sarmalayicida
      degil. Yani `body.ft-skin-spec .woocommerce X` HIC eslesmez; dogrusu
      `body.ft-skin-spec.woocommerce X` (iki sinif ayni ogede, nokta bitisik).
   2) Koyu deri override'i taban kuraldan DAHA OZGUL olmali: taban
      `.woocommerce .button.alt` = 0,3,0. Override `body...woocommerce .button.alt`
      = 0,3,1 ile onu gecer. Sadece `.single_add_to_cart_button` yazmak (0,2,1)
      YETMEZ, dolgu koyu kalir ve buton zeminle ayni renge duser.
   ======================================================================== */

/* --- Birincil eylem: sepete ekle / odemeye gec / siparisi tamamla --------- */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

/* --- Ikincil eylem: sepeti guncelle, kupon uygula, alisverise devam ------- */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
.woocommerce input.button:not(.alt) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.25rem;
	background: transparent;
	color: var(--fg);
	border: 1px solid currentColor;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 0.95rem;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.woocommerce .button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button:active,
.woocommerce .checkout-button:active,
.woocommerce #place_order:active {
	transform: scale(0.97);
}

@media (hover: hover) {
	.woocommerce .button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce a.button:hover,
	.woocommerce .checkout-button:hover,
	.woocommerce #place_order:hover {
		opacity: 0.88;
	}
}

/* --- Devre disi: varyantli uründe renk secilmeden buton pasif ------------- */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .wc-variation-selection-needed .single_add_to_cart_button {
	opacity: 0.45;
	cursor: not-allowed;
}

.woocommerce .button:disabled:active,
.woocommerce .button.disabled:active {
	transform: none;
}

/* --- AJAX durumlari: arsivde "ekleniyor" / "eklendi" ---------------------- */
.woocommerce .add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.woocommerce .add_to_cart_button.loading::after,
.woocommerce .add_to_cart_button.added::after {
	margin-left: 0.5em;
	opacity: 0.85;
}

/* "View cart" — buton degil, ikincil metin baglantisi */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0;
	background: none;
	border: 0;
	min-height: 0;
	font-family: var(--font-display);
	font-size: 0.9rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Adet kutusu --------------------------------------------------------- */
.woocommerce .quantity .qty {
	box-sizing: border-box;   /* min-height + padding: content-box'ta 62px'e sisiyordu */
	width: 5.5rem;
	height: 44px;
	padding: 0 0.6rem;
	background: transparent;
	color: inherit;
	border: 1px solid var(--line-control);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 0.95rem;
	text-align: center;
	/* Spinner oklari kaldirildi: dokunmatikte yanlislikla artiriliyor ve mono
	   hizalamayi bozuyor (uretim-takip'te de ayni karar alinmisti). */
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Adet + buton tek satirda, dar ekranda alt alta sarar */
.woocommerce form.cart,
.woocommerce .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* --- Odak halkasi: zeminle asla ayni renk olmamali ----------------------- */
.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce .quantity .qty:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .button,
	.woocommerce .button:active,
	.woocommerce .single_add_to_cart_button,
	.woocommerce .single_add_to_cart_button:active,
	.woocommerce .add_to_cart_button,
	.woocommerce .add_to_cart_button:active,
	.woocommerce .checkout-button,
	.woocommerce #place_order,
	.woocommerce #place_order:active {
		transition: none;
		transform: none;
	}
}

/* --- Koyu deri (urun/katalog sayfalari) — TERS DOLGU ---------------------
   Taban kural ACIK zemin varsayimiyla yazildi (is siyahi dolgu); koyu deride
   bu dolgu zeminle ayni renge duser. .ft-quote-cta ile ayni cozum: beyaz
   zemin + is siyahi etiket. Secici `body.X.woocommerce` (nokta bitisik) ve
   taban kuraldan daha ozgul — yukaridaki SECICI TUZAGI notuna bak. --- */
body.ft-skin-surface.woocommerce .button.alt,
body.ft-skin-spec.woocommerce .button.alt,
body.ft-skin-surface.woocommerce .single_add_to_cart_button,
body.ft-skin-spec.woocommerce .single_add_to_cart_button,
body.ft-skin-surface.woocommerce .add_to_cart_button,
body.ft-skin-spec.woocommerce .add_to_cart_button,
body.ft-skin-surface.woocommerce .checkout-button,
body.ft-skin-spec.woocommerce .checkout-button,
body.ft-skin-surface.woocommerce #place_order,
body.ft-skin-spec.woocommerce #place_order {
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	border-color: transparent;
}

body.ft-skin-surface.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
body.ft-skin-spec.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button) {
	color: var(--color-on-spec);
	border-color: var(--color-spec-line);
}

body.ft-skin-surface.woocommerce .quantity .qty,
body.ft-skin-spec.woocommerce .quantity .qty {
	color: var(--color-on-spec);
	border-color: var(--color-spec-line);
}

/* Beyaz butonun UZERINDE beyaz odak halkasi gorunmez -> ofsetli halka,
   ic tarafta koyu bir cizgiyle desteklenir (mevcut .ft-quote-cta deseni). */
body.ft-skin-surface.woocommerce .button.alt:focus-visible,
body.ft-skin-spec.woocommerce .button.alt:focus-visible,
body.ft-skin-surface.woocommerce .single_add_to_cart_button:focus-visible,
body.ft-skin-spec.woocommerce .single_add_to_cart_button:focus-visible,
body.ft-skin-surface.woocommerce .checkout-button:focus-visible,
body.ft-skin-spec.woocommerce .checkout-button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	box-shadow: inset 0 0 0 1px var(--on-fill-accent);
}

/* --- Satın alma bloğu: hizalama + dikey ritim (etiket/seçici hizası, seçici ile buton
   arası ölü boşluk, "Category:" satırı tipografisi).

   ⚠️ ORTAK KÖK: woocommerce.css'in `.woocommerce div.product form.cart …`
   seciciler ailesi (0,3,2) temanin `.ft-product-single__summary .variations …`
   kurallarindan (0,2,1) DAHA OZGUL. Yani tema zaten `vertical-align: middle` ve
   `margin: 1.25rem 0 0` yaziyordu, Woo ikisini de eziyordu:
     .woocommerce div.product form.cart .variations td, … th { line-height:2em; vertical-align:top }
     .woocommerce div.product form.cart .variations         { margin-bottom: 1em }
     .woocommerce div.product form.cart .reset_variations   { font-size: .83em }
   Bu yuzden asagidaki kurallar bilerek AYNI on-eki kullanir (0,5,4) — kisaltilirsa
   Woo geri kazanir. On-ek deri sinifi ICERMEZ (`body.ft-skin-spec` degil), cunku
   bunlar duzen kurallari; renk kurallari asagida ayrica deriye baglanir. --- */

/* (1) Etiket <-> secici dikey hizasi. Woo'nun `line-height: 2em`i 12px etiket
   uzerinde 24px'lik bir satir kutusu uretiyor, `vertical-align: top` ile de
   hucrenin tepesine yapisiyordu. */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	line-height: 1.4;
	vertical-align: middle;
}

/* (2) Olu bosluk kaynagi 1/3: tablonun 16px alt marji + son satirin 12px alt
   dolgusu. Cok satirli (2+ oznitelikli) urunlerde satir arasi bosluk korunur,
   yalniz SON satirin altindaki dolgu sifirlanir. */
.woocommerce div.product form.cart table.variations {
	margin: 1.25rem 0 0;
}

.woocommerce div.product form.cart table.variations tr:last-child th,
.woocommerce div.product form.cart table.variations tr:last-child td {
	padding-bottom: 0;
}

/* (3) Olu bosluk kaynagi 2/3: "Clear" baglantisi. Woo onu yalniz
   `visibility`ile gizler -> gorunmezken bile 32px + 12px marj yer kapliyordu.
   `display: none` yapmak yerine secicinin YANINA alindi: satir 44px'e duser,
   baglanti islevsel kalir ve gorunur/gorunmez olurken DIKEY sicrama olmaz
   (yer yatayda hep ayrilmis durur). Sagda secicinin sag kenariyla — yani
   ustteki spec tablosunun sag kenariyla — hizalanir (dort genislikte olculdu). */
.woocommerce div.product form.cart table.variations td.value {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.woocommerce div.product form.cart table.variations td.value select {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce div.product form.cart .reset_variations {
	flex: 0 0 auto;
	margin-bottom: 0;
	font-size: 0.72rem;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* (4) Olu bosluk kaynagi 3/3: form.cart'in flex duzeni. Flex yalnizca BASIT
   urunde gerekli (adet + buton yan yana); varyantli formda o isi zaten
   .woocommerce-variation-add-to-cart yapiyor. Varyantli formda flex kalirsa
   Woo'nun `.reset_variations_alert` ekran-okuyucu satiri kendi flex satirini
   acar ve iki ek `gap` (2 x 12px) dogurur. Blok akisa dondurulur; tek ritim
   kaynagi asagidaki margin-top olur. */
.woocommerce div.product form.cart.variations_form {
	display: block;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	margin-top: 1.75rem;
}

/* Secim yapilinca dolan varyasyon kutusu (fiyat/stok/aciklama) — bos oldugu
   surece hicbir bosluk uretmemeli, yoksa buton sebepsiz asagi kayar. */
.woocommerce div.product form.cart .single_variation {
	margin: 0 0 0.75rem;
}

.woocommerce div.product form.cart .single_variation:empty {
	margin: 0;
}

/* (5) Stok satiri: Woo onu `#77a464` yesiline boyar (monokrom kimlikte YASAK).
   Fiyat kuralindaki desenin aynisi — `body…woocommerce div.product` ile
   ozgulluk yukseltilir. Dil: spec tablosu etiketleriyle ayni mono kucuk kapital. */
body.ft-skin-spec.woocommerce div.product .ft-product-single__summary .stock,
body.ft-skin-spec.woocommerce div.product .ft-product-single__summary .woocommerce-variation-availability p {
	margin: 0.35rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-spec-muted);
}

/* (6) Adet kutusu koyu deride saydam zeminliydi; yanindaki secici ise dolu
   "chip". Ayni alan dili icin adet kutusu da doldurulur — kenarligi
   (--color-spec-line) tek basina zemine karsi cok zayif kaliyordu. */
body.ft-skin-surface.woocommerce .quantity .qty,
body.ft-skin-spec.woocommerce .quantity .qty {
	background-color: var(--color-spec-1);
}

/* (7) .product_meta — "Category: Staircase Profiles" iki ayri bilgi tasiyor:
   ETIKET ve DEGER. Sayfada yerlesik etiket dili mono 12px/uppercase/0.06em
   (spec tablosu ve COLOUR etiketi). Woo etiketi ciplak metin dugumu olarak
   basar (`<span class="posted_in">Category: <a>…</a></span>`), yani sablon
   degistirmeden ayirmanin tek yolu: SPAN'a etiket dilini vermek, icindeki
   <a>/.sku ogesine govde dilini geri yuklemek. PHP degisikligi gerekmez. */
.ft-product-single__summary .product_meta > span {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-on-spec-muted);
}

/* Değer okunur metin olarak kalır. Seçici `body.ft-skin-spec` önekli olmalı:
   02-template-base.css'teki `body.ft-skin-spec .product_meta a` (0,2,1) aksi halde rengi geri çeker. */
body.ft-skin-spec .ft-product-single__summary .product_meta a,
body.ft-skin-spec .ft-product-single__summary .product_meta .sku,
.ft-product-single__summary .product_meta a,
.ft-product-single__summary .product_meta .sku {
	font-family: var(--font-body);
	font-size: 0.875rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-on-spec);
}

.ft-product-single__summary .product_meta a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* (8) Woo bildirimleri (sepete ekleme hatasi, "Sorry, this product is
   unavailable", kupon uyarilari). Woo bunlara `#a46497` mor / `#1e85be` mavi
   ust cizgi ve acik `#f6f5f2` zemin verir -> koyu deride hem renk yasagini
   hem kontrasti bozar. Yalniz DERILI sayfalar hedeflenir; Cart/Checkout
   blok sayfalari acik zeminlidir ve Woo'nun kendi gorunumunde kalir. */
body.ft-skin-surface.woocommerce .woocommerce-error,
body.ft-skin-surface.woocommerce .woocommerce-info,
body.ft-skin-surface.woocommerce .woocommerce-message,
body.ft-skin-spec.woocommerce .woocommerce-error,
body.ft-skin-spec.woocommerce .woocommerce-info,
body.ft-skin-spec.woocommerce .woocommerce-message {
	background-color: var(--color-spec-1);
	border-top: 2px solid var(--color-on-spec-muted);
	border-radius: var(--radius);
	color: var(--color-on-spec);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

/* Bildirimin bas ikonu ayri bir Woo kuralindan renk alir (mesaj `#8fae1b`
   yesil, info `#1e85be` mavi, hata `#b81c23` kirmizi) — canlida sepete
   eklendi mesajinda yesil tik goruldu. Ikon da monokroma cekilir. */
body.ft-skin-surface.woocommerce .woocommerce-error::before,
body.ft-skin-surface.woocommerce .woocommerce-info::before,
body.ft-skin-surface.woocommerce .woocommerce-message::before,
body.ft-skin-spec.woocommerce .woocommerce-error::before,
body.ft-skin-spec.woocommerce .woocommerce-info::before,
body.ft-skin-spec.woocommerce .woocommerce-message::before {
	color: var(--color-on-spec-muted);
}

/* ===========================================================================
   Başlıktaki sepet bağlantısı (en sağda, ikonlu).

   Baglanti menunun ICINDE, <ul>'un kardesi olarak basilir (header.php) ki
   mobil cekmecede de gorunsun. Masaustunde nav flex olur ve baglanti
   `margin-left: auto` ile saga itilir.
   Yalnizca magaza acikken basilir (bkz. inc/shop-mode.php).
   ======================================================================== */

.ft-site-header__cart {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	color: inherit;
	font-family: var(--font-display);
	text-decoration: none;
	/* Mobil cekmecede menu ogelerinden ayrilsin */
	border-top: 1px solid var(--color-surface-3);
	transition: opacity var(--dur-press) var(--ease-out);
}

.ft-site-header__cart-icon {
	flex: 0 0 auto;
	display: block;
}

.ft-site-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	background: currentColor;
	border-radius: var(--radius-round);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1;
	/* Rozet dolgusu/rakam rengi 12-order-cart-notices.css "Başlıktaki sepet rozeti"nde ezilir. */
	color: var(--color-surface-1);
}

@media (hover: hover) {
	.ft-site-header__cart:hover { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
	.ft-site-header__cart { transition: none; }
}

@media (min-width: 1024px) {
	/* nav flex olur; <ul> normal akista kalir, sepet saga itilir.
	   ⚠️ Seçici [data-ft-nav-menu][hidden] ŞART: 01-base-shell.css masaüstü nav bloğunda
	   `[data-ft-nav-menu][hidden] { display: block }` var (0,2,0) ve sade
	   `.ft-site-header__nav` (0,1,0) onu GECEMIYOR — nav block kaliyor, sepet
	   alt satira dusuyordu. Buradaki (0,3,0) kazanir. */
	.ft-site-header__nav,
	.ft-site-header__nav[data-ft-nav-menu][hidden] {
		display: flex;
		align-items: center;
	}

	.ft-site-header__nav > ul { flex: 0 1 auto; }

	.ft-site-header__cart {
		flex: 0 0 auto;   /* esnemesin: aksi halde kalan alani doldurup ikon sola kayar */
		margin-left: auto;
		padding: 0 0 0 1.25rem;
		border-top: 0;
		/* Menu baglantilariyla ayni optik agirlik */
		font-size: 1rem;
	}

	/* Masaustunde ikon + sayac yeter; "Basket" etiketi menuyu sismanlatiyor.
	   Etiket ekran okuyucular icin aria-label'da zaten var (header.php). */
	.ft-site-header__cart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

.ft-site-header__cart:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}