/* =========================================================
   Feldenkrais Türkiye — ortak stil dosyası
   ========================================================= */
:root {
  --bg: #faf7f2;
  --bg-alt: #f1ebe1;
  --surface: #ffffff;
  --text: #2a2622;
  --muted: #6b635a;
  --line: #e2d9cc;
  --primary: #1f5f5b;
  --primary-ink: #ffffff;
  --primary-soft: #dcebe8;
  --accent: #c0713a;
  --accent-soft: #f6e4d6;
  --ok: #2e7d4f;
  --warn: #b7791f;
  --bad: #b23b3b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(60,40,20,.07);
  --maxw: 1120px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171614; --bg-alt: #201e1b; --surface: #24221f; --text: #ede7de; --muted: #a79f94;
    --line: #3a3631; --primary: #6fbab3; --primary-ink: #0f1f1e; --primary-soft: #1f3533;
    --accent: #e09a62; --accent-soft: #3a2a1e; --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg: #171614; --bg-alt: #201e1b; --surface: #24221f; --text: #ede7de; --muted: #a79f94;
  --line: #3a3631; --primary: #6fbab3; --primary-ink: #0f1f1e; --primary-soft: #1f3533;
  --accent: #e09a62; --accent-soft: #3a2a1e; --shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ---------- Dil görünürlüğü ---------- */
html[data-lang="tr"] body [lang="en"],
html[data-lang="en"] body [lang="tr"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; font-weight: 600; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; font-family: var(--sans); font-weight: 650; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
small, .muted { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .container { padding: 0 28px; } }
.narrow { max-width: 780px; }
.section { padding: 64px 0; }
.section.alt { background: var(--bg-alt); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 650; color: var(--accent); margin-bottom: .6em; display: block; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 46em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 100; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--serif); font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a { text-decoration: none; color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: .93rem; font-weight: 500; }
.nav a:hover { background: var(--primary-soft); color: var(--primary); }
.nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
.header-tools { display: flex; gap: 6px; align-items: center; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button { border: 0; background: transparent; color: var(--muted); font: 600 .8rem var(--sans); padding: 6px 10px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.icon-btn { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; display: inline-grid; place-items: center; }
.menu-btn { display: none; }
@media (max-width: 1200px) {
  .menu-btn { display: inline-grid; }
  .nav { position: fixed; inset: 66px 0 auto 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 12px 16px 20px; border-bottom: 1px solid var(--line); display: none; margin: 0; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a { padding: 12px; font-size: 1rem; }
  .header-tools { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr .8fr; } }
.hero h1 em { font-style: italic; color: var(--primary); }
.hero-art { aspect-ratio: 1; max-width: 420px; justify-self: center; width: 100%; }
.page-hero { padding: 56px 0 36px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font: 600 .95rem var(--sans); text-decoration: none; border: 1.5px solid var(--primary); background: var(--primary); color: var(--primary-ink); cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); color: var(--primary-ink); }
.btn.ghost { background: transparent; color: var(--primary); }
.btn.ghost:hover { background: var(--primary-soft); color: var(--primary); }
.btn.small { padding: 7px 14px; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid.g2 { grid-template-columns: repeat(2, 1fr); } .grid.g3, .grid.g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; display: block; transition: transform .15s, border-color .15s; }
a.card:hover { transform: translateY(-2px); border-color: var(--primary); }
.card .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 14px; font-size: 1.3rem; }
.card.accent { background: var(--accent-soft); border-color: transparent; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); margin: 0 4px 6px 0; }
.tag.alt { background: var(--accent-soft); color: var(--accent); }

.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } .split.wide-left { grid-template-columns: 1.4fr 1fr; } }

.callout { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5em 0; }
.callout.info { border-color: var(--primary); background: var(--primary-soft); }
.callout p:last-child { margin: 0; }
.quote { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.4; font-style: italic; border: 0; margin: 0; padding: 0; }
.quote cite { display: block; font-family: var(--sans); font-style: normal; font-size: .9rem; color: var(--muted); margin-top: 12px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 20px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stat b { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--primary); line-height: 1.1; }
.stat span { font-size: .88rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 28px; border-left: 2px solid var(--line); }
.timeline .t-item { position: relative; margin-bottom: 28px; }
.timeline .t-item::before { content: ""; position: absolute; left: -36px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.timeline .t-year { font-weight: 700; color: var(--accent); font-size: .9rem; letter-spacing: .04em; }
.timeline h4 { margin: 2px 0 6px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-alt); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ---------- Accordion (details) ---------- */
details.acc { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
details.acc summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--primary); }
details.acc[open] summary::after { content: "–"; }
details.acc .acc-body { padding: 0 20px 18px; }

