/*
 * Ürün sayfası. Yalnızca tokens.css değişkenleri kullanılır.
 * `.is-cinema` = koyu sinematik bölge; sayfanın geri kalanı açık palettir.
 */

/* ---------- Ortak ---------- */
.p-section { padding-block: var(--space-9); }
.p-section--surface { background: var(--gradient-paper-soft); }
.section-head { margin-bottom: var(--space-7); }
.section-head h2 { margin: 0; font-size: var(--text-h3); }

.stats dt,
.facts dt,
.spec-table th {
	margin: 0;
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ---------- Tam ekran görüntüleyici (PhotoSwipe, her zaman sinematik koyu) ---------- */
.pswp { z-index: 100000; }
.pswp__bg { background: var(--wp--preset--color--cinema); }
.pswp__caption { display: none; }
.pswp__top-bar,
.pswp__caption { background: transparent; }

/* ---------- Teknik özellik + indirmeler (koyu bant) ---------- */
.spec-band { padding-block: var(--space-9); }
.spec-band__grid { display: grid; gap: var(--space-7); }
.spec-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-5); }
.spec-table { width: 100%; border-collapse: collapse; border-top: var(--border-w) solid var(--color-border); align-self: start; }
.spec-table th,
.spec-table td { padding: var(--space-3) 0; text-align: left; vertical-align: top; border-bottom: var(--border-w) solid var(--color-border); font-size: var(--text-small); }
.spec-table th { width: 46%; padding-right: var(--space-3); }
.downloads-card { align-self: start; padding: var(--space-6); border: var(--border-w) solid var(--color-gold); }
.downloads-card__title { margin: 0 0 var(--space-2); font-size: var(--text-h5); }
.download-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.download-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--border-w) solid var(--color-border); text-decoration: none; }
.download-list__label { flex: 1; font-size: var(--text-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.download-list__meta { font-size: var(--text-label); color: var(--color-text-muted); }
.download-list__arrow { transition: transform var(--dur-base) var(--ease); }
.download-list__item:hover .download-list__arrow { transform: translateY(0.25rem); }
.download-list__item:hover .download-list__label { color: var(--color-gold-muted); }
@media (min-width: 1180px) {
	.spec-band__grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-8); }
	.spec-band__grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Gerçek projeler ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.project-grid li[hidden] { display: none; }
.project-grid__item { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; background: var(--color-surface); cursor: zoom-in; }
.project-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.project-grid__item:hover img { transform: scale(1.03); }



/* ---------- Kapanış: marka + teklif ---------- */
.quote-cta { padding-block: var(--space-9); }
.quote-cta__grid { display: grid; gap: var(--space-8); }
.quote-cta__statement { display: grid; margin: var(--space-4) 0 var(--space-6); font-size: var(--text-h2); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.quote-cta__action h2 { margin-bottom: var(--space-4); font-size: var(--text-h3); }
.quote-cta__action .text-muted { max-width: 34rem; }
.quote-cta__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
@media (min-width: 1024px) {
	.quote-cta__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: var(--space-9); align-items: end; }
}

/* ---------- Sticky CTA ---------- */
.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--z-header);
	background: var(--color-background);
	border-top: var(--border-w) solid var(--color-border);
	visibility: hidden;
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.sticky-cta.is-visible { visibility: visible; transform: none; transition-delay: 0s; }
.sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.sticky-cta__name { margin: 0; font-weight: 600; }
.sticky-cta__actions { display: flex; align-items: center; gap: var(--space-4); }
.sticky-cta__short { display: none; }
.has-sticky-cta .site-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }

@media (max-width: 767.98px) {
	.sticky-cta__name,
	.sticky-cta__datasheet { display: none; }
	.sticky-cta__actions { width: 100%; }
	.sticky-cta__actions .btn { flex: 1; padding-inline: var(--space-3); }
	.sticky-cta__long { display: none; }
	.sticky-cta__short { display: inline; }
}

