/* Konfigüratörlü ürün sayfası — solda sabit sahne, sağda bölge bölümleri. Sitenin tonları: #efefef zemin, #202020 mürekkep. */
.yk { --yk-ink: #202020; --yk-muted: #6b6b6b; --yk-line: rgba(32, 32, 32, .16); --yk-top: 116px; --yk-ease: cubic-bezier(.16, 1, .3, 1); }
.yk ::selection { background: #202020; color: #fff; }

.yk .yk-head__lead { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--yk-muted); }

/* ---- stüdyo: sahne + bölümler ---- */
.yk-studio { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 0 calc(var(--shop-gap) * 2); align-items: start; padding: 0 var(--shop-gutter); }
.yk-stage { position: sticky; top: var(--yk-top); display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - var(--yk-top) - 24px); min-height: 420px; background: #fff; }
.yk-stage__plate { display: grid; place-items: center; min-height: 0; padding: clamp(16px, 2.4vw, 44px); }
.yk-stage__plate .ykonf-sahne { width: min(100%, calc((100svh - var(--yk-top) - 24px - 64px - 2 * clamp(16px, 2.4vw, 44px)) * var(--yk-ratio))); }
.yk-stage__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; min-height: 64px; padding: 18px clamp(16px, 2.4vw, 44px); border-top: 1px solid var(--yk-line); }
.yk-stage__now { margin: 0; min-width: 0; font-size: 14px; color: var(--yk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yk-stage__now b { display: inline-block; margin-left: 10px; font-size: 18px; font-weight: 500; color: var(--yk-ink); }
.yk-stage__now .is-in { animation: yk-in .55s var(--yk-ease); }
.yk-stage__step { margin: 0; font-size: 13px; color: var(--yk-muted); font-variant-numeric: tabular-nums; }
@keyframes yk-in { from { opacity: 0; transform: translateY(6px); } }

.yk-steps { min-width: 0; padding-bottom: 48px; }
/* Bütün bölgeler alt alta; vurgu üstüne gelince / seçince */
.yk-step { min-width: 0; margin: 0; padding: 26px 0 30px; border: 0; border-top: 1px solid var(--yk-line); }
.yk-step:first-child { padding-top: 4px; border-top: 0; }
.yk-step__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; float: none; width: 100%; margin: 0 0 18px; padding: 0; }
.yk-step__name { font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.005em; color: var(--yk-ink); }
.yk-step__current { font-size: 14px; color: var(--yk-muted); text-align: right; }

.yk-group + .yk-group { margin-top: 18px; }
.yk-group__name { margin: 0 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--yk-muted); }
.yk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 16px 12px; }
.yk-swatch { position: relative; display: grid; align-content: start; gap: 12px; cursor: pointer; }
.yk-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.yk-swatch__chip { display: block; aspect-ratio: 1; background-color: #ddd; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); outline: 1px solid transparent; outline-offset: 5px; transition: transform .5s var(--yk-ease), outline-color .2s; }
.yk-swatch:hover .yk-swatch__chip { transform: scale(1.035); }
.yk-swatch input:checked + .yk-swatch__chip { outline-color: var(--yk-ink); }
.yk-swatch input:focus-visible + .yk-swatch__chip { outline: 2px solid var(--yk-ink); }
.yk-swatch__name { font-size: 13px; line-height: 1.3; color: var(--yk-ink); }
.yk-swatch input:checked ~ .yk-swatch__name { font-weight: 700; }

/* ---- özet ---- */
.yk-summary { padding-top: 28px; }
.yk-summary__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.yk-summary__actions .ykonf-pdf { margin: 0; }
.yk .ykonf-pdf__ac, .yk .ykonf-pdf__indir { min-height: 54px; padding: 0 26px; border-radius: 27px; font-size: 12px; letter-spacing: .14em; }
.yk .ykonf-pdf__ac { background: transparent; color: var(--yk-ink); border-color: var(--yk-ink); }
.yk .ykonf-pdf__ac:hover, .yk .ykonf-pdf__ac[aria-expanded="true"] { background: var(--yk-ink); color: #fff; }
.yk .ykonf-pdf__indir { background: #111; border-color: #111; }
.yk .ykonf-pdf__panel { margin-top: 16px; }
.yk .ykonf-pdf__ops { color: var(--yk-muted); }
.yk .ykonf-pdf__ac:focus-visible, .yk .ykonf-pdf__indir:focus-visible { outline: 2px solid var(--yk-ink); outline-offset: 3px; }

/* ---- tablet / mobil: sahne üstte yapışık, bölümler altında akar ---- */
@media (max-width: 1023px) {
	.yk-studio { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.yk-stage { z-index: 5; height: auto; min-height: 0; box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .28); }
	.yk-stage__plate { padding: 10px var(--shop-gutter); }
	.yk-stage__plate .ykonf-sahne { width: min(100%, calc(38svh * var(--yk-ratio))); }
	.yk-stage__bar { min-height: 0; padding: 8px var(--shop-gutter) 10px; }
	.yk-stage__now b { font-size: 16px; }
	.yk-steps { padding: 0 var(--shop-gutter) 48px; }
	.yk-step { padding: 22px 0 24px; }
	.yk-step:first-child { padding-top: 22px; }
	.yk-step__name { font-size: 21px; }
	.yk-swatches { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 14px 10px; }
	.yk-summary__actions { flex-direction: column; align-items: stretch; }
	.yk-summary__actions .yol-shop-button, .yk .ykonf-pdf__ac { justify-content: center; width: 100%; }
	.yk .ykonf-pdf__panel { max-width: none; }
	.yk.yol-shop .yol-shop-sidetab { display: none; } /* kartelaların üstüne biniyor */
}
@media (prefers-reduced-motion: reduce) {
	.yk-swatch__chip { transition: none; }
	.yk-stage__now .is-in { animation: none; }
}