/*
 * STEP BY STEP Stair Configurator — /pages/stair-configurator/ (24 Eyl 2026).
 * Yalniz bu sayfada yuklenir (inc/configurator.php). Sinif oneki: .ft-cfg-*
 *
 * Renk: YALNIZ rol token'lari (--bg, --bg-raised, --fg, --fg-muted, --line,
 * --fill-accent ...) -> koyu/acik temada kendiliginden doner. Tek istisna
 * genel bakis gorseli uzerindeki isaretciler: FOTOGRAF USTUDUR, her iki temada
 * ayni kalmali -> kimlik primitifleri (--color-ink / --color-white).
 * Kose: --radius (0). Renkli vurgu yok; renk yalniz dekor kartelasinda.
 * Hareket (emil-design-eng): --ease-out, <=240ms, yalniz transform/opacity;
 * sik eylemler (adet -/+, radyo, onay kutusu) animasyonsuz; hover (hover:hover)
 * arkasinda; prefers-reduced-motion'da hareket kapanir.
 */

.ft-cfg {
	--ft-cfg-gutter: clamp(1rem, 4vw, 2.5rem);
	--ft-cfg-header: 77px; /* yapiskan site basligi (components/01-base-shell.css) */
	max-width: 80rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem) var(--ft-cfg-gutter) clamp(3rem, 6vw, 5rem);
	color: var(--fg);
	font-family: var(--font-body);
}

.ft-cfg *,
.ft-cfg *::before,
.ft-cfg *::after { box-sizing: border-box; }

/* ── Giris (sayfa iceriginden) ─────────────────────────────────────────── */
.ft-cfg-intro {
	max-width: 46rem; /* kapsayici duzeyinde olcu — oge duzeyinde max-width yok */
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ft-cfg-intro .ft-kicker,
.ft-cfg-kicker {
	margin: 0 0 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.ft-cfg-title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 6.5vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--fg);
}

.ft-cfg-intro .ft-lead,
.ft-cfg-intro p:not(.ft-kicker) {
	margin: 0;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	color: var(--fg-muted);
	text-wrap: pretty;
}

/* ── Genel bakis: "Know each part." ────────────────────────────────────── */
.ft-cfg-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--line);
	background: var(--bg-raised);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ft-cfg-overview__media {
	position: relative;
	overflow: hidden;
	background: var(--bg-raised-2);
}

.ft-cfg-overview__img {
	display: block;
	width: 100%;
	height: auto;
}

.ft-cfg-overview__marker {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	transform: translate(-50%, -50%);
	background: var(--color-ink);
	color: var(--color-white);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.85), 0 6px 18px rgb(0 0 0 / 0.28);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	line-height: 1;
	transition: transform 200ms var(--ease-out);
}

.ft-cfg-overview__legend {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	align-self: center;
}

.ft-cfg-overview__title {
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	color: var(--fg);
}

.ft-cfg-overview__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.ft-cfg-overview__list li {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.9875rem;
	line-height: 1.4;
	color: var(--fg);
}

.ft-cfg-overview__num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--fg-muted);
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-overview__list li { cursor: default; }
	.ft-cfg-overview:has(li[data-ft-part="1"]:hover) .ft-cfg-overview__marker[data-ft-part="1"],
	.ft-cfg-overview:has(li[data-ft-part="2"]:hover) .ft-cfg-overview__marker[data-ft-part="2"],
	.ft-cfg-overview:has(li[data-ft-part="3"]:hover) .ft-cfg-overview__marker[data-ft-part="3"],
	.ft-cfg-overview:has(li[data-ft-part="4"]:hover) .ft-cfg-overview__marker[data-ft-part="4"],
	.ft-cfg-overview:has(li[data-ft-part="5"]:hover) .ft-cfg-overview__marker[data-ft-part="5"] {
		transform: translate(-50%, -50%) scale(1.18);
	}
}

@media (min-width: 900px) {
	.ft-cfg-overview { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.ft-cfg-overview__media { border-right: 1px solid var(--line); }
}

@media (max-width: 480px) {
	.ft-cfg-overview__marker { width: 1.625rem; height: 1.625rem; font-size: 0.6875rem; }
}

/* ── Iki sutun: form + ozet ────────────────────────────────────────────── */
.ft-cfg-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.ft-cfg-grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); }
}

