/* ==========================================================================
   Promosyonlar, Turnuvalar, Şans Kutuları, VIP, Hesabım
   ========================================================================== */

/* ---------- promosyon kartı ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.promo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 60%), var(--glass); border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.promo:hover { --lift: -5px; border-color: color-mix(in srgb, var(--tone) 50%, transparent); box-shadow: 0 22px 40px -22px var(--tone); }
.promo.is-tilting { transition-duration: .08s, .3s, .35s; }
.promo__top { display: flex; align-items: center; justify-content: space-between; }
.promo__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--tone); box-shadow: 0 0 24px -6px var(--tone); }
.promo__ico .ico { width: 24px; height: 24px; }
.promo__tag { align-self: flex-start; padding: 3px 9px; border-radius: 20px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: color-mix(in srgb, var(--tone) 70%, #fff); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.promo h3 { font-size: 17px; }
.promo p { font-size: 13.5px; color: var(--text-dim); }

.promo--full { padding: 0; gap: 0; }
.promo__art { position: relative; display: grid; place-items: center; height: 130px; background: radial-gradient(60% 90% at 50% 100%, color-mix(in srgb, var(--tone) 45%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--tone) 14%, var(--bg-1)), var(--bg-1)); overflow: hidden; }
.promo__ring { position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--tone) 45%, transparent); animation: spin 20s linear infinite; }
.promo__art .promo__ico { width: 64px; height: 64px; border-radius: 18px; animation: float-y 4s ease-in-out infinite; }
.promo__art .promo__ico .ico { width: 32px; height: 32px; }
.promo__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px; }
.promo__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

/* ---------- turnuvalar ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tour { position: relative; display: grid; gap: 14px; padding: 20px; border-radius: var(--radius-xl); background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--tone) 25%, transparent), transparent 60%), var(--glass); border: 1px solid color-mix(in srgb, var(--tone) 25%, transparent); overflow: hidden; }
.tour__head { display: flex; align-items: center; gap: 12px; }
.tour__head > div { flex: 1; min-width: 0; }
.tour__head small { font-size: 12px; color: var(--text-mute); }
.tour__head h3 { font-size: 17px; }
.tour__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--tone) 20%, transparent); color: var(--tone); box-shadow: 0 0 24px -6px var(--tone); animation: float-y 4s ease-in-out infinite; }
.tour__status { padding: 4px 10px; border-radius: 12px; background: rgba(34, 197, 94, .14); color: var(--green-hi); font-size: 11px; font-weight: 800; white-space: nowrap; }
.tour__status--soon { background: rgba(245, 196, 81, .14); color: var(--gold); }
.tour__prize { font-family: var(--font-display); font-size: 34px; font-weight: 900; line-height: 1; background: linear-gradient(180deg, #fff 20%, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour__prize small { font-family: var(--font); font-size: 13px; font-weight: 600; -webkit-text-fill-color: var(--text-mute); }
.tour__facts { display: grid; gap: 6px; }
.tour__facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(4, 8, 20, .45); font-size: 13px; }
.tour__facts dt { color: var(--text-mute); }
.tour__facts dd { font-weight: 700; text-align: right; }

.prize-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.prize-table__row { display: flex; justify-content: space-between; padding: 11px 12px; border-radius: 10px; background: var(--bg-2); font-size: 13.5px; }
.prize-table__row span { color: var(--text-mute); font-weight: 700; }
.prize-table__row b { font-family: var(--font-display); }
.prize-table__row.is-top { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .25); }

/* ---------- şans kutuları ---------- */
.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mbox { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--box) 20%, transparent), transparent 70%), var(--glass); border: 1px solid color-mix(in srgb, var(--box) 25%, transparent); overflow: hidden; animation: card-in .6s var(--ease) both; animation-delay: var(--d); transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.mbox:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--box) 60%, transparent); box-shadow: 0 24px 44px -24px var(--box); }
.mbox__stage { position: relative; display: grid; place-items: center; height: 180px; perspective: 700px; }
.mbox__glow { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--box) 45%, transparent), transparent 65%); animation: glow-pulse 3s ease-in-out infinite; }
.mbox__shadow { position: absolute; bottom: 24px; width: 80px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); }
@keyframes glow-pulse { 50% { transform: scale(1.15); opacity: .7; } }

