/* ============================================================
   NOSTALJİ — Premium rewards community
   Black & white canvas · strategic rose-red accents
   ============================================================ */

:root {
  --bg:        #070707;
  --bg-2:      #0b0b0d;
  --panel:     #0f0f12;
  --panel-2:   #141418;
  --panel-3:   #1a1a1f;
  --line:      rgba(255, 255, 255, 0.07);
  --line-2:    rgba(255, 255, 255, 0.13);
  --text:      #f6f6f8;
  --muted:     #8b8b94;
  --muted-2:   #62626b;

  --rose:      #A62B2B;   /* accent (rose-500) — eski pembe-rose ton */
  --rose-2:    #A62B2B;   /* accent-2 (rose-600) — derin rose */
  --rose-3:    #c47373;   /* accent-3 (rose-400) — açık pembe vurgu */
  /* Tüm rose tint'lerinin TEK kaynağı (RGB üçlüsü). Panel themeColor
     değişince site-loader yalnız --rose-rgb'yi günceller; aşağıdaki
     soft/line/shadow + tüm kart glow/border tint'leri otomatik uyumlanır. */
  --rose-rgb:  166, 43, 43;
  --rose-soft: rgba(var(--rose-rgb), 0.14);
  --rose-line: rgba(var(--rose-rgb), 0.35);
  --rose-grad: linear-gradient(135deg, #c47373, #A62B2B 60%, #8b2424);
  --on-rose:  #ffffff;

  /* AURORA katmanı — duyuru şeridi, hero butonu, logo halesi, giriş
     kapısı zemini. `--rose` markanın DÜZ rengi; bu ise markanın
     PARILTISI. Ayrı olmaları gerek: rose tek renk, aurora bir rampa.
     Varsayılanlar şablonun eski sabit değerleri → ayar vermeyen
     müşteride hiçbir şey değişmez. */
  --marka-aurora-duraklar: #6E1A1A, #A62B2B, #DDBB88, #8A6A3A, #6E1A1A;
  --marka-glow:   221, 187, 136;
  --marka-glow-2: 110, 26, 26;

  --gold:      #f0b53d;
  --green:     #34d399;

  --radius:    5px;
  --radius-sm: 4px;
  --radius-lg: 7px;
  --shadow:    0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-rose: 0 14px 34px rgba(var(--rose-rgb), 0.30);
  --sidebar-w: 264px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }

.rose {
  background: linear-gradient(135deg, var(--rose-3), var(--rose));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Kulüp point dot marker */
.kp-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose-grad);
  box-shadow: 0 0 0 3px var(--rose-soft);
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.62rem 1.2rem;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 0.88rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 0.96rem; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.8rem; }

.btn-rose {
  background: var(--rose-grad); color: var(--on-rose, #fff);
  box-shadow: var(--shadow-rose);
}
.btn-rose:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(var(--rose-rgb),0.45); }

/* Aurora CTA — paneldeki "Site Yönetimi" butonu gibi yavaş kayan, renk
   geçişli gradient çerçeve + koyu merkez. Pill formu korunur. */
.btn-aurora {
  color: #fff; border: 2px solid transparent;
  background:
    linear-gradient(#0a0a0e, #0a0a0e) padding-box,
    linear-gradient(90deg, var(--marka-aurora-duraklar)) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 50%;
  animation: btnAuroraPan 6s linear infinite;
  box-shadow: 0 8px 26px -10px rgba(var(--marka-glow), 0.55);
}
@keyframes btnAuroraPan {
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}
.btn-aurora:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px -8px rgba(var(--marka-glow), 0.7);
}
@media (prefers-reduced-motion: reduce) { .btn-aurora { animation: none; } }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05); color: var(--text);
  border-color: var(--line-2);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }

.btn-outline {
  background: transparent; color: var(--rose-3); border-color: var(--rose-line);
}
.btn-outline:hover:not(:disabled) { background: var(--rose-soft); }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 0.6rem; }
.logo-chip {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--rose-grad); color: var(--on-rose);
  border-radius: 11px; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800;
  box-shadow: var(--shadow-rose); flex-shrink: 0;
}
.logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: 0.01em; white-space: nowrap; }
/* Panelden logo görseli yüklenince — harf monogramı yerine görseli oturt. */
.logo-chip.logo-chip-img { background: none; box-shadow: none; padding: 0; overflow: visible; }
/* Şeffaf PNG logo "çıkartma" gibi durmasın → şeklini takip eden BELİRGİN
   drop-shadow (kutu değil). Her logonun bulunduğu yere düşer (sidebar, mobil
   üst bar, auth kartı — hepsi .logo-chip). */
.logo-chip.logo-chip-img,
.logo-chip.logo-chip-img img { overflow: visible; }
.logo-chip.logo-chip-img img {
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
  filter:
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 12px rgba(var(--marka-glow), 0.35));
}
/* Auth kartındaki logo daha büyük → gölge de biraz daha derin. */
.auth-chip.logo-chip-img img {
  filter:
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 18px rgba(var(--marka-glow), 0.45));
}

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.24rem 0.6rem; border-radius: 999px;
}
.tag-hot   { background: var(--rose-soft); color: var(--rose-3); }
.tag-new   { background: rgba(52, 211, 153, 0.14); color: var(--green); }
.tag-vip   { background: rgba(240, 181, 61, 0.14); color: var(--gold); }
.tag-soft  { background: rgba(255, 255, 255, 0.06); color: var(--muted); }

/* ============================================================
   APP SHELL
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  max-width: 1340px; margin-inline: auto;
  align-items: start;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  padding: 1.3rem 0.9rem;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto; scrollbar-width: thin;
}
.sidebar-logo { padding: 0.3rem 0.5rem 0.4rem; }

.usercard {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem; border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.usercard:hover { border-color: var(--rose-line); transform: translateY(-1px); }
.usercard-av {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
}
.usercard-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.usercard-info b { font-size: 0.86rem; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usercard-info small { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--muted); }
.lvl-dot { width: 7px; height: 7px; border-radius: 50%; background: #cd7f32; flex-shrink: 0; }
.usercard-kp { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; }
.usercard-kp b { font-family: var(--font-display); }

.side-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.side-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); padding: 0.85rem 0.7rem 0.35rem;
}
.side-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.62rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 600; font-size: 0.9rem;
  position: relative;
  transition: background 0.16s ease, color 0.16s ease;
}
.side-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.side-link.active { background: var(--rose-soft); color: #fff; }
.side-link.active .side-ic { color: var(--rose-2); }
.side-link.active::before {
  content: ''; position: absolute; left: -0.9rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--rose-grad);
}
.side-ic {
  width: 1.35rem; height: 1.35rem; flex-shrink: 0; text-align: center; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center; transition: color 0.16s ease;
}
.side-ic svg { width: 1.25rem; height: 1.25rem; }
.side-tail { margin-left: auto; }
.badge-pill {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 0.4rem;
  display: grid; place-items: center;
  background: var(--rose-grad); color: var(--on-rose);
  font-size: 0.68rem; font-weight: 700; border-radius: 999px;
}
.badge-pill:empty, .badge-pill[data-empty="1"] { display: none; }
.badge-live {
  background: rgba(52, 211, 153, 0.16); color: var(--green);
  display: inline-flex; gap: 0.3rem;
}
.badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); align-self: center; animation: blink 1.4s ease infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* Sidebar canlı yayın butonları (Kick / YouTube). data-social ile linklenir;
   link yoksa [hidden] kalır (.btn display'ini ezmek için aşağıdaki kural). */
.side-live { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.side-live-btn { justify-content: center; font-size: 0.85rem; padding: 0.6rem 1rem; }
.side-live-btn[hidden] { display: none; }
.slb-ic { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.side-card {
  margin-top: auto;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; text-align: center;
}
.side-card-badge {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border: 2px solid var(--rose); color: var(--rose-3);
  border-radius: 50%; font-weight: 700; font-size: 0.72rem; margin-bottom: 0.5rem;
}
.side-card p { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.8rem; }

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); }

/* ---------- Main ---------- */
.main { padding: 0 1.6rem 5rem; min-width: 0; }

/* App bar */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0 1.1rem;
  margin-bottom: 0.4rem;
  background: linear-gradient(var(--bg) 70%, transparent);
}
.appbar-title h1 { font-size: 1.5rem; }
.appbar-title p { font-size: 0.84rem; color: var(--muted); margin-top: 0.15rem; }
.appbar-right { display: flex; align-items: center; gap: 0.7rem; }
/* STEP: sağ üst sosyal/bağlantı ikonları */
.appbar-social { gap: 0.45rem; }
/* Bağlantı ikonları — TEMAYA bağlı sade tasarım. Dinlenmede nötr koyu kutu +
   beyaz ikon; hover'da tema (rose) vurgusu (panelden tema değişince otomatik
   uyar). Eski çok-renkli marka glow'u kaldırıldı — temaya uymuyor + ikonların
   üstünde buglı renk şeridi/halo yapıyordu. */
.social-ic {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: #eef1f4;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.social-ic:hover {
  color: #fff;
  border-color: rgba(var(--rose-rgb), 0.6);
  background: rgba(var(--rose-rgb), 0.14);
  box-shadow: 0 5px 16px -5px rgba(var(--rose-rgb), 0.5);
  transform: translateY(-1px);
}
.social-ic svg { width: 17px; height: 17px; display: block; }
/* KRİTİK: .social-ic display:grid, [hidden]'ı eziyordu → gizleme çalışmıyordu.
   Daha yüksek özgüllükle gerçekten gizle (panelden gizlenen ikon sitede görünmez). */
.social-ic[hidden] { display: none !important; }
@media (max-width: 560px) { .social-ic { width: 34px; height: 34px; } .social-ic svg { width: 16px; height: 16px; } }
.kp-pill {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease;
}
.kp-pill:hover { border-color: var(--rose-line); transform: translateY(-1px); }
.kp-pill b { font-family: var(--font-display); font-size: 0.95rem; }
.kp-pill small { color: var(--muted); font-size: 0.7rem; font-weight: 600; }
.appbar-av {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--panel-2); border: 1px solid var(--line-2);
  transition: border-color 0.2s ease;
}
.appbar-av:hover { border-color: var(--rose-line); }

/* ---------- Views ---------- */
.view { animation: fadeUp 0.4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2rem 0 1rem;
}
.block-head h3 { font-size: 1.18rem; }
/* Bölüm açıklaması (i18n ile doldurulur; boşsa hidden kalır). */
.block-sub { margin: -0.4rem 0 1rem; color: var(--muted); font-size: 0.86rem; max-width: 60ch; }
.link-more { color: var(--rose-3); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.link-more:hover { color: var(--rose-2); }

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem;
  background: linear-gradient(150deg, var(--panel-2), var(--panel) 65%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.2rem; margin-bottom: 1.4rem;
}
.hero-glow {
  position: absolute; top: -40%; right: -10%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rose-rgb),0.28), transparent 65%);
  pointer-events: none;
}
.hero-body { position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--rose-3); background: var(--rose-soft);
  border: 1px solid var(--rose-line); padding: 0.35rem 0.8rem; border-radius: 999px;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-2); box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(var(--rose-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0); } }
.hero-title { font-size: 2.6rem; font-weight: 800; margin: 1rem 0 0.7rem; }
.hero-lead { color: var(--muted); font-size: 1rem; max-width: 30rem; margin-bottom: 1.5rem; }
.hero-lead b { color: var(--text); }
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-trust { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.84rem; }
/* hidden iken display:flex eziyordu — sahte üye/JTN sayıları gizli kalsın. */
.hero-trust[hidden] { display: none !important; }
.hero-trust b { color: var(--text); font-family: var(--font-display); }
.dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }

.hero-pool {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 0.55rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--rose-line); border-radius: var(--radius);
  padding: 1.4rem;
}
.pool-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pool-value { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.pool-meta { font-size: 0.82rem; color: var(--muted); }
.pool-meta b { color: var(--rose-3); font-family: var(--font-display); }
.pool-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 0.4rem 0 0.6rem; }
.pool-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 1s ease; }

/* Stat grid */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 0.5rem; }
/* hidden iken display:grid eziyordu — ikincil stat şeridi gizli kalsın (v1). */
.statgrid[hidden] { display: none !important; }
.stat {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.stat-ic { font-size: 1.1rem; margin-bottom: 0.5rem; }
.stat-val { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.stat-lab { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; }
.stat-trend { font-size: 0.74rem; font-weight: 700; color: var(--green); margin-top: 0.4rem; }

/* ============================================================
   TASKS
   ============================================================ */
.task-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }

.task {
  display: flex; align-items: center; gap: 0.9rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.task:hover { border-color: var(--line-2); transform: translateY(-2px); }
.task.done { opacity: 0.62; }
.task-ic {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.task-main { flex: 1; min-width: 0; }
.task-main b { font-size: 0.92rem; display: block; }
.task-main small { color: var(--muted); font-size: 0.78rem; }
.task-reward { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--rose-3); font-weight: 700; font-size: 0.8rem; margin-top: 0.2rem; }
.task-act { flex-shrink: 0; }
.task-check {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: rgba(52, 211, 153, 0.15); color: var(--green);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.panel-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin-bottom: 1.2rem;
}
.panel-banner h3 { font-size: 1.2rem; }
.panel-banner p { color: var(--muted); font-size: 0.86rem; margin-top: 0.2rem; }
.streak-box {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.88rem;
}
.streak-box b { font-family: var(--font-display); }
.streak-flame { font-size: 1.1rem; }

.progress-card {
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
}
.progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
.progress-top b { font-family: var(--font-display); font-size: 1.05rem; }
.progress-top span { color: var(--muted); font-size: 0.84rem; }
.progress-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.6s ease; }
.progress-reward { margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); }
.progress-reward b { color: var(--rose-3); }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.seg {
  display: inline-flex; gap: 0.25rem; padding: 0.3rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  margin-bottom: 1.3rem;
}
.seg-btn {
  border: none; background: transparent; color: var(--muted);
  font-weight: 600; font-size: 0.84rem; padding: 0.45rem 1.1rem; border-radius: 999px;
  cursor: pointer; transition: background 0.18s ease, color 0.18s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--rose-grad); color: var(--on-rose); }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0.9rem; align-items: end; margin-bottom: 1.3rem; }
.pod {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1rem; text-align: center; position: relative;
}
.pod-1 { border-color: var(--rose-line); background: linear-gradient(160deg, rgba(var(--rose-rgb),0.14), var(--panel)); }
.pod-medal { font-size: 1.5rem; }
.pod-1 .pod-medal { font-size: 1.9rem; }
.pod-av {
  width: 54px; height: 54px; margin: 0.5rem auto 0.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.05); border: 2px solid var(--line-2);
}
.pod-1 .pod-av { border-color: var(--rose-2); width: 64px; height: 64px; font-size: 1.9rem; }
.pod-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-kp { color: var(--rose-3); font-weight: 700; font-size: 0.86rem; margin-top: 0.2rem; }
.pod-lvl { color: var(--muted); font-size: 0.74rem; margin-top: 0.15rem; }

