/* VIP Seviye ekranı — Bonus Merkezi içi, mobile-first.
   Sayfa tonu SorosBet koyu zümrüt (--bm-* / --sb-* token'ları; yoksa Luxor koyu tema fallback).
   Seviye kartları kendi materyal rengini taşır: data-family = bronze | silver | gold | platinum | emerald | diamond | black. */

.vip {
  --vip-bg: var(--bm-surface, #141414);
  --vip-bg-2: var(--bm-surface-2, #1b1b1b);
  --vip-soft: var(--bm-surface-soft, #232323);
  --vip-text: var(--bm-text, #f2f5f4);
  --vip-text-2: var(--bm-text-2, #a3aaa8);
  --vip-text-dim: var(--bm-text-dim, #777f7c);
  --vip-accent: var(--bm-emerald, #58d2bd);
  --vip-accent-deep: var(--bm-emerald-deep, #2c9d8b);
  --vip-on-accent: var(--bm-on-accent, #062126);
  --vip-border: var(--bm-border, #2a2a2a);
  --vip-border-soft: var(--bm-border-soft, #222);
  --vip-radius: var(--bm-radius-lg, 14px);
  --vip-radius-sm: var(--bm-radius-sm, 8px);
  --vip-coral: var(--bm-coral, #d85c67);
  /* materyal (varsayılan: zümrüt) */
  --mat: #58d2bd; --mat-2: #2c9d8b; --mat-3: #0f3a34; --mat-ink: #062126; --mat-glow: rgba(88, 210, 189, .35);
  color: var(--vip-text);
  display: grid;
  gap: 14px;
  padding-bottom: 8px;
}
.vip *, .vip *::before, .vip *::after { box-sizing: border-box; }

/* ---------- materyal paletleri ---------- */
.vip [data-family="bronze"], .vip[data-family="bronze"] { --mat: #d9a173; --mat-2: #9a5f34; --mat-3: #3a2417; --mat-ink: #2a1608; --mat-glow: rgba(217, 161, 115, .35); }
.vip [data-family="silver"], .vip[data-family="silver"] { --mat: #d6dedd; --mat-2: #8c9a98; --mat-3: #2e3736; --mat-ink: #141a19; --mat-glow: rgba(214, 222, 221, .3); }
.vip [data-family="gold"], .vip[data-family="gold"] { --mat: #f0cc6d; --mat-2: #b8871f; --mat-3: #3d2f0c; --mat-ink: #241a00; --mat-glow: rgba(240, 204, 109, .35); }
.vip [data-family="platinum"], .vip[data-family="platinum"] { --mat: #bfe3e1; --mat-2: #6fa6a4; --mat-3: #1f3a3a; --mat-ink: #0b1f1f; --mat-glow: rgba(191, 227, 225, .35); }
.vip [data-family="emerald"], .vip[data-family="emerald"] { --mat: #58d2bd; --mat-2: #2c9d8b; --mat-3: #0f3a34; --mat-ink: #062126; --mat-glow: rgba(88, 210, 189, .4); }
.vip [data-family="diamond"], .vip[data-family="diamond"] { --mat: #a9f0ff; --mat-2: #5bb8d6; --mat-3: #14323f; --mat-ink: #061a22; --mat-glow: rgba(169, 240, 255, .4); }
.vip [data-family="black"], .vip[data-family="black"] { --mat: #e8e8f0; --mat-2: #7b6ea6; --mat-3: #0b0b12; --mat-ink: #0b0b12; --mat-glow: rgba(160, 140, 220, .45); }

/* ---------- hero (seviye kartı) ---------- */
.vip-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--vip-radius);
  border: 1px solid color-mix(in srgb, var(--mat) 35%, var(--vip-border));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mat) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--mat-3) 70%, var(--vip-bg)) 0%, var(--vip-bg) 65%, var(--vip-bg-2) 100%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 color-mix(in srgb, var(--mat) 30%, transparent);
  padding: 16px 16px 14px;
  display: grid;
  gap: 14px;
}
.vip-hero__glow { position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--mat-glow) 0%, transparent 65%); filter: blur(20px); pointer-events: none; }
.vip-hero__top { display: flex; align-items: center; gap: 12px; position: relative; }
.vip-hero__badge { position: relative; width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; }
.vip-hero__gem, .vip-tiers__gem, .vip-rewards__gem {
  position: absolute; inset: 0; border-radius: 16px; transform: rotate(45deg) scale(.78);
  background: linear-gradient(135deg, var(--mat) 0%, var(--mat-2) 60%, var(--mat-3) 100%);
  box-shadow: 0 8px 22px -8px var(--mat-glow), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .35);
}
.vip-hero__num { position: relative; font-weight: 800; font-size: 18px; letter-spacing: .04em; color: var(--mat-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.vip-hero__title { min-width: 0; display: grid; gap: 2px; flex: 1; }
.vip-hero__eyebrow { font-size: 10px; letter-spacing: .18em; font-weight: 700; color: color-mix(in srgb, var(--mat) 80%, #fff); opacity: .85; }
.vip-hero__name { margin: 0; font-family: 'Libre Caslon Text', Georgia, serif; font-size: clamp(22px, 6vw, 30px); line-height: 1.1; font-weight: 700; color: #fff; text-shadow: 0 2px 18px var(--mat-glow); }
.vip-hero__sub { font-size: 12px; color: var(--vip-text-2); }
.vip-hero__sub b { color: var(--vip-text); font-weight: 600; }
.vip-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: relative; }
.vip-stat { background: rgba(0, 0, 0, .25); border: 1px solid var(--vip-border-soft); border-radius: var(--vip-radius-sm); padding: 8px; display: grid; gap: 2px; min-width: 0; }
.vip-stat__label { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vip-text-dim); line-height: 1.2; }
.vip-stat__value { font-size: clamp(12px, 3.3vw, 14px); font-weight: 700; color: #fff; overflow-wrap: anywhere; line-height: 1.2; }
.vip-progress { position: relative; display: grid; gap: 6px; }
.vip-progress__bar { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid var(--vip-border-soft); overflow: hidden; }
.vip-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mat-2), var(--mat)); box-shadow: 0 0 14px var(--mat-glow); transition: width .6s ease; }
.vip-progress__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--vip-text-dim); }
.vip-progress__pct { color: var(--mat); font-weight: 700; }
.vip-progress__note { margin: 0; font-size: 12px; color: var(--vip-text-2); }

/* ---------- hesap şeridi = seviye kartı (Sorosbet kabuğu) ---------- */
.vip--strip { padding-bottom: 0; margin: 14px 0 0; }
.bm-account[data-vip="hero"] { padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; margin: 0; }
.bm-account[data-vip="hero"] > .bm-account__row, .bm-account[data-vip="hero"] > .bm-vip__progress { display: none !important; }
.vip-hero__idrow { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 1px 0 2px; }
.vip-hero__idrow .bm-userbadge { font-size: 12.5px; }
.vip-hero__idrow .bm-copy { width: 26px; height: 26px; border-radius: 7px; }
.vip-hero__idrow .bm-copy svg { width: 14px; height: 14px; }
/* Bilet etkinliği yuvası: #ticketActivitySection buraya TAŞINIR (görsel kurallar theme-cmt.css'te).
   Bölüm yokken / gizliyken yuva da gizlenir ki grid boşluğu kalmasın. */
.vip-hero__tickets { position: relative; min-width: 0; }
.vip-hero__tickets:empty, .vip-hero__tickets:not(:has(> :not(.hidden))) { display: none; }

/* ---------- sekmeler ---------- */
.vip-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.vip-tabs::-webkit-scrollbar { display: none; }
.vip-tab {
  flex: 1 0 auto; position: relative; white-space: nowrap; border: 1px solid var(--vip-border); background: var(--vip-bg-2); color: var(--vip-text-2);
  border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.vip-tab:hover { color: var(--vip-text); border-color: var(--vip-accent-deep); }
.vip-tab.is-active { background: color-mix(in srgb, var(--vip-accent) 18%, var(--vip-bg-2)); border-color: var(--vip-accent); color: #fff; }
.vip-tab__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--vip-accent); color: var(--vip-on-accent); font-size: 11px; font-weight: 800; }

/* ---------- kartlar ---------- */
.vip-body { display: grid; gap: 14px; }
.vip-card { border-radius: var(--vip-radius); border: 1px solid var(--vip-border); background: var(--bm-card-grad, var(--vip-bg)); padding: 14px; display: grid; gap: 12px; }
.vip-card--muted { background: var(--vip-bg-2); }
.vip-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vip-card__head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.vip-card__hint { font-size: 12px; color: var(--vip-text-dim); }
.vip-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vip-kv { display: grid; gap: 2px; padding: 10px; border-radius: var(--vip-radius-sm); background: rgba(0, 0, 0, .22); border: 1px solid var(--vip-border-soft); min-width: 0; }
.vip-kv span { font-size: 11px; color: var(--vip-text-dim); }
.vip-kv b { font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.vip-kv small { font-size: 11px; font-weight: 500; color: var(--vip-text-2); }
.vip-projection { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--vip-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--vip-accent) 18%, transparent), transparent); border: 1px dashed color-mix(in srgb, var(--vip-accent) 45%, transparent); }
.vip-projection span { font-size: 12px; color: var(--vip-text-2); }
.vip-projection b { font-size: 20px; color: var(--vip-accent); }
.vip-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--vip-text-2); }
.vip-note b { color: var(--vip-text); }
.vip-ok { margin: 0; font-size: 13px; color: var(--vip-accent); font-weight: 600; }
.vip-empty { margin: 0; font-size: 13px; color: var(--vip-text-dim); }
.vip-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--vip-text-2); line-height: 1.5; }
.vip-list b { color: var(--vip-accent); }

/* ---------- haftalık teklif ---------- */
.vip-offer { border-color: color-mix(in srgb, var(--mat) 40%, var(--vip-border)); background: linear-gradient(150deg, color-mix(in srgb, var(--mat-3) 55%, var(--vip-bg)), var(--vip-bg) 70%); }
.vip-offer__amount { display: grid; gap: 2px; }
.vip-offer__amount span { font-size: 12px; color: var(--vip-text-2); }
.vip-offer__amount b { font-size: 30px; line-height: 1.05; color: #fff; text-shadow: 0 2px 20px var(--mat-glow); }
.vip-choice { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vip-choice__btn {
  display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: var(--vip-radius-sm); cursor: pointer; font: inherit; color: var(--vip-text);
  background: rgba(0, 0, 0, .3); border: 1px solid var(--vip-border); transition: transform .12s, border-color .15s, box-shadow .15s;
}
.vip-choice__btn:hover { border-color: var(--vip-accent); transform: translateY(-1px); box-shadow: 0 10px 24px -14px var(--mat-glow); }
.vip-choice__btn:disabled { opacity: .6; cursor: default; transform: none; }
.vip-choice__btn--spread { border-color: color-mix(in srgb, var(--vip-accent) 55%, var(--vip-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--vip-accent) 16%, transparent), rgba(0, 0, 0, .3)); }
.vip-choice__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vip-text-2); }
.vip-choice__title em { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--vip-accent); color: var(--vip-on-accent); font-size: 11px; }
.vip-choice__value { font-size: 22px; color: #fff; }
.vip-choice__sub { font-size: 12px; color: var(--vip-text-dim); }

.vip-inst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vip-inst__item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "seq amount btn" "seq state btn"; align-items: center; gap: 2px 10px; padding: 9px 10px; border-radius: var(--vip-radius-sm); background: rgba(0, 0, 0, .25); border: 1px solid var(--vip-border-soft); }
.vip-inst__seq { grid-area: seq; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--vip-text-dim); text-transform: uppercase; }
.vip-inst__amount { grid-area: amount; font-size: 15px; color: #fff; }
.vip-inst__state { grid-area: state; font-size: 11px; color: var(--vip-text-dim); }
.vip-inst__item .vip-btn { grid-area: btn; }
.vip-inst__item.is-open { border-color: var(--vip-accent); background: color-mix(in srgb, var(--vip-accent) 10%, rgba(0, 0, 0, .25)); }
.vip-inst__item.is-paid .vip-inst__amount { color: var(--vip-accent); }
.vip-inst__item.is-paid .vip-inst__state { color: var(--vip-accent); }
.vip-inst__item.is-expired, .vip-inst__item.is-void { opacity: .55; }

/* ---------- seviye ödülleri / doğum günü ---------- */
.vip-rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vip-rewards__item { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 10px; border-radius: var(--vip-radius-sm); background: rgba(0, 0, 0, .25); border: 1px solid color-mix(in srgb, var(--mat) 30%, var(--vip-border-soft)); }
.vip-rewards__gem { position: relative; width: 28px; height: 28px; inset: auto; border-radius: 9px; transform: rotate(45deg) scale(.8); }
.vip-rewards__text { display: grid; gap: 1px; min-width: 0; }
.vip-rewards__text b { color: #fff; font-size: 14px; }
.vip-rewards__text span { font-size: 11px; color: var(--vip-text-dim); }
.vip-rewards__amount { color: var(--mat); font-size: 15px; white-space: nowrap; }
.vip-birthday { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vip-birthday__text { display: grid; gap: 4px; flex: 1 1 220px; }
.vip-birthday__text b { font-size: 22px; color: #fff; }
.vip-birthday__text span { font-size: 12px; color: var(--vip-text-2); line-height: 1.5; }

/* ---------- butonlar / rozetler ---------- */
.vip-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px;
  padding: 11px 18px; border-radius: 999px; color: var(--vip-on-accent); background: linear-gradient(135deg, var(--vip-accent), var(--vip-accent-deep));
  box-shadow: 0 10px 24px -12px var(--vip-accent); transition: transform .12s, opacity .15s; white-space: nowrap;
}
.vip-btn:hover { transform: translateY(-1px); }
.vip-btn:disabled, .vip-btn.is-busy { opacity: .55; cursor: default; transform: none; }
.vip-btn--sm { padding: 8px 14px; font-size: 11px; }
.vip-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--vip-soft); color: var(--vip-text-2); border: 1px solid var(--vip-border); white-space: nowrap; }
.vip-chip--ok, .vip-chip--paid { background: color-mix(in srgb, var(--vip-accent) 18%, transparent); color: var(--vip-accent); border-color: color-mix(in srgb, var(--vip-accent) 40%, transparent); }
.vip-chip--warn, .vip-chip--expired, .vip-chip--void { background: color-mix(in srgb, var(--vip-coral) 18%, transparent); color: var(--vip-coral); border-color: color-mix(in srgb, var(--vip-coral) 40%, transparent); }
.vip-chip--pending, .vip-chip--granting, .vip-chip--ambiguous { background: rgba(240, 204, 109, .14); color: #f0cc6d; border-color: rgba(240, 204, 109, .35); }

/* ---------- seviye listesi ---------- */
.vip-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vip-tiers__item { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "gem main" "facts facts"; gap: 8px 10px; padding: 10px; border-radius: var(--vip-radius-sm); background: rgba(0, 0, 0, .22); border: 1px solid color-mix(in srgb, var(--mat) 22%, var(--vip-border-soft)); }
.vip-tiers__item.is-current { border-color: var(--mat); background: linear-gradient(135deg, color-mix(in srgb, var(--mat-3) 60%, transparent), rgba(0, 0, 0, .25)); box-shadow: 0 12px 30px -20px var(--mat-glow); }
.vip-tiers__item.is-done { opacity: .78; }
.vip-tiers__gem { grid-area: gem; position: relative; inset: auto; width: 34px; height: 34px; border-radius: 10px; transform: rotate(45deg) scale(.8); display: grid; place-items: center; }
.vip-tiers__gem i { transform: rotate(-45deg); font-style: normal; font-weight: 800; font-size: 12px; color: var(--mat-ink); }
.vip-tiers__main { grid-area: main; display: grid; gap: 2px; min-width: 0; align-self: center; }
.vip-tiers__main b { color: #fff; font-size: 14px; }
.vip-tiers__main b em { font-style: normal; font-size: 11px; color: var(--mat); }
.vip-tiers__main span { font-size: 11px; color: var(--vip-text-dim); }
.vip-tiers__facts { grid-area: facts; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.vip-tiers__facts div { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; border-top: 1px dashed var(--vip-border-soft); padding-top: 4px; min-width: 0; }
.vip-tiers__facts dt { color: var(--vip-text-dim); }
.vip-tiers__facts dd { margin: 0; color: var(--vip-text); font-weight: 600; white-space: nowrap; }

/* ---------- tablolar ---------- */
.vip-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vip-table th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--vip-text-dim); padding: 6px 8px; border-bottom: 1px solid var(--vip-border); }
.vip-table td { padding: 8px; border-bottom: 1px solid var(--vip-border-soft); color: var(--vip-text-2); vertical-align: top; }
.vip-table td small { color: var(--vip-text-dim); }
.vip-table .r { text-align: right; white-space: nowrap; }
.vip-table .pos { color: var(--vip-accent); font-weight: 700; }
.vip-table .neg { color: var(--vip-coral); font-weight: 700; }
.vip-table--compare td:first-child { color: var(--vip-text-dim); }
.vip-table--compare td:nth-child(2) { color: #fff; font-weight: 700; }
.vip-table--compare td:nth-child(3) { color: var(--vip-accent); font-weight: 700; }
.vip-card .vip-table { display: block; overflow-x: auto; }
.vip-card .vip-table thead, .vip-card .vip-table tbody, .vip-card .vip-table tr { display: table; width: 100%; table-layout: fixed; }

/* ---------- masaüstü ---------- */
@media (min-width: 640px) {
  .vip-hero { padding: 22px 22px 18px; grid-template-columns: 1fr; }
  .vip-hero__badge { width: 68px; height: 68px; }
  .vip-hero__num { font-size: 22px; }
  .vip-choice { grid-template-columns: 1fr 1fr; }
  .vip-grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vip-tiers__item { grid-template-columns: 40px minmax(160px, 1fr) 2fr; grid-template-areas: "gem main facts"; align-items: center; }
  .vip-tiers__facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vip-tiers__facts div { flex-direction: column; border-top: 0; padding-top: 0; gap: 1px; }
  .vip-tab { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vip-progress__fill, .vip-choice__btn, .vip-btn { transition: none; }
}

/* ---------- kompakt hesap kartı (15 Eylül v2) ---------- */
.vip-hero--strip { padding: 12px 14px 12px; gap: 10px; border-radius: 12px; }
.vip-hero--strip .vip-hero__badge { width: 46px; height: 46px; }
.vip-hero--strip .vip-hero__gem { border-radius: 13px; }
.vip-hero--strip .vip-hero__num { font-size: 15px; }
.vip-hero--strip .vip-hero__eyebrow { font-size: 9px; letter-spacing: .16em; }
.vip-hero--strip .vip-hero__name { font-size: clamp(19px, 5vw, 22px); }
.vip-hero--strip .vip-hero__sub { font-size: 11.5px; }
.vip-hero--strip .vip-hero__idrow { margin: 0; }
.vip-hero--strip .vip-hero__idrow .bm-userbadge { font-size: 12px; }
.vip-hero--strip .vip-hero__idrow .bm-copy { width: 24px; height: 24px; }
.vip-hero--strip .vip-progress { gap: 4px; }
.vip-hero--strip .vip-progress__bar { height: 7px; }
.vip-hero--strip .vip-progress__meta { font-size: 10.5px; }
/* Bilet bölümü kartın alt kenarına yaslanır (kendi üst çizgisi theme-cmt.css'te) */
.vip-hero--strip .vip-hero__tickets { margin: 2px -14px -12px; }
@media (min-width: 640px) {
  .vip-hero--strip { padding: 14px 16px; grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); grid-template-areas: "top progress" "tickets tickets"; column-gap: 20px; align-items: center; }
  .vip-hero--strip .vip-hero__top { grid-area: top; }
  .vip-hero--strip .vip-progress { grid-area: progress; align-self: center; }
  .vip-hero--strip .vip-hero__tickets { grid-area: tickets; margin: 2px -16px -14px; }
  .vip-hero--strip .vip-hero__badge { width: 52px; height: 52px; }
  .vip-hero--strip .vip-hero__num { font-size: 17px; }
}