/* ---------- Renk kartı ---------- */
.color-chart { position: relative; display: block; width: 100%; padding: var(--space-3); border: var(--border-w) solid var(--color-border); background: var(--color-paper); cursor: zoom-in; }
.color-chart img { display: block; width: 100%; height: auto; }
.color-chart__zoom { position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--wp--preset--color--cinema); color: #fff; }
.color-chart__zoom svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.color-chart:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* =====================================================================
   Ürün sayfası — üst blok (bilgi | galeri | kartlar), key features, seçenekler, materyaller + teknik
   ===================================================================== */
.product-page { position: relative; isolation: isolate; overflow-x: clip; }
/* Bulanık yapraklar iki kenarda, içeriğin ARKASINDA. */
.product-page::before,
.product-page::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	width: 14%;
	height: min(60rem, 100%);
	background: url("../img/foliage-left.webp") left top / auto 100% no-repeat;
	filter: blur(12px);
	opacity: 0.45;
	pointer-events: none;
}
.product-page::before { left: -3%; }
.product-page::after { right: -3%; transform: scaleX(-1); }

.pdp-top { display: grid; gap: var(--space-6); padding-block: var(--space-4) var(--space-7); align-items: start; }
.pdp-top > * { min-width: 0; }

/* ---------- Bilgi bloğu ---------- */
.pdp__info .breadcrumb ol { margin-bottom: var(--space-5); }
.pdp__series { margin: 0 0 var(--space-3); }
.pdp__title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.015em; color: var(--wp--preset--color--brand-deep); }
.pdp__subtitle { margin: var(--space-3) 0 0; font-size: var(--text-h6); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.pdp__lead { margin: var(--space-5) 0 0; max-width: 34rem; font-size: var(--text-small); line-height: 1.7; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.pdp__cta { display: grid; gap: var(--space-3); max-width: 24rem; margin-top: var(--space-6); }
.pdp__cta .btn { width: 100%; min-height: 3.5rem; }
.btn__icon { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdp__whatsapp { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; }
.pdp__whatsapp:hover { color: var(--color-gold-muted); }
.pdp__whatsapp .btn__icon:first-child { width: 1.4rem; height: 1.4rem; stroke: var(--color-brand); }

/* ---------- Ölçü rakamları ---------- */
.stats { display: flex; margin: var(--space-5) 0 0; padding: 0; }
.stats__item { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3); border-left: var(--border-w) solid var(--color-border); }
.stats__item:first-child { padding-left: 0; border-left: 0; }
.stats dd { display: flex; align-items: baseline; gap: 0.2rem; margin: 0; }
.stats dt { order: 2; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.stats__value { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 400; line-height: 1; color: var(--wp--preset--color--brand-deep); }
.stats__unit { font-size: var(--text-label); color: var(--color-gold-muted); }

/* ---------- Galeri: büyük ana görsel + dikey küçük görseller ---------- */
.gallery { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.stage { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: var(--border-w) solid var(--color-gold); border-radius: 0.75rem; background: var(--color-surface); transition: background var(--dur-base) var(--ease); box-shadow: 0 1.25rem 2.5rem -1.5rem rgb(6 53 41 / 0.35); }
.stage__btn { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.stage__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stage__btn img.fit-fill { object-fit: cover; }
/* Kırpılmayan görsellerin kenarları, ortalama kenar rengine yumuşakça karışır (bulanık leke yok). JS, görsel kutusunu
   fotoğrafın gerçek boyutuna oturtur (--iw / --ih), maske de tam fotoğraf kenarında çalışır. */
.stage__btn img.fit-sides { left: 50%; right: auto; width: var(--iw, 100%); transform: translateX(-50%); object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.stage__btn img.fit-tops { top: 50%; bottom: auto; height: var(--ih, 100%); transform: translateY(-50%); object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.stage__zoom { position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--color-text); box-shadow: 0 0.4rem 1rem rgb(6 53 41 / 0.18); }
.stage__zoom svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.thumbs { display: flex; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-1); overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs li { flex: 0 0 clamp(4.5rem, 18vw, 6rem); scroll-snap-align: start; }
.thumbs li[hidden] { display: none; }
.thumbs__item { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: var(--border-w) solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); cursor: pointer; opacity: 0.8; transition: border-color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.thumbs__item img { width: 100%; height: 100%; object-fit: cover; }
.thumbs__item:hover { opacity: 1; }
.thumbs__item.is-active { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold); opacity: 1; }
.thumbs__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(5 15 11 / 0.55); color: #fff; font-family: var(--font-serif); font-size: var(--text-h5); }

/* ---------- Key features: ince, kompakt şerit; ikon + ad + etiket, ince altın ayraçlar ---------- */
.features { padding-block: var(--space-5); background: var(--color-background); border-block: var(--border-w) solid color-mix(in srgb, var(--color-gold) 40%, transparent); }
.features__inner { display: grid; gap: var(--space-4); align-items: center; }
.features__head .eyebrow { margin: 0 0 var(--space-2); }
.features__title { margin: 0; max-width: 24rem; font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--brand-deep); }
.features__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) 0; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-4); border-left: var(--border-w) solid color-mix(in srgb, var(--color-gold) 45%, transparent); }
.feature__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: var(--border-w) solid color-mix(in srgb, var(--color-gold) 60%, transparent); }
.feature__icon .feature-icon { width: 1.25rem; height: 1.25rem; }
.feature__text { display: grid; gap: 0.15rem; }
.feature__label { font-size: var(--text-small); font-weight: 600; line-height: 1.2; color: var(--wp--preset--color--brand-deep); }
.feature__tag { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.feature__tag[data-tag="standard"] { color: var(--color-gold-muted); }
.feature-icon { flex: none; width: 2rem; height: 2rem; fill: none; stroke: var(--color-gold-muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
	.features__inner { grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.8fr); gap: var(--space-7); }
	.features__list { display: flex; flex-wrap: wrap; row-gap: var(--space-4); }
	.feature { flex: 0 0 25%; min-width: 0; }
	.features--n1 .feature,
	.features--n2 .feature,
	.features--n3 .feature { flex-basis: auto; padding-right: var(--space-6); }
	.features--n5 .feature,
	.features--n6 .feature { flex-basis: 33.333%; }
}
@media (max-width: 479.98px) { .features__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Seçenek panelleri ---------- */
.pdp-options { padding-block: var(--space-7) var(--space-8); }
.pdp-options .container { display: grid; gap: var(--space-7); }
.opts { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.opts .panel { flex: 1 1 18rem; min-width: 0; }
.panel__title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold-muted); }
.panel__title::before { content: ""; width: 2rem; height: 1px; background: var(--color-gold); }
.panel__lead { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); }

