/* Okçuluk Ustası 3D */
body.oyunSayfa{background:#0d2416;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}
.ocKap{position:absolute;inset:0;overflow:hidden;background:#0d2416;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:Nunito,system-ui,sans-serif;color:#fff}
.onOyun .ocKap{position:absolute;inset:0}
#ocCanvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.ocYukle{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%,#1c6b3a,#0d2416)}
.ocYukle i{width:46px;height:46px;border-radius:50%;border:5px solid #ffffff33;border-top-color:#ffd23f;animation:ocDon .9s linear infinite}
@keyframes ocDon{to{transform:rotate(360deg)}}

/* ---------- üst bilgi */
.ocUst{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}
.ocUst>*{pointer-events:auto}
.ocSol{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;min-width:0}
.ocSag{display:flex;gap:6px;flex:0 0 auto}
.ocMenuBtn{display:flex;align-items:center;gap:7px;font:800 15px 'Baloo 2',Nunito,sans-serif;color:#fff;background:linear-gradient(180deg,#3ddc84,#178a4a);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}
.ocMenuBtn b{overflow:hidden;text-overflow:ellipsis}
.ocMenuBtn i{font-style:normal}
.ocMenuBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0006}
.ocStat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:42px;background:rgba(8,26,14,.7);border:1px solid #ffffff26;border-radius:12px;padding:2px 9px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ocStat small{color:#c7ecd2;font:800 9.5px Nunito,sans-serif;text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
.ocStat b{font:800 18px/1.1 'Baloo 2',Nunito,sans-serif;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ocStat.zaman b{color:#ffd23f}
.ocKap.menude .ocStat,.ocKap.menude #ocDur,.ocKap.menude #ocKamera,.ocKap.menude #ocMenu{display:none}
.ocIkon{position:relative;min-width:44px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,26,14,.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}
.ocIkon small{font:800 9px Nunito,sans-serif;color:#e3f6e8;white-space:nowrap;margin-top:1px}
.ocIkon:active{transform:translateY(2px)}

/* ---------- mini kulvar şeridi */

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

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

/* ---------- mesajlar, sayaç, afiş */
.ocMesaj{position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;z-index:5;pointer-events:none}
.ocMesaj 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:ocPop .9s forwards;position:absolute;white-space:nowrap}
.ocMesaj b.muk{color:#7dffb0;font-size:calc(34px * var(--s,1))}
.ocMesaj b.iyi{color:#ddf7e5}
.ocMesaj b.kotu{color:#ff8a80}
.ocMesaj b.altin{color:#ffd23f}
@keyframes ocPop{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}}
.ocSayac{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}
.ocSayac small{display:block;font:800 15px Nunito,sans-serif;color:#d9f5e2;margin-top:6px;text-shadow:0 2px 0 #0008}
.ocSayac.git{color:#7dffb0;animation:ocGit .5s}
.ocSayac.faul{color:#ff5a5a}
@keyframes ocGit{0%{transform:translate(-50%,-50%) scale(1.6)}}
.ocBanner{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:ocBan 1.8s forwards}
.ocBanner.mavi{background:linear-gradient(90deg,#1f5fd1,#3ddc84)}
@keyframes ocBan{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}}

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

/* ---------- antrenör balonu */
.ocKoc{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:ocAkisGel .35s}
.ocKocYuz{flex:0 0 54px;width:54px;height:54px;border-radius:50%;box-shadow:0 3px 10px #0007;border:3px solid #fff;overflow:hidden;background:#1c6b3a}
.ocKocYuz svg{display:block;width:100%;height:100%}
.ocBalon{position:relative;flex:1;background:#fff;color:#123;border-radius:14px;padding:7px 12px 8px;box-shadow:0 4px 14px #0006}
.ocBalon:before{content:'';position:absolute;left:-8px;top:16px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.ocBalon b{font:900 12px Nunito,sans-serif;color:#178a4a;text-transform:uppercase;letter-spacing:.5px}
.ocBalon p{margin:1px 0 0;font:700 14.5px/1.3 Nunito,sans-serif}
.ocBalon small{display:block;font:800 12px Nunito,sans-serif;color:#e8492f;margin-top:3px}
.ocBalon small:empty{display:none}

/* ---------- alt kontroller */
.ocAlt{position:absolute;left:0;right:0;bottom:var(--altBos);height:calc(var(--dug) + 74px);z-index:4;pointer-events:none}
.ocAlt>*{pointer-events:auto}
.ocDug{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}
.ocDug b{font:900 30px/1 'Baloo 2',Nunito,sans-serif;pointer-events:none}
.ocDug 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%}
.ocKol{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 #0a3a20,0 10px 24px #0007,inset 0 2px 0 #ffffff66;border:3px solid #ffffffb0}
.ocKol.sol{left:max(14px,env(safe-area-inset-left))}
.ocKol.sag,.ocKol.cift{right:max(14px,env(safe-area-inset-right))}
.ocKol.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}
.ocKol.bekle{box-shadow:0 6px 0 #0a3a20,0 0 0 5px #7dffb0,0 0 22px #7dffb0;animation:ocNabiz .5s infinite alternate}
@keyframes ocNabiz{to{transform:scale(1.05)}}
.ocKol.bas,.ocDug.bas{transform:translateY(4px) scale(.96);box-shadow:0 2px 0 #0a3a20,0 4px 12px #0007}
.ocOrtaBlok{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.ocOrtaBlok>*{pointer-events:auto}
.ocOrta{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}
.ocOrta b{font-size:26px}
.ocOrta small{font-size:10.5px}
.ocOrta.donus{background:linear-gradient(180deg,#ffb02e,#e8611a);box-shadow:0 5px 0 #7a2c00,0 0 0 4px #ffd23f88,0 0 22px #ffb02e;animation:ocNabiz .35s infinite alternate}
.ocOrta.atla{background:linear-gradient(180deg,#ff6a5c,#d6283a);box-shadow:0 5px 0 #6d0f19,0 8px 18px #0007}
.ocOrta.pasif{opacity:.45;filter:saturate(.3)}
.ocOrta.acil{animation:ocNabiz .3s infinite alternate;box-shadow:0 5px 0 #075a3f,0 0 0 4px #bff5cf,0 0 20px #ffd23f}
.ocRitim{width:min(230px,52vw);background:rgba(8,26,14,.66);border:1px solid #ffffff2a;border-radius:12px;padding:4px 8px 6px;pointer-events:none}
.ocRitimUst{display:flex;justify-content:space-between;align-items:center;font:900 14px Nunito,sans-serif;line-height:1.1;margin-bottom:3px}
.ocRitimUst span{opacity:.3;transition:opacity .12s,color .12s}
.ocRitimUst span.on{opacity:1;color:#7dffb0;text-shadow:0 0 8px #7dffb0}
.ocRitimUst b{font:900 12px Nunito,sans-serif;color:#ffd23f}
.ocRitimCubuk{position:relative;height:12px;border-radius:7px;background:linear-gradient(90deg,#ff8a8055 0,#ffffff1c 30%,#ffffff1c 100%);overflow:hidden}
.ocRitimCubuk .pencere{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#3ddc8466,#7dffb0,#3ddc8466);border-radius:5px}
.ocRitimCubuk .igne{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 6px #fff}
.ocRitim.pasif{opacity:.45}
.ocDonusOlcer{display:flex;align-items:center;gap:6px;background:rgba(8,26,14,.78);border:1px solid #ffb02e88;border-radius:11px;padding:3px 8px;font:900 11px Nunito,sans-serif;pointer-events:none}
.ocDOCubuk{position:relative;width:min(150px,36vw);height:10px;border-radius:6px;background:#ffffff1c}
.ocDOCubuk .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}
.ocDOCubuk .muk{position:absolute;top:0;bottom:0;left:calc(100% * .9 / 3.2);width:calc(100% * 1 / 3.2);background:#7dffb0;border-radius:5px}
.ocDOCubuk u{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}
.ocDonusOlcer b{min-width:40px;text-align:right;color:#ffd23f}
.ocKlavye{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;z-index:3;font:700 12px Nunito,sans-serif;color:#e3f6e8;background:rgba(8,26,14,.6);border-radius:9px;padding:3px 10px;white-space:nowrap;pointer-events:none}
.ocKlavye b{color:#ffd23f}

/* ---------- menü paneli */
.ocPanel{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,#0d2416cc 0,#0d241655 30%,#0d241699 100%)}
.ocPanel.saydam{background:linear-gradient(180deg,#0d241699,#0d241622 40%,#0d241622 60%,#0d2416cc)}
.ocIc{max-width:760px;margin:0 auto}
.ocLogo{text-align:center;margin:2px 0 10px}
.ocLogo h1{margin:0;font:900 clamp(28px,6vw,46px)/1 'Baloo 2',Nunito,sans-serif;letter-spacing:.5px;background:linear-gradient(180deg,#fff 25%,#bff5cf 60%,#3ddc84);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 #0a3a20) drop-shadow(0 0 18px #3ddc8488)}
.ocLogo p{margin:4px 0 0;font:800 13px Nunito,sans-serif;color:#d9f5e2}
.ocKart{display:flex;align-items:center;gap:10px;background:rgba(8,26,14,.78);border:1px solid #ffffff22;border-radius:16px;padding:9px 12px;margin-bottom:10px;flex-wrap:wrap}
.ocKart .av{font-size:30px}
.ocKart .bilgi{flex:1;min-width:150px}
.ocKart .bilgi b{font:900 16px 'Baloo 2',Nunito,sans-serif}
.ocKart .bilgi small{display:block;color:#c7ecd2;font-weight:800;font-size:12px}
.ocXp{height:7px;border-radius:4px;background:#ffffff1c;overflow:hidden;margin-top:3px}
.ocXp u{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#7dffb0)}
.ocPara{font:900 17px 'Baloo 2',Nunito,sans-serif;color:#ffd23f;white-space:nowrap}
.ocIzgara{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media (max-width:640px){.ocIzgara{grid-template-columns:repeat(2,1fr)}}
.ocSecenek{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,#1c7a45,#105230);color:#fff;cursor:pointer;font-family:inherit;padding:8px 6px;text-align:center;box-shadow:0 4px 0 #08321c,0 8px 18px #0005}
.ocSecenek:active{transform:translateY(2px);box-shadow:0 2px 0 #08321c}
.ocSecenek i{font-style:normal;font-size:30px;line-height:1.1}
.ocSecenek b{font:900 15.5px/1.15 'Baloo 2',Nunito,sans-serif}
.ocSecenek small{font:800 11.5px/1.2 Nunito,sans-serif;color:#d9f5e2}
.ocSecenek.vurgu{background:linear-gradient(180deg,#ffb02e,#e8611a);box-shadow:0 4px 0 #7a2c00,0 0 0 3px #ffd23f66,0 8px 18px #0005}
.ocSecenek.yesil{background:linear-gradient(180deg,#2bd9a0,#0f8f63);box-shadow:0 4px 0 #064a33,0 8px 18px #0005}
.ocSecenek.mor{background:linear-gradient(180deg,#8a5cff,#5a2fc9);box-shadow:0 4px 0 #2c1470,0 8px 18px #0005}
.ocSecenek.kilit{filter:grayscale(.75);opacity:.6}
.ocSecenek .rozet{position:absolute;top:5px;right:6px;background:#e8492f;border-radius:9px;padding:0 6px;font:900 11px Nunito,sans-serif}
.ocAltSatir{display:flex;gap:8px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.ocAltSatir .btn{min-width:120px}
.ocBaslik{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.ocBaslik h2{margin:0;flex:1;font:900 22px 'Baloo 2',Nunito,sans-serif}
.ocGeri{background:rgba(8,26,14,.8);border:2px solid #ffffff38;color:#fff;border-radius:12px;padding:5px 12px;font:900 14px Nunito,sans-serif;cursor:pointer}
.ocListe{display:flex;flex-direction:column;gap:8px}
.ocSatir{display:flex;align-items:center;gap:10px;background:rgba(8,26,14,.8);border:1px solid #ffffff22;border-radius:14px;padding:8px 10px}
.ocSatir .ik{font-size:26px;width:36px;text-align:center;flex:0 0 36px}
.ocSatir .ac{flex:1;min-width:0}
.ocSatir .ac b{display:block;font:900 15px/1.2 'Baloo 2',Nunito,sans-serif}
.ocSatir .ac small{display:block;color:#c7ecd2;font:700 12px/1.3 Nunito,sans-serif}
.ocSatir .sag{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.ocSatir.kilit{opacity:.55}
.ocSatir.secili{border-color:#ffd23f;box-shadow:0 0 0 2px #ffd23f55}
.ocYildiz{font-size:15px;letter-spacing:1px;white-space:nowrap}
.ocKademe{background:rgba(8,26,14,.55);border:1px solid #ffffff1f;border-radius:16px;padding:9px;margin-bottom:10px}
.ocKademe h3{margin:0 0 7px;font:900 17px 'Baloo 2',Nunito,sans-serif;display:flex;align-items:center;gap:8px}
.ocKademe h3 small{margin-left:auto;font:800 12px Nunito,sans-serif;color:#c7ecd2}
.ocKademe.kilit h3{opacity:.6}
.ocSekmeler{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.ocSekmeler button{flex:1;min-width:70px;background:rgba(8,26,14,.8);border:2px solid #ffffff30;color:#fff;border-radius:11px;padding:6px 8px;font:900 13px Nunito,sans-serif;cursor:pointer}
.ocSekmeler button.aktif{background:#ffd23f;color:#3a2a00;border-color:#fff}
.ocUrun{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ocUrun .u{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(8,26,14,.82);border:2px solid #ffffff22;border-radius:14px;padding:9px 6px;text-align:center}
.ocUrun .u.giyili{border-color:#7dffb0}
.ocUrun .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}
.ocUrun .u b{font:900 14px 'Baloo 2',Nunito,sans-serif}
.ocUrun .u small{color:#c7ecd2;font:800 11px Nunito,sans-serif;min-height:15px}
.ocRenkler{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 10px}
.ocRenkler button{width:38px;height:38px;border-radius:50%;border:3px solid #ffffff40;cursor:pointer}
.ocRenkler button.aktif{border-color:#fff;box-shadow:0 0 0 3px #ffd23f}
.ocStatlar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:520px){.ocStatlar{grid-template-columns:1fr}}
.ocStatK{background:rgba(8,26,14,.8);border:1px solid #ffffff22;border-radius:14px;padding:8px 10px}
.ocStatK .ust{display:flex;justify-content:space-between;align-items:center;font:900 14.5px 'Baloo 2',Nunito,sans-serif}
.ocStatK .ust b{color:#ffd23f}
.ocStatK .cubuk{display:flex;gap:3px;margin:5px 0 3px}
.ocStatK .cubuk i{flex:1;height:9px;border-radius:3px;background:#ffffff1c}
.ocStatK .cubuk i.dolu{background:linear-gradient(90deg,#3ddc84,#7dffb0)}
.ocStatK small{color:#c7ecd2;font:700 11.5px Nunito,sans-serif}
.ocDolap{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media (max-width:520px){.ocDolap{grid-template-columns:repeat(3,1fr)}}
.ocDolap .raf{background:linear-gradient(180deg,#5a3a20,#3a2412);border-radius:12px;padding:6px 4px;text-align:center;box-shadow:inset 0 -5px 0 #00000055}
.ocDolap .raf .kupa{font-size:30px;line-height:1.1;filter:drop-shadow(0 2px 3px #000a)}
.ocDolap .raf .kupa.yok{filter:grayscale(1) brightness(.5);opacity:.5}
.ocDolap .raf small{display:block;font:800 10.5px Nunito,sans-serif;color:#f3dcc0}
.ocDolap .raf span{font-size:13px;letter-spacing:-1px}
.ocBasarim{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ocBasarim div{display:flex;gap:7px;align-items:center;background:rgba(8,26,14,.8);border-radius:12px;padding:6px 8px;border:1px solid #ffffff1f}
.ocBasarim div i{font-style:normal;font-size:22px}
.ocBasarim div b{display:block;font:900 12.5px/1.15 Nunito,sans-serif}
.ocBasarim div small{display:block;font:700 10.5px/1.2 Nunito,sans-serif;color:#c7ecd2}
.ocBasarim div.yok{opacity:.42;filter:grayscale(1)}
.ocRekorT{width:100%;border-collapse:collapse;font:800 13px Nunito,sans-serif;background:rgba(8,26,14,.8);border-radius:12px;overflow:hidden}
.ocRekorT th,.ocRekorT td{padding:5px 6px;text-align:center;border-bottom:1px solid #ffffff14}
.ocRekorT th{color:#c7ecd2;font-size:11.5px}
.ocRekorT td:first-child{text-align:left}
.ocH3{font:900 17px 'Baloo 2',Nunito,sans-serif;margin:14px 0 7px}
.ocNot{font:700 12.5px/1.4 Nunito,sans-serif;color:#d9f5e2;margin:6px 0}
.ocSecim{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 9px}
.ocSecim button{flex:1;min-width:64px;background:rgba(8,26,14,.82);border:2px solid #ffffff2e;color:#fff;border-radius:11px;padding:7px 6px;font:900 13px Nunito,sans-serif;cursor:pointer}
.ocSecim button.aktif{background:#3ddc84;border-color:#fff;color:#022}

/* ---------- sonuç modalı */
.ocSonuc{text-align:center}
.ocSonuc .madalya{font-size:56px;line-height:1;filter:drop-shadow(0 4px 6px #0006);animation:ocMad .7s}
@keyframes ocMad{0%{transform:scale(.2) rotate(-30deg)}70%{transform:scale(1.15)}}
.ocSonuc .sure{font:900 34px/1 'Baloo 2',Nunito,sans-serif;color:#ffd23f;margin:4px 0}
.ocSonuc .pb{display:inline-block;background:#7dffb0;color:#033;border-radius:9px;padding:1px 9px;font:900 12px Nunito,sans-serif;margin-bottom:4px}
.ocTablo{width:100%;border-collapse:collapse;margin:7px 0;font:800 13.5px Nunito,sans-serif}
.ocTablo td,.ocTablo th{padding:4px 5px;border-bottom:1px solid #ffffff18;text-align:left}
.ocTablo th{font-size:11px;color:#b5d6be}
.ocTablo td:nth-child(3),.ocTablo th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.ocTablo tr.ben td{background:#ffd23f22;color:#ffe48a}
.ocOdul{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.ocOdul span{background:#ffffff14;border-radius:10px;padding:4px 10px;font:900 13.5px Nunito,sans-serif}
.ocRozet{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 #3ddc84,0 10px 30px #0008;animation:ocMad .8s}
.ocKazanc{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0;text-align:left}
.ocKazanc div{background:#ffffff12;border-radius:10px;padding:5px 8px;font:800 12.5px Nunito,sans-serif}
.ocKazanc b{color:#7dffb0}

/* ---------- yerleşim: dikey / yatay */
.ocKap.dikey{--dug:104px;--orta:80px}
.ocKap.dikey .ocKoc{top:104px}
.ocKap.dikey .ocAkis{top:150px}
.ocKap.yatay{--dug:96px;--orta:70px;--altBos:22px}
.ocKap.yatay.kisa{--dug:84px;--orta:62px;--altBos:20px}
.ocKap.yatay .ocRitim{width:min(210px,32vw)}
.ocKap.yatay.kisa .ocUst{top:5px}
.ocKap.yatay.kisa .ocStat{height:36px;min-width:50px}
.ocKap.yatay.kisa .ocStat b{font-size:15px}
.ocKap.yatay.kisa .ocMenuBtn,.ocKap.yatay.kisa .ocIkon{height:36px}
.ocKap.yatay.kisa .ocKoc{top:48px}
.ocKap.yatay.kisa .ocKocYuz{width:42px;height:42px;flex-basis:42px}
.ocKap.yatay.kisa .ocBalon p{font-size:13px}
.ocKap.yatay.kisa .ocBar span{height:min(110px,30vh)}
.ocKap.yatay .ocAkis{top:50px}
.ocKap.masa{--dug:92px;--orta:72px;--altBos:34px}
.ocKap.masa .ocKol{opacity:.92}
@media (max-width:380px){.ocStat{min-width:50px;padding:2px 6px}.ocMenuBtn b{display:none}}

/* ---------- okçuluğa özel: dürbün, ana düğme, ok şeridi */
.ocNisan{position:absolute;left:50%;top:54px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
#ocDurbun{width:min(300px,62vw,46vh);height:min(300px,62vw,46vh);border-radius:50%;box-shadow:0 0 0 4px #0b1a10,0 0 0 7px #ffffff55,0 10px 30px #0008;background:#3a6b2a}
.ocNefes{display:flex;align-items:center;gap:6px;background:rgba(8,26,14,.75);border-radius:10px;padding:3px 8px}
.ocNefes i{font-style:normal}
.ocNefes span{display:block;width:min(180px,40vw);height:9px;border-radius:5px;background:#ffffff22;overflow:hidden}
.ocNefes u{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#bff5cf);border-radius:5px}
.ocNefes.yorgun u{background:linear-gradient(90deg,#ff4b5c,#ff8a80)}
.ocNefes.yorgun{animation:ocAz .5s infinite}
.ocDurbunAlt{font:900 12px Nunito,sans-serif;background:rgba(8,26,14,.75);border-radius:9px;padding:2px 9px;color:#ffd23f;min-height:16px}
.ocDurbunAlt:empty{display:none}
.ocAna{left:50%;transform:translateX(-50%);width:calc(var(--orta) * 1.5);height:calc(var(--orta) * 1.5);border-radius:50%;background:radial-gradient(circle at 40% 30%,#6ee7a0,#178a4a 70%,#0b5a2e);box-shadow:0 6px 0 #063d1e,0 10px 24px #0007,inset 0 2px 0 #ffffff77;border:3px solid #ffffffb0}
.ocAna b{font-size:34px}
.ocAna small{font-size:11px}
.ocAna.cek{background:radial-gradient(circle at 40% 30%,#ffe08a,#e8a100 70%,#8a5a00);box-shadow:0 6px 0 #5a3a00,0 0 0 5px #ffd23f66,0 10px 24px #0007}
.ocAna.hazir{background:radial-gradient(circle at 40% 30%,#ff9b8a,#e0302f 70%,#8a1010);box-shadow:0 6px 0 #5a0a0a,0 0 0 6px #ff8a8099,0 0 24px #ff8a80;animation:ocNabiz .35s infinite alternate}
.ocAna.pasif{opacity:.45;filter:saturate(.3)}
.ocAna.bas{transform:translateX(-50%) translateY(4px) scale(.96)}
.ocHalka{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);pointer-events:none}
.ocHalka circle{fill:none;stroke-width:6}
.ocHalka .z{stroke:#ffffff22}
.ocHalka .d{stroke:#ffd23f;stroke-dasharray:289;stroke-dashoffset:289;stroke-linecap:round}
.ocSerit{position:absolute;top:58px;right:10px;display:flex;flex-direction:column;gap:3px;z-index:3;pointer-events:none;max-width:44vw}
.ocSerit .s{display:flex;gap:3px;align-items:center;background:rgba(8,26,14,.75);border-radius:9px;padding:2px 6px;font:800 11px Nunito,sans-serif;white-space:nowrap}
.ocSerit .s b{min-width:52px;overflow:hidden;text-overflow:ellipsis}
.ocSerit .s.ben{box-shadow:0 0 0 2px #ffd23f88}
.ocSerit .s em{font-style:normal;color:#ffd23f;margin-left:3px}
.ocSerit i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;font:900 10.5px Nunito,sans-serif;color:#111}
.ocSerit i.p10,.ocSerit i.p9,.ocSerit i.pX{background:#ffd400}.ocSerit i.p8,.ocSerit i.p7{background:#e0302f;color:#fff}.ocSerit i.p6,.ocSerit i.p5{background:#2c86d6;color:#fff}
.ocSerit i.p4,.ocSerit i.p3{background:#1b1b1b;color:#fff;box-shadow:0 0 0 1px #fff}.ocSerit i.p2,.ocSerit i.p1{background:#f4f4f0}.ocSerit i.p0{background:#555;color:#fff}.ocSerit i.bos{background:#ffffff18}
.ocStat.ruzgar b{color:#bff5cf}.ocStat.sure b{color:#ffd23f}.ocStat.toplam b{color:#ffd23f}
.ocStat.sure.az b{color:#ff8a80}
.ocKap.dikey .ocNisan{top:104px}
.ocKap.yatay.kisa .ocNisan{top:44px}
.ocKap.yatay.kisa #ocDurbun{width:min(240px,40vh);height:min(240px,40vh)}
.ocOkTablo{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0}
.ocOkTablo i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font:900 12px Nunito,sans-serif;color:#111}
.ocOkTablo i.p10,.ocOkTablo i.p9,.ocOkTablo i.pX{background:#ffd400}.ocOkTablo i.p8,.ocOkTablo i.p7{background:#e0302f;color:#fff}.ocOkTablo i.p6,.ocOkTablo i.p5{background:#2c86d6;color:#fff}
.ocOkTablo i.p4,.ocOkTablo i.p3{background:#1b1b1b;color:#fff;box-shadow:0 0 0 1px #fff}.ocOkTablo i.p2,.ocOkTablo i.p1{background:#f4f4f0}.ocOkTablo i.p0{background:#555;color:#fff}
.ocPuanBuyuk{display:flex;justify-content:center;gap:10px;margin:6px 0 4px;flex-wrap:wrap}
.ocPuanBuyuk div{background:#ffffff12;border-radius:12px;padding:5px 12px;text-align:center}
.ocPuanBuyuk small{display:block;font:800 11px Nunito,sans-serif;color:#b5d6be}
.ocPuanBuyuk b{font:900 24px/1.1 'Baloo 2',Nunito,sans-serif}
.ocPuanBuyuk div.top b{color:#ffd23f;font-size:30px}
.onBekle{align-items:flex-start}
.onBekleKutu.ocBekle{margin:auto}
.ocBekle .ocSecim button{min-width:60px;padding:6px 4px;font-size:12.5px}
.ocKap.nisanda .ocKoc{opacity:.22;transition:opacity .3s}.ocKoc{transition:opacity .3s}
.ocKap.dikey .ocSerit{top:auto;bottom:122px;left:8px;right:auto}