/* --e = hareket eğrisi token'ı --nx-ease (aynı değer, cubic-bezier(.2,0,0,1)) — Tur C taban-10, merdiven (2 Eki 2026) */
:root{--nx-accent:var(--nx-accent-on, currentColor);--e:var(--nx-ease)}
.nx-ico *{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.nx-ico,.nx-ico *{animation:none!important;transition:none!important}}
.i-hamburger.play .top{animation:hamTop 3s var(--e) infinite}
.i-hamburger.play .mid{animation:hamMid 3s var(--e) infinite}
.i-hamburger.play .bot{animation:hamBot 3s var(--e) infinite}
@keyframes hamTop{0%,25%{transform:none}45%,80%{transform:translateY(4px) rotate(45deg)}100%{transform:none}}
@keyframes hamBot{0%,25%{transform:none}45%,80%{transform:translateY(-4px) rotate(-45deg)}100%{transform:none}}
@keyframes hamMid{0%,25%,95%,100%{opacity:1}45%,80%{opacity:0}}
.i-sidebar.play .bolme{animation:sbBolme 3s var(--e) infinite}
@keyframes sbBolme{0%,20%{transform:none}45%,75%{transform:translateX(3px)}100%{transform:none}}
.i-close.play svg{animation:pop 3s var(--e) infinite}
.i-check .draw{stroke-dasharray:22;stroke-dashoffset:0}
.i-check.play .draw{animation:draw 3s var(--e) infinite}
.i-check.play svg{color:var(--nx-accent)}
@keyframes draw{0%{stroke-dashoffset:22}35%,100%{stroke-dashoffset:0}}
.i-trash .lid{transform-origin:5px 7px}
.i-trash.play .lid{animation:lid 3s var(--e) infinite}
@keyframes lid{0%,20%{transform:none}35%,55%{transform:rotate(-18deg) translateY(-1px)}70%,100%{transform:none}}
.i-kebab.play .d1{animation:dot 2.4s var(--e) infinite}
.i-kebab.play .d2{animation:dot 2.4s var(--e) .1s infinite}
.i-kebab.play .d3{animation:dot 2.4s var(--e) .2s infinite}
@keyframes dot{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.35)}}
.i-meatballs.play .d1{animation:dot 2.4s var(--e) infinite}
.i-meatballs.play .d2{animation:dot 2.4s var(--e) .1s infinite}
.i-meatballs.play .d3{animation:dot 2.4s var(--e) .2s infinite}
.i-bell .bell{transform-origin:50% 0}
.i-bell.play .bell{animation:ring 3s var(--e) infinite}
@keyframes ring{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}82%{transform:rotate(-11deg)}89%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}
.i-star.play svg{animation:starpop 3s var(--e) infinite}
.i-star.play .star{animation:starfill 3s var(--e) infinite}
@keyframes starpop{0%,55%,100%{transform:scale(1)}30%{transform:scale(1.28)}}
@keyframes starfill{0%,55%,100%{fill:transparent;stroke:currentColor}30%,54%{fill:var(--nx-accent);stroke:var(--nx-accent)}}
.i-bookmark.play .bm{animation:bmfill 3s var(--e) infinite}
@keyframes bmfill{0%,55%,100%{fill:transparent}30%,54%{fill:var(--nx-accent);stroke:var(--nx-accent)}}
/* CHEVRON — L-117 A (Tur C taban-10, 2 Eki 2026): hareket DÖNÜŞ değil, KENDİ YÖNÜNDE
   3 px DÜRTME — şirket kalıbı birebir (ikon-animasyon-sirket.css, 10 Eyl). Eskiden
   sağ ok çeyrek tur dönüp bir an aşağıyı gösteriyordu. Jest ve miktar ok ailesiyle
   (`aleft`/`aright`) aynı. */
.i-chevron.play svg{animation:chev 3s var(--e) infinite}
@keyframes chev{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(3px)}}
.i-chevron-down.play svg{animation:chevDown 3s var(--e) infinite}
@keyframes chevDown{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(3px)}}
/* BAĞLAM YÖNÜ — L-117 metni (Efe, 2 Eki): ok, açtığı şeyin geldiği yere dürtülür.
   Sayfa sağdan gelir ⇒ sağa (varsayılan, okun kendi yönü); aşağıda açılan liste ⇒
   aşağı (chevron-down zaten öyle). Sağa bakan ok alttan açılan çekmeceyi ya da
   aşağıdaki bölümü açıyorsa kap `data-acilis="asagi"` taşır ⇒ ok aşağı dürtülür. */