.lb-table { display: flex; flex-direction: column; gap: 0.45rem; }
.lb-row {
  display: grid; grid-template-columns: 38px 44px 1fr auto; align-items: center; gap: 0.8rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  transition: border-color 0.2s ease;
}
.lb-row:hover { border-color: var(--line-2); }
.lb-row.me { border-color: var(--rose-line); background: linear-gradient(160deg, rgba(var(--rose-rgb),0.13), var(--panel)); }
.lb-rank { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--muted); text-align: center; }
.lb-row.me .lb-rank, .lb-top .lb-rank { color: var(--rose-3); }
.lb-av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.lb-id b { font-size: 0.9rem; font-family: var(--font-display); display: block; }
.lb-id small { color: var(--muted); font-size: 0.74rem; display: flex; align-items: center; gap: 0.3rem; }
.lb-pts { text-align: right; }
.lb-pts b { font-family: var(--font-display); font-size: 1rem; }
.lb-pts small { display: block; color: var(--muted); font-size: 0.7rem; }

.lb-mini { display: flex; flex-direction: column; gap: 0.4rem; }
.lb-mini .lb-row { grid-template-columns: 30px 36px 1fr auto; padding: 0.55rem 0.8rem; }
.lb-mini .lb-av { width: 34px; height: 34px; font-size: 1.05rem; }

/* Rank rozeti (👑🥈🥉⭐) ad satırında */
.lb-badge { margin-right: 0.3rem; }

/* ---------- "Senin Durumun" kişisel özet kartı ---------- */
.standing {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--rose-rgb),0.12), var(--panel) 60%);
  border: 1px solid var(--rose-line); border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem; margin-bottom: 1.2rem;
}
.standing-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.standing-av {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--rose-line);
}
.standing-id { display: flex; flex-direction: column; min-width: 0; }
.standing-id small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--rose-3); }
.standing-id b { font-family: var(--font-display); font-size: 1.1rem; }
.standing-season {
  margin-left: auto; font-size: 0.76rem; font-weight: 600; color: var(--muted);
  background: rgba(0,0,0,0.3); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0.35rem 0.8rem; white-space: nowrap;
}

.standing-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 0.7rem; }
.rank-tile {
  background: rgba(0,0,0,0.28); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.8rem 0.9rem;
}
.rank-tile.reward { border-color: var(--rose-line); background: rgba(var(--rose-rgb),0.1); }
.rank-tile small { display: block; color: var(--muted); font-size: 0.74rem; }
.rank-tile b { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.rank-of { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.rank-next { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: var(--muted); }
.rank-next b { font-family: var(--font-body); font-size: 0.74rem; color: var(--rose-3); }

.standing-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.standing-stat {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.65rem 0.8rem;
}
.standing-stat small { display: block; color: var(--muted); font-size: 0.72rem; margin-bottom: 0.15rem; }
.standing-stat b { font-family: var(--font-display); font-size: 0.95rem; }

@media (max-width: 720px) {
  .standing-ranks { grid-template-columns: 1fr; }
  .standing-stats { grid-template-columns: 1fr 1fr; }
  .standing-season { display: none; }
}

/* Sezon başlığı — mevcut panel-banner stilini kullanır */
.season-banner { margin-bottom: 1rem; }
.season-banner .panel-banner { margin-bottom: 0; }

/* Onur Listesi (Hall of Fame) */
.hof-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* STEP 44 — Onur Listesi: sezon kartları + detay (ilk 10) */
.hof-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease;
}
.hof-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.hof-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.hof-type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rose, #f43f5e); }
.hof-date { color: var(--muted); font-size: 0.74rem; }
.hof-champ-line { display: flex; align-items: center; gap: 0.45rem; margin: 0.4rem 0 0.3rem; }
.hof-champ-line b { font-family: var(--font-display); font-size: 1.02rem; }
.hof-trophy { font-size: 1.05rem; }
.hof-card-meta { display: flex; gap: 1rem; color: var(--muted); font-size: 0.82rem; }
.hof-card-cta { margin-top: 0.5rem; font-size: 0.78rem; color: var(--rose, #f43f5e); font-weight: 600; }
.hof-back { margin-bottom: 0.7rem; }
.hof-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.hof-detail-head b { font-family: var(--font-display); font-size: 1rem; }
.hof-detail-list { display: flex; flex-direction: column; gap: 0.4rem; }
.hof-detail-row {
  display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: 0.7rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem; font-size: 0.86rem;
}
.hof-detail-row.top { border-color: var(--line-2); }
.hof-detail-row .hof-rank { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.hof-detail-row .hof-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-detail-row .hof-reward { color: var(--muted); }
/* STEP 45 — Sezon Geçmişim (profil) */
.season-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 0.8rem; }
.ssum {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; text-align: center;
}
.ssum small { display: block; color: var(--muted); font-size: 0.7rem; margin-bottom: 0.2rem; }
.ssum b { font-family: var(--font-display); font-size: 1rem; }
.season-list { display: flex; flex-direction: column; gap: 0.45rem; }
.season-row {
  display: grid; grid-template-columns: 1.4fr auto 1fr auto; align-items: center; gap: 0.7rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem; font-size: 0.86rem;
}
.season-when b { display: block; font-family: var(--font-display); }
.season-when small { color: var(--muted); font-size: 0.72rem; }
.season-rank { font-family: var(--font-display); font-weight: 700; }
.season-score { color: var(--muted); }
.season-reward { color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  .season-summary { grid-template-columns: repeat(2, 1fr); }
  .season-row { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
}
.hof-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
}
.hof-season { display: flex; align-items: center; gap: 0.5rem; }
.hof-season b { font-family: var(--font-display); font-size: 0.92rem; }
.hof-season small { color: var(--muted); font-size: 0.74rem; }
.hof-crown { font-size: 1.1rem; }
.hof-champ { display: flex; align-items: center; gap: 0.5rem; }
.hof-av {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 1.05rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2);
}
.hof-champ b { font-family: var(--font-display); font-size: 0.88rem; }
.hof-val { color: var(--rose-3); font-weight: 700; font-size: 0.8rem; }

/* ============================================================
   GIVEAWAYS
   ============================================================ */
.give-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.give-list { display: flex; flex-direction: column; gap: 0.8rem; }

.give {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.give:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); }
.give-art {
  height: 120px; position: relative; overflow: hidden;
  display: grid; place-items: center; font-size: 3rem;
}
.give-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.12), transparent 60%); }
/* Çekiliş görseli (panelden imageUrl) — sanat alanını kaplar, sayaç rozetinin altında. */
.give-art .give-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Dürüst "yakında" boş durumu (liderlik/market vb. henüz gerçek veriye bağlı değilken). */
.coming-soon {
  display: grid; place-items: center; text-align: center; gap: 0.5rem;
  min-height: 240px; padding: 2.5rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.coming-soon h3 { font-size: 1.05rem; color: var(--text); }
.coming-soon p { font-size: 0.86rem; color: var(--muted); max-width: 420px; }
.give-time {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 700;
}
.give-time.urgent { color: var(--rose-3); border-color: var(--rose-line); }
.give-body { padding: 1rem 1.1rem 0; flex: 1; }
.give-prize { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.give-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0.2rem 0 0.7rem; }
.give-stats { display: flex; gap: 1.2rem; margin-bottom: 0.7rem; }
.give-stat small { color: var(--muted); font-size: 0.72rem; display: block; }
.give-stat b { font-family: var(--font-display); font-size: 0.95rem; }
.give-prog { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 0.9rem; }
.give-prog i { display: block; height: 100%; background: var(--rose-grad); }
.give-foot { padding: 0 1.1rem 1.1rem; }
.give-cost { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.84rem; }
.give-cost b { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); }
/* STEP 37 — kullanıcının çekiliş katılım sayısı + ikincil Telegram butonu */
.give-mine { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; }
.give-mine small { color: var(--muted); font-size: 0.72rem; }
.give-mine b { font-family: var(--font-display); font-size: 0.95rem; color: var(--lace, #efeae6); }
.give-tg { margin-top: 0.5rem; }
.give.ended { opacity: 0.7; }
.give-entered { color: var(--green); font-weight: 600; font-size: 0.8rem; }

/* ============================================================
   MARKETPLACE
   ============================================================ */
.shop-filters { margin-bottom: 1.2rem; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.shop {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; transition: transform 0.2s ease, border-color 0.2s ease;
}
.shop:hover { transform: translateY(-3px); border-color: var(--line-2); }
.shop-art {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 0.9rem;
  display: grid; place-items: center; font-size: 1.7rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.shop-cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.shop h4 { font-size: 1.02rem; margin: 0.25rem 0 0.4rem; }
.shop p { color: var(--muted); font-size: 0.82rem; flex: 1; margin-bottom: 0.9rem; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.shop-price { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
/* STEP 33 — bakiye yetersizken ürün kartı kilitli görünür. */
.shop-locked { opacity: 0.72; }
.shop-locked:hover { transform: none; border-color: var(--line); }
.shop-warn { display: block; margin-top: 0.55rem; color: var(--muted); font-size: 0.74rem; font-weight: 600; }

/* Ödül talepleri / siparişler listesi */
.req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.req-empty { color: var(--muted); font-size: 0.86rem; padding: 0.5rem 0; }
.req-row {
  display: flex; align-items: center; gap: 0.8rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
}
.req-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.2rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.req-main { flex: 1; min-width: 0; }
.req-main b { font-size: 0.9rem; font-family: var(--font-display); display: block; }
.req-main small { color: var(--muted); font-size: 0.76rem; }
.req-status {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700;
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.req-pending   { background: rgba(240,181,61,0.15);  color: var(--gold); }
.req-approved  { background: rgba(56,189,248,0.15);  color: #7dd3fc; }
.req-delivered { background: rgba(52,211,153,0.15);  color: var(--green); }
.req-rejected  { background: var(--rose-soft);       color: var(--rose-3); }

/* ---------- Ödül talepleri yönetimi (admin) ---------- */
.req-stats { grid-template-columns: repeat(5, 1fr); }
.req-scale { color: var(--muted); font-size: 0.8rem; margin: 0.1rem 0 1.1rem; }
.req-toolbar { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.req-toolbar .seg { margin-bottom: 0; flex-wrap: wrap; }
.req-input, .req-select {
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.84rem; font-family: inherit;
}
.req-input { min-width: 200px; flex: 1; }
.req-input:focus, .req-select:focus { outline: none; border-color: var(--rose-line); }

.req-table { display: flex; flex-direction: column; gap: 0.5rem; }
.areq-group { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0.3rem; }
.areq-group span:last-child { color: var(--muted); font-size: 0.78rem; }
.areq {
  display: grid; grid-template-columns: 1.7fr 1.4fr auto 88px auto auto; gap: 0.9rem; align-items: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 1rem;
}
.areq-user { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.areq-av {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.9rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
  font-family: var(--font-display); font-weight: 800; color: var(--rose-3);
}
.areq-id { min-width: 0; }
.areq-id b { font-size: 0.86rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.areq-id small, .areq-prod small { color: var(--muted); font-size: 0.72rem; }
.areq-prod { min-width: 0; }
.areq-prod b { font-size: 0.84rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.areq-cost { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.areq-date { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.areq-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.req-done { color: var(--muted-2); }

@media (max-width: 1080px) { .req-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .areq { grid-template-columns: 1.4fr 1fr auto auto; }
  .areq-date { display: none; }
}
@media (max-width: 720px) {
  .req-stats { grid-template-columns: repeat(2, 1fr); }
  .areq { grid-template-columns: 1fr 1fr; row-gap: 0.6rem; }
  .areq-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 420px) { .req-stats { grid-template-columns: 1fr; } }

/* ============================================================
   SPONSORS  (logo tabanlı, profesyonel kartlar)
   ============================================================ */
/* 11+ sponsor için kompakt, otomatik sığan grid. */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; }
.sponsor-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Sponsor araç çubuğu: kategori filtresi + arama (kalabalığı önler) */
.sponsor-toolbar {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.sponsor-cats { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; margin-bottom: 0; }
.sponsor-search {
  flex-shrink: 0; min-width: 180px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 0.5rem 0.95rem; font-size: 0.85rem;
}
.sponsor-search::placeholder { color: var(--muted-2); }
.sponsor-search:focus { outline: none; border-color: var(--rose-line); }
@media (max-width: 560px) {
  .sponsor-toolbar { flex-direction: column; align-items: stretch; }
  .sponsor-search { width: 100%; }
}

/* --- Logo karoları (emoji yok: görsel veya baş harf monogramı) --- */
.sponsor-logo-tile, .sf-logo-tile {
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, #1c1c22, #101014);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em;
}
.sponsor-logo-tile { width: 64px; height: 64px; border-radius: 16px; font-size: 1.3rem; }
.sf-logo-tile      { width: 112px; height: 112px; border-radius: 24px; font-size: 2.2rem; }
.sponsor-logo-tile.has-img, .sf-logo-tile.has-img { background: #fff; }
.sponsor-logo-tile img, .sf-logo-tile img { width: 100%; height: 100%; object-fit: contain; }
.sponsor-mono {
  background: linear-gradient(135deg, var(--rose-3), var(--rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Standart sponsor kartı --- */
.sponsor {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sponsor:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); }
.sponsor-head {
  position: relative; height: 96px; display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 130%, rgba(var(--rose-rgb),0.20), transparent 70%),
    linear-gradient(160deg, #141418, #0c0c0e);
}
.sponsor-flag { position: absolute; top: 0.6rem; right: 0.6rem; }
/* Öne çıkan rozeti → beyaz yuvarlak rozet + üstünde fade-gradient yıldız.
   Rozet = elemanın kendi (#fff) zemini; ikon ::before'da (gradient, clip:text)
   → ikon GARANTİ üstte (negatif z-index / stacking sorunu yok). */
/* Öne çıkan rozeti → SADECE beyaz yıldız (SVG mask), daire yok, büyük.
   Hafif gloss gradyanı + gölge ile dolgun/modern görünüm. */
.sponsor-star {
  display: inline-block; font-size: 0; vertical-align: middle;
  background: linear-gradient(225deg, rgba(246, 246, 250, 0.97) 26%, rgba(200, 202, 216, 0.42) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.sponsor-head .sponsor-star {
  display: inline-block !important;
  position: absolute; top: 0.6rem; right: 0.65rem; z-index: 3;
  width: 1.05rem; height: 1.05rem;
}
/* "Tüm Sponsorlar" yanı: sade beyaz tik (daire yok). */
.fx-tick {
  display: inline-grid; place-items: center; font-size: 0;
  width: 1.7rem; height: 1.7rem; vertical-align: middle;
}
.fx-tick::before {
  content: "✔"; color: #fff; font-weight: 900; font-size: 1.25rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.bh-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.sponsor-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.1rem 1.2rem; }
.sponsor-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.5rem; }
.sponsor-bonus {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.86rem; color: var(--text);
  background: var(--rose-soft); border: 1px dashed var(--rose-line);
  border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; margin-bottom: 0.6rem;
}
/* Bonus metni — KALIN ve belirgin. */
.bonus-txt { font-weight: 800; letter-spacing: 0.01em; }
/* Duyuru topu — sponsorun buton/marka renginde (--sbc; yoksa tema rose),
   hafif nabız (ping) halkası. em → bonus fontuyla orantılı ölçeklenir. */
.bonus-ping {
  flex-shrink: 0; width: 0.7em; height: 0.7em; border-radius: 50%;
  background: var(--sbc, var(--rose));
  animation: bonusPing 1.8s ease-out infinite;
}
@keyframes bonusPing {
  0%   { box-shadow: 0 0 0 0 var(--sbc, var(--rose)); }
  70%  { box-shadow: 0 0 0 0.7em transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .bonus-ping { animation: none; } }
.sponsor-desc { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.7rem; flex: 1; }
.sponsor-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.sponsor-task {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--rose-3); font-weight: 600; margin-bottom: 0.8rem;
}
.sponsor-cta { margin-top: auto; }

/* STEP 48 — Sponsor sayfası yeni düzen: 3 öne çıkan kart + 2 banner + marka butonu */
.sponsor-featured-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem;
}
.sponsor-feat .sponsor-flag { display: inline-flex; z-index: 3; }   /* öne çıkan kartta rozet görünsün (logonun üstünde) */
/* TÜM sponsor kartları (öne çıkan + genel) — logo küçük kutu/beyaz bg yerine
   kartın üst alanını doldurur, TAM ORTALANMIŞ (yatay+dikey), doğrudan koyu
   zeminde. Logosuz ise baş harf monogramı büyük. img intrinsic boyutunda
   flex ile ortalanır (object-fit'e bağlı kalmadan kesin ortalama). */
.sponsor .sponsor-head { height: 116px; }
.sponsor .sponsor-logo-tile {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto;
  padding: 1.1rem 1.4rem;
  border: 0; border-radius: 0; box-shadow: none;
  background: transparent; font-size: 2.4rem;
}
.sponsor .sponsor-logo-tile.has-img { background: transparent; }
.sponsor .sponsor-logo-tile img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center;
}
/* Banner alanı (1000x100 mantığı) — tam genişlik, responsive */
/* Banner alanı — oran (10:1) korunur ama kapladığı dikey yer azaltıldı:
   genişlik sınırlanıp ortalanır (yükseklik orantılı düşer), boşluklar daraltıldı.
   Böylece altındaki "Tüm Sponsorlar" daha erken görünür. */
/* Banner alanı — 2 sütunlu ızgara (yan yana 2, alt satırda 2 = 4 alan).
   Yanlardaki boşluk dolar; her banner yarım genişlikte (10:1 oran korunur). */
.sponsor-banners {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem; margin-bottom: 0.95rem;
}
.sponsor-banner {
  width: 100%;
  aspect-ratio: 1000 / 100; min-height: 38px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(160deg, #141418, #0c0c0e);
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
}
@media (max-width: 720px) { .sponsor-banners { grid-template-columns: 1fr; } }
.sponsor-banner a, .sponsor-banner img { display: block; width: 100%; height: 100%; }
/* 🔴 `cover` DEĞİL `contain` — sponsorun afişi kırpılmamalı.
   Kutunun oranı (10:1) dar ekranda `min-height` yüzünden bozuluyor ve
   `cover` farkı yanlardan kırpıyordu: 360px telefonda afişin sağındaki
   "Siteye Git" butonu yarısından kesiliyordu. Ölçüldü: kutu 331x44,
   afiş 10:1 → kaplamak için 440px gerekiyor, %25'i gidiyordu.
   `contain` afişin TAMAMINI gösterir; artan yer kutunun kendi koyu
   zemini olur. Müşteri farklı oranda afiş yüklerse de bütün kalır. */
.sponsor-banner img { object-fit: contain; }
.banner-ph { color: var(--muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; }
/* Marka renkli buton — bg/border/color + --sb (rgb) inline style ile gelir.
   STEP 51: marka renginden glow (box-shadow) CSS değişkeni --sb ile; hover'da artar. */
.btn-brand {
  font-weight: 700;
  --sb: 176, 18, 23;   /* fallback (tema blood) */
  box-shadow: 0 10px 30px rgba(var(--sb), 0.28);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-brand:hover { filter: brightness(1.06); box-shadow: 0 14px 40px rgba(var(--sb), 0.40); }
@media (max-width: 720px) {
  /* OPSİYON B (sabit karar) — 3 kart YAN YANA ama küçük. Hepsi tek bakışta
     görünür, dikeyde en az yer. (Yalnız mobil — masaüstü 3'lü grid korunur.) */
  .sponsor-featured-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-bottom: 1rem;
  }
  .sponsor-featured-row .sponsor-feat .sponsor-head { height: 58px; }
  .sponsor-featured-row .sponsor-feat .sponsor-body { padding: 0.5rem 0.4rem; gap: 0.35rem; }
  .sponsor-featured-row .sponsor-feat .sponsor-name { font-size: 0.7rem; }
  .sponsor-featured-row .sponsor-feat .sponsor-bonus {
    font-size: 0.6rem; padding: 0.25rem 0.3rem; gap: 0.3rem; justify-content: center; line-height: 1.2;
  }
  .sponsor-featured-row .sponsor-feat .btn { width: 100%; padding: 0.4rem 0.15rem; font-size: 0.66rem; }
  .sponsor-featured-row .sponsor-star { width: 0.95rem; height: 0.95rem; top: 0.3rem; right: 0.3rem; }
}

/* ------------------------------------------------------------
   SPONSORLAR SAYFASI — affiliate temizliği (MASAÜSTÜ + MOBİL)
   Kartlarda yalnızca: Logo · Sponsor adı · Bonus · JTN ödülü · Siteye Git.
   Açıklama, etiketler (VIP/Premium/Slot/Bonus/Canlı Casino/Masa Oyunları/
   Günlük/Jackpot…) ve "Öne Çıkan" rozeti her ekranda GİZLİ.
   ÖNEMLİ: Bu yalnızca kart İÇİndeki .sponsor-tags'i gizler; üstteki
   kategori filtre çipleri (.sponsor-cats / #sponsorCatSeg) ETKİLENMEZ.
   Öne çıkan hero da kompakt: açıklama + etiket gizli. (Yalnızca UI.) */
.sponsor-grid .sponsor-desc,
.sponsor-grid .sponsor-tags,
.sponsor-grid .sponsor-flag { display: none; }

.sponsor-featured .sf-desc,
.sponsor-featured .sponsor-tags { display: none; }

/* --- Öne çıkan sponsor (büyük yatay kart) --- */
.sponsor-featured {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  background: linear-gradient(150deg, rgba(var(--rose-rgb),0.13), var(--panel) 62%);
  border: 1px solid var(--rose-line); border-radius: var(--radius-lg);
  padding: 1.7rem; margin-bottom: 1.4rem;
}
.sf-glow {
  position: absolute; top: -45%; left: -5%; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rose-rgb),0.22), transparent 65%); pointer-events: none;
}
.sf-logo { position: relative; z-index: 1; }
.sf-info { position: relative; z-index: 1; min-width: 0; }
.sf-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rose-3);
  background: var(--rose-soft); border: 1px solid var(--rose-line);
  border-radius: 999px; padding: 0.3rem 0.8rem; margin-bottom: 0.6rem;
}
.sf-name { font-size: 1.9rem; font-weight: 800; margin-bottom: 0.6rem; }
.sf-bonus { display: inline-block; font-size: 0.92rem; margin-bottom: 0.7rem; }
.sf-desc { color: var(--muted); font-size: 0.92rem; max-width: 46rem; margin-bottom: 0.8rem; }
.sf-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; }
.sf-task { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--rose-3); font-weight: 600; }

@media (max-width: 1080px) {
  .sponsor-grid, .sponsor-rail { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   SPONSORLAR — MOBİL (affiliate-odaklı dizin)
   ------------------------------------------------------------
   Mobilde kart yalnızca affiliate önceliğini gösterir:
     1) Logo  2) Bonus  3) JTN ödülü  4) Siteye Git
   Açıklama / etiket / VIP-Premium-Slot rozetleri TAMAMEN gizlenir.
   2 sütunlu kompakt grid → ekranda 4–6 sponsor görünür.
   Veri/komponent yapısı değişmez; yalnızca CSS yoğunluğu.
   Masaüstü düzeni etkilenmez (yalnızca ≤720px).
   ============================================================ */
@media (max-width: 720px) {
  /* 2 sütunlu kompakt grid (yalnızca Sponsorlar SAYFASI; ana sayfa
     önizleme rail'i .sponsor-rail etkilenmez). Açıklama/etiket/rozet
     zaten global olarak gizli; mobilde yalnızca yoğunluk ayarlanır.
     Kart: logo · ad · bonus · JTN · CTA. */
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

  /* Kompakt kart: kısa logo başlığı + sıkı gövde (sayfa grid'ine özel) */
  .sponsor-grid .sponsor-head { height: 92px; }
  .sponsor-grid .sponsor-logo-tile { padding: 0.6rem 0.8rem; font-size: 1.4rem; }
  .sponsor-grid .sponsor-body { padding: 0.65rem 0.65rem 0.7rem; }
  .sponsor-grid .sponsor-name { font-size: 0.9rem; text-align: center; margin-bottom: 0.4rem; }
  .sponsor-grid .sponsor-bonus {
    font-size: 0.74rem; line-height: 1.3; text-align: center;
    padding: 0.4rem 0.5rem; margin-bottom: 0.5rem;
  }
  .sponsor-grid .sponsor-task {
    justify-content: center; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.55rem;
  }
  .sponsor-grid .sponsor-cta { font-size: 0.8rem; padding: 0.55rem 0.6rem; }

  /* Ana sayfa önizleme rail'i (yatay swipe) — değişmeden */
  .sponsor-rail {
    grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
    margin-inline: -0.9rem; padding-inline: 0.9rem;
  }
  .sponsor-rail > * { scroll-snap-align: start; }

  /* Öne çıkan hero: mobilde sıkıştır → logo yanında ad/bonus/JTN/CTA
     (açıklama + etiket zaten global olarak gizli) */
  .sponsor-featured {
    grid-template-columns: auto 1fr; text-align: left;
    gap: 0.9rem; padding: 1rem; align-items: center;
  }
  .sf-logo-tile { width: 64px; height: 64px; border-radius: 16px; font-size: 1.3rem; }
  .sf-eyebrow { margin-bottom: 0.4rem; padding: 0.22rem 0.6rem; font-size: 0.66rem; }
  .sf-name { font-size: 1.3rem; margin-bottom: 0.4rem; }
  .sf-bonus { font-size: 0.86rem; margin-bottom: 0.5rem; }
  .sf-cta { gap: 0.7rem; margin-top: 0.5rem; }
}

/* ============================================================
   EVENT ECOSYSTEM — Etkinlik Merkezi
   ============================================================ */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 0.4rem; }
.event-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* "Canlı Etkinlikler" başlık nabzı */
.ev-pulse {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose-2); margin-right: 0.2rem; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(var(--rose-rgb),0.6); animation: pulse 1.8s infinite;
}

/* ---------- Etkinlik kartı ---------- */
.event-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover { transform: translateY(-4px); border-color: var(--rose-line); box-shadow: var(--shadow); }
.event-card.ev-done { opacity: 0.82; }
.event-card.joined { border-color: var(--rose-line); }

.ev-art {
  position: relative; height: 116px; overflow: hidden;
  display: grid; place-items: center;
}
.ev-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(255,255,255,0.14), transparent 60%); }
.ev-glyph { font-size: 3rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); position: relative; z-index: 1; }
/* Etkinlik görseli (panelden imageUrl) — sanat alanını kaplar, rozetlerin altında kalır. */
.ev-art .ev-img, .eh-art .eh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.ev-status {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.28rem 0.62rem; border-radius: 999px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); border: 1px solid var(--line-2);
}
.ev-status.ev-live    { color: var(--on-rose); background: var(--rose-grad); border-color: transparent; }
.ev-status.ev-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s ease infinite; }
.ev-status.ev-soon    { color: var(--gold); }
.ev-status.ev-done    { color: var(--muted); }

.ev-flag {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.26rem 0.6rem; border-radius: 999px;
  background: rgba(240, 181, 61, 0.16); color: var(--gold); border: 1px solid rgba(240, 181, 61, 0.4);
}

.ev-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.ev-type { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-3); }
.ev-title { font-size: 1.18rem; margin: 0.25rem 0 0.35rem; }
.ev-desc { color: rgba(255,255,255,0.74); font-size: 0.84rem; margin-bottom: 0.8rem; }

/* Sponsor rozeti (sponsorId varsa otomatik) */
.ev-sponsor {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.8rem;
}
.ev-sponsor-logo, .eh-body .ev-sponsor-logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--panel-3); border: 1px solid var(--line-2);
}
.ev-sponsor-logo img { width: 100%; height: 100%; object-fit: cover; }
.ev-sponsor-logo .sponsor-mono { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; color: var(--rose-3); }
.ev-sponsor-id { display: flex; flex-direction: column; line-height: 1.2; }
.ev-sponsor-id small { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ev-sponsor-id b { font-size: 0.9rem; }

.ev-meta { display: flex; gap: 1.4rem; margin-bottom: 0.8rem; }
.ev-metric small { color: var(--muted); font-size: 0.7rem; display: block; margin-bottom: 0.1rem; }
.ev-metric b { font-family: var(--font-display); font-size: 0.98rem; display: inline-flex; align-items: center; gap: 0.35rem; }

.ev-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.9rem; }