/* ---------- Forms ---------- */
label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
input[type="range"] { padding: 0; accent-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }
.field { margin-bottom: 16px; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-grid.c2 { grid-template-columns: 1fr 1fr; } .form-grid.c3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Tools ---------- */
.tool-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tool { scroll-margin-top: 90px; }
.tool-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.tool-head .num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; }
.result { margin-top: 18px; padding: 18px 20px; border-radius: 12px; background: var(--primary-soft); }
.result.warn { background: var(--accent-soft); }
.result b.big { font-size: 1.8rem; font-family: var(--serif); color: var(--primary); }
.meter { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.meter > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }

.journey { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
.journey button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; padding: 14px 8px; cursor: pointer; font: 600 .9rem var(--sans); }
.journey button[aria-selected="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.segments { display: flex; gap: 4px; margin: 14px 0 6px; }
.segments span { flex: 1; height: 26px; border-radius: 6px; background: var(--line); cursor: pointer; display: grid; place-items: center; font-size: .72rem; color: var(--muted); font-weight: 600; }
.segments span.done { background: var(--primary); color: var(--primary-ink); }
.segments span.current { background: var(--accent); color: #fff; }

.quiz-q { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.quiz-q:last-of-type { border-bottom: 0; }
.quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.quiz-opts label { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; margin: 0; background: var(--bg); }
.quiz-opts input:checked + span { color: var(--primary); font-weight: 650; }

.player { display: grid; gap: 18px; }
.player-screen { min-height: 170px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.player-screen .step-text { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45; }
.player-screen .step-meta { font-size: .85rem; color: var(--muted); margin-top: 12px; }
.player-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.breath { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); animation: breathe 8s ease-in-out infinite; display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes breathe { 0%,100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.2); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .breath { animation: none; } html { scroll-behavior: auto; } }

.journal-list { display: grid; gap: 10px; margin-top: 16px; }
.journal-entry { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.journal-entry header { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--muted); }
.journal-entry button { border: 0; background: none; color: var(--bad); cursor: pointer; font-size: .85rem; }

.gloss-list { display: grid; gap: 10px; margin-top: 14px; }
.gloss-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
.gloss-item dt { font-weight: 700; color: var(--primary); }
.gloss-item dd { margin: 4px 0 0; }
.letters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.letters button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 6px; min-width: 30px; padding: 4px 6px; cursor: pointer; font-size: .8rem; }

.checklist label { font-weight: 500; display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; margin: 0; }
.checklist input { margin-top: 6px; }

.placeholder { background: repeating-linear-gradient(45deg, var(--accent-soft), var(--accent-soft) 10px, transparent 10px, transparent 20px); border: 1px dashed var(--accent); border-radius: 10px; padding: 14px 16px; font-size: .92rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 48px 0 28px; margin-top: 40px; font-size: .92rem; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--primary); }
.legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; background: var(--surface); }
.to-top.show { opacity: 1; pointer-events: auto; }

