/* =====================================================================
   sakaryahidrolik.com — hidrolik animasyonlar (ana sayfa)
   Tamamı CSS; betik yok. `prefers-reduced-motion`da animasyon DURUR ve sahne "kasa yarı açık" durgun karede kalır.
   Mantık ve koordinatlar: includes/animasyon.php başındaki not.
   ===================================================================== */

/* manometre iğnesi açılış yayından sonra sürekli hafif titrer: basınç "canlı" */
.m-titre { transform-origin: 80px 80px; animation: titre 3.2s ease-in-out 4s infinite; }
@keyframes titre { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 55% { transform: rotate(-2.5deg); } 80% { transform: rotate(3deg); } }

/* ---------------------------------------------------------------- "Damper nasıl kalkar?" bölümü */
.hidrolik-sahne { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hidrolik-sahne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; } }
.sahne-resim { background: #fff; border: 1px solid var(--cizgi); border-top: 4px solid var(--kirmizi); padding: 10px 10px 4px; }
.damper-sahne { width: 100%; height: auto; display: block; }
.adim-liste { list-style: none; counter-reset: adim; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.adim-liste li { counter-increment: adim; background: #fff; border: 1px solid var(--cizgi); padding: 10px 12px 10px 46px; position: relative; line-height: 1.25; }
.adim-liste li::before { content: counter(adim); position: absolute; left: 10px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--kirmizi); color: #fff; font: 700 .95rem/26px var(--baslik-yazi); text-align: center; }
.adim-liste b { display: block; font: 700 1rem/1.1 var(--baslik-yazi); letter-spacing: .05em; text-transform: uppercase; }
.adim-liste span { font-size: .85rem; color: var(--gri); }
.sahne-not { font-size: .88rem; color: var(--gri); margin: 12px 0 0; }
@media (max-width: 560px) { .adim-liste { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- sahne çizimi */
.d-zemin { stroke: var(--koyu); stroke-width: 2; }
.d-sasi { fill: var(--celik); }
.d-kabin { fill: var(--koyu); } .d-cam { fill: #cfe3ee; }
.d-teker circle { fill: #23272c; } .d-jant circle { fill: #c9ccd0; }
.d-hat { fill: none; stroke: #b9b4a8; stroke-width: 5; stroke-linejoin: round; }
.d-akis, .d-donus { fill: none; stroke-width: 3; stroke-dasharray: 7 9; stroke-linejoin: round; opacity: 0; }
.d-akis { stroke: var(--kirmizi); animation: akis .7s linear infinite, akis-gor 7s ease-in-out infinite; }
.d-donus { stroke: #1f78b8; animation: akis-ters .9s linear infinite, donus-gor 7s ease-in-out infinite; }
@keyframes akis { to { stroke-dashoffset: -16; } }
@keyframes akis-ters { to { stroke-dashoffset: 16; } }
/* kalkışta (kasa yükselirken) kırmızı basınç akışı; inişte mavi dönüş akışı */
@keyframes akis-gor { 0%, 10% { opacity: 0; } 14%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes donus-gor { 0%, 64% { opacity: 0; } 68%, 98% { opacity: 1; } 100% { opacity: 0; } }

.d-depo { fill: #dfe2e5; stroke: #8b929a; stroke-width: 1.5; }
.d-seviye { fill: #1f78b8; opacity: .85; transform-box: fill-box; transform-origin: bottom; animation: seviye 7s ease-in-out infinite; }
/* kasa kalkarken depodaki yağ seviyesi düşer, inerken geri yükselir */
@keyframes seviye { 0%, 12% { transform: scaleY(1); } 52%, 66% { transform: scaleY(.45); } 100% { transform: scaleY(1); } }
.d-pompa { fill: #4a5058; }
.d-disli { fill: none; stroke: #f2f0eb; stroke-width: 4; stroke-dasharray: 2.6 2.6; transform-box: fill-box; transform-origin: center; animation: don 1.2s linear infinite; }
.d-disli-2 { animation-direction: reverse; }
@keyframes don { to { transform: rotate(360deg); } }
.d-yazi { font: 700 8px var(--mono); fill: var(--gri); letter-spacing: .12em; }
.d-kasa-g { fill: var(--kirmizi); } .d-kasa-k { fill: var(--kirmizi-koyu); } .d-yuk { fill: #6e6a60; }
.d-govde { fill: #8b929a; }
.d-kol { fill: #dfe2e5; stroke: #8b929a; stroke-width: 1; }
.d-pim { fill: var(--koyu); }

/* tek döngü (7 sn): dinlen → kalk → bekle → in. Kasa, gövde ve kollar AYNI yüzdelerde, aynı eğriyle hareket eder. */
.d-kasa  { transform-origin: 300px 150px; animation: kasa 7s ease-in-out infinite; }
.d-govde { transform-origin: 100px 168px; animation: govde 7s ease-in-out infinite; }
.d-kol   { transform-origin: 100px 168px; }
.d-kol-1 { animation: kol1 7s ease-in-out infinite; }
.d-kol-2 { animation: kol2 7s ease-in-out infinite; }
@keyframes kasa  { 0%, 12% { transform: rotate(0); } 52%, 66% { transform: rotate(30deg); } 100% { transform: rotate(0); } }
@keyframes govde { 0%, 12% { transform: rotate(-12.7deg); } 52%, 66% { transform: rotate(-39deg); } 100% { transform: rotate(-12.7deg); } }
/* teleskopik: iki kademe; ikinci kademe daha çok yol alır (uç = 82 + 41,8 br) */
@keyframes kol1 { 0%, 12% { transform: rotate(-12.7deg) translateX(0); } 52%, 66% { transform: rotate(-39deg) translateX(24px); } 100% { transform: rotate(-12.7deg) translateX(0); } }
@keyframes kol2 { 0%, 12% { transform: rotate(-12.7deg) translateX(0); } 52%, 66% { transform: rotate(-39deg) translateX(41.8px); } 100% { transform: rotate(-12.7deg) translateX(0); } }

/* ================================================================ HİDROLİK ATÖLYESİ — sahne kartları
   Renk dili hepsinde aynı: KIRMIZI = basınçlı yağ, MAVİ = emiş/dönüş yağı. */
:root { --yag: #1f78b8; --yag-ac: #cfe6f5; }

.lab-izgara { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lab-izgara { grid-template-columns: 1fr 1fr; gap: 18px; } }
.lab-kart { margin: 0; background: #fff; border: 1px solid var(--cizgi); border-top: 4px solid var(--kirmizi); display: flex; flex-direction: column; }
.lab-genis { margin: 26px 0 0; }
.lab-resim { padding: 12px 12px 0; }
.lab-svg, .lab-resim .damper-sahne { width: 100%; height: auto; display: block; }
.lab-kart figcaption { padding: 6px 18px 18px; }
.lab-kart h3 { font-size: 1.25rem; margin: 6px 0 6px; }
.lab-kart p { margin: 0; color: var(--celik); font-size: .95rem; line-height: 1.5; }

/* ---- Pascal (6 sn): küçük piston iner → büyük piston yükselir ---- */
.p-yag { fill: var(--yag); }
.p-hava { fill: #fff; }
.p-tup { fill: none; stroke: var(--koyu); stroke-width: 2.5; stroke-linejoin: round; }
.p-piston { fill: var(--koyu); }
.p-kol { stroke: var(--koyu); stroke-width: 4; }
.p-ok { fill: none; stroke: var(--kirmizi); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.p-yuk { fill: #c9a064; stroke: #8a6a35; stroke-width: 1.5; }
.p-yaz { font: 700 16px var(--baslik-yazi); fill: var(--kirmizi); }
.p-yaz-b { fill: var(--koyu); font-size: 18px; }
.p-etiket { font: 700 9px var(--mono); fill: var(--gri); letter-spacing: .08em; }
.p-etiket.p-b { fill: var(--koyu); font-size: 14px; }
.p-sol { animation: p-sol 6s ease-in-out infinite; }
.p-sag { animation: p-sag 6s ease-in-out infinite; }
@keyframes p-sol { 0%, 10% { transform: translateY(0); } 50%, 62% { transform: translateY(40px); } 95%, 100% { transform: translateY(0); } }
@keyframes p-sag { 0%, 10% { transform: translateY(0); } 50%, 62% { transform: translateY(-10px); } 95%, 100% { transform: translateY(0); } }

/* ---- dişli pompa kesiti ---- */
.g-yag { fill: var(--yag-ac); }
.g-kasa { fill: none; stroke: var(--koyu); stroke-width: 3; }
.g-boru { fill: #fff; stroke: var(--koyu); stroke-width: 2.5; }
.g-gov { fill: #4a5058; }
.g-dis { fill: none; stroke: #4a5058; stroke-width: 9; stroke-dasharray: 7.85 7.85; }
.g-mil { fill: #f2f0eb; }
.g-isaret { stroke: #f2f0eb; stroke-width: 3; stroke-linecap: round; }
.g-d { transform-box: fill-box; transform-origin: center; animation: don 3s linear infinite; }
.g-d2 { animation-direction: reverse; }
.g-akis { fill: none; stroke-width: 3.5; stroke-dasharray: 4 9; stroke-linecap: round; animation: akis .9s linear infinite; }
.g-akis-m { stroke: var(--yag); }
.g-giris, .g-cikis { fill: none; stroke-width: 4; stroke-dasharray: 7 9; stroke-linecap: round; animation: akis .6s linear infinite; }
.g-giris { stroke: var(--yag); }
.g-cikis { stroke: var(--kirmizi); }
.g-yaz { font: 700 8.5px var(--mono); fill: var(--gri); letter-spacing: .06em; }
.g-yaz-k { fill: var(--kirmizi-koyu); }

/* ---- yön valfi + çift etkili silindir (9 sn): ileri → bekle → geri ---- */
.v-hat { fill: none; stroke: #b9b4a8; stroke-width: 5; stroke-linejoin: round; }
.v-kirmizi, .v-mavi { fill: none; stroke-width: 3; stroke-dasharray: 7 9; stroke-linejoin: round; opacity: 0; animation: akis .7s linear infinite; }
.v-kirmizi { stroke: var(--kirmizi); }
.v-mavi { stroke: var(--yag); }
.v-pt { animation: akis .7s linear infinite, v-pt 9s ease-in-out infinite; }
.v-ileri { animation: akis .7s linear infinite, v-ileri 9s ease-in-out infinite; }
.v-geri { animation: akis .7s linear infinite, v-geri 9s ease-in-out infinite; }
@keyframes v-pt { 0%, 9% { opacity: 0; } 12%, 42% { opacity: 1; } 45%, 56% { opacity: 0; } 59%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes v-ileri { 0%, 9% { opacity: 0; } 12%, 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes v-geri { 0%, 56% { opacity: 0; } 59%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
.v-varil { fill: none; stroke: var(--koyu); stroke-width: 3; }
.v-oda { stroke: none; }
.v-cap { fill: #dfe6ec; transform-origin: 62px 158px; animation: v-cap 9s ease-in-out infinite, v-cap-renk 9s linear infinite; }
.v-rod { fill: #dfe6ec; transform-origin: 268px 158px; animation: v-rod 9s ease-in-out infinite, v-rod-renk 9s linear infinite; }
@keyframes v-cap { 0%, 8% { transform: scaleX(1); } 42%, 54% { transform: scaleX(16); } 88%, 100% { transform: scaleX(1); } }
@keyframes v-rod { 0%, 8% { transform: scaleX(1); } 42%, 54% { transform: scaleX(.3617); } 88%, 100% { transform: scaleX(1); } }
@keyframes v-cap-renk { 0%, 8% { fill: #dfe6ec; } 12%, 42% { fill: #f0777c; } 47%, 56% { fill: #dfe6ec; } 60%, 88% { fill: #8cc0e3; } 93%, 100% { fill: #dfe6ec; } }
@keyframes v-rod-renk { 0%, 8% { fill: #dfe6ec; } 12%, 42% { fill: #8cc0e3; } 47%, 56% { fill: #dfe6ec; } 60%, 88% { fill: #f0777c; } 93%, 100% { fill: #dfe6ec; } }
.v-piston { fill: var(--koyu); animation: v-pis 9s ease-in-out infinite; }
.v-kol { fill: #cfd3d7; stroke: #8b929a; stroke-width: 1.5; animation: v-pis 9s ease-in-out infinite; }
.v-kolbas { fill: #8b929a; stroke: var(--koyu); stroke-width: 1.5; animation: v-pis 9s ease-in-out infinite; }
@keyframes v-pis { 0%, 8% { transform: translateX(0); } 42%, 54% { transform: translateX(120px); } 88%, 100% { transform: translateX(0); } }
.v-valf { fill: #eef0f2; stroke: var(--koyu); stroke-width: 2.5; }
.v-makara-g { fill: var(--celik); }
.v-bolme { stroke: #f2f0eb; stroke-width: 1.5; stroke-dasharray: 3 2; }
.v-makara { animation: v-mak 9s ease-in-out infinite; }
@keyframes v-mak { 0%, 8% { transform: translateX(0); } 12%, 42% { transform: translateX(-14px); } 47%, 54% { transform: translateX(0); } 58%, 88% { transform: translateX(14px); } 93%, 100% { transform: translateX(0); } }
.v-pompa { fill: #4a5058; }
.v-disli { stroke-width: 3; stroke-dasharray: 1.8 1.8; }
.v-depo { fill: #dfe2e5; stroke: #8b929a; stroke-width: 1.5; }
.v-seviye { fill: var(--yag); opacity: .85; transform-box: fill-box; transform-origin: bottom; animation: v-sev 9s ease-in-out infinite; }
@keyframes v-sev { 0%, 8% { transform: scaleY(1); } 42%, 54% { transform: scaleY(.8); } 88%, 100% { transform: scaleY(1); } }
.v-yaz { font: 700 8.5px var(--mono); fill: var(--gri); letter-spacing: .1em; }
.v-etiket { font: 700 10px var(--mono); letter-spacing: .06em; opacity: 0; }
.v-et-ileri { fill: var(--kirmizi-koyu); animation: v-ileri 9s ease-in-out infinite; }
.v-et-geri { fill: #14588a; animation: v-geri 9s ease-in-out infinite; }

/* ---- forklift (8 sn): kaldır → bekle → indir ---- */
.f-govde { fill: var(--celik); } .f-denge { fill: #8a8f96; } .f-tavan { fill: var(--koyu); }
.f-kafes { fill: none; stroke: var(--koyu); stroke-width: 4; stroke-linecap: round; }
.f-surucu { fill: #e0b48a; } .f-koltuk { fill: #3a3f45; }
.f-teker { fill: #23272c; } .f-jant { fill: #c9ccd0; }
.f-direk { fill: #6b7178; }
.f-hortum { fill: none; stroke: #b9b4a8; stroke-width: 4; stroke-linejoin: round; }
.f-akis { fill: none; stroke: var(--kirmizi); stroke-width: 2.5; stroke-dasharray: 6 8; stroke-linejoin: round; opacity: 0; animation: akis .7s linear infinite, f-akis 8s ease-in-out infinite; }
@keyframes f-akis { 0%, 11% { opacity: 0; } 14%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
.f-varil { fill: #8b929a; }
.f-kolg { fill: #dfe2e5; stroke: #8b929a; stroke-width: 1; }
.f-makara { fill: var(--koyu); }
.f-zincir { stroke: var(--koyu); stroke-width: 2; stroke-dasharray: 3 2; }
.f-plaka { fill: var(--koyu); } .f-catal { fill: #4a5058; } .f-palet { fill: #a8793c; }
.f-kutu { fill: #c9a064; stroke: #8a6a35; stroke-width: 1.5; } .f-bant { stroke: #8a6a35; stroke-width: 2; }
.f-karet { animation: f-karet 8s ease-in-out infinite; }
.f-kol { animation: f-kol 8s ease-in-out infinite; }
.f-z1 { transform-origin: 250px 58px; animation: f-z1 8s ease-in-out infinite; }
.f-z2 { transform-origin: 260px 94px; animation: f-z2 8s ease-in-out infinite; }
@keyframes f-karet { 0%, 10% { transform: translateY(0); } 45%, 60% { transform: translateY(-60px); } 92%, 100% { transform: translateY(0); } }
@keyframes f-kol { 0%, 10% { transform: translateY(0); } 45%, 60% { transform: translateY(-30px); } 92%, 100% { transform: translateY(0); } }
@keyframes f-z1 { 0%, 10% { transform: scaleY(1); } 45%, 60% { transform: scaleY(.1667); } 92%, 100% { transform: scaleY(1); } }
@keyframes f-z2 { 0%, 10% { transform: translateY(0) scaleY(1); } 45%, 60% { transform: translateY(-30px) scaleY(.318); } 92%, 100% { transform: translateY(0) scaleY(1); } }

/* ---- emniyet valfi (8 sn): basınç yükselir → valf açılır → fazla yağ depoya ---- */
.e-hat { fill: none; stroke: #b9b4a8; stroke-width: 5; stroke-linejoin: round; }
.e-kirmizi, .e-mavi { fill: none; stroke-width: 3; stroke-dasharray: 7 9; stroke-linejoin: round; opacity: 0; animation: akis .7s linear infinite; }
.e-kirmizi { stroke: var(--kirmizi); animation: akis .7s linear infinite, e-bas 8s ease-in-out infinite; }
.e-mavi { stroke: var(--yag); animation: akis .7s linear infinite, e-dump 8s ease-in-out infinite; }
.e-kolu { animation: akis .7s linear infinite, e-dump 8s ease-in-out infinite; }
@keyframes e-bas { 0%, 3% { opacity: 0; } 8% { opacity: .35; } 30%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes e-dump { 0%, 34% { opacity: 0; } 38%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }
.e-govde { fill: #eef0f2; stroke: var(--koyu); stroke-width: 2.5; }
.e-yay { fill: none; stroke: #6b7178; stroke-width: 2.4; stroke-linejoin: round; }
.e-yay-g { transform-origin: 185px 75px; animation: e-yay 8s ease-in-out infinite; }
.e-popet { fill: #4a5058; animation: e-popet 8s ease-in-out infinite; }
.e-ayar { fill: var(--koyu); }
@keyframes e-yay { 0%, 32% { transform: scaleY(1); } 38%, 82% { transform: scaleY(.61); } 88%, 100% { transform: scaleY(1); } }
@keyframes e-popet { 0%, 32% { transform: translateY(0); } 38%, 82% { transform: translateY(-12px); } 88%, 100% { transform: translateY(0); } }
.v-seviye.e-seviye { animation: e-sev 8s ease-in-out infinite; }
@keyframes e-sev { 0%, 34% { transform: scaleY(1); } 82%, 84% { transform: scaleY(1.9); } 100% { transform: scaleY(1); } }
.e-yuk { fill: #eef0f2; stroke: var(--koyu); stroke-width: 2; }
.e-kol { fill: #cfd3d7; stroke: #8b929a; stroke-width: 1; }
.e-blok { fill: #8a8f96; stroke: var(--koyu); stroke-width: 1.5; }
.e-m-dis { fill: var(--koyu); } .e-m-ic { fill: #f7f5ef; }
.e-m-bolge { fill: none; stroke: var(--kirmizi); stroke-width: 4; stroke-dasharray: 14 80; }
.e-igne { transform-origin: 115px 104px; animation: e-igne 8s ease-in-out infinite; }
.e-igne line { stroke: var(--kirmizi); stroke-width: 2.6; stroke-linecap: round; }
.e-m-orta { fill: var(--koyu); }
@keyframes e-igne { 0%, 3% { transform: rotate(-70deg); } 30% { transform: rotate(48deg); } 36% { transform: rotate(55deg); } 46% { transform: rotate(49deg); } 60% { transform: rotate(54deg); } 80% { transform: rotate(50deg); } 92%, 100% { transform: rotate(-70deg); } }
.e-et-1 { fill: #14588a; animation: e-et1 8s ease-in-out infinite; }
.e-et-2 { fill: var(--kirmizi-koyu); animation: e-et2 8s ease-in-out infinite; }
@keyframes e-et1 { 0%, 4% { opacity: 0; } 8%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes e-et2 { 0%, 35% { opacity: 0; } 39%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* ---- pnömatik silindir (4 sn, hızlı ve keskin): ileri → bekle → geri; hava açık camgöbeği ---- */
:root { --hava: #2aa3d1; }
.n-oda { stroke: none; }
.n-cap { fill: #eef6fa; transform-origin: 62px 158px; animation: n-cap 4s cubic-bezier(.3, .8, .3, 1) infinite, n-cap-renk 4s linear infinite; }
.n-rod { fill: #eef6fa; transform-origin: 268px 158px; animation: n-rod 4s cubic-bezier(.3, .8, .3, 1) infinite, n-rod-renk 4s linear infinite; }
@keyframes n-cap { 0%, 6% { transform: scaleX(1); } 30%, 50% { transform: scaleX(16); } 74%, 100% { transform: scaleX(1); } }
@keyframes n-rod { 0%, 6% { transform: scaleX(1); } 30%, 50% { transform: scaleX(.3617); } 74%, 100% { transform: scaleX(1); } }
@keyframes n-cap-renk { 0%, 6% { fill: #eef6fa; } 9%, 30% { fill: #8fd3ee; } 36%, 100% { fill: #eef6fa; } }
@keyframes n-rod-renk { 0%, 50% { fill: #eef6fa; } 53%, 74% { fill: #8fd3ee; } 80%, 100% { fill: #eef6fa; } }
.n-piston, .n-kol, .n-kolbas { animation: n-pis 4s cubic-bezier(.3, .8, .3, 1) infinite; }
.n-piston { fill: var(--koyu); } .n-kol { fill: #cfd3d7; stroke: #8b929a; stroke-width: 1.5; } .n-kolbas { fill: #8b929a; stroke: var(--koyu); stroke-width: 1.5; }
@keyframes n-pis { 0%, 6% { transform: translateX(0); } 30%, 50% { transform: translateX(120px); } 74%, 100% { transform: translateX(0); } }
.n-hava { fill: none; stroke: var(--hava); stroke-width: 3.5; stroke-dasharray: .1 8; stroke-linecap: round; opacity: 0; animation: akis .35s linear infinite; }
.n-pt { animation: akis .35s linear infinite, n-pt 4s ease-in-out infinite; }
.n-ileri { animation: akis .35s linear infinite, n-ileri 4s ease-in-out infinite; }
.n-geri { animation: akis .35s linear infinite, n-geri 4s ease-in-out infinite; }
@keyframes n-pt { 0%, 5% { opacity: 0; } 8%, 30% { opacity: 1; } 33%, 51% { opacity: 0; } 54%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes n-ileri { 0%, 5% { opacity: 0; } 8%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes n-geri { 0%, 51% { opacity: 0; } 54%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }
.n-tank { fill: #dfe9ef; stroke: #8b929a; stroke-width: 2; }
.n-noktalar circle { fill: var(--hava); animation: n-nokta 1.6s ease-in-out infinite; }
.n-noktalar circle:nth-child(2n) { animation-delay: -.8s; }
@keyframes n-nokta { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.n-makara { animation: n-mak 4s ease-in-out infinite; }
@keyframes n-mak { 0%, 5% { transform: translateX(0); } 8%, 30% { transform: translateX(-14px); } 34%, 51% { transform: translateX(0); } 54%, 74% { transform: translateX(14px); } 78%, 100% { transform: translateX(0); } }
/* egzoz havası: küçük halkalar büyüyüp söner; yalnız hava atılırken görünür */
.n-puf { fill: none; stroke: #9ccde0; stroke-width: 1.5; visibility: hidden; transform-box: fill-box; transform-origin: center; animation: n-puf .5s ease-out infinite; }
.n-puf-2 { animation-delay: .25s; }
.n-puf-b { animation: n-puf .5s ease-out infinite, n-vis-b 4s linear infinite; }
.n-puf-a { animation: n-puf .5s ease-out infinite, n-vis-a 4s linear infinite; }
.n-puf-2.n-puf-b, .n-puf-2.n-puf-a { animation-delay: .25s, 0s; }
@keyframes n-puf { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
@keyframes n-vis-b { 0%, 8% { visibility: hidden; } 10%, 30% { visibility: visible; } 33%, 100% { visibility: hidden; } }
@keyframes n-vis-a { 0%, 54% { visibility: hidden; } 56%, 74% { visibility: visible; } 77%, 100% { visibility: hidden; } }
.n-et-ileri { fill: #14588a; animation: n-et1 4s ease-in-out infinite; }
.n-et-geri { fill: #14588a; animation: n-et2 4s ease-in-out infinite; }
@keyframes n-et1 { 0%, 6% { opacity: 0; } 9%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes n-et2 { 0%, 52% { opacity: 0; } 55%, 74% { opacity: 1; } 77%, 100% { opacity: 0; } }

/* ---- PTO devreye giriyor (8 sn): kay → dişliye geç → mil ve pompa döner → geri çekil ---- */
.t-sanziman { fill: #f4f4f1; stroke: #8b929a; stroke-width: 2; stroke-dasharray: 7 5; }
.t-mil { fill: #9aa0a6; }
.t-dis { fill: none; stroke: #4a5058; stroke-width: 8; stroke-dasharray: 4.975 4.975; }
.t-dis-p { stroke-dasharray: 5.16 5.16; }
.t-ana { transform-box: fill-box; transform-origin: center; animation: don 6s linear infinite; }
.t-kay { animation: t-kay 8s ease-in-out infinite; }
@keyframes t-kay { 0%, 25% { transform: translateX(0); } 32%, 72% { transform: translateX(-40px); } 79%, 100% { transform: translateX(0); } }
.t-pto { transform-box: fill-box; transform-origin: center; animation: t-pto 8s linear infinite; }
@keyframes t-pto { 0%, 32% { transform: rotate(0); } 72%, 100% { transform: rotate(-384deg); } }
.t-pompa { fill: #e6e8ea; stroke: #8b929a; stroke-width: 2; }
.t-p1, .t-p2 { transform-box: fill-box; transform-origin: center; }
.t-p1 { animation: t-p1 8s linear infinite; } .t-p2 { animation: t-p2 8s linear infinite; }
@keyframes t-p1 { 0%, 32% { transform: rotate(0); } 72%, 100% { transform: rotate(1152deg); } }
@keyframes t-p2 { 0%, 32% { transform: rotate(0); } 72%, 100% { transform: rotate(-1152deg); } }
.t-cikis { fill: none; stroke: var(--kirmizi); stroke-width: 3; stroke-dasharray: 7 9; stroke-linejoin: round; opacity: 0; animation: akis .7s linear infinite, t-gor 8s ease-in-out infinite; }
@keyframes t-gor { 0%, 33% { opacity: 0; } 38%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
.t-lamba { fill: #c9ccd0; stroke: var(--koyu); stroke-width: 1.5; animation: t-lamba 8s linear infinite; }
@keyframes t-lamba { 0%, 30% { fill: #c9ccd0; } 34%, 72% { fill: #1faa59; } 76%, 100% { fill: #c9ccd0; } }
.t-yaz-b { font: 700 10px var(--mono); letter-spacing: .05em; fill: #1d2227; }
.t-et-var { animation: t-var 8s ease-in-out infinite; }
.t-et-yok { animation: t-yok 8s ease-in-out infinite; }
@keyframes t-var { 0%, 31% { opacity: 0; } 35%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes t-yok { 0%, 29% { opacity: 1; } 33%, 74% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* ---- sağlam ve aşınmış pompa: yan yana ---- */
.a-panel { fill: #fff; stroke: var(--cizgi); stroke-width: 1.5; }
.a-panel-k { stroke: #e3a3a6; }
.a-baslik { font: 700 11px var(--mono); letter-spacing: .08em; }
.a-iyi { fill: #0d5b2f; } .a-kotu { fill: var(--kirmizi-koyu); }
.a-yag { fill: #e6e2d4; }
.a-mil { fill: #8b929a; }
.a-dis { fill: none; stroke: #4a5058; stroke-width: 6; stroke-dasharray: 5.236 5.236; }
.a-cikis { fill: none; stroke: var(--kirmizi); stroke-linecap: round; }
.a-guclu { stroke-width: 5; stroke-dasharray: 7 7; animation: akis .5s linear infinite; }
.a-zayif { stroke-width: 2; stroke-dasharray: 3 14; opacity: .6; animation: akis 1.3s linear infinite; }
.a-ickacak { fill: none; stroke: var(--kirmizi); stroke-width: 2.6; stroke-dasharray: 3 6; stroke-linecap: round; animation: akis .6s linear infinite; }
.a-damla { fill: #b9770e; opacity: 0; animation: a-damla 1.8s ease-in infinite; }
.a-damla-2 { animation-delay: .6s; } .a-damla-3 { animation-delay: 1.2s; }
@keyframes a-damla { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(72px); } }
.a-not { fill: var(--kirmizi-koyu); }
.a-cubuk-z { fill: #e3e0d8; }
.a-cubuk { transform-origin: left center; transform-box: fill-box; }
.a-cubuk-iyi { fill: #1faa59; animation: a-iyi 3s ease-in-out infinite; }
.a-cubuk-kotu { fill: var(--kirmizi); animation: a-kotu 1.4s ease-in-out infinite; }
@keyframes a-iyi { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.97); } }
@keyframes a-kotu { 0%, 100% { transform: scaleX(.85); } 50% { transform: scaleX(1.12); } }

/* ---- SEN YÖNET: damperi kolla (yalnız CSS, onay kutusu). Kapalı = kasa iner; açık = kasa kalkar ---- */
.lab-izgara .lab-genis { grid-column: 1 / -1; margin-top: 0; }
.lab-elle { position: relative; }
@media (min-width: 760px) { .lab-elle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; } .lab-elle .lab-resim { padding-bottom: 12px; } }
.elle-giris { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* ses: sahnenin sağ üst köşesinde KÜÇÜK hoparlör simgesi (44 px dokunma hedefi, yuvarlak) */
.elle-eylem { margin-top: 14px; }
.damper-elle { position: relative; }
.elle-ses { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cizgi); border-radius: 50%; background: #fff; color: var(--koyu); cursor: pointer; transition: background .15s, color .15s; }
.elle-ses svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.elle-ses svg path:first-child { stroke: none; }
.elle-ses:hover { background: var(--koyu); color: #fff; }
.elle-ses:focus-visible { outline: 3px solid var(--kirmizi); outline-offset: 2px; }
.elle-ses[aria-pressed="true"] .s-kapali, .elle-ses[aria-pressed="false"] .s-acik { display: none; }
.elle-ses[aria-pressed="false"] { color: var(--gri); }
.elle-ses[hidden] { display: none; }
.elle-kol { display: flex; justify-content: center; text-align: center; align-items: center; margin-top: 0; min-height: 54px; padding: 0 22px; background: var(--koyu); color: #fff; border: 2px solid var(--koyu); border-radius: 2px; cursor: pointer; font: 700 1rem/1.2 var(--baslik-yazi); letter-spacing: .06em; text-transform: uppercase; transition: background .2s; user-select: none; }
.elle-kol:hover { background: var(--celik); }
.elle-kapat { display: none; }
.elle-giris:checked ~ figcaption .elle-ac { display: none; }
.elle-giris:checked ~ figcaption .elle-kapat { display: inline; }
.elle-giris:checked ~ figcaption .elle-kol { background: var(--kirmizi); border-color: var(--kirmizi); }
.elle-giris:focus-visible ~ figcaption .elle-kol { outline: 3px solid var(--kirmizi); outline-offset: 3px; }
.damper-elle .d-kasa { animation: none; transform: rotate(0); transition: transform 2.6s ease-in-out; }
.damper-elle .d-govde { animation: none; transform: rotate(-12.7deg); transition: transform 2.6s ease-in-out; }
.damper-elle .d-kol-1 { animation: none; transform: rotate(-12.7deg) translateX(0); transition: transform 2.6s ease-in-out; }
.damper-elle .d-kol-2 { animation: none; transform: rotate(-12.7deg) translateX(0); transition: transform 2.6s ease-in-out; }
.damper-elle .d-seviye { animation: none; transform: scaleY(1); transition: transform 2.6s ease-in-out; }
.damper-elle .d-akis { animation: akis .7s linear infinite; opacity: 0; transition: opacity .3s; }
.damper-elle .d-donus { animation: none; opacity: 0; }
.damper-elle .d-disli { animation-play-state: paused; }
.elle-giris:checked ~ .damper-elle .d-kasa { transform: rotate(30deg); }
.elle-giris:checked ~ .damper-elle .d-govde { transform: rotate(-39deg); }
.elle-giris:checked ~ .damper-elle .d-kol-1 { transform: rotate(-39deg) translateX(24px); }
.elle-giris:checked ~ .damper-elle .d-kol-2 { transform: rotate(-39deg) translateX(41.8px); }
.elle-giris:checked ~ .damper-elle .d-seviye { transform: scaleY(.45); }
.elle-giris:checked ~ .damper-elle .d-akis { opacity: 1; }
.elle-giris:checked ~ .damper-elle .d-disli { animation-play-state: running; }
/* kolu bıraktıktan sonra 2,8 sn mavi dönüş akışı (yalnız kutuya dokunulduktan sonra: odak şartı) */
.elle-giris:not(:checked):focus ~ .damper-elle .d-donus { animation: akis .9s linear infinite, elle-don 2.8s ease-in both; }
@keyframes elle-don { 0% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* 🔴 MOBİL OKUNURLUK: SVG metni viewBox ile ölçeklenir (440 br → ~330 px'te ×0,75: 8,5 px yazı 6 px olur, okunmaz).
   Küçük ekranda yazılar büyütülür; ölçüm: 375 px'te en küçük etiket ≥ 8,5 px görünmeli. */
@media (max-width: 560px) {
  .v-yaz, .g-yaz, .d-yazi { font-size: 11.5px; }
  .v-etiket, .t-yaz-b { font-size: 13px; }
  .p-etiket { font-size: 12px; } .p-etiket.p-b { font-size: 17px; }
  .a-baslik { font-size: 14px; }
  .lab-kart figcaption { padding: 4px 14px 16px; }
  .elle-kol { width: 100%; justify-content: center; text-align: center; }
}

/* ---- piston dalgası (bölüm ayracı) ---- */
.piston-dalgasi { display: block; width: 100%; max-height: 56px; margin: 38px 0 0; }
.pd-varil { fill: var(--celik); }
.pd-kol { fill: #b4b9be; transform-box: fill-box; transform-origin: bottom; animation: pd 2.6s ease-in-out infinite; }
@keyframes pd { 0%, 100% { transform: scaleY(.18); fill: #b4b9be; } 50% { transform: scaleY(1); fill: var(--kirmizi); } }

/* ---------------------------------------------------------------- küçük dönen dişli çifti (süs) */
.disli-cifti { vertical-align: middle; margin-left: 10px; }
.disli-cifti .d-disli { stroke: var(--kirmizi); stroke-width: 6; stroke-dasharray: 4.3 4.3; }

@media (prefers-reduced-motion: reduce) {
  .d-kasa { transform: rotate(18deg); animation: none; }
  .d-govde { transform: rotate(-30deg); animation: none; }
  .d-kol-1 { transform: rotate(-30deg) translateX(14px); animation: none; }
  .d-kol-2 { transform: rotate(-30deg) translateX(25px); animation: none; }
  .d-akis, .d-donus { animation: none; opacity: 0; }
  .d-seviye { animation: none; transform: scaleY(.7); }
}