.card-list,
.option-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.media-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-3); background: #fff; border: var(--border-w) solid var(--color-border); }
.media-card__plate,
.media-card__photo { grid-row: 1 / span 4; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--color-surface); }
.media-card__plate img,
.media-card__photo img { width: 100%; height: 100%; object-fit: contain; }
.media-card__photo--icon .feature-icon { width: 2.5rem; height: 2.5rem; }
.media-card__label { grid-column: 2; grid-row: 2; margin: 0; font-family: var(--font-serif); font-size: var(--text-h6); line-height: 1.2; }
.media-card__note { grid-column: 2; grid-row: 3; margin: var(--space-1) 0 0; font-size: var(--text-label); line-height: 1.5; color: var(--color-text-muted); }
.media-card:not(:has(.media-card__plate, .media-card__photo)) { grid-template-columns: minmax(0, 1fr); }
.media-card:not(:has(.media-card__plate, .media-card__photo)) > * { grid-column: 1; }
.media-card:not(:has(.media-card__plate, .media-card__photo)) { grid-template-rows: auto auto; }
.option-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: #fff; border: var(--border-w) solid var(--color-border); }
.option-card__label { font-size: var(--text-small); font-weight: 500; }
.option-card__tier { font-size: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.option-card--standard .option-card__tier { color: var(--color-gold-muted); }

/* ---------- Materyaller + teknik ölçüler ---------- */
.pdp-options__grid { align-items: start; }
.pdp-options__main { display: grid; gap: var(--space-7); min-width: 0; }
.pdp-options__aside { min-width: 0; }
.opts--1 .panel { max-width: 40rem; }
.opts--1,
.opts--2 { gap: var(--space-6); }
.materials { display: grid; gap: var(--space-5); min-width: 0; padding: var(--space-5) 0; border-top: var(--border-w) solid var(--color-border); }
.materials .eyebrow { margin-bottom: var(--space-3); }
.materials__title { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--brand-deep); }
.materials__note { margin: 0; max-width: 26rem; font-size: var(--text-small); color: var(--color-text-muted); }
.materials__visual { min-width: 0; }
.swatches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; padding: 0; list-style: none; }
.swatches-grid__chip { display: block; aspect-ratio: 3 / 2; background: var(--swatch); border: var(--border-w) solid color-mix(in srgb, var(--color-text) 15%, transparent); }
.swatches-grid__name { display: block; margin-top: var(--space-1); font-size: 0.7rem; line-height: 1.25; text-align: center; color: var(--color-text-muted); }