/* ── Adimlar ───────────────────────────────────────────────────────────── */
.ft-cfg-step {
	padding: clamp(2rem, 4vw, 2.75rem) 0;
	border-top: 1px solid var(--line);
}

.ft-cfg-step:first-child { border-top-color: var(--fg); }

.ft-cfg-step__title {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	color: var(--fg);
}

.ft-cfg-step__num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--fg-muted);
}

.ft-cfg-label {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--fg);
}

.ft-cfg-note {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--fg-muted);
	text-wrap: pretty;
}

.ft-cfg-empty {
	margin: 0 0 1rem;
	padding: 1.25rem;
	border: 1px dashed var(--line-control);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--fg-muted);
}

.ft-cfg-field { margin-top: 1.25rem; }

/* — Alanlar — */
.ft-cfg-input {
	width: 100%;
	min-height: 48px;
	padding: 0 0.875rem;
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	background: var(--bg-raised);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 1rem; /* >=16px: iOS odak yakinlastirmasi yok */
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	-webkit-appearance: none;
	appearance: none;
}

.ft-cfg-input:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-color: var(--fg);
}

.ft-cfg-input[type="number"] { -moz-appearance: textfield; }
.ft-cfg-input[type="number"]::-webkit-inner-spin-button,
.ft-cfg-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ft-cfg-select { position: relative; }
.ft-cfg-select .ft-cfg-input { padding-right: 2.75rem; cursor: pointer; }
.ft-cfg-select::after {
	content: "";
	position: absolute;
	right: 1.125rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid var(--fg);
	border-bottom: 1.5px solid var(--fg);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.ft-cfg-unit { position: relative; max-width: 12rem; }
.ft-cfg-unit .ft-cfg-input { padding-right: 3rem; }
.ft-cfg-unit__suffix {
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--fg-muted);
	pointer-events: none;
}

/* — Adimlayici (−/+). Sik eylem -> hareket YOK. — */
.ft-cfg-stepper {
	display: inline-grid;
	grid-template-columns: 48px 5.5rem 48px;
}

.ft-cfg-stepper__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--field-border);
	border-radius: var(--radius);
	background: var(--bg-raised);
	color: var(--fg);
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.ft-cfg-stepper__btn:first-child { border-right: 0; }
.ft-cfg-stepper__btn:last-child { border-left: 0; }

.ft-cfg-stepper__input {
	text-align: center;
	padding: 0 0.25rem;
	font-family: var(--font-mono);
	font-size: 1.0625rem;
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-stepper__btn:hover { background: var(--bg-raised-2); }
}

/* — 1. Dekor kartelasi — */
.ft-cfg-decors {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ft-cfg-decors__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}

@media (min-width: 600px) {
	.ft-cfg-decors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ft-cfg-decor {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.875rem;
	min-height: 4.75rem;
	padding: 0.625rem;
	border: 1px solid var(--line);
	background: var(--bg-raised);
	cursor: pointer;
	transition: border-color 160ms ease;
}

.ft-cfg-decor input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ft-cfg-decor__swatch {
	display: block;
	width: 3.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--bg-raised-2);
	box-shadow: inset 0 0 0 1px var(--media-ring);
}

.ft-cfg-decor__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ft-cfg-decor__text { display: grid; gap: 0.2rem; min-width: 0; }

.ft-cfg-decor__code {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--fg-muted);
}

.ft-cfg-decor__name {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: var(--fg);
	overflow-wrap: anywhere;
}

.ft-cfg-decor:has(input:checked) {
	border-color: var(--fg);
	box-shadow: inset 0 0 0 1px var(--fg);
}

.ft-cfg-decor:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--fg);
}

.ft-cfg-decor:has(input:focus-visible) {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-decor:hover { border-color: var(--line-control); }
}

/* — 2. Teknik cizimler — */
.ft-cfg-drawing { margin-bottom: 0.25rem; }

.ft-cfg-drawing__frame,
.ft-cfg-top__frame {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-raised-2);
	animation: ft-cfg-fade 200ms var(--ease-out) both;
}

.ft-cfg-drawing__frame { aspect-ratio: 16 / 8; }
.ft-cfg-drawing__frame--open { aspect-ratio: 4 / 3; }
.ft-cfg-top__frame { aspect-ratio: 4142 / 2193; } /* kaynak oranı */

.ft-cfg-drawing__frame img,
.ft-cfg-top__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
}

.ft-cfg-drawing__frame--open img { object-fit: contain; }

