/* ==========================================================================
   MitosOne — 3B sahne ilkel öğeleri (plaka, tel, etiket, lejant)
   Ana sayfa (home.css: açılış sekansı) ve sektör sayfaları (sektor.css) paylaşır.
   site.css token'larını kullanır; burada ham renk yok.
   ========================================================================== */
/* --- İmza sahnesi (CSS 3B) ----------------------------------------------- */
.scene {
  --scene-rx: 56deg;          /* kamera eğimi */
  --scene-rz: -40deg;         /* kamera yönü */
  --scene-t: 12px;            /* plaka kalınlığı */
  --scene-lift: 14px;         /* monolit katman aralığı */
  margin: 0;
  container-type: inline-size;
  position: relative;
}
.scene-view {
  position: relative;
  height: 72cqw;
  max-height: 600px;
  perspective: 2200px;
  perspective-origin: 50% 20%;
  display: grid;
  place-items: center;
}
.scene-cam { transform-style: preserve-3d; }
.scene-floor {
  --rx: var(--scene-rx);
  --rz: var(--scene-rz);
  position: relative;
  width: 82cqw;
  height: 71.75cqw;           /* 640 × 560 tasarım alanı */
  max-width: 660px;
  max-height: 577.5px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
}
/* Zemin ızgarası: mimari çizim kâğıdı — plakaları kesmemesi için maske
   yalnız bu sahte katmana uygulanır. Dolgu yok, yalnız çizgi. */
.scene-floor::before {
  content: "";
  position: absolute;
  inset: -6%;
  background-image:
    linear-gradient(to right, var(--floor-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--floor-line) 1px, transparent 1px);
  background-size: calc(100% / 18) calc(100% / 16);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

.scene-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
.scene-wires .w {
  stroke: var(--wire);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.scene-wires .w--flow { stroke: var(--brand); stroke-width: 2; }
.scene-wires .w--new { stroke: var(--brand); stroke-dasharray: 0.018 0.012; }

/* Plaka: taban (z=0, gölgeyi zemine düşürür) + üst yüz + iki görünür yan yüz. */
.plate {
  position: absolute;
  left: calc(var(--x) * 100% / 640);
  top: calc(var(--y) * 100% / 560);
  width: calc(148 * 100% / 640);
  height: calc(96 * 100% / 560);
  transform-style: preserve-3d;
  border-radius: 3px;
  box-shadow: 10px 14px 26px -6px var(--plate-shadow);
}
.plate-top {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--scene-t));
  background: var(--plate-top);
  border: 1px solid var(--plate-edge);
  border-radius: 3px;
  padding: 9% 9%;
  display: grid;
  align-content: start;
  gap: 9%;
}
/* Üst yüzdeki "alan" çizgileri — kayıt türünün soyut hâli. */
.plate-top b {
  display: block;
  height: 14%;
  width: 44%;
  border-radius: 2px;
  background: var(--ink-3);
  opacity: 0.55;
  font-size: 0;
}
.plate-top i { display: block; height: 7%; border-radius: 2px; background: var(--line-2); }
.plate-top i:nth-of-type(2) { width: 72%; }
.plate-top i:nth-of-type(3) { width: 56%; }
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  background: var(--plate-side);
  border: 1px solid var(--plate-edge);
}
.plate::before { /* güney yüzü (+y) */
  left: 0; top: 100%; width: 100%; height: var(--scene-t);
  transform-origin: top; transform: rotateX(90deg);
}
.plate::after { /* batı yüzü (-x) */
  top: 0; right: 100%; width: var(--scene-t); height: 100%;
  transform-origin: right; transform: rotateY(90deg);
  filter: brightness(0.94);
}
.plate--active .plate-top { border-color: var(--brand-line); }
.plate--active .plate-top b { background: var(--brand); opacity: 1; }

.plate--new .plate-top {
  background: color-mix(in oklab, var(--plate-top) 88%, var(--brand));
  border: 1px dashed var(--brand);
}
.plate--new .plate-top b { background: var(--brand); opacity: 1; }
.plate--new .plate-top i { background: var(--brand-line); }

/* Etiket: kameraya dönük (billboard) — zemin dönüşünün tersi. */
.plate-lbl {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  /* Son translateZ kamera ekseninde öne alır: etiket düzlemi komşu plakaların
     içinden geçmez (derinlik kesişmesi), izdüşümdeki yeri neredeyse değişmez. */
  transform: translateZ(calc(var(--scene-t) + 2px)) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(-50%, calc(-100% - 10px)) translateZ(90px);
  white-space: nowrap;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--ink-0);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  box-shadow: var(--elev-1);
}
.plate-lbl em {
  display: block;
  margin-top: 3px;
  font: 500 var(--t-micro)/1 var(--font-mono);
  font-style: normal;
  letter-spacing: 0;
  color: var(--brand-ink);
}
.plate--new .plate-lbl { border-color: var(--brand-line); }

.scene-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 4px;
  font: 400 var(--t-caption)/1.4 var(--font-sans);
  color: var(--ink-2);
}
.scene-cap span { display: inline-flex; align-items: center; gap: 7px; }
.scene-cap .k { width: 12px; height: 8px; border-radius: 2px; flex: none; }
.scene-cap .k--std { background: var(--plate-top); border: 1px solid var(--plate-edge); }
.scene-cap .k--new { border: 1px dashed var(--brand); background: var(--brand-soft); }
.scene-cap .k--wire { height: 0; border-top: 2px solid var(--brand); border-radius: 0; }


@media (max-width: 999px) {
  .scene { max-width: 620px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .scene { --scene-t: 9px; }
  .scene-view { height: 74cqw; }
  .scene-floor { width: 84cqw; height: 73.5cqw; }
  .plate-lbl { font-size: var(--t-micro); padding: 4px 6px; }
  /* Dar ekranda alt satır komşu etiketin ("Ürün") üstüne biniyordu; anlamı lejant zaten taşıyor. */
  .plate-lbl em { display: none; }
  .scene-cap { gap: 4px 12px; }
}