.tech { min-width: 0; padding: var(--space-5); background: #fff; border: var(--border-w) solid var(--color-border); box-shadow: var(--shadow-soft); }
.tech .eyebrow { margin-bottom: var(--space-4); }
.tech__plate { padding: var(--space-3); background: #fff; }
.tech__plate img { width: 100%; height: auto; }
.tech__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; font-size: var(--text-small); }
.tech__facts div { display: flex; gap: var(--space-2); }
.tech__facts dt { margin: 0; color: var(--color-text-muted); }
.tech__facts dd { margin: 0; font-weight: 600; }
.tech__note { margin: var(--space-3) 0 0; font-size: var(--text-label); text-align: center; color: var(--color-text-muted); }
/* Çizim/şema yoksa ölçüler büyük rakam karoları olur (az veride kart boş görünmez). */
.tech--stats .tech__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.tech--stats .tech__facts div { flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); padding: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); }
.tech--stats .tech__facts dd { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 400; line-height: 1; color: var(--wp--preset--color--brand-deep); }
.tech--stats .tech__facts dt { font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.tech--stats .tech__note { text-align: left; }
.dimension-diagram { width: 100%; height: auto; max-height: 16rem; }
.dimension-diagram__box { fill: none; stroke: var(--color-text); stroke-width: 1.5; }
.dimension-diagram__line { stroke: var(--color-gold); stroke-width: 1; }
.dimension-diagram__text { fill: var(--color-text); font: 13px var(--font-sans); letter-spacing: 0.04em; }

/* ---------- Duyarlı ---------- */
@media (min-width: 640px) {
	.materials { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); align-items: center; }
}
@media (min-width: 1180px) {
	.pdp-top { --bh: clamp(26rem, calc(100svh - 12rem), 40rem); --th: calc((var(--bh) - 2 * var(--space-2)) / 3); grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.3fr); gap: var(--space-7); padding-block: var(--space-5) var(--space-7); align-items: stretch; }
	.gallery { min-height: var(--bh); }
	/* Küçük görseller ana görselin yüksekliğine göre büyür: 3 büyük küçük görsel tam sığar. */
	.gallery.has-thumbs { grid-template-columns: minmax(0, 1fr) max(10rem, calc(var(--th) * 1.45)); gap: var(--space-3); align-items: stretch; }
	.stage { aspect-ratio: auto; height: 100%; min-height: var(--bh); }
	.thumbs { flex-direction: column; overflow: hidden; padding: 0; align-content: start; gap: var(--space-2); }
	.thumbs li { flex: none; width: 100%; height: var(--th); }
	.thumbs__item { height: 100%; aspect-ratio: auto; }
	.features__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.4fr); gap: var(--space-7); }
	.features__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pdp-options__grid.has-aside { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-8); }
	.pdp-options__aside { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
	.pdp-options__main .materials { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); }
}
@media (max-width: 639.98px) {
	.pdp__cta { max-width: none; }
	.media-card { grid-template-columns: 4.5rem minmax(0, 1fr); }
	.feature__icon { width: 3.25rem; height: 3.25rem; }
}