.cube { --s: 80px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: cube-turn 10s linear infinite; }
.mbox:not(:hover) .cube { animation-play-state: paused; }
.cube--lg { --s: 120px; }
@keyframes cube-turn { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.cube__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, .55) 42% 58%, transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--box) 85%, #fff), color-mix(in srgb, var(--box) 70%, #000)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), inset 0 0 20px rgba(0, 0, 0, .25); backface-visibility: hidden; }
.cube__face .ico { width: 40%; height: 40%; color: #fff; }
.cube__face--front  { transform: translateZ(calc(var(--s) / 2)); }
.cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, .55) 42% 58%, transparent 58%), linear-gradient(0deg, transparent 42%, rgba(255, 255, 255, .55) 42% 58%, transparent 58%), color-mix(in srgb, var(--box) 90%, #fff); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.mbox__body { display: grid; gap: 6px; padding: 16px; }
.mbox__rarity { justify-self: start; padding: 3px 9px; border-radius: 20px; background: color-mix(in srgb, var(--box) 18%, transparent); color: color-mix(in srgb, var(--box) 75%, #fff); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mbox h3 { font-size: 18px; }
.mbox p { font-size: 13px; color: var(--text-mute); }
.mbox p b { color: var(--text); }
.mbox ul { display: grid; gap: 5px; margin: 4px 0 8px; font-size: 13px; color: var(--text-dim); }
.mbox li { display: flex; align-items: center; gap: 8px; }
.mbox li .ico { width: 14px; height: 14px; color: var(--green-hi); stroke-width: 3; }

/* ---------- VIP ---------- */
.vip-hero { --gb-bg: radial-gradient(60% 100% at 100% 50%, rgba(var(--accent-rgb), .3), transparent 60%), radial-gradient(50% 80% at 0% 100%, rgba(139, 92, 246, .22), transparent 60%), linear-gradient(135deg, #0b1633, #060b19); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: clamp(26px, 4vw, 52px); border-radius: var(--radius-xl); }
.vip-hero h1 { margin: 12px 0 14px; font-size: clamp(30px, 3.6vw, 50px); }
.vip-hero p { max-width: 520px; margin-bottom: 24px; color: var(--text-dim); }
.vip-ring { position: relative; width: clamp(180px, 20vw, 230px); aspect-ratio: 1; }
.vip-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vip-ring__track { fill: none; stroke: rgba(120, 150, 220, .12); stroke-width: 8; }
.vip-ring__bar { fill: none; stroke: var(--cyan); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); animation: ring-in 1.6s var(--ease) both; }
@keyframes ring-in { from { stroke-dashoffset: 100; } }
.vip-ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vip-ring__label small { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .1em; }
.vip-ring__label strong { font-family: var(--font-display); font-size: 28px; }
.vip-ring__label span { font-size: 12.5px; color: var(--text-dim); }

.tier-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 10px 18px; border-radius: var(--radius-lg); background: var(--glass); border: 1px solid var(--line); text-align: center; animation: card-in .6s var(--ease-spring) both; animation-delay: var(--d); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform .4s var(--ease-spring), border-color .3s, box-shadow .3s; }
.tier:hover { --lift: -6px; border-color: color-mix(in srgb, var(--tier) 55%, transparent); box-shadow: 0 18px 36px -20px var(--tier); }
.tier__gem { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, var(--tier) 18%, transparent); color: var(--tier); box-shadow: 0 0 26px -6px var(--tier); }
.tier__gem .ico { width: 28px; height: 28px; }
.tier strong { font-family: var(--font-display); font-size: 17px; }
.tier small { font-size: 12px; color: var(--text-mute); }
.tier__rake { margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--tier); }
.tier__rake em { font-style: normal; font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--text-mute); }

