/* ---------------------------------------------------------------- 3D ürün */
.product { padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(2rem, 6vh, 4rem); scroll-margin-top: 3rem; }
.product + .product { border-top: 1px solid var(--line); }

.stage {
  position: relative;
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); align-items: center; }
}

.viewport {
  position: relative;
  height: clamp(24rem, 72svh, 52rem);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 60% 18% at 50% 88%, rgba(122, 31, 58, .10), transparent 70%),
    radial-gradient(circle at 30% 20%, #fff 0, var(--card) 40%, #f3e2df 100%);
  overflow: hidden;
  touch-action: pan-y;
}
.canvas-wrap { position: absolute; inset: 0; }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.stage.dragging .canvas-wrap canvas { cursor: grabbing; }

.loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ink-soft); font-size: .95rem; pointer-events: none;
  transition: opacity .4s;
}
.loaded .loading { opacity: 0; }
.loading.error { color: var(--bordo); }
.drag-hint {
  /* sağdaki +/− düğmelerine (44px + kenar boşluğu) yer bırak */
  position: absolute; left: 1rem; right: calc(44px + 1.75rem); bottom: 1rem;
  font-size: .85rem; line-height: 1.35; color: var(--ink-soft); text-align: center; text-wrap: balance;
  pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
@media (min-width: 600px) { .drag-hint { left: calc(44px + 1.75rem); } }
.loaded .drag-hint { opacity: 1; }
.touched .drag-hint { opacity: 0; }

/* yakınlaştırma */
.zoom {
  position: absolute; right: .75rem; bottom: .75rem; display: grid; gap: .4rem;
  opacity: 0; transition: opacity .5s;
}
.loaded .zoom { opacity: 1; }
.zoom button {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink);
  box-shadow: 0 1px 0 rgba(36, 26, 31, .06), 0 6px 18px -8px rgba(36, 26, 31, .35);
  transition: background-color .2s, opacity .2s;
}
.zoom button:hover:not(:disabled) { background: var(--card); color: var(--bordo); }
/* en uzak hâldeyken "−" işe yaramaz; soluk durup bozuk sanılmasın diye gizlenir */
.zoom button:disabled { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.zoom svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }

/* bilgi noktaları */
.hotspots { position: absolute; inset: 0; pointer-events: none; }
.hotspot {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  pointer-events: auto;
  opacity: 0; transition: opacity .3s;
}
.ready .hotspot { opacity: 1; }
.hotspot span {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(36, 26, 31, .14), 0 4px 12px rgba(36, 26, 31, .16);
  transition: transform .2s var(--ease), background-color .2s, color .2s;
}
.hotspot:hover span { transform: scale(1.12); }
.hotspot.active span { background: var(--bordo); color: #fff; transform: scale(1.18); }
.hotspot.behind { opacity: 0 !important; pointer-events: none; }

/* sağ panel */
.panel h2 {
  font-family: var(--display); font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.04; letter-spacing: -.02em;
  text-wrap: balance;
}
.tagline { margin-top: .75rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 36ch; }

.colors { margin-top: 1.75rem; }
.colors-label { font-size: .95rem; color: var(--ink-soft); }
.colors-label span { color: var(--ink); font-weight: 500; }
.swatches { display: flex; gap: .25rem; margin-top: .5rem; margin-left: -6px; }
.swatch { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.swatch::before {
  content: ''; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: box-shadow .2s;
}
.swatch[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }

.parts-title { margin-top: 2rem; font-size: .95rem; font-weight: 600; }
.part-list { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.part-list li { border-bottom: 1px solid var(--line); }
.part-list button {
  width: 100%; min-height: 48px; text-align: left;
  display: flex; align-items: center; gap: .9rem; padding: .4rem 0;
  transition: color .2s;
}
.part-list .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s, color .2s;
}
.part-list button:hover { color: var(--bordo); }
.part-list button.active { color: var(--bordo); font-weight: 500; }
.part-list button.active .num { background: var(--bordo); color: #fff; box-shadow: none; }

/* parça kartı */
.part-card {
  position: absolute; z-index: 5;
  left: 1rem; bottom: 1rem; width: min(22rem, calc(100% - 2rem));
  background: var(--card); border-radius: 20px; padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: 0 1px 0 rgba(36, 26, 31, .06), 0 18px 50px -12px rgba(36, 26, 31, .28);
}
.part-card[hidden] { display: none; }
.part-card.open { animation: card-in .35s var(--ease); }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
.part-card .close {
  position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
}
.part-card .close:hover { background: var(--paper); }
.part-card .close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.card-num { font-size: .85rem; color: var(--bordo); font-weight: 600; font-variant-numeric: tabular-nums; }
.part-card h3 { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-top: .25rem; padding-right: 2rem; }
.part-card dl { margin: 1rem 0 0; display: grid; gap: .7rem; }
.part-card dt { font-size: .8rem; color: var(--ink-soft); }
.part-card dd { margin: .1rem 0 0; font-weight: 500; }
.card-detail { margin-top: 1rem; color: var(--ink-soft); font-size: .95rem; }

@media (max-width: 959px) {
  .part-card {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 60;
    border-radius: 20px 20px 0 0; padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    max-height: 70svh; overflow: auto; overscroll-behavior: contain;
  }
  .part-card.open { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
}