@media print {
  .site-header, .site-footer, .to-top, .btn-row, .tool-nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Yalnızca TR/EN çifti içeren kapsayıcılar: görünen dil kendi içinde iki sütuna akar */
.cols2 > [lang] { columns: 2 340px; column-gap: 44px; }
.cols2 h4 { break-after: avoid; }
.cols2 ol, .cols2 ul, .cols2 p { break-inside: avoid-column; }

/* Dar ekranlar: header ve tablo başlıkları taşmasın */
@media (max-width: 520px) {
  .header-inner { gap: 8px; }
  .brand { font-size: 1rem; gap: 6px; }
  .brand svg { width: 28px; height: 28px; }
  .header-tools { gap: 4px; }
  .lang-switch button { padding: 6px 8px; }
  th { white-space: normal; }
  .card { padding: 18px; }
}
/* Grid öğeleri içerik genişliğine göre büyümesin (tablolar kendi içinde kaysın) */
.split > *, .grid > *, .hero-grid > * { min-width: 0; }
.nav a { white-space: nowrap; }
.segments span:nth-child(4n):not(:last-child) { margin-right: 8px; }

/* ---------- Makale tipografisi ---------- */
.prose { font-size: 1.06rem; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.prose h3 { margin-top: 1.5em; }
.prose p, .prose li { max-width: 68ch; }
.prose blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.article-meta { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }
.article-cta { margin-top: 2.5em; }

/* =========================================================
   Etkileşimli Beden Haritası
   ========================================================= */
:root { --bone: #fbf6ec; --bone-line: #8f8273; --bone-back: #ece3d4; --hl: #c0713a; --hl-soft: #f3d9c4; --link: #1f5f5b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bone: #3a3631; --bone-line: #bfb3a3; --bone-back: #2c2925; --hl: #e09a62; --hl-soft: #5a3b24; --link: #6fbab3; } }
:root[data-theme="dark"] { --bone: #3a3631; --bone-line: #bfb3a3; --bone-back: #2c2925; --hl: #e09a62; --hl-soft: #5a3b24; --link: #6fbab3; }

.bm-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.bm-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; }
.bm-tabs button { border: 0; background: transparent; color: var(--text); font: 600 .9rem var(--sans); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.bm-tabs button[aria-selected="true"], .bm-tabs button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.bm-tabs button:disabled { opacity: .4; cursor: not-allowed; }

.bm-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .bm-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } .bm-panel { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow: auto; } }
.bm-stage { position: relative; background: radial-gradient(ellipse at 50% 40%, var(--surface), var(--bg-alt)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.bm-stage svg { width: 100%; height: auto; max-height: 78vh; display: block; margin: 0 auto; touch-action: manipulation; user-select: none; }

/* Kemikler */
.bone { fill: var(--bone); stroke: var(--bone-line); stroke-width: 1.6; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
.bone.back { fill: var(--bone-back); opacity: .85; }
.bline { fill: none; stroke: var(--bone-line); stroke-linecap: round; transition: stroke .25s; }
.bdetail { fill: none; stroke: var(--bone-line); stroke-width: 1; opacity: .6; }
.hit { fill: transparent; stroke: transparent; cursor: pointer; }
.hit.stroke { fill: none; stroke: transparent; }

.region { outline: none; }
.region.hover .bone { fill: var(--hl-soft); }
.region.hover .bline { stroke: var(--hl); }
.region.linked .bone { fill: color-mix(in srgb, var(--link) 22%, var(--bone)); stroke: var(--link); }
.region.linked .bline { stroke: var(--link); }
.region.themed .bone { fill: color-mix(in srgb, var(--link) 30%, var(--bone)); stroke: var(--link); }
.region.themed .bline { stroke: var(--link); }
.region.visited .bone { fill: color-mix(in srgb, var(--hl) 22%, var(--bone)); }
.region.visited .bline { stroke: color-mix(in srgb, var(--hl) 60%, var(--bone-line)); }
.region.active .bone { fill: var(--hl-soft); stroke: var(--hl); stroke-width: 2.2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hl) 55%, transparent)); }
.region.active .bline { stroke: var(--hl); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hl) 55%, transparent)); }
.bm-stage.testing .region { pointer-events: none; }
.bm-stage.testing svg { cursor: crosshair; }

