/* Canlı model görüntüleyicisi (viewer.js, scenes.js) */
.vz-card h2 { margin-bottom: 10px; }
.vz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.vz-bar .btn { padding: 8px 14px; font-size: 15px; }
/* Oynat/duraklat düğmesinde durum simgesi */
.vz-play { display: inline-flex; align-items: center; gap: 8px; }
.vz-play::before { content: ""; width: 10px; height: 12px; flex: none; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vz-play[aria-pressed="true"]::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }

/* Sahne: sabit oranlı çerçeve. Parça ve değerler her zaman bunun içine sığdırılır; kaydırma ya da yakınlaştırma yoktur.
   Zemin: ince milimetrik ızgara, ortası hafif aydınlık, kenarları yumuşak gölgeli. */
.vz-stage { position: relative; border-radius: 10px; overflow: hidden; background-color: var(--grid-bg);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-soft) 1px, transparent 1px);
  background-size: 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  box-shadow: inset 0 0 0 1px var(--grid-line), inset 0 0 36px rgba(0, 0, 0, 0.10); }
.vz-svg { display: block; width: 100%; height: auto; max-height: 72vh; user-select: none; -webkit-user-select: none; }
/* Rakamlar eş genişlikli (tabular): değer değişirken yazı titremez. Kalın zemin rengi kontur, hareketli parçaların üstünde okunurluğu korur. */
.vz-t { fill: var(--ink); font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; paint-order: stroke; stroke: var(--grid-bg); stroke-width: 4.2px; stroke-opacity: 0.92; stroke-linejoin: round; pointer-events: none; }
.vz-t.vz-m { font-family: var(--font-num); }
/* Alt simgeler (Fᵢ, λ꜀, Lₑ…): tarayıcının varsayılan "sub" kayması fazla; alt satıra değmesin diye azaltılır. */
.vz-t tspan[baseline-shift="sub"] { baseline-shift: -0.22em; }
.vz-dim line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-dim polygon { fill: var(--ink); }
/* Değer kutusu: kart görünümü */
.vz-legend rect { fill: var(--surface); fill-opacity: 0.96; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)); }
.vz-legend .vz-t { stroke: var(--surface); }
/* Değer kartları: animasyonun altında, çizimden bağımsız; her ekranda aynı okunur boyutta. */
.vz-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.vz-vals:empty { display: none; }
.vz-vc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
.vz-vr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 14.5px; }
.vz-vr + .vz-vr { border-top: 1px dashed var(--line); }
.vz-vr span { color: var(--muted); font-weight: 600; }
.vz-vr b { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.vz-vr sub { font-size: 70%; }
@media (max-width: 560px) { .vz-bar .btn { padding: 7px 12px; } .vz-vals { grid-template-columns: 1fr; } }
@media print { .vz-card { display: none !important; } }