.spec-tables--1 { max-width: 38rem; }

/* ---------- Anika vitrini: sinema hissi — sahneler sırayla sola/sağa yaslanır, hafif üst üste biner ---------- */
.showcase { padding-block: var(--space-9) var(--space-8); overflow-x: clip; }
.showcase__head { padding-bottom: var(--space-6); }
.showcase__head h2 { margin: 0; font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 500; }
.showcase__stack { display: grid; gap: var(--space-5); width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.scene { position: relative; z-index: var(--i, 0); width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: var(--border-w) solid var(--color-gold); border-radius: 0.75rem; background: var(--wp--preset--color--cinema); box-shadow: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.7); }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene--wide { aspect-ratio: 3 / 1; }
.scene__no { position: absolute; z-index: 1; left: var(--space-4); bottom: var(--space-3); padding: 0.15rem 0.7rem; border-radius: 2rem; background: rgb(5 15 11 / 0.6); font-size: var(--text-label); letter-spacing: 0.1em; color: #fff; }
.showcase__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
@media (min-width: 900px) {
	.showcase__stack { gap: 0; }
	.scene:not(.scene--wide) { width: 66%; margin-top: calc(var(--space-7) * -1); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
	.scene:first-child { margin-top: 0; }
	.scene.is-left { margin-right: auto; }
	.scene.is-right { margin-left: auto; }
	.js .scene.is-left[data-reveal] { transform: translateX(-4rem); }
	.js .scene.is-right[data-reveal] { transform: translateX(4rem); }
	.js .scene[data-reveal].is-in { transform: none; }
	.scene--wide { margin-top: var(--space-7); }
}

/* ---------- Tek parça koyu bölge: teknik tablo + vitrin/projeler + teklif aynı zeminde, dikişsiz ---------- */
.pdp-dark { position: relative; }
.pdp-dark::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(4rem, 8vw, 8rem); background: linear-gradient(180deg, var(--wp--preset--color--background), transparent); pointer-events: none; z-index: 1; }
.pdp-dark > .is-cinema { background: none; }
.pdp-dark .spec-band { padding-bottom: var(--space-8); }
.pdp-dark .quote-cta { padding-block: 0 var(--space-9); }
.pdp-dark .quote-cta__grid { padding-top: var(--space-8); border-top: var(--border-w) solid color-mix(in srgb, var(--color-gold) 35%, transparent); }
.pdp-dark .showcase { padding-top: var(--space-8); }

/* ---------- Konfigürasyon kartları: temiz çizimler, 2 sütunlu ızgara ---------- */
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.config-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: var(--border-w) solid var(--color-border); border-radius: 0.5rem; overflow: hidden; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.config-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-soft); }
.config-card__art { display: grid; place-items: center; flex: 1; aspect-ratio: 4 / 3; padding: var(--space-3); background: linear-gradient(180deg, #fff, var(--color-surface)); }
.config-card__art img { width: 100%; height: 100%; object-fit: contain; }
.config-card__label { padding: var(--space-3) var(--space-3) var(--space-1); font-family: var(--font-serif); font-size: var(--text-small); line-height: 1.2; color: var(--wp--preset--color--brand-deep); }
.config-card__note { padding: 0 var(--space-3) var(--space-3); font-size: var(--text-label); color: var(--color-text-muted); }
.config-card:not(:has(.config-card__note)) .config-card__label { padding-bottom: var(--space-3); }

/* ---------- Ürün filmi ---------- */
.pdp-film { padding-block: var(--space-8) var(--space-4); }
.pdp-film__inner { display: grid; gap: var(--space-5); align-items: center; }
.pdp-film h2 { margin: 0; font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 500; line-height: 1.1; }
@media (min-width: 900px) { .pdp-film__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--space-8); } }

