/* DELUXSE ürün sayfası (Aşama 3). Renkler tokens.css'ten; --tint seçili ürün rengidir (JS ayarlar). */

.pv { --tint: var(--dx-orange); --pv-pad: clamp(3.5rem, 8vw, 7rem); }
.pv section { padding-inline: var(--gutter); }
.pv-in, .pv-story__in, .pv-buy__in, .pv-specs__in, .pv-related__head, .pv-stats__grid, .pv-points__grid, .pv-colors > * { max-width: var(--maxw); margin-inline: auto; }

/* Ürün üst barı (Apple'daki yerel menü gibi) */
.pv-local {
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 40;
  background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.pv-local__in { display: flex; align-items: center; gap: var(--s-4); height: 52px; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.pv-local__back { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); color: var(--fg-2); white-space: nowrap; }
.pv-local__back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.pv-local__back:hover { color: var(--fg); }
.pv-local__name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
@media (max-width: 560px) { .pv-local__back { display: none; } .pv-local__name { text-align: left; } }

/* Açılış */
.pv-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--s-4); padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--s-7); overflow: clip; }
.pv-code { font-size: .8rem; color: var(--fg-2); background: var(--bg-alt); padding: 2px 8px; border-radius: 6px; margin-left: 6px; letter-spacing: 0; text-transform: none; }
.pv-hero__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; animation: pvUp 700ms var(--ease-out) both; }
.pv-hero__tag { font-size: var(--fs-lead); color: var(--fg-2); max-width: 30rem; animation: pvUp 700ms 80ms var(--ease-out) both; }
.pv-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3) var(--s-5); animation: pvUp 700ms 140ms var(--ease-out) both; }
@keyframes pvUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pv-stage { position: relative; width: min(100%, 620px); aspect-ratio: 1; display: grid; place-items: center; perspective: 1000px; touch-action: pan-y; margin-top: var(--s-2); }
.pv-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 38%, transparent), transparent 72%); filter: blur(12px); transition: background var(--t-slow) var(--ease-out); }
.pv-stage__tilt { position: relative; width: 88%; height: 88%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform var(--t-mid) var(--ease-out); }
.pv-stage__tilt.is-live { transition: transform 80ms linear; }
/* Ürün sahnede yavaşça döner: önde bekler, yan döner, öbür taraftan önüne gelir (yarım turlar, toplam 360 derece).
   Kenardan geçerken görsel ters dönmez, yazı ve logo hep düz okunur. Elle tutunca ya da üstüne gelince durur. */
.pv-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: pvSpinIn 1400ms 100ms cubic-bezier(.2, .8, .2, 1) both, pvTurn 14s 1500ms linear infinite; }
.pv-stage__tilt.is-live .pv-spin, .pv-stage:hover .pv-spin { animation-play-state: running, paused; }
@keyframes pvSpinIn { from { opacity: 0; transform: rotateY(-360deg) scale(.82) translateY(24px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes pvTurn {
  0% { transform: rotateY(0) translateY(0); animation-timing-function: ease-in-out; }
  16% { transform: rotateY(0) translateY(-8px); animation-timing-function: ease-in-out; }
  32% { transform: rotateY(0) translateY(0); animation-timing-function: ease-in; }
  40% { transform: rotateY(90deg) translateY(0); animation-timing-function: step-end; }
  40.01% { transform: rotateY(-90deg) translateY(0); animation-timing-function: ease-out; }
  48% { transform: rotateY(0) translateY(0); animation-timing-function: ease-in-out; }
  66% { transform: rotateY(0) translateY(-8px); animation-timing-function: ease-in-out; }
  84% { transform: rotateY(0) translateY(0); animation-timing-function: ease-in; }
  92% { transform: rotateY(90deg) translateY(0); animation-timing-function: step-end; }
  92.01% { transform: rotateY(-90deg) translateY(0); animation-timing-function: ease-out; }
  100% { transform: rotateY(0) translateY(0); }
}
.pv-floor { position: absolute; left: 22%; right: 22%; bottom: 4%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 17, 19, .22), transparent); filter: blur(6px); animation: pvFloor 14s 1500ms ease-in-out infinite; pointer-events: none; }
:root[data-theme="dark"] .pv-floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
@keyframes pvFloor { 0%, 32%, 48%, 84%, 100% { transform: scaleX(1); opacity: 1; } 16%, 66% { transform: scaleX(.88); opacity: .75; } 40%, 92% { transform: scaleX(.55); opacity: .6; } }
.pv-main { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 36px 36px rgba(17, 17, 19, .18)); }
@keyframes pvIn { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
[data-main] { transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out); }
[data-main].is-swap { opacity: 0; transform: scale(.96); }
/* Renk değişince ürün yan dönüp yeni renkle geri döner */
.pv-main[data-main] { transition: opacity 240ms var(--ease-out), transform 420ms cubic-bezier(.2, .8, .2, 1); }
.pv-main[data-main].is-swap { opacity: 0; transform: rotateY(90deg) scale(.94); transition-duration: 200ms; }
.pv-optname { font-weight: 600; min-height: 1.5em; }
.pv-allnote { margin-top: 0; }