.conn-line { fill: none; stroke: var(--link); stroke-width: 2.2; stroke-dasharray: 6 6; animation: bm-dash 1.2s linear infinite; opacity: .85; }
.chain-line { fill: none; stroke: var(--hl); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.chain-dot { fill: var(--hl); }
.chain-num { font: 700 11px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.plumb { stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .7; }
.plumb-label { font: 600 10px var(--sans); fill: var(--primary); }
.ground { stroke: var(--line); stroke-width: 2; }
.guess-mark { fill: none; stroke: var(--hl); stroke-width: 3; }
.target-mark { fill: color-mix(in srgb, var(--ok) 25%, transparent); stroke: var(--ok); stroke-width: 3; }
.miss-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pulse { animation: bm-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bm-dash { to { stroke-dashoffset: -24; } }
@keyframes bm-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .conn-line, .pulse { animation: none; } }

.bm-tip { position: absolute; pointer-events: none; background: var(--text); color: var(--bg); font: 600 .8rem var(--sans); padding: 5px 10px; border-radius: 8px; transform: translate(-50%, -130%); white-space: nowrap; z-index: 5; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bm-chips button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font: 500 .82rem var(--sans); cursor: pointer; }
.bm-chips button[aria-pressed="true"] { background: var(--hl); border-color: var(--hl); color: #fff; }
.bm-side-controls { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bm-range-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: 4px; }

.bm-panel h2 { font-size: 1.6rem; margin-bottom: .2em; }
.bm-panel .sub { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.bm-panel h4 { margin: 18px 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.bm-panel ul { margin-bottom: .5em; }
.bm-facts li::marker { color: var(--accent); }
.bm-try { background: var(--primary-soft); border-radius: 12px; padding: 14px 16px; margin-top: 8px; }
.bm-try p { margin: 0; }
.bm-conn { display: grid; gap: 6px; }
.bm-conn button { text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: .9rem; }
.bm-conn button:hover { border-color: var(--link); }
.bm-conn b { color: var(--link); }
.bm-empty { text-align: center; padding: 30px 10px; color: var(--muted); }
.bm-empty .big-ico { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.chain-list { display: grid; gap: 8px; }
.chain-list button { text-align: left; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; }
.chain-list button[aria-pressed="true"] { border-color: var(--hl); background: var(--hl-soft); }
.chain-list small { display: block; color: var(--muted); }
.chain-steps { list-style: none; padding: 0; counter-reset: s; }
.chain-steps li { position: relative; padding: 8px 10px 8px 40px; border-radius: 10px; cursor: pointer; counter-increment: s; }
.chain-steps li::before { content: counter(s); position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--text); font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.chain-steps li.done::before { background: color-mix(in srgb, var(--hl) 50%, var(--line)); }
.chain-steps li.current { background: var(--hl-soft); }
.chain-steps li.current::before { background: var(--hl); color: #fff; }
.test-score { display: flex; gap: 6px; margin: 10px 0; }
.test-score span { flex: 1; height: 8px; border-radius: 999px; background: var(--line); }
.test-score span.good { background: var(--ok); } .test-score span.mid { background: var(--warn); } .test-score span.far { background: var(--bad); }
.test-score span.now { background: var(--hl); }

/* ---------- Ders görselleri (mini ATM) ---------- */
.player-split { display: grid; gap: 18px; align-items: center; }
@media (min-width: 700px) { .player-split { grid-template-columns: 220px 1fr; } }
.lesson-visual svg { width: 100%; max-width: 220px; display: block; margin: 0 auto; }
.lv-body { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.lv-dot { fill: var(--primary); }
.lv-dot.big { fill: var(--accent); }
.lv-ring { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 3 5; }
.lv-floor { stroke: var(--line); stroke-width: 2; }
.lv-label { font: 600 11px var(--sans); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.lv-glow { fill: var(--accent); opacity: .28; transition: cx .8s ease, rx .8s ease, ry .8s ease; }
.lesson-visual .lv-anim { transform-box: view-box; animation-play-state: paused; }
.lesson-visual.playing .lv-anim { animation-play-state: running; }
.lv-head { transform-origin: 110px 64px; animation: lv-turn 6s ease-in-out infinite; }
.lv-eyes { animation: lv-look 6s ease-in-out infinite; }
.lesson-visual.diff .lv-eyes { animation-name: lv-look-opp; }
.lv-orbit { transform-origin: 110px 60px; animation: lv-spin 12s linear infinite; }
.lv-shoulders { transform-origin: 110px 64px; animation: lv-turn 7s ease-in-out infinite; }
.lv-headr { transform-origin: 110px 64px; animation: lv-counter 7s ease-in-out infinite; }
@keyframes lv-turn { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes lv-counter { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes lv-look { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes lv-look-opp { 0%,100% { transform: translateX(7px); } 50% { transform: translateX(-7px); } }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lesson-visual .lv-anim { animation: none !important; } }

/* ---------- Aday yolculuğu şeridi ---------- */
.journey-strip { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 24px 0; }
.journey-title { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.journey-strip ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.journey-strip li { margin: 0; }
.journey-strip a { display: flex; gap: 8px; align-items: center; text-decoration: none; color: var(--text); font-size: .88rem; font-weight: 500; padding: 6px 8px; border-radius: 10px; }
.journey-strip a:hover { background: var(--primary-soft); }
.journey-strip b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-alt); border: 1px solid var(--line); font-size: .78rem; }
.journey-strip li.seen b { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.journey-strip li.here b { background: var(--accent); color: #fff; border-color: var(--accent); }
.journey-strip li.here a { font-weight: 700; }

.form-status { margin-top: 12px; font-size: .92rem; font-weight: 500; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--bad); }

/* =========================================================
   "Feldenkrais nedir?" görsel anlatımı — el çizimi, kâğıt görünümü
   ========================================================= */
.explainer { padding: 18px; outline: none; }
.ex-bars { display: flex; gap: 4px; margin-bottom: 12px; }
.ex-bars span { flex: 1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.ex-bars i { display: block; height: 100%; width: 0; background: var(--accent); }
.ex-stage { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 45% 40%, #fcf4e6 0%, #f4e4c9 65%, #ebd4ae 100%);
  box-shadow: inset 0 0 70px rgba(150, 90, 40, .18); }
.ex-svg { width: 100%; height: 100%; display: block; }
.ex-caption { padding: 18px 4px 6px; min-height: 150px; }
.ex-caption .eyebrow { margin-bottom: .3em; }
.ex-caption h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .35em; }
.ex-caption p { color: var(--muted); max-width: 62ch; margin: 0; }
.ex-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.ex-hint { margin-left: auto; font-size: .82rem; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.ex-chips button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font: 500 .8rem var(--sans); cursor: pointer; }
.ex-chips button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (min-width: 980px) {
  .explainer { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 28px; }
  .ex-bars, .ex-chips { grid-column: 1 / -1; }
  .ex-stage { grid-column: 1; grid-row: 2 / span 2; }
  .ex-caption { grid-column: 2; grid-row: 2; padding-top: 6px; }
  .ex-controls { grid-column: 2; grid-row: 3; align-self: end; }
}
.explainer.paused .ex-svg, .explainer.paused .ex-svg * { animation-play-state: paused !important; }

/* Mürekkep paleti (illüstrasyon, temadan bağımsız) */
.ex-svg { --ink: #3d2b1f; --sepia: #b8653a; --blush: #f4cfa8; --paper2: #ead3ad; }
.ex-svg .x-body { fill: var(--blush); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.ex-svg .x-limb { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ex-svg .x-spine { fill: none; stroke: var(--sepia); stroke-width: 4.5; stroke-linecap: round; }
.ex-svg .x-node { fill: var(--blush); stroke: var(--ink); stroke-width: 2.4; }
.ex-svg .x-ball, .ex-svg .x-dot.acc, .ex-svg .x-arrowhead { fill: var(--sepia); }
.ex-svg .x-dot { fill: var(--ink); }
.ex-svg .x-outline { fill: #f7e6cc; stroke: var(--ink); stroke-width: 2.4; }
.ex-svg .x-edge { stroke: var(--ink); stroke-width: 1.5; opacity: .45; }
.ex-svg .x-faint { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 8; opacity: 0; }
.ex-svg .x-worn { fill: none; stroke: var(--sepia); stroke-width: 6; stroke-linecap: round; }
.ex-svg .x-new, .ex-svg .x-branch { fill: none; stroke: var(--sepia); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ex-svg .x-soft, .ex-svg .x-mat { fill: var(--paper2); stroke: var(--ink); stroke-width: 1.6; }
.ex-svg .x-box { fill: var(--blush); stroke: var(--ink); stroke-width: 2.4; }
.ex-svg .x-box.acc { fill: var(--sepia); }
.ex-svg .x-meter { fill: #f3e3c9; stroke: var(--ink); stroke-width: 1.5; }
.ex-svg .x-meter-fill { fill: var(--sepia); transform-box: fill-box; transform-origin: left center; }
.ex-svg .x-floor { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ex-svg .x-bubble { fill: #fffaf1; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ex-svg .x-table { fill: #d9b78c; stroke: var(--ink); stroke-width: 2; }
.ex-svg .x-ripple { fill: none; stroke: var(--sepia); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: x-ripple 3s ease-out infinite; }
.ex-svg .x-arc { fill: none; stroke: var(--sepia); stroke-width: 3; stroke-linecap: round; }
.ex-svg .x-pulse { fill: var(--sepia); opacity: 0; transform-box: fill-box; transform-origin: center; animation: x-pulse 1.2s ease forwards; }
.ex-svg .x-track { stroke: var(--paper2); stroke-width: 7; stroke-linecap: round; }
.ex-svg .x-track-fill { stroke: var(--sepia); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: x-drawp 5.6s linear .6s forwards; }
.ex-svg .x-year { fill: #f7e6cc; stroke: var(--ink); stroke-width: 2.4; animation: x-yearfill .6s ease forwards; }
.ex-svg .x-flag { fill: var(--blush); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ex-svg .x-pop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: x-pop .5s ease forwards; }
.ex-svg .x-lbl { font: 600 15px var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; animation: x-fade .8s ease 1s both; }
.ex-svg .x-lbl.sm { font-size: 12.5px; }
.ex-svg .x-lbl.inv { font-weight: 700; }
.ex-svg .x-muted { fill: #8a7360; }
.ex-svg .x-acc { fill: var(--sepia); }

/* Elle çiziliyormuş gibi belirme (uzunluk JS ile --len olarak verilir) */
.ex-svg .drawon { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); fill-opacity: 0; animation: x-drawon 1.4s ease var(--d, 0s) forwards; }
@keyframes x-drawon { 70% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes x-drawp { to { stroke-dashoffset: 0; } }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes x-pulse { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: .85; transform: scale(1.25); } 100% { opacity: .6; transform: scale(1); } }
@keyframes x-ripple { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes x-yearfill { to { fill: var(--sepia); } }

/* Sahne 1: alışkanlık yolu derinleşir, diğer yollar sonra belirir */
.ex-svg .s1-worn { stroke-dasharray: 1; stroke-dashoffset: 1; animation: s1-worn 7s ease .3s forwards; }
@keyframes s1-worn { 0% { stroke-dashoffset: 1; stroke-width: 5; } 22% { stroke-dashoffset: 0; stroke-width: 5; } 100% { stroke-dashoffset: 0; stroke-width: 14; } }
.ex-svg .s1-alt { animation: x-fade 1s ease 4s forwards; }
.ex-svg .s1-alt.d2 { animation-delay: 4.5s; } .ex-svg .s1-alt.d3 { animation-delay: 5s; } .ex-svg .s1-alt.d4 { animation-delay: 5.5s; }
.ex-svg path.s1-alt { animation-name: s1-alt; }
@keyframes s1-alt { to { opacity: .5; } }
/* Sahne 2 */
.ex-svg .s2-new { animation: x-drawp 1.6s ease 2s forwards; }
.ex-svg .s2-new.d2 { animation-delay: 3.2s; }
.ex-svg .s2-lbl { animation-delay: 3.6s; }
/* Sahne 3 */
.ex-svg .s3-drop { animation: s3-drop 1.2s cubic-bezier(.5, 0, .7, 1.4) 1.6s forwards; }
@keyframes s3-drop { to { transform: translateY(var(--dy)); } }
.ex-svg .s3-left { transform: scaleX(.6); animation: s3-left 1s ease 3s forwards; }
.ex-svg .s3-right { transform: scaleX(.12); animation: s3-right 1s ease 3s forwards; }
@keyframes s3-left { to { transform: scaleX(.63); } }
@keyframes s3-right { to { transform: scaleX(.5); } }
.ex-svg .s3-res { animation-delay: 4s; }
/* Sahne 4: önce birlikte, sonra zıt yönde */
.ex-svg .s4-head { transform-box: view-box; transform-origin: 240px 160px; animation: s4-head 4s ease-in-out 1.2s infinite; }
@keyframes s4-head { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
.ex-svg .s4-eyes { animation: s4-eyes 8s ease-in-out 1.2s infinite; }
@keyframes s4-eyes { 0%, 42% { transform: translateX(0); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 96% { transform: translateX(10px); } 100% { transform: translateX(0); } }
.ex-svg .s4-a { animation: s4-a 8s linear 1.2s infinite both; }
.ex-svg .s4-b { animation: s4-b 8s linear 1.2s infinite both; }
@keyframes s4-a { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes s4-b { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* Sahne 6: dizler yavaşça salınır, konuşma balonu değişir */
.ex-svg .s6-knee { transform-box: view-box; animation: s6-knee 3s ease-in-out infinite alternate; }
@keyframes s6-knee { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.ex-svg .s6-t1, .ex-svg .s6-t2, .ex-svg .s6-t3 { opacity: 0; animation: s6-t 9s linear infinite; }
.ex-svg .s6-t2 { animation-delay: 3s; } .ex-svg .s6-t3 { animation-delay: 6s; }
@keyframes s6-t { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
/* Sahne 8 */
.ex-svg .x-branch { animation: x-drawp 1.1s ease forwards; }
.ex-svg .s8-lbl { animation-delay: 4.2s; }

@media (prefers-reduced-motion: reduce) {
  .ex-svg *, .ex-svg .drawon { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* Videolar (tıklayınca yüklenen YouTube) */
.video-card { padding: 0; overflow: hidden; }
.video-card h4 { padding: 14px 18px 18px; margin: 0; }
.video-facade, .video-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; position: relative; cursor: pointer; background: #000; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: rgba(192, 113, 58, .92); color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.video-facade:hover .video-play { background: #c0713a; }

/* Ders döngüsü */
.cycle { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); counter-reset: c; }
.cycle-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.cycle-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; margin-bottom: 10px; }
.cycle-step p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (min-width: 900px) { .cycle-step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 22px; color: var(--accent); font-weight: 700; } }

/* ---------- Gelişim anlatımı animasyonları ---------- */
.ex-svg [class^="dv-"], .ex-svg [class*=" dv-"] { transform-box: view-box; }
.ex-svg .dv-wave { animation: dv-wave 2.2s ease-in-out infinite alternate; }
.ex-svg .dv-wave.d2 { animation-duration: 2.8s; animation-delay: .4s; }
@keyframes dv-wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.ex-svg .dv-kick { animation: dv-kick 1.8s ease-in-out infinite alternate; }
.ex-svg .dv-kick.d2 { animation-delay: .9s; }
@keyframes dv-kick { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.ex-svg .dv-roll { animation: dv-roll 5s ease-in-out 1.2s infinite; }
@keyframes dv-roll { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(-38deg) translateX(14px); } }
.ex-svg .dv-lift { animation: dv-lift 3.2s ease-in-out 1s infinite; }
@keyframes dv-lift { 0%, 100% { transform: rotate(0); } 40%, 70% { transform: rotate(22deg); } }
.ex-svg .dv-travel { animation: dv-travel 9s linear 1s infinite; }
@keyframes dv-travel { from { transform: translateX(-60px); } to { transform: translateX(80px); } }
.ex-svg .dv-limbA { animation: dv-swing 1.2s ease-in-out 1s infinite alternate; }
.ex-svg .dv-limbB { animation: dv-swing 1.2s ease-in-out 1s infinite alternate-reverse; }
@keyframes dv-swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.ex-svg .dv-sway { animation: dv-sway 3.6s ease-in-out 1s infinite alternate; }
@keyframes dv-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.ex-svg .dv-toddle { animation: dv-toddle 1.6s ease-in-out 1s infinite alternate; }
@keyframes dv-toddle { from { transform: rotate(-5deg) translateX(-6px); } to { transform: rotate(5deg) translateX(6px); } }
.ex-svg .dv-legA { animation: dv-swing 1.6s ease-in-out 1s infinite alternate; }
.ex-svg .dv-legB { animation: dv-swing 1.6s ease-in-out 1s infinite alternate-reverse; }

/* Tam ekran */
.explainer:fullscreen { background: var(--bg); padding: 3vh 4vw; overflow: auto; display: flex; flex-direction: column; justify-content: center; }
.explainer:fullscreen .ex-stage { max-height: 70vh; aspect-ratio: 16 / 10; width: auto; margin: 0 auto; }
.explainer:fullscreen .ex-chips { display: none; }

/* Pelvik saat kadranı */
.bm-clock-wrap { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
#bm-clock { width: 120px; height: 120px; touch-action: none; cursor: grab; border-radius: 50%; }
#bm-clock:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.clk-face { fill: var(--bg-alt); stroke: var(--line); stroke-width: 2; }
.clk-ring { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .6; }
.clk-num { font: 700 12px var(--sans); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.clk-hand { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.clk-knob { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.clk-readout { font-weight: 600; font-size: .9rem; margin: 8px 0 0; color: var(--accent); }

/* ---------- Sözlük mini animasyonları ---------- */
.gloss-item.has-anim { display: grid; grid-template-columns: 1fr 150px; gap: 16px; align-items: center; }
@media (max-width: 560px) { .gloss-item.has-anim { grid-template-columns: 1fr; } .gloss-anim { max-width: 220px; } }
.gloss-anim { border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 45% 40%, #fcf4e6 0%, #f4e4c9 70%, #ebd4ae 100%); }
.gloss-anim svg { display: block; width: 100%; height: auto; }
.ex-svg.ga .x-lbl { animation: none; }
.ex-svg.ga [class*="ga-"] { transform-box: view-box; }
.ex-svg .ga-turn { transform-origin: 80px 50px; animation: ga-turn 4s ease-in-out infinite; }
.ex-svg .ga-eyes { animation: ga-eyes 4s ease-in-out infinite; }
@keyframes ga-turn { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes ga-eyes { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(-6px); } }
.ex-svg .ga-up { animation: ga-up 4s ease-in-out infinite; }
.ex-svg .ga-down { animation: ga-down 4s ease-in-out infinite; }
.ex-svg .ga-whole { opacity: 0; animation: ga-whole 4s ease-in-out infinite; }
@keyframes ga-up { 0%, 15% { transform: translate(0, 0); } 50%, 100% { transform: translate(30px, 20px); } }
@keyframes ga-down { 0%, 15% { transform: translate(0, 0); } 50%, 100% { transform: translate(-30px, -20px); } }
@keyframes ga-whole { 0%, 50% { opacity: 0; } 65%, 90% { opacity: 1; } 100% { opacity: 0; } }
.ex-svg .ga-pulse { transform-box: fill-box; transform-origin: center; animation: ga-pulse 1.6s ease-in-out infinite; }
@keyframes ga-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.ex-svg .ga-shift { transform-origin: 80px 76px; animation: ga-shift 3.2s ease-in-out infinite alternate; }
@keyframes ga-shift { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.ex-svg .ga-ghost { transform-origin: 40px 48px; animation: ga-ghost 2.6s ease-in-out infinite alternate; }
.ex-svg .ga-dash { stroke: var(--sepia); stroke-dasharray: 5 6; opacity: .8; }
@keyframes ga-ghost { from { transform: rotate(0); } to { transform: rotate(-42deg); } }
.ex-svg .ga-wiggle { transform-box: fill-box; transform-origin: center; animation: ga-wiggle .9s ease-in-out infinite alternate; }
@keyframes ga-wiggle { from { transform: translate(-2px, -3px); } to { transform: translate(2px, 3px); } }
.ex-svg .ga-breathe { transform-box: fill-box; transform-origin: center; animation: ga-breathe 4s ease-in-out infinite; }
@keyframes ga-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.28); } }
@media (prefers-reduced-motion: reduce) { .ex-svg.ga * { animation-duration: 8s !important; } }

/* ---------- Yeni ders görselleri ---------- */
.lv-limb { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lv-chair { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.lv-arrow { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lv-ring-s { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 3; }
.lv-ribs { transform-origin: 110px 44px; animation: lv-ribs 6s ease-in-out infinite; }
.lv-belly { transform-origin: 110px 88px; animation: lv-belly 6s ease-in-out infinite; }
@keyframes lv-ribs { 0%, 100% { transform: scale(1); } 25% { transform: scale(1); } 75% { transform: scale(1.14); } }
@keyframes lv-belly { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.18); } 75% { transform: scale(.9); } }
.lv-orbit-s { animation: lv-orbit-s 4s linear infinite; }
@keyframes lv-orbit-s { 0% { transform: translate(0, 6px); } 25% { transform: translate(6px, 0); } 50% { transform: translate(0, -6px); } 75% { transform: translate(-6px, 0); } 100% { transform: translate(0, 6px); } }
.lv-tri { animation: lv-tri 6s ease-in-out infinite; }
@keyframes lv-tri { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(12px, -70px); } 66% { transform: translate(-14px, -64px); } }
.lv-jaw { animation: lv-jaw 3s ease-in-out infinite alternate; }
@keyframes lv-jaw { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
.lv-lean { transform-origin: 100px 74px; animation: lv-lean 5s ease-in-out infinite; }
@keyframes lv-lean { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(28deg); } }
.lv-up { animation: lv-upa 5s ease-in-out infinite; }
@keyframes lv-upa { 0%, 35% { opacity: 0; transform: translateY(8px); } 55%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.lv-bend { transform-origin: 110px 70px; animation: lv-bend 4.5s ease-in-out infinite; }
@keyframes lv-bend { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(55deg); } }