.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; }
.ev-clock { display: flex; flex-direction: column; line-height: 1.25; }
.ev-clock small { color: var(--muted); font-size: 0.68rem; }
.ev-clock b { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.ev-clock.ended b { color: var(--muted); }
.ev-act { flex-shrink: 0; }

/* ---------- Öne çıkan etkinlik hero ---------- */
.event-hero {
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 0.6rem;
}
.event-hero.ev-live { border-color: var(--rose-line); box-shadow: var(--shadow-rose); }
.eh-art { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; }
.eh-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.16), transparent 60%); }
.eh-glyph { font-size: 5rem; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); position: relative; z-index: 1; }

.eh-body { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; }
.eh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.eh-badges .ev-status { position: static; }
.eh-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: var(--gold); }
.eh-badges .ev-type { color: var(--muted); }
.eh-title { font-size: 1.8rem; margin-bottom: 0.4rem; }
.eh-desc { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-bottom: 0.9rem; max-width: 60ch; }
.eh-body .ev-sponsor { max-width: 280px; }

.eh-stats { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-bottom: 0.9rem; }
.eh-stat small { color: var(--muted); font-size: 0.72rem; display: block; margin-bottom: 0.15rem; }
.eh-stat b { font-family: var(--font-display); font-size: 1.15rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.eh-cta { margin-top: auto; padding-top: 0.4rem; }
.eh-cta .btn { min-width: 180px; }

@media (max-width: 860px) {
  .event-hero { grid-template-columns: 1fr; }
  .eh-art { min-height: 150px; }
  .eh-title { font-size: 1.5rem; }
}

/* ============================================================
   LEVELS
   ============================================================ */
.level-hero {
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; margin-bottom: 0.5rem;
}
.lh-top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.lh-badge {
  width: 84px; height: 84px; border-radius: 22px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 2.6rem;
  border: 1px solid var(--line-2);
}
.lh-meta h2 { font-size: 1.8rem; }
.lh-meta p { color: var(--muted); font-size: 0.9rem; }
.lh-next { color: var(--muted); font-size: 0.86rem; margin-bottom: 0.6rem; }
.lh-next b { color: var(--rose-3); font-family: var(--font-display); }
.lh-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.lh-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; }

