/* BLACKJACK (Gece Mavisi — tasarım B; bordo kart arkası) — "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(10,22,44,.66); --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); }
.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); }
  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; }
.alt-satir { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.alt-satir em { font-style: normal; }

/* 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(22,44,88,.97), rgba(9,19,40,.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; }
  .masa { 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; }
  .masa { 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; }
  .masa { 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; }


/* ================= TASARIM B "Gece Mavisi" (t167/tasarim/bj.html, kullanıcı seçimi) — bordo kart arkası ================= */
@font-face { font-family: 'Poppins'; font-weight: 400; src: url(../fonts/Poppins-Regular.ttf); } @font-face { font-family: 'Poppins'; font-weight: 500; src: url(../fonts/Poppins-Medium.ttf); } @font-face { font-family: 'Poppins'; font-weight: 700; src: url(../fonts/Poppins-Bold.ttf); }
:root { --yazi: #eaf2ff; --sonuk: rgba(214,228,255,.62); --altin: #ffd166; --altin2: #7fe3ff; --cizgi: rgba(127,227,255,.28); --panel: rgba(10,22,44,.66); --panel-c: rgba(127,227,255,.22);
  --kece: radial-gradient(1000px 560px at 50% 10%, #1f4f8f, #12305e 55%, #0a1c3a 100%); --kenar: linear-gradient(#1b2740, #0b1222); --kenar-c: #7fe3ff; --govde: 'Poppins', sans-serif;
  --arka: repeating-linear-gradient(135deg, #7d0f1d 0 6px, #9b1626 6px 12px); --arka-c: #d4a537;
  --btn-al: linear-gradient(135deg, #22d3a6, #0f9f7c); --btn-dur: linear-gradient(135deg, #ff6b81, #d23a56); --btn-kat: linear-gradient(135deg, #ffd166, #f0a33a); --btn-bol: linear-gradient(135deg, #7c8cff, #4a5bd6); }
body { font-family: 'Poppins', 'Barlow Condensed', sans-serif; background: radial-gradient(1200px 700px at 50% -10%, #12274a, #050b18 70%) #050b18; }
.baslik { font: 700 28px 'Poppins', sans-serif; letter-spacing: 8px; background: linear-gradient(90deg, #7fe3ff, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.uye, .bakiye, .ikon { background: var(--panel); border: 1.5px solid var(--panel-c); } .uye b { background: var(--altin); }
.govde { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 0 20px 16px; }
.masa-sut { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.masa { position: relative; flex: 1; min-height: 360px; border-radius: 30px 30px 48% 48% / 30px 30px 40% 40%; background: var(--kece); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 -30px 80px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.5); overflow: hidden; padding: 0; display: block; }
.masa::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 14px solid transparent; background: var(--kenar) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.masa::after { content: ''; position: absolute; inset: 13px; border-radius: 26px 26px 48% 48% / 26px 26px 40% 40%; border: 2px solid var(--kenar-c); opacity: .75; pointer-events: none; box-shadow: 0 0 18px rgba(127,227,255,.35), inset 0 0 18px rgba(127,227,255,.18); }
.doku { position: absolute; inset: 0; opacity: .14; background: repeating-radial-gradient(circle at 50% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); pointer-events: none; }
.yay { position: absolute; left: 50%; top: 50%; width: min(760px, 95%); height: 300px; transform: translate(-50%, -50%); pointer-events: none; }
.yay text { font-family: 'Poppins', sans-serif; font-weight: 700; fill: var(--altin2); letter-spacing: 6px; } .yay .y1 { font-size: 26px; } .yay .y2 { font-size: 14px; opacity: .8; letter-spacing: 3px; }
.krupiye { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; }
.etiket { display: flex; align-items: center; gap: 10px; font: 700 15px var(--govde); letter-spacing: 3px; color: var(--sonuk); text-transform: uppercase; }
.toplam { min-width: 46px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.55); border: 2px solid var(--altin); color: #fff; display: grid; place-items: center; font: 800 18px var(--govde); letter-spacing: 0; }
.toplam:empty { display: none; }
.kartlar { display: flex; min-height: 100px; align-items: flex-start; }
.kartlar .kart + .kart { margin-left: -40px; }
.kartlar .kart:nth-child(1) { transform: rotate(-3deg); } .kartlar .kart:nth-child(2) { transform: translateY(-4px) rotate(4deg); } .kartlar .kart:nth-child(3) { transform: translateY(-8px) rotate(9deg); } .kartlar .kart:nth-child(4) { transform: translateY(-12px) rotate(14deg); } .kartlar .kart:nth-child(n+5) { transform: translateY(-16px) rotate(18deg); }
.kart { position: relative; flex: none; width: 84px; height: 120px; border-radius: 12px; background: linear-gradient(160deg, #ffffff, #f2eee5); box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08); color: #141414; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; animation: kartGel .35s cubic-bezier(.2,.8,.2,1) backwards; }
.kart.kirmizi { color: #c81f2a; }
.kart .kose { position: absolute; left: 7px; top: 6px; display: flex; flex-direction: column; align-items: center; font-size: 24px; line-height: .9; } .kart .kose i { font-style: normal; font-size: 15px; }
.kart .kose.alt { left: auto; top: auto; right: 7px; bottom: 6px; transform: rotate(180deg); }
.kart .orta { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; }
.kart.arka { background: #fff; } .kart.arka::before { content: ''; position: absolute; inset: 6px; border-radius: 8px; background: var(--arka); border: 2px solid var(--arka-c); }
.kart.arka::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--arka-c); border-radius: 6px; background: rgba(0,0,0,.2); }
@keyframes kartGel { from { transform: translate(120px,-120px) rotate(20deg); opacity: 0; } to { opacity: 1; } }
.ayakkabi { position: absolute; right: 54px; top: 34px; width: 110px; height: 84px; border-radius: 10px 10px 16px 16px; background: linear-gradient(160deg, #2b2b2b, #0c0c0c); border: 2px solid var(--kenar-c); box-shadow: 0 10px 20px rgba(0,0,0,.5); transform: rotate(10deg); }
.ayakkabi::before { content: ''; position: absolute; left: 12px; right: 12px; top: 10px; height: 50px; border-radius: 6px; background: var(--arka); border: 2px solid var(--arka-c); }
.atik { position: absolute; left: 54px; top: 40px; width: 88px; height: 70px; border-radius: 10px; border: 2px dashed var(--cizgi); transform: rotate(8deg); display: grid; place-items: center; color: var(--sonuk); font: 700 11px var(--govde); letter-spacing: 2px; }
.sira { position: absolute; left: calc(50% + 86px); top: 96px; padding: 8px 20px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1.5px solid var(--altin); font: 800 16px var(--govde); letter-spacing: 2px; color: var(--altin); display: flex; gap: 10px; align-items: center; z-index: 2; }
.sira .sure { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--altin); border-top-color: transparent; animation: don 1s linear infinite; } @keyframes don { to { transform: rotate(360deg); } }
.oyuncu { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; gap: 40px; align-items: flex-end; z-index: 2; }
.el { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 16px; border: 2px solid transparent; }
.el.aktif { border-color: rgba(255,209,102,.7); background: rgba(255,209,102,.06); }
.el .el-bas { display: flex; gap: 8px; align-items: center; font: 600 12px var(--govde); color: var(--sonuk); letter-spacing: 1px; }
.el .etiket-sonuc { padding: 3px 12px; border-radius: 999px; font: 800 13px var(--govde); background: rgba(0,0,0,.45); color: #fff; }
.el .etiket-sonuc.bj, .el .etiket-sonuc.kazandi { background: linear-gradient(#f6d46e, #c7932a); color: #2a1d02; } .el .etiket-sonuc.kaybetti { background: #d23a56; } .el .etiket-sonuc.berabere { background: rgba(255,255,255,.18); }
.bahis-cember { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; border: 3px dashed var(--altin2); display: grid; place-items: center; box-shadow: inset 0 0 30px rgba(0,0,0,.25); z-index: 2; }
.bahis-cember::after { content: attr(data-t-bahis); position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1.5px solid var(--altin); font: 800 15px var(--govde); color: #fff; white-space: nowrap; }
.yigin { position: relative; width: 56px; height: 56px; } .yigin .fis { position: absolute; left: 0; width: 56px; height: 56px; font-size: 15px; }
.fis { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 800 16px 'Barlow Condensed', sans-serif; color: #fff; position: relative; cursor: pointer; border: 0;
  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 4px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.35); text-shadow: 0 1px 2px rgba(0,0,0,.5); transition: transform .15s; }
.fis::before { content: ''; position: absolute; inset: 19%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.7); }
.fisler .fis { opacity: .55; } .fisler .fis.on { opacity: 1; transform: translateY(-6px); box-shadow: 0 0 0 3px var(--altin), 0 0 18px var(--altin), 0 8px 12px rgba(0,0,0,.4); }
.sonuc-bant { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; padding: 14px 30px; border-radius: 999px; text-align: center; animation: bantGel .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.sonuc-bant b { display: block; font: 700 clamp(24px, 4.5vw, 40px) var(--govde); letter-spacing: .06em; } .sonuc-bant span { font: 700 20px var(--govde); }
.sonuc-bant.kazandi, .sonuc-bant.bj { background: rgba(255,209,102,.95); color: #2a1d02; box-shadow: 0 0 60px rgba(255,209,102,.5); } .sonuc-bant.kaybetti { background: rgba(210,58,86,.92); color: #fff; } .sonuc-bant.berabere { background: rgba(10,22,44,.9); color: var(--yazi); border: 1.5px solid var(--panel-c); }
@keyframes bantGel { from { transform: translate(-50%,-50%) scale(.6); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
/* kontrol çubuğu */
.kontrol { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: var(--panel); border: 1.5px solid var(--panel-c); }
.eylem { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.e { height: 62px; border-radius: 999px; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.e b { font: 700 16px var(--govde); letter-spacing: 1px; white-space: nowrap; } .e small { font: 500 12px var(--govde); opacity: .85; }
.e.al { background: var(--btn-al); } .e.dur { background: var(--btn-dur); } .e.kat { background: var(--btn-kat); color: #2a1d02; } .e.bol { background: var(--btn-bol); }
.e[disabled] { opacity: .38; filter: grayscale(.4); cursor: default; }
body:not(.el-acik) .eylem { display: none; }
.fisler { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-left: 1.5px solid var(--panel-c); border-right: 1.5px solid var(--panel-c); }
body.el-acik .fisler, body.el-acik .bahis-kutu { display: none; }
.bahis-kutu { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; }
.tutar { display: flex; align-items: center; gap: 6px; } .tutar input { width: 120px; height: 46px; text-align: center; border-radius: 12px; border: 1.5px solid var(--panel-c); background: rgba(0,0,0,.35); color: #fff; font: 700 20px var(--govde); }
.tutar .d { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--panel-c); background: rgba(0,0,0,.3); color: #fff; font-size: 22px; cursor: pointer; }
.dagit { height: 62px; padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer; background: var(--btn-kat); color: #2a1d02; box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.dagit b { display: block; font: 700 18px var(--govde); letter-spacing: 2px; } .dagit small { font: 500 12px var(--govde); }
body.istek .e, body.istek .dagit { pointer-events: none; opacity: .7; }
/* sağ panel */
.panel.canli { min-height: 0; display: flex; flex-direction: column; border-radius: 22px; background: var(--panel); border: 1.5px solid var(--panel-c); overflow: hidden; padding: 0; gap: 0; }
.canli-bas { padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--panel-c); }
.canli-bas h4 { font: 700 15px var(--govde); letter-spacing: 3px; color: #7fe3ff; flex: 1; margin: 0; }
.canli-bas .say { display: flex; align-items: center; gap: 6px; font: 700 14px var(--govde); color: #3ddc84; } .canli-bas .say i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.canli-bas .kapat { display: none; }
.ozet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--panel-c); }
.ozet div { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); } .ozet span { display: block; font: 700 11px var(--govde); letter-spacing: 1.5px; color: var(--sonuk); } .ozet b { font: 700 20px var(--govde); color: #fff; }
.liste { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; margin: 0; list-style: none; }
.liste li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; background: rgba(0,0,0,.18); }
.liste li.ben { box-shadow: inset 0 0 0 1px rgba(255,209,102,.5); } .liste li.yeni { background: rgba(255,209,102,.12); }
.liste .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--govde); color: #fff; font-style: normal; }
.liste .bil { min-width: 0; } .liste .bil b { display: block; font: 700 14px var(--govde); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .liste .bil span { font: 500 12px var(--govde); color: var(--sonuk); }
.son { padding: 4px 10px; border-radius: 999px; font: 700 13px var(--govde); white-space: nowrap; }
.son.bj, .son.kazandi { background: linear-gradient(#f6d46e, #c7932a); color: #2a1d02; } .son.kaybetti { background: rgba(210,58,86,.35); color: #ffb3c0; } .son.berabere { background: rgba(255,255,255,.12); color: #fff; }
.adil { margin: 8px 10px 12px; }
/* pencereler */
.pencere { font-family: var(--govde); } .tablo td.bj, .tablo td.kazandi { color: var(--altin); } .tablo td.kaybetti { color: #ff8a80; }
.adil-liste dt { font-size: 13px; color: var(--sonuk); margin-top: 8px; } .adil-liste dd { margin: 2px 0 0; word-break: break-all; } .adil-liste input { width: 100%; }
@media (max-width: 980px) { .govde { grid-template-columns: minmax(0, 1fr); } .panel.canli { display: none; } body.canli-acik .panel.canli { display: flex; position: fixed; z-index: 40; right: 10px; top: 70px; bottom: 10px; width: min(340px, calc(100vw - 20px)); } body.canli-acik .canli-bas .kapat { display: grid; place-items: center; } }
@media (max-width: 700px) {
  .baslik { font-size: 16px; letter-spacing: 3px; } .bakiye { font-size: 13px; }
  .govde { padding: 0 8px 8px; gap: 8px; }
  .masa { min-height: 300px; border-radius: 22px 22px 46% 46% / 22px 22px 32% 32%; }
  .kart { width: 60px; height: 86px; border-radius: 9px; } .kart .orta { font-size: 30px; } .kart .kose { font-size: 17px; } .kartlar .kart + .kart { margin-left: -28px; } .kartlar { min-height: 86px; }
  .ayakkabi, .atik { display: none; } .yay { top: 46%; } .yay .y1 { font-size: 18px; } .yay .y2 { font-size: 11px; }
  .sira { left: auto; right: 12px; top: 12px; font-size: 12px; padding: 6px 12px; }
  .oyuncu { bottom: 86px; gap: 16px; } .bahis-cember { width: 72px; height: 72px; bottom: 10px; } .yigin, .yigin .fis { width: 44px; height: 44px; }
  .kontrol { flex-wrap: wrap; gap: 8px; padding: 10px; } .eylem { flex-basis: 100%; gap: 6px; } .e { height: 54px; } .e b { font-size: 13px; } .e small { display: none; }
  .fisler { border: 0; padding: 0; flex-basis: 100%; justify-content: center; } .fisler .fis { width: 44px; height: 44px; font-size: 13px; }
  .bahis-kutu { flex-basis: 100%; justify-content: center; } .dagit { flex: 1; }
}

/* 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; } }