[data-acilis="asagi"] :is(.i-chevron, .i-arrow-right).play svg{animation-name:chevDown}
.i-plus .l1,.i-plus .l2{transform-origin:center}
.i-plus.play .l1{animation:plusV 2.8s var(--e) infinite}
.i-plus.play .l2{animation:plusH 2.8s var(--e) infinite}
@keyframes plusV{0%,100%{transform:scaleY(0)}30%,75%{transform:scaleY(1)}}
@keyframes plusH{0%,100%{transform:scaleX(0)}30%,75%{transform:scaleX(1)}}
.i-search.play svg{animation:nudge 3s var(--e) infinite}
@keyframes nudge{0%,60%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}40%{transform:rotate(8deg)}}
.i-spinner svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.i-match .mx-left,.i-match .mx-right{transform-origin:center}
.i-match.play .mx-left{animation:mLeft 2.8s var(--e) infinite}
.i-match.play .mx-right{animation:mRight 2.8s var(--e) infinite}
@keyframes mLeft{0%{transform:translateX(-18px);opacity:0}25%{opacity:1}70%{transform:translateX(1px)}100%{transform:translateX(0)}}
@keyframes mRight{0%{transform:translateX(18px);opacity:0}25%{opacity:1}70%{transform:translateX(-1px)}100%{transform:translateX(0)}}
.i-video .play{transform-origin:center}
.i-video.play .play{animation:vplay 2.6s var(--e) infinite}
@keyframes vplay{0%,55%,100%{transform:translateX(0);fill:currentColor}20%,42%{transform:translateX(2.4px);fill:var(--nx-accent)}}
.i-home.play svg{animation:homepop 3s var(--e) infinite}
@keyframes homepop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
.i-arrow-left.play svg{animation:aleft 3s var(--e) infinite}
@keyframes aleft{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}}
.i-arrow-right.play svg{animation:aright 3s var(--e) infinite}
@keyframes aright{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(3px)}}
.i-filter.play svg{transform-origin:50% 14%;animation:filt 2.8s var(--e) infinite}
@keyframes filt{0%,60%,100%{transform:scaleY(1)}30%{transform:scaleY(.82)}}
.i-sort.play .a1{animation:sortUp 3s var(--e) infinite}
.i-sort.play .a2{animation:sortDn 3s var(--e) infinite}
@keyframes sortUp{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-2px)}}
@keyframes sortDn{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(2px)}}
.i-edit .pen{transform-origin:4px 20px}
.i-edit.play .pen{animation:penwrite 2.8s var(--e) infinite}
@keyframes penwrite{0%,100%{transform:translate(0,0)}25%{transform:translate(1.5px,-1.5px)}55%{transform:translate(-1px,1px)}}
.i-download .arw{transform-origin:12px 4px}
.i-download.play .arw{animation:dlbounce 2.4s var(--e) infinite}
@keyframes dlbounce{0%,60%,100%{transform:translateY(0);stroke:currentColor}20%{transform:translateY(-2px)}42%{transform:translateY(2px);stroke:var(--nx-accent)}}
.i-upload .arw{transform-origin:12px 20px}
.i-upload.play .arw{animation:ulbounce 2.4s var(--e) infinite}
@keyframes ulbounce{0%,60%,100%{transform:translateY(0);stroke:currentColor}20%{transform:translateY(2px)}42%{transform:translateY(-2px);stroke:var(--nx-accent)}}
.i-share .n2,.i-share .n3{transform-origin:center}
.i-share.play .n2{animation:sharepop 2.6s var(--e) infinite}
.i-share.play .n3{animation:sharepop 2.6s var(--e) .18s infinite}
@keyframes sharepop{0%,55%,100%{transform:scale(1)}28%{transform:scale(1.4)}}
.i-copy .back{transform-origin:center}
.i-copy.play .back{animation:copypop 2.8s var(--e) infinite}
@keyframes copypop{0%,60%,100%{transform:translate(0,0);stroke:currentColor}30%{transform:translate(1.5px,1.5px);stroke:var(--nx-accent)}}
.i-link.play .lka{animation:linkA 2.8s var(--e) infinite}
.i-link.play .lkb{animation:linkB 2.8s var(--e) infinite}
@keyframes linkA{0%,100%{transform:translate(0,0)}35%,60%{transform:translate(-1.1px,1.1px)}}
@keyframes linkB{0%,100%{transform:translate(0,0)}35%,60%{transform:translate(1.1px,-1.1px)}}
.i-refresh.play svg{animation:spin 1.2s var(--e) infinite}
.i-refresh.play .ring{animation:refreshlime 1.2s linear infinite}
@keyframes refreshlime{0%,72%,100%{stroke:currentColor}86%{stroke:var(--nx-accent)}}
.i-alert.play svg{animation:alertpop 2s var(--e) infinite}
@keyframes alertpop{0%,60%,100%{transform:scale(1)}25%{transform:scale(1.14)}}
.i-info.play svg{animation:nudge 3s var(--e) infinite}
.i-eye .eclosed{opacity:0}
.i-eye.play .eopen{animation:eOpen 3.4s var(--e) infinite}
.i-eye.play .eclosed{animation:eClosed 3.4s var(--e) infinite}
@keyframes eOpen{0%,40%,60%,100%{opacity:1}47%,53%{opacity:0}}
@keyframes eClosed{0%,40%,60%,100%{opacity:0}47%,53%{opacity:1}}
.i-eye-off .slash{stroke-dasharray:24}
.i-eye-off.play .slash{animation:blinkdraw 2.6s var(--e) infinite}
@keyframes blinkdraw{0%{stroke-dashoffset:24}35%,65%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
.i-lock .shackle{transform-origin:100% 100%}
.i-lock.play .shackle{animation:lockopen 3.4s var(--e) infinite}
.i-lock.play .keyhole{animation:lockkey 3.4s var(--e) infinite}
@keyframes lockopen{0%,22%,100%{transform:rotate(0);stroke:currentColor}48%,74%{transform:rotate(40deg);stroke:var(--nx-accent)}}
@keyframes lockkey{0%,22%,100%{fill:currentColor}48%,74%{fill:var(--nx-accent)}}
.i-mail .flap{transform-origin:50% 0}
.i-mail.play .flap{animation:mailflap 3s var(--e) infinite}
.i-mail .pocket{stroke-dasharray:12}
.i-mail.play .pocket{animation:mailpocket 3s var(--e) infinite}
@keyframes mailflap{0%,60%,100%{transform:scaleY(1)}30%{transform:scaleY(.82)}}
@keyframes mailpocket{0%{stroke-dashoffset:12}32%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}
.i-message .d1,.i-message .d2,.i-message .d3{fill:var(--nx-accent, currentColor)}
.i-message.play .d1{animation:dot 2.4s var(--e) infinite}
.i-message.play .d2{animation:dot 2.4s var(--e) .1s infinite}
.i-message.play .d3{animation:dot 2.4s var(--e) .2s infinite}
.i-send .plane{transform-origin:center}
.i-send.play .plane{animation:sendfly 2.6s var(--e) infinite}
@keyframes sendfly{0%{transform:translate(0,0);opacity:1;stroke:currentColor}30%{stroke:var(--nx-accent)}45%{transform:translate(6px,-6px);opacity:0;stroke:var(--nx-accent)}46%{transform:translate(-4px,4px);opacity:0;stroke:currentColor}100%{transform:translate(0,0);opacity:1;stroke:currentColor}}
.i-heart.play svg{animation:starpop 3s var(--e) infinite}
.i-heart.play .hrt{animation:heartfill 3s var(--e) infinite}
@keyframes heartfill{0%,55%,100%{fill:transparent;stroke:currentColor}30%,54%{fill:var(--nx-accent);stroke:var(--nx-accent)}}
.i-camera .lens{transform-origin:center}
.i-camera.play .lens{animation:camflash 2.8s var(--e) infinite}
@keyframes camflash{0%,60%,100%{stroke:currentColor;transform:scale(1)}30%{stroke:var(--nx-accent);transform:scale(1.12)}}
.i-mic.play svg{animation:micpop 2.4s var(--e) infinite}
@keyframes micpop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
.i-user.play svg{animation:userpop 3s var(--e) infinite}
@keyframes userpop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.12)}}
.i-settings .gear{transform-origin:center}
.i-settings.play .gear{animation:spinSlow 4s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.i-calendar .cal-check{stroke-dasharray:12}
.i-calendar.play .cal-check{animation:caldraw 3s var(--e) infinite}
@keyframes caldraw{0%{stroke-dashoffset:12}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}
.i-clock .min,.i-clock .hour{transform-box:view-box;transform-origin:12px 12px}
.i-clock.play .min{animation:spin 4s linear infinite}
.i-clock.play .hour{animation:spin 12s linear infinite}
.i-location.play svg{animation:locdrop 2.8s var(--e) infinite}
@keyframes locdrop{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}55%{transform:translateY(0)}70%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}
.i-shield .nx-accent{stroke-dasharray:12}
.i-shield.play .nx-accent{animation:draw12 3s var(--e) infinite}
@keyframes draw12{0%{stroke-dashoffset:12}40%,100%{stroke-dashoffset:0}}
.i-trophy.play svg{animation:trophypop 3s var(--e) infinite}
@keyframes trophypop{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-1.5px) scale(1.12);color:var(--nx-accent)}}
.i-medal .p{transform-origin:center}
.i-medal.play svg{animation:medalpop 3s var(--e) infinite}
@keyframes medalpop{0%,60%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-5deg) scale(1.08)}42%{transform:rotate(4deg) scale(1.08)}}
.i-badge .draw{stroke-dasharray:12}
.i-badge.play .draw{animation:draw12 3s var(--e) infinite}
@keyframes draw12{0%{stroke-dashoffset:12}40%,100%{stroke-dashoffset:0}}
.i-target .r1,.i-target .r2{transform-origin:center}
.i-target.play .r1{animation:tgtpulse 2.6s var(--e) infinite}
.i-target.play .r2{animation:tgtpulse 2.6s var(--e) .15s infinite}
@keyframes tgtpulse{0%,60%,100%{transform:scale(1);opacity:1}30%{transform:scale(1.08);opacity:.85}}
.i-flame .inner{transform-origin:50% 100%}
.i-flame.play .inner{animation:flick 1.4s var(--e) infinite}
.i-flame.play .p{animation:flick2 1.6s var(--e) infinite}
@keyframes flick{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.15) scaleX(.9)}}
@keyframes flick2{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
.i-gift .lid{transform-origin:50% 100%}
.i-gift.play .lid{animation:giftlid 3s var(--e) infinite}
.i-gift.play .nx-accent{animation:giftbow 3s var(--e) infinite}
@keyframes giftlid{0%,55%,100%{transform:translateY(0)}30%{transform:translateY(-2px)}}
@keyframes giftbow{0%,55%,100%{transform:scale(1)}30%{transform:scale(1.15)}}
.i-flag .wave{transform-origin:6px 4.5px}
.i-flag.play .wave{animation:flagwave 2.6s var(--e) infinite}
@keyframes flagwave{0%,100%{transform:skewY(0)}30%{transform:skewY(-4deg)}60%{transform:skewY(3deg)}}
.i-crown.play svg{animation:crownpop 3s var(--e) infinite}
@keyframes crownpop{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-1.5px) scale(1.1)}}
.i-thumbs-up .thumb{transform-origin:8px 12px}
.i-thumbs-up.play svg{animation:thumbpop 3s var(--e) infinite}
.i-thumbs-up.play svg{color:currentColor}
@keyframes thumbpop{0%,60%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-8deg) scale(1.1)}}
.i-trend-up .draw{stroke-dasharray:26}
.i-trend-up.play .draw{animation:trenddraw 3s var(--e) infinite}
.i-trend-up.play .head{animation:trendhead 3s var(--e) infinite}
@keyframes trenddraw{0%{stroke-dashoffset:26}45%,100%{stroke-dashoffset:0}}
@keyframes trendhead{0%,40%{opacity:0}55%,100%{opacity:1}}
.i-notebook.play svg{animation:nudge 3s var(--e) infinite}
.i-checklist .t1,.i-checklist .t2{stroke-dasharray:6}
.i-checklist.play .t1{animation:cldraw 3s var(--e) infinite}
.i-checklist.play .t2{animation:cldraw 3s var(--e) .35s infinite}
@keyframes cldraw{0%{stroke-dashoffset:6}30%,100%{stroke-dashoffset:0}}
.i-tag .tg{transform-origin:6px 6px}
.i-tag.play .tg{animation:tagswing 3s var(--e) infinite}
@keyframes tagswing{0%,60%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}42%{transform:rotate(5deg)}}
.i-pin.play svg{animation:pindrop 2.8s var(--e) infinite}
@keyframes pindrop{0%{transform:translateY(-5px) rotate(-8deg);opacity:0}25%{opacity:1}55%{transform:translateY(0) rotate(0)}70%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}
.i-archive .lid{transform-origin:center}
.i-archive.play .lid{animation:archlid 3s var(--e) infinite}
@keyframes archlid{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-1.5px)}}
.i-graduation-cap .tassel,.i-graduation-cap circle{transform-origin:21px 9px}
.i-graduation-cap.play .tassel,.i-graduation-cap.play circle{animation:tassel 3s var(--e) infinite}
@keyframes tassel{0%,60%,100%{transform:rotate(0)}25%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}}
.i-book .bm{transform-origin:50% 0}
.i-book.play .bm{animation:bmbob 3s var(--e) infinite}
@keyframes bmbob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(1.6px)}}
.i-diploma .p, .i-diploma circle{transform-origin:center}
.i-diploma.play svg{animation:dippop 3s var(--e) infinite}
@keyframes dippop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.06)}}
.i-briefcase .lock{transform-origin:center}
.i-briefcase.play .lock{animation:bagpop 3s var(--e) infinite}
@keyframes bagpop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.28)}}
.i-wallet .p:nth-of-type(2){transform-origin:100% 50%}
.i-wallet.play .p:nth-of-type(2){animation:walletcard 3s var(--e) infinite}
@keyframes walletcard{0%,55%,100%{transform:translateX(0)}30%{transform:translateX(-1.5px)}}
.i-receipt.play svg{animation:nudge 3s var(--e) infinite}
.i-cloud .cl{transform-origin:center}
.i-cloud.play .cl{animation:clouddrift 3.4s ease-in-out infinite}
@keyframes clouddrift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
.i-wifi.play .b1{animation:wifibar 2.4s var(--e) infinite}
.i-wifi.play .b2{animation:wifibar 2.4s var(--e) .18s infinite}
.i-wifi.play .b3{animation:wifibar 2.4s var(--e) .36s infinite}
@keyframes wifibar{0%,70%,100%{opacity:.35}20%,50%{opacity:1}}
.i-battery .fill{transform-origin:0% 50%}
.i-battery.play .fill{animation:batfill 3s var(--e) infinite}
@keyframes batfill{0%{transform:scaleX(.15)}45%,100%{transform:scaleX(1)}}
.i-building.play svg{animation:bldpop 3s var(--e) infinite}
@keyframes bldpop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.05)}}
.i-university.play svg{animation:unipop 3s var(--e) infinite}
@keyframes unipop{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.05)}}
.i-venue.play .ofis{animation:venueOfis 3s var(--e) infinite}
.i-venue.play .ev{animation:venueEv 3s var(--e) infinite}
.i-venue.play .cati{animation:venueEv 3s var(--e) infinite}
@keyframes venueOfis{0%,18%,42%,100%{transform:translateY(0)}30%{transform:translateY(-1.6px)}}
@keyframes venueEv{0%,48%,72%,100%{transform:translateY(0)}60%{transform:translateY(-1.6px)}}
.i-mask .m{transform-origin:center}
.i-mask.play .m{animation:maskpeek 3s var(--e) infinite}
@keyframes maskpeek{0%,60%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}45%{transform:translateX(1.5px)}}
.i-interview .bub{transform-origin:center}
.i-interview.play .bub{animation:bmbob 3s var(--e) infinite}
.i-interview.play .play{animation:vplay 3s var(--e) infinite}
.i-apply .arw{transform-origin:center}
.i-apply.play .arw{animation:applyfly 2.8s var(--e) infinite}
@keyframes applyfly{0%{transform:translate(0,0);opacity:1}45%{transform:translate(6px,-6px);opacity:0}46%{transform:translate(-4px,4px);opacity:0}100%{transform:translate(0,0);opacity:1}}
.i-pipeline .c1,.i-pipeline .c2,.i-pipeline .c3{transform-origin:50% 100%}
.i-pipeline.play .c1{animation:pipecol 3s var(--e) infinite}
.i-pipeline.play .c2{animation:pipecol 3s var(--e) .15s infinite}
.i-pipeline.play .c3{animation:pipecol 3s var(--e) .3s infinite}
@keyframes pipecol{0%,60%,100%{transform:scaleY(1)}30%{transform:scaleY(1.12)}}
.i-reference-seal .tick{stroke-dasharray:11}
.i-reference-seal.play .tick{animation:refdraw 3s var(--e) infinite}
.i-reference-seal.play svg{animation:refbob 3s var(--e) infinite}
@keyframes refdraw{0%,22%{stroke-dashoffset:11}38%,100%{stroke-dashoffset:0}}
@keyframes refbob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-1.6px)}}
.i-record .rec{transform-origin:center}
.i-record.play .rec{animation:recpulse 1.8s var(--e) infinite}
@keyframes recpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.6}}
.i-sync.play svg{animation:spin 1.6s linear infinite;transform-origin:center}
.i-library .bk{transform-origin:50% 100%}
.i-library.play .bk{animation:libtip 3s var(--e) infinite}
@keyframes libtip{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}}
.i-kanban .card{transform-origin:0% 50%}
.i-kanban.play .card{animation:kancard 3s var(--e) infinite}
@keyframes kancard{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(2px)}}
.i-folder .body{transform-origin:50% 100%}
.i-folder.play .body{animation:foldopen 3s var(--e) infinite}
@keyframes foldopen{0%,60%,100%{transform:scaleY(1)}30%{transform:scaleY(1.06)}}
.i-file.play svg{animation:nudge 3s var(--e) infinite}
.i-image .mtn{transform-origin:50% 100%}
.i-image.play .mtn{animation:imgrise 3s var(--e) infinite}
@keyframes imgrise{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-1.2px)}}
.i-paperclip .clip{transform-origin:center}
.i-paperclip.play .clip{animation:clipswing 3s var(--e) infinite}
@keyframes clipswing{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}}
.i-play .tri{transform-origin:center}
.i-play.play .tri{animation:vplay 2.6s var(--e) infinite}
.i-pause .b1,.i-pause .b2{transform-origin:center}
.i-pause.play .b1{animation:pausebar 2.6s var(--e) infinite}
.i-pause.play .b2{animation:pausebar 2.6s var(--e) .12s infinite}
@keyframes pausebar{0%,60%,100%{transform:scaleY(1)}30%{transform:scaleY(.82)}}