.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.rung {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; position: relative;
}
.rung.reached { border-color: var(--rose-line); }
.rung.current { border-color: var(--rose-2); box-shadow: var(--shadow-rose); }
.rung-ic { font-size: 1.8rem; }
.rung h4 { font-size: 1.05rem; margin: 0.5rem 0 0.2rem; }
.rung-req { color: var(--muted); font-size: 0.8rem; }
.rung-perks { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.rung-perks span { font-size: 0.78rem; color: var(--muted); display: flex; gap: 0.4rem; }
.rung-perks span::before { content: '✓'; color: var(--rose-3); }
.rung-state { position: absolute; top: 1.2rem; right: 1.2rem; font-size: 0.72rem; font-weight: 700; }
.rung.reached .rung-state { color: var(--green); }
.rung.current .rung-state { color: var(--rose-3); }
.rung.locked { opacity: 0.55; }
.rung.locked .rung-state { color: var(--muted); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-head {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.ph-glow { position: absolute; top: -50%; left: 20%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rose-rgb),0.22), transparent 65%); pointer-events: none; }
.ph-av {
  width: 92px; height: 92px; border-radius: 24px; flex-shrink: 0; position: relative; z-index: 1;
  display: grid; place-items: center; font-size: 3rem;
  background: rgba(255,255,255,0.05); border: 2px solid var(--rose-line);
}
.ph-info { position: relative; z-index: 1; flex: 1; min-width: 200px; }
.ph-info h2 { font-size: 1.8rem; }
.ph-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ph-rank { position: relative; z-index: 1; text-align: center; }
.ph-rank .big { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--rose-3); }
.ph-rank small { color: var(--muted); font-size: 0.78rem; }

.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 0.5rem; }

.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.ach {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; text-align: center;
}
.ach.locked { opacity: 0.45; }
.ach-ic { font-size: 1.8rem; }
.ach b { display: block; font-size: 0.86rem; margin: 0.4rem 0 0.15rem; font-family: var(--font-display); }
.ach small { color: var(--muted); font-size: 0.74rem; }

/* ============================================================
   PROFİL 2.0 — kariyer sayfası (oyuncu karargâhı)
   ============================================================ */

/* Hero seviye ilerleme çubuğu */
.ph-prog { margin-top: 0.9rem; max-width: 360px; }
.ph-prog-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ph-prog-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; }
.ph-prog small { color: var(--muted); font-size: 0.74rem; display: block; margin-top: 0.35rem; }

/* Kariyer istatistikleri: 9 kart akıcı sığsın */
#careerStats { grid-template-columns: repeat(4, 1fr); }

/* İlerleme + rekorlar yan yana — masaüstünde iki sütun, mobilde alt alta
   (mobil yığma, .split medya kuralı tarafından sağlanır). */
.profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-bottom: 0.5rem; }
.profile-split .split-col { min-width: 0; }

/* İlerleme kartı */
.prog-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 1.3rem;
}
.prog-row { display: flex; flex-direction: column; gap: 0.5rem; }
.prog-top { display: flex; align-items: baseline; gap: 0.5rem; }
.prog-top b { font-family: var(--font-display); font-size: 1.05rem; }
.prog-ic { font-size: 1.05rem; }
.prog-meta { color: var(--muted); font-size: 0.78rem; margin-left: auto; }
.prog-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; transition: width 0.8s ease; }
.prog-sub { color: var(--muted); font-size: 0.8rem; }
.prog-sub b { color: var(--rose-3); font-family: var(--font-display); }

/* Kişisel rekorlar */
.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; margin-bottom: 0.5rem; }
.record-empty { border-style: dashed; opacity: 0.85; }
.record-empty .record-ic { background: rgba(255,255,255,0.04); border-color: var(--line-2); }
.record-empty .record-body b { color: var(--muted); font-size: 0.92rem; }
.record {
  display: flex; align-items: center; gap: 0.9rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1.1rem;
}
.record-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--rose-soft); border: 1px solid var(--rose-line);
}
.record-body b { font-family: var(--font-display); font-size: 1.02rem; display: block; }
.record-body small { color: var(--muted); font-size: 0.76rem; }

/* Aktivite zaman çizelgesi */
.timeline {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem 0.4rem; margin-bottom: 0.5rem;
}
.tl-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line);
}
.tl-row:last-child { border-bottom: 0; }
.tl-ic {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.1rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2);
}
.tl-body { flex: 1; min-width: 0; }
.tl-body b { font-size: 0.9rem; display: block; }
.tl-body small { color: var(--muted); font-size: 0.76rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-meta { text-align: right; flex-shrink: 0; }
.tl-amt { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; }
.tl-amt.pos { color: var(--green); }
.tl-amt.neg { color: var(--rose-3); }
.tl-time { color: var(--muted-2); font-size: 0.72rem; }

/* Başarım vitrini */
.ach-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.ach-count {
  font-size: 0.72rem; font-weight: 700; padding: 0.32rem 0.7rem; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--muted);
}
.ach-count.earned { background: rgba(52,211,153,0.14); color: var(--green); border-color: transparent; }
.ach-count.prog   { background: var(--rose-soft); color: var(--rose-3); border-color: transparent; }
.ach-count.total  { margin-left: auto; }
.ach-group { margin-bottom: 1.1rem; }
.ach-gh { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.ach-earned { border-color: var(--rose-line); }
.ach-inProgress { opacity: 1; }
.ach-locked { opacity: 0.5; }
/* STEP 46 — başarım özeti (X / N açıldı) */
.ach-summary { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.8rem; color: var(--lace, #efeae6); }
.ach-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 0.6rem 0 0.3rem; }
.ach-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; }
.ach-pct { font-size: 0.7rem; color: var(--rose-3); font-weight: 700; }
.ach-flag { display: inline-block; margin-top: 0.5rem; font-size: 0.68rem; font-weight: 800; color: var(--green); }

/* Üyelik */
.member-card {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.member-cell { display: flex; align-items: center; gap: 0.8rem; }
.member-ic {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--rose-soft); border: 1px solid var(--rose-line);
}
.member-cell small { color: var(--muted); font-size: 0.74rem; display: block; }
.member-cell b { font-family: var(--font-display); font-size: 0.95rem; }

@media (max-width: 920px) {
  #careerStats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  #careerStats { grid-template-columns: repeat(2, 1fr); }
  .member-card { grid-template-columns: 1fr; gap: 0.8rem; }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   🎯 SONRAKI HEDEFLER (goal-driven) + boş-durum
   ============================================================ */
.goals {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--rose-line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; margin-bottom: 0.5rem;
}
.goals-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.goals-ring {
  --pct: 0; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--rose-2) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
  display: grid; place-items: center; position: relative;
}
.goals-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--panel); }
.goals-ring span { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--rose-3); }
.goals-head-text { flex: 1; min-width: 0; }
.goals-head-text small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.goals-motivation { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.35; margin-top: 0.15rem; }
.goals-list { display: flex; flex-direction: column; gap: 0.6rem; }

.goal {
  display: flex; align-items: center; gap: 0.8rem; color: inherit;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease, transform 0.14s ease, background 0.2s ease;
}
.goal-link { cursor: pointer; }
.goal-link:hover { border-color: var(--rose-line); background: var(--rose-soft); transform: translateX(2px); }
.goal-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.05rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2);
}
.goal-body { flex: 1; min-width: 0; }
.goal-body b { font-size: 0.9rem; display: block; }
.goal-body small { color: var(--muted); font-size: 0.76rem; display: block; }
.goal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 0.45rem; }
.goal-bar i { display: block; height: 100%; background: var(--rose-grad); border-radius: 999px; }
.goal-pct { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--rose-3); flex-shrink: 0; }
.goal-go { color: var(--rose-3); font-size: 1.2rem; flex-shrink: 0; }
.goal-done { border-color: var(--rose-line); }

/* Boş-durum: anlamsız sıfır yerine yönlendirici metin */
.stat-empty { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--rose-3); line-height: 1.3; display: inline-block; }

/* ---------- Support ---------- */
.support-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; text-align: center;
}
.support-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.support-card > p { color: var(--muted); margin-bottom: 1.3rem; }
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; max-width: 560px; margin-inline: auto; }
.support-item {
  display: flex; align-items: center; gap: 0.6rem; justify-content: center;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.8rem; font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.18s ease;
}
.support-item:hover { border-color: var(--rose-line); }

/* ---------- Duyuru Bandı ---------- */
.announce-bar {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.1rem; padding: 0.6rem 0.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  /* Aurora şablonu: siyah merkez + kayan renkli gradient çerçeve. */
  background:
    linear-gradient(#0a0a0b, #0a0a0b) padding-box,
    linear-gradient(90deg, var(--marka-aurora-duraklar)) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 50%;
  animation: btnAuroraPan 6s linear infinite;
  box-shadow: 0 8px 28px -16px rgba(var(--marka-glow), 0.5);
}
@media (prefers-reduced-motion: reduce) { .announce-bar { animation: none; } }
.announce-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #f4f4f6; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.announce-tag {
  flex-shrink: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: #f4f4f6;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
/* Ticker penceresi — taşan metni kırpar; kenarlarda yumuşak solma maskesi. */
.announce-viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* ŞERİT HER ZAMAN AKAR — şeridin olayı bu (tasarım kararı).
   🔴 Ama "akmıyor" görünmesinin iki gerçek sebebi vardı, ölçüldü:
     1) HIZ: eski kurulumda saniyede ~54 piksel. Göz bir bakışta
        hareketi fark etmiyor, şerit donmuş sanılıyor.
     2) BOŞLUK: tek kopya vardı; yazı soldan çıktıktan sonra sağdan
        yenisi gelene kadar şerit BOMBOŞ kalıyordu.
   Çözüm: metin iki kez yazılı (index.html) ve şerit kendi yarısı
   kadar kayıyor → kopya tam yerine oturuyor, boşluk yok. Süre
   içeriğin uzunluğuna göre JS'ten yazılır (--announce-sure) ki
   kısa ve uzun duyuru AYNI hızda aksın. */
.announce-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  will-change: transform;
  animation: announce-marquee var(--announce-sure, 20s) linear infinite;
}
.announce-text {
  flex: 0 0 auto;
  padding-right: 3.5rem;   /* iki kopya arasındaki nefes payı */
  font-size: 0.84rem; font-weight: 600; color: #f4f4f6;
}
.announce-bar:hover .announce-track { animation-play-state: paused; }
/* Şerit TEK BİR KOPYA genişliği kadar kayar; kopyalar özdeş olduğu için
   bir sonraki kopya öncekinin yerine tam oturur, döngü dikişsiz olur.
   Kaydırma miktarı (--announce-birim) ve süre JS'ten gelir: kaç kopya
   gerektiği pencere genişliğine bağlı, JS onu da ayarlıyor.
   Yedek %50 = HTML'deki iki kopyalı hâl (JS çalışmasa da akar). */
@keyframes announce-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--announce-birim, 50%))); }
}
.announce-btn {
  flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: var(--on-rose, #fff);
  background: var(--rose-grad); border-radius: 999px; padding: 0.34rem 0.85rem;
  box-shadow: var(--shadow-rose); transition: filter 0.18s ease;
}
.announce-btn:hover { filter: brightness(1.06); }

/* ---------- Footer ---------- */
.foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 2.5rem; }
.foot p { font-size: 0.74rem; color: var(--muted-2); flex: 1 1 260px; }
.foot-social { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.foot-social-link {
  font-size: 0.74rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.72rem;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.foot-social-link:hover { border-color: var(--rose-line); color: var(--text); }
.age-badge {
  display: grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border: 2px solid var(--rose); color: var(--rose-3);
  border-radius: 50%; font-weight: 700; font-size: 0.8rem;
}
/* Footer içerik sayfası linkleri (panelde aktif olanlar) */
.foot-pages { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.foot-page-link { font-size: 0.78rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.18s ease; }
.foot-page-link:hover { color: var(--rose-3); }

/* İçerik sayfası görünümü (Hakkımızda/Kurallar/…) — tema renkleri, mobil uyumlu */
.page-doc {
  max-width: 760px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 4vw, 2.4rem);
}
.page-doc-title { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: 1rem; }
.page-doc-body { color: var(--muted); font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ============================================================
   REWARD POPUP
   ============================================================ */
.reward-pop {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  animation: fadeIn 0.25s ease;
}
/* [hidden] must win over display:grid — otherwise the modal stays open */
.reward-pop[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } }

/* Close (X) button — top-right of the card */
.reward-x {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2);
  color: var(--muted); cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.reward-x:hover { background: var(--rose-soft); color: var(--rose-3); border-color: var(--rose-line); }
.reward-card {
  position: relative; text-align: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--rose-line); border-radius: var(--radius-lg);
  padding: 2.2rem 2.4rem; max-width: 90%; width: 340px;
  box-shadow: var(--shadow);
  animation: popIn 0.4s cubic-bezier(0.18, 0.9, 0.3, 1.4);
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } }
.reward-burst {
  position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, rgba(var(--rose-rgb),0.3), transparent 60%);
}
.reward-emoji { font-size: 3.4rem; display: block; animation: bounce 0.6s ease; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
.reward-card h4 { font-size: 1.3rem; margin: 0.6rem 0 0.3rem; }
.reward-card p { color: var(--rose-3); font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 1.3rem; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(20px);
  background: var(--panel-3); border: 1px solid var(--rose-line); color: var(--text);
  padding: 0.75rem 1.2rem; border-radius: 12px; font-size: 0.86rem; font-weight: 600;
  box-shadow: var(--shadow); z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90%; text-align: center;
}

/* ============================================================
   KİMLİK KAPISI (Telegram giriş ekranı) + durum görünürlüğü
   ============================================================ */
.auth-gate {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 1.5rem;
  /* Modal: arkadaki site görünsün (yarı-saydam + blur) — daha modern. */
  background: rgba(6, 5, 12, 0.72); backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); animation: fadeIn 0.25s ease;
}
.auth-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% -5%, rgba(var(--marka-glow),0.20), transparent 55%),
    radial-gradient(circle at 85% 95%, rgba(var(--marka-glow-2),0.12), transparent 50%);
}
.auth-card {
  position: relative; z-index: 1; text-align: center; width: 100%; max-width: 420px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.4rem 2rem; box-shadow: var(--shadow);
}
.auth-chip { width: 58px; height: 58px; font-size: 1.7rem; border-radius: 17px; margin: 0 auto 1rem; }
.auth-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; }
.auth-lead { color: var(--muted); font-size: 0.92rem; margin: 0.7rem 0 1.6rem; line-height: 1.6; }
.auth-lead b { color: var(--text); }
/* Giriş düğmeleri — Google birincil (rose), Telegram ikincil (ghost). */
.auth-btn { width: 100%; gap: 0.6rem; }
.auth-btn + .auth-btn { margin-top: 0.7rem; }
.g-ic, .tg-ic { flex-shrink: 0; }
.auth-note { display: block; color: var(--muted-2); font-size: 0.72rem; margin-top: 1.1rem; line-height: 1.5; }

/* E-posta/şifre giriş-kayıt formu (STEP 27 Adım 4) */
.auth-form { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.auth-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; color: var(--text);
  font-size: 0.92rem; transition: border-color 0.18s ease;
}
.auth-input::placeholder { color: var(--muted-2); }
.auth-input:focus { outline: none; border-color: var(--rose-line); }
.auth-error { color: var(--rose-3); font-size: 0.8rem; margin: 0.1rem 0 0; }
.auth-form .auth-btn { margin-top: 0.3rem; }
.auth-switch { font-size: 0.84rem; color: var(--muted); margin: 0.9rem 0 0; }
.auth-link { color: var(--rose-3); font-weight: 700; background: none; border: none; cursor: pointer; padding: 0; font-size: inherit; }
.auth-link:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 0.7rem; margin: 1.2rem 0 0.9rem; color: var(--muted-2); font-size: 0.74rem; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.auth-soon { opacity: 0.6; }
.auth-soon-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-left: 0.3rem; }

