/* AVRUPA RULETİ — "Altın Salon" (Altın 777 / Plinko ile aynı aile). Bilgisayar · tablet · telefon (dikey / yatay) · tam ekran. */
@font-face { font-family: 'Alfa Slab One'; font-display: swap; src: url(../fonts/alfa-slab-one-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+2000-206F; }
@font-face { font-family: 'Alfa Slab One'; font-display: swap; src: url(../fonts/alfa-slab-one-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+1E00-1EFF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+2000-206F; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+1E00-1EFF; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+2000-206F; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+1E00-1EFF; }

:root {
  --altin: #f2c94c; --altin-k: #3a2a06; --yazi: #f6efd8; --sonuk: rgba(246,239,216,.72);
  --panel: rgba(4,26,17,.72); --cizgi2: rgba(231,194,91,.3); --cizgi: rgba(246,222,150,.75); --masa-yazi: #f8eccb;
  --kece: radial-gradient(900px 420px at 50% 20%, #1b8553, #0d5636 80%);
  --kirmizi: linear-gradient(#e2433b, #a8171f); --siyah: linear-gradient(#333, #0d0d0d); --yesil: linear-gradient(#1fb066, #0b6b3a);
  --btn: radial-gradient(circle at 50% 30%, #ff6b5b, #c0261c 70%); --yesil-n: #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: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 600; color: var(--yazi); overflow: hidden;
  background: radial-gradient(1200px 700px at 50% 40%, #146b45, #0a3a26 70%) #0a3a26; 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 { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
em { font-style: normal; }
.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 .25s; }
body.yukleniyor .app { opacity: 0; }

/* üst çubuk */
.ust { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 60px; flex: none; }
.ust-sol, .ust-sag { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.ust-sag { justify-content: flex-end; }
.uye { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: 17px; background: rgba(0,0,0,.28); border: 1px solid var(--cizgi2); max-width: 220px; min-width: 0; }
.uye i { width: 9px; height: 9px; border-radius: 50%; background: var(--yesil-n); flex: none; }
.uye-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uye b { font-size: 13px; padding: 2px 7px; border-radius: 6px; background: var(--altin); color: var(--altin-k); flex: none; }
.uye.misafir i { background: #9aa; } .uye.misafir b { background: #e0e0e0; }
.bakiye { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 18px; font-weight: 800; background: rgba(0,0,0,.28); border: 1px solid var(--cizgi2); color: #ffe9a8; white-space: nowrap; }
.bakiye svg { width: 18px; height: 18px; color: var(--altin); }
.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); } }
.baslik { flex: none; text-align: center; font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 32px; letter-spacing: 2px; color: #f6d36b; white-space: nowrap;
  text-shadow: 0 3px 0 #8a5a12, 0 0 18px rgba(246,211,107,.45); line-height: 1; }
.ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); border: 1px solid var(--cizgi2); color: #f2e3b0; flex: none; transition: transform .12s, background .2s; }
.ikon:hover { background: rgba(0,0,0,.45); } .ikon:active { transform: scale(.94); }
.ikon svg { width: 20px; height: 20px; }
#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; }
#btnCanli { display: none; }

/* gövde: çark | masa | canlı */
.govde { flex: 1; display: grid; grid-template-columns: 372px minmax(0, 1fr) 290px; gap: 16px; padding: 0 18px 18px; min-height: 0; }
.panel { border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; background: var(--panel); border: 1px solid var(--cizgi2); }
.etk { font-size: 14px; opacity: .8; letter-spacing: .6px; text-transform: uppercase; }
.dag-adet { opacity: .75; text-transform: none; letter-spacing: 0; }

/* çark */
.cark-kutu { position: relative; flex: 1 1 0; min-height: 150px; display: grid; place-items: center; }
.cark-kutu canvas { display: block; }
.cark-sonuc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; min-width: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: clamp(16px, 4.2vmin, 40px); border: 3px solid var(--altin); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 24px rgba(242,201,76,.65); pointer-events: none; animation: sonuc-gir .45s cubic-bezier(.2,1.6,.4,1); }
.cark-sonuc.k { background: var(--kirmizi); } .cark-sonuc.s { background: var(--siyah); } .cark-sonuc.y { background: var(--yesil); }
@keyframes sonuc-gir { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.sol-alt { display: flex; flex-direction: column; gap: 10px; flex: none; }
.sonlar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; min-height: 20px; }
.top { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.3); }
.top.k { background: var(--kirmizi); } .top.s { background: var(--siyah); } .top.y { background: var(--yesil); }
.sonlar .top:first-child { box-shadow: 0 0 0 3px var(--altin), 0 0 14px var(--altin); }
.sonlar .bos { grid-column: 1 / -1; font-size: 15px; opacity: .6; }
.cubuk { display: flex; height: 22px; border-radius: 8px; overflow: hidden; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.25); }
.cubuk span { display: grid; place-items: center; color: #fff; white-space: nowrap; overflow: hidden; transition: width .6s; }
.cubuk .a { background: rgba(255,255,255,.14); } .cubuk .b { background: rgba(0,0,0,.35); } .cubuk .z { background: var(--yesil); }
.cubuk .k { background: var(--kirmizi); } .cubuk .s { background: var(--siyah); }
.toplam { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.toplam b { font-size: 20px; color: var(--altin); }
.cevir { border-radius: 16px; padding: 12px; text-align: center; font-family: 'Alfa Slab One', serif; font-size: 28px; letter-spacing: 1.5px; line-height: 1.1;
  background: var(--btn); color: #fff6e0; box-shadow: 0 6px 0 #7a1410, 0 0 0 3px #f2c94c inset; transition: transform .08s, filter .2s; }
.cevir small { display: block; font-family: 'Barlow Condensed'; font-weight: 600; font-size: 16px; letter-spacing: 0; opacity: .88; margin-top: 2px; }
.cevir:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a1410, 0 0 0 3px #f2c94c inset; }
.cevir.durdur { background: radial-gradient(circle at 50% 30%, #f6d36b, #c08a1e 70%); color: #3a2a06; box-shadow: 0 6px 0 #6b4a0e, 0 0 0 3px #fff3c4 inset; }
.cevir.mesgul { filter: grayscale(.45) brightness(.82); cursor: default; }
.alt-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
.hizli-mod { display: inline-flex; align-items: center; cursor: pointer; }
.hizli-mod input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hizli-mod span, .oto-btn, .mini { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; border: 1px solid transparent; opacity: .8; white-space: nowrap; }
.hizli-mod svg, .oto-btn svg, .mini svg { width: 15px; height: 15px; }
.hizli-mod svg, .mini#hizliTel svg { fill: currentColor; stroke: none; }
.hizli-mod input:checked + span, .oto-btn.on, .mini.on { opacity: 1; color: #ffe08a; border-color: rgba(242,201,76,.5); background: rgba(242,201,76,.12); }
.hizli-mod input:focus-visible + span { outline: 2px solid var(--altin); }

/* masa sütunu */
.orta { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.tel-ust, .tel-alt { display: none; }
.serit { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; flex: none; }
.sekme { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; padding: 4px; background: rgba(0,0,0,.3); width: 230px; flex: none; }
.sekme button { text-align: center; padding: 6px; border-radius: 9px; font-size: 16px; color: var(--sonuk); }
.sekme button.on { background: linear-gradient(#f4d77a, #d9a83a); color: var(--altin-k); }
.sonuc { border-radius: 14px; padding: 5px 16px; font-size: 21px; font-weight: 800; white-space: nowrap; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.5);
  border: 1px solid var(--altin); color: var(--altin); animation: gir .3s ease-out; min-width: 0; overflow: hidden; }
.sonuc .top { width: 30px; font-size: 16px; flex: none; }
.sonuc.kaybetti { color: var(--sonuk); border-color: var(--cizgi2); }
.masa-cerceve { position: relative; border-radius: 18px; padding: 14px; background: var(--kece); border: 3px solid #e7c25b; box-shadow: 0 0 0 6px #3b2a0b, 0 0 0 8px #e7c25b, 0 18px 40px rgba(0,0,0,.45); margin: 0 8px; flex: none; }
.masa { display: grid; gap: 1px; position: relative; grid-template-columns: 1.15fr repeat(12, 1fr) 1.15fr; grid-template-rows: repeat(3, 62px) 44px 44px; cursor: pointer; touch-action: manipulation; }
.masa.kilit { cursor: default; }
.h { display: grid; place-items: center; outline: 1px solid var(--cizgi); font-weight: 800; font-size: 22px; color: var(--yazi); position: relative; transition: filter .15s; }
.h.k { background: var(--kirmizi); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.h.s { background: var(--siyah); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.h.y { background: var(--yesil); color: #fff; clip-path: polygon(34% 0, 100% 0, 100% 100%, 34% 100%, 0 50%); outline: none; }
.h.d { font-size: 17px; letter-spacing: .5px; color: var(--masa-yazi); }
.h .elmas { width: 46px; height: 24px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: block; }
.h .elmas.k { background: var(--kirmizi); } .h .elmas.s { background: var(--siyah); }
@media (hover: hover) { .masa:not(.kilit) .h:hover { filter: brightness(1.18); } }
.h.kazandi { box-shadow: inset 0 0 0 3px var(--altin), 0 0 18px var(--altin); z-index: 2; animation: kazandi 1s ease-in-out 3; }
.h.y.kazandi { filter: drop-shadow(0 0 8px var(--altin)) brightness(1.25); }
@keyframes kazandi { 50% { filter: brightness(1.35); } }
.fis { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font: 800 13px 'Barlow Condensed', sans-serif; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.6); z-index: 3; pointer-events: none; letter-spacing: -.2px;
  background: radial-gradient(circle, var(--c) 0 50%, transparent 51%), repeating-conic-gradient(from 8deg, #fff 0 14deg, var(--c) 14deg 45deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 5px 8px rgba(0,0,0,.35); animation: fis-gir .18s ease-out; }
.fis::before { content: ''; position: absolute; inset: 19%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.7); }
.fis.kazanan { box-shadow: 0 0 0 3px var(--altin), 0 0 16px var(--altin), 0 3px 0 rgba(0,0,0,.4); z-index: 4; }
.fis.kaybeden { opacity: .45; transition: opacity .4s; }
@keyframes fis-gir { from { transform: scale(1.5) translateY(-6px); opacity: 0; } }
.bant { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 16px; padding: 8px 24px; font-size: 34px; font-weight: 800; white-space: nowrap; z-index: 6;
  background: rgba(0,0,0,.72); border: 2px solid var(--altin); color: #f6d36b; pointer-events: none; box-shadow: 0 0 30px rgba(246,211,107,.45); animation: bant 2.2s ease-out forwards; }
@keyframes bant { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.85); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.pist-kutu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 18px; padding: 10px 14px;
  background: var(--kece); border: 1px solid var(--cizgi2); box-shadow: inset 0 0 30px rgba(0,0,0,.35); }
.pist-kutu svg { width: 100%; flex: 1 1 auto; min-height: 0; max-height: 200px; }
.pist-kutu .komsu { font-size: 14px; opacity: .9; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pist-kutu .komsu .mini { border-color: rgba(242,201,76,.45); opacity: 1; font-size: 14px; }
#pist .ph { cursor: pointer; } #pist .ph:hover path { filter: brightness(1.3); } #pist .bolge { cursor: pointer; fill: rgba(0,0,0,.18); transition: fill .15s; }
#pist .bolge:hover { fill: rgba(242,201,76,.16); } #pist text { pointer-events: none; }
body.pist-gorunum .masa-cerceve { display: none; }
body.pist-gorunum .pist-kutu svg { max-height: 360px; }
.fisler { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 10px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--cizgi2); flex: none; }
.fis-diz { display: flex; align-items: center; gap: 12px; }
.fis-diz .fis { position: relative; margin: 0; width: 54px; height: 54px; font-size: 16px; pointer-events: auto; cursor: pointer; transition: transform .15s; animation: none; }
.fis-diz .fis.on { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--altin), 0 0 18px var(--altin), 0 6px 10px rgba(0,0,0,.4); }
.dugme { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; opacity: .92; flex: none; }
.dugme span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cizgi2); background: rgba(0,0,0,.3); font-weight: 800; font-size: 16px; }
.dugme svg { width: 20px; height: 20px; }
.dugme:active span { transform: scale(.94); }
.dugme[disabled] { opacity: .4; cursor: default; }
.ara { width: 1px; align-self: stretch; background: var(--cizgi2); margin: 4px 2px; }

/* sağ sütun: istatistik + canlı */
.ist { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ist .satir { display: flex; gap: 4px; align-items: center; min-height: 30px; flex-wrap: nowrap; overflow: hidden; }
.ist .satir .top { width: 28px; font-size: 13px; flex: none; }
.ist .satir small { font-size: 11px; opacity: .75; margin: 0 3px 0 -1px; flex: none; }
.ist .satir .bos { font-size: 14px; opacity: .55; }
.canli h4 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin-top: 4px; }
.canli h4 i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 4px rgba(255,77,77,.2); animation: nabiz 1.6s infinite; flex: none; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 7px rgba(255,77,77,.06); } }
.canli h4 .kapat { display: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.35); font-size: 22px; line-height: 1; }
.canli .bas { display: grid; grid-template-columns: 1.1fr .8fr .6fr .9fr; font-size: 13px; opacity: .7; padding: 0 6px; text-transform: uppercase; }
.canli ul { list-style: none; display: flex; flex-direction: column; gap: 5px; overflow: hidden; flex: 1; min-height: 0; }
.canli li { display: grid; grid-template-columns: 1.1fr .8fr .6fr .9fr; align-items: center; border-radius: 9px; padding: 5px 6px; font-size: 16px; background: rgba(0,0,0,.25); }
.canli li.yeni { animation: gir .35s ease-out; }
.canli li.ben { background: rgba(242,201,76,.14); box-shadow: inset 0 0 0 1px rgba(242,201,76,.4); }
.canli li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canli li .top { width: 26px; font-size: 13px; }
.canli li .kz { color: #ffe08a; font-weight: 800; } .canli li .kb { opacity: .45; }
.adil { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; opacity: .88; padding: 4px; border-radius: 8px; flex: none; }
.adil:hover { opacity: 1; background: rgba(0,0,0,.2); }
.adil svg { width: 16px; height: 16px; flex: none; }
.say { text-align: center; font-size: 15px; opacity: .85; flex: none; }
.say:not(:empty)::before { content: '● '; color: var(--yesil-n); }
@keyframes gir { from { transform: translateY(-8px); opacity: 0; } }

/* pencere */
.perde { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; animation: perde .2s ease-out; }
@keyframes perde { from { opacity: 0; } }
.pencere { width: min(580px, 100%); max-height: min(86vh, 760px); overflow: auto; border-radius: 18px; padding: 18px; background: linear-gradient(#0d3a27, #072218); border: 1px solid rgba(231,194,91,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); position: relative; user-select: text; -webkit-user-select: text; }
.pencere h3 { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 24px; color: #f6d36b; margin-bottom: 10px; padding-right: 40px; }
.pencere p, .pencere li { font-size: 17px; line-height: 1.35; color: #eee6cc; }
.pencere ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.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 .satir { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.pencere label { font-size: 14px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.pencere code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; 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; }
.pencere input[type=text] { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(231,194,91,.35); border-radius: 8px; padding: 8px 9px; outline: none; }
.pencere .dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pencere .dg { border-radius: 12px; padding: 10px 16px; font-size: 18px; font-weight: 800; 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: var(--btn); color: #fff; border-color: #f2c94c; }
.pencere table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pencere th { text-align: left; font-size: 13px; opacity: .7; text-transform: uppercase; padding: 4px 6px; }
.pencere td { padding: 5px 6px; border-top: 1px solid rgba(231,194,91,.15); white-space: nowrap; }
.pencere td .top { width: 26px; font-size: 13px; display: inline-grid; }
.pencere td.kz { color: #ffe08a; font-weight: 800; }
.pencere .bos { opacity: .7; padding: 14px 0; text-align: center; }
.pencere .not { font-size: 14px; opacity: .78; margin-top: 8px; }
.pencere .dogru { margin-top: 8px; font-size: 16px; color: #8ef0b4; }
.pencere .yanlis { margin-top: 8px; font-size: 16px; color: #ff9b9b; }
.misafir-kutu { text-align: center; }
.misafir-kutu svg { width: 54px; height: 54px; color: var(--altin); margin: 4px auto 8px; display: block; }
.misafir-kutu .dugmeler { justify-content: 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: 17px;
  background: rgba(10,20,14,.94); border: 1px solid rgba(231,194,91,.6); box-shadow: 0 10px 30px rgba(0,0,0,.4); text-align: center; animation: gir .25s ease-out; }
.toast.hata { border-color: #ff8a80; }

/* kısa ekran (dizüstü) */
@media (min-width: 701px) and (max-height: 820px) {
  .masa { grid-template-rows: repeat(3, 50px) 38px 38px; }
  .h { font-size: 19px; } .h.d { font-size: 15px; }
  .sonlar { grid-template-columns: repeat(8, 1fr); gap: 6px; } .sonlar .top:nth-child(n+9) { display: none; } .sonlar .top { font-size: 14px; }
  #cubukYari { display: none; }
  .cevir { padding: 9px; font-size: 24px; } .cevir small { font-size: 14px; }
  .fisler { padding: 7px 12px; } .fis-diz .fis { width: 46px; height: 46px; font-size: 15px; } .dugme span { width: 38px; height: 38px; }
  .panel { gap: 8px; } .sol-alt { gap: 8px; }
}
@media (min-width: 701px) and (max-height: 680px) {
  .masa { grid-template-rows: repeat(3, 42px) 32px 32px; } .h { font-size: 17px; } .h.d { font-size: 14px; } .h .elmas { width: 36px; height: 18px; }
  .ust { min-height: 50px; padding: 6px 18px; } .baslik { font-size: 26px; }
  .ist .satir .top { width: 26px; } .canli li { padding: 3px 6px; font-size: 15px; }
}

/* tablet */
@media (max-width: 1280px) {
  .govde { grid-template-columns: 320px minmax(0, 1fr) 250px; gap: 12px; padding: 0 12px 12px; }
  .canli li, .canli .bas { font-size: 14px; }
  .h { font-size: 19px; }
  .fisler { gap: 8px; } .fis-diz { gap: 8px; } .fis-diz .fis { width: 46px; height: 46px; font-size: 15px; }
}
@media (max-width: 1080px) {
  .govde { grid-template-columns: 290px minmax(0, 1fr); }
  .panel.canli { display: none; }
  #btnCanli { display: grid; }
  body.canli-acik .panel.canli { display: flex; position: fixed; z-index: 40; right: 10px; top: 70px; bottom: 10px; width: min(340px, calc(100vw - 20px)); box-shadow: 0 20px 50px rgba(0,0,0,.55); background: rgba(4,26,17,.97); }
  body.canli-acik .canli h4 .kapat { display: grid; place-items: center; }
  .dugme em { display: none; } .ara { display: none; }
  .masa-cerceve { padding: 10px; margin: 0 6px; }
  .baslik { font-size: 26px; }
}
/* tablet (dikey): üstte çark + bilgiler yan yana, altta masa */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .govde { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; overflow-y: auto; }
  .panel.sol { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 16px; flex: none; }
  .panel.sol .cark-kutu { min-height: 0; height: 250px; }
  .sonlar { grid-template-columns: repeat(12, 1fr); gap: 5px; } .sonlar .top { max-width: 46px; width: 100%; justify-self: center; font-size: 15px; }
  .orta { flex: none; }
  .pist-kutu { display: none; }
  body.pist-gorunum .pist-kutu { display: flex; flex: none; height: 330px; }
}

/* telefon (dikey) — tasarım A telefon yerleşimi: üstte küçük çark + son sayılar, ortada dikey masa, altta fişler ve ÇEVİR */
@media (max-width: 700px) {
  .ust { padding: 6px 8px; gap: 6px; min-height: 46px; }
  .ust-sol, .ust-sag { gap: 5px; }
  .baslik { font-size: 18px; letter-spacing: 1px; }
  .ikon { width: 30px; height: 30px; } .ikon svg { width: 15px; height: 15px; }
  #btnGecmis { display: none; }
  .uye { font-size: 13px; padding: 4px 8px; gap: 5px; max-width: 110px; } .uye b { display: none; }
  .uye:not(.misafir) { display: none; }
  .bakiye { font-size: 14px; padding: 4px 8px; gap: 4px; } .bakiye svg { width: 14px; height: 14px; }
  .govde { display: flex; flex-direction: column; gap: 7px; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; }
  .panel.sol, .panel.canli { display: none; }
  #btnCanli { display: grid; }
  body.canli-acik .panel.canli { display: flex; position: fixed; z-index: 40; left: 8px; right: 8px; top: 52px; bottom: 8px; width: auto; background: rgba(4,26,17,.97); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
  body.canli-acik .canli h4 .kapat { display: grid; place-items: center; }
  .orta { gap: 7px; flex: none; }
  .tel-ust { display: flex; gap: 10px; align-items: center; border-radius: 16px; padding: 8px; background: var(--panel); border: 1px solid var(--cizgi2); flex: none; }
  .tel-ust .cark-kutu { flex: none; width: 140px; height: 140px; min-height: 0; }
  .tel-ust .sag { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .tel-ust .sonlar { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .tel-ust .sonlar .top:nth-child(n+6) { display: none; }
  .tel-ust .top { font-size: 13px; max-width: 34px; }
  .ist2 { display: flex; gap: 4px; align-items: center; font-size: 12px; min-height: 21px; }
  .ist2 > em { opacity: .75; width: 44px; flex: none; }
  .ist2 .top { width: 21px; font-size: 11px; box-shadow: none; flex: none; }
  .tel-ayar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
  .tel-ayar .mini { font-size: 13px; padding: 2px 7px; border-color: rgba(242,201,76,.3); }
  .tel-ayar .say { font-size: 12px; flex-basis: 100%; text-align: left; }
  .serit { min-height: 30px; }
  .sekme { width: 170px; padding: 3px; } .sekme button { font-size: 14px; padding: 4px; }
  .serit .sonuc { font-size: 15px; padding: 3px 10px; gap: 6px; } .serit .sonuc .top { width: 22px; font-size: 12px; } .serit .sonuc .sn-ad { display: none; }
  .masa-cerceve { padding: 7px; border-radius: 12px; margin: 0 4px; border-width: 2px; box-shadow: 0 0 0 4px #3b2a0b, 0 0 0 5px #e7c25b, 0 10px 24px rgba(0,0,0,.4); }
  .masa { grid-template-columns: .82fr .82fr repeat(3, 2fr); grid-template-rows: 30px repeat(12, 24px) 24px; }
  .h { font-size: 16px; } .h.d { font-size: 13px; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0; }
  .h.y { clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%); }
  .h .elmas { width: 18px; height: 34px; }
  .h.kucuk { font-size: 13px; }
  .fis { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 10px; }
  .pist-kutu { flex: none; padding: 8px; display: none; }
  body.pist-gorunum .pist-kutu { display: flex; }
  .fisler { gap: 6px; padding: 5px 8px; border-radius: 14px; justify-content: space-between; }
  .fisler > .dugme, .fisler > .ara { display: none; }
  .fis-diz { gap: 6px; flex: 1; justify-content: space-between; }
  .fis-diz .fis { width: 40px; height: 40px; font-size: 13px; }
  .fis-diz .fis.on { transform: translateY(-3px); }
  .tel-alt { display: flex; gap: 7px; align-items: stretch; flex: none; }
  .tel-alt .dugme { font-size: 11px; gap: 1px; justify-content: center; }
  .tel-alt .dugme em { display: block; }
  .tel-alt .dugme span { width: 38px; height: 38px; font-size: 14px; }
  .tel-alt .dugme svg { width: 17px; height: 17px; }
  #temizleTel .ik-tekrar { display: none; } #temizleTel.tekrar .ik-sil { display: none; } #temizleTel.tekrar .ik-tekrar { display: grid; }
  .tel-alt .cevir { flex: 1; padding: 6px; font-size: 22px; border-radius: 13px; display: flex; flex-direction: column; justify-content: center; }
  .tel-alt .cevir small { font-size: 13px; }
  .bant { font-size: 24px; padding: 6px 16px; }
  .pencere { padding: 14px; } .pencere h3 { font-size: 20px; }
}
@media (max-width: 480px) { .baslik { display: none; } .ust-sol { flex: 0 1 auto; } }
@media (max-width: 380px) {
  .tel-ust .cark-kutu { width: 124px; height: 124px; }
  .masa { grid-template-rows: 28px repeat(12, 24px) 24px; } .h { font-size: 15px; }
  .fis-diz .fis { width: 38px; height: 38px; font-size: 12px; }
}
/* telefon (yatay) */
@media (max-height: 520px) and (min-width: 560px) {
  .ust { min-height: 40px; padding: 3px 10px; } .baslik { font-size: 20px; } .ikon { width: 30px; height: 30px; } .ikon svg { width: 15px; height: 15px; }
  #btnGecmis { display: grid; } .uye { display: none; }
  .govde { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px; padding: 0 8px 6px; overflow: hidden; }
  .panel.sol { display: flex; padding: 8px; gap: 6px; border-radius: 12px; }
  .panel.canli { display: none; } #btnCanli { display: grid; }
  .sol-alt { gap: 6px; } .sol-alt > .etk, .sol-alt > .cubuk, .toplam { display: none; }
  .sonlar { grid-template-columns: repeat(6, 1fr); gap: 4px; } .sonlar .top { font-size: 12px; } .sonlar .top:nth-child(n+7) { display: none; }
  .cevir { padding: 6px; font-size: 19px; } .cevir small { font-size: 12px; }
  .alt-satir { font-size: 13px; }
  .orta { gap: 6px; } .serit { min-height: 28px; } .sekme { width: 170px; } .sekme button { font-size: 13px; padding: 3px; }
  .serit .sonuc { font-size: 15px; padding: 2px 10px; } .serit .sonuc .top { width: 22px; font-size: 12px; }
  .masa-cerceve { padding: 6px; margin: 0 4px; border-width: 2px; box-shadow: 0 0 0 3px #3b2a0b, 0 0 0 4px #e7c25b; border-radius: 12px; }
  .masa { grid-template-rows: repeat(3, 1fr) 24px 24px; height: clamp(150px, calc(100vh - 160px), 230px); } .h { font-size: 15px; } .h.d { font-size: 12px; } .h .elmas { width: 28px; height: 14px; }
  .masa { grid-template-columns: 1.15fr repeat(12, 1fr) 1.15fr; }
  .h.d { writing-mode: horizontal-tb; transform: none; letter-spacing: 0; }
  .h.y { clip-path: polygon(34% 0, 100% 0, 100% 100%, 34% 100%, 0 50%); }
  .fis { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 9px; }
  .fisler { justify-content: center; } .fisler > .dugme { display: flex; } .fis-diz { flex: none; justify-content: center; }
  .serit .sonuc .sn-ad { display: inline; }
  .pist-kutu { display: none; } body.pist-gorunum .pist-kutu { display: flex; flex: 1 1 0; padding: 4px; } body.pist-gorunum .pist-kutu .komsu { font-size: 12px; }
  .fisler { padding: 4px 8px; gap: 6px; } .fis-diz { gap: 6px; } .fis-diz .fis { width: 34px; height: 34px; font-size: 11px; } .dugme span { width: 30px; height: 30px; } .dugme svg { width: 15px; height: 15px; } .dugme em, .ara { display: none; }
  .tel-ust, .tel-alt { display: none; }
}

/* ADIM 167 — çevirmede çark büyür (ekranın ortasına), canlı oyuncular Altın Pilot'taki gibi rozetli; telefonda son çevirmeler görünür */
.cark-kutu { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cark-kutu.odak { transform: var(--odak); z-index: 60; }
body::after { content: ''; position: fixed; inset: 0; z-index: 55; background: radial-gradient(circle at 50% 46%, rgba(0,0,0,.35), rgba(0,0,0,.72)); opacity: 0; pointer-events: none; transition: opacity .35s; }
body.cark-odak::after { opacity: 1; }
.panel.sol, .tel-ust { position: relative; }
body.cark-odak .panel.sol, body.cark-odak .tel-ust, body.cark-donus .panel.sol, body.cark-donus .tel-ust { z-index: 61; }
.av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.canli li .kim { display: flex; align-items: center; gap: 7px; min-width: 0; }
.canli li .kim > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#oynayanTel { cursor: pointer; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; }
#oynayanTel::before { content: none; }
#oynayanTel b { flex: none; color: var(--yesil-n); font-weight: 800; }
#oynayanTel b::before { content: '● '; }
#oynayanTel .cs { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 1px; border-radius: 999px; background: rgba(255,255,255,.08); }
#oynayanTel .cs.ben { background: rgba(242,201,76,.18); }
#oynayanTel .cs em { font-style: normal; font-weight: 700; }
#oynayanTel .cs u { text-decoration: none; font-weight: 800; color: #ffe08a; }
#oynayanTel .av { width: 18px; height: 18px; font-size: 10px; }
#oynayanTel .top, #oynayanTel [class*="top"] { transform: scale(.8); }
/* ADIM 167 — KULLANICI: "bazı telefonlarda (özellikle iPhone) bazı butonlar ekrana sığmıyor". Telefonun görünen alanı (Safari çubuklarıyla
   ~500–690 px) için: fişler + ÇEVİR her zaman ekranda (kaydırma yok), masa kalan alana sığar, küçük çark ekran boyuyla küçülür. */
@media (max-width: 700px) and (min-height: 421px) {
  .govde { overflow: hidden; }
  .orta { flex: 1 1 auto; min-height: 0; }
  .masa-cerceve { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .masa { flex: 1 1 auto; min-height: 0; max-height: 420px; grid-template-rows: minmax(16px, 1.25fr) repeat(12, minmax(11px, 1fr)) minmax(13px, 1fr); }
  .h { font-size: clamp(11px, 2.5vh, 16px); } .h.d { font-size: clamp(10px, 2.1vh, 13px); } .h.kucuk { font-size: clamp(10px, 2.1vh, 13px); }
  .h .elmas { width: clamp(12px, 2.6vh, 18px); height: clamp(18px, 4.6vh, 34px); }
  .tel-ust .cark-kutu { width: clamp(88px, 19vh, 140px); height: clamp(88px, 19vh, 140px); }
  .tel-ust { padding: clamp(4px, 1vh, 8px); }
  .fisler, .tel-alt { flex: none; }
  .fis-diz .fis { width: clamp(34px, 6.4vh, 40px); height: clamp(34px, 6.4vh, 40px); }
  .tel-alt .cevir { padding: clamp(3px, .8vh, 6px); font-size: clamp(18px, 3.6vh, 22px); }
  .tel-alt .dugme span { width: clamp(32px, 6vh, 38px); height: clamp(32px, 6vh, 38px); }
}
@media (max-width: 700px) and (min-height: 421px) and (max-height: 600px) {
  .tel-ust .ist2 { display: none; }
  .tel-alt .dugme em { display: none; }
}

/* ADIM 167 — CANLI MASA: bütün oyuncular aynı turda · 10 sn bahis (geri sayım) · 10 sn çark · 6 sn sonuç */
body.canli-masa .hizli-mod, body.canli-masa #hizliTel { display: none !important; }
.cevir { position: relative; overflow: hidden; }
.cevir::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--ilerle, 0) * 100%); background: rgba(255, 255, 255, .9); transition: width .2s linear; }
.cevir.acik { background: radial-gradient(circle at 50% 30%, #2fd07d, #0e7a42 72%); box-shadow: 0 6px 0 #0a4f2b, 0 0 0 3px #b9f5d3 inset; }
.cevir.kapali { background: radial-gradient(circle at 50% 30%, #e0503f, #8f1f17 72%); }
.cevir.sonucta { background: radial-gradient(circle at 50% 30%, #f6d36b, #b07d18 72%); color: #2f2104; box-shadow: 0 6px 0 #6b4a0e, 0 0 0 3px #fff3c4 inset; }
.cevir .cevir-yazi { white-space: nowrap; }
.cark-sayac { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; min-width: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(18, 90, 52, .96), rgba(6, 34, 20, .96)); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(22px, 5.2vw, 58px); line-height: 1; box-shadow: 0 0 0 3px rgba(242, 201, 76, .9), 0 6px 18px rgba(0, 0, 0, .5); pointer-events: none; z-index: 2; }
.cark-sayac.son { color: #ffd166; animation: rltSayac .5s ease-in-out infinite alternate; }
.tel-ust .cark-sayac { font-size: 30px; }
@keyframes rltSayac { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.12); } }
.top.bekle { background: rgba(255, 255, 255, .16); color: #f8eccb; box-shadow: none; }
.canli li.ayrac { display: block; background: none; padding: 4px 6px 0; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; opacity: .75; }
.canli li.ayrac span { border-top: 1px solid rgba(242, 201, 76, .35); display: block; padding-top: 4px; }
#oynayanTel .cs u.bahis { background: rgba(255, 255, 255, .14); color: #fff; }
/* yarış pistindeki fişler (tutarıyla) */
#pist .pf { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); }
#pist .pf.kaybeden { opacity: .45; }
#pist .pf.kazanan circle:first-child { stroke: #ffe08a; stroke-width: 2.5; }
#pist .pf.cagri circle:first-child { stroke: #f2c94c; stroke-width: 2; }
.cevir .cevir-yazi.uzun { font-size: .78em; letter-spacing: .4px; }

/* ADIM 167b — canlı oyuncular Altın Pilot'taki gibi: telefonda ekranda değil, menü düğmesinde (☰) oynayan sayısı rozeti; yarış pisti
   yönetimden kapatılabilir (kapalıyken sekme de pist de yok); pistte "Komşu: yok" = dokunuş yalnız o sayıya */
#btnCanli { position: relative; }
.rozet { position: absolute; top: -6px; right: -8px; min-width: 21px; height: 19px; padding: 0 5px; border-radius: 10px; background: #d63c3c; color: #fff;
  font: 800 12px/19px 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px #06281b; pointer-events: none; }
.rozet[hidden] { display: none; }
#oynayanTel { display: none !important; }
body.pist-yok #pistKutu, body.pist-yok #gorunum { display: none !important; }
#komsuBtn.on { border-color: var(--altin, #e7c25b); color: #ffe08a; }