/* Alstar Paspas Önizleme 1.2.2 — yalnızca #paspas bölümü (oto paspas 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 paspas bölümü açık kalır. */
#paspas {
	--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 ---------- */
#paspas .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;
}
#paspas .stage-box .stage-tag,
#paspas .stage-box .tpl-badge { display: none; }

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

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

/* Üst başlık — ürün fotoğraflarındaki kapak düzeni */
.als-pv__bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.als-pv__baslik { min-width: 0; }
.als-pv__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-pv__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-pv__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-pv__sag { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.als-pv__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-pv__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-pv__oto.kc { width: 128px; height: auto; flex: 0 0 auto; }

/* Alt bant — doku yakın çekimi + özellikler */
.als-pv__alt { display: flex; align-items: center; gap: 16px; }
.als-pv__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-pv__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-pv__ozellik li { position: relative; padding-left: 22px; margin: 0; line-height: 1.25; }
.als-pv__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-pv__ozellik b { display: block; font-size: .8rem; font-weight: 700; color: #14171C; }
.als-pv__ozellik span { display: block; margin-top: 1px; font-size: .7rem; color: #6B7078; }

@media (max-width: 480px) {
	#paspas .stage-box { padding: 14px 12px 12px; gap: 10px; }
	.als-pv__oto.kc { width: 96px; }
	.als-pv__yakin { width: 74px; height: 74px; }
	.als-pv__alt { gap: 12px; }
	.als-pv__ozellik { gap: 7px 10px; }
	.als-pv__ozellik b { font-size: .74rem; }
	.als-pv__ozellik span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
	.als-pv__canli i { animation: none; }
}

/* ---------- Ayar paneli (açık tema) ---------- */
#paspas .panel { border-radius: 16px; overflow: hidden; color: #14171C; }
#paspas .panel-head h3,
#paspas .summary dd,
#paspas .price,
#paspas .tab.active,
#paspas .swatch.active span,
#paspas .ekstra-m b,
#paspas .cta-guv b { color: #14171C; }
#paspas .panel-head .car-name { color: #E8692C; }
#paspas .summary h4,
#paspas .summary dt,
#paspas .panel-hint,
#paspas .tab { color: #6B7078; }
#paspas .mvsel { background: #FAF8F5; }
/* Kenar / orta renk örneklerinde EVA elmas hücre dokusu */
#paspas .swatches[data-key="kenar"] .swatch i,
#paspas .swatches[data-key="ortarenk"] .swatch i {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='1.1'/%3E%3C/svg%3E") !important;
	background-size: 9px 9px !important;
	background-repeat: repeat !important;
}
#paspas .btn.btn-cta { box-shadow: 0 10px 26px rgba(232, 105, 44, .32); }
#paspas .btn.btn-cta:hover { box-shadow: 0 14px 30px rgba(232, 105, 44, .4); }
#paspas .ekstra-s:has(input:checked) { background: #FFF4EC; }

/* Dikiş ipliği seçimi kaldırıldı (1.0.2): sekme, panel ve özet satırı gizli.
   Özet hücresi DOM'da kalır; sepete standart siyah iplik bilgisi gitmeye devam eder. */
#paspas .tab[data-tab="iplik"],
#paspas .tabpanel[data-panel="iplik"],
#paspas #sumMatIplik,
#paspas .summary dt:has(+ #sumMatIplik),
#paspas .als-pv-gizli { display: none !important; }

/* 1.0.3: sekme şeridinde 1px taşma yüzünden çıkan kaydırma çubuklarını gizle */
#paspas .tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#paspas .tabs::-webkit-scrollbar { display: none; }