/* ==================================================================
   Canlı casino sekmesi, lobideki canlı masalar ve BETBY sportsbook
   (views/canli-casino.php, views/lobi.php, views/sportsbook.php · assets/js/casino.js)
   Animasyonlar yalnızca transform / opacity, blur yok (PLAN.md performans kuralları).
   ================================================================== */

/* ---------- hero ---------- */
/* metin ve istatistikler solda alt alta, süs sağda dikey ortada */
.view-hero--live {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
  min-height: 250px;
  background:
    radial-gradient(55% 120% at 100% 0%, rgba(255, 77, 109, .22), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(var(--accent-rgb), .28), transparent 60%),
    linear-gradient(135deg, #0b1633, #060b19);
}
.eyebrow__dot--live { background: var(--red); box-shadow: 0 0 12px var(--red); animation: blink 1.4s ease-in-out infinite; }

.view-hero--live .view-hero__text { max-width: min(560px, 100% - 300px); }
.live-art { position: absolute; top: 50%; right: 44px; z-index: 0; width: 280px; height: 150px; margin-top: -70px; pointer-events: none; }
.live-art__wheel {
  position: absolute; top: 0; right: 26px; width: 136px; height: 136px; border-radius: 50%;
  background: radial-gradient(circle, #0d0a24 0 26%, #c9a14a 26.5% 29%, transparent 29.5%), repeating-conic-gradient(#d7263d 0 10deg, #111 10deg 20deg);
  box-shadow: 0 0 0 7px #3a2a0f, 0 0 0 9px #8b6b2a, 0 18px 36px rgba(0, 0, 0, .5);
  animation: spin 14s linear infinite;
}
.live-art__ball { position: absolute; top: 9px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #cbd5e1); }
.live-art__card {
  position: absolute; display: grid; place-items: center; width: 58px; height: 82px; border-radius: 8px;
  background: #f8fafc; color: #0f172a; box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
}
.live-art__card b { position: absolute; top: 5px; left: 7px; font-family: var(--font-display); font-size: 14px; }
.live-art__card .ico { width: 28px; height: 28px; fill: currentColor; }
.live-art__card--a { left: 8px; top: 40px; transform: rotate(-16deg); animation: live-card-a 5s ease-in-out infinite; }
.live-art__card--b { left: 52px; top: 30px; color: #d7263d; transform: rotate(-3deg); animation: live-card-b 5s ease-in-out .4s infinite; }
.live-art .chip3d--a { right: 150px; bottom: -14px; }
.live-art .chip3d--b { right: -4px; top: 104px; }
.live-art__onair {
  position: absolute; top: -6px; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px;
  background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .4); color: #ffb3c1;
  font: 800 11px/1 var(--font); letter-spacing: .14em;
}
.live-art__onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1.2s ease-in-out infinite; }
@keyframes live-card-a { 50% { transform: rotate(-11deg) translateY(-7px); } }
@keyframes live-card-b { 50% { transform: rotate(2deg) translateY(-9px); } }

/* ---------- sağlayıcı şeridi (logolar beyaz: her temada koyu zemin) ---------- */
.live-provs { display: flex; gap: 10px; margin: 0 0 16px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.live-provs::-webkit-scrollbar { display: none; }
.live-prov {
  position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 58px; min-width: 128px; padding: 0 18px; border-radius: 14px;
  background: linear-gradient(160deg, #111c38, #070c1a); border: 1px solid rgba(120, 150, 220, .16);
  transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.live-prov img { max-width: 104px; max-height: 26px; object-fit: contain; opacity: .78; transition: opacity .2s; }
.live-prov em { position: absolute; top: 5px; right: 7px; font: 700 10px/1 var(--font); font-style: normal; color: #7f8fb5; }
.live-prov__name, .live-prov__all { color: #dfe7ff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.live-prov__all { display: inline-flex; align-items: center; gap: 7px; }
.live-prov__all .ico { width: 17px; height: 17px; }
.live-prov__tag { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font: 800 8.5px/1 var(--font); font-style: normal; letter-spacing: .14em; color: #f5c451; }
.live-prov::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 3px; margin-left: -13px; border-radius: 3px 3px 0 0; background: var(--accent-grad); transform: scaleX(0); transition: transform .3s var(--ease-spring); }
.live-prov:hover { transform: translateY(-2px); border-color: rgba(var(--accent-hi-rgb), .35); }
.live-prov:hover img, .live-prov.is-active img { opacity: 1; }
.live-prov.is-active { border-color: rgba(var(--accent-hi-rgb), .8); box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb), .9); }
.live-prov.is-active::after { transform: scaleX(1); }

/* ---------- kartlar ---------- */
.game-grid--live .gcard__cover, .rail--live .gcard__cover { aspect-ratio: 1; }
.gcard__cover--logo { background: radial-gradient(80% 70% at 50% 30%, rgba(255, 255, 255, .12), transparent 70%), linear-gradient(155deg, #16244a, #070c1a); }
.gcard__cover--logo img { object-fit: contain; padding: 30% 14%; }
.tag--live { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 77, 109, .92); }
.tag--live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
.tag--mw { background: linear-gradient(90deg, #f59e0b, #ef4444); }

/* ---------- lobi: canlı masalar şeridi + kategori kartı ---------- */
.rail--live { grid-auto-columns: minmax(150px, 172px); gap: 14px; }
.section-head__title .pill { font-size: 10.5px; }

.cat-cards--3 { grid-template-columns: repeat(3, 1fr); }
/* üç kart yan yana dar: süs küçülüp sağ üste çekilir, beyaz başlığın arkasına düşmesin */
.cat-cards--3 .cat-card__art { transform: scale(.68); transform-origin: top right; }
.cat-cards--3 .cat-card__text strong { font-size: 26px; }
.cat-card--live { background: radial-gradient(80% 120% at 80% 30%, #ff4d6d, transparent 70%), linear-gradient(135deg, #6b1030, #25071a); }
.cat-card--live .live-art__onair { top: 22px; left: auto; right: 24px; background: rgba(0, 0, 0, .3); }
.cat-card--live .live-art__card--a { left: auto; top: auto; right: 118px; bottom: 26px; }
.cat-card--live .live-art__card--b { left: auto; top: auto; right: 66px; bottom: 34px; }
.cat-card--live .chip3d--a { right: 30px; bottom: 20px; }

/* ---------- BETBY sportsbook ---------- */
.betby {
  position: relative; height: calc(100vh - var(--header-h) - 44px); height: calc(100dvh - var(--header-h) - 44px); min-height: 560px;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); border: 1px solid var(--line);
}
.betby__stage, .betby__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.betby__frame { display: block; background: var(--bg-1); }
.betby__stage { opacity: 0; transition: opacity .5s var(--ease); }
.betby.is-ready .betby__stage { opacity: 1; }

.betby__loader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center;
  background: radial-gradient(60% 50% at 50% 42%, rgba(var(--accent-rgb), .2), transparent 70%), var(--bg-1);
  transition: opacity .45s var(--ease);
}
.betby.is-ready .betby__loader, .betby.is-error .betby__loader { opacity: 0; pointer-events: none; }
.betby__pitch { position: relative; width: 230px; height: 124px; margin-bottom: -96px; border: 2px solid rgba(var(--accent-hi-rgb), .2); border-radius: 12px; overflow: hidden; }
.betby__pitch i:nth-child(1) { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(var(--accent-hi-rgb), .2); }
.betby__pitch i:nth-child(2) { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; border: 2px solid rgba(var(--accent-hi-rgb), .2); }
.betby__pitch i:nth-child(3) { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(var(--accent-hi-rgb), .16), transparent); animation: betby-scan 2.4s var(--ease) infinite; }
.betby__ball { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0b1633; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); animation: betby-bounce .55s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
.betby__ball .ico { width: 42px; height: 42px; animation: spin-t 2.4s linear infinite; }
.betby__shadow { width: 42px; height: 8px; margin-bottom: 10px; border-radius: 50%; background: rgba(0, 0, 0, .4); animation: betby-shadow .55s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
.betby__loader b { font-family: var(--font-display); font-size: 18px; }
.betby__loader small { color: var(--text-mute); font-size: 13px; }
.betby__bar { width: 180px; height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(var(--accent-hi-rgb), .14); overflow: hidden; }
.betby__bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--accent-grad); animation: betby-bar 1.3s var(--ease) infinite; }
@keyframes betby-scan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes betby-bounce { from { transform: translateY(-34px); } to { transform: translateY(0); } }
@keyframes betby-shadow { from { transform: scale(.5); opacity: .3; } to { transform: scale(1); opacity: .8; } }
@keyframes betby-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

.betby__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: var(--bg-1); animation: card-in .45s var(--ease); }
.betby__error-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 77, 109, .14); color: var(--red); }
.betby__error-ico .ico { width: 28px; height: 28px; }
.betby__error b { font-family: var(--font-display); font-size: 19px; }
.betby__error p { max-width: 360px; color: var(--text-dim); }

/* sportsbook sekmesinde canlı destek düğmesi yuvarlak ikona küçülür ve BETBY'nin kupon çubuğunun üstüne çıkar */
body:is([data-tab="spor"], [data-tab="canli-bahis"]) .lc { --lc-b: 84px; }
body:is([data-tab="spor"], [data-tab="canli-bahis"]) .lc:not(.is-open) .lc__fab { height: 48px; padding: 0 4px; }
body:is([data-tab="spor"], [data-tab="canli-bahis"]) .lc:not(.is-open) .lc__fab-text { display: none; }

/* ---------- ekranlar ---------- */
@media (max-width: 1240px) {
  .live-art { right: 24px; transform: scale(.82); transform-origin: right center; }
}
@media (max-width: 1080px) {
  .cat-cards--3 { grid-template-columns: 1fr 1fr; }
  .cat-cards--3 .cat-card--live { grid-column: 1 / -1; }
  .cat-cards--3 .cat-card--live .cat-card__art { transform: none; }
}
@media (max-width: 960px) {
  /* dar ekranda süs metnin arkasında, silik */
  .view-hero--live .view-hero__text { max-width: none; }
  .live-art { top: 14px; right: -24px; margin-top: 0; transform: scale(.6); transform-origin: top right; opacity: .35; }
}
@media (max-width: 767.98px) {
  .view-hero--live { min-height: 0; }
  .live-prov { height: 50px; min-width: 108px; padding: 0 14px; }
  .live-prov img { max-width: 86px; max-height: 22px; }
  .rail--live { grid-auto-columns: 40%; }
  .cat-cards--3 { grid-template-columns: 1fr; }
  .cat-cards--3 .cat-card__art { transform: scale(.75); transform-origin: right center; }

  body:is([data-tab="spor"], [data-tab="canli-bahis"]) .lc { --lc-b: calc(150px + env(safe-area-inset-bottom)); }

  /* sportsbook tam genişlik; alt menünün üstünde biter */
  .betby {
    height: calc(100vh - var(--header-h) - 96px); height: calc(100dvh - var(--header-h) - 86px - env(safe-area-inset-bottom));
    min-height: 460px; margin: -8px calc(var(--gutter) * -1) 0; border-radius: 0; border-left: 0; border-right: 0;
  }
}