/* Konsept AYT Fizik — video çözüm sahnesi (1600×900 mantıksal tuval) */
@font-face { font-family: "Hand"; src: url("hand.woff2?v=87056bc8") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "HandL"; src: url("handl.woff2?v=87056bc8") format("woff2"); unicode-range: U+004C; }

.stage { position: relative; width: 1600px; height: 900px; overflow: hidden; background: #ece7db;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1f2329; transform-origin: 0 0;
  --brand: #0f2340; --brand2: #d23a26; --sun: #ffc531; }   /* kitabın lacivert / kırmızı / sarı paleti */
.stage * { box-sizing: border-box; }

/* üst şerit */
.stage .topbar { position: absolute; left: 0; top: 0; right: 0; height: 58px; background: var(--brand); color: #fff;
  display: flex; align-items: center; gap: 18px; padding: 0 26px; }
.stage .topbar .logo { font: 800 15px/1 "Avenir Next", "Jost", "Helvetica Neue", Arial; letter-spacing: .32em; }
.stage .topbar .logo b { background: var(--brand2); padding: 5px 9px; border-radius: 5px; letter-spacing: .08em; margin-left: 8px; }
.stage .topbar .crumb { font: 500 17px "Avenir Next", "Jost", "Helvetica Neue", Arial; opacity: .85; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .topbar .crumb i { font-style: normal; opacity: .5; margin: 0 8px; }
.stage .topbar .chip { font: 700 16px "Avenir Next", "Jost", "Helvetica Neue", Arial; background: #fff; color: var(--brand);
  border-radius: 999px; padding: 7px 16px; }
.stage .topbar .chip span { color: var(--brand2); }
.stage .topbar .vc { font: 600 13px "Avenir Next", "Jost", Arial; letter-spacing: .14em; color: var(--sun); }

/* beyaz yaprak: solda soru, sağda tahta */
.stage .sheet { position: absolute; left: 16px; top: 72px; right: 16px; bottom: 16px; background: #fff; border-radius: 14px;
  box-shadow: 0 1px 0 #d8d0bf; }
.stage .divider { position: absolute; left: 790px; top: 96px; bottom: 40px; border-left: 2px dashed #e6e0d3; }

.stage .qpanel { position: absolute; left: 44px; top: 96px; width: 712px; height: 780px; }
.stage .qcard { position: relative; padding-left: 40px; font-size: 22px; line-height: 1.5; transform-origin: 0 0; }
.stage .qcard .qn { position: absolute; left: 0; top: 0; font-weight: 800; color: var(--brand2); }
.stage .qcard p { margin: 0 0 12px; }
.stage .qcard .qq { font-weight: 700; }
.stage .qcard .figure { margin: 8px 0 14px; text-align: center; }
.stage .qcard .figure svg { height: auto; }
.stage .qcard .figure img { max-width: 100%; border-radius: 6px; }
.stage .qcard .figure .duo { display: flex; align-items: center; gap: 14px; }
.stage .qcard .figure .duo img { width: 47%; display: block; }
.stage .qcard .figure .duo svg { width: 51%; }
.stage .qcard ol.roman { list-style: none; padding-left: 4px; margin: 4px 0 10px; counter-reset: r; }
.stage .qcard ol.roman li { counter-increment: r; margin: 3px 0; padding-left: 44px; position: relative; }
.stage .qcard ol.roman li::before { content: counter(r, upper-roman) "."; position: absolute; left: 0; }
.stage .qcard .opts { display: grid; gap: 8px 30px; margin-top: 8px; }
.stage .qcard .opt b { margin-right: 4px; }
.stage .qcard .opts.fig .opt { display: flex; align-items: flex-start; gap: 6px; }
.stage .qcard .v { display: inline-block; position: relative; font-style: normal; }
.stage .qcard .v::after { content: ""; position: absolute; left: 5%; right: -8%; top: -1px; border-top: 1.5px solid currentColor; }
.stage .qcard .v::before { content: ""; position: absolute; right: -10%; top: -4px; border-left: 6px solid currentColor;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent; }

/* el yazısı katmanı */
.stage .wlayer { position: absolute; inset: 0; pointer-events: none; }
.stage .w { position: absolute; white-space: nowrap; font-family: "Hand", cursive; font-weight: 600; line-height: 1.05;
  visibility: hidden; transform-origin: 0 50%; }
.stage .w .m-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .12em;
  font-size: .86em; line-height: 1.02; }
.stage .w .m-frac > span { padding: 0 .12em; }
.stage .w .m-frac > span + span { border-top: .075em solid currentColor; }
.stage .w sub { font-size: .62em; vertical-align: -.28em; line-height: 0; }
.stage .w sup { font-size: .62em; vertical-align: .55em; line-height: 0; }
.stage .w .m-sqrt { display: inline-flex; align-items: stretch; white-space: nowrap; vertical-align: middle; }
.stage .w .m-sqrt > i { font-style: normal; font-size: 1.18em; line-height: 1; transform: scaleY(1.12); transform-origin: 50% 100%; margin-right: -.06em; }
.stage .w .m-sqrt > span { border-top: .075em solid currentColor; padding: .08em .08em 0; margin-top: .12em; line-height: 1.02; }
.stage .w .m-vec { position: relative; display: inline-block; }
.stage .w .m-L { display: inline-block; font-family: "HandL", "Hand", cursive; font-weight: 400; font-size: .95em; transform: skewX(-8deg); }
.stage .w .m-vec::after { content: "→"; position: absolute; left: 0; right: 0; top: -.62em; text-align: center; font-size: .7em; }

.stage svg.ink { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; overflow: visible; }
.stage svg.ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* kalem ucu */
.stage .pen { position: absolute; left: 0; top: 0; width: 46px; height: 46px; pointer-events: none; opacity: 0; transition: none; }

/* cevap damgası */
.stage .stamp { position: absolute; right: 52px; bottom: 44px; display: flex; align-items: center; gap: 14px;
  background: var(--brand); color: #fff; border-radius: 16px; padding: 14px 24px 14px 18px; opacity: 0;
  font: 700 26px "Avenir Next", "Jost", "Helvetica Neue", Arial; box-shadow: 0 10px 30px rgba(15, 35, 64, .25); transform-origin: 100% 100%; }
.stage .stamp b { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sun);
  color: var(--brand); font-size: 30px; }

/* giriş kartı */
.stage .intro { position: absolute; inset: 0; display: grid; place-items: center; background: var(--brand); color: #fff; opacity: 0; }
.stage .intro .t1 { font: 600 20px "Avenir Next", "Jost", Arial; letter-spacing: .4em; color: var(--sun); text-align: center; }
.stage .intro .t2 { font: 800 64px/1.1 "Avenir Next", "Jost", "Helvetica Neue", Arial; text-align: center; margin: 18px 0 10px; }
.stage .intro .t3 { font: 500 26px "Avenir Next", "Jost", Arial; opacity: .8; text-align: center; }

/* dikey (telefon) düzen: 820 genişlik, soru üstte, tahta altta; yükseklik JS ile */
.stage.portrait { width: 820px; }
.stage.portrait .qpanel { left: 54px; height: auto; }
.stage.portrait .divider { left: 40px; right: 40px; bottom: auto; border-left: 0; border-top: 2px dashed #e6e0d3; }
.stage.portrait .topbar { gap: 12px; padding: 0 20px; }
.stage.portrait .topbar .vc { display: none; }
.stage.portrait .stamp { right: 36px; bottom: 32px; }