/* Altar Ateş · Canlı animasyon sahneleri (v1.5.2). Video yerine SVG + CSS sahneler. */
.cs{--ink:#17372E;--sage:#EAF3EE;--line:#DCE8E1;--o:#F29B4B;--y:#F5CB4C;--b:#78B9E8;--r:#EE97A3;--m:#9FD3BE;
  margin:0;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 18px 44px rgba(23,55,46,.10);font-family:"C Atkinson","Atkinson Hyperlegible",system-ui,sans-serif;color:var(--ink)}
.cs-stage{position:relative;background:var(--sage);aspect-ratio:16/10}
.cs-stage svg{display:block;width:100%;height:100%}
.cs-cap{display:flex;gap:14px;align-items:flex-start;padding:16px 18px 6px;min-height:76px}
.cs-no{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--o);font-family:"C Rubik","Rubik",system-ui,sans-serif;font-weight:700;font-size:15px;transition:background .3s,border-radius .3s}
.cs[data-step="1"] .cs-no{background:var(--y);border-radius:12px}
.cs[data-step="2"] .cs-no{background:var(--b);border-radius:20px 20px 8px 8px}
.cs[data-step="3"] .cs-no{background:var(--ink);color:#fff}
.cs-txt{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.cs-txt b{font-family:"C Rubik","Rubik",system-ui,sans-serif;font-weight:600;font-size:18px}
.cs-txt span{font-size:16px;color:#3D5A51}
.cs-ctrl{display:flex;align-items:center;gap:8px;padding:8px 14px 14px}
.cs-steps{display:flex;gap:6px;flex:1;overflow-x:auto;padding:2px}
.cs-steps button,.cs-play{font:inherit;font-weight:700;font-size:14px;border:1px solid var(--line);background:#F5F9F7;color:var(--ink);border-radius:999px;min-height:40px;padding:0 14px;cursor:pointer;white-space:nowrap}
.cs-steps button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-play{flex:0 0 40px;width:40px;padding:0;display:grid;place-items:center;background:#fff}
.cs-play svg{width:14px;height:14px}
.cs-bar{height:4px;background:var(--line);margin:0 18px;border-radius:2px;overflow:hidden}
.cs-bar i{display:block;height:100%;width:0;background:var(--o)}
.cs.is-playing .cs-bar i{animation:cs-bar var(--dur,4.2s) linear forwards}
@keyframes cs-bar{to{width:100%}}
/* ortak yardımcılar */
.cs .fade{opacity:0;transition:opacity .6s ease}
.cs .loop-bob{animation:cs-bob 2.4s ease-in-out infinite alternate}
.cs .loop-blink{transform-box:fill-box;transform-origin:50% 50%;animation:cs-blink 4s infinite}
.cs .loop-tw{transform-box:fill-box;transform-origin:50% 50%;animation:cs-tw 2.6s ease-in-out infinite}
@keyframes cs-bob{to{transform:translateY(-6px)}}
@keyframes cs-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes cs-tw{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes cs-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes cs-zz{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(22px,-56px) scale(1.15)}}
@keyframes cs-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes cs-dash{to{stroke-dashoffset:0}}
@keyframes cs-flow{to{stroke-dashoffset:-40}}
.cs .pop{transform-box:fill-box;transform-origin:50% 50%}

/* ---------- 1) NARKOZSUZ: krem → uyuşma → kontrollü uygulama → tedavi ---------- */
.cs-narkozsuz .mirror{opacity:0;transform:translate(260px,-40px) rotate(20deg);transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .4s}
.cs-narkozsuz[data-step="0"] .mirror{opacity:1;transform:translate(0,0) rotate(0)}
.cs-narkozsuz[data-step="0"] .chk{animation:cs-pop .5s 1.1s both}
.cs-narkozsuz .swab{opacity:0;transform:translate(240px,-120px) rotate(-10deg);transition:transform 1s cubic-bezier(.3,.7,.3,1),opacity .4s}
.cs-narkozsuz[data-step="1"] .swab{opacity:1;transform:none}
.cs-narkozsuz[data-step="1"] .cream,.cs-narkozsuz[data-step="2"] .cream{animation:cs-pop .5s .9s both}
.cs-narkozsuz .numb{opacity:0;transition:opacity 1.2s ease 1.2s}
.cs-narkozsuz[data-step="1"] .numb,.cs-narkozsuz[data-step="2"] .numb,.cs-narkozsuz[data-step="3"] .numb{opacity:1}
.cs-narkozsuz[data-step="1"] .ring{transform-box:fill-box;transform-origin:50% 50%;animation:cs-ring 1.8s 1.2s ease-out infinite}
.cs-narkozsuz[data-step="1"] .ring2{animation-delay:1.8s}
.cs-narkozsuz .wand,.cs-narkozsuz .tablet{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .7s cubic-bezier(.3,.7,.3,1)}
.cs-narkozsuz[data-step="2"] .wand,.cs-narkozsuz[data-step="2"] .tablet{opacity:1;transform:none}
.cs-narkozsuz[data-step="2"] .tablet{transition-delay:.25s}
.cs-narkozsuz .gauge rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.15)}
.cs-narkozsuz[data-step="2"] .gauge rect{animation:cs-gauge 3s .6s ease-in-out both}
.cs-narkozsuz[data-step="2"] .gauge rect:nth-child(2){animation-delay:.9s}
.cs-narkozsuz[data-step="2"] .gauge rect:nth-child(3){animation-delay:1.2s}
@keyframes cs-gauge{to{transform:scaleY(1)}}
.cs-narkozsuz[data-step="2"] .ball{animation:cs-ball 1.2s ease-in-out infinite alternate}
@keyframes cs-ball{from{transform:translate(0,0)}to{transform:translate(40px,-18px)}}
.cs-narkozsuz[data-step="2"] .pupils{transform:translate(4px,-1px);transition:transform .5s .4s}
.cs-narkozsuz .pupils{transition:transform .5s}
.cs-narkozsuz .smile-big,.cs-narkozsuz .spark,.cs-narkozsuz .badge{opacity:0}
.cs-narkozsuz[data-step="3"] .smile-big{opacity:1;transition:opacity .4s .3s}
.cs-narkozsuz[data-step="3"] .smile{opacity:0;transition:opacity .2s .3s}
.cs-narkozsuz[data-step="3"] .spark{animation:cs-pop .5s .6s both,cs-tw 2.4s 1.2s ease-in-out infinite}
.cs-narkozsuz[data-step="3"] .spark2{animation-delay:.8s,1.4s}
.cs-narkozsuz[data-step="3"] .badge{animation:cs-pop .6s 1s both}

/* ---------- 2) KLİNİK · SEDASYON · GENEL ANESTEZİ ---------- */
.cs-anestezi .ga-room{transition:opacity .8s}
.cs-anestezi .room-clinic{opacity:1}.cs-anestezi .room-hosp{opacity:0}
.cs-anestezi[data-step="2"] .room-clinic{opacity:0}.cs-anestezi[data-step="2"] .room-hosp{opacity:1}
.cs-anestezi .kid{transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.cs-anestezi[data-step="1"] .kid{transform:translate(10px,8px) rotate(-14deg)}
.cs-anestezi[data-step="2"] .kid{transform:translate(28px,26px) rotate(-74deg)}
.cs-anestezi .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .8s .4s}
.cs-anestezi[data-step="1"] .lid{transform:scaleY(.55)}
.cs-anestezi[data-step="2"] .lid{transform:scaleY(1)}
.cs-anestezi .meter-fill{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(1);transition:transform 1s cubic-bezier(.3,.7,.3,1),fill .6s}
.cs-anestezi[data-step="1"] .meter-fill{transform:scaleY(.55);fill:#F5CB4C}
.cs-anestezi[data-step="2"] .meter-fill{transform:scaleY(.12);fill:#78B9E8}
.cs-anestezi .ic{opacity:0;transition:opacity .5s}
.cs-anestezi[data-step="0"] .ic-sun,.cs-anestezi[data-step="1"] .ic-half,.cs-anestezi[data-step="2"] .ic-moon{opacity:1}
.cs-anestezi[data-step="0"] .ic-sun{animation:cs-spin 12s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-anestezi .zz{opacity:0}
.cs-anestezi[data-step="2"] .zz{animation:cs-zz 3.4s ease-out infinite}
.cs-anestezi[data-step="2"] .zz2{animation-delay:1.1s}.cs-anestezi[data-step="2"] .zz3{animation-delay:2.2s}
.cs-anestezi .cloud{opacity:0;transition:opacity .8s}
.cs-anestezi[data-step="1"] .cloud{opacity:1;animation:cs-bob 3s ease-in-out infinite alternate}
.cs-anestezi .ecg{stroke-dasharray:46 200;animation:cs-ecg 2s linear infinite}
@keyframes cs-ecg{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.cs-anestezi .breathe{transform-box:fill-box;transform-origin:50% 100%}
.cs-anestezi[data-step="1"] .breathe,.cs-anestezi[data-step="2"] .breathe{animation:cs-breathe 3.6s ease-in-out infinite}
@keyframes cs-breathe{50%{transform:scaleY(1.04)}}

/* ---------- 3) ORTODONTİ: diş teli ↔ şeffaf plak ---------- */
.cs-ortodonti .tooth{transform-box:fill-box;transform-origin:50% 100%;transform:var(--c)}
.cs-ortodonti[data-step="0"] .tooth{animation:cs-align 4.6s cubic-bezier(.4,.1,.3,1) forwards}
.cs-ortodonti[data-step="1"] .tooth{animation:cs-align 4.6s .3s cubic-bezier(.4,.1,.3,1) forwards}
@keyframes cs-align{0%,38%{transform:var(--c)}100%{transform:none}}
.cs-ortodonti .brk,.cs-ortodonti .wire,.cs-ortodonti .tray,.cs-ortodonti .glint{opacity:0}
.cs-ortodonti[data-step="0"] .brk{animation:cs-pop .4s both}
.cs-ortodonti[data-step="0"] .brk:nth-of-type(1){animation-delay:.3s}.cs-ortodonti[data-step="0"] .brk:nth-of-type(2){animation-delay:.45s}
.cs-ortodonti[data-step="0"] .brk:nth-of-type(3){animation-delay:.6s}.cs-ortodonti[data-step="0"] .brk:nth-of-type(4){animation-delay:.75s}
.cs-ortodonti[data-step="0"] .brk:nth-of-type(5){animation-delay:.9s}.cs-ortodonti[data-step="0"] .brk:nth-of-type(6){animation-delay:1.05s}
.cs-ortodonti[data-step="0"] .wire{opacity:1;stroke-dasharray:420;stroke-dashoffset:420;animation:cs-dash .9s 1.3s ease forwards}
.cs-ortodonti[data-step="1"] .tray{animation:cs-tray 4.9s ease forwards}
@keyframes cs-tray{0%{opacity:0;transform:translateY(-70px)}18%{opacity:.95;transform:translateY(6px)}24%,100%{opacity:.95;transform:none}}
.cs-ortodonti[data-step="1"] .glint{animation:cs-glint 2.6s 1.4s ease-in-out infinite}
@keyframes cs-glint{0%{opacity:0;transform:translateX(-60px)}40%{opacity:.9}80%,100%{opacity:0;transform:translateX(220px)}}
.cs-ortodonti .smile-ok{opacity:0}
.cs-ortodonti .smile-ok{transition:opacity .4s}
.cs-ortodonti[data-step="0"] .smile-ok,.cs-ortodonti[data-step="1"] .smile-ok{animation:cs-pop .5s 4.3s both}

/* ---------- 4) HORLAMA: daralma → aparey → hava yolu açılır ---------- */
.cs-horlama .jaw{transition:transform 1.2s cubic-bezier(.3,.7,.3,1)}
.cs-horlama[data-step="2"] .jaw{transform:translateX(14px)}
.cs-horlama .tongue{transition:transform 1.2s cubic-bezier(.3,.7,.3,1)}
.cs-horlama[data-step="2"] .tongue{transform:translateX(16px)}
.cs-horlama .air-narrow{transition:opacity .8s}.cs-horlama .air-wide{opacity:0;transition:opacity .8s .5s}
.cs-horlama[data-step="2"] .air-narrow{opacity:0}.cs-horlama[data-step="2"] .air-wide{opacity:1}
.cs-horlama .flow{stroke-dasharray:6 14;animation:cs-flow 1s linear infinite}
.cs-horlama .flow-bad{animation-duration:.45s}
.cs-horlama .vib{transform-box:fill-box;transform-origin:50% 50%;animation:cs-vib .18s linear infinite alternate}
@keyframes cs-vib{from{transform:translateX(-1.5px)}to{transform:translateX(1.5px)}}
.cs-horlama[data-step="2"] .vib{animation:none}
.cs-horlama .snore{opacity:0}
.cs-horlama[data-step="0"] .snore,.cs-horlama[data-step="1"] .snore{animation:cs-zz 2.6s ease-out infinite}
.cs-horlama .snore2{animation-delay:.9s!important}
.cs-horlama .app{opacity:0;transform:translateY(-16px);transition:opacity .6s,transform .8s cubic-bezier(.3,.7,.3,1)}
.cs-horlama[data-step="1"] .app,.cs-horlama[data-step="2"] .app{opacity:1;transform:none}
.cs-horlama .calm{opacity:0;transition:opacity .8s 1.2s}
.cs-horlama[data-step="2"] .calm{opacity:1}

@media (max-width:560px){.cs-cap{padding:14px 14px 4px}.cs-txt b{font-size:16px}.cs-txt span{font-size:15px}.cs-steps button{font-size:13px;padding:0 11px}}
@media (prefers-reduced-motion:reduce){.cs *,.cs{animation:none!important;transition:none!important}}
.cs.is-off *{animation-play-state:paused!important}

/* ---------- OTOMATİK SAHNE ---------- */
.cs-auto .pp{opacity:0;transform-box:fill-box;transition:opacity .5s ease,transform .7s cubic-bezier(.3,.7,.3,1)}
.cs-auto .pp>*{transform-box:fill-box}
.cs-auto[data-step="0"] .pp0,.cs-auto[data-step="1"] .pp1,.cs-auto[data-step="2"] .pp2,.cs-auto[data-step="3"] .pp3,.cs-auto[data-step="4"] .pp4{opacity:1}
.cs-auto[data-step="0"] .pp0>g:first-child,.cs-auto[data-step="1"] .pp1>g:first-child,.cs-auto[data-step="2"] .pp2>g:first-child,.cs-auto[data-step="3"] .pp3>g:first-child,.cs-auto[data-step="4"] .pp4>g:first-child{}
.cs-auto .smile-big{opacity:0;transition:opacity .4s}
.cs-auto.is-last .smile-big{opacity:1}.cs-auto.is-last .smile{opacity:0}
.cs-auto[data-step="1"] .pupils,.cs-auto[data-step="3"] .pupils{transform:translate(4px,-1px);transition:transform .5s}
.cs .cs-ball{animation:cs-ball 1.2s ease-in-out infinite alternate}
.cs .cs-scan{animation:cs-scan 2.2s ease-in-out infinite alternate}
@keyframes cs-scan{to{transform:translateY(84px)}}
.cs .cs-drip{transform-box:fill-box;transform-origin:50% 0;animation:cs-drip 2s ease-in-out infinite}
@keyframes cs-drip{50%{transform:scale(1.06,.94) translateY(4px)}}
.cs .cs-beat{transform-box:fill-box;transform-origin:50% 60%;animation:cs-beat 1.4s ease-in-out infinite}
@keyframes cs-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(.98)}45%{transform:scale(1.08)}}
.cs .cs-flowline{stroke-dasharray:20 14;animation:cs-flow 1.4s linear infinite}.cs .cs-flow2{animation-duration:2.2s}
.cs .cs-hop{transform-box:fill-box;transform-origin:50% 100%;animation:cs-hop2 1.6s ease-in-out infinite}
@keyframes cs-hop2{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}}
.cs .cs-waves{animation:cs-tw 1.4s ease-in-out infinite}
.cs .cs-page{transform-box:fill-box;transform-origin:0 50%;animation:cs-flip 3s ease-in-out infinite}
@keyframes cs-flip{0%,30%{transform:scaleX(1)}60%,100%{transform:scaleX(-1)}}
.cs .cs-brushing{animation:cs-brush2 .5s ease-in-out infinite alternate}
@keyframes cs-brush2{to{transform:translateX(-12px)}}
.cs .cs-rock{transform-box:fill-box;transform-origin:50% 0;animation:c-rock2 4.6s ease-in-out infinite}
@keyframes c-rock2{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.cs .cs-gbar rect{transform-box:fill-box;transform-origin:50% 100%;animation:cs-gauge2 2.4s ease-in-out infinite alternate}
@keyframes cs-gauge2{from{transform:scaleY(.2)}to{transform:scaleY(1)}}