/* ---------- hesabım ---------- */
.account__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; padding: 22px; border-radius: var(--radius-xl); background: radial-gradient(70% 120% at 100% 0%, rgba(var(--cyan-rgb), .16), transparent 60%), linear-gradient(135deg, #0b1633, #060b19); border: 1px solid var(--line-strong); }
.account__head > div:nth-child(2) { flex: 1; min-width: 200px; }
.account__head h1 { font-size: 22px; }
.account__head small { color: var(--text-mute); }
.account__balance { display: grid; justify-items: end; gap: 6px; }
.account__balance small { color: var(--text-mute); }
.account__balance > b { font-family: var(--font-display); font-size: 28px; font-weight: 800; }
.account__balance > div { display: flex; gap: 6px; }
.bet-list { display: grid; gap: 10px; }
.betcard { border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.betcard header, .betcard footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; }
.betcard ul { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.betcard li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 13.5px; }
.betcard li + li { border-top: 1px solid var(--line); }
.betcard li small { display: block; font-size: 12px; color: var(--text-mute); }
.betcard footer { font-size: 12.5px; color: var(--text-mute); }
.betcard footer b { color: var(--text); }

/* ---------- hesabım · sekme çubuğu (7 sekme: dar ekranda kaydırılır) ---------- */
.account__tabs { max-width: 100%; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.account__tabs::-webkit-scrollbar { display: none; }
.account__tabs button { flex-shrink: 0; white-space: nowrap; }
.acc-chip.is-vip { color: #d8b4fe; border-color: rgba(167, 139, 250, .35); }
.link-btn { display: inline; padding: 0; font-weight: 700; color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--accent-hi-rgb), .4); }
.link-btn:hover { text-decoration-color: currentColor; }
/* Asılı girinti (flex değil): not metninin içinde <b> ya da bir bağlantı düğmesi
   geçtiğinde bunlar ayrı flex öğesi olup metni yan yana sütunlara bölüyordu. */
.acc-note { display: block; padding-left: 24px; text-indent: -24px; margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.acc-note .ico { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; text-indent: 0; }
.acc-sub { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 15px; }
.acc-sub .ico { width: 17px; height: 17px; color: var(--accent-hi); }
.acc-sub:not(:first-child) { margin-top: 22px; }

/* özet sayıları */
.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.acc-stat { --c: var(--accent-rgb); position: relative; display: grid; gap: 2px; padding: 16px 16px 14px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 100% 0%, rgba(var(--c), .16), transparent 60%), var(--bg-2); border: 1px solid var(--line); overflow: hidden; animation: fade-up .5s var(--ease) both; }
.acc-stat:nth-child(2) { animation-delay: 60ms; }
.acc-stat:nth-child(3) { animation-delay: 120ms; }
.acc-stat:nth-child(4) { animation-delay: 180ms; }
.acc-stat--dep  { --c: 34, 197, 94; }
.acc-stat--wd   { --c: 255, 138, 160; }
.acc-stat--play { --c: 167, 139, 250; }
.acc-stat--wait { --c: 245, 196, 81; }
.acc-stat__ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: rgba(var(--c), .16); color: rgb(var(--c)); }
.acc-stat__ico .ico { width: 18px; height: 18px; }
.acc-stat small { font-size: 12px; color: var(--text-mute); }
.acc-stat b { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-stat em { font-style: normal; font-size: 12px; color: var(--text-dim); }

.acc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-bottom: 14px; }
.acc-card + .acc-card { margin-top: 14px; }
.acc-grid .acc-card + .acc-card { margin-top: 0; }
.acc-card .section-head { margin-bottom: 12px; }

