/* Kenet Çatı – animasyonlu anlatımlar. Yalnızca animasyon bulunan sayfalarda yüklenir.
   Yalnızca transform / opacity / stroke-dashoffset canlandırılır. JS yoksa şema son hâlinde durur. */
.sec--anim{background:var(--paper);padding:4.5rem 0}
.kanim-grid{display:grid;gap:2.2rem;margin-top:2rem}
.kanim{background:linear-gradient(160deg,var(--ink-2),var(--ink-0));color:#c3d3dd;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(8,18,26,.22);display:grid;grid-template-columns:1fr;margin:2rem 0}
.kanim-grid .kanim{margin:0}
@media (min-width:980px){.kanim{grid-template-columns:1.25fr .75fr;grid-template-areas:"head head" "stage steps" "note note"}.kanim__head{grid-area:head}.kanim__stage{grid-area:stage}.kanim__steps{grid-area:steps}.kanim__note{grid-area:note}}
.kanim__head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}
.kanim__head strong{color:#fff;font-size:1.15rem;letter-spacing:-.01em}
.kanim__badge{font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--aqua);border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px}
.kanim__stage{position:relative;background-color:#0a1620;background-image:linear-gradient(rgba(159,182,198,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,182,198,.07) 1px,transparent 1px);background-size:20px 20px}
.kanim__stage>svg{display:block;width:100%;height:auto;aspect-ratio:640/420}
.kanim__ctrl{position:relative;display:none;align-items:center;gap:.35rem;padding:.55rem .8rem .7rem;border-top:1px solid var(--line);background:rgba(8,18,26,.55)}
.kanim.is-js .kanim__ctrl{display:flex}
.kanim__ctrl button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:#e6eef3;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.kanim__ctrl button:hover{background:var(--accent);color:#04161a}
.kanim__ctrl .i-pause,.kanim__ctrl [aria-pressed="true"] .i-play{display:none}
.kanim__ctrl [aria-pressed="true"] .i-pause{display:block}
.kanim__count{font:500 .78rem/1 var(--mono);color:#9fb6c6;padding:0 .6rem 0 .5rem;margin-left:auto}.kanim__count b{color:#fff}
.kanim__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(159,182,198,.15);display:none}
.kanim.is-js .kanim__bar{display:block}
.kanim__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--aqua));transform-origin:0 50%;transform:scaleX(1);transition:transform .7s var(--ease)}
.kanim__steps{list-style:none;margin:0;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;border-top:1px solid var(--line)}
@media (min-width:980px){.kanim__steps{border-top:0;border-left:1px solid var(--line);padding:1.3rem 1.2rem}}
.kanim__steps li{border-radius:12px;border:1px solid transparent;padding:.15rem .3rem .15rem;transition:background .3s,border-color .3s}
.kanim__steps button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.8rem;width:100%;padding:.55rem .6rem;cursor:default;color:#9fb6c6;font-weight:700}
.kanim.is-js .kanim__steps button{cursor:pointer}
.kanim__steps button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.kanim__no{font:500 .78rem/1 var(--mono);color:var(--steel);transition:color .3s}
.kanim__steps p{margin:0;padding:0 .6rem .7rem 2.65rem;font-size:.95rem;line-height:1.6;color:#b9c9d3}
.kanim.is-js .kanim__steps li:not(.is-cur) p{display:none}
.kanim.is-js .kanim__steps li.is-cur{background:rgba(31,163,174,.1);border-color:var(--accent)}
.kanim__steps li.is-cur button{color:#fff}.kanim__steps li.is-cur .kanim__no{color:var(--aqua)}
.kanim__note{margin:0;padding:.9rem 1.5rem 1.1rem;border-top:1px solid var(--line);font-size:.82rem;color:#8fa6b5}

/* ---- SVG çizim dili ---- */
.kanim svg .m{fill:none;stroke:#9fb6c6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .m6{fill:none;stroke:#c3d3dd;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .mf{fill:rgba(159,182,198,.16);stroke:#9fb6c6;stroke-width:2;stroke-linejoin:round}
.kanim svg .dim{opacity:.55}
.kanim svg .z .m6{stroke-width:3.4}.kanim svg .z .m{stroke-width:1.2}.kanim svg .z .clip{stroke-width:2.4}.kanim svg .z .mf{stroke-width:1.2}
.kanim svg .ac{fill:none;stroke:var(--aqua);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .dot{fill:var(--aqua)}
.kanim svg .hole{fill:#0a1620;stroke:#9fb6c6;stroke-width:2}
.kanim svg .lb{fill:#d7e3ea;font:700 17px var(--font)}
.kanim svg .lb-s{fill:#8fa6b5;font:500 12.5px var(--mono);letter-spacing:.1em}
.kanim svg .leader{fill:none;stroke:var(--aqua);stroke-width:1.5;stroke-dasharray:3 3;opacity:.7}
.kanim svg .box{fill:rgba(255,255,255,.04);stroke:rgba(159,182,198,.35)}
.kanim svg .blade{fill:#d7e3ea;stroke:var(--aqua);stroke-width:2;stroke-linejoin:round}
.kanim svg .deck{fill:#22343f;stroke:#4c6677;stroke-width:1.5}
.kanim svg .clip{fill:none;stroke:var(--aqua);stroke-width:4;stroke-linecap:round}
.kanim svg .clip-h{fill:var(--aqua);stroke:none}
.kanim svg .seam{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.5}
.kanim svg .tp-rect{fill:#3f7fa6;stroke:#9fb6c6;stroke-width:2;transform-origin:60px 199px}
.kanim svg .sun{fill:#f1c25a}.kanim svg .sun-r{fill:none;stroke:#f1c25a;stroke-width:3;stroke-linecap:round}
.kanim svg .vap{fill:#3c8dbc}
.kanim svg .ins{fill:#4a4326;stroke:#c9ae5f;stroke-width:1}
.kanim svg .air{fill:rgba(111,227,236,.07);stroke:rgba(111,227,236,.4);stroke-dasharray:4 4}
.kanim svg .under{fill:#7d8f9b}
.kanim svg .skin{fill:#c3d3dd}
.kanim svg .st{fill:#667a88;stroke:#9fb6c6;stroke-width:1.5}
.kanim svg .zn{fill:#cdd7de}
.kanim svg .pt{fill:#86b0c8}
.kanim svg .pr{fill:#c98a5b}
.kanim svg .tc{fill:var(--accent)}
.kanim svg .bk{fill:#5b6f7c}
.kanim svg .arr{fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .dash{stroke-dasharray:7 7}
.kanim svg .drop{fill:none;stroke:var(--aqua);stroke-width:3;stroke-linecap:round}
.kanim svg .rv{fill:var(--aqua);offset-path:path("M64 132L436 244");offset-rotate:0deg}
.kanim svg .water{fill:rgba(111,227,236,.55);transform-box:fill-box;transform-origin:50% 100%}
.kanim svg .sheen{fill:rgba(255,255,255,.2)}
.kanim svg .seam-r{fill:rgba(0,0,0,.14)}
.kanim svg .flow{fill:none;stroke:var(--aqua);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 14}
.kanim svg .slider{transition:transform 1.8s var(--ease-io)}
.kanim svg .dimline{opacity:0;transition:opacity .6s}
.kanim svg .tp-rect,.kanim svg .seam{transition:transform 1.8s var(--ease-io),fill 1.8s}

/* ---- Termal hareket: duruma bağlı (figürün data-step değeri) ---- */
.kanim[data-step="2"] svg .tp-rect{transform:scaleX(1.045);fill:#c0563b}
.kanim[data-step="2"] svg .seam{transform:scaleX(1.045);transform-origin:60px 199px}
.kanim[data-step="2"] svg .s-a{transform:translateX(5.4px)}
.kanim[data-step="2"] svg .s-b{transform:translateX(10.8px)}
.kanim[data-step="2"] svg .s-c{transform:translateX(16.2px)}
.kanim[data-step="2"] svg .dimline{opacity:1}
.kanim[data-step="2"] svg .dim-arrow{animation:kpulse 1.2s ease-in-out infinite}

/* ---- Sahne öğeleri: JS açıkken adıma göre belirir ---- */
.kanim.is-js svg [data-s]{opacity:0;transition:opacity .6s var(--ease),transform .9s var(--ease),stroke-dashoffset 1.2s var(--ease-io)}
.kanim.is-js svg [data-s].on{opacity:1;transform:none}
.kanim.is-js svg .fx-up:not(.on){transform:translateY(26px)}
.kanim.is-js svg .fx-down:not(.on){transform:translateY(-44px)}
.kanim.is-js svg .fx-left:not(.on){transform:translateX(-70px)}
.kanim.is-js svg .fx-right:not(.on){transform:translateX(70px)}
.kanim.is-js svg .fx-pop:not(.on){transform:scale(.4);transform-box:fill-box;transform-origin:center}
.kanim.is-js svg .fx-draw{stroke-dasharray:1;stroke-dashoffset:1}
.kanim.is-js svg .fx-draw.on{stroke-dashoffset:0}
.kanim.is-js svg .piece{transition:opacity .6s,transform 1.4s .5s var(--ease)}
.kanim.is-js svg .piece:not(.on){transform:translateX(0)}
.kanim.is-js svg .piece.on{transform:translateX(34px)}
.kanim.is-js svg [data-s]:not(.on) .fill-up{transform:scaleY(0)}
.kanim svg .fill-up{transition:transform 2.2s var(--ease-io) .3s}
/* Betik yoksa: yalnızca son hâl (kısa süreli adımlar gizlenir) */
.kanim:not(.is-js) svg [data-to]{display:none}

/* ---- Döngüler: yalnızca oynarken çalışır ---- */
.kanim svg .loop{animation-play-state:paused}
.kanim.is-playing svg .loop,.kanim.is-playing svg .flow{animation-play-state:running}
.kanim svg .flow{animation:kflow 1s linear infinite;animation-play-state:paused}
.kanim svg .spin{animation:kspin 5s linear infinite;transform-origin:0 0}
.kanim svg .spin-r{animation:kspin 5s linear infinite reverse;transform-origin:0 0}
.kanim svg .spin-slow{animation:kspin 14s linear infinite;transform-origin:0 0}
.kanim svg .bob{animation:kbob 1.1s ease-in-out infinite}
.kanim svg .drop{animation:kdrop 1.3s linear infinite}
.kanim svg .rv{animation:kroll 2.4s linear infinite}
.kanim svg .sheen{animation:ksheen 3.2s ease-in-out infinite}
@keyframes kspin{to{transform:rotate(360deg)}}
@keyframes kflow{to{stroke-dashoffset:-24}}
@keyframes kbob{50%{transform:translateY(7px)}}
@keyframes kdrop{0%{transform:translateY(0);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateY(var(--d,100px));opacity:0}}
@keyframes kroll{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes ksheen{0%{transform:translateX(-60px)}100%{transform:translateX(480px)}}
@keyframes kpulse{50%{opacity:.35}}

/* ---- Trapez: sehim (δ) ölçüsü ---- */
.kanim svg .sag{fill:none;stroke:var(--aqua);stroke-width:2.2;stroke-linecap:round}
.kanim svg .sag-t{fill:var(--aqua)}
.kanim svg .sag-old{fill:none;stroke:#8fa6b5;stroke-width:2;stroke-dasharray:3 3;stroke-linecap:round}
.kanim svg .sag-old-t{fill:#8fa6b5}

/* ---- Havalandırma: saçaktan mahyaya hava akışı ---- */
.kanim svg .grille{fill:none;stroke:#9fb6c6;stroke-width:1.6;stroke-linecap:round}
.kanim svg .vent{fill:none;stroke:var(--aqua);stroke-width:3;stroke-linecap:round}
.kanim svg .vent-h{fill:none;stroke:var(--aqua);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .vflow{stroke-width:3.5}
.kanim svg .moist{fill:rgba(111,227,236,.7);animation:kpulse 1.4s ease-in-out infinite}
.kanim svg .moist-t{fill:#9fd9e0}
.kanim svg .dry-t{fill:#e4c478}

/* ---- Katmanlar: kenet kaplama bakır ---- */
.kanim svg .skin-cu{fill:#c27a48;stroke:#e0a77c;stroke-width:1}
.kanim svg .skin-cu-s{fill:#b06c3d;stroke:#e0a77c;stroke-width:1}
.kanim svg .skin-cu-h{fill:#d48a57;stroke:#e0a77c;stroke-width:1}

/* ---- Termal: sabit nokta (kilitli) ve kayar klips rayları, soğumada ay ---- */
.kanim svg .fixp{fill:var(--copper);stroke:#f0c39d;stroke-width:1.5}
.kanim svg .fixp-l{fill:none;stroke:#1a120c;stroke-width:1.8;stroke-linejoin:round}
.kanim svg .rail{fill:none;stroke:var(--aqua);stroke-width:1.5;stroke-dasharray:3 3;opacity:.6}
.kanim svg .rail-a{fill:none;stroke:var(--aqua);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.kanim svg .moon{fill:#cfe2ee}
.kanim svg .frost{fill:none;stroke:#cfe2ee;stroke-width:2;stroke-linecap:round}
.kanim[data-step="2"] svg .rails{opacity:1}
.kanim svg .rails{transition:opacity .6s}

/* ---- Çift kenet kesit detayı (birleşim 5. adım) ---- */
.kanim svg .dl{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .dl-p{stroke:#c3d3dd}
.kanim svg .dl-c{stroke:var(--aqua)}
.kanim svg .dl-t{font-size:11px;fill:#8fa6b5}
.kanim.is-js svg .dl.fx-draw{transition:stroke-dashoffset 1.4s var(--ease-io) .5s,opacity .6s}

/* ---- Malzeme seçimi (kenet imalat 1. adım) ---- */
.kanim svg .sel-card{fill:rgba(255,255,255,.035);stroke:rgba(159,182,198,.3);stroke-width:1.5}
.kanim svg .sw{stroke:rgba(255,255,255,.25);stroke-width:1}
.kanim svg .sw-bgs{fill:#3d4851}.kanim svg .sw-al{fill:#c9d3da}.kanim svg .sw-zn{fill:#8796a0}.kanim svg .sw-cu{fill:#c27a48}
.kanim svg .sw-seam{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2.2}
.kanim svg .sw-shine{fill:rgba(255,255,255,.1)}
.kanim svg .lb-m{fill:#d7e3ea;font:700 15px var(--font)}
.kanim svg .sel-cur{fill:none;stroke:var(--aqua);stroke-width:3;filter:drop-shadow(0 0 6px rgba(111,227,236,.55));transform:translateX(426px)}
.kanim svg .sel-ok-c{fill:var(--aqua)}
.kanim svg .sel-ok-p{fill:none;stroke:#04161a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kanim svg .sel-txt{fill:#fff}
.kanim.is-js svg .sel-scene .sel-ok,.kanim.is-js svg .sel-scene .sel-txt{opacity:0}
.kanim.is-js svg .sel-scene.on .sel-cur{animation:ksel 2.6s var(--ease-io) .3s both}
.kanim.is-js svg .sel-scene.on .sel-ok{animation:kselok .5s var(--ease) 3s both}
.kanim.is-js svg .sel-scene.on .sel-txt{animation:kselin .6s var(--ease) 3.1s both}
@keyframes ksel{0%,14%{transform:translateX(0)}26%,40%{transform:translateX(142px)}52%,66%{transform:translateX(284px)}80%,100%{transform:translateX(426px)}}
@keyframes kselok{from{opacity:0;transform:translate(588px,112px) scale(.3)}to{opacity:1;transform:translate(588px,112px) scale(1)}}
@keyframes kselin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Seçilen malzemenin rengi (bakır): rulo, şerit ve panel */
.kanim svg .mf.cu{fill:rgba(194,122,72,.26);stroke:#d99a6c}
.kanim svg .m.cu{stroke:#d99a6c}
.kanim svg .m6.cu{stroke:#d99a6c}

/* ---- Hareket azaltma: döngüler ve geçişler kapanır; adım düğmeleri çalışmaya devam eder ---- */
@media (prefers-reduced-motion:reduce){
  .kanim svg *{animation:none!important;transition:none!important}
  .kanim__bar i{transition:none}
}
@media (prefers-reduced-motion:reduce){.kanim.is-js svg .sel-scene .sel-ok,.kanim.is-js svg .sel-scene .sel-txt{opacity:1}}