/* Renk / kapasite seçici */
.pv-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.pv-chips--hero { justify-content: center; }
.pv-chip { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); outline: 2px solid transparent; outline-offset: 3px; transition: transform var(--t-fast) var(--ease-out), outline-color var(--t-fast); }
.pv-chip:hover { transform: scale(1.08); }
.pv-chip[aria-checked="true"] { outline-color: var(--fg); }
.pv-chip--text { width: auto; height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: var(--fs-small); outline-offset: 0; }
.pv-chip--text[aria-checked="true"] { outline-color: var(--dx-orange); box-shadow: none; }

/* Öne çıkan değerler (katalogdan) */
.pv-stats { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding-block: var(--s-8); }
.pv-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-6) var(--s-5); }
.pv-stats__grid li { display: grid; gap: 4px; justify-items: center; text-align: center; }
.pv-stat__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pv-stat__v small { font-size: .4em; font-weight: 700; letter-spacing: 0; margin-left: 4px; color: var(--dx-orange-strong); }
.pv-stat__l { color: var(--fg-2); font-size: var(--fs-small); }

/* Tanıtım (koyu bant) */
.pv-story { background: var(--bg); color: var(--inverse-fg); padding-block: var(--pv-pad); overflow: clip; }
.pv-story .lead { color: var(--inverse-fg-2); }
.pv-story__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.pv-story__copy { display: grid; gap: var(--s-5); }
.pv-story__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; --sp: 1; }
.pv-story__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%); opacity: calc(.35 + var(--sp) * .5); }
.pv-story__media img { position: relative; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5));
  transform: scale(calc(.78 + var(--sp) * .22)) rotate(calc((1 - var(--sp)) * -12deg)); }
@media (max-width: 899px) { .pv-story__in { grid-template-columns: 1fr; gap: var(--s-5); } .pv-story__media { max-width: 440px; width: 100%; justify-self: center; } }

/* Kısa öne çıkan noktalar */
.pv-points { padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.pv-points__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.pv-points__grid li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--tint); }
.pv-points__grid b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.015em; }
.pv-points__grid span { color: var(--fg-2); }
@media (max-width: 760px) { .pv-points__grid { grid-template-columns: 1fr; gap: var(--s-5); } }