.i-comment.play .d1{animation:dot 2.4s var(--e) infinite}
.i-comment.play .d2{animation:dot 2.4s var(--e) .1s infinite}
.i-comment.play .d3{animation:dot 2.4s var(--e) .2s infinite}
.i-help .q,.i-help .dot{transform-origin:12px 12px}
.i-help.play .q{animation:qbob 3s var(--e) infinite}
.i-help.play .dot{animation:qbob 3s var(--e) infinite}
@keyframes qbob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-1.4px)}}
.i-block .bar{stroke-dasharray:12}
.i-block.play .bar{animation:blockdraw 3s var(--e) infinite}
@keyframes blockdraw{0%{stroke-dashoffset:12}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:12}}
.i-external-link .arw{transform-origin:16px 8px}
.i-external-link.play .arw{animation:extjump 2.8s var(--e) infinite}
@keyframes extjump{0%,60%,100%{transform:translate(0,0)}30%{transform:translate(1.4px,-1.4px)}}

.i-print .paper{transform-origin:50% 0}
.i-print.play .paper{animation:printout 3s var(--e) infinite}
@keyframes printout{0%,55%,100%{transform:scaleY(1)}25%{transform:scaleY(.55)}}


/* phone — 97. ikon, 16 Agu 2026. Ayarlar ekrani icin uretildi (Efe: telefon
   satiri icin sette karsilik yoktu; "1. secenek ama animasyon unutma").
   ROUND-TRIP: 0% ve 100% durus haliyle ayni (butunluk katmani kurali, D66).
   Calan telefon hissi -- hafif saga-sola egilme; olcek/konum degismiyor ki
   16px'te titrek gorunmesin. */
.i-phone .ahize{transform-origin:center}
.i-phone.play .ahize{animation:phoneRing 3s var(--e) infinite}
@keyframes phoneRing{0%,55%,100%{transform:rotate(0)}18%{transform:rotate(-9deg)}36%{transform:rotate(9deg)}}