/* ADIM 186 — Blackjack 3B masa görünümü (KULLANICI SEÇİMİ 7 Kasım: tasarım A "Gece Salonu"). Yalnız body.bj3d'de geçerli: sahne
   (assets/js/3d/sahne.js) ekranı kaplar, arayüz üstünde buzlu cam. 3B açılamazsa (WebGL2 yok, ?klasik=1, yönetimde kapalı) bu kurallar devreye
   girmez → 2B masa eskisi gibi. Köprünün cam katmanı (oyun-tema/cam.css) bu dosyadan SONRA yüklenir; çakışan yerlerde özgüllük + !important. */
#bj3d { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; z-index: 0; background: #050507; }
.bj-etiketler { position: fixed; inset: 0; z-index: 2; pointer-events: none; display: none; overflow: hidden; }
.bj-yukle { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(900px 520px at 50% 30%, rgba(236,201,111,.12), transparent 70%), #050507; color: rgba(244,237,219,.8); font: 500 15px 'Poppins', sans-serif; letter-spacing: .06em; }
.bj-yukle[hidden] { display: none; }
.bj-yukle i { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(236,201,111,.22); border-top-color: #ecc96f; animation: bjDon 0.9s linear infinite; }
@keyframes bjDon { to { transform: rotate(360deg); } }

body.bj3d { --c3: rgba(7,14,34,.62); --c3b: rgba(20,38,82,.50); --k3: rgba(231,197,111,.36); --v3: #ecc96f; --v3b: #b4862c; --y3: #f4eddb; --s3: rgba(244,237,219,.62); --by3: #1d1404;
  background: #050507 !important; }
body.bj3d #bj3d, body.bj3d .bj-etiketler { display: block; }
body.bj3d .app { z-index: 1; background: transparent !important; pointer-events: none; }
body.bj3d .app::before, body.bj3d .app::after { display: none !important; }
body.bj3d .ust, body.bj3d .kontrol, body.bj3d .panel.canli, body.bj3d .sonuc-bant, body.bj3d .sira { pointer-events: auto; }
body.bj3d .cam3, body.bj3d .ust .uye, body.bj3d .ust .bakiye, body.bj3d .ust .ikon, body.bj3d .kontrol, body.bj3d .panel.canli {
  background: linear-gradient(160deg, var(--c3b), var(--c3)) !important; border: 1px solid var(--k3) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }

/* üst çubuk */
body.bj3d .ust { padding: 14px 20px; }
body.bj3d .baslik { font: 400 22px 'Alfa Slab One', 'Poppins', serif; letter-spacing: .12em; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--v3); -webkit-text-fill-color: var(--v3); text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.7), 0 4px 18px rgba(0,0,0,.75); }
body.bj3d .ust .ikon { width: 44px; height: 44px; border-radius: 14px; color: var(--y3); }
body.bj3d .ust .uye, body.bj3d .ust .bakiye { border-radius: 14px; padding: 8px 14px; }
body.bj3d .ust .bakiye { color: #ffe9a8; }
body.bj3d #btnCanli { display: grid; }
body.bj3d #btnKamera.kapali .cizik { display: block; } #btnKamera .cizik { display: none; } body.bj3d #btnKamera.kapali { opacity: .7; }

/* 2B masa: kartlar / yazılar sahnede — yalnız sıra ve sonuç bandı kalır */
body.bj3d .govde { display: block; padding: 0; }
body.bj3d .masa-sut { display: block; }
body.bj3d .masa { position: static; min-height: 0; height: 0; background: none !important; box-shadow: none !important; border: 0 !important; overflow: visible; }
body.bj3d .masa > :not(#sira):not(#sonucBant) { visibility: hidden !important; pointer-events: none !important; }
body.bj3d .masa::before, body.bj3d .masa::after { display: none !important; }

/* sonuç bandı — ekranın ortasında */
body.bj3d .sonuc-bant { position: fixed; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 6; padding: 16px 38px; border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.bj3d .sonuc-bant b { font: 400 clamp(26px, 4.2vw, 44px) 'Alfa Slab One', 'Poppins', serif; letter-spacing: .08em; }
body.bj3d .sonuc-bant span { font: 800 24px 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
body.bj3d .sonuc-bant.kazandi, body.bj3d .sonuc-bant.bj { background: linear-gradient(180deg, rgba(246,212,110,.96), rgba(199,147,42,.96)); color: var(--by3); box-shadow: 0 0 70px rgba(236,201,111,.45); }
body.bj3d .sonuc-bant.kaybetti { background: linear-gradient(180deg, rgba(150,26,44,.92), rgba(92,12,26,.92)); color: #ffe3e7; }
body.bj3d .sonuc-bant.berabere { background: linear-gradient(160deg, var(--c3b), var(--c3)); color: var(--y3); }

/* SIRA SİZDE — eylem çubuğunun üst kenarında */
body.bj3d .sira { position: fixed; left: 50%; top: auto; bottom: 122px; transform: translate(-50%, 50%); z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font: 600 12.5px 'Barlow Condensed', sans-serif; letter-spacing: .22em; color: var(--y3);
  background: linear-gradient(160deg, var(--c3b), var(--c3)); border: 1px solid var(--k3); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
body.bj3d .sira .sure { width: 14px; height: 14px; border-width: 2px; border-color: var(--v3); border-top-color: transparent; }
body.bj3d .sira[hidden] { display: none; }

/* alt kontrol çubuğu */
body.bj3d .kontrol { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; width: auto; max-width: calc(100vw - 32px); margin: 0;
  border-radius: 24px; padding: 12px 14px; gap: 14px; }
body.bj3d .eylem { grid-template-columns: repeat(4, 118px); gap: 12px; }
body.bj3d .e { height: 82px; border-radius: 17px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important; color: var(--y3) !important;
  border: 1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.3) !important; }
body.bj3d .e b { font: 800 16px 'Barlow Condensed', sans-serif; letter-spacing: .1em; color: inherit; }
body.bj3d .e small { font: 400 10.5px 'Poppins', sans-serif; color: var(--s3); }
body.bj3d .e.al { background: linear-gradient(180deg, var(--v3), var(--v3b)) !important; color: var(--by3) !important; border-color: rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.18), 0 8px 24px rgba(236,201,111,.32) !important; }
body.bj3d .e.al small { color: rgba(29,20,4,.72); }
body.bj3d .e:disabled { opacity: .38; filter: saturate(.4); }
body.bj3d .fisler { border-color: rgba(231,197,111,.22); }
body.bj3d .fisler .fis { width: 54px; height: 54px; }
body.bj3d .dagit { min-width: 150px; height: 64px; border-radius: 17px; background: linear-gradient(180deg, var(--v3), var(--v3b)) !important; color: var(--by3) !important;
  border: 1px solid rgba(255,255,255,.42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(236,201,111,.32) !important; }
body.bj3d .dagit b, body.bj3d .dagit small { color: var(--by3); }
body.bj3d .tutar .d { border-color: var(--k3); color: var(--v3); background: rgba(0,0,0,.25); }
body.bj3d .tutar input { background: rgba(0,0,0,.32); border-color: var(--k3); color: var(--y3); font-family: 'Barlow Condensed', sans-serif; }
body.bj3d.bj-anim .e, body.bj3d.bj-anim .dagit, body.bj3d.bj-anim .fisler, body.bj3d.bj-anim .tutar { pointer-events: none; }
body.bj3d.bj-anim .kontrol { opacity: .62; transition: opacity .2s; }   /* kartlar uçarken / kasa oynarken: düğmeler bekler */

/* canlı eller: çekmece (her ekranda; masa ekranı kaplar) */
body.bj3d .panel.canli { display: none; }
body.bj3d.canli-acik .panel.canli { display: flex; position: fixed; z-index: 40; right: 14px; top: 78px; bottom: auto; max-height: calc(100vh - 230px); width: min(330px, calc(100vw - 24px)); }
body.bj3d .canli-bas .kapat { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.35); color: var(--y3); font-size: 20px; line-height: 1; }

/* el toplamı rozetleri (sahnenin kartlarına iliştirilir) */
.bj-et { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; padding: 6px 7px 6px 13px; border-radius: 999px; white-space: nowrap; will-change: transform;
  background: linear-gradient(160deg, rgba(20,38,82,.62), rgba(7,14,34,.72)); border: 1px solid rgba(231,197,111,.36); box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s; }
.bj-et[hidden] { display: none; }
.bj-et small { font: 500 11px/1 'Poppins', sans-serif; letter-spacing: .14em; color: rgba(244,237,219,.66); text-transform: uppercase; }
.bj-et b { min-width: 38px; height: 30px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font: 800 20px/1 'Barlow Condensed', sans-serif; color: #f4eddb;
  background: rgba(0,0,0,.35); border: 1px solid rgba(231,197,111,.36); }
.bj-et.el b { background: linear-gradient(180deg, #ecc96f, #b4862c); color: #1d1404; border-color: rgba(255,255,255,.35); }
.bj-et.aktif { box-shadow: 0 0 0 2px #ecc96f, 0 0 24px rgba(236,201,111,.45), 0 10px 26px rgba(0,0,0,.4); }
.bj-et.s-kazandi b, .bj-et.s-bj b { background: linear-gradient(180deg, #8ff3b4, #2fae66); color: #04210f; }
.bj-et.s-kaybetti b, .bj-et.patladi b { background: linear-gradient(180deg, #ff9585, #c43c3c); color: #fff; }
.bj-et.s-berabere b { background: rgba(255,255,255,.2); color: #fff; }

/* tablet / dar bilgisayar */
@media (max-width: 1100px) { body.bj3d .eylem { grid-template-columns: repeat(4, 104px); } body.bj3d .e { height: 76px; } }
/* telefon (dik): alt panel tam genişlik */
@media (max-width: 700px) {
  body.bj3d .ust { padding: 8px 10px; gap: 6px; }
  body.bj3d .baslik { display: none; }
  body.bj3d .ust .ikon { width: 36px; height: 36px; border-radius: 11px; } body.bj3d .ust .ikon svg { width: 18px; height: 18px; }
  body.bj3d .ust .uye, body.bj3d .ust .bakiye { padding: 5px 9px; border-radius: 11px; }
  body.bj3d .kontrol { left: 0; right: 0; bottom: 0; transform: none; max-width: none; width: auto; border-radius: 22px 22px 0 0; border-bottom: 0 !important;
    padding: 14px 10px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  body.bj3d .eylem { grid-template-columns: repeat(4, 1fr); flex-basis: 100%; gap: 7px; }
  body.bj3d .e { height: 60px; border-radius: 14px; } body.bj3d .e b { font-size: 13.5px; letter-spacing: .05em; } body.bj3d .e small { display: none; }
  body.bj3d .fisler { flex-basis: 100%; justify-content: space-between; padding: 0 2px; border: 0; } body.bj3d .fisler .fis { width: 46px; height: 46px; }
  body.bj3d .bahis-kutu { flex-basis: 100%; } body.bj3d .dagit { min-width: 0; flex: 1; height: 56px; }
  body.bj3d .sira { bottom: auto; top: auto; }
  body.bj3d.el-acik .sira { bottom: 92px; }
  body.bj3d .sonuc-bant { top: 47%; padding: 12px 26px; }
  body.bj3d.canli-acik .panel.canli { top: 60px; right: 8px; max-height: calc(100vh - 290px); }
  .bj-et { gap: 6px; padding: 4px 5px 4px 10px; } .bj-et small { font-size: 9.5px; } .bj-et b { min-width: 32px; height: 26px; font-size: 17px; }
}
/* yatay telefon / alçak ekran */
@media (max-height: 520px) and (min-width: 560px) {
  body.bj3d .ust { padding: 6px 12px; } body.bj3d .kontrol { bottom: 8px; padding: 8px 10px; }
  body.bj3d .e { height: 56px; } body.bj3d .e small { display: none; } body.bj3d .eylem { grid-template-columns: repeat(4, 96px); }
  body.bj3d .fisler .fis { width: 42px; height: 42px; } body.bj3d .dagit { height: 50px; } body.bj3d .sira { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .bj-yukle i { animation-duration: 2s; } }