/* ============================================================
   BAĞLI HESAPLAR (connected accounts) — profil
   ============================================================ */
.connected-accounts { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.5rem; }
.conn-row {
  display: flex; align-items: center; gap: 0.9rem;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.conn-row.on { border-color: var(--rose-line); }
.conn-ic {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: 1.1rem; color: #fff;
  border: 1px solid var(--line-2);
}
.conn-ic.conn-google   { background: linear-gradient(135deg, #4285f4, #34a853 60%, #ea4335); }
.conn-ic.conn-telegram { background: linear-gradient(135deg, #2aabee, #229ed9); }
.conn-info { flex: 1; min-width: 0; }
.conn-info b { font-size: 0.95rem; display: block; }
.conn-info small { color: var(--muted); font-size: 0.78rem; }
.conn-status {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.24rem 0.6rem; border-radius: 999px;
}
.conn-status.on  { background: rgba(52, 211, 153, 0.14); color: var(--green); }
.conn-status.off { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.conn-act { flex-shrink: 0; }

@media (max-width: 560px) {
  .conn-status { display: none; }
}

/* Kilitli görev (sağlayıcı gerektiren) görünümü */
.task.locked { opacity: 0.9; border-color: var(--rose-line); }
.task.locked .task-ic { filter: grayscale(0.2); }

/* Avatar görseli (Telegram fotoğrafı) */
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.usercard-av, .appbar-av, .ph-av { overflow: hidden; font-family: var(--font-display); font-weight: 800; }

/* Durum kontrolü: bekleme / oturum kapalı / oturum açık */
body.auth-pending .shell,
body.auth-pending .topbar,
body.auth-pending .bottom-nav,
/* Auth modal ek öğeleri (açık gezinme geçişi) */
.auth-card { position: relative; }
.auth-x {
  position: absolute; top: .7rem; right: .8rem;
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--muted);
  border: 1px solid var(--line-2); font-size: .9rem;
  transition: background .15s, color .15s;
}
.auth-x:hover { background: rgba(255,255,255,.1); color: var(--text); }
.auth-tg { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .3rem; }
.auth-tg-hint { font-size: .72rem; color: var(--muted-2, var(--muted)); text-align: center; margin: 0; }
#navLoginBtn { justify-content: center; }

body.auth-pending .auth-gate { display: none !important; }
/* AÇIK GEZİNME: giriş olmasa da site (shell/topbar/nav) GÖRÜNÜR. Auth kartı
   artık bir MODAL — sadece .open iken açılır (Giriş Yap / kazanç aksiyonu). */
.auth-gate { display: none; }
/* Açık: grid + place-items:center (base kuralla aynı) → TAM ORTALANIR. */
.auth-gate.open { display: grid; }
/* Girişsizken kişisel chrome öğeleri gizli (bakiye/çıkış); "Giriş Yap" görünür. */
body.logged-out #userCard,
body.logged-out #topbarPoints,
body.logged-out #logoutBtn { display: none !important; }
body:not(.logged-out) #navLoginBtn { display: none !important; }
/* Girişsizken sol menüdeki "Hesap" bölümü (Profilim / Seviyeler & VIP) gizli. */
body.logged-out #sideAccountLabel,
body.logged-out .side-nav [data-link="profile"],
body.logged-out .side-nav [data-link="levels"] { display: none !important; }

/* ============================================================
   MOBILE CHROME
   ============================================================ */
.topbar, .bottom-nav { display: none; }
.burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; padding: 0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--text); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: 0.25s; }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar-points {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--panel-2); border: 1px solid var(--rose-line);
  border-radius: 999px; padding: 0.45rem 0.85rem;
}
.topbar-points b { font-family: var(--font-display); font-size: 0.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .statgrid, .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .give-grid, .shop-grid, .event-rail, .task-rail, .ladder { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 1.8rem; }
  .hero-title { font-size: 2.1rem; }
  .split { display: grid; grid-template-columns: 1fr; gap: 0; }
}

/* Mobile */
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }

  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    position: sticky; top: 0; z-index: 50; padding: 0.6rem 0.9rem;
    background: rgba(7, 7, 7, 0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topbar .logo-text { font-size: 1rem; }

  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: min(84%, 310px); height: 100vh;
    transform: translateX(-100%); transition: transform 0.3s ease;
  }
  .sidebar.open { transform: translateX(0); }

  .main { padding: 0 0.9rem 6rem; }
  .appbar { display: none; }

  .view { padding-top: 1rem; }

  .statgrid, .profile-stats, .ach-grid,
  .task-rail, .task-grid, .give-grid, .give-list,
  .shop-grid, .event-grid, .event-rail, .ladder { grid-template-columns: 1fr; }

  /* Yalnızca ana sayfa ÖNİZLEME rail'leri yatay kaydırılır (swipe).
     Tam sayfalar (Çekilişler, Market, Etkinlikler, Sponsorlar) DİKEY
     listelenir → keşfedilebilirlik + ekran başına daha çok içerik. */
  .task-rail, .event-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    grid-template-columns: none; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
    margin-inline: -0.9rem; padding-inline: 0.9rem;
  }
  .task-rail > *, .event-rail > * { scroll-snap-align: start; }
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }

  .podium { gap: 0.5rem; }
  .pod { padding: 0.9rem 0.5rem; }
  .pod-av { width: 44px; height: 44px; font-size: 1.3rem; }
  .pod-1 .pod-av { width: 52px; height: 52px; }
  .pod-name { font-size: 0.8rem; }

  .hero-title { font-size: 1.9rem; }
  .pool-value { font-size: 2.1rem; }

  .bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(11, 11, 13, 0.96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1; padding: 0.4rem 0; color: var(--muted);
    font-size: 1.1rem; transition: color 0.18s ease;
  }
  .bn-item small { font-size: 0.62rem; font-weight: 600; }
  .bn-item.active { color: var(--rose-3); }
  .bn-center span {
    width: 46px; height: 46px; margin-top: -22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.2rem;
    background: var(--rose-grad); color: var(--on-rose); box-shadow: var(--shadow-rose);
  }
  .bn-center.active { color: var(--rose-3); }
}

/* ============================================================
   MOBİL UX İNCE AYAR — yoğunluk, dokunma hedefleri, sayfa odaklı
   (tasarım dili korunur: siyah zemin · beyaz tipografi · gül vurgu)
   ============================================================ */
@media (max-width: 720px) {
  /* Home hero: aşırı dikey alanı kıs → ekran başına daha çok içerik */
  .hero { padding: 1.4rem; gap: 1rem; margin-bottom: 1rem; }
  .hero-title { font-size: 1.7rem; margin: 0.7rem 0 0.5rem; }
  .hero-lead { font-size: 0.92rem; margin-bottom: 1rem; }
  .hero-cta { margin-bottom: 1rem; }
  .hero-cta .btn { flex: 1 1 auto; }      /* CTA'lar tam genişliğe yayılır (başparmak) */
  .hero-pool { padding: 1.1rem; }
  .pool-value { font-size: 1.9rem; }

  /* Dokunma hedefleri: küçük buton / sekme / çip ≥ ~40px yükseklik */
  .btn-sm { padding: 0.55rem 1rem; }
  .seg { flex-wrap: wrap; }
  .seg-btn { padding: 0.55rem 1.05rem; }

  /* Leaderboard "Senin Durumun": 4'lü istatistik dar ekranda 2'li,
     sıralama kutusu rakamı taşmasın */
  .standing-stats { grid-template-columns: repeat(2, 1fr); }
  .rank-tile b { font-size: 1.4rem; }

  /* Sponsor mobil kompaktlığı için ayrı "SPONSORLAR — MOBİL" bloğuna bak. */

  /* Profil hedef satırları: rahat dokunma yüksekliği */
  .goal { padding: 0.8rem 0.9rem; }
}

/* Küçük telefonlar: istatistik/başarım/rekor kartları 1'li yerine 2'li
   kalsın (ekran başına daha çok bilgi, daha az kaydırma). */