.ft-cfg-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 7;
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--line-control);
	background: repeating-linear-gradient(135deg, var(--bg-raised) 0 12px, var(--bg-raised-2) 12px 24px);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--fg-muted);
}

.ft-cfg-placeholder[hidden],
.ft-cfg-drawing__frame[hidden],
.ft-cfg-top__frame[hidden],
.ft-cfg-note[hidden] { display: none; }

/* — Ara slogan — */
.ft-cfg-motto {
	margin: 0.5rem 0 0;
	padding: 1.375rem 1.5rem;
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

.ft-cfg-motto + .ft-cfg-step { border-top: 0; }

/* — 3. Segmentler — */
.ft-cfg-segments { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.ft-cfg-segments .ft-cfg-empty { margin: 0; }

.ft-cfg-segment {
	padding: 1.25rem 1.25rem 1.375rem;
	border: 1px solid var(--line);
	border-left: 2px solid var(--fg);
	background: var(--bg-raised);
}

.ft-cfg-segment.is-new { animation: ft-cfg-in 220ms var(--ease-out) both; }

.ft-cfg-segment__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: -0.5rem 0 0;
}

.ft-cfg-segment__title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--fg);
}

.ft-cfg-segment__num {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--fg-muted);
}

.ft-cfg-segment .ft-cfg-field { margin-top: 0.75rem; }
.ft-cfg-segment .ft-cfg-note { margin-top: 0.5rem; }

.ft-cfg-remove {
	min-height: 44px;
	margin-right: -0.5rem;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: var(--fg-muted);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	cursor: pointer;
	transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-remove:hover { color: var(--fg); }
}

/* — Dugmeler — */
.ft-cfg-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.ft-cfg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.25rem;
	border: 1px solid var(--line-control);
	border-radius: var(--radius);
	background: transparent;
	color: var(--fg);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ft-cfg-btn:active:not(:disabled) { transform: scale(0.97); }

.ft-cfg-btn:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.ft-cfg-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-btn:hover:not(:disabled) { border-color: var(--fg); background: var(--bg-raised-2); }
}

.ft-cfg-options--finish {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ft-cfg-btn--finish {
	justify-content: flex-start;
	min-height: 64px;
	padding: 0.875rem 1.25rem;
	text-align: left;
}

.ft-cfg-btn--finish[aria-pressed="true"],
.ft-cfg-btn--solid {
	border-color: var(--fill-accent);
	background: var(--fill-accent);
	color: var(--on-fill-accent);
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-btn--finish[aria-pressed="true"]:hover,
	.ft-cfg-btn--solid:hover:not(:disabled) {
		border-color: var(--fill-accent);
		background: var(--fill-accent);
		opacity: 0.9;
	}
}

.ft-cfg-btn--primary {
	width: 100%;
	min-height: 56px;
	border-color: var(--fill-accent);
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	font-size: 1rem;
	letter-spacing: 0.05em;
}

.ft-cfg-btn--primary:focus-visible,
.ft-cfg-btn--solid:focus-visible,
.ft-cfg-btn--finish[aria-pressed="true"]:focus-visible {
	box-shadow: 0 0 0 1px var(--on-fill-accent);
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-btn--primary:hover:not(:disabled) {
		border-color: var(--fill-accent);
		background: var(--fill-accent);
		opacity: 0.9;
	}
}

.ft-cfg-btn--secondary { width: 100%; }

.ft-cfg-btn[aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* — 4. Ust bitis paneli — */
.ft-cfg-top { margin-top: 1.5rem; }
.ft-cfg-top[hidden] { display: none; }
.ft-cfg-top.is-new { animation: ft-cfg-in 220ms var(--ease-out) both; }

.ft-cfg-top__title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--fg);
}

.ft-cfg-top__title:focus { outline: none; }

/* — Onay kutusu (ozel kutu; gercek input ustte, gorunmez) — */
.ft-cfg-check {
	position: relative;
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	align-items: start;
	gap: 0.875rem;
	min-height: 44px;
	margin-top: 1.25rem;
	padding: 0.75rem 0;
	font-size: 0.9875rem;
	line-height: 1.45;
	color: var(--fg);
	cursor: pointer;
}

