/* =========================================================
   HepBet oyun ekranı (oyun.php): tam ekran, liste yok, animasyonlu açılış
   ========================================================= */
:root {
    --bg: #0e141b;
    --bar: #141c25;
    --surface: #233243;
    --text: #fff;
    --soft: #d7e0ea;
    --muted: #8e99a5;
    --accent: #197cff;
    --accent-2: #3a8fff;
    --teal: #0febff;
    --green: #2be931;
    --bar-h: 48px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.pl { margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.ic { width: 20px; height: 20px; flex-shrink: 0; }
[hidden] { display: none !important; }

/* ---------------- Üst çubuk ---------------- */
.pl-bar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--bar-h);
    padding: 0 10px 0 14px;
    background: linear-gradient(180deg, #19222c, var(--bar));
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pl-logo img { height: 34px; width: auto; transition: transform .3s var(--ease); }
.pl-logo:hover img { transform: scale(1.05); }
.pl-title { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .08); line-height: 1.25; }
.pl-title b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.pl-title small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pl-title em { font-style: normal; color: var(--green); font-weight: 600; }
.pl-actions { display: flex; align-items: center; gap: 8px; }
.pl-mode { display: flex; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.pl-mode a { padding: 5px 12px; border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; transition: background .25s, color .25s; }
.pl-mode a:hover { color: #fff; }
.pl-mode a.is-on { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(25, 124, 255, .35); }
.pl-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; background: var(--surface); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .25s; }
.pl-btn.is-primary { background: var(--accent); }
.pl-btn.is-primary:hover { background: var(--accent-2); }
.pl-balance { display: flex; flex-direction: column; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; background: var(--surface); line-height: 1.1; white-space: nowrap; }
.pl-balance small { color: var(--muted); font-size: 10px; }
.pl-balance b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pl-balance b.is-changed { animation: bal-pop .6s ease-out; }
/* Bakiye → Hesabım / Para Yatır */
a.pl-balance { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-content: center; color: inherit; text-decoration: none; transition: border-color .2s; }
a.pl-balance i { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #197cff); color: #fff; font-style: normal; font-weight: 700; line-height: 1; transition: transform .25s; }
a.pl-balance:hover { border-color: rgba(25, 124, 255, .6); }
a.pl-balance:hover i { transform: rotate(90deg); }
@keyframes bal-pop { 30% { color: var(--teal); transform: scale(1.08); } }
.pl-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--soft); transition: background .25s, color .25s, transform .3s var(--ease); }
.pl-icon:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pl-icon .ic { width: 16px; height: 16px; }
.pl-close:hover { background: #e32020; transform: rotate(90deg); }

/* ---------------- Oyun alanı ---------------- */
.pl-stage { position: relative; height: calc(100% - var(--bar-h)); height: calc(100dvh - var(--bar-h)); background: #000; }
.pl-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
body.is-fs { --bar-h: 0px; }
body.is-fs .pl-bar { display: none; }

/* Oyun açılamadığında (giriş, demo yok, hata) gösterilen kart (games.php gamePlaceholder) */
.gp-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
.gp-ph-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.35); transform: scale(1.1); }
.gp-ph-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(380px, 100%); padding: 28px 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(20, 28, 37, .82); text-align: center; backdrop-filter: blur(12px); animation: card-in .6s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.gp-ph-card img { width: 160px; height: 113px; border-radius: 8px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.gp-ph-title { margin: 6px 0 0; font-size: 18px; }
.gp-ph-provider { color: var(--muted); font-size: 12.5px; }
.gp-ph-text { margin: 4px 0 6px; color: var(--soft); }
.gp-ph-btns { display: flex; gap: 8px; }
.gp-ph-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 6px; background: var(--surface); font-weight: 600; transition: background .25s; }
.gp-ph-btn:hover { background: #2b3d51; }
.gp-ph-btn.is-primary { background: var(--accent); }
.gp-ph-btn.is-primary:hover { background: var(--accent-2); }

/* ---------------- Açılış animasyonu ---------------- */
.pl-intro {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
    transition: opacity .6s ease, visibility .6s, transform .7s var(--ease);
}
.pl-intro.is-done { opacity: 0; visibility: hidden; transform: scale(1.08); pointer-events: none; }
.pl-intro-bg { position: absolute; inset: -60px; background-size: cover; background-position: center; opacity: .28; filter: blur(34px) saturate(1.3); transform: scale(1.15); animation: bg-drift 12s ease-in-out infinite alternate; }
@keyframes bg-drift { to { transform: scale(1.3) translate(20px, -14px); } }
.pl-intro-glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, rgba(25, 124, 255, .32), rgba(15, 235, 255, .08) 40%, transparent 65%); animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.12); opacity: .75; } }
.pl-intro-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px; }

.pl-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; }
.pl-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(15, 235, 255, .1) 60%, var(--teal) 78%, var(--accent) 92%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%); animation: spin 1.4s linear infinite; }
.pl-ring.is-2 { inset: 18px; animation-duration: 2.2s; animation-direction: reverse; opacity: .55; }
@keyframes spin { to { transform: rotate(360deg); } }
.pl-intro-logo {
    position: relative;
    width: 150px;
    height: auto;
    filter: drop-shadow(0 0 24px rgba(25, 124, 255, .55));
    -webkit-mask: linear-gradient(110deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%) 0 0 / 300% 100%;
    mask: linear-gradient(110deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%) 0 0 / 300% 100%;
}
.pl-intro-logo { animation: logo-in 1s var(--ease) both, logo-float 3s 1s ease-in-out infinite, logo-shine 2.4s .8s ease-in-out infinite; }
@keyframes logo-in { from { opacity: 0; transform: scale(.55); filter: blur(14px) drop-shadow(0 0 0 transparent); } }
@keyframes logo-float { 50% { transform: translateY(-6px); } }
@keyframes logo-shine { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.pl-intro-game { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(20, 28, 37, .7); backdrop-filter: blur(10px); animation: rise .7s .35s var(--ease) both; }
.pl-intro-game img { width: 96px; height: 68px; border-radius: 8px; object-fit: cover; }
.pl-intro-game span { display: flex; flex-direction: column; max-width: 220px; }
.pl-intro-game b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.pl-intro-game small { color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.pl-progress { position: relative; width: 260px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .1); animation: rise .7s .5s var(--ease) both; }
.pl-progress i { position: absolute; inset: 0 auto 0 0; width: 8%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--teal)); box-shadow: 0 0 12px rgba(15, 235, 255, .6); transition: width .5s var(--ease); }
.pl-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.pl-intro-text { margin: -8px 0 0; color: var(--soft); font-size: 13px; letter-spacing: .02em; animation: rise .7s .6s var(--ease) both; }
.pl-intro-text.is-swap { animation: txt-swap .45s var(--ease); }
@keyframes txt-swap { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- Mobil ---------------- */
@media (max-width: 760px) {
    :root { --bar-h: 44px; }
    .pl-bar { gap: 8px; padding: 0 6px 0 10px; }
    .pl-logo img { height: 28px; }
    .pl-title { padding-left: 8px; }
    .pl-title b { font-size: 13px; }
    .pl-mode a { padding: 4px 8px; font-size: 12px; }
    .pl-balance { height: 30px; padding: 0 8px; }
    .pl-balance small { display: none; }
    .pl-icon { width: 30px; height: 30px; }
    .pl-logo-wrap { width: 170px; height: 170px; }
    .pl-intro-logo { width: 116px; }
    .pl-progress { width: 200px; }
}
@media (max-width: 420px) {
    .pl-title small { display: none; }
    .pl-logo { display: none; }
    .pl-title { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}