/* Alstar Koltuk Önizleme 1.1.0 — yalnızca #koltuk bölümü (koltuk kılıfı konfigüratörü) */

/* Bölüm her zaman açık zeminde: ürün fotoğraflarıyla aynı dil (beyaz zemin, siyah yazı, turuncu vurgu).
   Sistem koyu tema kullansa bile koltuk bölümü açık kalır. */
#koltuk {
	--paper: #FFFFFF;
	--surface: #FFFFFF;
	--text: #14171C;
	--muted: #6B7078;
	--line: #ECE7E0;
	--line-2: #D9D3CA;
	--accent: #E8692C;
	--accent-deep: #C4511A;
	--lightbox: #FFFFFF;
	--lightbox-2: #ECE7E0;
	--on-lightbox: #14171C;
	color-scheme: light;
}

/* ---------- Canlı önizleme sahnesi ---------- */
#koltuk .stage-box {
	background: #FFFFFF;
	color: #14171C;
	border: 1px solid #ECE7E0;
	border-radius: 16px;
	box-shadow: 0 22px 44px -32px rgba(20, 23, 28, .45);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
	padding: 18px 18px 14px;
	min-height: 0;
}
#koltuk .stage-box .stage-tag,
#koltuk .stage-box .tpl-badge { display: none; }

#koltuk .temsili {
	position: static;
	background: none;
	color: #8A8F96;
	padding: 0;
	margin: 0;
	font-size: .7rem;
	line-height: 1.45;
	text-align: center;
}
#koltuk .temsili b { color: #5A5F66; font-weight: 600; }

#koltuk .als-kv__sahne {
	max-width: none;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#koltuk .als-kv__sahne canvas {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	background: #FFFFFF;
}
@media (min-width: 980px) {
	#koltuk .stage-box { height: calc(100vh - 110px); max-height: 780px; }
	#koltuk .als-kv__sahne canvas { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1072 / 1240; }
}

/* Üst başlık — ürün fotoğraflarındaki kapak düzeni */
.als-kv__bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.als-kv__baslik { min-width: 0; }
.als-kv__marka {
	display: block;
	font-family: var(--f-display, 'Archivo', system-ui, sans-serif);
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .2em;
	color: #14171C;
}
.als-kv__arac {
	display: block;
	margin-top: .3rem;
	font-family: var(--f-display, 'Archivo', system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(1.02rem, 2.3vw, 1.42rem);
	line-height: 1.12;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: #14171C;
	overflow-wrap: anywhere;
}
.als-kv__rozet {
	display: inline-block;
	margin-top: .5rem;
	padding: .3rem .72rem;
	border-radius: 999px;
	background: #E8692C;
	color: #FFFFFF;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.2;
}
.als-kv__sag { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.als-kv__canli {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6B7078;
	white-space: nowrap;
}
.als-kv__canli i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #E8692C;
	animation: alsPvNabiz 2s ease-out infinite;
}
@keyframes alsPvNabiz {
	0% { box-shadow: 0 0 0 0 rgba(232, 105, 44, .55); }
	70% { box-shadow: 0 0 0 7px rgba(232, 105, 44, 0); }
	100% { box-shadow: 0 0 0 0 rgba(232, 105, 44, 0); }
}
.als-kv__oto.kc { width: 128px; height: auto; flex: 0 0 auto; }

/* Alt bant — doku yakın çekimi + özellikler */
.als-kv__alt { display: flex; align-items: center; gap: 16px; }
.als-kv__yakin {
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 3px solid #E8692C;
	background: #FFFFFF;
	box-shadow: 0 8px 18px -10px rgba(20, 23, 28, .55);
}
.als-kv__ozellik {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 14px;
}
.als-kv__ozellik li { position: relative; padding-left: 22px; margin: 0; line-height: 1.25; }
.als-kv__ozellik li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #E8692C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.als-kv__ozellik b { display: block; font-size: .8rem; font-weight: 700; color: #14171C; }
.als-kv__ozellik span { display: block; margin-top: 1px; font-size: .7rem; color: #6B7078; }

@media (max-width: 480px) {
	#koltuk .stage-box { padding: 14px 12px 12px; gap: 10px; }
	.als-kv__oto.kc { width: 96px; }
	.als-kv__yakin { width: 74px; height: 74px; }
	.als-kv__alt { gap: 12px; }
	.als-kv__ozellik { gap: 7px 10px; }
	.als-kv__ozellik b { font-size: .74rem; }
	.als-kv__ozellik span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
	.als-kv__canli i { animation: none; }
}

/* ---------- Ayar paneli (açık tema) ---------- */
#koltuk .panel { border-radius: 16px; overflow: hidden; color: #14171C; }
#koltuk .panel-head h3,
#koltuk .summary dd,
#koltuk .price,
#koltuk .tab.active,
#koltuk .swatch.active span,
#koltuk .ekstra-m b,
#koltuk .cta-guv b { color: #14171C; }
#koltuk .panel-head .car-name { color: #E8692C; }
#koltuk .summary h4,
#koltuk .summary dt,
#koltuk .panel-hint,
#koltuk .tab { color: #6B7078; }
#koltuk .mvsel { background: #FAF8F5; }
#koltuk .btn.btn-cta { box-shadow: 0 10px 26px rgba(232, 105, 44, .32); }
#koltuk .btn.btn-cta:hover { box-shadow: 0 14px 30px rgba(232, 105, 44, .4); }
#koltuk .ekstra-s:has(input:checked) { background: #FFF4EC; }


#koltuk .tabs::-webkit-scrollbar { display: none; }

/* ---------- Koltuk bölümüne özel ---------- */
#koltuk #seatPreview { display: none !important; }          /* eski vektör çizim: yalnızca renk değişkenleri için DOM'da kalır */
#koltuk .als-kv__sahne { position: relative; }
#koltuk .als-kv__sahne canvas { border-radius: 10px; }
#koltuk .als-kv__not { margin: 0; font-size: .7rem; line-height: 1.45; color: #8A8F96; text-align: center; }
#koltuk .coll-chips { gap: 6px; }
#koltuk .coll-chip { background: #FAF8F5; border-color: #ECE7E0; color: #14171C; }
#koltuk .coll-chip.active { border-color: #E8692C; background: #FFF4EC; color: #14171C; }
#koltuk .swatch b { color: #14171C; }
#koltuk .tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#koltuk .tabs::-webkit-scrollbar { display: none; }
@media (min-width: 980px) {
	#koltuk .stage-box { height: calc(100vh - 110px); max-height: 820px; }
}

/* ---------- Kumaş kartı (temanın .fabpeek'i; alttan kayarak gelir) ---------- */
#koltuk .als-kv__kart { position: absolute; pointer-events: none; z-index: 5; overflow: hidden; border-radius: 10px; }
#koltuk .als-kv__kart .fabpeek { bottom: 1rem; left: 1rem; pointer-events: none; }
@media (max-width: 720px) {
	#koltuk .als-kv__kart .fabpeek { bottom: .6rem; left: .6rem; }
}