.ft-cfg-check input {
	position: absolute;
	top: 0.75rem;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ft-cfg-check__box {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.05rem;
	border: 1px solid var(--line-control);
	background: var(--bg-raised);
}

.ft-cfg-check input:checked + .ft-cfg-check__box {
	border-color: var(--fill-accent);
	background: var(--fill-accent);
}

.ft-cfg-check input:checked + .ft-cfg-check__box::after {
	content: "";
	position: absolute;
	left: 0.38rem;
	top: 0.14rem;
	width: 0.35rem;
	height: 0.65rem;
	border-right: 2px solid var(--on-fill-accent);
	border-bottom: 2px solid var(--on-fill-accent);
	transform: rotate(45deg);
}

.ft-cfg-check input:focus-visible + .ft-cfg-check__box {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ── Ozet (aside) ──────────────────────────────────────────────────────── */
.ft-cfg-summary { min-width: 0; }

.ft-cfg-summary__inner {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-top: 2px solid var(--fg);
	background: var(--bg-raised);
}

/* Masaustu: paket karti yapiskan. Kalem listesi KENDI icinde kayar; toplam,
   durum ve CART dugmesi her zaman gorunur kalir (900px yukseklikte olculdu). */
@media (min-width: 1024px) {
	.ft-cfg-summary {
		position: sticky;
		top: calc(var(--ft-cfg-header) + 1.5rem);
	}
	.ft-cfg-summary__inner {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--ft-cfg-header) - 3rem);
		max-height: calc(100dvh - var(--ft-cfg-header) - 3rem);
	}
	.ft-cfg-summary__inner > * { flex: none; }
	.ft-cfg-summary__inner > .ft-cfg-summary__lines {
		flex: 0 1 auto;
		min-height: 7rem;
		display: flex;
		flex-direction: column;
	}
	.ft-cfg-summary__lines .ft-cfg-lines {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--line-control) transparent;
	}
	.ft-cfg-summary__lines .ft-cfg-total { flex: none; }
}

.ft-cfg-summary__title {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.15;
	color: var(--fg);
}

.ft-cfg-summary .ft-cfg-empty { margin: 0 0 1rem; }

.ft-cfg-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.ft-cfg-line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--line);
}

.ft-cfg-line__main { display: grid; gap: 0.25rem; min-width: 0; }

.ft-cfg-line__label {
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--fg);
}

.ft-cfg-line__variant,
.ft-cfg-line__price {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--fg-muted);
}

.ft-cfg-line__side {
	display: grid;
	justify-items: end;
	align-content: start;
	gap: 0.25rem;
	white-space: nowrap;
}

.ft-cfg-line__qty {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fg);
}

.ft-cfg-line__price { font-size: 0.75rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

.ft-cfg-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding-top: 1.125rem;
	border-top: 1px solid var(--fg);
}

.ft-cfg-total > span:first-child {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.ft-cfg-total__value {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

/* — Durum kutulari (renksiz: sol cizgi + zemin kademesi) — */
.ft-cfg-alert {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem;
	border: 1px solid var(--line);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--fg);
}

.ft-cfg-alert--warning {
	border-left: 3px solid var(--fg);
	background: var(--bg-raised-2);
}

.ft-cfg-alert--success {
	display: flex;
	gap: 0.625rem;
	align-items: baseline;
}

.ft-cfg-alert--success::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--fg);
	transform: translateY(-0.05rem);
}

.ft-cfg-alert__title {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ft-cfg-alert__list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.ft-cfg-alert__list li + li { margin-top: 0.25rem; }

.ft-cfg-expert {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--fg);
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

@media (hover: hover) and (pointer: fine) {
	.ft-cfg-expert:hover { text-decoration-thickness: 2px; }
}

/* — CART — */
.ft-cfg-cart {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.ft-cfg-cart[hidden],
.ft-cfg-review[hidden] { display: none; }

.ft-cfg-cart__title,
.ft-cfg-review__title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--fg);
}

.ft-cfg-cart__note { text-align: center; margin-top: 0.625rem; }

.ft-cfg-saved {
	margin-top: 1.25rem;
	padding: 1.125rem;
	border: 1px solid var(--fg);
	animation: ft-cfg-in 240ms var(--ease-out) both;
}

.ft-cfg-saved:focus { outline: none; }
.ft-cfg-saved:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ft-cfg-saved__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.375rem;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--fg);
}

.ft-cfg-saved__icon { flex: none; }

.ft-cfg-saved__text {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--fg-muted);
}

.ft-cfg-saved__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.ft-cfg-saved__actions .ft-cfg-btn {
	min-height: 44px;
	padding: 0 0.75rem;
	font-size: 0.875rem;
}

