/* arena / lig çerçeveleri: her aşamanın kendine özgü bir tasarımı var (fr1..fr17) */
.frm{position:relative;display:inline-flex;border-radius:50%;flex:none;vertical-align:middle;--sp:6s;--frb:var(--fc)}
.frm::before{content:"";position:absolute;inset:-7%;border-radius:50%;padding:max(2.5px,7%);background:var(--frb);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:2}
.frm::after{content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;z-index:1;box-shadow:var(--frg,none)}
.frm .fx{position:absolute;inset:-13%;border-radius:50%;pointer-events:none;z-index:3;display:none}
.frm .fx::before,.frm .fx::after{content:"";position:absolute;border-radius:50%}
.frm .fx.a.on,.frm .fx.b.on{display:block}
/* yörüngede dönen noktalar */
.frm .fx.orb{display:block;animation:frmSpin var(--sp) linear infinite}
.frm .fx.orb::before{left:50%;top:0;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;background:var(--dot,#fff);box-shadow:0 0 8px 2px var(--fc)}
.frm .fx.orb2::after{left:50%;bottom:0;width:9%;height:9%;margin:0 0 -4.5% -4.5%;background:var(--dot,#fff);box-shadow:0 0 8px 2px var(--fc)}
.frm .fx.rev{animation-direction:reverse}
@keyframes frmSpin{to{transform:rotate(360deg)}}
@keyframes frmPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes frmBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes frmFlick{0%,100%{opacity:1;transform:scale(1)}20%{opacity:.7;transform:scale(.98)}40%{opacity:1;transform:scale(1.03)}60%{opacity:.8}80%{opacity:1;transform:scale(1.01)}}
@keyframes frmFlash{0%,86%,100%{filter:none}88%,94%{filter:brightness(2.4) saturate(0)}91%{filter:brightness(.4)}}
@keyframes frmGlitch{0%,90%,100%{transform:translate(0)}92%{transform:translate(3%,-2%)}94%{transform:translate(-3%,2%)}96%{transform:translate(2%,1%)}}
@keyframes frmHue{to{filter:hue-rotate(360deg)}}
.frm.spin::before{animation:frmSpin var(--sp) linear infinite}

/* 1 Kum Havuzu: kum taneli altın halka, yavaşça dolanan güneş */
.fr1{--frb:repeating-conic-gradient(var(--fc) 0 10deg,color-mix(in srgb,var(--fc) 30%,#fff) 10deg 16deg);--frg:0 0 12px color-mix(in srgb,var(--fc) 60%,transparent);--sp:14s;--dot:#fff3a8}
.fr1 .fx.a{display:block;animation:frmSpin var(--sp) linear infinite}
.fr1 .fx.a::before{left:50%;top:0;width:13%;height:13%;margin:-6.5% 0 0 -6.5%;background:radial-gradient(#fffbe0,#ffd45a);box-shadow:0 0 10px 3px #ffd45a}
/* 2 Tozlu Sunucu Odası: metal çerçeve, yanıp sönen LED'ler */
.fr2{--frb:linear-gradient(135deg,#e4e8f5,#6b7290 45%,#c9cfe3 70%,#59607a);--frg:0 0 8px rgba(160,170,210,.55)}
.fr2 .fx.a,.fr2 .fx.b{display:block}
.fr2 .fx.a::before{right:6%;top:12%;width:8%;height:8%;background:#4cff8a;box-shadow:0 0 8px 2px #4cff8a;animation:frmBlink 1.3s steps(1) infinite}
.fr2 .fx.b::before{left:6%;bottom:12%;width:8%;height:8%;background:#ffb347;box-shadow:0 0 8px 2px #ffb347;animation:frmBlink 1.9s steps(1) infinite .4s}
.fr2 .fx.b::after{left:2%;bottom:30%;width:6%;height:6%;background:#ff5d5d;box-shadow:0 0 8px 2px #ff5d5d;animation:frmBlink 1.1s steps(1) infinite .7s}
/* 3 Yerel Ağ: kopuk halka, dönen ağ düğümleri */
.fr3{--frb:conic-gradient(var(--fc) 0 80deg,transparent 80deg 100deg,var(--fc) 100deg 200deg,transparent 200deg 220deg,var(--fc) 220deg 320deg,transparent 320deg 340deg,var(--fc) 340deg);--frg:0 0 10px color-mix(in srgb,var(--fc) 55%,transparent);--sp:9s}
.fr3::before{animation:frmSpin 9s linear infinite reverse}
.fr3 .fx.a{display:block;animation:frmSpin 9s linear infinite}
.fr3 .fx.a::before{left:50%;top:0;width:11%;height:11%;margin:-5.5% 0 0 -5.5%;background:#fff;box-shadow:0 0 8px 2px var(--fc)}
.fr3 .fx.a::after{left:50%;bottom:0;width:11%;height:11%;margin:0 0 -5.5% -5.5%;background:#fff;box-shadow:0 0 8px 2px var(--fc)}
/* 4 Yeraltı Karantina: tehlike şeridi halka */
.fr4{--frb:repeating-conic-gradient(#ffd400 0 12deg,#16231a 12deg 24deg);--frg:0 0 12px color-mix(in srgb,var(--fc) 70%,transparent);--sp:10s}
.fr4::before{animation:frmSpin 10s linear infinite}
.fr4::after{animation:frmPulse 1.6s ease-in-out infinite}
/* 5 Anakart Labirenti: devre halkası, hızlı akan ışık */
.fr5{--frb:repeating-conic-gradient(var(--fc) 0 18deg,transparent 18deg 26deg);--frg:0 0 10px color-mix(in srgb,var(--fc) 65%,transparent);--sp:2.6s;--dot:#e8fffb}
.fr5 .fx.a{display:block;animation:frmSpin var(--sp) linear infinite}
.fr5 .fx.a::before{left:50%;top:0;width:10%;height:10%;margin:-5% 0 0 -5%;background:#e8fffb;box-shadow:0 0 10px 3px var(--fc)}
/* 6 Güvenlik Duvarı: alevli duvar */
.fr6{--frb:conic-gradient(var(--fc),#ffd36b,#ff4a14,var(--fc),#ffd36b,#ff4a14,var(--fc));--frg:0 0 10px #ff7a2a,0 0 20px rgba(255,90,20,.55)}
.fr6::after{animation:frmFlick .9s ease-in-out infinite}
.fr6::before{animation:frmSpin 7s linear infinite}
/* 7 Arka Kapı: açılan kapı, kuyruklu yay */
.fr7{--frb:conic-gradient(from 0deg,transparent,var(--fc) 70%,#fff 100%);--frg:0 0 12px color-mix(in srgb,var(--fc) 70%,transparent);--sp:2.8s}
.fr7::before{animation:frmSpin 2.8s linear infinite}
.fr7::after{animation:frmPulse 2.8s ease-in-out infinite}
/* 8 Botnet Fırtınası: şimşek çakan kızıl halka */
.fr8{--frb:conic-gradient(var(--fc),#ff9d8f,var(--fc),#7a0f10,var(--fc));--frg:0 0 12px var(--fc),0 0 24px rgba(255,40,40,.5)}
.fr8::before{animation:frmSpin 3.4s linear infinite,frmFlash 3.2s linear infinite}
.fr8 .fx.a,.fr8 .fx.b{display:block}
.fr8 .fx.a::before{right:2%;top:10%;width:7%;height:7%;background:#fff;box-shadow:0 0 10px 3px #ff6a6a;animation:frmBlink .9s steps(1) infinite}
.fr8 .fx.b::before{left:4%;bottom:12%;width:6%;height:6%;background:#fff;box-shadow:0 0 10px 3px #ff6a6a;animation:frmBlink 1.4s steps(1) infinite .5s}
/* 9 Kripto Tüneli: ters yönde dönen çift halka */
.fr9{--frb:conic-gradient(var(--fc),#7df3ff,var(--fc),#ffffff,var(--fc));--frg:0 0 12px color-mix(in srgb,var(--fc) 60%,transparent)}
.fr9::before{animation:frmSpin 6s linear infinite}
.fr9 .fx.a{display:block;inset:-20%;border:max(1.5px,2.2%) dashed color-mix(in srgb,var(--fc) 85%,#7df3ff);animation:frmSpin 12s linear infinite reverse;opacity:.9}
/* 10 Sıfırıncı Gün: bozulma (glitch) efekti */
.fr10{--frb:conic-gradient(#fff,#0f1224,#fff,#0f1224,#fff);--frg:3px 0 0 rgba(0,255,240,.85),-3px 0 0 rgba(255,0,110,.85)}
.fr10::before{animation:frmSpin 4s linear infinite}
.fr10::after{animation:frmGlitch 2.4s steps(1) infinite}
.fr10 .fx.a{display:block;inset:-8%;border:max(1px,1.5%) solid rgba(0,255,240,.7);animation:frmGlitch 2.4s steps(1) infinite .12s}
/* ligler: parlayan metal halkalar */
.fr11{--frb:conic-gradient(#f6c293,#7a3f14,#f6c293,#7a3f14,#f6c293);--frg:0 0 12px rgba(205,127,50,.7);--sp:8s}
.fr11::before{animation:frmSpin 8s linear infinite}
.fr12{--frb:conic-gradient(#fff,#8c97ad,#fff,#8c97ad,#fff);--frg:0 0 14px rgba(200,210,235,.75);--sp:7s}
.fr12::before{animation:frmSpin 7s linear infinite}
.fr12 .fx.a{display:block;animation:frmSpin 7s linear infinite}
.fr12 .fx.a::before{left:50%;top:0;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;background:#fff;box-shadow:0 0 8px 2px #cfd8ee}
.fr13{--frb:conic-gradient(#fff3b0,#c9971a,#fff3b0,#c9971a,#fff3b0);--frg:0 0 14px rgba(255,200,40,.8);--sp:6s}
.fr13::before{animation:frmSpin 6s linear infinite}
.fr13 .fx.a{display:block;animation:frmSpin 6s linear infinite}
.fr13 .fx.a::before{left:50%;top:0;width:10%;height:10%;margin:-5% 0 0 -5%;background:#fff6c0;box-shadow:0 0 10px 3px #ffc828}
.fr13 .fx.a::after{left:50%;bottom:0;width:10%;height:10%;margin:0 0 -5% -5%;background:#fff6c0;box-shadow:0 0 10px 3px #ffc828}
.fr14{--frb:conic-gradient(#eafcff,#3573e0,#7fe0ff,#3573e0,#eafcff);--frg:0 0 14px rgba(90,160,255,.85);--sp:5s}
.fr14::before{animation:frmSpin 5s linear infinite}
.fr14 .fx.a{display:block;animation:frmSpin 5s linear infinite}
.fr14 .fx.a::before{left:50%;top:0;width:10%;height:10%;margin:-5% 0 0 -5%;background:#fff;box-shadow:0 0 10px 3px #7fe0ff}
.fr14 .fx.b{display:block;animation:frmSpin 8s linear infinite reverse}
.fr14 .fx.b::before{left:50%;top:0;width:7%;height:7%;margin:-3.5% 0 0 -3.5%;background:#b6ecff;box-shadow:0 0 8px 2px #3573e0}
.fr15{--frb:conic-gradient(#ff5d5d,#ffd34d,#5dff8a,#4dd9ff,#7a5dff,#ff5dd0,#ff5d5d);--frg:0 0 14px rgba(255,255,255,.55);--sp:4s}
.fr15::before{animation:frmSpin 4s linear infinite,frmHue 6s linear infinite}
.fr16{--frb:conic-gradient(#ff5d5d,#ffd34d,#5dff8a,#4dd9ff,#7a5dff,#ff5dd0,#ff5d5d);--frg:0 0 16px rgba(255,255,255,.7),0 0 30px rgba(140,120,255,.55);--sp:3.4s}
.fr16::before{animation:frmSpin 3.4s linear infinite,frmHue 5s linear infinite}
.fr16::after{animation:frmPulse 2s ease-in-out infinite}
.fr16 .fx.a{display:block;animation:frmSpin 3.4s linear infinite}
.fr16 .fx.a::before{left:50%;top:0;width:10%;height:10%;margin:-5% 0 0 -5%;background:#fff;box-shadow:0 0 10px 3px #fff}
.fr16 .fx.a::after{left:50%;bottom:0;width:10%;height:10%;margin:0 0 -5% -5%;background:#fff;box-shadow:0 0 10px 3px #fff}
/* 17 en üst: taçlı efsane */
.fr17{--frb:conic-gradient(#fff6c0,#ffb800,#fff,#ff7ad9,#7ad9ff,#fff6c0);--frg:0 0 16px #ffd34d,0 0 34px rgba(255,170,0,.65);--sp:3s}
.fr17::before{animation:frmSpin 3s linear infinite,frmHue 4s linear infinite}
.fr17::after{animation:frmPulse 1.8s ease-in-out infinite}
.fr17 .fx.a{display:block;animation:frmSpin 3s linear infinite}
.fr17 .fx.a::before{left:50%;top:0;width:11%;height:11%;margin:-5.5% 0 0 -5.5%;background:#fff;box-shadow:0 0 10px 3px #ffd34d}
.fr17 .fx.a::after{left:50%;bottom:0;width:11%;height:11%;margin:0 0 -5.5% -5.5%;background:#fff;box-shadow:0 0 10px 3px #ffd34d}
.fr17 .fx.b{display:block;inset:-13%;border-radius:0}
.fr17 .fx.b::before{left:50%;top:-18%;width:46%;height:30%;margin:0;border-radius:0;transform:translateX(-50%);background:linear-gradient(#fff0a0,#ffb800 55%,#d97a00);clip-path:polygon(0 100%,0 28%,24% 62%,50% 0,76% 62%,100% 28%,100% 100%);filter:drop-shadow(0 0 5px #ffd34d)}
@media (prefers-reduced-motion:reduce){.frm,.frm::before,.frm::after,.frm .fx{animation:none!important}}