/* ==========================================================
   "3 dakikada Bodynamic" video oynatıcısı ve sahne animasyonları
   ========================================================== */
.video-page main { padding-top: 96px; }
.player { max-width: 1100px; margin: 0 auto; }
.stage-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(31,42,36,.45); background: #f3ebde; }
.vstage {
  position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0;
  background:
    radial-gradient(700px 400px at 85% 15%, rgba(217,138,95,.18), transparent 60%),
    radial-gradient(600px 400px at 5% 95%, rgba(138,165,143,.25), transparent 60%),
    #f6efe4;
  font-family: var(--sans);
}
.vsvg { width: 1280px; height: 720px; display: block; }

/* Altyazı */
.vsub {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: 1080px; width: max-content;
  background: rgba(31,42,36,.82); color: #fff; padding: 10px 22px; border-radius: 14px; font-size: 26px; line-height: 1.35; text-align: center;
  transition: opacity .25s;
}
.vsub:empty { opacity: 0; }
.no-subs .vsub { display: none; }

/* Büyük oynat düğmesi */
.big-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(246,239,228,.35); border: 0; cursor: pointer; }
.big-play span { width: 96px; height: 96px; border-radius: 50%; background: var(--clay); color: #fff; display: grid; place-items: center; font-size: 2.2rem; box-shadow: 0 20px 40px -12px rgba(166,86,50,.6); padding-left: 6px; transition: transform .2s; }
.big-play:hover span { transform: scale(1.06); }
.big-play[hidden] { display: none; }

/* Kontroller */
.controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ctrl { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; height: 42px; min-width: 42px; padding: 0 14px; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ctrl:hover { border-color: var(--forest); }
.ctrl.primary { background: var(--forest); color: #fff; border-color: var(--forest); }
.ctrl[aria-pressed="false"] { opacity: .55; }
.timeline-bar { flex: 1; min-width: 160px; display: flex; gap: 4px; height: 42px; align-items: center; cursor: pointer; }
.timeline-bar .seg { position: relative; flex: var(--w) 1 0; height: 8px; background: var(--sand-2); border-radius: 999px; overflow: hidden; }
.timeline-bar .seg span { position: absolute; inset: 0; width: 0; background: var(--clay); }
.time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); min-width: 92px; text-align: right; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.chapters button { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 10px 14px; font-size: .9rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: center; }
.chapters button b { font-family: var(--serif); color: var(--clay); font-weight: 500; }
.chapters button.current { border-color: var(--forest); color: var(--ink); background: #fff; }
.video-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Render modu: MP4 kaydı için yalnızca tuval */
body.render { margin: 0; overflow: hidden; background: #f6efe4; }
body.render .site-header, body.render .video-intro, body.render .controls, body.render .chapters, body.render .video-cta, body.render .site-footer, body.render .big-play { display: none !important; }
body.render main { padding: 0; }
body.render .player { max-width: none; }
body.render .stage-wrap { width: 1280px; height: 720px; border-radius: 0; box-shadow: none; aspect-ratio: auto; }

/* ---------- Sahne tipografisi ---------- */
.vsvg text { font-family: var(--sans); fill: var(--ink); }
.vsvg .h1 { font-family: var(--serif); font-size: 84px; font-weight: 500; }
.vsvg .h1.accent { fill: var(--clay); font-style: italic; }
.vsvg .h2 { font-family: var(--serif); font-size: 52px; font-weight: 500; }
.vsvg .sub { font-size: 30px; fill: var(--ink-soft); }
.vsvg .cap { font-size: 23px; fill: var(--ink-soft); }
.vsvg .eyebrow-t { font-size: 22px; font-weight: 700; letter-spacing: .18em; fill: var(--clay); }
.vsvg .year { font-family: var(--serif); font-size: 40px; fill: var(--clay); }
.vsvg .big-num { font-family: var(--serif); font-size: 120px; fill: var(--forest); }
.vsvg .axis { font-size: 18px; fill: var(--muted); }
.vsvg .bar-label { font-size: 22px; font-weight: 600; }
.vsvg .pill { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.vsvg .pill.dark { fill: var(--forest); stroke: none; }
.vsvg .pill-t { font-size: 25px; font-weight: 600; fill: var(--forest); }
.vsvg .pill-t.light { fill: #fff; letter-spacing: .02em; }
.vsvg .panel { fill: var(--paper); stroke-width: 3; }
.vsvg .hypo-p { stroke: var(--moss); }
.vsvg .bal-p { stroke: var(--gold); }
.vsvg .hyper-p { stroke: var(--clay); }
.vsvg .panel-t { font-size: 34px; font-weight: 700; letter-spacing: .06em; }
.vsvg .mod-card { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.vsvg .mod-n { font-family: var(--serif); font-size: 34px; fill: var(--clay); }
.vsvg .mod-ic { font-size: 70px; }
.vsvg .mod-t { font-family: var(--serif); font-size: 30px; }
.vsvg .map-t { font-family: var(--serif); font-size: 46px; }
.vsvg .step-c.s0 { fill: #8a5a7a; } .vsvg .step-c.s1 { fill: var(--forest-2); } .vsvg .step-c.s2 { fill: var(--forest); }
.vsvg .step-n { font-family: var(--serif); font-size: 60px; fill: #fff; }
.vsvg .line { fill: none; stroke: var(--forest); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vsvg .line.thick { stroke-width: 4; stroke: var(--moss); }
.vsvg .dot-c { fill: var(--clay); stroke: var(--paper); stroke-width: 6; }
.vsvg .leader { fill: none; stroke-width: 2.5; stroke-dasharray: 6 6; }
.vsvg .vfig .fill { fill: #efe4d3; }
.vsvg .bond { fill: none; stroke: var(--clay); stroke-width: 5; stroke-linecap: round; }
.vsvg .heart { fill: var(--clay); }
.vsvg .boundary { fill: rgba(138,165,143,.08); stroke: var(--moss); stroke-width: 3; stroke-dasharray: 10 10; }
.vsvg .root-glow { fill: var(--moss); opacity: .35; }
.vsvg .breathe-c { fill: url(#none); fill: rgba(201,116,74,.16); }
.vsvg .ring-c { fill: none; stroke: rgba(47,74,58,.25); stroke-width: 2; stroke-dasharray: 8 10; }
.vsvg .fiber { fill: none; stroke-width: 12; stroke-linecap: round; }
.vsvg .hypo-f { stroke: var(--moss); }
.vsvg .bal-f { stroke: var(--clay); }
.vsvg .hyper-f { stroke: #a64a26; stroke-width: 18; }

/* ---------- Zamanlama ----------
   --D: sahne süresi (sn), --t0: sahnede ileri sarılan süre (sn), --at: öğenin belirdiği oran */
.vstage { --D: 10; --t0: 0; }
.vstage .draw, .vstage .fade-up, .vstage .fade-in, .vstage .pop, .vstage .grow-x, .vstage .hl-region,
.vstage .boundary, .vstage .breathe-c, .vstage .ring-c, .vstage .vfig .fill {
  --delay: calc(var(--at, 0) * var(--D) * 1s - var(--t0) * 1s);
  animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
.vstage .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vdraw 1.8s var(--delay) both ease-in-out; }
.vstage .vfig .fill { opacity: 0; animation: vfade 1.2s calc(var(--delay) + 1.1s) both; }
.vstage .fade-up { animation: vfadeup .9s var(--delay) both; }
.vstage .fade-in { animation: vfade .8s var(--delay) both; }
.vstage .pop { transform-box: fill-box; transform-origin: center; animation: vpop .7s var(--delay) both cubic-bezier(.3,1.5,.5,1); }
.vstage .grow-x { animation: vgrowx 1s var(--delay) both; }
.vstage .hl-region { opacity: 0; animation: vhl 1s var(--delay) both, vpulse 2.4s calc(var(--delay) + 1s) infinite ease-in-out; }
.vstage .boundary { transform-box: fill-box; transform-origin: center; animation: vpop 1s var(--delay) both; }
.vstage .breathe-c { transform-box: fill-box; transform-origin: center; animation: vfade 1s var(--delay) both, vbreathe 8s var(--delay) infinite ease-in-out; }
.vstage .ring-c { transform-box: fill-box; transform-origin: center; animation: vfade 1s var(--delay) both, vspin 60s linear infinite; }
.vstage .hypo-f { animation: vsag 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: top; }
.vstage .hyper-f { animation: vtremble .18s linear infinite; }
.vstage .bal-f { animation: vbreathey 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.vstage .root-glow { animation: vglow 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.vstage.paused *, .vstage.paused { animation-play-state: paused !important; }

@keyframes vdraw { to { stroke-dashoffset: 0; } }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vfadeup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vpop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes vgrowx { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes vhl { from { opacity: 0; } to { opacity: .6; } }
@keyframes vpulse { 0%, 100% { opacity: .6; } 50% { opacity: .35; } }
@keyframes vbreathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
@keyframes vspin { to { transform: rotate(360deg); } }
@keyframes vsag { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04) translateX(3px); } }
@keyframes vtremble { 0% { transform: translateX(0); } 25% { transform: translateX(1.5px); } 75% { transform: translateX(-1.5px); } }
@keyframes vbreathey { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.97); } }
@keyframes vglow { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.12); opacity: .45; } }

@media (max-width: 640px) {
  .time { display: none; }
  .ctrl.hide-sm { display: none; }
}
.vsvg .mod-t.sm { font-size: 25px; }
.vsvg .cap.sm { font-size: 19px; }
@media (max-width: 640px) {
  .big-play span { width: 60px; height: 60px; font-size: 1.4rem; padding-left: 4px; }
}

/* ---------- Ego çarkı ---------- */
.vsvg .wheel-n { font-family: var(--serif); font-size: 26px; fill: #fff; }
.vsvg .wheel-hub { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.vsvg .wheel-c { font-family: var(--serif); font-size: 64px; fill: var(--forest); }
.vsvg .wheel-cs { font-size: 18px; fill: var(--ink-soft); letter-spacing: .04em; }
.vsvg .ego-wheel .dimmed { opacity: .22; }
.vstage .ego-wheel .dimmed.pop { animation-name: vpopdim; }
@keyframes vpopdim { from { opacity: 0; transform: scale(.6); } to { opacity: .22; transform: none; } }
.vsvg .ego-num { font-family: var(--serif); font-size: 44px; }
.vsvg .ego-name { font-family: var(--serif); font-size: 29px; }

/* ---------- Şok travma ---------- */
.vsvg .wave { fill: none; stroke: var(--forest); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.vsvg .wave.alarm { stroke: var(--clay); }
.vsvg .wave.settle { stroke: var(--forest-2); }
.vsvg .roots { fill: none; stroke: var(--forest-2); stroke-width: 5; stroke-linecap: round; }
.vsvg .strike { fill: none; stroke: var(--clay); stroke-width: 6; stroke-linecap: round; }
.vsvg .note-box { fill: rgba(217,178,111,.2); stroke: rgba(217,178,111,.6); stroke-width: 2; }
.vsvg .dissoc .fill { display: none; }
.vsvg .dissoc .line { stroke: var(--muted); }
.vstage .dissoc {
  --delay: calc(var(--at, 0) * var(--D) * 1s - var(--t0) * 1s);
  opacity: 0; animation: vghost 1.6s var(--delay) both ease-out;
}
@keyframes vghost { from { opacity: 0; transform: translate(-20px, 10px); } to { opacity: .45; transform: none; } }

/* ---------- Video kütüphanesi ---------- */
.lib-head { font-size: 1.6rem; margin: 56px 0 16px; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lib-card { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.lib-card.current { border-color: var(--clay); }
.lib-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--sand); display: grid; place-items: center; font-size: 1.6rem; }
.lib-card b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }
.lib-card small { display: block; color: var(--ink-soft); font-size: .88rem; margin: 2px 0 6px; }
.lib-card em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--clay); }
body.render .lib-head, body.render .library { display: none !important; }
.btn[hidden], .ctrl[hidden] { display: none !important; }