.ft-cfg-cart .ft-cfg-alert { margin: 1rem 0 0; }

/* — Teslimat + PDF: tam genislik son bolum — */
.ft-cfg-review {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 3rem;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 2.75rem);
	border-top: 1px solid var(--fg);
}

.ft-cfg-review__intro .ft-cfg-note { margin-top: 0; }

.ft-cfg-review__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem 0.75rem;
	align-content: start;
}

.ft-cfg-review__actions { display: grid; gap: 0; align-content: start; }

@media (min-width: 768px) {
	.ft-cfg-review { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	.ft-cfg-review__intro { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.ft-cfg-review { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr); }
	.ft-cfg-review__intro { grid-column: auto; }
}

.ft-cfg-review__field { display: block; min-width: 0; }
.ft-cfg-review__field--wide { grid-column: 1 / -1; }
.ft-cfg-review__field .ft-cfg-label { font-size: 0.8125rem; margin-bottom: 0.375rem; }

.ft-cfg-country {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 0.875rem;
	border: 1px solid var(--line);
	background: var(--bg-raised-2);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--fg);
}

@media (max-width: 380px) {
	.ft-cfg-review__grid { grid-template-columns: minmax(0, 1fr); }
	.ft-cfg-saved__actions { grid-template-columns: minmax(0, 1fr); }
}

.ft-cfg-ship-status {
	margin: 0.875rem 0 0;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--line);
	background: var(--bg-raised-2);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--fg);
}

.ft-cfg-ship-status--error { border-left: 3px solid var(--fg); }

.ft-cfg-rates {
	margin: 0.875rem 0 0;
	padding: 0.5rem 0.875rem 0.25rem;
	border: 1px solid var(--line);
	min-width: 0;
}

.ft-cfg-rates legend { padding: 0 0.375rem; margin: 0; font-size: 0.8125rem; }

.ft-cfg-rate {
	position: relative;
	display: grid;
	grid-template-columns: 1.125rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	font-size: 0.9rem;
	color: var(--fg);
	cursor: pointer;
}

.ft-cfg-rate + .ft-cfg-rate { border-top: 1px solid var(--line); }

.ft-cfg-rate input {
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	transform: translateY(-50%);
	opacity: 0;
	cursor: pointer;
}

.ft-cfg-rate__dot {
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid var(--line-control);
	border-radius: var(--radius-round);
	background: var(--bg-raised);
}

.ft-cfg-rate input:checked + .ft-cfg-rate__dot {
	border-color: var(--fg);
	background: radial-gradient(circle, var(--fg) 0 40%, transparent 44%);
}

