/* YENİ sipariş ekranı (deneme) — orta yaş için büyük ve net */
.ys { font-family: var(--f-body); color: var(--c-ink); font-size: 17px; padding-bottom: 90px; }
.ys-demo { background: #fff4d6; border: 1px solid #f0d890; color: #6a5100; font-size: 13px; padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; text-align: center; }
.ys-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.ys-left { position: relative; }   /* Evimde Dene gibi: önizleme ve seçim paneli birlikte kayar (sticky yok) */
.ys-prev-card { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; }
.ys-prev { aspect-ratio: 4 / 3; position: relative; }
.ys-prev .pv-win { width: 52%; height: 84%; }
.ys-rail.top { position: absolute; left: 0; right: 0; top: 0; height: 9px; z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ys-prev .pv-blind { top: 9px; }
.ys-prev-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px; flex-wrap: wrap; }
.ys-try { background: var(--c-ink); color: #fff; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
.ys-free { font-size: 14px; color: var(--c-ink-soft); margin: 12px 4px 0; }
.ys-right h1 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 16px; }
.ys-sec { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.ys-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ys-head.static { cursor: default; }
.ys-num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #e9e5dd; color: var(--c-ink); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.ys-sec.open .ys-num { background: var(--c-ink); color: #fff; }
.ys-sec.done .ys-num { background: #1FAF5A; color: #fff; font-size: 0; }
.ys-sec.done .ys-num::before { content: "✓"; font-size: 18px; }
.ys-t { font-weight: 800; font-size: 19px; }
.ys-sum { margin-left: auto; color: var(--c-ink-soft); font-size: 15px; text-align: right; }
.ys-edit { display: none; font-size: 14px; color: var(--c-accent); text-decoration: underline; font-weight: 700; margin-left: 8px; }
.ys-sec.done:not(.open) .ys-edit { display: inline; }
.ys-body { display: none; padding: 0 18px 18px; }
.ys-sec.open .ys-body, .ys-last .ys-body { display: block; }
.ys-sw, .ys-prof { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ys-sw button, .ys-prof button { border: 2px solid transparent; background: #faf8f4; border-radius: 8px; padding: 6px; cursor: pointer; font: inherit; font-size: 13px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.ys-sw img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; display: block; }
.ys-prof img { width: 100%; height: 40px; object-fit: cover; border-radius: 4px; display: block; background: #fff; }
.ys-sw button.cur, .ys-prof button.cur { border-color: var(--c-ink); background: #fff; font-weight: 700; }
.ys-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ys-card { border: 2px solid var(--c-line); background: #fff; border-radius: 10px; padding: 12px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; }
.ys-card svg { width: 64px; height: 64px; }
.ys-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.ys-card b { font-size: 17px; }
.ys-card small { font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.4; }
.ys-card.cur { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-ink) inset; }
.ys-card.help { border-style: dashed; background: #f7fbf8; }
.ys-card .q { width: 44px; height: 44px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.ys-vid { display: flex; align-items: center; gap: 12px; background: #f6f2ea; padding: 12px 14px; border-radius: 8px; color: var(--c-ink); font-weight: 700; font-size: 15px; text-decoration: none; margin-bottom: 12px; }
.ys-vid .pl { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-ink); display: grid; place-items: center; font-size: 12px; }
.ys-note { font-size: 15px; color: var(--c-ink-soft); margin: 0 0 12px; }
.ys-fld { margin-bottom: 14px; }
.ys-fld label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 16px; }
.ys-fld small { font-weight: 400; color: var(--c-ink-soft); }
.ys-in { display: flex; border: 2px solid var(--c-line); border-radius: 8px; overflow: hidden; background: #fff; }
.ys-in:focus-within { border-color: var(--c-ink); }
.ys-in input { flex: 1; min-width: 0; border: 0; padding: 15px 14px; font: inherit; font-size: 20px; }
.ys-in input:focus { outline: none; }
.ys-in input::placeholder { color: #bbb; }
.ys-in span { background: #efe9dd; padding: 0 16px; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.ys-cm { font-size: 14px; color: var(--c-ink-soft); margin-top: 4px; min-height: 18px; }
.ys-err { display: none; color: var(--c-accent); font-size: 14px; margin-top: 4px; }
.ys-fld.err .ys-in { border-color: var(--c-accent); }
.ys-fld.err .ys-err { display: block; }
.ys-calc { display: flex; justify-content: space-between; align-items: center; background: #eef8f1; border: 1px solid #bfe3cb; border-radius: 8px; padding: 12px 14px; margin: 6px 0 10px; font-size: 16px; }
.ys-calc b { font-size: 22px; }
.ys-link { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 15px; color: var(--c-accent); font-weight: 700; text-decoration: underline; cursor: pointer; display: inline-block; }
.ys-msg { margin-top: 12px; padding: 11px 14px; border-left: 4px solid var(--c-accent); background: #fbf1f1; color: #7a1f22; font-size: 15px; border-radius: 3px; }
.ys-msg[hidden] { display: none; }
.ys-next { margin-top: 16px; width: 100%; border: 0; border-radius: 8px; background: var(--c-ink); color: #fff; font: inherit; font-weight: 800; font-size: 17px; padding: 15px; cursor: pointer; }
.ys-summary { border-top: 1px solid var(--c-line); }
.ys-row { display: grid; grid-template-columns: 1fr auto 34px; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 16px; }
.ys-row span { color: var(--c-ink-soft); }
.ys-row b { text-align: right; }
.ys-row.total b { font-size: 22px; }
.ys-pen { border: 0; background: #f2efe9; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--c-ink); }
.ys-qty { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.ys-qty button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c-line); background: #fff; font-size: 22px; cursor: pointer; }
.ys-qty b { min-width: 24px; text-align: center; font-size: 19px; color: var(--c-ink); }
.ys-cart { border: 0; border-radius: 8px; background: #1FAF5A; color: #fff; font: inherit; font-weight: 800; font-size: 17px; padding: 14px 22px; cursor: pointer; }
.ys-cart.big { width: 100%; margin-top: 16px; padding: 17px; font-size: 18px; }
.ys-cart.off { background: #b9c4bd; }
.ys-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -6px 18px rgba(0,0,0,.08); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ys-bar small { display: block; font-size: 12.5px; color: var(--c-ink-soft); }
.ys-bar b { font-size: 21px; }
.ys-page ~ .wa-float, body:has(#ys) .wa-float { bottom: calc(env(safe-area-inset-bottom, 0px) + 88px) !important; }
@media (max-width: 900px) {
  .ys-grid { grid-template-columns: 1fr; gap: 18px; }
  .ys-left { position: relative; }
  .ys-prev { aspect-ratio: 16 / 9; }
  .ys-prev-foot { padding: 8px 12px; font-size: 13px; }
  .ys-free { display: none; }
  .ys-cards { grid-template-columns: 1fr 1fr; }
}
.ys-sec.open .ys-sum { display: none; }
.ys-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
/* Kaydırma ipucu */
.ys-sw-hint { display: none; font-size: 12.5px; color: var(--c-ink-soft); margin: 0 0 8px; }
/* Mobil taşma düzeltmesi + renk paletleri yatay kaydırmalı şerit */
.ys-grid > *, .ys-sec, .ys-right, .ys-left { min-width: 0; }
@media (max-width: 900px) {
  .ys-sw, .ys-prof { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .ys-sw button, .ys-prof button { flex: 0 0 78px; scroll-snap-align: start; font-size: 12px; padding: 5px; }
  .ys-prof button { flex-basis: 84px; }
  .ys-sw-hint { display: block; }
}
.ys *, .ys *::before, .ys *::after { box-sizing: border-box; }
.ys-t { flex: 1 1 auto; min-width: 0; }
.ys-sum { flex: 0 1 auto; min-width: 0; }
@media (max-width: 600px) {
  .ys-head { gap: 10px; padding: 14px; }
  .ys-t { font-size: 17px; }
  .ys-sum { font-size: 13.5px; max-width: 38%; }
  .ys-edit { font-size: 13px; margin-left: 4px; }
  .ys-body { padding: 0 14px 16px; }
}
/* Güven şeridi, Evimde Dene kartı, ürün bilgileri */
.ys-trust { list-style: none; padding: 0; margin: -4px 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.5px; color: #1f7a45; font-weight: 600; }
.ys-evd { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 2px dashed #c9bfae; border-radius: 10px; background: #fbf8f2; color: var(--c-ink); text-decoration: none; font-size: 14px; line-height: 1.4; }
.ys-evd .ic { font-size: 26px; }
.ys-evd b { font-size: 15.5px; }
.ys-evd .go { margin-left: auto; white-space: nowrap; background: var(--c-ink); color: #fff; padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 13.5px; }
.ys-info { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 4px 18px; margin-top: 12px; }
.ys-info summary { cursor: pointer; font-weight: 800; font-size: 17px; padding: 12px 0; }
.ys-info .ys-row { grid-template-columns: 1fr auto 0; }
@media (max-width: 600px) { .ys-evd { flex-wrap: wrap; } .ys-evd .go { margin-left: 38px; } .ys-trust { font-size: 13px; } }
@media (max-width: 600px) {
  .ys-evd { display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; }
  .ys-evd .go { grid-column: 2; margin-left: 0; justify-self: start; }
}
/* Evimde Dene: kamera simgeli açık renkli kart (siyah hap yerine) */
.ys-try { display: inline-flex; align-items: center; gap: 10px; background: #fbf8f2; color: var(--c-ink); border: 2px dashed #c9bfae; border-radius: 12px; padding: 8px 12px; text-decoration: none; transition: border-color .2s, background .2s; }
.ys-try:hover { border-color: var(--c-ink); background: #fff; }
.ys-try .ic { font-size: 24px; line-height: 1; }
.ys-try .tx { display: flex; flex-direction: column; line-height: 1.25; }
.ys-try .tx b { font-size: 15px; }
.ys-try .tx small { font-size: 12.5px; color: var(--c-ink-soft); font-weight: 400; }
.ys-try .ar { font-weight: 800; font-size: 18px; margin-left: 2px; }
@media (max-width: 600px) {
  .ys-try { padding: 6px 10px; gap: 8px; }
  .ys-try .ic { font-size: 20px; }
  .ys-try .tx b { font-size: 14px; }
  .ys-try .tx small { display: none; }
}
@media (max-width: 600px) {
  .ys-prev-foot { flex-wrap: nowrap; }
  .ys-prev-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
  .ys-try { flex: 0 0 auto; }
  .ys-try .ar { display: none; }
}
.ys-row.flash { animation: ysFlash 1.6s ease; }
@keyframes ysFlash { 0%, 40% { background: #e5f6ea; } 100% { background: transparent; } }
.ys-carry { display: flex; flex-direction: column; gap: 2px; background: #e9f7ee; border: 1px solid #bfe3cb; color: #1f5e37; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; font-size: 15px; }
.ys-carry b { font-size: 16px; }
@media (max-width: 600px) { .ys-sum { max-width: 46%; } .ys-sec.done:not(.open) .ys-t { font-size: 15.5px; } }
.ys-sample-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ys-sample { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--c-ink); background: #fff; color: var(--c-ink); font: inherit; font-weight: 800; font-size: 15px; padding: 10px 16px; border-radius: 999px; cursor: pointer; }
.ys-sample.on { background: #e9f7ee; border-color: #1FAF5A; color: #1f5e37; }
.ys-sample .ic { font-size: 18px; }
.ys-sample-row.m { display: none; }
@media (max-width: 900px) { .ys-left .ys-sample-row { display: none; } .ys-sample-row.m { display: flex; margin-top: 14px; } }
.ys-h { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 12px; }
.yss-main { aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.yss-main img { width: 100%; height: 100%; object-fit: contain; }
.yss-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; }
.yss-thumbs:empty { display: none; }
.yss-thumbs button { flex: 0 0 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #fff; cursor: pointer; }
.yss-thumbs button.cur { border-color: var(--c-ink); }
.yss-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.yss-kosul { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--c-ink-soft); }
@media (max-width: 900px) { .yss-main { aspect-ratio: 16 / 9; } .yss-thumbs { display: none; } }
/* Ölçü alanları yan yana + klavye açıkken sabit öğeleri gizle */
.ys-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ys-pair .ys-fld { margin-bottom: 8px; min-width: 0; }
@media (max-width: 600px) {
  .ys-pair { gap: 8px; }
  .ys-pair .ys-fld label { font-size: 14.5px; }
  .ys-pair .ys-fld label small { display: block; font-size: 12px; }
  .ys-pair .ys-in input { padding: 13px 10px; font-size: 19px; }
  .ys-pair .ys-in span { padding: 0 9px; font-size: 14px; }
  .ys-pair .ys-err { font-size: 12.5px; }
}
@media (max-width: 900px) {
  body.ys-typing .ys-left { position: static !important; }
  body.ys-typing .ys-bar, body.ys-typing .wa-float { display: none !important; }
}
.ys-calc[hidden] { display: none; }
/* Önizleme perdesi elle açılıp kapanır */
.ys-prev .pv-win { touch-action: none; cursor: ns-resize; }
.ys-prev .pv-blind { transition: height .12s ease-out; }
.ys-prev.dragging .pv-blind { transition: none; }
.ys-grip { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 2; width: 34px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.92); color: #23211D; font-size: 14px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
/* Eksik adım uyarıları */
.ys-row.miss span:first-child { color: #9A2B2E; font-weight: 700; }
.ys-missbtn { justify-self: end; border: 1.5px solid #e2b1b1; background: #fbf1f1; color: #9A2B2E; font: inherit; font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.ys-warn { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d890; color: #6a5100; font-size: 15px; line-height: 1.45; }
.ys-warn button { display: block; margin-top: 8px; border: 0; background: #23211D; color: #fff; font: inherit; font-weight: 800; font-size: 15px; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.ys-barmiss { color: #9A2B2E !important; font-weight: 800; }
#ysBarPrice, #yssBarPrice { cursor: pointer; }
.ys-row.miss .ys-pen { visibility: hidden; }
.ys-prev .pv-blind { animation-fill-mode: backwards !important; }   /* animasyon bittikten sonra elle ayarlanan yükseklik geçerli olsun */
.ys-prev .pvp-glass { touch-action: none; cursor: ns-resize; }
.ys-prev .pvp { height: 100%; }
.ys-prev { aspect-ratio: 1 / 1; background: #f4f1ec; }
@media (max-width: 900px) { .ys-prev { aspect-ratio: 4 / 3; } }
.ys-prev-card { position: relative; }
.ys-prev-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(35,33,29,.75); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.ys-prev-hint[hidden] { display: none; }
.ys-prev .pvp-glass { touch-action: pan-y; cursor: pointer; }
.ys-prev.armed .pvp-glass { touch-action: none; cursor: ns-resize; }
.ys-prev-hint { white-space: normal; max-width: 88%; text-align: center; }

/* ===== Ürün özellikleri (NewShades "Eigenschaften" tarzı, sayfa altında tam genişlik) ===== */
.ys-props { margin-top: 56px; }
.ys-props-t { font-size: 1.5rem; font-weight: 500; margin: 0 0 14px; }
.ys-props-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; grid-auto-flow: row; }
.ys-prop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.ys-prop span { color: var(--c-ink); }
.ys-prop b { font-weight: 700; text-align: right; }
.ys-acc { margin-top: 36px; display: grid; gap: 10px; }
.ys-acc details { background: #F7F4EE; border-radius: 6px; }
.ys-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ys-acc summary::-webkit-details-marker { display: none; }
.ys-acc summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; }
.ys-acc details[open] summary::after { content: "\2013"; }
.ys-acc-b { padding: 0 18px 18px; font-size: 15px; color: var(--c-ink-soft); }
.ys-acc-b p { margin: 0; }
.ys-acc-b a { color: var(--c-accent); text-decoration: underline; }
@media (max-width: 760px) {
  .ys-props { margin-top: 36px; }
  .ys-props-grid { grid-template-columns: 1fr; }
  .ys-prop { font-size: 14px; }
}

/* ===== Galeri: büyük görsel üstünde Evimde Dene, altında küçük fotoğraflar ===== */
.ys-prev-card { position: relative; }
.ys-photo { position: absolute; inset: 0; z-index: 6; background: #f4f1ec; }
.ys-photo[hidden] { display: none; }
.ys-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ys-try.on-photo { position: absolute; right: 12px; bottom: 12px; z-index: 7; background: rgba(255,255,255,.94); border: 0; border-radius: 999px; padding: 8px 14px 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18); gap: 8px; }
.ys-try.on-photo:hover { background: #fff; }
.ys-try.on-photo .ic { font-size: 20px; }
.ys-try.on-photo .tx b { font-size: 14px; }
.ys-try.on-photo .tx small { font-size: 11.5px; }
.ys-thumbs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 10px; }
.ys-th { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #f4f1ec; aspect-ratio: 1; cursor: pointer; }
.ys-th img, .ys-th-live { width: 100%; height: 100%; object-fit: cover; display: block; }
.ys-th-live { background-size: cover; background-position: center; position: relative; }
.ys-th-live::after { content: "\25B6"; position: absolute; inset: auto 4px 4px auto; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 3px; padding: 1px 4px; }
.ys-th.on { border-color: var(--c-ink); }
.ys-th:hover:not(.on) { border-color: #c9bfae; }
@media (max-width: 900px) {
  .ys-thumbs { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: thin; }
  .ys-th { flex: 0 0 56px; height: 56px; }
  .ys-try.on-photo { right: 8px; bottom: 8px; padding: 6px 10px; }
  .ys-try.on-photo .tx small { display: none; }
}

/* ===== Sipariş modülü: daha kompakt (sol görselle aynı hizada bitsin) ===== */
@media (min-width: 901px) {
  .ys-right h1 { font-size: 28px; margin-bottom: 8px; }
  .ys-trust { margin: 0 0 14px !important; gap: 4px 14px !important; font-size: 13.5px !important; }
  .ys-sec { margin-bottom: 8px; border-radius: 8px; }
  .ys-head { padding: 10px 14px; gap: 12px; font-size: 15.5px; }
  .ys-num { flex-basis: 28px; height: 28px; font-size: 14px; }
  .ys-sec.done .ys-num::before { font-size: 15px; }
  .ys-body { padding: 0 14px 14px !important; }
  .ys-sw, .ys-prof { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .ys-sw button, .ys-prof button { padding: 3px; font-size: 11px; gap: 3px; border-radius: 6px; line-height: 1.2; }
  .ys-sw img { border-radius: 4px; }
  .ys-next { margin-top: 12px; padding: 11px; font-size: 15px; }
  .ys-cards { gap: 8px !important; }
  .ys-row { padding: 7px 0; font-size: 14.5px; grid-template-columns: 1fr auto 28px; }
  .ys-row.total b { font-size: 19px; }
  .ys-pen { width: 26px; height: 26px; }
  .ys-qty button { width: 32px; height: 32px; font-size: 18px; }
  .ys-cart.big { margin-top: 12px; padding: 13px; font-size: 16px; }
  .ys-note, .ys-fld label { font-size: 14px; }
}
@media (min-width: 901px) {
  /* Sol görsel dikey (4:5) — sağdaki modülle aynı hizada bitsin */
  .ys-prev { aspect-ratio: 4 / 5; }
  /* Bir adım düzenlenirken özet kısalır: yalnızca adet ve toplam görünür (seçimler zaten adım başlıklarında yazıyor) */
  .ys:has(.ys-sec.open:not(.ys-last)) #ysSummary .ys-row:not(.total):not(.qty) { display: none; }
}

/* Plise sineklik: büyük görsel kutuya sığsın (küçük fotoğrafların altına taşmasın) */
.yss-main { position: relative; }
.yss-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.yss-stage { position: relative; }
.yss-thumbs { padding-bottom: 10px; }