/* Yüzme Şampiyonu 3D */
body.oyunSayfa{background:#06243a;overscroll-behavior:none}
.oAlan{overflow:hidden;touch-action:none}
@media (orientation:landscape) and (max-height:520px){
  .oUst{padding:3px 10px;gap:8px}
  .oIkon{width:32px;height:32px;font-size:15px;border-radius:9px}
  .oBaslik{font-size:15px}
  .oLogo{font-size:14px}
}
:root{--dug:104px;--orta:78px;--altBos:26px}
.yzKap{position:absolute;inset:0;overflow:hidden;background:#06243a;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:Nunito,system-ui,sans-serif;color:#fff}
.onOyun .yzKap{position:absolute;inset:0}
#yzCanvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.yzYukle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font:800 16px Nunito,sans-serif;z-index:1;background:radial-gradient(circle at 50% 40%,#0f5f8f,#06243a)}
.yzYukle i{width:46px;height:46px;border-radius:50%;border:5px solid #ffffff33;border-top-color:#4fd1ff;animation:yzDon .9s linear infinite}
@keyframes yzDon{to{transform:rotate(360deg)}}

/* ---------- üst bilgi */
.yzUst{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;z-index:4;pointer-events:none}
.yzUst>*{pointer-events:auto}
.yzSol{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;min-width:0}
.yzSag{display:flex;gap:6px;flex:0 0 auto}
.yzMenuBtn{display:flex;align-items:center;gap:7px;font:800 15px 'Baloo 2',Nunito,sans-serif;color:#fff;background:linear-gradient(180deg,#3ec5f2,#0d8cc4);border:0;border-radius:13px;padding:5px 12px 5px 10px;cursor:pointer;box-shadow:0 3px 0 #0006,0 6px 16px #0004;white-space:nowrap;height:42px;max-width:200px;overflow:hidden}
.yzMenuBtn b{overflow:hidden;text-overflow:ellipsis}
.yzMenuBtn i{font-style:normal}
.yzMenuBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0006}
.yzStat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:42px;background:rgba(4,22,40,.7);border:1px solid #ffffff26;border-radius:12px;padding:2px 9px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.yzStat small{color:#a9d8ef;font:800 9.5px Nunito,sans-serif;text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
.yzStat b{font:800 18px/1.1 'Baloo 2',Nunito,sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.yzStat.zaman b{color:#ffd23f}
.yzKap.menude .yzStat,.yzKap.menude #yzDur,.yzKap.menude #yzKamera,.yzKap.menude #yzMenu{display:none}
.yzIkon{position:relative;min-width:44px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(4,22,40,.72);border:2px solid #ffffff2e;color:#fff;border-radius:12px;font-size:18px;line-height:1;cursor:pointer;font-family:inherit;padding:0 6px;-webkit-tap-highlight-color:transparent}
.yzIkon small{font:800 9px Nunito,sans-serif;color:#d6ecf7;white-space:nowrap;margin-top:1px}
.yzIkon:active{transform:translateY(2px)}

/* ---------- mini kulvar şeridi */
.yzSerit{position:absolute;top:58px;left:50%;transform:translateX(-50%);width:min(340px,62vw);background:rgba(4,22,40,.62);border:1px solid #ffffff22;border-radius:10px;padding:5px 8px;z-index:3;pointer-events:none}
.yzSerit .s{position:relative;height:6px;margin:2px 0;border-radius:3px;background:linear-gradient(90deg,#ffffff12,#ffffff22)}
.yzSerit .s i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--r,#fff);box-shadow:0 0 0 1.5px #06243a}
.yzSerit .s.ben{background:linear-gradient(90deg,#ffd23f33,#ffd23f55)}
.yzSerit .s.ben i{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;box-shadow:0 0 0 2px #fff,0 0 10px #ffd23f}
.yzSerit .s.hay i{opacity:.55}
.yzSerit .s b{position:absolute;left:-12px;top:-4px;font:800 8px Nunito,sans-serif;color:#9fd3ec}
.yzSerit .duvar{position:absolute;top:2px;bottom:2px;width:1px;background:#ffffff40}

.yzAkis{position:absolute;left:8px;top:58px;z-index:3;display:flex;flex-direction:column;gap:4px;pointer-events:none;max-width:44vw}
.yzAkis div{background:rgba(4,22,40,.78);border-radius:9px;padding:3px 9px;font:800 12px Nunito,sans-serif;animation:yzAkisGel .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes yzAkisGel{from{transform:translateX(-20px);opacity:0}}

/* ---------- barlar */
.yzBarlar{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;gap:7px;z-index:3;pointer-events:none}
.yzBar{display:flex;flex-direction:column;align-items:center;gap:3px}
.yzBar i{font-style:normal;font-size:15px;filter:drop-shadow(0 1px 2px #000a)}
.yzBar span{position:relative;display:block;width:14px;height:min(150px,26vh);border-radius:8px;background:rgba(4,22,40,.72);border:1.5px solid #ffffff40;overflow:hidden}
.yzBar u{position:absolute;left:0;right:0;bottom:0;height:100%;border-radius:6px;background:linear-gradient(0deg,#ff9f1c,#ffe14d);transition:height .12s}
.yzBar.oksijen u{background:linear-gradient(0deg,#1aa3ff,#9be7ff)}
.yzBar.az span{border-color:#ff4b5c;animation:yzAz .6s infinite}
.yzBar.az u{background:linear-gradient(0deg,#ff2d4b,#ff8a80)}
@keyframes yzAz{50%{box-shadow:0 0 0 4px #ff4b5c66}}

/* ---------- mesajlar, sayaç, afiş */
.yzMesaj{position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;z-index:5;pointer-events:none}
.yzMesaj b{font:900 calc(30px * var(--s,1)) / 1.05 'Baloo 2',Nunito,sans-serif;letter-spacing:.5px;color:#fff;text-shadow:0 3px 0 #0008,0 0 16px #000a;animation:yzPop .9s forwards;position:absolute;white-space:nowrap}
.yzMesaj b.muk{color:#7dffb0;font-size:calc(34px * var(--s,1))}
.yzMesaj b.iyi{color:#c9f0ff}
.yzMesaj b.kotu{color:#ff8a80}
.yzMesaj b.altin{color:#ffd23f}
@keyframes yzPop{0%{transform:translateY(10px) scale(.7);opacity:0}15%{transform:translateY(0) scale(1.08);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.yzSayac{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:6;font:900 calc(46px * var(--s,1)) / 1 'Baloo 2',Nunito,sans-serif;color:#fff;text-shadow:0 4px 0 #0009,0 0 26px #0ff8;text-align:center;pointer-events:none;white-space:nowrap}
.yzSayac small{display:block;font:800 15px Nunito,sans-serif;color:#bfeaff;margin-top:6px;text-shadow:0 2px 0 #0008}
.yzSayac.git{color:#7dffb0;animation:yzGit .5s}
.yzSayac.faul{color:#ff5a5a}
@keyframes yzGit{0%{transform:translate(-50%,-50%) scale(1.6)}}
.yzBanner{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:5;padding:6px 18px;border-radius:14px;background:linear-gradient(90deg,#ff5a1f,#ffb02e);font:900 20px 'Baloo 2',Nunito,sans-serif;box-shadow:0 4px 0 #0007,0 0 20px #ff7a1a88;white-space:nowrap;pointer-events:none;animation:yzBan 1.8s forwards}
.yzBanner.mavi{background:linear-gradient(90deg,#1f5fd1,#3ec5f2)}
@keyframes yzBan{0%{transform:translateX(-50%) scale(.6);opacity:0}12%{transform:translateX(-50%) scale(1.1);opacity:1}25%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}

.yzEtiketler{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.yzEtiketler span{position:absolute;transform:translate(-50%,-100%);background:rgba(4,22,40,.72);border:1px solid #ffffff30;border-radius:8px;padding:1px 7px;font:800 11px Nunito,sans-serif;white-space:nowrap;color:#fff}
.yzEtiketler span.ben{background:#ffd23f;color:#3a2a00;border-color:#fff}
.yzEtiketler span.hay{background:rgba(60,200,255,.5)}
.yzEtiketler span em{font-style:normal;color:#ffd23f;margin-right:3px}
.yzEtiketler span.ben em{color:#7a4b00}

/* ---------- antrenör balonu */
.yzKoc{position:absolute;left:10px;right:10px;top:58px;margin:0 auto;max-width:560px;display:flex;align-items:flex-start;gap:9px;z-index:5;pointer-events:none;animation:yzAkisGel .35s}
.yzKocYuz{flex:0 0 54px;width:54px;height:54px;border-radius:50%;box-shadow:0 3px 10px #0007;border:3px solid #fff;overflow:hidden;background:#0e5c8a}
.yzKocYuz svg{display:block;width:100%;height:100%}
.yzBalon{position:relative;flex:1;background:#fff;color:#123;border-radius:14px;padding:7px 12px 8px;box-shadow:0 4px 14px #0006}
.yzBalon:before{content:'';position:absolute;left:-8px;top:16px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.yzBalon b{font:900 12px Nunito,sans-serif;color:#0d8cc4;text-transform:uppercase;letter-spacing:.5px}
.yzBalon p{margin:1px 0 0;font:700 14.5px/1.3 Nunito,sans-serif}
.yzBalon small{display:block;font:800 12px Nunito,sans-serif;color:#e8492f;margin-top:3px}
.yzBalon small:empty{display:none}

/* ---------- alt kontroller */
.yzAlt{position:absolute;left:0;right:0;bottom:var(--altBos);height:calc(var(--dug) + 74px);z-index:4;pointer-events:none}
.yzAlt>*{pointer-events:auto}
.yzDug{position:absolute;bottom:0;border:0;color:#fff;cursor:pointer;font-family:'Baloo 2',Nunito,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;padding:0}
.yzDug b{font:900 30px/1 'Baloo 2',Nunito,sans-serif;pointer-events:none}
.yzDug small{font:900 11.5px/1.1 Nunito,sans-serif;letter-spacing:.4px;margin-top:3px;pointer-events:none;text-align:center;max-width:92%}
.yzKol{width:var(--dug);height:var(--dug);border-radius:50%;background:radial-gradient(circle at 40% 30%,#5fd6ff,#0b7fb8 70%,#075b86);box-shadow:0 6px 0 #04395a,0 10px 24px #0007,inset 0 2px 0 #ffffff66;border:3px solid #ffffffb0}
.yzKol.sol{left:max(14px,env(safe-area-inset-left))}
.yzKol.sag,.yzKol.cift{right:max(14px,env(safe-area-inset-right))}
.yzKol.cift{width:calc(var(--dug) * 1.12);height:calc(var(--dug) * 1.12);background:radial-gradient(circle at 40% 30%,#ffd86b,#f2a20c 70%,#b06f00);box-shadow:0 6px 0 #6b4300,0 10px 24px #0007,inset 0 2px 0 #ffffff88}
.yzKol.bekle{box-shadow:0 6px 0 #04395a,0 0 0 5px #7dffb0,0 0 22px #7dffb0;animation:yzNabiz .5s infinite alternate}
@keyframes yzNabiz{to{transform:scale(1.05)}}
.yzKol.bas,.yzDug.bas{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 #04395a,0 4px 12px #0007}
.yzOrtaBlok{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.yzOrtaBlok>*{pointer-events:auto}
.yzOrta{position:relative;width:var(--orta);height:var(--orta);border-radius:22px;background:linear-gradient(180deg,#2bd9a0,#0f9a6c);box-shadow:0 5px 0 #075a3f,0 8px 18px #0007;border:3px solid #ffffffa0}
.yzOrta b{font-size:26px}
.yzOrta small{font-size:10.5px}
.yzOrta.donus{background:linear-gradient(180deg,#ffb02e,#e8611a);box-shadow:0 5px 0 #7a2c00,0 0 0 4px #ffd23f88,0 0 22px #ffb02e;animation:yzNabiz .35s infinite alternate}
.yzOrta.atla{background:linear-gradient(180deg,#ff6a5c,#d6283a);box-shadow:0 5px 0 #6d0f19,0 8px 18px #0007}
.yzOrta.pasif{opacity:.45;filter:saturate(.3)}
.yzOrta.acil{animation:yzNabiz .3s infinite alternate;box-shadow:0 5px 0 #075a3f,0 0 0 4px #9be7ff,0 0 20px #4fd1ff}
.yzRitim{width:min(230px,52vw);background:rgba(4,22,40,.66);border:1px solid #ffffff2a;border-radius:12px;padding:4px 8px 6px;pointer-events:none}
.yzRitimUst{display:flex;justify-content:space-between;align-items:center;font:900 14px Nunito,sans-serif;line-height:1.1;margin-bottom:3px}
.yzRitimUst span{opacity:.3;transition:opacity .12s,color .12s}
.yzRitimUst span.on{opacity:1;color:#7dffb0;text-shadow:0 0 8px #7dffb0}
.yzRitimUst b{font:900 12px Nunito,sans-serif;color:#ffd23f}
.yzRitimCubuk{position:relative;height:12px;border-radius:7px;background:linear-gradient(90deg,#ff8a8055 0,#ffffff1c 30%,#ffffff1c 100%);overflow:hidden}
.yzRitimCubuk .pencere{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#3ddc8466,#7dffb0,#3ddc8466);border-radius:5px}
.yzRitimCubuk .igne{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 6px #fff}
.yzRitim.pasif{opacity:.45}
.yzDonusOlcer{display:flex;align-items:center;gap:6px;background:rgba(4,22,40,.78);border:1px solid #ffb02e88;border-radius:11px;padding:3px 8px;font:900 11px Nunito,sans-serif;pointer-events:none}
.yzDOCubuk{position:relative;width:min(150px,36vw);height:10px;border-radius:6px;background:#ffffff1c}
.yzDOCubuk .iyi{position:absolute;top:0;bottom:0;left:calc(100% * .5 / 3.2);width:calc(100% * 2.1 / 3.2);background:#ffd23f66;border-radius:5px}
.yzDOCubuk .muk{position:absolute;top:0;bottom:0;left:calc(100% * .9 / 3.2);width:calc(100% * 1 / 3.2);background:#7dffb0;border-radius:5px}
.yzDOCubuk u{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}
.yzDonusOlcer b{min-width:40px;text-align:right;color:#ffd23f}
.yzKlavye{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;z-index:3;font:700 12px Nunito,sans-serif;color:#d6ecf7;background:rgba(4,22,40,.6);border-radius:9px;padding:3px 10px;white-space:nowrap;pointer-events:none}
.yzKlavye b{color:#ffd23f}

/* ---------- menü paneli */
.yzPanel{position:absolute;inset:0;z-index:7;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:62px 12px 18px;background:linear-gradient(180deg,#06243acc 0,#06243a55 30%,#06243a99 100%)}
.yzPanel.saydam{background:linear-gradient(180deg,#06243a99,#06243a22 40%,#06243a22 60%,#06243acc)}
.yzIc{max-width:760px;margin:0 auto}
.yzLogo{text-align:center;margin:2px 0 10px}
.yzLogo h1{margin:0;font:900 clamp(28px,6vw,46px)/1 'Baloo 2',Nunito,sans-serif;letter-spacing:.5px;background:linear-gradient(180deg,#fff 25%,#9be7ff 60%,#3ec5f2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #04395a) drop-shadow(0 0 18px #3ec5f288)}
.yzLogo p{margin:4px 0 0;font:800 13px Nunito,sans-serif;color:#bfeaff}
.yzKart{display:flex;align-items:center;gap:10px;background:rgba(4,22,40,.78);border:1px solid #ffffff22;border-radius:16px;padding:9px 12px;margin-bottom:10px;flex-wrap:wrap}
.yzKart .av{font-size:30px}
.yzKart .bilgi{flex:1;min-width:150px}
.yzKart .bilgi b{font:900 16px 'Baloo 2',Nunito,sans-serif}
.yzKart .bilgi small{display:block;color:#a9d8ef;font-weight:800;font-size:12px}
.yzXp{height:7px;border-radius:4px;background:#ffffff1c;overflow:hidden;margin-top:3px}
.yzXp u{display:block;height:100%;background:linear-gradient(90deg,#3ec5f2,#7dffb0)}
.yzPara{font:900 17px 'Baloo 2',Nunito,sans-serif;color:#ffd23f;white-space:nowrap}
.yzIzgara{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media (max-width:640px){.yzIzgara{grid-template-columns:repeat(2,1fr)}}
.yzSecenek{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;border-radius:16px;border:2px solid #ffffff30;background:linear-gradient(180deg,#1279ad,#0a4f78);color:#fff;cursor:pointer;font-family:inherit;padding:8px 6px;text-align:center;box-shadow:0 4px 0 #03304c,0 8px 18px #0005}
.yzSecenek:active{transform:translateY(2px);box-shadow:0 2px 0 #03304c}
.yzSecenek i{font-style:normal;font-size:30px;line-height:1.1}
.yzSecenek b{font:900 15.5px/1.15 'Baloo 2',Nunito,sans-serif}
.yzSecenek small{font:800 11.5px/1.2 Nunito,sans-serif;color:#c9ecff}
.yzSecenek.vurgu{background:linear-gradient(180deg,#ffb02e,#e8611a);box-shadow:0 4px 0 #7a2c00,0 0 0 3px #ffd23f66,0 8px 18px #0005}
.yzSecenek.yesil{background:linear-gradient(180deg,#2bd9a0,#0f8f63);box-shadow:0 4px 0 #064a33,0 8px 18px #0005}
.yzSecenek.mor{background:linear-gradient(180deg,#8a5cff,#5a2fc9);box-shadow:0 4px 0 #2c1470,0 8px 18px #0005}
.yzSecenek.kilit{filter:grayscale(.75);opacity:.6}
.yzSecenek .rozet{position:absolute;top:5px;right:6px;background:#e8492f;border-radius:9px;padding:0 6px;font:900 11px Nunito,sans-serif}
.yzAltSatir{display:flex;gap:8px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.yzAltSatir .btn{min-width:120px}
.yzBaslik{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.yzBaslik h2{margin:0;flex:1;font:900 22px 'Baloo 2',Nunito,sans-serif}
.yzGeri{background:rgba(4,22,40,.8);border:2px solid #ffffff38;color:#fff;border-radius:12px;padding:5px 12px;font:900 14px Nunito,sans-serif;cursor:pointer}
.yzListe{display:flex;flex-direction:column;gap:8px}
.yzSatir{display:flex;align-items:center;gap:10px;background:rgba(4,22,40,.8);border:1px solid #ffffff22;border-radius:14px;padding:8px 10px}
.yzSatir .ik{font-size:26px;width:36px;text-align:center;flex:0 0 36px}
.yzSatir .ac{flex:1;min-width:0}
.yzSatir .ac b{display:block;font:900 15px/1.2 'Baloo 2',Nunito,sans-serif}
.yzSatir .ac small{display:block;color:#a9d8ef;font:700 12px/1.3 Nunito,sans-serif}
.yzSatir .sag{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.yzSatir.kilit{opacity:.55}
.yzSatir.secili{border-color:#ffd23f;box-shadow:0 0 0 2px #ffd23f55}
.yzYildiz{font-size:15px;letter-spacing:1px;white-space:nowrap}
.yzKademe{background:rgba(4,22,40,.55);border:1px solid #ffffff1f;border-radius:16px;padding:9px;margin-bottom:10px}
.yzKademe h3{margin:0 0 7px;font:900 17px 'Baloo 2',Nunito,sans-serif;display:flex;align-items:center;gap:8px}
.yzKademe h3 small{margin-left:auto;font:800 12px Nunito,sans-serif;color:#a9d8ef}
.yzKademe.kilit h3{opacity:.6}
.yzSekmeler{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.yzSekmeler button{flex:1;min-width:70px;background:rgba(4,22,40,.8);border:2px solid #ffffff30;color:#fff;border-radius:11px;padding:6px 8px;font:900 13px Nunito,sans-serif;cursor:pointer}
.yzSekmeler button.aktif{background:#ffd23f;color:#3a2a00;border-color:#fff}
.yzUrun{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.yzUrun .u{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(4,22,40,.82);border:2px solid #ffffff22;border-radius:14px;padding:9px 6px;text-align:center}
.yzUrun .u.giyili{border-color:#7dffb0}
.yzUrun .u .on{width:62px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:inset 0 -6px 0 #0003}
.yzUrun .u b{font:900 14px 'Baloo 2',Nunito,sans-serif}
.yzUrun .u small{color:#a9d8ef;font:800 11px Nunito,sans-serif;min-height:15px}
.yzRenkler{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 10px}
.yzRenkler button{width:38px;height:38px;border-radius:50%;border:3px solid #ffffff40;cursor:pointer}
.yzRenkler button.aktif{border-color:#fff;box-shadow:0 0 0 3px #ffd23f}
.yzStatlar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:520px){.yzStatlar{grid-template-columns:1fr}}
.yzStatK{background:rgba(4,22,40,.8);border:1px solid #ffffff22;border-radius:14px;padding:8px 10px}
.yzStatK .ust{display:flex;justify-content:space-between;align-items:center;font:900 14.5px 'Baloo 2',Nunito,sans-serif}
.yzStatK .ust b{color:#ffd23f}
.yzStatK .cubuk{display:flex;gap:3px;margin:5px 0 3px}
.yzStatK .cubuk i{flex:1;height:9px;border-radius:3px;background:#ffffff1c}
.yzStatK .cubuk i.dolu{background:linear-gradient(90deg,#3ec5f2,#7dffb0)}
.yzStatK small{color:#a9d8ef;font:700 11.5px Nunito,sans-serif}
.yzDolap{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media (max-width:520px){.yzDolap{grid-template-columns:repeat(3,1fr)}}
.yzDolap .raf{background:linear-gradient(180deg,#5a3a20,#3a2412);border-radius:12px;padding:6px 4px;text-align:center;box-shadow:inset 0 -5px 0 #00000055}
.yzDolap .raf .kupa{font-size:30px;line-height:1.1;filter:drop-shadow(0 2px 3px #000a)}
.yzDolap .raf .kupa.yok{filter:grayscale(1) brightness(.5);opacity:.5}
.yzDolap .raf small{display:block;font:800 10.5px Nunito,sans-serif;color:#f3dcc0}
.yzDolap .raf span{font-size:13px;letter-spacing:-1px}
.yzBasarim{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.yzBasarim div{display:flex;gap:7px;align-items:center;background:rgba(4,22,40,.8);border-radius:12px;padding:6px 8px;border:1px solid #ffffff1f}
.yzBasarim div i{font-style:normal;font-size:22px}
.yzBasarim div b{display:block;font:900 12.5px/1.15 Nunito,sans-serif}
.yzBasarim div small{display:block;font:700 10.5px/1.2 Nunito,sans-serif;color:#a9d8ef}
.yzBasarim div.yok{opacity:.42;filter:grayscale(1)}
.yzRekorT{width:100%;border-collapse:collapse;font:800 13px Nunito,sans-serif;background:rgba(4,22,40,.8);border-radius:12px;overflow:hidden}
.yzRekorT th,.yzRekorT td{padding:5px 6px;text-align:center;border-bottom:1px solid #ffffff14}
.yzRekorT th{color:#a9d8ef;font-size:11.5px}
.yzRekorT td:first-child{text-align:left}
.yzH3{font:900 17px 'Baloo 2',Nunito,sans-serif;margin:14px 0 7px}
.yzNot{font:700 12.5px/1.4 Nunito,sans-serif;color:#bfeaff;margin:6px 0}
.yzSecim{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 9px}
.yzSecim button{flex:1;min-width:64px;background:rgba(4,22,40,.82);border:2px solid #ffffff2e;color:#fff;border-radius:11px;padding:7px 6px;font:900 13px Nunito,sans-serif;cursor:pointer}
.yzSecim button.aktif{background:#3ec5f2;border-color:#fff;color:#022}

/* ---------- sonuç modalı */
.yzSonuc{text-align:center}
.yzSonuc .madalya{font-size:56px;line-height:1;filter:drop-shadow(0 4px 6px #0006);animation:yzMad .7s}
@keyframes yzMad{0%{transform:scale(.2) rotate(-30deg)}70%{transform:scale(1.15)}}
.yzSonuc .sure{font:900 34px/1 'Baloo 2',Nunito,sans-serif;color:#ffd23f;margin:4px 0}
.yzSonuc .pb{display:inline-block;background:#7dffb0;color:#033;border-radius:9px;padding:1px 9px;font:900 12px Nunito,sans-serif;margin-bottom:4px}
.yzTablo{width:100%;border-collapse:collapse;margin:7px 0;font:800 13.5px Nunito,sans-serif}
.yzTablo td,.yzTablo th{padding:4px 5px;border-bottom:1px solid #ffffff18;text-align:left}
.yzTablo th{font-size:11px;color:#9fb9cc}
.yzTablo td:nth-child(3),.yzTablo th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.yzTablo tr.ben td{background:#ffd23f22;color:#ffe48a}
.yzOdul{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.yzOdul span{background:#ffffff14;border-radius:10px;padding:4px 10px;font:900 13.5px Nunito,sans-serif}
.yzRozet{width:120px;height:120px;margin:4px auto 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;background:radial-gradient(circle at 40% 30%,#ffe9a3,#ffb703 60%,#c27c00);box-shadow:0 0 0 6px #fff,0 0 0 10px #3ec5f2,0 10px 30px #0008;animation:yzMad .8s}
.yzKazanc{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0;text-align:left}
.yzKazanc div{background:#ffffff12;border-radius:10px;padding:5px 8px;font:800 12.5px Nunito,sans-serif}
.yzKazanc b{color:#7dffb0}

/* ---------- yerleşim: dikey / yatay */
.yzKap.dikey{--dug:104px;--orta:80px}
.yzKap.dikey .yzSerit{top:104px}
.yzKap.dikey .yzKoc{top:104px}
.yzKap.dikey .yzAkis{top:150px}
.yzKap.yatay{--dug:96px;--orta:70px;--altBos:22px}
.yzKap.yatay.kisa{--dug:84px;--orta:62px;--altBos:20px}
.yzKap.yatay .yzRitim{width:min(210px,32vw)}
.yzKap.yatay.kisa .yzUst{top:5px}
.yzKap.yatay.kisa .yzStat{height:36px;min-width:50px}
.yzKap.yatay.kisa .yzStat b{font-size:15px}
.yzKap.yatay.kisa .yzMenuBtn,.yzKap.yatay.kisa .yzIkon{height:36px}
.yzKap.yatay.kisa .yzSerit{top:46px;width:min(260px,40vw);padding:3px 7px}
.yzKap.yatay.kisa .yzSerit .s{height:4px;margin:1.5px 0}
.yzKap.yatay.kisa .yzSerit .s i{width:8px;height:8px;margin:-4px 0 0 -4px}
.yzKap.yatay.kisa .yzKoc{top:48px}
.yzKap.yatay.kisa .yzKocYuz{width:42px;height:42px;flex-basis:42px}
.yzKap.yatay.kisa .yzBalon p{font-size:13px}
.yzKap.yatay.kisa .yzBar span{height:min(110px,30vh)}
.yzKap.yatay .yzAkis{top:50px}
.yzKap.masa{--dug:92px;--orta:72px;--altBos:34px}
.yzKap.masa .yzKol{opacity:.92}
@media (max-width:380px){.yzStat{min-width:50px;padding:2px 6px}.yzMenuBtn b{display:none}}