/* Renkler galerisi */
.pv-colors { background: var(--bg-alt); padding-block: var(--pv-pad); }
.pv-colors .h2 { text-align: center; margin-bottom: var(--s-7); }
.pv-colors__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); }
.pv-swatchcard { display: grid; gap: var(--s-3); justify-items: center; width: 100%; padding: var(--s-4) var(--s-3) var(--s-5); background: var(--surface); border-radius: var(--r-lg); outline: 2px solid transparent; transition: transform var(--t-mid) var(--ease-out), outline-color var(--t-fast); }
.pv-swatchcard:hover { transform: translateY(-4px); }
.pv-swatchcard.is-on { outline-color: var(--dx-orange); }
.pv-swatchcard img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform var(--t-slow) var(--ease-out); }
.pv-swatchcard:hover img { transform: scale(1.06) rotate(-3deg); }
.pv-swatchcard span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.pv-swatchcard span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 25%, transparent); }
.pv-swatchcard:not([style]) span::before { display: none; }
@media (max-width: 560px) { .pv-colors__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Satın alma */
.pv-buy { padding-block: var(--pv-pad); scroll-margin-top: 120px; }
.pv-buy__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
.pv-buy__gallery { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--s-3); position: sticky; top: 124px; }
.pv-buy__main { display: grid; place-items: center; aspect-ratio: 1; background: var(--bg-alt); border-radius: var(--r-lg); padding: var(--s-6); }
.pv-buy__main img { width: 100%; height: 100%; object-fit: contain; }
.pv-thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pv-thumb { width: 68px; height: 68px; padding: 6px; border-radius: var(--r-sm); background: var(--bg-alt); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--t-fast); }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pv-thumb.is-on, .pv-thumb:hover { outline-color: var(--dx-orange); }
.pv-buy__panel { display: grid; gap: var(--s-5); min-width: 0; }
.pv-price { display: grid; gap: 4px; padding: var(--s-4) var(--s-5); background: var(--dx-orange-soft); border-radius: var(--r-md); }
.pv-price b { font-family: var(--font-display); font-size: 1.4rem; }
.pv-price span { font-size: var(--fs-small); color: var(--fg-2); }
.pv-opt { display: grid; gap: var(--s-3); }
.pv-opt__label { font-size: var(--fs-small); color: var(--fg-2); }
.pv-opt__label b { color: var(--fg); }
.pv-qty { display: flex; align-items: center; justify-content: space-between; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); }
.qty button { width: 40px; height: 40px; display: grid; place-items: center; }
.qty svg { width: 16px; height: 16px; }
.qty output { min-width: 2.5ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.btn--block { width: 100%; min-height: 54px; font-size: 1.05rem; }
.pv-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); }
.btn--ch { font-size: var(--fs-small); padding: 0 var(--s-3); white-space: normal; text-align: center; line-height: 1.2; gap: 8px; }
.btn--ch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ch); }
.btn--trendyol { --ch: #F27A1A; }
.btn--hb { --ch: #FF6000; }
.btn--wa { --ch: #25D366; }
.btn--ig { --ch: #E1306C; }
.btn.is-disabled { position: relative; color: var(--fg-3); cursor: not-allowed; }
.btn.is-disabled::before { opacity: .45; }
.btn.is-disabled small { position: absolute; top: -8px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--fg-2); background: var(--bg-alt); border: 1px solid var(--line); padding: 0 6px; line-height: 16px; border-radius: var(--r-pill); }
.pv-assure { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.pv-assure li { display: flex; gap: var(--s-3); align-items: center; }
.pv-assure svg { width: 20px; height: 20px; color: var(--dx-orange); flex-shrink: 0; }
.pv-assure a { color: var(--dx-orange-strong); font-weight: 600; }
@media (max-width: 899px) {
  .pv-buy__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .pv-buy__gallery { position: static; }
  .pv-buy__main { padding: var(--s-4); }
}

/* Teknik özellikler */
.pv-specs { background: var(--bg-alt); padding-block: var(--pv-pad); }
.pv-specs .h2 { margin-bottom: var(--s-6); }
.pv-dl { display: grid; border-top: 1px solid var(--line); }
.pv-dl > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.pv-dl dt { color: var(--fg-2); font-size: var(--fs-small); }
.pv-dl dd ul { display: grid; gap: 6px; }
.pv-dl dd li::before { content: "•"; color: var(--dx-orange); margin-right: 8px; }
@media (max-width: 560px) { .pv-dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* Benzer ürünler */
.pv-related { padding-block: var(--pv-pad); padding-inline: 0 !important; }
.pv-related__head { padding-inline: var(--gutter); margin-bottom: var(--s-6); }
.pv-related__rail { max-width: var(--maxw); margin-inline: auto; }
@media (min-width: 900px) { .pv-related__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-rel { display: grid; gap: 4px; height: 100%; padding: var(--s-4); background: var(--bg-alt); border-radius: var(--r-lg); transition: transform var(--t-mid) var(--ease-out); }
.pv-rel:hover { transform: translateY(-4px); }
.pv-rel img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: var(--s-2); transition: transform var(--t-slow) var(--ease-out); }
.pv-rel:hover img { transform: scale(1.05); }
.pv-rel__code { font-family: var(--font-code); font-size: var(--fs-micro); color: var(--fg-3); }
.pv-rel__name { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
@media (max-width: 899px) { .pv-related__rail { grid-auto-columns: 46%; } }

@media (prefers-reduced-motion: reduce) {
  .pv-story__media { --sp: 1 !important; }
}
.recent { --pv-pad: var(--section-y); }
@media (prefers-reduced-motion: reduce) { .pv-spin, .pv-floor { animation: none; } }

/* Görsel ölçüleri: Apple'daki gibi ürün ekranı doldurmaz. Telefonda da bilgisayarda da başlık, renkler ve
   ürün ilk ekrana birlikte sığar. Yükseklik ekranın yarısını geçmez. */
.pv-hero__title { font-size: clamp(2rem, 3.2vw + .9rem, 3.5rem); }
.pv-stage { width: min(100%, 420px, 46svh); }
.pv-stage__tilt { width: 92%; height: 92%; }
.pv-story__media { max-width: 420px; width: 100%; justify-self: center; }
.pv-story__media img { width: 74%; height: 74%; }
.pv-buy__main { max-width: 480px; width: 100%; justify-self: center; padding: var(--s-7); }
@media (max-width: 899px) {
  .pv-stage { width: min(78vw, 340px, 42svh); }
  .pv-story__media { max-width: 300px; }
  .pv-buy__main { max-width: 340px; padding: var(--s-5); }
}