/*
 * The five product pages (ruling BA). Dark register, no new tokens.
 *
 * The shell is the legal pages': the nav is pinned solid from a body class
 * for the same reason legal.css pins it -- these pages do not load main.js,
 * so nothing would ever add .scrolled. The example wells are the homepage
 * stack band's wells, styled by css/site.css; this file only takes them out
 * of that band's grid. The icon disc is .orbit-disc from the homepage orbit.
 */
body.page-product .nav {
  background: var(--color-ink);
  border-bottom-color: var(--color-ink-line);
  transition: none;
}
.product {
  /* Clears the fixed bar, as .legal does. */
  padding-top: calc(91px + var(--spacing-48));
  padding-bottom: var(--spacing-96);
}
.product-inner { max-width: 960px; }

.product-back {
  display: inline-flex;
  gap: 8px;
  padding: 12px 0;
  color: var(--color-ink-mist);
  text-decoration: none;
}
.product-back:hover { color: var(--color-linen); }

.product-head {
  margin-top: var(--spacing-24);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--spacing-48);
  align-items: center;
}
.product-head-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* THE PRODUCT'S OBJECT (ruling BB): a Tripo mesh drawn by js/model.js the way
   the hero's brain is drawn. The box is a square the object's bounding sphere
   is fitted to, so no pose clips. pan-y: a vertical touch drag still scrolls
   the page, a horizontal one turns the object. The canvas is transparent and
   hides itself without WebGL2, and the figure then takes no room. The
   "drag to turn" caption was removed by the owner; the grab cursor says it. */
.product-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); }
.product-figure:has(canvas[hidden]) { display: none; }
.product-model {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  touch-action: pan-y;
  cursor: grab;
  border-radius: var(--radius-md);
}
.product-model.is-dragging { cursor: grabbing; }
.product-model:focus-visible { outline: 2px solid var(--color-sand); outline-offset: 3px; }
.product-disc { width: 64px; height: 64px; }
.product-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-16); margin: var(--spacing-24) 0 0; }
.product-kicker .layer-eyebrow { margin: 0; }
.product h1 {
  margin: var(--spacing-12) 0 0;
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--weight-light);
  color: var(--color-linen);
  max-width: 24ch;
}
.product-lead {
  margin: var(--spacing-20) 0 0;
  max-width: 62ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-on-dark-secondary);
}
.product-head .layer-meta { margin: var(--spacing-24) 0 0; }

.product-section { margin-top: var(--spacing-64); min-width: 0; }
.product .product-label {
  margin: 0 0 var(--spacing-16);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: var(--weight-regular);
  color: var(--color-sand);
  max-width: none;
}
/* Out of the stack band's grid: no third column, no spine inset. */
.product .layer-view {
  grid-column: auto;
  margin-left: 0;
  padding: var(--spacing-20);
  max-width: 720px;
}

.product-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); }
.product-card {
  padding: var(--card-padding-lg);
  background: var(--color-ink-deep);
  border: 1px solid var(--color-ink-line);
  border-radius: var(--radius-md);
}
.product-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: var(--weight-medium);
  color: var(--color-linen);
}
.product-card p { margin: var(--spacing-12) 0 0; color: var(--color-ink-mist); }

.product-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-48); }
.product-body { margin: 0; max-width: 62ch; color: var(--color-ink-mist); }
.product-status-body { margin: 0; max-width: 62ch; color: var(--text-on-dark-secondary); }
.product-list { margin: 0; padding: 0; list-style: none; color: var(--color-ink-mist); }
.product-list li { padding: 12px 0; border-top: 1px solid var(--color-ink-line); }
.product-list li:last-child { border-bottom: 1px solid var(--color-ink-line); }

.product-close {
  margin-top: var(--spacing-96);
  padding-top: var(--spacing-48);
  border-top: 1px solid var(--color-ink-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-20);
}
.product .product-close h2 { margin: 0; }

.product-pager {
  margin-top: var(--spacing-64);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
}
.product-pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--card-padding-lg);
  border: 1px solid var(--color-ink-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-mist);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-signal);
}
.product-pager a.is-next { text-align: right; align-items: flex-end; }
.product-pager-name { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-medium); color: var(--color-linen); }
@media (hover: hover) { .product-pager a:hover { border-color: var(--color-sand); } }
.product-pager a:focus-visible, .product-back:focus-visible { outline: 2px solid var(--color-sand); outline-offset: 3px; }

@media (max-width: 900px) {
  .product-head { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-24); }
  /* FIRST, not last (owner: "telefon görünümünde de 3d objeler görünür
     olsun"). Under the text the object began at y 687 of an 812px phone and
     nobody saw it without scrolling; above the head, at 260px, it is on the
     first screen with the title still above the fold. */
  .product-figure { order: -1; }
  .product-model { width: min(72%, 260px); }
  .product-head { margin-top: var(--spacing-8); gap: var(--spacing-16); }
}
@media (max-width: 760px) {
  .product-cards, .product-two { grid-template-columns: minmax(0, 1fr); }
  .product-lead { font-size: 18px; }
  .product-section { margin-top: var(--spacing-48); }
}
@media (prefers-reduced-motion: reduce) { .product-pager a { transition: none; } }