/* 3B Görüntüleyici: solda sahne, sağda denetimler. */
/* Renk ve tipografi değişkenleri her sayfa CSS'inde tanımlanır; theme.css
   yalnızca koyu tema için üzerlerine yazar. Diğer sayfalarla birebir aynı. */
:root{
  --ink:#0A2A57;--ink-2:#3B5C8A;--ink-3:#7391B8;--paper:#EDF3FC;--card:#fff;--line:#D3E1F3;
  --blue:#1668E3;--blue-deep:#0C4AAE;--blue-soft:#DEEAFB;--warm:#E8541E;--ok:#1687C4;
  --err:#B4231A;
  --disp:'Space Grotesk',sans-serif;--body:'Manrope',sans-serif;--mono:'IBM Plex Mono',monospace;
  --r:16px
}
*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;color:inherit}
img,video,canvas{display:block;max-width:100%}

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

nav{background:var(--card);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink)}
.back{font-size:13.5px;color:var(--ink-2);font-weight:600}

.viewer-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;
  max-width:1420px;margin:0 auto;padding:22px 24px 40px;align-items:start}

/* Sahne: WebGL tuvali ve — açıksa — kamera görüntüsü aynı alanı paylaşır. */
.stage{position:relative;aspect-ratio:4/3;min-height:420px;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:linear-gradient(150deg,#E4EEFC,var(--card))}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.stage.drop{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,104,227,.16)}
.camera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  /* Ayna görüntüsü: kullanıcı elini sağa oynattığında ekranda da sağa gider. */
  transform:scaleX(-1)}
.ruler{position:absolute;left:14px;bottom:14px;z-index:3;padding:6px 12px;border-radius:99px;
  background:var(--ink);color:#fff;font:700 11px/1 var(--mono);letter-spacing:.07em}

.status{margin:12px 2px 0;font-size:13px;line-height:1.55;color:var(--ink-2);min-height:20px}
.status[data-tone="ok"]{color:#2C7D61}
.status[data-tone="warn"]{color:#8A6212}
.status[data-tone="error"]{color:var(--err,#B4231A)}

.panel{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:22px}
.panel h1{font-family:var(--disp);font-size:24px;margin:0 0 8px}
.intro{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px}
.block{padding-top:18px;border-top:1px solid var(--line)}
.block h2{font-family:var(--disp);font-size:16px;margin:0 0 8px}
.block-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:0 0 13px}

.file-drop{display:grid;gap:3px;place-items:center;padding:20px;border:1.5px dashed var(--line);
  border-radius:12px;cursor:pointer;text-align:center}
.file-drop b{font-size:13.5px}
.file-drop small{color:var(--ink-3);font:500 11.5px/1 var(--mono)}
.file-drop input{display:none}

.model-info{margin:14px 0 0;display:grid;gap:7px}
.model-info>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.model-info dt{color:var(--ink-3)}
.model-info dd{margin:0;font-family:var(--mono);font-weight:500;text-align:end;word-break:break-all}

.scale-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.scale-value{font:600 14px/1 var(--mono)}
.scale-state{margin:0 0 14px;font-size:12px;line-height:1.5}
.scale-state[data-tone="ok"]{color:#2C7D61}
.scale-state[data-tone="warn"]{color:#8A6212}

.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:10px;
  font-weight:700;font-size:13px;border:1.5px solid transparent;cursor:pointer}
.btn-b{background:var(--ink);color:#fff}
.btn-o{border-color:var(--line);background:transparent;color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pinch-state{font:600 11.5px/1 var(--mono);color:var(--ink-3)}

/* Madde imi yok; ipuçları satır aralığıyla ayrılır. */
.hints{margin:14px 0 0;display:grid;gap:8px}
.hints li{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.hints b{color:var(--ink)}

.calibrate{border:none;border-radius:18px;padding:26px;max-width:min(92vw,840px);
  background:var(--card);color:var(--ink);box-shadow:0 30px 70px rgba(10,42,87,.3)}
.calibrate::backdrop{background:rgba(10,20,35,.55)}
.calibrate h2{font-family:var(--disp);font-size:21px;margin:0 0 8px}
.calibrate p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
/* Ölçüm dikdörtgeni: kullanıcı gerçek kartı bunun üstüne koyar. */
.card-shape{border:2px solid var(--blue);border-radius:10px;background:var(--blue-soft);margin:0 0 16px}
.calibrate input[type=range]{width:100%;margin:0 0 12px}
.card-readout{font-size:13px;margin:0 0 18px}
.card-readout b{font-family:var(--mono)}

footer{border-top:1px solid var(--line);padding:24px 0;font-size:13px;color:var(--ink-3)}
.legal-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}
.legal-links a{color:var(--ink-3);font-size:12.5px}

/* Studio'nun çerçevesinde açıldığında gezinme ve altbilgi gizlenir;
   pencerenin kendi başlığı ve kapatma düğmesi zaten var. */
html.embedded nav,html.embedded footer{display:none}
html.embedded .viewer-layout{padding-top:0}

@media(max-width:980px){
  .viewer-layout{grid-template-columns:1fr;padding:16px 16px 32px}
  .stage{min-height:320px}
}