.ft-cfg-rate input:focus-visible + .ft-cfg-rate__dot {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.ft-cfg-rate__price { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }

.ft-cfg-review [data-ft-cfg-pdf] { margin-top: 0.875rem; }
.ft-cfg-review__title { font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }

.ft-cfg-summary__foot {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* — Mobil alt serit (JS ekler; <1024px) — */
.ft-cfg-mbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--bg-header);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.ft-cfg-mbar.is-hidden,
.ft-cfg-mbar.is-before {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

.ft-cfg-mbar__label {
	display: grid;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.ft-cfg-mbar__value {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

.ft-cfg-mbar__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	background: var(--fill-accent);
	color: var(--on-fill-accent);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: transform 160ms var(--ease-out);
}

.ft-cfg-mbar__link:active { transform: scale(0.97); }
.ft-cfg-mbar__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 1px var(--on-fill-accent); }

@media (min-width: 1024px) {
	.ft-cfg-mbar { display: none; }
}

/* Serit gorunurken sayfa sonu altinda kalmasin */
@media (max-width: 1023.98px) {
	.ft-cfg { padding-bottom: calc(clamp(3rem, 6vw, 5rem) + 4.5rem); }
}

/* Ozete atlarken yapiskan baslik basligi ortmesin */
.ft-cfg [id] { scroll-margin-top: calc(var(--ft-cfg-header) + 1rem); }

/* ── Hareket ──────────────────────────────────────────────────────────── */
@keyframes ft-cfg-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes ft-cfg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ft-cfg-segment.is-new,
	.ft-cfg-top.is-new,
	.ft-cfg-saved { animation: ft-cfg-fade 160ms linear both; }
	.ft-cfg-btn,
	.ft-cfg-mbar,
	.ft-cfg-mbar__link,
	.ft-cfg-overview__marker { transition: none; }
	.ft-cfg-btn:active:not(:disabled),
	.ft-cfg-mbar__link:active { transform: none; }
}

/* ── Yazdirma (sayfanin kendisi; PDF ozeti ayri pencerede uretilir) ──── */
@media print {
	.ft-cfg-mbar,
	.ft-cfg-options,
	.ft-cfg-stepper__btn,
	.ft-cfg-remove,
	.ft-cfg-cart,
	.ft-cfg-review { display: none !important; }
	.ft-cfg-summary { position: static; }
	.ft-cfg-summary__inner { max-height: none; }
	.ft-cfg-summary__lines .ft-cfg-lines { overflow: visible; }
	.ft-cfg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Ozet kartinin dikey ritmi (yapiskan kartta kalem listesine yer ac) ── */
@media (min-width: 1024px) {
	.ft-cfg-summary__inner { padding: 1.5rem 1.75rem; }
	.ft-cfg-summary__title { margin-bottom: 1rem; }
	.ft-cfg-summary__inner > .ft-cfg-summary__lines { min-height: 10rem; }
	.ft-cfg-summary .ft-cfg-alert { margin-bottom: 0; padding: 0.75rem 1rem; }
	.ft-cfg-summary .ft-cfg-total { margin-bottom: 1rem; }
	.ft-cfg-cart { margin-top: 1.25rem; padding-top: 1.25rem; }
	.ft-cfg-cart__title { font-size: 1.125rem; margin-bottom: 0.75rem; }
	.ft-cfg-summary__foot { margin-top: 1rem; padding-top: 0.75rem; }

	/* Liste tasiyorsa alt kenarda solma: "asagida daha fazla var" isareti. */
	.ft-cfg-lines.is-scrollable:not(.is-end) {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
	}
}

/* Dar ekran: "Other geometry — Ask an Expert" secenegi 375px'te kesilmesin
   (16px yazi korunur — iOS odak yakinlastirmasi olmasin). */
@media (max-width: 480px) {
	.ft-cfg-segment { padding: 1rem 1rem 1.125rem; }
	.ft-cfg-select .ft-cfg-input { padding-left: 0.75rem; padding-right: 2.25rem; }
	.ft-cfg-select::after { right: 0.875rem; }
}

/* Kayit kutusu acikken kart icerigi max-height'i asabilir -> kart da kayar
   (hicbir sey kirpilmaz); kalem listesi en az ~2 satir yer tutar. */
@media (min-width: 1024px) {
	.ft-cfg-summary__inner {
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--line-control) transparent;
	}
}

.ft-cfg-saved:focus-visible { outline-offset: 0; }

/* ==========================================================================
 * URUN SAYFASI CTA — "Configure Your Staircase" (24 Eyl 2026)
 *
 * Bu blok yalniz DOKUMANTASYON kaynagidir: bu dosya sadece /pages/
 * stair-configurator/ sayfasinda yuklenir, urun sayfalarinda DEGIL. Gercek
 * teslimat inc/configurator.php -> floortrim_uk_configurator_product_cta_css()
 * icindeki BIREBIR ayni CSS'in inline basilmasiyla olur (1264 satirlik bu
 * dosyayi urun sayfasina tasimamak icin). Burada degisiklik yaparsan o
 * fonksiyonu da guncelle.
 *
 * Ikincil/outline dugme — "Add to cart" (solid --fill-accent dolgu) ile
 * karistirilmasin diye SEFFAF zeminli, rol token'lariyla (--fg, --line-control,
 * --focus) kurulu; bu yuzden koyu/acik temada VE .ft-skin-spec/.ft-skin-surface
 * derilerinde ayri override GEREKMEZ (yalniz dolu/solid CTA'lar bunu gerektirir
 * — CLAUDE.md "Rol tabanli kontrast" notu).
 * ========================================================================== */
.ft-cfg-product-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.65rem 1.25rem;
	margin: 0.75rem 0 1.25rem;
	border: 1px solid var(--line-control);
	border-radius: var(--radius);
	background: transparent;
	color: var(--fg);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.ft-cfg-product-cta:active { transform: scale(0.97); }

@media (hover: hover) {
	.ft-cfg-product-cta:hover { opacity: 0.8; border-color: var(--fg); }
}

.ft-cfg-product-cta:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ft-cfg-product-cta,
	.ft-cfg-product-cta:active { transition: none; transform: none; }
}