/* PLINKO — "Altın Salon" (Altın 777 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; --altin2: #e7c25b; --altin-k: #3a2a06; --yazi: #f6efd8; --sonuk: rgba(246,239,216,.72);
  --panel: rgba(4,26,17,.74); --cizgi: rgba(231,194,91,.28); --kirmizi: #c9302c; --turuncu: #f08a24; --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: '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; }
.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); }
body.yukleniyor .app { opacity: 0; }
.app { transition: opacity .25s; }

/* üst çubuk */
.ust { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 60px; }
.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 rgba(231,194,91,.35); max-width: 220px; min-width: 0; }
.uye i { width: 9px; height: 9px; border-radius: 50%; background: var(--yesil); 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 rgba(231,194,91,.35); 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: 34px; letter-spacing: 2px; color: #f6d36b;
  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 rgba(231,194,91,.35); 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 */
.govde { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; padding: 0 18px 18px; min-height: 0; }
.panel { border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 11px; min-height: 0; background: var(--panel); border: 1px solid var(--cizgi); }
.sekme { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; padding: 4px; background: rgba(0,0,0,.35); }
.sekme button { text-align: center; padding: 8px; border-radius: 9px; font-size: 18px; color: var(--sonuk); }
.sekme button.on { background: linear-gradient(#f4d77a, #d9a83a); color: var(--altin-k); }
.etk { font-size: 14px; opacity: .8; letter-spacing: .5px; text-transform: uppercase; }
.tutar { display: flex; align-items: center; gap: 8px; }
.tutar .d { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; border: 2px solid #c9a227; color: #f2d27a; flex: none; }
.tutar .d:active { transform: scale(.94); }
.tutar input { flex: 1; min-width: 0; text-align: center; border-radius: 12px; padding: 8px; font-size: 26px; font-weight: 800; background: rgba(0,0,0,.35); border: 1px solid rgba(231,194,91,.3); outline: none; }
.tutar input:focus { border-color: var(--altin); }
.hizli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hizli button { text-align: center; border-radius: 999px; padding: 6px 0; font-size: 16px; border: 1px dashed rgba(231,194,91,.45); }
.hizli button.on { background: rgba(242,201,76,.16); border-style: solid; }
.risk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.risk button { text-align: center; border-radius: 10px; padding: 8px 0; font-size: 17px; background: rgba(0,0,0,.3); border: 1px solid rgba(231,194,91,.25); }
.risk button.on { background: var(--kirmizi); border-color: #ff8a80; color: #fff; }
.sira { display: flex; align-items: center; gap: 10px; }
.sira b { font-size: 22px; min-width: 26px; text-align: center; }
.sira input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #3b82f6 var(--d, 50%), rgba(255,255,255,.18) var(--d, 50%)); outline: none; }
.sira input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #3b82f6; cursor: pointer; }
.sira input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #3b82f6; cursor: pointer; }
.oto-sayi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.oto-sayi button { border-radius: 10px; padding: 7px 0; font-size: 16px; background: rgba(0,0,0,.3); border: 1px solid rgba(231,194,91,.25); }
.oto-sayi button.on { background: rgba(242,201,76,.2); border-color: var(--altin); }
.birak { margin-top: auto; border-radius: 16px; padding: 14px; text-align: center; font-family: 'Alfa Slab One', serif; font-size: 26px; letter-spacing: 1px; line-height: 1.1;
  background: radial-gradient(circle at 50% 30%, #ff6b5b, #c0261c 70%); color: #fff6e0; box-shadow: 0 6px 0 #7a1410, 0 0 0 3px #f2c94c inset; transition: transform .08s, filter .2s; }
.birak small { display: block; font-family: 'Barlow Condensed'; font-weight: 600; font-size: 16px; letter-spacing: 0; opacity: .88; margin-top: 2px; }
.birak:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a1410, 0 0 0 3px #f2c94c inset; }
.birak.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; }
.birak[disabled] { filter: grayscale(.5) brightness(.8); cursor: default; }
.alt-satir { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.alt-satir em { font-style: normal; }
.hizli-mod { display: inline-flex; align-items: center; cursor: pointer; }
.hizli-mod input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hizli-mod span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; border: 1px solid transparent; opacity: .75; }
.hizli-mod svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.hizli-mod input:checked + span { 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); }

/* tahta */
.tahta { position: relative; border-radius: 22px; min-height: 0; overflow: hidden; background: linear-gradient(#0d2f22, #071d14);
  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: 8px; }
.tahta canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sonlar { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.sonlar span { min-width: 58px; text-align: center; border-radius: 8px; padding: 4px 6px; font-size: 16px; font-weight: 800; background: var(--altin); color: var(--altin-k); animation: gir .3s ease-out; }
.sonlar span.t { background: var(--turuncu); color: #fff; } .sonlar span.k { background: var(--kirmizi); color: #fff; }
@keyframes gir { from { transform: translateY(-8px); opacity: 0; } }
.bant { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); border-radius: 14px; padding: 6px 18px; font-size: 22px; font-weight: 800; white-space: nowrap;
  background: rgba(0,0,0,.6); border: 1px solid var(--altin); color: #f6d36b; pointer-events: none; animation: bant 1.8s ease-out forwards; }
.bant.buyuk { font-size: 30px; padding: 8px 24px; box-shadow: 0 0 30px rgba(246,211,107,.5); }
@keyframes bant { 0% { opacity: 0; transform: translate(-50%, -10px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* canlı */
.canli h4 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.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; }
@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.15fr .85fr .8fr .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.15fr .85fr .8fr .9fr; align-items: center; border-radius: 9px; padding: 6px; font-size: 16px; background: rgba(0,0,0,.28); }
.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 em { font-style: normal; text-align: center; border-radius: 6px; padding: 1px 4px; font-weight: 800; background: var(--altin); color: var(--altin-k); justify-self: start; min-width: 44px; }
.canli li em.t { background: var(--turuncu); color: #fff; } .canli li em.k { background: var(--kirmizi); color: #fff; }
.canli li .kz { color: #ffe08a; font-weight: 800; } .canli li .kb { opacity: .55; }
.adil { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; opacity: .88; padding: 4px; border-radius: 8px; }
.adil:hover { opacity: 1; background: rgba(0,0,0,.2); }
.adil svg { width: 16px; height: 16px; }
.say { text-align: center; font-size: 15px; opacity: .85; }
.say::before { content: '● '; color: var(--yesil); }

/* 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(560px, 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, .pencere .kod { 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); }
.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; }
.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: 6px; border-top: 1px solid rgba(231,194,91,.15); white-space: nowrap; }
.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; }
.pencere .tablo-onizleme { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pencere .tablo-onizleme span { border-radius: 6px; padding: 2px 6px; font-weight: 800; font-size: 14px; background: var(--altin); color: var(--altin-k); }
.pencere .tablo-onizleme span.t { background: var(--turuncu); color: #fff; } .pencere .tablo-onizleme span.k { background: var(--kirmizi); color: #fff; }
.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; }

/* ADIM 183 — bildirim kutusu: ekranın üstünde (telefonda ÇEVİR'i örtmez), türüne göre SVG simge ve renk; dokununca kapanır */
.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 68px); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(92vw, 460px); padding: 9px 16px 9px 9px; border-radius: 16px; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer;
  color: var(--yazi); background: linear-gradient(180deg, rgba(16,52,36,.97), rgba(6,24,16,.97)); border: 1px solid rgba(242,201,76,.55);
  box-shadow: 0 16px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); --tc: var(--altin); --tb: rgba(242,201,76,.15); }
.toast.gir { animation: toastGir .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes toastGir { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } }
.toast-ikon { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--tc); background: var(--tb); box-shadow: inset 0 0 0 1px var(--tc); }
.toast-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.toast-yazi { min-width: 0; overflow-wrap: anywhere; }
.toast.t-ok { --tc: var(--yesil); --tb: rgba(61,220,132,.14); border-color: rgba(61,220,132,.55); }
.toast.t-hata, .toast.t-para { --tc: #ff8a7a; --tb: rgba(224,72,72,.18); border-color: rgba(255,138,122,.65); }
.toast.t-ag, .toast.t-bekle { --tc: #ffb454; --tb: rgba(255,180,84,.15); border-color: rgba(255,180,84,.6); }

/* tablet */
@media (max-width: 1180px) {
  .govde { grid-template-columns: 270px minmax(0, 1fr) 250px; gap: 12px; padding: 0 12px 12px; }
  .canli li, .canli .bas { font-size: 14px; }
}
@media (max-width: 980px) {
  .govde { grid-template-columns: 270px 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; }
}

/* tablet (dikey): tahta üstte, kontroller altta (tahta genişlesin) */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .govde { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
  .tahta { order: 0; flex: 1 1 auto; min-height: 0; }
  .panel.kontrol { order: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: center; flex: none; }
  .panel.kontrol .etk { display: none; }
  .panel.kontrol > .sekme { grid-column: 1 / 3; }
  .panel.kontrol .tutar { grid-column: 3 / 5; }
  .panel.kontrol .hizli { grid-column: 1 / 3; }
  .panel.kontrol .risk { grid-column: 3 / 5; }
  .panel.kontrol .sira { grid-column: 1 / -1; }
  .panel.kontrol .oto { grid-column: 1 / -1; }
  .panel.kontrol .birak { grid-column: 1 / -1; margin-top: 0; }
  .panel.kontrol .alt-satir { grid-column: 1 / -1; }
}
/* telefon (dikey) */
@media (max-width: 700px) {
  .ust { padding: 6px 8px; gap: 6px; min-height: 48px; }
  .ust-sol, .ust-sag { gap: 5px; }
  .baslik { font-size: 21px; letter-spacing: 1px; }
  .ikon { width: 32px; height: 32px; } .ikon svg { width: 16px; height: 16px; }
  #btnGecmis { display: none; }
  .uye { font-size: 13px; padding: 4px 8px; gap: 5px; max-width: 110px; } .uye b { display: none; }
  .uye:not(.misafir) { display: none; }
  .ikon { width: 30px; height: 30px; }
  .baslik { font-size: 19px; }
  .bakiye { font-size: 14px; padding: 4px 8px; gap: 4px; } .bakiye svg { width: 14px; height: 14px; }
  .govde { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
  .tahta { order: 0; flex: 1 1 auto; min-height: 0; border-width: 2px; margin: 5px; box-shadow: 0 0 0 4px #3b2a0b, 0 0 0 5px #e7c25b, 0 10px 24px rgba(0,0,0,.4); border-radius: 16px; }
  .panel.kontrol { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 14px; flex: none; }
  .panel.kontrol > .sekme { grid-column: 1 / -1; padding: 3px; } .sekme button { padding: 5px; font-size: 15px; }
  .panel.kontrol .etk { display: none; }
  .panel.kontrol .tutar { grid-column: 1 / -1; } .tutar .d { width: 34px; height: 34px; font-size: 20px; } .tutar input { font-size: 21px; padding: 4px; }
  .panel.kontrol .hizli { grid-column: 1 / -1; } .hizli button { padding: 4px 0; font-size: 14px; }
  .risk button { padding: 6px 0; font-size: 14px; } .sira b { font-size: 18px; }
  .oto { grid-column: 1 / -1; } .oto-sayi button { padding: 5px 0; font-size: 14px; }
  .birak { grid-column: 1 / -1; padding: 9px; font-size: 20px; margin-top: 2px; } .birak small { font-size: 13px; }
  .alt-satir { grid-column: 1 / -1; font-size: 14px; }
  .sonlar { top: 8px; right: 8px; gap: 4px; } .sonlar span { min-width: 40px; font-size: 12px; padding: 2px 4px; }
  .bant { font-size: 16px; padding: 4px 12px; top: 10px; } .bant.buyuk { font-size: 20px; }
  .pencere { padding: 14px; } .pencere h3 { font-size: 20px; }
  body.canli-acik .panel.canli { top: 56px; }
}
/* çok kısa telefon */
@media (max-width: 700px) and (max-height: 640px) {
  .hizli { display: none !important; } .alt-satir { display: none !important; }
}
/* telefon (yatay) */
@media (max-height: 520px) and (min-width: 560px) {
  .ust { min-height: 42px; padding: 4px 10px; } .baslik { font-size: 22px; } .ikon { width: 30px; height: 30px; } .ikon svg { width: 15px; height: 15px; }
  .govde { grid-template-columns: 240px minmax(0, 1fr); gap: 8px; padding: 0 8px 6px; }
  .panel.canli { display: none; }
  #btnCanli { display: grid; }
  .panel { padding: 8px; gap: 6px; border-radius: 12px; }
  .etk { display: none; }
  .sekme button { padding: 4px; font-size: 15px; }
  .tutar .d { width: 30px; height: 30px; font-size: 18px; } .tutar input { font-size: 19px; padding: 3px; }
  .hizli button, .risk button, .oto-sayi button { padding: 3px 0; font-size: 14px; }
  .birak { padding: 7px; font-size: 18px; } .birak small { font-size: 12px; }
  .alt-satir { font-size: 13px; }
  .tahta { margin: 4px; border-width: 2px; box-shadow: 0 0 0 3px #3b2a0b, 0 0 0 4px #e7c25b; border-radius: 14px; }
}

/* ADIM 167 — canlı oyuncular Altın Pilot'taki gibi belirgin: rozet (baş harf + renk), dar ekranda her zaman görünen canlı şerit */
.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; }
.canli-serit { display: none; }
@media (max-width: 980px) {
  .canli-serit { position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; cursor: pointer;
    padding: 4px 6px; border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid rgba(242,201,76,.35); font-size: 13px; }
  .canli-serit b { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 6px; color: #7dffa8; font-weight: 800; }
  .canli-serit b i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 3px rgba(255,77,77,.2); animation: nabiz 1.6s infinite; }
  .canli-serit span { flex: none; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(255,255,255,.07); animation: gir .35s ease-out; }
  .canli-serit span.ben { background: rgba(242,201,76,.18); }
  .canli-serit em { font-style: normal; font-weight: 700; color: #f6efd8; }
  .canli-serit u { text-decoration: none; font-weight: 800; border-radius: 5px; padding: 0 4px; background: var(--altin); color: var(--altin-k); }
  .canli-serit u.t { background: var(--turuncu); color: #fff; } .canli-serit u.k { background: var(--kirmizi); color: #fff; }
  .canli-serit .av { width: 20px; height: 20px; font-size: 11px; }
  .sonlar { top: 44px; }
}

/* ADIM 167b — canlı düşüşler Altın Pilot'taki gibi: tahtanın üstünde şerit yok; menü düğmesinde (☰) oynayan sayısı rozeti */
#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; }
.canli-serit { display: none !important; }

/* ADIM 183 — bildirim kutusu: telefonda / kısa ekranda üst çubuğun hemen altında */
@media (max-width: 700px) { .toast { top: calc(env(safe-area-inset-top) + 58px); max-width: calc(100vw - 20px); font-size: 15px; } }
@media (max-height: 520px) { .toast { top: calc(env(safe-area-inset-top) + 50px); } }
@media (prefers-reduced-motion: reduce) { .toast.gir { animation: none; } }