/* Mobil/tablet sıra: başlık → görseller → açıklama → butonlar. */
@media (max-width: 1179.98px) {
	.pdp-top { gap: var(--space-4); }
	.pdp__info { display: contents; }
	.pdp-top > .breadcrumb, .pdp__info > .breadcrumb { order: 1; }
	.pdp__info > .pdp__series { order: 2; margin: 0; }
	.pdp__info > .pdp__title { order: 3; }
	.pdp__info > .pdp__subtitle { order: 4; margin-top: 0; }
	.pdp-top > .gallery { order: 5; }
	.pdp__info > .pdp__lead { order: 6; margin-top: var(--space-2); }
	.pdp__info > .pdp__cta { order: 7; max-width: none; margin-top: var(--space-2); }
}

/* Mobil/tablet galeri: küçük görseller genişliği eşit paylaşır (sağda boşluk yok). */
@media (max-width: 1179.98px) {
	.gallery { gap: var(--space-2); }
	.stage { aspect-ratio: 4 / 3; border-radius: 0.9rem; }
	.thumbs { display: grid; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); gap: var(--space-2); overflow: visible; padding: 0; }
	.thumbs li { flex: none; width: auto; }
	.thumbs__item { aspect-ratio: 4 / 3; border-radius: 0.6rem; opacity: 1; }
	.thumbs__item:not(.is-active) { border-color: color-mix(in srgb, var(--color-gold) 40%, transparent); }
	.thumbs__item.is-active { box-shadow: 0 0 0 2px var(--color-gold); }
}