@media (max-width: 420px) {
  .statgrid, .ach-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Az-hareket tercihi açık ziyaretçi — SAKİN ama CANLI bir site görmeli.

   Eskiden burada şu vardı:
       *, *::before, *::after { animation: none !important; transition: none !important; }
   Niyeti doğruydu, sonucu ölü bir siteydi: hiçbir geçiş yok, vitrin
   slaytları ışınlanıyor, kullanıcı "site bozuk" sanıyor.
   2026-08-21'de Opera GX'te birebir ölçüldü — 0 animasyon, 0 geçiş.
   Bu önemli çünkü Opera GX bu sitenin hedef kitlesinde yaygın.

   Erişilebilirlik kılavuzu "hiç hareket olmasın" demez; RAHATSIZ EDİCİ
   hareket olmasın der. Ayrım şu: döngüye giren/dikkat çeken hareket
   kapanır, yön gösteren kısa geçiş kalır. */
@media (prefers-reduced-motion: reduce) {
  /* 1) Hiçbir şey DÖNGÜYE girmesin. Sonsuz animasyonlar bir tur dönüp durur. */
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* 2) Amacı zaten "sürekli hareket" olanlar tamamen dursun. */
  .announce-bar, .announce-track, .btn-aurora, .bonus-ping { animation: none !important; }
  /* Şerit durunca metin okunur kalmalı. Akan şerit iki kopyadan oluşuyor;
     hareket yoksa ikinci kopya yalnızca aynı cümleyi tekrar eder →
     GİZLENİR. Kalan kopya satır sarmasıyla tamamen görünür.
     🔴 Bunu yapmazsan şerit durduğu yerde kalır: ziyaretçi cümlenin
     ortasından bir parça görür ve bir daha hareket etmez. */
  .announce-track { display: block; transform: none !important; }
  .announce-text { white-space: normal; padding-right: 0; }
  .announce-text[aria-hidden="true"] { display: none; }
  .announce-viewport { -webkit-mask-image: none; mask-image: none; }

  /* 3) Vitrin slaytı IŞINLANMASIN: yandan kayma yerine yumuşak solma.
        Kayma = yön değiştiren büyük hareket (rahatsız eder).
        Solma  = yerinde opaklık değişimi (rahatsız etmez, kopukluk da olmaz). */
  .showcase-slide.active  { animation: scSolma 260ms ease both !important; }
  .showcase-slide.leaving { display: none !important; }

  /* 4) `transition`a DOKUNULMUYOR. Kapatıldığında buton/kart geçişleri de
        ölüyordu; bu geçişler zaten kısa ve yön değiştirmiyor. */
}
@keyframes scSolma { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   v1 HIZLI ÇIKIŞ — ekonomi modülleri gizli
   (config.js → launch.economyEnabled = false; body'ye economy-off eklenir).
   GERİ AÇMAK: launch.economyEnabled = true yap → body'de economy-off olmaz,
   bu kuralların hiçbiri uygulanmaz, tüm modüller aynen geri gelir.
   Yalnızca GÖRSEL gizleme; markup/JS silinmedi.
   ============================================================ */
/* ⚠️ Bu liste `config.js → economyViews` ile AYNI olmalı — iki ayrı yerde
   duruyor: burası nav'ı GİZLER, config router'ı ENGELLER. Biri güncellenip
   diğeri unutulursa link görünür ama tıklayınca hiçbir şey olmaz.
   2026-08-21'de tam bu oldu; 'wheel' ve 'games' eklenerek hizalandı. */
body.economy-off .side-nav [data-link="wheel"],
body.economy-off .side-nav [data-link="games"],
body.economy-off .side-nav [data-link="tasks"],
body.economy-off .side-nav [data-link="leaderboard"],
body.economy-off .side-nav [data-link="giveaways"],
body.economy-off .side-nav [data-link="marketplace"],
body.economy-off .side-nav [data-link="events"],
body.economy-off .side-nav [data-link="profile"],
body.economy-off .side-nav [data-link="levels"],
body.economy-off #sideAccountLabel,
body.economy-off .bottom-nav,
body.economy-off [data-economy-home],
/* v1 girişsiz mod: giriş ekranı + kullanıcı (bakiye/seviye) kartı + çıkış gizli */
/* 🔴 #navLoginBtn BU LISTEDE OLMALI: kapiyi gizleyip butonu birakinca
   ziyaretci tikliyor, HICBIR SEY OLMUYOR (olculdu 2 Eyl 2026). Bu blogun
   kendi yorumu ayni arizayi zaten anlatiyor — tekrar etmis. */
body.economy-off #navLoginBtn,
body.economy-off #authGate,
body.economy-off #userCard,
body.economy-off #topbarPoints,
body.economy-off #logoutBtn,
/* v1: hero'daki ödül havuzu kutusu (€0 + ölü "Çekilişe Katıl") gizli */
body.economy-off .hero-pool {
  display: none !important;
}
/* Ödül havuzu gizlenince hero tek sütuna insin (metin tam genişlik). */
body.economy-off .hero { grid-template-columns: 1fr; }
/* Vitrin slaytı varsa hero 2 sütun; sağ sütun büyük (görsele geniş alan).
   🔴 ORAN DENEYEREK SEÇİLDİ: yazı 1fr · afiş 1.4fr.
   Eşit sütunda (1fr 1fr) afiş hero genişliğinin ancak %45'ini kaplıyordu;
   referansta %60. Ama afiş sütununu daha da büyütünce yazı sütunu
   daralıp başlık taşıyor ve HERO UZUYOR: 1.45fr’de hero 369→394,
   1.6fr’de 453 oluyor, afişin yükseklik payı %69→%59 DÜŞÜYOR.
   1.4fr denge noktası: afiş %53 genişlik · %69 yükseklik, hero sabit.
   (Referansın başlığı kısa, bizimki üç kelime uzun — bire bir aynı
   oran bu içerikte çalışmıyor. Ölçüldü.) */
body.economy-off .hero.has-showcase {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

/* ============================================================
   HOMEPAGE = ana sayfa tasarımı (ekonomi AÇIK olsa da).
   Ekonomi açılınca beliren ana sayfa önizlemeleri (prize-pool + görev/
   çekiliş/oyuncu/etkinlik önizleme blokları) ana sayfada GİZLİ tutulur —
   bu içerikler zaten nav'daki kendi sayfalarında (Görevler/Liderlik/Market/
   Çekilişler). Böylece ana sayfa her durumda cilalı haliyle aynı görünür.
   (Sonradan redesign edilip geri getirilebilir — yalnız görsel gizleme.)
   ============================================================ */
.hero-pool { display: none !important; }
[data-economy-home] { display: none !important; }
.hero { grid-template-columns: 1fr; }
/* Ekonomi AÇIK hâl için de aynı oran — iki dal ayrışmasın.
   (Bir dalda düzeltilip diğerinde unutulan ayar bu üründe tekrar eden
   hata sınıfı; ikisi bilerek yan yana tutuluyor.) */
.hero.has-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

/* STEP 57 — Vitrin (hero carousel): öne çıkan bonus görselleri 3 sn'de bir döner. */
/* 🔴 DAVRANIŞ İKİ CANLI REFERANS SİTEDEN ÖLÇÜLDÜ, uydurulmadı:
     referans A : afiş 464x249 · oran 1.86 · object-fit FILL    · radius 24
     referans B : afiş 700x328 · oran 2.13 · object-fit CONTAIN · radius 22
   İkisi de afişin TAMAMINI gösteriyor, KIRPMIYOR. Referans A'da üstte
   ve altta 60'ar px boşluk VAR ve göze batmıyor — çünkü afiş kendi
   içinde dolu, çerçeveli bir reklam görseli.

   Bu yüzden aradaki "hücreyi doldur + cover" denemesi geri alındı:
   afişi kırpıyordu (dar ekranda okunmaz dilime düşüyordu) ve zaten
   asıl sorun boşluk değil, afişin zayıf olmasıydı.

   Kalıcı olan iki düzeltme:
     · kenar maskesi (13%/87% fade) KALKTI — afişin sol/sağ kenarını
       yiyip "yarım kalmış" gösteriyordu
     · afişe köşe yuvarlaklığı geldi (referanstaki 22–24px gibi) */
.hero-showcase {
  position: relative; align-self: stretch; overflow: hidden;
  border-radius: 20px;
  /* 🔴 KENAR GEÇİŞİ GERİ GELDİ. Bir ara kaldırmıştım — o zamanki afiş
     düz bir yazı kartıydı ve fade yazıyı yiyordu. Referansta bu maske
     VAR ve afişi hero zeminine yumuşakça bağlıyor; olmayınca afiş sert
     kenarlı, yapıştırılmış bir kart gibi duruyor (bildirilen şikâyet:
     "yanlardan geçiş yok, transparanlaşmıyor").
     ⚠️ Afişin ilk %13'ü ve son %13'ü söner → afiş tasarımında YAZI bu
     kenarlara girmemeli, yoksa fade yazıyı keser. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.showcase-track { position: relative; height: 100%; }
.showcase-slide { display: none; height: 100%; }
.showcase-slide.active { display: block; animation: scSlideIn 1s cubic-bezier(0.45, 0, 0.25, 1); }
/* Çıkan slayt: aktifin üzerine bindirilir, yeni slaytla bitişik şerit gibi
   tam genişlik boyunca sola kayar (overflow kırpar, fade yok). */
.showcase-slide.leaving {
  display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  animation: scSlideOut 1s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
@keyframes scSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes scSlideOut {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.showcase-slide a { display: block; height: 100%; }
/* 🔴 AFİŞ HÜCREYİ TAM DOLDURUR — "0'a 0 otursun".
   Referansta afiş, hero'nun iç yüksekliğini birebir kaplıyor (328'e
   karşı 329 px, sıfır boşluk). Orada bunu bedava alıyorlar çünkü hero'nun
   boyunu AFİŞ belirliyor — yazı sütunu kısa. Bizde yazı daha uzun, boyu
   YAZI belirliyor; afiş kendi oranında bırakılırsa altında ölü boşluk
   kalıyor (ölçüldü: 57-116 px, "tam oturmamış" şikâyeti buydu).

   Çözüm: afiş hücreyi kaplar, taşan yer kırpılır. object-position sola
   yakın (%30) — kırpma SAĞDAN, yani illüstrasyondan yer alır; yazı
   bloğu (afişin %17-%62 aralığı) hep görünür kalır. */
.showcase-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% center;
  /* Panelden gelen ölçek artık yakınlaştırma; kutu overflow'u kırpar. */
  transform: scale(var(--sc, 1)); transform-origin: 30% center;
}
/* 🔴 EŞİK 720 DEĞİL 1200 — ÖLÇÜLDÜ.
   🔴 EŞİK İKİNCİ KEZ YÜKSELTİLDİ (720 → 1200 → 1320). 1200 de yetmedi:
   1220-1260 arasında hero'nun İKİ BUTONU ALT ALTA düşüyor, hero
   369'dan 453'e şişiyor, afişin yükseklik payı %69'dan %49'a iniyor ve
   afişin altında 116px ölü boşluk kalıyor. Kendi ekranımda (1440)
   görünmüyordu — dar pencerede bildirildi, taramayla yakalandı.
   İki sütun dar ekranda afişi eziyor: 1024px'te vitrin sütunu 306px'e
   düşüyor (kenar çubuğu yer yiyor), afiş küçücük kalıyordu. 820px'te
   daha da kötüydü. Bu genişliğin altında hero TEK SÜTUN olur; afiş
   tüm genişliği alıp okunur boyuta çıkar. */
@media (max-width: 1120px) {
  .hero.has-showcase,
  body.economy-off .hero.has-showcase { grid-template-columns: 1fr; }
  .hero-showcase { margin: 0.6rem 0 0; align-self: auto; }
}


/* ============================================================
   DUYARLILIK TABANI — 12 ekran boyutunda taranarak bulundu
   ------------------------------------------------------------
   Tarama: telefon (360/390/430) · tablet (768/820/1024) ·
   dizüstü (1265/1366/1440) · masaüstü (1536/1920/2560), iki sayfa.
   Aşağıdakilerin hepsi ÖLÇÜLDÜ, tahmin değil.
   ============================================================ */

/* 1) KISA EKRANDA HERO TAŞIYORDU.
   Tablet yatayda (1024x768) hero ilk ekranın %107'sini yiyordu —
   yani afişin altı ekrana hiç sığmıyordu, sayfanın devamı olduğu
   belli olmuyordu. Tek sütuna inince yazı ve afiş alt alta geliyor,
   afiş de tam genişlikte olduğu için çok yükseliyor.
   Afişe ekran yüksekliğine bağlı tavan konur; taşan yer kırpılır.
   Telefonu etkilemez — orada afiş zaten bu tavanın altında kalıyor. */
@media (max-width: 1120px) {
  .hero-showcase { max-height: min(34vh, 300px); }
}
/* Tek sütun + KISA ekran birleşimi: yazı ve afiş alt alta gelince
   768px yüksekliğe sığmıyordu (ölçüldü: %102). Buradaki belirleyici
   genişlik değil YÜKSEKLİK — aynı genişlik uzun ekranda sorunsuz.
   Bu yüzden kural yüksekliğe bakar. */
/* ⚠️ ALT SINIR ŞART: bu kural telefonu da yakalıyordu (360x740 de
   "kısa ekran"dır) ve dosyada mobil bloklardan SONRA geldiği için
   onları eziyordu — telefonda başlık 1.7rem olması gerekirken
   1.9rem oluyordu. Denetim yakaladı. */
@media (min-width: 721px) and (max-width: 1120px) and (max-height: 820px) {
  .hero { padding: 1.4rem; gap: 0.9rem; }
  .hero-title { font-size: 1.9rem; margin: 0.5rem 0 0.45rem; }
  .hero-lead { font-size: 0.92rem; margin-bottom: 0.8rem; }
  .hero-cta { margin-bottom: 0.8rem; }
  .hero-showcase { max-height: 26vh; }
}

/* 2) KESİRLİ PİKSEL BOŞLUĞU.
   Tek sütun kuralı max-width:1120, iki sütun bandı min-width:1121 ile
   başlıyordu. Tam sayı genişliklerde sorun yok; tarayıcı yakınlaştırması
   genişliği kesirli yapınca (ör. 1120.5) İKİSİ DE çalışmıyordu ve hero
   ayarsız kalıyordu. Alt sınır kesire çekildi. */
@media (min-width: 1120.02px) and (max-width: 1400px) {
  .hero { padding: 1.6rem; gap: 1.2rem; }
  .hero-title { font-size: 2.05rem; margin: 0.6rem 0 0.5rem; }
  .hero-lead { font-size: 0.94rem; margin-bottom: 0.9rem; }
  .hero-cta { gap: 0.55rem; margin-bottom: 0.9rem; }
  .hero-cta .btn { padding-left: 1.05rem; padding-right: 1.05rem; }
}

/* 3) DOKUNMA HEDEFİ TABANI (dokunmatik genişlikler).
   Ölçülen kusurlar: "Tümü →" 51x20 · "İncele" 63x30 ·
   alt sosyal bağlantılar 34x31 · sponsor kartındaki "Siteye Git" 91x28.
   Parmak ucu ~44px; 38px altı ıskalanıyor ve kullanıcı yanlış yere
   basıyor. Yükseklik tabanı konur — görünüm değişmez, basma alanı büyür. */
@media (max-width: 1120px) {
  .link-more {
    display: inline-flex; align-items: center;
    min-height: 38px; padding: 0 0.35rem;
  }
  .announce-btn { min-height: 38px; display: inline-flex; align-items: center; }
  .foot-social-link {
    min-height: 38px; min-width: 38px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sponsor-banner-row .btn,
  .sponsor-strip .btn { min-height: 38px; }
  /* Şerit banner'ın tıklanan bağlantısı 36px kalıyordu — parmak
     tabanının altında. Kutu yükseltilir.
     ⚠️ Bu ancak afiş `contain` ile çizildiği için güvenli: `cover`
     iken kutuyu yükseltmek afişi YANLARDAN kırpıyordu (denendi,
     sponsorun butonu yarısından kesildi). İkisi birbirine bağlı —
     afişi `cover`a döndürürsen bu satırı da geri al. */
  .sponsor-banner { min-height: 44px; }
}

/* 4) ÖNE ÇIKAN KARTLARDA YAZI OKUNMUYORDU.
   Telefonda üç kart yan yana duruyor — bu BİLİNÇLİ bir karar, hepsi
   tek bakışta görünsün diye. Karar korunuyor; sorun kartın kendisi
   değil, içindeki puntoların tabanın altına düşmesiydi:
     bonus yazısı 9.6px · kart adı 11.2px · buton 10.6px ve 28px yüksek.
   9-10px telefonda okunmuyor. Punto tabanı yükseltilir, buton
   parmakla basılabilir yüksekliğe çıkar. Kart sayısı değişmez. */
/* En kucuk telefonda (360x740) hero ilk ekranin %92'sini yiyordu:
   yazi ve afis alt alta, altinda hicbir sey gorunmuyor. Buton ve
   punto kucultmeden yalnizca dikey bosluklar kisilir. */
@media (max-width: 420px) {
  .hero { padding: 1.15rem 1.2rem 1.1rem; gap: 0.7rem; }
  .hero-title { margin: 0.5rem 0 0.4rem; }
  .hero-lead { margin-bottom: 0.8rem; }
  .hero-cta { margin-bottom: 0.7rem; }
  .hero-showcase { margin-top: 0.35rem; }
}

@media (max-width: 720px) {
  .sponsor-featured-row .sponsor-feat .sponsor-name { font-size: 0.78rem; }
  .sponsor-featured-row .sponsor-feat .sponsor-bonus { font-size: 0.72rem; }
  .sponsor-featured-row .sponsor-feat .btn {
    font-size: 0.74rem; min-height: 38px; padding: 0.4rem 0.2rem;
  }
  /* Genel ızgaradaki "Siteye Git" 35px kalıyordu; şerit banner'ın
     tıklanan bağlantısı 36px. İkisi de parmak tabanının altında. */
  .sponsor-grid .sponsor-cta { min-height: 38px; }
}
/* Ham foto: görselin üstündeki bonus yazı şeridi (caption) gizli — alttaki
   "black bar" buydu. Görselde zaten yazı baskılı olduğundan gerek yok. */
.showcase-cap { display: none; }
.showcase-dots { position: absolute; bottom: 0.7rem; right: 0.85rem; display: flex; gap: 0.35rem; z-index: 2; }
.showcase-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.showcase-dot.active { background: var(--rose); transform: scale(1.25); }

/* ============================================================
   KULÜP ÇARKI — ücretsiz günlük çark
   ============================================================ */
.wheel-stage {
  position: relative; width: min(360px, 84vw); height: min(360px, 84vw);
  margin: 2rem auto 0; display: grid; place-items: center;
}
/* Dış aura halkası — sitenin aurora dilinde yumuşak glow */
.wheel-stage::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #6366f1, #3b82f6, #06b6d4, #8b5cf6);
  filter: blur(26px); opacity: .35; z-index: 0; animation: wheelAura 8s linear infinite;
}
@keyframes wheelAura { to { transform: rotate(360deg); } }
.wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 5;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 28px solid #f4c869;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(244,200,105,.6));
}
.wheel-disc {
  width: 100%; height: 100%; border-radius: 50%; position: relative; z-index: 1;
  /* Kohезyon: soğuk koyu 2-ton + jackpot (son dilim) altın. Rainbow YOK. */
  background: conic-gradient(
    #241f45 0deg 51.43deg,
    #191634 51.43deg 102.86deg,
    #241f45 102.86deg 154.29deg,
    #191634 154.29deg 205.71deg,
    #2b2456 205.71deg 257.14deg,
    #191634 257.14deg 308.57deg,
    #4a3a1e 308.57deg 360deg);
  border: 8px solid #0d0b1a;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.08),
    0 0 0 10px rgba(139,92,246,.12),
    0 24px 60px -14px rgba(99,102,241,.5),
    inset 0 0 50px rgba(0,0,0,.5);
  transition: transform 5s cubic-bezier(.12,.7,.15,1);
}
/* İnce dilim ayraç çizgileri (radial) */
.wheel-disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.07) 0deg 0.4deg, transparent 0.4deg 51.43deg);
}
.wheel-seg-label {
  position: absolute; top: 50%; left: 50%; transform-origin: center;
  color: #eef; font-weight: 800; font-size: .95rem; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; white-space: nowrap; z-index: 2;
}
.wheel-seg-label.jackpot { color: #f4c869; font-size: 1.05rem; text-shadow: 0 0 8px rgba(244,200,105,.7); }
/* İç yazı — diskle AYNI süre/eğride ters döner → dönerken bile hep dik durur. */
.wsl-txt { display: inline-block; transition: transform 5s cubic-bezier(.12,.7,.15,1); will-change: transform; }
.wheel-hub {
  position: absolute; width: 84px; height: 84px; border-radius: 50%; z-index: 4;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 42% 34%, #2c2752, #0c0a18);
  border: 3px solid #f4c869; color: #f4c869;
  font-family: var(--font-display); font-weight: 800; font-size: .6rem; letter-spacing: .16em;
  box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 18px -4px rgba(244,200,105,.5), inset 0 0 12px rgba(0,0,0,.6);
}
.wheel-actions { text-align: center; margin-top: 2rem; }
.wheel-actions .btn { min-width: 220px; justify-content: center; }
.wheel-msg { margin-top: 1rem; color: var(--muted); font-size: .92rem; min-height: 1.3em; }
.wheel-msg.win { color: #f4c869; font-weight: 800; font-size: 1.05rem; text-shadow: 0 0 10px rgba(244,200,105,.4); }

/* ============================================================
   KULÜP OYUNLARI — bahisli çark + zar
   ============================================================ */
.games-tabs { max-width: 340px; margin: 1.2rem auto 0; }
.game-bet-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  max-width: 460px; margin: 1.2rem auto 0; justify-content: center;
}
.game-bet-row label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.game-bet-row #gameBet { width: 130px; margin: 0; text-align: center; font-weight: 700; }
.bet-quick { display: flex; gap: .35rem; }
.bet-quick .btn { min-width: 42px; padding: .45rem .6rem; }
.game-panel { text-align: center; margin-top: 1.5rem; }
.game-panel[hidden] { display: none !important; }
.game-panel .btn-lg { min-width: 200px; justify-content: center; margin-top: 1.4rem; }

/* Bahis çarkı — serbest çarkla aynı görsel dil, multiplier renkli */
.bwheel-stage { position: relative; width: min(400px, 84vw); height: min(400px, 84vw); margin: .5rem auto 0; display: grid; place-items: center; }
.bwheel-stage::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: conic-gradient(from 0deg, #8b5cf6, #6366f1, #3b82f6, #06b6d4, #8b5cf6); filter: blur(24px); opacity: .3; }
.bwheel-disc { border: 8px solid #0d0b1a; }

/* Zar */
.dice-board { max-width: 460px; margin: 1.4rem auto 0; }
.dice-roll {
  font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: #fff;
  text-shadow: 0 0 18px rgba(139,92,246,.5); margin-bottom: 1rem; transition: color .2s;
}
.dice-roll.win { color: #f4c869; text-shadow: 0 0 20px rgba(244,200,105,.6); }
.dice-roll.lose { color: #ef6b6b; }
.dice-track {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, #34d399 0%, #34d399 50%, #ef4444 50%, #ef4444 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.dice-track-win { position: absolute; inset: 0 auto 0 0; background: #34d399; border-radius: 999px; width: 50%; transition: width .12s; }
.dice-track { background: #ef4444; }
.dice-marker { position: absolute; top: -4px; width: 4px; height: 22px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.7); transition: left .5s cubic-bezier(.2,.8,.2,1); left: 50%; }
.dice-scale { display: flex; justify-content: space-between; margin-top: .5rem; color: var(--muted-2); font-size: .72rem; }
.dice-controls { max-width: 460px; margin: 1.5rem auto 0; }
.dice-controls label { color: var(--muted); font-size: .9rem; }
.dice-controls input[type=range] { width: 100%; margin: .7rem 0; accent-color: #8b5cf6; }
.dice-info { color: var(--muted); font-size: .85rem; }
.dice-info b { color: #f4c869; }

/* ============================================================
   OYUNLAR — PREMIUM cila (gloss + metalik rim + chip bahis)
   ============================================================ */
/* Bahis chip'leri — altın jeton hissi */
.bet-chips { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 1.4rem auto 0; }
.bet-chip {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #f4e4b8;
  background: radial-gradient(circle at 35% 30%, #3a3252, #1a1730);
  border: 2px solid rgba(244,200,105,.35);
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.12);
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.bet-chip:hover { transform: translateY(-2px); border-color: rgba(244,200,105,.6); }
.bet-chip.active {
  color: #1a1408; border-color: #f4c869;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f4c869);
  box-shadow: 0 6px 18px -4px rgba(244,200,105,.6), inset 0 1px 2px rgba(255,255,255,.5);
}
.bet-chip .kp-dot { width: 8px; height: 8px; }
.game-bet-row { margin-top: .9rem; }
.game-bet-row label { font-size: .8rem; }
.game-bet-row #gameBet { width: 110px; }

/* Bahis çarkı — gloss + metalik çok-katlı rim */
.bwheel-disc {
  border: none !important;
  box-shadow:
    0 0 0 3px #0d0b1a,
    0 0 0 8px #2a2438,
    0 0 0 11px #4a3f66,
    0 0 0 13px #f4c869,
    0 0 0 16px #0d0b1a,
    0 26px 60px -14px rgba(99,102,241,.55),
    inset 0 0 60px rgba(0,0,0,.55) !important;
}
/* Cam parlaması — üst-sol beyaz highlight (3D his) */
.bwheel-disc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3;
  background:
    radial-gradient(120% 80% at 32% 18%, rgba(255,255,255,.28), rgba(255,255,255,.06) 30%, transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(0,0,0,.4), transparent 45%);
}
/* Cıvata halkası — rim çevresine eşit aralıklı ışık noktaları */
.bwheel-stage::after {
  content: ''; position: absolute; width: calc(100% + 26px); height: calc(100% + 26px);
  border-radius: 50%; pointer-events: none; z-index: 2;
  background: repeating-conic-gradient(from 0deg,
    rgba(244,200,105,.9) 0deg 1.4deg, transparent 1.4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 51%, transparent 51.5%);
          mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 51%, transparent 51.5%);
  opacity: .7;
}
/* Spin butonu — daha büyük, parlak */
#wheelPlayBtn, #dicePlayBtn {
  font-size: 1.05rem; padding: .95rem 2.2rem; letter-spacing: .04em;
  box-shadow: 0 12px 30px -8px rgba(244,63,94,.5);
}

/* Oyun lobisi — 2 kart (seç-oyna) */
/* Stake tarzı kompakt kart ızgarası — küçük, dik, yoğun. */
.games-lobby {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1.1rem;
  max-width: 920px; margin: 1.6rem auto 0;
}
.games-lobby[hidden] { display: none !important; }
@media (max-width: 560px) { .games-lobby { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }

.game-card {
  /* Stake tarzı: canlı renk dolgulu kart (bizim paletle). Her oyun kendi teması. */
  --gc-bg: linear-gradient(158deg, #7c5cff 0%, #4a2fb0 52%, #2a1c5e 100%);
  --gc-line: rgba(180,160,255,.55); --gc-shadow: rgba(124,92,255,.55);
  color: #fff; cursor: pointer; padding: 0; position: relative; overflow: hidden;
  aspect-ratio: 1 / 1.16; border-radius: 16px; border: 1px solid rgba(255,255,255,.1);
  /* katman 1: hover'da soldan sağa süzülen ışık şeridi (sheen) · katman 2: tema dolgusu */
  background:
    linear-gradient(115deg, transparent 33%, rgba(255,255,255,.22) 47%, transparent 61%) no-repeat,
    var(--gc-bg);
  background-size: 220% 100%, auto; background-position: 135% 0, 0 0;
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .3s, background-position .7s ease;
}
.game-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(115% 55% at 50% -8%, rgba(255,255,255,.26), transparent 60%); }
/* İllüstrasyon arkası yumuşak koyu spot → her renkte kontrast (çark/zar kaybolmasın) */
.game-card::after { content: ''; position: absolute; inset: 3% 9% 34% 9%; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(62% 58% at 50% 46%, rgba(0,0,0,.34), transparent 72%);
  transition: background .3s; }
.game-card:hover { transform: translateY(-6px) scale(1.015); border-color: var(--gc-line);
  box-shadow: 0 26px 52px -18px var(--gc-shadow), inset 0 1px 0 rgba(255,255,255,.22);
  background-position: -45% 0, 0 0; }
.game-card:hover::after { background: radial-gradient(66% 62% at 50% 44%, rgba(0,0,0,.42), transparent 72%); }
.game-card:active { transform: translateY(-2px) scale(.995); }
/* Oyun temaları */
.gc-dice-card   { --gc-bg: linear-gradient(158deg, #ffd76b 0%, #d99a2c 50%, #8a5a12 100%); --gc-line: rgba(255,215,107,.7); --gc-shadow: rgba(201,150,47,.6); }
.gc-plinko-card { --gc-bg: linear-gradient(158deg, #38bdf8 0%, #2563eb 54%, #16306e 100%); --gc-line: rgba(56,189,248,.65); --gc-shadow: rgba(37,99,235,.6); }
.gc-mines-card  { --gc-bg: linear-gradient(158deg, #2ee06a 0%, #15914a 54%, #0a4327 100%); --gc-line: rgba(46,224,106,.65); --gc-shadow: rgba(21,145,74,.6); }
.gc-crash-card  { --gc-bg: linear-gradient(158deg, #ff5a78 0%, #d31d44 54%, #6e1730 100%); --gc-line: rgba(255,90,120,.65); --gc-shadow: rgba(211,29,68,.6); }

.gc-badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-size: .56rem; font-weight: 900; letter-spacing: .05em; padding: .26rem .55rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.42)); color: #fff;
  border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s ease;
}
.game-card:hover .gc-badge { transform: scale(1.06); }
.gc-badge-gold, .gc-badge-red { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.42)); border-color: rgba(255,255,255,.32); color: #fff; }

.gc-art { position: absolute; inset: 4% 0 30% 0; z-index: 1; display: grid; place-items: center; padding: 0 12px; }
.gc-illu { width: 100%; height: 100%; max-width: none; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  transform-box: fill-box; transform-origin: center;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .3s; }
/* EVRENSEL hover: her oyunun illüstrasyonu büyür + kalkar + gölge derinleşir */
.game-card:hover .gc-illu { transform: scale(1.1) translateY(-3px); filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); }

/* Oyuna özel hover hareketleri (illüstrasyonun karakterine göre) */
.gc-wheel-spin { transform-box: fill-box; transform-origin: center; transition: transform 1.35s cubic-bezier(.12,.85,.2,1); }
.game-card:hover .gc-wheel-spin { transform: rotate(322deg); }
/* Zar hover'da hafif sallanır, Yazı-Tura döner, Crash roketi kalkar, Slot çevrilir */
.gc-dice-card:hover .gc-illu     { animation: gcWobble .6s ease; }
.gc-flip-card:hover .gc-illu     { transform: scale(1.1) rotateY(360deg); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gc-crash-card:hover .gc-illu    { transform: scale(1.12) translateY(-8px) rotate(-4deg); }
.gc-slots-card:hover .gc-illu    { animation: gcNudge .5s ease; }
.gc-diamonds-card:hover .gc-illu { animation: gcPulse .7s ease; }
.gc-dragon-card:hover .gc-illu   { transform: scale(1.13) translateY(-4px); }
.gc-hilo-card:hover .gc-illu     { transform: scale(1.1) translateY(-3px) rotate(3deg); }
@keyframes gcWobble { 0%,100% { transform: scale(1.08) rotate(0); } 25% { transform: scale(1.1) rotate(-7deg); } 75% { transform: scale(1.1) rotate(7deg); } }
@keyframes gcNudge  { 0% { transform: scale(1.05) translateY(-6px); } 60% { transform: scale(1.12) translateY(2px); } 100% { transform: scale(1.1) translateY(-3px); } }
@keyframes gcPulse  { 0%,100% { transform: scale(1.08); } 50% { transform: scale(1.16); filter: drop-shadow(0 0 14px rgba(79,240,208,.7)); } }

.gc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: left; padding: 30px 12px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.5) 55%); }
.gc-info h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; line-height: 1.1; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.gc-info h3::after { content: 'KULÜP ORİJİNAL'; display: block; margin-top: 3px; font-family: var(--font-sans, inherit); font-size: .5rem; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.gc-info p { display: none; }
.game-card-cta { display: none; }
.game-back {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  align-self: flex-start; margin: 0 0 1.1rem; /* sol-üst */
  padding: .55rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-2); color: var(--text);
  transition: color .15s, background .15s, border-color .15s;
}
.game-back:hover { color: var(--text); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
#gamesPlay { display: flex; flex-direction: column; align-items: center; }
#gamesPlay[hidden] { display: none !important; }

/* ============ YENİ OYUNLAR ============ */
/* Kart temaları */
.gc-plinko-card { --gc-glow: rgba(56,189,248,.32); --gc-line: rgba(56,189,248,.5); --gc-shadow: rgba(56,189,248,.5); }
.gc-mines-card  { --gc-glow: rgba(34,197,94,.3);   --gc-line: rgba(34,197,94,.5);  --gc-shadow: rgba(34,197,94,.5); }
.gc-crash-card  { --gc-glow: rgba(244,63,94,.32);  --gc-line: rgba(244,63,94,.5);  --gc-shadow: rgba(244,63,94,.5); }
.gc-badge-red { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.42); color: #fda4af; }

/* KRİTİK: .btn display'i [hidden]'ı eziyordu → Başlat/Çek gizlenmiyordu. */
.btn[hidden] { display: none !important; }

/* Ortak aksiyon + çek butonu */
.game-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.btn-cash { background: linear-gradient(135deg, #22c55e, #15803d); color: #eafff1; border: none; box-shadow: 0 8px 22px -8px rgba(34,197,94,.6); }
.btn-cash:hover { filter: brightness(1.08); }
.btn-cash:disabled { opacity: .5; cursor: default; filter: none; }

/* PLINKO */
.plinko-stage { position: relative; width: min(460px, 90vw); height: min(460px, 90vw); margin: .5rem auto 0; }
.plinko-pegs { position: absolute; inset: 0 0 44px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 8px 0; }
.plinko-row { display: flex; justify-content: center; gap: 7%; }
.plinko-peg { width: 6px; height: 6px; border-radius: 50%; background: #6b7aa8; box-shadow: 0 0 6px rgba(124,140,189,.5); }
.plinko-ball { position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 35% 30%, #fff0c0, #f4c869 60%, #c9962f); box-shadow: 0 0 14px rgba(244,200,105,.85); }
.plinko-slots { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; gap: 3px; padding: 0 4px; }
.plinko-slot { flex: 1; display: grid; place-items: center; border-radius: 6px; font-size: .66rem; font-weight: 800; color: #cbd5e1; background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: transform .15s, background .15s; }
.plinko-slot.hot { color: #4ade80; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.plinko-slot.cold { color: #94a3b8; }
.plinko-slot.landed { transform: translateY(-4px) scale(1.1); background: var(--rose-grad); color: var(--on-rose); box-shadow: 0 8px 20px -6px rgba(var(--rose-rgb),.6); }

/* MINES */
.mines-setup { display: flex; align-items: center; gap: .8rem; justify-content: center; margin: .3rem 0 1rem; font-size: .85rem; color: var(--muted); }
.mines-setup b { color: #f43f5e; font-size: 1rem; }
.mines-setup input[type=range] { accent-color: #f43f5e; width: 180px; max-width: 46vw; }
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(420px, 90vw); margin: 0 auto; }
.mine-tile { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1a2130, #12161f); cursor: pointer; font-size: 1.7rem; display: grid; place-items: center; transition: transform .12s, background .15s, border-color .15s; }
.mine-tile:not(.idle):not(.locked):hover { transform: translateY(-2px); border-color: rgba(34,197,94,.5); background: linear-gradient(160deg, #22303f, #161d29); }
.mine-tile.idle { cursor: default; opacity: .5; }
.mine-tile.open { background: radial-gradient(circle at 40% 30%, rgba(34,197,94,.28), rgba(34,197,94,.1)); border-color: rgba(34,197,94,.5); animation: minePop .25s ease; }
.mine-tile.mine { background: radial-gradient(circle at 40% 30%, rgba(244,63,94,.32), rgba(244,63,94,.12)); border-color: rgba(244,63,94,.55); }
.mine-tile.boom { animation: mineBoom .45s ease; }
.mine-tile.locked { cursor: default; }
@keyframes minePop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes mineBoom { 0%,100% { transform: scale(1); } 40% { transform: scale(1.28); } }

/* CRASH */
.crash-stage { position: relative; width: min(480px, 92vw); height: 300px; margin: .5rem auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 100% at 15% 100%, rgba(139,92,246,.18), transparent 60%), #0c0e16; }
.crash-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; }
.crash-mult { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3.6rem; font-weight: 900; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); z-index: 2; transition: color .2s; }
.crash-mult.win { color: #4ade80; }
.crash-mult.boom { color: #f43f5e; }
.crash-rocket { position: absolute; left: 12px; bottom: 10px; font-size: 1.9rem; z-index: 3; transition: transform .12s linear; }

/* ---- 5 yeni oyun kart temaları ---- */
.gc-limbo-card    { --gc-bg: linear-gradient(158deg, #a855f7 0%, #6d28d9 54%, #3b1e6e 100%); --gc-line: rgba(168,85,247,.65); --gc-shadow: rgba(109,40,217,.6); }
.gc-flip-card     { --gc-bg: linear-gradient(158deg, #22d3ee 0%, #0e9aa7 54%, #0b5560 100%); --gc-line: rgba(34,211,238,.6); --gc-shadow: rgba(14,154,167,.6); }
.gc-keno-card     { --gc-bg: linear-gradient(158deg, #fb7185 0%, #db2777 54%, #831843 100%); --gc-line: rgba(251,113,133,.6); --gc-shadow: rgba(219,39,119,.6); }
.gc-roulette-card { --gc-bg: linear-gradient(158deg, #10b981 0%, #047857 54%, #05392a 100%); --gc-line: rgba(16,185,129,.6); --gc-shadow: rgba(4,120,87,.6); }
.gc-dragon-card   { --gc-bg: linear-gradient(158deg, #fb923c 0%, #ea580c 54%, #7c2d12 100%); --gc-line: rgba(251,146,60,.6); --gc-shadow: rgba(234,88,12,.6); }

/* LIMBO */
.limbo-display { font-family: var(--font-display); font-size: 3.6rem; font-weight: 900; text-align: center; margin: 1rem 0 .4rem; color: #fff; transition: color .2s; }
.limbo-display.win { color: #4ade80; } .limbo-display.boom { color: #f43f5e; }
.limbo-target { display: flex; align-items: center; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-bottom: .5rem; }
.limbo-target label { font-size: .85rem; color: var(--muted); }
.limbo-target #limboTarget { width: 120px; }
.limbo-chance { font-size: .8rem; color: #c084fc; font-weight: 700; }

/* FLIP */
.flip-coin { width: 120px; height: 120px; border-radius: 50%; margin: 1rem auto; display: grid; place-items: center; font-size: 3rem; font-weight: 900; color: #8a5a12; background: radial-gradient(circle at 35% 30%, #fff7d6, #f4c869 60%, #b8862f); box-shadow: 0 12px 30px -8px rgba(244,200,105,.6), inset 0 2px 4px rgba(255,255,255,.5); transition: box-shadow .2s; }
.flip-coin.spinning { animation: flipSpin .28s linear infinite; }
.flip-coin.win { box-shadow: 0 0 0 4px rgba(34,197,94,.55), 0 12px 30px -8px rgba(34,197,94,.5); }
.flip-coin.boom { box-shadow: 0 0 0 4px rgba(244,63,94,.5); filter: grayscale(.35); }
@keyframes flipSpin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.flip-choose { display: flex; gap: .7rem; justify-content: center; margin-bottom: .5rem; }
.flip-side { padding: .6rem 1.4rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.flip-side.active { border-color: #f4c869; background: rgba(244,200,105,.15); color: #f4c869; }

/* KENO */
.keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(430px, 92vw); margin: .3rem auto .7rem; }
.keno-cell { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: .82rem; font-weight: 700; cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.keno-cell:hover { border-color: rgba(236,72,153,.5); }
.keno-cell.picked { background: rgba(236,72,153,.28); border-color: #ec4899; color: #fff; }
.keno-cell.hit { background: #22c55e; border-color: #22c55e; color: #04220f; animation: minePop .25s; }
.keno-cell.miss { background: rgba(255,255,255,.08); color: var(--muted); }
.keno-cell.picked.miss { background: rgba(244,63,94,.22); border-color: rgba(244,63,94,.5); color: #fda4af; }
.keno-info { text-align: center; font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.keno-clear { background: none; border: none; color: #f472b6; font-weight: 700; cursor: pointer; }

/* RULET */
.roulette-result { width: 112px; height: 112px; border-radius: 50%; margin: 1rem auto; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; color: #fff; background: #1a1a1a; border: 3px solid var(--line-2); transition: box-shadow .2s; }
.roulette-result.spinning { animation: rSpin .5s ease-in-out infinite; }
.roulette-result.red { background: radial-gradient(circle at 40% 30%, #e04b5a, #b0192a); border-color: #f4c869; }
.roulette-result.black { background: radial-gradient(circle at 40% 30%, #3a3a3a, #111); border-color: #f4c869; }
.roulette-result.green { background: radial-gradient(circle at 40% 30%, #16a34a, #05502a); border-color: #f4c869; }
.roulette-result.win { box-shadow: 0 0 0 4px rgba(34,197,94,.5), 0 0 24px rgba(34,197,94,.4); }
@keyframes rSpin { 0%,100% { transform: scale(1); } 50% { transform: scale(.9); } }
.roulette-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 0 auto .5rem; }
.rbet { padding: .55rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; font-size: .76rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.rbet.active { border-color: #22c55e; background: rgba(34,197,94,.16); color: #fff; }

/* DRAGON TOWER */
.dragon-tower { display: flex; flex-direction: column; gap: 6px; width: min(300px, 86vw); margin: .3rem auto .5rem; }
.dragon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; opacity: .45; transition: opacity .15s; }
.dragon-row.cur { opacity: 1; }
.dragon-row.done { opacity: .8; }
.dragon-tile { height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #2a1c10, #17100a); cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; transition: transform .12s, background .15s, border-color .15s; }
.dragon-row.cur .dragon-tile:not(.locked):hover { border-color: rgba(251,146,60,.65); transform: translateY(-2px); background: linear-gradient(160deg, #3a2814, #221610); }
.dragon-tile.locked { cursor: default; }
.dragon-tile.safe { background: radial-gradient(circle at 40% 30%, rgba(34,197,94,.32), rgba(34,197,94,.1)); border-color: rgba(34,197,94,.5); }
.dragon-tile.bomb { background: radial-gradient(circle at 40% 30%, rgba(244,63,94,.32), rgba(244,63,94,.12)); border-color: rgba(244,63,94,.55); }
.dragon-tile.boom { animation: mineBoom .45s; }

/* ===== YENİ OYUNLAR — kart gradientleri ===== */
.gc-slots-card     { --gc-bg: linear-gradient(158deg, #e879f9 0%, #a21caf 54%, #4a0e4e 100%); --gc-line: rgba(232,121,249,.62); --gc-shadow: rgba(162,28,175,.6); }
.gc-diamonds-card  { --gc-bg: linear-gradient(158deg, #2dd4bf 0%, #0d9488 54%, #063f3a 100%); --gc-line: rgba(45,212,191,.6); --gc-shadow: rgba(13,148,136,.6); }
.gc-baccarat-card  { --gc-bg: linear-gradient(158deg, #818cf8 0%, #4338ca 54%, #1e1b4b 100%); --gc-line: rgba(129,140,248,.6); --gc-shadow: rgba(67,56,202,.6); }
.gc-hilo-card      { --gc-bg: linear-gradient(158deg, #a3e635 0%, #4d7c0f 54%, #1a2e05 100%); --gc-line: rgba(163,230,53,.6); --gc-shadow: rgba(77,124,15,.6); }
.gc-blackjack-card { --gc-bg: linear-gradient(158deg, #4b5563 0%, #1f2937 54%, #0b0f16 100%); --gc-line: rgba(244,200,105,.55); --gc-shadow: rgba(0,0,0,.6); }

/* SLOT */
.slots-machine { display: flex; gap: .6rem; justify-content: center; margin: 1.1rem auto .7rem; padding: .8rem; width: min(320px,88vw); background: linear-gradient(160deg,#1a1024,#0f0a17); border: 1px solid var(--line-2); border-radius: 16px; }
.slots-reel { flex: 1; height: 90px; border-radius: 12px; background: #241733; border: 1px solid rgba(232,121,249,.3); overflow: hidden; display: grid; place-items: center; }
.slots-sym { font-size: 2.6rem; line-height: 1; }
.slots-reel.spin .slots-sym { animation: slotSpin .12s linear infinite; }
.slots-reel.win { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,.5), 0 0 18px -4px rgba(74,222,128,.6); }
@keyframes slotSpin { 0% { transform: translateY(-45%); opacity: .35; } 50% { opacity: 1; } 100% { transform: translateY(45%); opacity: .35; } }

/* DIAMONDS */
.diamonds-row { display: flex; gap: .55rem; justify-content: center; margin: 1.5rem auto .9rem; }
.gem { font-size: 2.7rem; line-height: 1; color: #fff; transition: transform .2s, color .2s, opacity .2s; }
.gem.gem-empty { color: rgba(255,255,255,.14); }
.gem.gem-pop { animation: gemPop .3s ease; }
@keyframes gemPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }

/* BACCARAT */
.bacc-table { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem auto .7rem; flex-wrap: wrap; }
.bacc-side { text-align: center; min-width: 108px; }
.bacc-label { font-size: .8rem; font-weight: 800; color: var(--muted); margin-bottom: .4rem; letter-spacing: .04em; }
.bacc-cards { display: flex; gap: .35rem; justify-content: center; min-height: 56px; }
.bacc-card { width: 38px; height: 54px; border-radius: 7px; background: #f7f4ea; color: #14100a; font-weight: 900; font-size: 1.1rem; display: grid; place-items: center; box-shadow: 0 4px 10px -3px rgba(0,0,0,.5); animation: gemPop .25s ease; }
.bacc-total { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: #fff; margin-top: .35rem; }
.bacc-vs { font-size: .8rem; font-weight: 900; color: var(--muted); opacity: .7; }
.bacc-bets { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .5rem; }
.bbet { padding: .55rem 1rem; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; cursor: pointer; font-size: .85rem; transition: border-color .15s, background .15s, color .15s; }
.bbet.active { border-color: #818cf8; background: rgba(129,140,248,.16); color: #c7d2fe; }

/* HI-LO */
.hilo-card { width: 92px; height: 128px; margin: 1rem auto .6rem; border-radius: 14px; background: #f7f4ea; color: #14100a; font-family: var(--font-display); font-size: 3rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(0,0,0,.6); transition: box-shadow .2s; }
.hilo-card.win { box-shadow: 0 0 0 3px rgba(74,222,128,.6), 0 10px 26px -8px rgba(74,222,128,.5); animation: gemPop .3s ease; }
.hilo-card.lose { box-shadow: 0 0 0 3px rgba(244,63,94,.55); animation: gemPop .3s ease; }
.hilo-stat { text-align: center; font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }
.hilo-stat b { color: #a3e635; font-size: 1.05rem; }
.hilo-guess { display: flex; gap: .6rem; justify-content: center; margin-bottom: .6rem; }
.hilo-guess[hidden] { display: none !important; }
.hilo-btn { flex: 1; max-width: 165px; line-height: 1.25; font-size: .82rem; }

/* BLACKJACK */
.bj-area { display: flex; flex-direction: column; gap: 1rem; margin: 1rem auto .7rem; width: min(340px,90vw); }
.bj-row { text-align: center; }
.bj-label { font-size: .8rem; font-weight: 800; color: var(--muted); margin-bottom: .4rem; }
.bj-cards { display: flex; gap: .35rem; justify-content: center; min-height: 58px; flex-wrap: wrap; }
.bj-card { width: 40px; height: 56px; border-radius: 7px; background: #f7f4ea; color: #14100a; font-weight: 900; font-size: 1.15rem; display: grid; place-items: center; box-shadow: 0 4px 10px -3px rgba(0,0,0,.5); animation: gemPop .22s ease; }
.bj-card.ace { color: #b8860b; }
.bj-card-back { background: repeating-linear-gradient(45deg,#3730a3,#3730a3 5px,#4338ca 5px,#4338ca 10px); color: rgba(255,255,255,.7); }
.bj-actions { display: flex; gap: .6rem; justify-content: center; margin-bottom: .5rem; }
.bj-actions[hidden] { display: none !important; }

/* ===== STAKE-TARZI OYUN LAYOUT — sol kontrol rayı + sağ büyük sahne ===== */
#gamesPlay { display: block !important; width: 100%; max-width: 1120px; margin: 0 auto; }
.gp-shell { display: grid; grid-template-columns: 300px 1fr; gap: 1.1rem; width: 100%; align-items: stretch; }
.gp-rail { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)); border: 1px solid var(--line-2); border-radius: 18px; padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; align-self: start; }
.gp-rail-title { font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gp-rail .bet-chips { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: 0 !important; }
.gp-rail .game-bet-row { margin: 0 !important; }
.gp-stage-wrap { position: relative; border: 1px solid var(--line-2); border-radius: 18px; background: radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,.04), transparent 55%), linear-gradient(180deg, #0d1017, #0a0c12); min-height: 520px; padding: 1.8rem 1.4rem; display: grid; place-items: center; overflow: hidden; }
.gp-stage-wrap .game-panel { width: 100%; max-width: 660px; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 0; }
.gp-stage-wrap .game-panel[hidden] { display: none !important; }
.gp-stage-wrap .btn-lg { min-width: 220px; font-size: 1.05rem; padding: .95rem 1.6rem; }
/* kartları/taşları Stake gibi büyüt */
.gp-stage-wrap .bacc-card, .gp-stage-wrap .bj-card { width: 62px; height: 88px; font-size: 1.8rem; border-radius: 10px; }
.gp-stage-wrap .bacc-cards, .gp-stage-wrap .bj-cards { min-height: 92px; gap: .5rem; }
.gp-stage-wrap .bacc-total { font-size: 2.2rem; }
.gp-stage-wrap .bacc-table { gap: 2rem; }
.gp-stage-wrap .hilo-card { width: 138px; height: 190px; font-size: 4.6rem; }
.gp-stage-wrap .gem { font-size: 3.8rem; }
.gp-stage-wrap .diamonds-row { gap: .9rem; }
.gp-stage-wrap .bwheel-stage { width: min(430px, 46vw); height: min(430px, 46vw); }
.gp-stage-wrap .slots-machine { width: min(440px, 66%); }
.gp-stage-wrap .slots-reel { height: 124px; }
.gp-stage-wrap .slots-sym { font-size: 3.6rem; }
.gp-stage-wrap .dragon-tower { width: min(380px, 72%); }
.gp-stage-wrap .dragon-tile { height: 52px; }
.gp-stage-wrap .limbo-display { font-size: 4.6rem; }
.gp-stage-wrap .flip-coin { width: 150px; height: 150px; font-size: 3.8rem; }
.gp-stage-wrap .roulette-result { font-size: 3.4rem; }
@media (max-width: 760px) {
  .gp-shell { grid-template-columns: 1fr; }
  .gp-stage-wrap { min-height: 400px; padding: 1.1rem; }
  .gp-stage-wrap .bwheel-stage { width: min(360px, 80vw); height: min(360px, 80vw); }
}

/* ===== ANA SAYFA CANLI ÖNİZLEMELER (nakit ödül / oyun / liderlik) ===== */
.home-previews { margin-top: 1.6rem; }
.hp-cash { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .7rem; margin-bottom: 1.5rem; }
.hp-cash-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1rem .7rem; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.14)); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.hp-cash-card:hover { transform: translateY(-3px); border-color: rgba(244,200,105,.55); box-shadow: 0 14px 30px -14px rgba(244,200,105,.35); }
.hp-cash-ic { font-size: 2rem; line-height: 1; }
.hp-cash-name { font-weight: 800; font-size: .92rem; color: var(--text); }
.hp-cash-price { font-size: .82rem; font-weight: 800; color: #f4c869; }
.hp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 560px) { .hp-games { gap: .5rem; } }