.acc-vip { display: flex; align-items: center; gap: 20px; }
.vip-ring--sm { flex-shrink: 0; width: 120px; }
.vip-ring--sm .vip-ring__label strong { font-size: 30px; line-height: 1; }
.acc-vip__text { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.acc-vip__text h2 { font-size: 21px; }
.acc-vip__text p { font-size: 13px; color: var(--text-dim); }
.acc-vip__text p b { color: var(--text); }
.acc-bar { width: 100%; height: 6px; border-radius: 6px; background: rgba(120, 150, 220, .12); overflow: hidden; }
.acc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-hi), var(--cyan)); transform-origin: left; animation: bar-in 1.2s var(--ease) both; }
@keyframes bar-in { from { transform: scaleX(0); } }

.acc-health__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.acc-health__head h2 { font-size: 17px; }
.acc-health__head p { font-size: 12.5px; color: var(--text-dim); }
.acc-score { position: relative; display: grid; place-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--green-hi) calc(var(--p) * 1%), rgba(120, 150, 220, .14) 0); text-align: center; }
.acc-score::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-2); }
.acc-score b, .acc-score small { position: relative; line-height: 1; }
.acc-score b { font-family: var(--font-display); font-size: 20px; }
.acc-score small { font-size: 10px; color: var(--text-mute); }
.acc-checks { display: grid; gap: 6px; }
.acc-checks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-1); font-size: 13px; color: var(--text-dim); }
.acc-checks li > span:nth-child(2) { flex: 1; }
.acc-checks__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(245, 196, 81, .14); color: var(--gold); }
.acc-checks__ico .ico { width: 13px; height: 13px; }
.acc-checks li.is-ok { color: var(--text); }
.acc-checks li.is-ok .acc-checks__ico { background: rgba(34, 197, 94, .16); color: var(--green-hi); }
.acc-recent { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

/* satır listesi: oyun geçmişi, işlemler, spor kuponları */
.acc-rows { display: grid; gap: 6px; }
.acc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); animation: fade-up .35s var(--ease) both; }
.acc-row__ico { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; background: rgba(var(--accent-rgb), .14); color: var(--accent-hi); }
.acc-row__ico .ico { width: 18px; height: 18px; }
.acc-row__ico--dep   { background: rgba(34, 197, 94, .14); color: var(--green-hi); }
.acc-row__ico--wd    { background: rgba(255, 77, 109, .12); color: #ff8aa0; }
.acc-row__ico--live  { background: rgba(255, 77, 109, .12); color: #ff8aa0; }
.acc-row__ico--slot  { background: rgba(167, 139, 250, .16); color: #c4b5fd; }
.acc-row__ico--sport { background: rgba(var(--cyan-rgb), .14); color: var(--cyan); }
.acc-row__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.acc-row__main b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-row__main small { font-size: 12px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-row__ref { font-weight: 600; color: var(--text-mute); }
.acc-row__end { display: grid; justify-items: end; gap: 3px; flex-shrink: 0; text-align: right; }
.acc-row__end b { font-family: var(--font-display); font-size: 15px; font-variant-numeric: tabular-nums; }
.acc-row__end small { font-size: 11.5px; color: var(--text-mute); }
.acc-row .pos, .acc-sum .pos { color: var(--green-hi); }
.acc-row .neg, .acc-sum .neg { color: #ff8aa0; }

.acc-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.acc-sum > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); min-width: 0; }
.acc-sum small { font-size: 11.5px; color: var(--text-mute); }
.acc-sum b { font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums; }
.acc-sum__game { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px !important; }

@media (max-width: 1280px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .prize-table { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) {
  .vip-hero { grid-template-columns: 1fr; }
  .vip-ring { justify-self: center; order: -1; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .box-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mbox ul { display: none; }
  .mbox__stage { height: 140px; }
  .cube { --s: 60px; }
  .account__balance { justify-items: start; }
  .acc-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acc-stat { padding: 14px 12px 12px; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-vip { flex-direction: column; align-items: flex-start; }
  .vip-ring--sm { width: 96px; }
  .acc-row { padding: 9px 10px; gap: 10px; }
  .acc-row__ico { width: 34px; height: 34px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .acc-stats { grid-template-columns: 1fr 1fr; }
}