/* Teknik tablo: taşma yok, sabit sütun düzeni, daha sade başlık. */
.spec-band { padding-block: var(--space-8) var(--space-7); }
.spec-band__tables .panel__title { margin-bottom: var(--space-5); }
.spec-tables { grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-8); }
.spec-tables > * { min-width: 0; }
.spec-table { table-layout: fixed; }
.spec-table th { width: 38%; font-size: var(--text-label); }
.spec-table td { overflow-wrap: anywhere; line-height: 1.55; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
@media (min-width: 900px) { .spec-tables--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .spec-table th { width: 42%; } }

/* Lightbox küçük görsel şeridi */
.pswp__thumbs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1550; display: flex; justify-content: center; gap: 8px; height: 92px; padding: 10px 16px; overflow-x: auto; background: rgb(5 15 11 / 0.7); scrollbar-width: none; }
.pswp__thumbs::-webkit-scrollbar { display: none; }
.pswp__thumb { flex: none; width: 96px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 4px; background: #111; opacity: 0.6; cursor: pointer; transition: opacity .2s, border-color .2s; }
.pswp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pswp__thumb:hover { opacity: 1; }
.pswp__thumb.is-active { border-color: var(--color-gold); opacity: 1; }
@media (max-width: 599.98px) { .pswp__thumbs { justify-content: flex-start; height: 76px; } .pswp__thumb { width: 72px; height: 56px; } }

/* Çark galeri: oklar, geçiş animasyonları */
.stage__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--color-gold); border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--color-text); cursor: pointer; transform: translateY(-50%); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.stage__nav--prev { left: var(--space-3); }
.stage__nav--next { right: var(--space-3); }
.stage__nav:hover { background: var(--color-brand); color: var(--color-on-brand); }
.stage__nav svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage.is-swap .stage__btn img { animation: stage-swap .26s var(--ease); }
@keyframes stage-swap { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.thumbs__enter { animation: thumb-in .45s var(--ease) both; }
.thumbs__enter:nth-child(2) { animation-delay: .06s; }
.thumbs__enter:nth-child(3) { animation-delay: .12s; }
@keyframes thumb-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@media (max-width: 1179.98px) { .thumbs__enter { animation-name: thumb-in-x; } }
@keyframes thumb-in-x { from { opacity: 0; transform: translateX(1.2rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thumbs__enter, .stage.is-swap .stage__btn img { animation: none; } }

/* Çark belirginleştirme: ana görsel yönlü kayar, küçük görseller bir adım kayar, "+N" ve sayaç */
.stage.is-swap-next .stage__btn img { animation: stage-next .5s var(--ease); }
.stage.is-swap-prev .stage__btn img { animation: stage-prev .5s var(--ease); }
@keyframes stage-next { from { opacity: .15; transform: translateX(9%); } to { opacity: 1; transform: none; } }
@keyframes stage-prev { from { opacity: .15; transform: translateX(-9%); } to { opacity: 1; transform: none; } }
.thumbs.is-wheel { overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
@media (max-width: 1179.98px) { .thumbs.is-wheel { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } }
.thumbs { overflow: hidden; }
.thumbs li { will-change: transform; }
.thumbs__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(5 15 11 / 0.55); color: #fff; font-family: var(--font-serif); font-size: var(--text-h4); }
.stage__count { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2; padding: 0.2rem 0.75rem; border-radius: 2rem; background: rgb(5 15 11 / 0.6); color: #fff; font-size: var(--text-label); letter-spacing: 0.1em; }
.thumbs__enter { animation: none; }

/* Net görünüm: solukluk veren maske ve şeffaflıklar kaldırıldı. */
.stage.is-sides:not(.is-fill) .stage__btn img,
.stage__btn img.fit-tops { -webkit-mask-image: none; mask-image: none; }
.thumbs__item, .thumbs__item:not(.is-active) { opacity: 1; }
.thumbs__item:not(.is-active) { filter: none; }
.thumbs.is-wheel { -webkit-mask-image: none; mask-image: none; }
.thumbs__item img, .stage__btn img { image-rendering: auto; }

/* ---------- Aynı serideki diğer modeller ---------- */
.pdp-siblings { padding-block: var(--space-8); background: var(--gradient-paper-soft); border-top: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent); }
.pdp-siblings__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-6); }
.pdp-siblings__head .eyebrow { margin: 0 0 var(--space-2); }
.pdp-siblings__head h2 { margin: 0; font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 500; color: var(--wp--preset--color--brand-deep); }
.pdp-siblings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); margin: 0; padding: 0; list-style: none; }
.pdp-siblings .product-card__title { font-size: var(--text-h5); }
@media (min-width: 900px) {
	.pdp-siblings__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
}
@media (max-width: 599.98px) { .pdp-siblings .product-card__foot { display: none; } .pdp-siblings .product-card__title { font-size: var(--text-h6); } }

/* ---------- Galeri: sabit, sade geçiş (eski çark/uçan kopya animasyonları kaldırıldı) ---------- */
.thumbs { transition: opacity .22s var(--ease); }
.thumbs.is-out { opacity: 0; }
.thumbs.is-wheel { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.thumbs__enter { animation: none; }
.stage.is-swap-next .stage__btn img, .stage.is-swap-prev .stage__btn img, .stage.is-swap .stage__btn img { animation: none; }


/* Mobil: ürün galerisinin ana görseli uzun (dikey) kadraj */
@media (max-width: 767.98px) {
	.stage { aspect-ratio: 4 / 5; }
}

/* ---- Galeri katmanları: hepsi hazır ve üst üste; değişimde çapraz solma, yeniden yükleme yok ---- */
.stage__btn img { transition: opacity .2s var(--ease); }
.stage__btn img.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.stage__btn img:not(.is-off) { z-index: 1; }
.stage__zoom { z-index: 2; }
.thumbs, .thumbs.is-out { transition: none; opacity: 1; }