/* ALTIN AT YARIŞI — CANLI YARIŞ "Tribün / bitiş çizgisi" görünümü (ADIM 180). Koyu lacivert + altın, Poppins (yerel). Emoji yok; simgeler SVG.
 * Bilgisayar · tablet · telefon (dikey / yatay) · tam ekran. 3B sahne: assets/js/b/sahne.js. */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url(../fonts/Poppins-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(../fonts/Poppins-Medium.ttf) format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url(../fonts/Poppins-Bold.ttf) format('truetype'); }

:root {
  --f: 'Poppins', 'DejaVu Sans', system-ui, sans-serif;
  --bg0: #040a18; --bg1: #081430; --bg2: #0c1b3e; --bg3: #12285a;
  --altin: #f2c94c; --altin2: #ffd772; --altin3: #c99a2e; --altin-k: #2a1c02;
  --yazi: #f6f2e7; --ikinci: #c9cfdd; --sonuk: #a3aec8;
  --cizgi: rgba(242, 201, 76, .26); --cizgi2: rgba(150, 180, 255, .16);
  --kirmizi: #e5383b; --yesil: #3ddc84;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { font-family: var(--f); font-weight: 500; color: var(--yazi); background: radial-gradient(120% 90% at 70% 0%, #0f2350, #050c1e 70%) #050c1e; overflow: hidden;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sayi { font-variant-numeric: tabular-nums; }
.app { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transition: opacity .3s; }
body.yukleniyor .app { opacity: 0; }

/* ---------- üst çubuk ---------- */
.ust { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 20px; flex: none; position: relative; z-index: 5;
  background: linear-gradient(180deg, #0b1a3d, #07122b); border-bottom: 1px solid var(--cizgi); }
.marka { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.marka .logo { width: 34px; height: 34px; flex: none; }
.marka b { font-size: 19px; font-weight: 700; letter-spacing: 2.5px; color: var(--altin); text-shadow: 0 1px 0 #6b4a0c; white-space: nowrap; }
.ust-orta { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.ust-sag { display: flex; align-items: center; gap: 8px; flex: none; }
.uye { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--cizgi2); font-size: 13px; max-width: 170px; }
.uye i { width: 8px; height: 8px; border-radius: 50%; background: #9aa; flex: none; }
.uye span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bakiye { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid var(--cizgi); }
.bakiye .para { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe8a0, #e0aa36 60%, #9c6a12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.bakiye .para svg { width: 22px; height: 22px; }
.bakiye .bm { display: flex; align-items: baseline; gap: 9px; }
.bakiye .bk { font-size: 12px; color: var(--ikinci); letter-spacing: .5px; }
.bakiye b { font-size: 17px; font-weight: 700; color: #ffe7a6; letter-spacing: .3px; }
.bakiye.flas { animation: flas 1s ease-out; }
@keyframes flas { 30% { box-shadow: 0 0 0 3px rgba(61, 220, 132, .9), 0 0 18px rgba(61, 220, 132, .7); } }
.ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #f0dfa8; background: rgba(0, 0, 0, .32); border: 1px solid var(--cizgi2); flex: none; transition: background .2s, transform .1s; }
.ikon:hover { background: rgba(0, 0, 0, .5); } .ikon:active { transform: scale(.94); }
.ikon svg.i { width: 19px; height: 19px; }
#btnSes .ses-kapali, #btnTam .tam-cik { display: none; }
#btnSes.kapali .ses-acik { display: none; } #btnSes.kapali .ses-kapali { display: block; }
#btnTam.acik .tam-gir { display: none; } #btnTam.acik .tam-cik { display: block; }

/* tur adımları */
.adimlar { list-style: none; display: flex; align-items: center; gap: 6px; }
.adimlar li { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); color: #aeb8cf; white-space: nowrap; position: relative; transition: background .3s, border-color .3s; }
.adimlar li + li::before { content: ''; position: absolute; left: -7px; top: 50%; width: 7px; height: 2px; background: rgba(255, 255, 255, .16); }
.adimlar li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .1); color: #c9cfdd; }
.adimlar li i svg.i { width: 13px; height: 13px; stroke-width: 3; }
.adimlar li b { font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }
.adimlar li.bitti { color: #cfd6e6; } .adimlar li.bitti i { background: rgba(61, 220, 132, .22); color: var(--yesil); }
.adimlar li.simdi { color: #fff; border-color: rgba(255, 215, 114, .8); background: linear-gradient(180deg, rgba(242, 201, 76, .28), rgba(242, 201, 76, .12)); }
.adimlar li.simdi i { background: var(--altin); color: var(--altin-k); }
.adimlar li.simdi.yaris { border-color: rgba(229, 56, 59, .9); background: linear-gradient(180deg, rgba(229, 56, 59, .4), rgba(229, 56, 59, .18)); }
.adimlar li.simdi.yaris i { background: var(--kirmizi); color: #fff; }

/* ---------- gövde ---------- */
.govde { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 14px; }
.panel { background: linear-gradient(180deg, rgba(16, 34, 76, .96), rgba(9, 21, 49, .97)); border: 1px solid var(--cizgi2); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06); }
.etiket { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ikinci); }
.sahne { flex: 1; min-height: 180px; position: relative; overflow: hidden; background: #0b1530; border-radius: 18px; border: 1px solid rgba(242, 201, 76, .3); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.sahne canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sahne-yukle { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--ikinci);
  background: radial-gradient(80% 80% at 50% 40%, #13285a, #070f24); transition: opacity .5s; }
.sahne-yukle i { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(242, 201, 76, .25); border-top-color: var(--altin); animation: don 1s linear infinite; }
.sahne-yukle.bitti { opacity: 0; pointer-events: none; }
@keyframes don { to { transform: rotate(360deg); } }
.alt { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; }

/* sahne üstü */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sonuc-kart { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; min-width: 300px; max-width: calc(100% - 32px);
  background: linear-gradient(180deg, rgba(6, 14, 34, .9), rgba(6, 14, 34, .8)); border: 1px solid rgba(242, 201, 76, .55); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: gir .35s ease-out; }
.sonuc-kart .bas { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; color: var(--altin); }
.sonuc-kart .bas svg.i { width: 18px; height: 18px; }
.sonuc-kart .kaz { display: flex; align-items: center; gap: 10px; }
.sonuc-kart .kaz .no { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
.sonuc-kart .kaz b { font-size: 20px; font-weight: 700; color: #fff; }
.sonuc-kart .kaz em { font-style: normal; font-size: 18px; font-weight: 700; color: var(--altin2); margin-left: auto; padding-left: 12px; }
.sonuc-kart ol { list-style: none; display: flex; gap: 12px; font-size: 12.5px; color: var(--ikinci); flex-wrap: wrap; }
.sonuc-kart ol li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sonuc-kart ol .no { width: 20px; height: 20px; font-size: 11px; border-radius: 5px; }
.sonuc-kart ol b { color: #fff; }
@keyframes gir { from { opacity: 0; transform: translateY(-6px); } }
.canli-sira { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(6, 14, 34, .82); border: 1px solid rgba(229, 56, 59, .6); }
.canli-sira .cr { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--kirmizi); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; }
.canli-sira .cr i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: yanip 1s infinite; }
.canli-sira .sure { font-size: 15px; font-weight: 700; color: var(--altin2); min-width: 52px; }
.canli-sira ol { list-style: none; display: flex; gap: 4px; }
.canli-sira ol .no { width: 24px; height: 24px; font-size: 12.5px; border-radius: 6px; transition: transform .25s; }
@keyframes yanip { 50% { opacity: .35; } }
.foto { display: none !important; } /* ADIM 184: foto-finiş kaldırıldı */ .foto-eski { position: absolute; right: 16px; bottom: 16px; width: 360px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); background: #e9e3d5; animation: gir .35s ease-out; pointer-events: auto; cursor: zoom-in; }
.foto:hover { border-color: rgba(255, 215, 114, .8); }
.foto .fb { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: rgba(8, 10, 14, .9); font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; color: #fff; }
.foto .fb span + span { color: #ffcf6b; }
.foto .resim { position: relative; height: 150px; }
.foto canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto canvas.banyo { animation: banyo 1.1s cubic-bezier(.3, .7, .3, 1); }
@keyframes banyo { 0% { clip-path: inset(0 0 0 100%); filter: brightness(1.9) contrast(.6); } 70% { filter: brightness(1.15) contrast(.9); } 100% { clip-path: inset(0 0 0 0); filter: none; } }
.foto .cizgi { display: none; }
.foto-buyuk { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); background: #e9e3d5; margin: 4px 0 12px; }
.foto-buyuk canvas { display: block; width: 100%; height: auto; }
.foto-tablo td .no { display: inline-grid; vertical-align: -5px; margin-right: 4px; }
.foto-not { font-size: 12px !important; color: var(--sonuk) !important; margin-top: 10px; }
.pencere:has(.foto-buyuk) { width: min(820px, 100%); }
.foto .cizgi { position: absolute; top: 0; bottom: 0; width: 2px; background: #e5383b; box-shadow: 0 0 6px rgba(229, 56, 59, .8); }
.foto .et { position: absolute; bottom: 16px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.foto #fotoE1 { right: 6px; } .foto #fotoE2 { left: 6px; }
.foto .fa { display: flex; justify-content: space-between; padding: 5px 10px; background: rgba(8, 10, 14, .9); font-size: 11.5px; color: #e6e9ef; }
.foto .fa b { color: #fff; }
.bitis-et { position: absolute; left: -999px; padding: 3px 8px; border-radius: 5px; background: rgba(6, 14, 34, .8); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; transform: translate(-50%, -100%); white-space: nowrap; }
.kazan-bant { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); min-width: 260px; text-align: center; border-radius: 18px; padding: 14px 26px; background: rgba(5, 14, 38, .92); border: 2px solid var(--altin); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); animation: bant .45s cubic-bezier(.2, 1.4, .4, 1); }
.kazan-bant b { display: block; font-size: 21px; letter-spacing: 2.5px; color: #f6d36b; }
.kazan-bant span { display: block; font-size: 30px; font-weight: 700; color: var(--yesil); text-shadow: 0 0 18px rgba(61, 220, 132, .5); }
.kazan-bant small { display: block; font-size: 12.5px; color: var(--ikinci); margin-top: 2px; }
.kazan-bant.kaybetti { border-color: rgba(229, 56, 59, .8); } .kazan-bant.kaybetti b { color: #ff9a8c; }
@keyframes bant { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }

/* forma simgesi + numara rozeti */
.forma { width: 38px; height: 34px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.no { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 15px; font-weight: 700; background: var(--c); color: var(--ck); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .35); }
.no.kucuk { width: 22px; height: 22px; border-radius: 6px; font-size: 12px; }

/* ---------- oran tablosu ---------- */
.pano { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #0b1430, #060b1b); border-color: rgba(255, 190, 80, .22); min-width: 0; }
.pano-bas { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pano-bas h2 { font-size: 15px; font-weight: 700; letter-spacing: 2.4px; color: #ffcf6b; white-space: nowrap; }
.pano-bas h2 .yn { color: #fff; }
.pano-bas .sosyal { margin-left: auto; }
.acik-rozet { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; background: rgba(61, 220, 132, .14); border: 1px solid rgba(61, 220, 132, .5); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; color: #7ff0b0; white-space: nowrap; }
.acik-rozet.kapali { background: rgba(229, 56, 59, .14); border-color: rgba(229, 56, 59, .5); color: #ff9a9a; }
.acik-rozet.kapali .yanip { background: var(--kirmizi); box-shadow: 0 0 10px var(--kirmizi); }
.yanip { width: 8px; height: 8px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 10px var(--yesil); display: inline-block; animation: yanip 1.4s infinite; }
.kolonlar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kolon { position: relative; border-radius: 14px; padding: 10px 10px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #0d1834, #070d1f); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .2s, box-shadow .2s, transform .08s; }
.kolon:active { transform: scale(.985); }
.kolon .ust-s { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.kolon .no { width: 34px; height: 34px; font-size: 18px; border-radius: 9px; }
.kolon .tutar-r { height: 24px; padding: 0 9px; border-radius: 12px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #e6fff1; background: #1c7a4a; }
.kolon .ad { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kolon .jk { font-size: 11.5px; color: var(--sonuk); margin-top: -6px; white-space: nowrap; }
.led { width: 100%; text-align: center; padding: 3px 0 1px; border-radius: 9px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: 1px; color: #ffbe55;
  text-shadow: 0 0 10px rgba(255, 170, 60, .55), 0 0 2px rgba(255, 220, 150, .8); background-color: #05080f; background-image: radial-gradient(rgba(255, 180, 70, .13) 1px, transparent 1.3px); background-size: 4px 4px; border: 1px solid rgba(255, 190, 80, .18); }
.led small { font-size: 18px; margin-left: 2px; color: #e9a546; }
.kolon .durumu { width: 100%; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ikinci); border: 1px dashed rgba(201, 207, 221, .32); }
.kolon .durumu svg.i { width: 14px; height: 14px; stroke-width: 3; }
.kolon.alindi .durumu { border: 1px solid rgba(61, 220, 132, .55); background: rgba(61, 220, 132, .1); color: var(--yesil); }
.kolon.sec { border-color: rgba(255, 215, 114, .95); box-shadow: 0 0 0 1px rgba(255, 215, 114, .4), 0 0 22px rgba(242, 201, 76, .25); background: linear-gradient(180deg, #2a2208, #0d1020); }
.kolon.sec .durumu { border: 0; background: linear-gradient(#ffe08a, #dfa93a); color: var(--altin-k); }
.kolon .kazanan-izi { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 6px; background: #1b6b42; color: #d9ffe9; white-space: nowrap; }
.kolon .sira-iz { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--altin2); }
.kolonlar.kilit .kolon { cursor: default; }
.kolonlar.kilit .kolon:not(.alindi) .durumu { opacity: .45; }
.kolon.kazandi { border-color: var(--yesil); box-shadow: 0 0 0 1px rgba(61, 220, 132, .5), 0 0 26px rgba(61, 220, 132, .3); }

/* ---------- kontrol ---------- */
.kontrol { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; min-width: 0; }
.ust-k { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ust-k .halka { width: 58px; height: 58px; flex: none; }
.ust-k .dm { flex: 1; min-width: 0; }
.ust-k b.bs { display: block; font-size: 16px; letter-spacing: 1.6px; color: var(--altin2); white-space: nowrap; }
.ust-k span.as { display: block; font-size: 12px; color: var(--ikinci); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-k span.as b { color: #fff; }
.ust-k.yaris b.bs { color: #fff; } .ust-k.sonuc b.bs { color: var(--altin); }
.ust-k .canli-nokta { width: 16px; height: 16px; border-radius: 50%; background: var(--kirmizi); margin: 0 18px 0 18px; flex: none; box-shadow: 0 0 0 5px rgba(229, 56, 59, .25), 0 0 16px rgba(229, 56, 59, .8); animation: yanip 1s infinite; }
.ust-k svg.buyuk { width: 34px; height: 34px; color: var(--altin); margin: 0 12px; }
.sayac-cubuk { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 5px; }
.sayac-cubuk i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #e2a93a, #ffe596); transform-origin: left center; transition: transform .25s linear; }
.sayac-cubuk.son i { background: linear-gradient(90deg, #e5383b, #ff8a5b); }
.sosyal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ikinci); white-space: nowrap; min-width: 0; }
.sosyal svg.i { width: 18px; height: 18px; color: var(--altin); }
.sosyal b { color: #fff; font-weight: 700; }
.sosyal span { overflow: hidden; text-overflow: ellipsis; }
.sosyal-tel { display: none !important; }
.tutar-satir { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }   /* ADIM 184: fişler kendi satırında, tam genişlik */
.tutar-satir .tutar { justify-content: center; }
.tutar { display: flex; align-items: center; gap: 6px; }
.tutar .d { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--altin); border: 2px solid var(--altin3); background: rgba(0, 0, 0, .25); }
.tutar .d:active { transform: scale(.93); }
.tutar .d svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
.tutar .deger { width: 72px; height: 38px; border-radius: 12px; text-align: center; font-size: 18px; font-weight: 700; background: rgba(0, 0, 0, .38); border: 1px solid var(--cizgi); color: #fff; outline: none; }
.tutar .deger:focus { border-color: var(--altin); }
.fisler { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 4px; min-width: 0; }
.fis { height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 700; background: rgba(0, 0, 0, .3); border: 1px solid var(--cizgi2); color: #fff; min-width: 0; padding: 0 2px; }   /* ADIM 184: büyük fiş düğmeleri */
.fis i { width: 11px; height: 11px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); flex: none; }
.fis { border-color: rgba(242, 201, 76, .4); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .28)); }   /* ADIM 184: belirgin */
.fis.on { background: linear-gradient(#ffe08a, #dfa93a); color: var(--altin-k); border-color: transparent; box-shadow: 0 0 14px rgba(242, 201, 76, .4); }
.fis.on i { background: var(--altin-k); box-shadow: none; }
.bahis-koy { width: 100%; border: 0; border-radius: 15px; padding: 9px 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--f); color: var(--altin-k);
  background: linear-gradient(180deg, #ffe596 0%, #f2c94c 45%, #d39a2c 100%); box-shadow: 0 4px 0 #8a5a12, 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .08s, filter .2s; }
.bahis-koy:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a12, 0 6px 14px rgba(0, 0, 0, .4); }
.bahis-koy b { font-size: 18px; font-weight: 700; letter-spacing: 2.5px; line-height: 1.25; }
.bahis-koy small { font-size: 12.5px; font-weight: 500; color: #4a3305; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bahis-koy.kapali { background: linear-gradient(180deg, #34405e, #252f49); color: #d9deea; box-shadow: 0 3px 0 #141a2c, inset 0 1px 0 rgba(255, 255, 255, .12); cursor: default; }
.bahis-koy.kapali small { color: #b9c1d3; }
.bahis-koy.istek { filter: brightness(.9); pointer-events: none; }
.bahislerim.kisa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; min-height: 34px;
  background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .28); font-size: 12px; color: var(--ikinci); white-space: nowrap; min-width: 0; }
.bahislerim.kisa.bos { background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .08); }
.bahislerim.kisa b { color: #fff; } .bahislerim.kisa b.yesil { color: var(--yesil); }
.bahislerim .alindi { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--yesil); }
.bahislerim .alindi svg.i { width: 14px; height: 14px; stroke-width: 3; }
.bahislerim .bt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bahislerim .eylem { flex: none; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #ffd772; border: 1px solid rgba(242, 201, 76, .45); background: rgba(0, 0, 0, .25); }
.bahislerim .eylem:active { transform: scale(.96); }

/* ---------- alt şerit ---------- */
.ayak { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 8px 14px; border-radius: 14px; background: rgba(9, 21, 49, .92); border: 1px solid var(--cizgi2); }
.son { display: flex; align-items: center; gap: 10px; min-width: 0; }
.son .etiket { flex: none; }
.son ol { list-style: none; display: flex; gap: 7px; min-width: 0; overflow: hidden; max-width: 640px; }
.son li { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; flex: none; }
.son li .no { width: 24px; height: 24px; border-radius: 50%; font-size: 12.5px; }
.son li b { font-size: 13px; color: var(--altin2); font-weight: 700; }
.son li small { font-size: 11px; color: var(--sonuk); }
.son li:first-child { border-color: rgba(242, 201, 76, .45); }
.akis { display: flex; align-items: center; gap: 10px; min-width: 0; }
.akis .etiket { display: flex; align-items: center; gap: 7px; flex: none; }
.akis ol { list-style: none; display: flex; gap: 8px; min-width: 0; overflow: hidden; }
.akis li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; flex: none; font-size: 12.5px; }
.akis li.yeni { animation: kay .5s ease-out; border-color: rgba(242, 201, 76, .45); }
.akis li.ben { border-color: rgba(255, 215, 114, .7); }
.akis li.kazandi { border-color: rgba(61, 220, 132, .6); background: rgba(61, 220, 132, .12); }
@keyframes kay { from { opacity: 0; transform: translateX(-12px); } }
.akis .kim { color: var(--ikinci); }
.akis li b { color: #fff; font-weight: 700; }
.akis li em { font-style: normal; color: var(--yesil); font-weight: 700; }
.akis svg.ok { width: 14px; height: 14px; color: var(--altin); }
.akis .num { color: var(--ikinci); }
.akis ol, .son ol { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.adil { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ikinci); white-space: nowrap; padding: 4px 6px; border-radius: 8px; }
.adil:hover { background: rgba(0, 0, 0, .25); color: #fff; }
.adil svg.i { width: 15px; height: 15px; color: var(--yesil); }

/* ---------- pencereler ---------- */
.perde { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; }
.pencere { position: relative; width: min(560px, 100%); max-height: min(86vh, 760px); overflow: auto; border-radius: 18px; padding: 18px; background: linear-gradient(#10306e, #081c48); border: 1px solid rgba(231, 194, 91, .5); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); user-select: text; -webkit-user-select: text; }
.pencere h3 { font-weight: 700; font-size: 20px; color: #f6d36b; margin-bottom: 10px; padding-right: 40px; }
.pencere p { font-size: 14px; line-height: 1.45; color: #eee6cc; }
.pencere .kapat { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 24px; line-height: 1; }
.pencere code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; background: rgba(0, 0, 0, .35); border: 1px solid rgba(231, 194, 91, .25); border-radius: 8px; padding: 7px 9px; display: block; margin: 3px 0 6px; }
.adil-liste dt { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sonuk); margin-top: 10px; } .adil-liste dd { margin: 4px 0; } .adil-liste small { color: var(--ikinci); }
.pencere .dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pencere .dg { border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 700; background: rgba(0, 0, 0, .35); border: 1px solid rgba(231, 194, 91, .45); text-decoration: none; color: inherit; }
.pencere .dg.ana { background: linear-gradient(#f4d77a, #d9a83a); color: var(--altin-k); border-color: transparent; }
.pencere .dg.kirmizi { background: radial-gradient(circle at 50% 30%, #ff6b5b, #c0261c 70%); color: #fff; border-color: #f2c94c; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th { text-align: left; font-size: 11px; color: var(--sonuk); text-transform: uppercase; padding: 4px 6px; }
.tablo td { padding: 6px; border-top: 1px solid rgba(231, 194, 91, .15); white-space: nowrap; }
.tablo td.kazandi { color: var(--yesil); font-weight: 700; } .tablo td.kz { color: #fff; font-weight: 700; }
.pencere .bos { opacity: .7; padding: 14px 0; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 520px); border-radius: 14px; padding: 10px 16px; font-size: 14px; background: rgba(5, 14, 38, .95); border: 1px solid rgba(231, 194, 91, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); text-align: center; }
.toast.hata { border-color: #ff8a80; }

/* ---------- duyarlı ---------- */
@media (max-width: 1280px) { .alt { grid-template-columns: minmax(0, 1fr) 340px; } .led { font-size: 28px; } .led small { font-size: 15px; } .kolon .jk { display: none; } .son ol { max-width: 420px; } }
@media (max-width: 1080px) { .ust-orta .adimlar li b { display: none; } .ust-orta .adimlar li { padding: 0 5px; } .kolonlar { gap: 6px; } .kolon { padding: 8px 6px; } .kolon .ad { font-size: 12.5px; } .led { font-size: 24px; } .forma { width: 30px; height: 27px; } .kolon .no { width: 28px; height: 28px; font-size: 15px; } .pano-bas .sosyal { display: none; } }
@media (max-width: 900px) and (min-width: 601px) {
  .alt { grid-template-columns: 1fr; } .kolonlar { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ayak { grid-template-columns: minmax(0, 1fr); gap: 6px; } .adil { display: none; }
  body { overflow: auto; } .app { position: static; min-height: 100%; } .sahne { flex: none; height: 46vh; }
}
/* telefon (dikey) */
@media (max-width: 600px) {
  /* ADIM 184 — KULLANICI 23:09 "diğer oyunlar gibi ekrana sığdırma tam ekran": telefonda da sayfa kaymaz, oyun ekrana sığar (sahne kalan yüksekliği alır) */
  body { overflow: hidden; } .app { position: fixed; inset: 0; }
  .ust { height: 50px; padding: 0 10px; gap: 8px; }
  .marka .logo { width: 30px; height: 30px; } .marka b { font-size: 14px; letter-spacing: 1.4px; }
  /* ADIM 184: uzun başlık (MT "TELLIEQA TAŻ-ŻWIEMEL TAD-DEHEB", EN) sağdaki bakiye / ses düğmelerini ekran dışına itip sayfayı yana kaydırıyordu → başlık daralır, … ile kesilir */
  .marka { flex: 1 1 auto; min-width: 0; } .marka b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ust-orta, .uye { display: none !important; }
  .bakiye { height: 36px; padding: 0 10px 0 5px; gap: 6px; } .bakiye .para { width: 22px; height: 22px; } .bakiye .para svg { width: 18px; height: 18px; }
  .bakiye .bm { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05; } .bakiye .bk { font-size: 9.5px; letter-spacing: .6px; } .bakiye b { font-size: 15px; }
  .ust .ikon { width: 34px; height: 34px; }
  .govde { padding: 0 0 8px; gap: 7px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* sığmazsa (çok kısa ekran) yalnız gövde kayar */
  .sahne { flex: 1 0 auto; height: auto; min-height: 210px; max-height: 60vh; border-radius: 0; border: 0; border-bottom: 1px solid rgba(242, 201, 76, .35); }
  .sonuc-kart { left: 8px; top: 8px; min-width: 0; padding: 6px 9px; gap: 3px; border-radius: 10px; }
  .sonuc-kart .bas { font-size: 9.5px; letter-spacing: 1.2px; } .sonuc-kart .bas svg.i { width: 13px; height: 13px; }
  .sonuc-kart .kaz { gap: 6px; } .sonuc-kart .kaz .no { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; } .sonuc-kart .kaz b { font-size: 13.5px; } .sonuc-kart .kaz em { font-size: 13px; }
  .sonuc-kart ol { display: none; }
  .canli-sira { left: 8px; top: 8px; padding: 5px 8px; gap: 6px; } .canli-sira .sure { font-size: 12.5px; min-width: 40px; } .canli-sira ol .no { width: 18px; height: 18px; font-size: 10.5px; border-radius: 4px; } .canli-sira .cr { height: 20px; font-size: 10px; padding: 0 6px; }
  .foto { right: 8px; bottom: 8px; width: 160px; border-radius: 8px; } .foto .fb { padding: 2px 6px; font-size: 9px; letter-spacing: 1px; } .foto .resim { height: 67px; } .foto .fa, .foto .et { display: none; }
  .bitis-et { display: none; }
  .kazan-bant { min-width: 200px; padding: 8px 16px; } .kazan-bant b { font-size: 15px; } .kazan-bant span { font-size: 22px; } .kazan-bant small { font-size: 11px; }
  .alt { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
  .pano { padding: 0; background: none; border: 0; box-shadow: none; }
  .pano-bas { display: none; }
  .kolonlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kolon { padding: 6px 7px 6px; gap: 3px; align-items: stretch; text-align: left; border-radius: 11px; }
  .kolon .ust-s { min-height: 26px; } .kolon .no { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; } .forma { width: 28px; height: 25px; }
  .kolon .ad { font-size: 12.5px; } .kolon .jk { display: none; }
  .led { font-size: 21px; padding: 0; border-radius: 7px; } .led small { font-size: 11px; }
  .kolon .durumu { display: none; }
  .kolon .tutar-r { position: absolute; top: -7px; right: -4px; height: 19px; padding: 0 7px; font-size: 10.5px; }
  .kolon.sec::after { content: attr(data-sec); position: absolute; top: -7px; right: -4px; height: 19px; padding: 0 7px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--altin); color: var(--altin-k); }
  .kolon.sec.alindi::after { display: none; }
  .kolon .kazanan-izi { font-size: 8.5px; padding: 1px 6px; top: -8px; }
  .kontrol { padding: 0; background: none; border: 0; box-shadow: none; gap: 8px; }
  .ust-k { padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--cizgi); gap: 10px; }
  .ust-k .halka { width: 50px; height: 50px; } .ust-k b.bs { font-size: 15px; }
  .sosyal-tel { display: none !important; }   /* ADIM 184: yer — oyuncu sayısı durum kutusunun altında değil */
  .tutar .d { width: 32px; height: 32px; } .tutar .deger { width: 56px; height: 34px; font-size: 16px; }
  .fis { height: 42px; font-size: 14px; } .fis i { width: 10px; height: 10px; }
  .bahis-koy { padding: 7px 10px 6px; border-radius: 13px; } .bahis-koy b { font-size: 16px; } .bahis-koy small { font-size: 12px; }
  .ayak { margin: 0 10px; padding: 5px 10px; grid-template-columns: minmax(0, 1fr); gap: 6px; } .ayak .akis { display: none; }   /* canlı bahis şeridi telefonda gizli (yer); adil oyun bağlantısı kalır */
  .adil { justify-content: flex-start; padding: 0; font-size: 11px; }
  .akis .etiket { font-size: 10px; letter-spacing: 1.2px; } .akis li { font-size: 11.5px; padding: 2px 8px; } .akis .num { display: none; }
  .son { gap: 8px; } .son ol { gap: 5px; } .son li { padding: 3px 8px 3px 3px; gap: 5px; } .son li .no { width: 21px; height: 21px; font-size: 11px; } .son li b { font-size: 12px; } .son li small { display: none; }
}
@media (max-width: 370px) { .marka b { display: none; } .fis { font-size: 12.5px; } }
/* telefon / tablet yatay: sahne solda, panel sağda */
@media (max-height: 560px) and (min-width: 601px) {
  .ust { height: 46px; padding: 0 12px; } .marka b { font-size: 15px; } .ust-orta .adimlar li { height: 28px; } .ikon { width: 34px; height: 34px; } .bakiye { height: 34px; } .bakiye b { font-size: 15px; }
  .govde { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .sahne { grid-row: 1 / 3; min-height: 0; border-radius: 14px; }
  .alt { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
  .pano { padding: 8px; gap: 6px; } .pano-bas { display: none; }
  .kolonlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .kolon { padding: 5px; gap: 3px; } .kolon .jk, .kolon .durumu { display: none; } .kolon .ust-s { min-height: 24px; }
  .kolon .no { width: 22px; height: 22px; font-size: 12px; } .forma { width: 24px; height: 22px; } .kolon .ad { font-size: 11.5px; } .led { font-size: 20px; } .led small { font-size: 11px; }
  .kolon .tutar-r { position: absolute; top: -6px; right: -3px; height: 17px; padding: 0 6px; font-size: 10px; }
  .kontrol { padding: 8px; gap: 6px; } .ust-k .halka { width: 42px; height: 42px; } .ust-k b.bs { font-size: 13px; } .ust-k span.as { font-size: 11px; }
  .tutar .d { width: 30px; height: 30px; } .tutar .deger { width: 52px; height: 30px; font-size: 15px; } .fis { height: 34px; font-size: 12.5px; }
  .bahis-koy { padding: 5px 8px 4px; } .bahis-koy b { font-size: 14px; } .bahis-koy small { font-size: 11px; }
  .ayak { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); padding: 5px 8px; gap: 4px; } .ayak .adil, .ayak .akis { display: none; }
  .son li small { display: none; } .sonuc-kart ol { display: none; } .foto { width: 220px; } .foto .resim { height: 92px; }
}
/* tam ekran: kenar boşlukları azalır */
body.tam .govde { padding: 10px 12px; }