/* Site yazı tipi head.php üzerinden yüklenir */

:root {
  --primary-rgb: 0, 191, 255;
  --primary-accent-rgb: 0, 212, 255;
  --primary: rgb(var(--primary-rgb));
  --primary-accent: rgb(var(--primary-accent-rgb));
  --accent-rgb: var(--primary-rgb);
  --theme-btn-shadow: rgba(var(--primary-rgb), 0.35);
  --theme-btn-shadow-hover: rgba(var(--primary-rgb), 0.45);
  --theme-line-gradient: linear-gradient(to bottom, var(--primary-accent), color-mix(in srgb, var(--primary) 72%, #000 28%));
  --theme-scrollbar-thumb: linear-gradient(180deg, rgba(var(--primary-accent-rgb), 0.78) 0%, rgba(var(--primary-rgb), 0.58) 100%);
  --theme-scrollbar-thumb-hover: linear-gradient(180deg, rgba(0, 235, 255, 0.92) 0%, rgba(0, 170, 255, 0.72) 100%);
  --game-accent: var(--primary-accent);
  --game-accent-soft: rgba(var(--primary-accent-rgb), 0.42);
  --bg-dark-rgb: 5, 10, 18;
  --bg-dark: rgb(var(--bg-dark-rgb));
  --surface-rgb: 6, 12, 22;
  --surface-deep-rgb: 4, 7, 13;
  --shell-rgb: 5, 8, 14;
  --shell-mob-rgb: 3, 5, 10;
  --surface-raised-rgb: 10, 21, 37;
  --grad-light-rgb: 16, 30, 50;
  --grad-mid-rgb: 10, 20, 36;
  --grad-dark-rgb: 6, 13, 24;
  --mob-menu-rgb: 8, 12, 22;
  --theme-shell-opacity: 0.22;
  --theme-topbar-bg: rgba(var(--shell-rgb), 0.18);
  --theme-topbar-bg-mobile: rgba(var(--shell-mob-rgb), var(--theme-shell-opacity));
  --theme-sidebar-bg: rgba(var(--surface-deep-rgb), var(--theme-shell-opacity));
  --theme-action-bar-bg-mobile: rgba(var(--surface-deep-rgb), var(--theme-shell-opacity));
  --theme-bottom-bar-bg: rgba(var(--shell-rgb), var(--theme-shell-opacity));
  --theme-mob-menu-bg: rgba(var(--mob-menu-rgb), var(--theme-shell-opacity));
  --theme-scrollbar-track: rgba(var(--bg-dark-rgb), 0.88);
  --theme-surface-gradient: linear-gradient(168deg, rgb(var(--grad-light-rgb)) 0%, rgb(var(--grad-mid-rgb)) 42%, rgb(var(--grad-dark-rgb)) 100%);
  --text: #e8f4ff;
  --text-muted: #6a8aaa;
  --topbar-h: 86px;
  --topbar-h-mobile: 58px;
  --action-bar-h: 50px;
  --action-bar-h-mobile: 48px;
  --hero-banner-ratio: 2500 / 545;
}

* { margin:0; padding:0; box-sizing:border-box; }

html,body {
  font-family:var(--site-font-family, 'Sora', sans-serif);
  background:var(--bg-dark);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--primary-rgb), .55) var(--theme-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width:10px;
  height:10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background:var(--theme-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background:var(--theme-scrollbar-thumb);
  border-radius:999px;
  border:2px solid var(--theme-scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background:var(--theme-scrollbar-thumb-hover);
}

/* ?????? PRELOADER ??????????????????????????????????????????????????????????????????????????????????????? */
#preloader {
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
}
#preloader-logo {
  width:min(72vw,400px); height:auto;
  animation: logoSlam .35s cubic-bezier(.15,1.4,.4,1) forwards;
}
@keyframes logoSlam {
  0%   { opacity:0; transform:scale(2.4); }
  100% { opacity:1; transform:scale(1); }
}
#preloader.hidden {
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}

/* ?????? TOPBAR ???????????????????????????????????????????????????????????????????????????????????????????????? */
#topbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  z-index:100;
  overflow:visible;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  background:var(--theme-topbar-bg);
  border-bottom:1px solid rgba(0,0,0,0.75);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
  gap:12px;
}

.action-bar-tools--mob { display:none; }

@media (max-width:900px) {
  #topbar {
    height:var(--topbar-h-mobile);
    padding:0 14px;
    gap:10px;
    background:var(--theme-topbar-bg-mobile);
    border-bottom:1px solid rgba(0,0,0,0.85);
    overflow:visible;
    align-items:center;
  }

  .logo-wrap {
    flex:1;
    min-width:0;
    justify-content:flex-start;
  }
  .logo-wrap img { height:76px; }
  .logo-glow {
    display:block;
    inset:-8px -12px;
  }

  .topbar-right {
    flex:0 0 auto;
    gap:8px;
    max-width:none;
    min-width:0;
  }

  .topbar-desktop-only { display:none !important; }

  .topbar-auth-btns {
    display:flex;
    flex-wrap:nowrap;
    gap:0;
    min-width:0;
  }
  .topbar-auth-btns .auth-btn--combined {
    font-size:11px;
    padding:7px 14px;
    border-radius:9px;
    white-space:nowrap;
  }

  .page-layout { padding-top:var(--topbar-h-mobile); }
}

/* ?????? LOGO ?????????????????????????????????????????????????????????????????????????????????????????????????????? */
.logo-wrap {
  position:relative; display:flex; align-items:center;
  cursor:pointer; flex-shrink:0;
}
.logo-glow {
  position:absolute; inset:-12px -18px;
  background:radial-gradient(ellipse at 50% 55%, rgba(255,255,255,0.10) 0%, transparent 66%);
  border-radius:20px; pointer-events:none;
}
.logo-wrap img {
  height:130px; width:auto; position:relative; z-index:1; display:block;
  animation:logoFlash 13s infinite;
}
@keyframes logoFlash {
  0%,93%,100%  { opacity:1; }
  93.6%        { opacity:0; }
  94.2%        { opacity:1; }
  94.8%        { opacity:0; }
  95.4%        { opacity:1; }
  96%          { opacity:0; }
  96.6%        { opacity:1; }
}

/* ?????? RIGHT ??????????????????????????????????????????????????????????????????????????????????????????????????? */
.topbar-right { display:flex; align-items:center; gap:10px; }

.topbar-music-wrap {
  position:relative;
  z-index:130;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.topbar-music-hint {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:calc(100% + 8px);
  max-width:min(168px,42vw);
  padding:7px 12px;
  border-radius:12px;
  text-align:center;
  pointer-events:none;
  background:rgba(5,10,22,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 24px rgba(0,200,255,.14),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation:topbarMusicHintGlow 3s ease-in-out infinite;
}

/* Ses butonuna ???dropdown??? gibi ba??layan k??????k ok */
.topbar-music-hint::before {
  content:'';
  position:absolute;
  left:50%;
  bottom:100%;
  transform:translate(-50%,1px);
  border:7px solid transparent;
  border-bottom-color:rgba(5,10,22,.88);
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.08));
  pointer-events:none;
}

.topbar-music-hint__label {
  display:block;
  font-size:9px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:none;
  background:linear-gradient(
    95deg,
    #ff5ec8 0%,
    var(--primary-accent) 22%,
    #c4f649 44%,
    #ffb020 66%,
    #b388ff 88%,
    #ff5ec8 100%
  );
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:topbarMusicHintShimmer 5.5s linear infinite;
}

.topbar-music-hint[hidden] {
  display:none !important;
}

@keyframes topbarMusicHintGlow {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(0,0,0,.45),
      0 0 20px rgba(0,200,255,.12),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
  50% {
    box-shadow:
      0 8px 22px rgba(0,0,0,.5),
      0 0 32px rgba(var(--primary-accent-rgb),.28),
      inset 0 1px 0 rgba(255,255,255,.1);
  }
}

@keyframes topbarMusicHintShimmer {
  0% { background-position:0% 50%; }
  100% { background-position:100% 50%; }
}

.topbar-music-btn {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  padding:0; border-radius:10px; cursor:pointer;
  background:rgba(3,5,10,0.88);
  border:2px solid transparent;
  color:rgba(200,220,255,.9);
  transition:transform .15s ease, color .2s ease;
  background-image:
    linear-gradient(rgba(4,8,14,.94), rgba(4,8,14,.94)),
    linear-gradient(120deg, #ff00aa, var(--primary-accent), #a8ff00, #ff6b00, #b366ff, #ff00aa);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 260% 260%;
  animation: topbarMusicRgb 4s linear infinite;
}
@keyframes topbarMusicRgb {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 100% 50%; }
}
.topbar-music-btn:hover {
  transform:scale(1.06);
  color:#fff;
}
.topbar-music-btn--playing {
  color:#e8ffff;
  box-shadow:0 0 18px rgba(var(--primary-accent-rgb),.45), 0 0 28px rgba(255,0,170,.2);
}
.topbar-music-ico { display:flex; align-items:center; justify-content:center; }
.topbar-music-ico svg { width:20px; height:20px; }
.topbar-music-btn .topbar-music-ico--on { display:none; }
.topbar-music-btn .topbar-music-ico--off { display:flex; }
.topbar-music-btn--playing .topbar-music-ico--on { display:flex; }
.topbar-music-btn--playing .topbar-music-ico--off { display:none; }

/* ?? TOPBAR TELEGRAM ?? */
.topbar-telegram-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:10px;
  text-decoration:none;
  background:rgba(3,5,10,0.88);
  border:1px solid rgba(0,0,0,0.9);
  color:#26a5e4;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
}

.topbar-telegram-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(38,165,228,0.18) 0%, transparent 70%);
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}

.topbar-telegram-btn svg {
  width:20px;
  height:20px;
  position:relative;
  z-index:1;
}

.topbar-telegram-btn:hover {
  transform:scale(1.06);
  background:rgba(38,165,228,.15);
  box-shadow:0 0 12px rgba(38,165,228,.25);
}

.topbar-telegram-btn:hover::before {
  opacity:1;
}

/* ?? COIN ?? */
.coin-badge {
  display:flex; align-items:center; gap:5px;
  position:relative; overflow:hidden;
  background:rgba(3,5,10,0.88);
  border:1px solid rgba(0,0,0,0.9);
  border-radius:9px;
  padding:6px 12px;
  cursor:default;
  transition:background .25s;
}
.coin-badge::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.07) 0%, transparent 68%);
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.coin-badge:hover::before { opacity:1; }
.coin-icon {
  display:inline-block;
  vertical-align:middle;
  width:1em;
  height:1em;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 0 3px rgba(var(--primary-rgb),.5));
}
.coin-amount { font-size:13px; font-weight:600; color:var(--text); letter-spacing:.03em; }

/* ?????? AVATAR MENU ????????????????????????????????????????????????????????????????????????????????? */
.avatar-menu { position:relative; }
.avatar-btn {
  display:flex; align-items:center; gap:8px;
  position:relative; overflow:hidden;
  background:rgba(3,5,10,0.88);
  border:1px solid rgba(0,0,0,0.9);
  border-radius:9px;
  padding:5px 10px 5px 5px;
  cursor:pointer;
  color:var(--text);
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px; font-weight:500; letter-spacing:.01em;
  transition:background .25s;
}
.avatar-btn::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.07) 0%, transparent 68%);
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.avatar-btn:hover::before { opacity:1; }

.avatar-circle {
  width:30px; height:30px; border-radius:50%;
  background:var(--theme-btn-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  flex-shrink:0; position:relative; z-index:1;
  overflow:hidden;
}
.avatar-circle img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.avatar-name {
  max-width:88px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  position:relative; z-index:1;
  display:block;
  font-weight:700;
  font-size:13px;
  line-height:1.2;
}
.avatar-meta {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  min-width:0;
  position:relative;
  z-index:1;
}
.avatar-rank {
  font-size:11px;
  font-weight:700;
  color:#f5c542;
  letter-spacing:.02em;
  line-height:1.2;
}
.avatar-chevron {
  width:13px; height:13px; color:var(--text-muted);
  transition:transform .2s; flex-shrink:0; position:relative; z-index:1;
}
.avatar-menu.open .avatar-chevron { transform:rotate(180deg); }

/* ?????? DROPDOWN ?????????????????????????????????????????????????????????????????????????????????????????? */
.dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:156px;
  background:rgba(var(--bg-dark-rgb),0.97);
  backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,0.9);
  border-radius:10px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.65);
  opacity:0; transform:translateY(-6px) scale(.97);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.avatar-menu.open .dropdown { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }

.dropdown a {
  display:flex; align-items:center; gap:9px;
  padding:11px 15px;
  font-size:13px; font-weight:500;
  color:var(--text); text-decoration:none;
  cursor:pointer; border:none; background:none; width:100%;
  font-family:var(--site-font-family, 'Sora', sans-serif); letter-spacing:.01em;
  transition:background .15s, color .15s;
}
.dropdown a svg { flex-shrink:0; opacity:.6; transition:opacity .15s; }
.dropdown a:hover { background:rgba(255,255,255,.05); color:#fff; }
.dropdown a:hover svg { opacity:1; }
.dropdown a.danger:hover { background:rgba(255,55,55,.1); color:#ff6060; }
.dropdown-divider { height:1px; background:rgba(255,255,255,.05); margin:2px 0; }
.dropdown-form { margin:0; padding:0; }
.dropdown-logout {
  display:flex; align-items:center; gap:9px;
  width:100%; padding:11px 15px;
  font-size:13px; font-weight:500;
  color:#ff8a8a; text-align:left;
  cursor:pointer; border:none; background:none;
  font-family:var(--site-font-family, 'Sora', sans-serif); letter-spacing:.01em;
  transition:background .15s, color .15s;
}
.dropdown-logout svg { flex-shrink:0; opacity:.6; }
.dropdown-logout:hover { background:rgba(255,55,55,.1); color:#ff6060; }

.topbar-auth-btns { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.auth-btn--market {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  background:rgba(var(--mob-menu-rgb),0.92);
  border:1px solid rgba(245,158,11,0.38);
  box-shadow:0 4px 18px rgba(245,158,11,0.18);
  padding:7px 14px 7px 10px;
}
.auth-btn--market:hover {
  background:rgba(12,18,32,0.96);
  box-shadow:0 6px 22px rgba(245,158,11,0.28);
}
.auth-btn-market-icon {
  width:26px;
  height:26px;
  object-fit:contain;
  flex-shrink:0;
}
.auth-btn-market-label {
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font-weight:700;
  line-height:1;
}
.auth-btn-market-puan { color:#fff; }
.auth-btn-market-m { color:#f59e0b; }

/* ?? ACTION BAR (topbar alt?, sidebar sa??) ?? */
.action-bar {
  position:fixed;
  top:var(--topbar-h);
  left:var(--sb-w);
  right:0;
  height:var(--action-bar-h);
  z-index:95;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  background:rgba(var(--shell-rgb),0.42);
  border-bottom:1px solid rgba(0,0,0,0.75);
  box-shadow:
    inset 3px 0 0 rgba(255,176,32,0.55),
    inset 0 1px 0 rgba(255,176,32,0.06);
}
.action-bar::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,176,32,0.07) 0%, rgba(var(--primary-rgb),0.04) 45%, transparent 70%);
  pointer-events:none;
}
.action-bar-inner {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:100%;
  padding:0 24px 0 20px;
}
.action-bar-alert {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.action-bar-alert-icon {
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:rgba(255,176,32,0.12);
  border:1px solid rgba(255,176,32,0.28);
  color:#ffc84d;
}
.action-bar-alert-icon svg { width:15px; height:15px; }
.action-bar-alert-text,
.action-bar-alert-text--full,
.action-bar-alert-text--mob {
  font-size:12px;
  font-weight:600;
  color:rgba(232,244,255,0.82);
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.action-bar-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.action-bar-wheel-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:none;
  border-radius:9px;
  cursor:pointer;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  box-shadow:0 6px 22px rgba(245,158,11,.28);
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.action-bar-wheel-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 26px rgba(245,158,11,.38);
}
.action-bar-btn-icon {
  width:24px;
  height:24px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
.action-bar-btn-icon--wheel {
  animation:actionBarWheelSpin 10s linear infinite;
}
@keyframes actionBarWheelSpin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
.action-bar-code-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:none;
  border-radius:9px;
  cursor:pointer;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  background:var(--theme-btn-gradient);
  box-shadow:0 6px 22px var(--theme-btn-shadow);
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.action-bar-code-btn svg { width:16px; height:16px; flex-shrink:0; }
.action-bar-code-btn .action-bar-btn-icon { width:24px; height:24px; }
.action-bar-code-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 26px var(--theme-btn-shadow-hover);
}

/* Mobil alt bar ? base kurallardan sonra (left override i?in) */
@media (max-width:900px) {
  .action-bar {
    top:var(--topbar-h-mobile);
    left:0;
    right:0;
    width:100%;
    height:var(--action-bar-h-mobile);
    z-index:99;
    background:var(--theme-action-bar-bg-mobile);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(0,0,0,0.85);
    box-shadow:none;
  }
  .action-bar::before { display:none; }

  .action-bar-inner {
    padding:0 12px;
    gap:0;
    justify-content:center;
  }

  .action-bar-alert--desktop,
  .action-bar-actions--desktop { display:none !important; }

  .action-bar-tools--mob {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .action-bar-tools--mob::-webkit-scrollbar { display:none; }

  .action-icon-btn {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    padding:6px;
    border-radius:13px;
    background:
      radial-gradient(ellipse 80% 70% at 50% 0%, rgba(var(--primary-accent-rgb),0.18) 0%, transparent 65%),
      rgba(var(--surface-deep-rgb),0.92);
    border:1px solid rgba(var(--primary-rgb),0.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 8px 20px rgba(0,0,0,0.35),
      0 0 0 1px rgba(0,0,0,0.65);
    cursor:pointer;
    text-decoration:none;
    color:rgba(200,220,255,0.95);
    overflow:hidden;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .action-icon-btn::before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:conic-gradient(from 0deg, transparent, rgba(var(--primary-accent-rgb),0.75), transparent 55%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
  }
  .action-icon-btn:hover,
  .action-icon-btn:active {
    transform:translateY(-2px) scale(1.04);
    border-color:rgba(var(--primary-accent-rgb),0.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 12px 26px rgba(0,0,0,0.42),
      0 0 22px rgba(var(--primary-rgb),0.22);
  }
  .action-icon-btn:hover::before,
  .action-icon-btn:active::before {
    opacity:1;
  }

  .action-icon-btn svg { width:20px; height:20px; filter:drop-shadow(0 0 6px rgba(var(--primary-accent-rgb),0.35)); }
  .action-icon-btn--tg { color:#26a5e4; }

  .action-icon-btn .action-icon-img,
  .action-icon-btn img {
    width:28px;
    height:28px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  }
  .action-icon-img--spin {
    animation:actionBarWheelSpin 8s linear infinite;
  }
}

@media (max-width:640px) {
  :root {
    --topbar-h-mobile: 56px;
    --action-bar-h-mobile: 46px;
  }
  #topbar { padding:0 12px; gap:8px; }
  .logo-wrap img { height:68px; }
  .topbar-auth-btns .auth-btn--combined {
    font-size:10px;
    padding:6px 12px;
  }
  .action-bar-inner { padding:0 10px; }
  .action-bar-tools--mob { gap:7px; }
  .action-icon-btn { width:38px; height:38px; border-radius:9px; }
  .action-icon-btn svg { width:17px; height:17px; }
  .action-icon-btn .action-icon-img,
  .action-icon-btn img { width:24px; height:24px; }

  .coin-badge { padding:5px 9px; border-radius:8px; gap:4px; }
  .coin-amount { font-size:12px; }
  .avatar-btn { padding:5px; border-radius:8px; gap:0; }
  .avatar-meta, .avatar-chevron { display:none; }
  .avatar-circle { width:30px; height:30px; }
  .content { padding-top:calc(var(--topbar-h-mobile) + var(--action-bar-h-mobile) + 16px); padding-inline:16px; }
  .page-layout { padding-top:var(--topbar-h-mobile); }
}

@media (max-width:380px) {
  .topbar-auth-btns .auth-btn--combined {
    font-size:9px;
    padding:5px 10px;
  }
  .logo-wrap img { height:60px; }
  .action-icon-btn { width:36px; height:36px; }
  .action-icon-btn .action-icon-img,
  .action-icon-btn img { width:22px; height:22px; }
}

.auth-btn-ghost {
  background:var(--theme-btn-gradient);
  border:none;
  outline:none;
  color:#fff;
  box-shadow:0 6px 22px var(--theme-btn-shadow);
}
.auth-btn-ghost:hover {
  background:var(--theme-btn-gradient);
  box-shadow:0 6px 22px var(--theme-btn-shadow);
}

/* ?????? SITE BG ????????????????????????????????????????????????????????????????????????????????????????????? */
.site-bg {
  position:fixed; inset:0; z-index:0;
  background-image:var(--site-bg-image, url('../bg.png'));
  background-size:cover; background-position:center;
  opacity:var(--site-bg-opacity, .18); pointer-events:none;
}

/* ?????? CONTENT ????????????????????????????????????????????????????????????????????????????????????????????? */
.content {
  position:relative; z-index:1;
  padding-top:calc(var(--topbar-h) + 32px);
  padding-inline:32px;
}

/* PAGE LAYOUT
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.page-layout {
  display:flex;
  padding-top:var(--topbar-h);
  min-height:100vh;
  position:relative;
  z-index:1;
  width:100%;
  max-width:100vw;
  overflow-x:clip;
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   SIDEBAR
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
:root { --sb-w: 334px; }

#sidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  z-index: 90;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--theme-sidebar-bg);
  border-right: 1px solid rgba(0, 0, 0, 0.85);
  padding: 12px 0 28px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sb-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 14px;
}

.sb-action-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 14px 12px 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 13px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  background:
    radial-gradient(ellipse 90% 80% at 100% 100%, rgba(var(--primary-accent-rgb), 0.14) 0%, transparent 62%),
    rgba(var(--surface-deep-rgb), 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.sb-action-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--primary-accent-rgb), 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.32);
}

.sb-action-tile__deco {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 92px;
  height: 92px;
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}

.sb-action-tile__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sb-action-tile__labels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.08;
  max-width: calc(100% - 36px);
}

.sb-action-tile__main {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(235, 244, 255, 0.92);
}

.sb-action-tile--daily .sb-action-tile__accent {
  color: var(--primary-accent);
}

.sb-action-tile--code .sb-action-tile__accent {
  color: var(--primary);
}

.sb-action-tile__accent {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.sb-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.7);
  transition: transform 0.2s, box-shadow 0.2s;
}

.sb-banner--card {
  position: relative;
  z-index: 0;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 8px 12px;
  min-height: 108px;
  overflow: visible;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 58, 110, 0.98) 0%, rgba(8, 32, 72, 0.98) 100%);
  border: 1px solid rgba(0, 80, 160, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease;
}

.sb-banner--card::before,
.mob-banner--card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  filter: blur(10px);
  background: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.28);
}

.sb-banner--card:hover::before,
.mob-banner--card:hover::before {
  opacity: 0.85;
  filter: blur(12px);
  box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.4);
}

.sb-banner-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sb-banner-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  line-height: 1.05;
}

.sb-banner-word {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sb-banner-word--white {
  color: #fff;
}

.sb-banner-word--accent {
  color: #38bdf8;
}

.sb-banner--gold {
  background: linear-gradient(145deg, rgba(255, 176, 32, 0.22), rgba(120, 70, 5, 0.35));
}

.sb-banner--cyan {
  background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.2), rgba(0, 80, 140, 0.35));
}

.sb-banner-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 10px 8px;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.sb-banner-text--orange {
  color: #f59e0b;
  padding: 0;
  text-shadow: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.sb-banner--card:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sb-banner:hover:not(.sb-banner--card) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

button.sb-banner.sb-banner--action {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: inherit;
  cursor: pointer;
}

button.sb-banner.sb-banner--action.sb-banner--card {
  background: linear-gradient(180deg, rgba(18, 58, 110, 0.98) 0%, rgba(8, 32, 72, 0.98) 100%);
}

.sb-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(100, 140, 175, 0.6);
  padding: 14px 16px 6px;
}

.sb-nav {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  gap: 3px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(180, 205, 230, 0.75);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.18s, background 0.18s;
}

.sb-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(var(--primary-rgb), 0.09) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}

.sb-item:hover {
  color: #e8f4ff;
  background: rgba(var(--primary-rgb), 0.08);
}

.sb-item:hover::before { opacity: 1; }

.sb-item.active {
  color: var(--primary-accent);
  background: rgba(var(--primary-rgb), 0.13);
  font-weight: 600;
}

.sb-item.active::before { opacity: 1; }

.sb-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--theme-line-gradient);
  border-radius: 0 3px 3px 0;
}

.sb-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.18s;
}

.sb-icon svg { width: 17px; height: 17px; }

.sb-item:hover .sb-icon,
.sb-item.active .sb-icon { opacity: 1; }

.sb-item.danger-item { color: rgba(255, 100, 100, 0.7); }

.sb-item.danger-item:hover {
  color: #ff6060;
  background: rgba(255, 55, 55, 0.08);
}

.sb-logout-form { margin: 0; padding: 0; width: 100%; display: block; }

.sb-logout-btn {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.sb-social {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 6px 12px 0;
  justify-content: space-between;
}

.sb-social-btn {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 32, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.sb-social-btn svg {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s;
}

.social-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.2s;
}

.social-brand-icon svg,
.social-brand-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.verify-icon .social-brand-icon {
  width: 24px;
  height: 24px;
}

.task-platform-icon .social-brand-icon {
  width: 24px;
  height: 24px;
}

.sb-social-btn:hover .social-brand-icon {
  transform: scale(1.1);
}

.sb-social-btn[title="Telegram"] { color: #26a5e4; }
.sb-social-btn[title="Telegram"]:hover {
  background: rgba(38, 165, 228, 0.15);
  box-shadow: 0 0 12px rgba(38, 165, 228, 0.25);
}

.sb-social-btn[title="Discord"] { color: #5865f2; }
.sb-social-btn[title="Discord"]:hover { background: rgba(88, 101, 242, 0.15); box-shadow: 0 0 12px rgba(88, 101, 242, 0.25); }
.sb-social-btn[title="Kick"] { color: #53fc18; }
.sb-social-btn[title="Kick"]:hover { background: rgba(83, 252, 24, 0.12); box-shadow: 0 0 12px rgba(83, 252, 24, 0.2); }
.sb-social-btn[title="Instagram"] { color: #e1306c; }
.sb-social-btn[title="Instagram"]:hover { background: rgba(225, 48, 108, 0.15); box-shadow: 0 0 12px rgba(225, 48, 108, 0.25); }
.sb-social-btn[title="YouTube"] { color: #ff0000; }
.sb-social-btn[title="YouTube"]:hover { background: rgba(255, 0, 0, 0.12); box-shadow: 0 0 12px rgba(255, 0, 0, 0.2); }
.sb-social-btn[title="Twitch"] { color: #9146ff; }
.sb-social-btn[title="Twitch"]:hover { background: rgba(145, 70, 255, 0.15); box-shadow: 0 0 12px rgba(145, 70, 255, 0.25); }

.sb-social-btn:hover { transform: translateY(-2px); }
.sb-social-btn:hover svg,
.sb-social-btn:hover .social-brand-icon { transform: scale(1.1); }

/* ?????? MAIN CONTENT ????????????????????????????????????????????????????????????????????????????????? */
.main-content {
  margin-left:var(--sb-w);
  flex:1;
  padding:32px;
  padding-top:calc(var(--action-bar-h) + 32px);
  min-height:calc(100vh - var(--topbar-h) - var(--action-bar-h));
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.site-flash-banner {
  margin:0 0 16px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:#b8ecff;
  font-size:13px;
  font-weight:600;
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   BOTTOM TAB BAR (sadece mobil)
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.bottom-bar {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:300;
  height:68px;
  background:var(--theme-bottom-bar-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(0,0,0,0.9);
  align-items:center;
  justify-content:space-around;
  padding:0 4px;
}

.bb-tab {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  flex:1;
  padding:8px 4px;
  cursor:pointer;
  border:none;
  background:none;
  color:rgba(160,190,220,.5);
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  transition:color .2s;
  text-decoration:none;
  position:relative;
}

.bb-tab svg { width:20px; height:20px; transition:transform .2s; }
.bb-tab:hover, .bb-tab.active { color:#e8f4ff; }
.bb-tab:hover svg { transform:translateY(-1px); }

/* Men?? butonu ??? mavi vurgulu, ortada b??y??k */
.bb-tab.menu-btn {
  color:#fff;
}
.bb-menu-icon {
  width:46px; height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary-accent) 0%, color-mix(in srgb, var(--primary) 52%, #000 48%) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,153,221,.4);
  transition:transform .2s, box-shadow .2s;
}
.bb-tab.menu-btn:hover .bb-menu-icon {
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(0,180,255,.5);
}
.bb-tab.menu-btn svg { width:22px; height:22px; color:#fff; }

@media (max-width:900px) {
  /* Sadece men?? butonu ??? hafif yukar?? */
  .bb-tab.menu-btn {
    transform:translateY(-10px);
    padding-bottom:2px;
  }
  .bb-tab.menu-btn:hover .bb-menu-icon {
    transform:translateY(-2px);
  }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   MOB?L MEN?? MODAL (merkez)
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.mob-overlay {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.mob-overlay.show { opacity:1; pointer-events:all; touch-action:none; }

.mob-menu {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  transform:translateY(105%);
  z-index:410;
  width:100%;
  max-width:100%;
  max-height:min(88dvh, 760px);
  height:auto;
  min-height:0;
  border-radius:20px 20px 0 0;
  background:var(--theme-mob-menu-bg);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  box-shadow:0 -12px 48px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease, transform .34s cubic-bezier(.32,.72,.24,1);
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.mob-menu.show {
  opacity:1;
  pointer-events:all;
  transform:translateY(0);
}

.mob-sheet-top {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px 4px;
  flex-shrink:0;
}

.mob-sheet-handle {
  width:42px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.mob-close--sheet {
  position:absolute;
  right:10px;
  top:6px;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(220,235,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

.mob-close--sheet svg {
  width:18px;
  height:18px;
}

.mob-close--sheet:active {
  background:rgba(var(--primary-rgb),.12);
  transform:scale(.96);
}

/* Modal ?st */
.mob-header {
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}

.mob-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.mob-topbar__actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.mob-user-chip {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}

.mob-user-chip__avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid rgba(var(--primary-rgb),.25);
}

.mob-user-chip__avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mob-user-chip__meta {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.mob-user-chip__name {
  font-size:12px;
  font-weight:700;
  color:#e8f4ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mob-user-chip__coin {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  color:#fbbf24;
}

.mob-auth-btn--compact {
  padding:7px 12px;
  font-size:11px;
  border-radius:8px;
}

.mob-header-tg--compact {
  width:34px;
  height:34px;
  border-radius:8px;
}

.mob-header-tg--compact svg {
  width:17px;
  height:17px;
}

.mob-close--compact {
  width:34px;
  height:34px;
  border-radius:8px;
}

.mob-quick-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.mob-quick-chip {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:38px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(0,120,200,.28);
  background:linear-gradient(180deg, rgba(12,36,68,.95), rgba(8,22,44,.98));
  color:#e8f4ff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
  -webkit-appearance:none;
  appearance:none;
}

.mob-quick-chip img {
  width:20px;
  height:20px;
  object-fit:contain;
  flex-shrink:0;
}

.mob-quick-chip:active {
  transform:scale(.98);
}

.mob-quick-chip--promo {
  border-color:rgba(0,200,120,.28);
}

.mob-shortcuts {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  padding:6px 12px 4px;
}

.mob-shortcut {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:58px;
  padding:8px 4px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:rgba(190,215,240,.85);
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mob-shortcut:active {
  transform:scale(.97);
  background:rgba(var(--primary-rgb),.1);
  border-color:rgba(var(--primary-rgb),.2);
}
.mob-shortcut.active {
  color:var(--primary-accent);
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.28);
}

.mob-shortcut__icon {
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
}

.mob-shortcut__icon svg {
  width:16px;
  height:16px;
  display:block;
}

.mob-shortcut__label {
  font-size:9px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mob-nav {
  padding:0 6px 4px;
}

.mob-label {
  flex:1;
  min-width:0;
  line-height:1.25;
}

.mob-item__chev {
  width:14px;
  height:14px;
  flex-shrink:0;
  opacity:.35;
  color:currentColor;
}

.mob-item__chev svg {
  width:14px;
  height:14px;
  display:block;
}

.mob-item--admin .mob-icon {
  color:#fbbf24;
}

.mob-item--admin.active {
  color:#fbbf24;
}

.mob-footer-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:8px 12px 2px;
  margin-top:4px;
}

.mob-footer-link {
  border:none;
  background:transparent;
  padding:0;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:11px;
  font-weight:600;
  color:rgba(160,195,230,.7);
  text-decoration:none;
  cursor:pointer;
}

.mob-footer-link--danger {
  color:rgba(255,120,120,.75);
}

.mob-social--compact {
  padding:0 12px 6px;
  gap:8px;
}

.mob-social--compact .mob-social-btn {
  width:auto;
  min-height:34px;
  padding:0 12px;
  gap:8px;
  border-radius:9px;
  font-size:11px;
  font-weight:700;
  flex-direction:row;
}

.mob-social--compact .mob-social-btn span {
  position:relative;
  z-index:1;
}

.mob-user-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.mob-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--theme-btn-gradient);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff;
  flex-shrink:0;
  overflow:hidden;
}
.mob-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.mob-user-row--guest { justify-content:space-between; align-items:flex-start; }
.mob-guest-actions { display:flex; flex-wrap:wrap; gap:8px; flex:1; align-items:center; }

/* Mobil men?? ??st?? ??? Telegram (topbar???da ta????nca burada da eri??ilebilir) */
.mob-header-tg {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:10px;
  background:rgba(3,5,10,0.88);
  border:1px solid rgba(0,0,0,0.85);
  color:#26a5e4;
  text-decoration:none;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.mob-header-tg svg { width:20px; height:20px; display:block; }

.mob-auth-btn {
  padding:8px 14px;
  border-radius:9px;
  border:none;
  outline:none;
  cursor:pointer;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:12px;
  font-weight:700;
  background:var(--theme-btn-gradient);
  color:#fff;
  box-shadow:0 5px 18px var(--theme-btn-shadow);
  transition:box-shadow .2s;
}
.mob-auth-btn-outline {
  background:var(--theme-btn-gradient);
  border:none;
  color:#fff;
  box-shadow:0 5px 18px var(--theme-btn-shadow);
}
.mob-logout-form { margin:0; padding:0; display:block; width:100%; }
.mob-logout-btn {
  width:100%; border:none; background:transparent; font-family:inherit;
  font-size:inherit; text-align:left;
}
.mob-user-info { flex:1; min-width:0; }
.mob-username {
  font-size:14px; font-weight:700; color:#e8f4ff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mob-coin {
  display:flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:rgba(180,210,240,.6);
  margin-top:2px;
}
.mob-close {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.06);
  border:none; color:rgba(160,190,220,.6);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:background .2s, color .2s;
}
.mob-close svg { width:16px; height:16px; }

/* Bannerlar */
.mob-banners {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.mob-banner {
  border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:70px;
  border:1px solid rgba(0,0,0,.7);
  transition:transform .2s;
}
.mob-banner--card {
  position: relative;
  z-index: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px 10px;
  min-height: 96px;
  overflow: visible;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18, 58, 110, 0.98) 0%, rgba(8, 32, 72, 0.98) 100%);
  border: 1px solid rgba(0, 80, 160, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease;
}

.mob-banner-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.mob-banner--card .sb-banner-word {
  font-size: 10px;
}

.mob-banner--card .sb-banner-words {
  gap: 1px;
}
.mob-banner:hover { transform: translateY(-1px); }

button.mob-banner.mob-banner--action.mob-banner--card {
  background: linear-gradient(180deg, rgba(18, 58, 110, 0.98) 0%, rgba(8, 32, 72, 0.98) 100%);
}

button.mob-banner.mob-banner--action {
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  width:100%;
  text-align:inherit;
  cursor:pointer;
}

/* Modal i??erik ??? scroll (flex i??inde k??????l??p kayd??rma i??in min-height:0 ??art) */
.mob-body {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--primary-rgb),.35) rgba(0,0,0,.15);
  padding:8px 0 16px;
}

html.mob-menu-open,
body.mob-menu-open {
  overflow:hidden;
  height:100%;
}

body.mob-menu-open {
  position:fixed;
  left:0;
  right:0;
  width:100%;
}
.mob-body::-webkit-scrollbar { width:5px; }
.mob-body::-webkit-scrollbar-thumb { background:rgba(var(--primary-rgb),.22); border-radius:4px; }
.mob-body::-webkit-scrollbar-track { background:rgba(0,0,0,.12); border-radius:4px; }

.mob-section-label {
  font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(100,140,175,.45);
  padding:8px 14px 4px;
}

.mob-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  margin:0 8px 4px;
  border-radius:12px;
  color:rgba(190,215,240,.88);
  font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer;
  position:relative;
  border:1px solid transparent;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.mob-item:active {
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.18);
  transform:scale(.992);
}
.mob-item.active {
  color:var(--primary-accent);
  background:rgba(var(--primary-rgb),.12);
  border-color:rgba(var(--primary-rgb),.22);
}
.mob-item.active::after {
  content:''; position:absolute;
  left:0; top:18%; bottom:18%;
  width:3px; background:var(--theme-line-gradient);
  border-radius:0 3px 3px 0;
}
.mob-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.75; color:var(--primary); }
.mob-icon svg { width:15px; height:15px; }
.mob-item.active .mob-icon { opacity:1; }

.mob-item.danger-item { color:rgba(255,100,100,.7); }

.mob-divider { height:1px; background:rgba(255,255,255,.04); margin:4px 0; }

/* Social row */
.mob-social {
  display:flex; flex-wrap:nowrap; gap:0;
  padding:6px 16px 0;
  justify-content:space-between;
}
.mob-social-btn {
  flex:1;
  height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,18,32,.75);
  border:1px solid rgba(0,0,0,.8);
  text-decoration:none; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
.mob-social-btn svg { width:16px; height:16px; position:relative; z-index:1; }
.mob-social-btn[title="Telegram"] { color:#26a5e4; }
.mob-social-btn[title="Discord"]  { color:#5865f2; }
.mob-social-btn[title="Kick"]     { color:#53fc18; }
.mob-social-btn[title="Instagram"]{ color:#e1306c; }
.mob-social-btn[title="YouTube"]  { color:#ff0000; }
.mob-social-btn[title="Twitch"]   { color:#9146ff; }

/* ?????? MOB?L MEDIA QUERY ???????????????????????????????????????????????????????????? */
@media (max-width:900px) {
  /* sidebar masa??st?? gibi davran??yor ama gizli */
  #sidebar { display:none; }

  .main-content {
    margin-left:0;
    padding:0 12px 90px;
    padding-top:var(--action-bar-h-mobile);
    min-height:calc(100vh - var(--topbar-h-mobile) - var(--action-bar-h-mobile));
    overflow-x:clip;
    max-width:100vw;
  }

  .bottom-bar { display:flex; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   HERO CONTAINER ??? t??m alan
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.hero-container {
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  max-width:1700px;
  margin:0 auto;
}

/* Dikey yan bannerlar */
.side-banner {
  flex-shrink:0;
  width:130px;
  display:flex;
  align-items:flex-start;
}
.side-banner img {
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  object-fit:cover;
}

/* Orta i??erik */
.hero-inner {
  flex:1;
  min-width:0;
  padding:0 10px;
}

/* Ana banner ? g?rsel kendi oran?nda, geni?li?e g?re ?l?eklenir */
.hero-main {
  width:100%;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  border:1px solid rgba(0,0,0,0.85);
  line-height:0;
}
.hero-media-link--main {
  display:block;
  width:100%;
  line-height:0;
}
.hero-media-link--sub {
  display:block;
  width:100%;
  line-height:0;
}
.hero-media-link--main img {
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  vertical-align:top;
}
.hero-media-link {
  display:block;
  line-height:0;
  text-decoration:none;
  color:inherit;
}

/* ?kili k???k banner ? ana ile ayn? oran, yar?m geni?likte yar?m y?kseklik */
.hero-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.hero-half {
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  border:1px solid rgba(0,0,0,0.85);
  min-width:0;
  line-height:0;
}
.hero-media-link--sub img {
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  vertical-align:top;
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   SPONSORS
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.sponsors-section-title {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}
.sponsors-section-title--ana { margin-top:20px; margin-bottom:14px; }

@keyframes sponsorsTitleStarGlow {
  0%, 100% { transform:scale(1) rotate(-2deg); filter:drop-shadow(0 0 6px currentColor); }
  50% { transform:scale(1.12) rotate(2deg); filter:drop-shadow(0 0 14px currentColor); }
}

.sponsors-title-star {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  animation:sponsorsTitleStarGlow 2.8s ease-in-out infinite;
}
.sponsors-title-star svg {
  width:18px;
  height:18px;
  display:block;
}
.sponsors-title-star--ana { color:#4ade80; }
.sponsors-title-star--vip { color:#fbbf24; }

.sponsors-title-label {
  flex-shrink:0;
  font-size:clamp(13px,1.15vw,15px);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.2;
}

.sponsors-section-title--ana .sponsors-title-label {
  background:linear-gradient(100deg,#ecfccb 0%,#86efac 28%,#4ade80 52%,#22c55e 78%,#bbf7d0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 20px rgba(74,222,128,.35));
}

.sponsors-section-title--vip .sponsors-title-label {
  background:linear-gradient(100deg,#fef9c3 0%,#fde047 25%,#facc15 50%,#eab308 72%,#fef08a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(250,204,21,.4));
}

.vip-title { margin-top:16px; }

.sponsors-line {
  flex:1;
  height:2px;
  min-width:32px;
  border-radius:2px;
  background:linear-gradient(to right, rgba(255,255,255,.42), rgba(255,255,255,.08) 55%, transparent);
  opacity:.85;
}
.sponsors-line--ana {
  box-shadow:0 0 12px rgba(74,222,128,.25);
  background:linear-gradient(to right, rgba(134,239,172,.55), rgba(74,222,128,.2) 45%, transparent);
}
.sponsors-line--vip {
  box-shadow:0 0 14px rgba(250,204,21,.28);
  background:linear-gradient(to right, rgba(253,224,71,.6), rgba(234,179,8,.22) 45%, transparent);
}

/* Ana + VIP ayn?? yatay geni??lik (hero-inner); padding sadece ortak d???? bo??lukta */
.sponsors-grid {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.ana-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
  margin-bottom:28px;
  box-sizing:border-box;
}
.vip-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.ana-grid > .ana-box,
.vip-grid > .vip-box {
  min-width:0;
}

/* Sponsor kutusu ? koyu palet + d?nen accent kenarl?k */
.ana-box {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 22px;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
  min-height: 168px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.vip-box-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.vip-box-ring-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  height: 180%;
  min-width: 120px;
  min-height: 120px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 220deg,
    var(--accent-soft, rgba(var(--primary-accent-rgb), 0.42)) 265deg,
    var(--accent-color, var(--primary-accent)) 300deg,
    #ffffff 306deg,
    var(--accent-color, var(--primary-accent)) 312deg,
    var(--accent-soft, rgba(var(--primary-accent-rgb), 0.42)) 332deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center center;
  animation: vip-box-ring-spin 2.2s linear infinite;
  will-change: transform;
}

@media (min-width: 901px) {
  .vip-box-ring-spinner {
    width: 200%;
    height: 200%;
  }

  .vip-box-surface {
    margin: 4px;
    min-height: calc(100% - 8px);
  }
}

@keyframes vip-box-ring-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.vip-box-surface {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100% - 6px);
  margin: 3px;
  border-radius: 19px;
  background:
    radial-gradient(ellipse 88% 52% at 50% -8%, var(--accent-faint, rgba(var(--primary-accent-rgb), 0.14)) 0%, transparent 58%),
    linear-gradient(168deg, #0f1c2e 0%, #0a1420 38%, #060d16 72%, #040a10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 28px rgba(0, 0, 0, 0.42);
}

.ana-box:hover {
  transform: translateY(-5px);
}

.ana-box:hover .vip-box-ring-spinner {
  animation-duration: 2.6s;
}

/* Ana sponsor ? VIP ?st? premium kutu */
.ana-box.ana-box--elite:not(.vip-box--compact) {
  border-radius: 28px;
  min-height: 318px;
  height: 100%;
  isolation: isolate;
}

.ana-box-aura {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 88% 72% at 50% 0%,
    var(--accent-soft, rgba(var(--primary-accent-rgb), 0.34)) 0%,
    transparent 68%
  );
  opacity: 0.55;
  filter: blur(10px);
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.ana-box:hover .ana-box-aura {
  opacity: 0.92;
  filter: blur(14px);
}

.ana-box--elite .vip-box-ring-spinner {
  width: 225%;
  height: 225%;
  animation-duration: 1.9s;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 185deg,
    var(--accent-soft, rgba(var(--primary-accent-rgb), 0.38)) 245deg,
    var(--accent-color, var(--primary-accent)) 292deg,
    #ffffff 300deg,
    var(--accent-color, var(--primary-accent)) 308deg,
    var(--accent-soft, rgba(var(--primary-accent-rgb), 0.45)) 332deg,
    transparent 360deg
  );
}

.ana-box--elite .vip-box-surface {
  position: relative;
  margin: 5px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(168deg, #0a1420 0%, #060d16 72%, #040a10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 16px 38px rgba(0, 0, 0, 0.52);
  isolation: isolate;
  transition: box-shadow 0.38s ease;
}

.ana-box-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.ana-box-photo-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.24;
  transform: scale(1.06);
  filter: saturate(1.22) contrast(1.05) brightness(0.94);
  transition: opacity 0.4s ease, transform 0.55s ease, filter 0.4s ease;
}

.ana-box-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 18, 0.25) 0%, rgba(4, 10, 18, 0.55) 52%, rgba(2, 6, 12, 0.82) 100%);
  pointer-events: none;
}

.ana-box--elite:hover .ana-box-photo-bg img {
  opacity: 0.3;
  transform: scale(1.12);
  filter: saturate(1.28) contrast(1.08) brightness(1);
}

.ana-box-fx-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 75% at 50% -15%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.24) 0%, transparent 58%),
    radial-gradient(ellipse 90% 60% at 50% 108%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14) 0%, transparent 62%),
    linear-gradient(
      168deg,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1) 0%,
      transparent 38%,
      rgba(3, 8, 16, 0.62) 100%
    );
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.42);
  mix-blend-mode: soft-light;
  opacity: 0.92;
  transition: opacity 0.35s ease;
}

.ana-box-fx-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 42%,
    transparent 58%,
    rgba(255, 255, 255, 0.03) 72%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: ana-box-shine 7s ease-in-out infinite;
  opacity: 0.65;
  pointer-events: none;
}

@keyframes ana-box-shine {
  0%, 100% { background-position: 120% 0; opacity: 0.35; }
  45% { background-position: -20% 0; opacity: 0.75; }
  55% { background-position: -20% 0; opacity: 0.75; }
}


.ana-box-accent-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 70% at 50% 0%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1) 0%, transparent 65%),
    linear-gradient(
      180deg,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.16) 0%,
      rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 42%,
      rgba(3, 8, 16, 0.55) 100%
    );
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.ana-box:hover .ana-box-accent-bg {
  opacity: 0.92;
}

.ana-box--elite:hover .ana-box-fx-overlay {
  opacity: 1;
}

.ana-box.ana-box--elite:not(.vip-box--compact) .ana-box-crown {
  top: 11px;
  width: 28px;
  height: 28px;
  margin-left: -14px;
}

.ana-box-crown {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 999px;
  color: var(--accent-color, var(--primary-accent));
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--accent-soft, rgba(var(--primary-accent-rgb), 0.45));
  box-shadow:
    0 0 16px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.35)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ana-box:hover .ana-box-crown {
  transform: translateY(2px);
  box-shadow:
    0 0 22px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.45)),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ana-box-crown svg {
  display: block;
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 6px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.5)));
}

.ana-box .vip-box-surface {
  position: relative;
  overflow: hidden;
  margin: 5px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: calc(100% - 10px);
  height: calc(100% - 10px);
}

.ana-box .vip-box-head,
.ana-box .vip-box-offer,
.ana-box .vip-box-action {
  position: relative;
  z-index: 3;
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
  flex: 0 0 132px;
  min-height: 132px;
  max-height: 132px;
  padding: 32px 14px 10px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo {
  max-height: 92px;
  max-width: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.38s ease, filter 0.38s ease;
  transform-origin: center center;
}

.ana-box.ana-box--elite:not(.vip-box--compact):hover .vip-box-logo {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.35)));
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-offer {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 10px 14px 8px;
  background: transparent;
  border: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.ana-box--placeholder .vip-box-offer {
  min-height: 36px;
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-desc {
  font-size: 14px;
  font-weight: var(--site-font-weight-strong, 700);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: rgba(235, 244, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.ana-box .vip-box-desc {
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: rgba(220, 230, 245, 0.85);
  text-shadow: none;
}

.ana-box .vip-box-kod {
  display: none;
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-action {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 4px 16px 16px;
  background: transparent;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.ana-box .vip-box-action {
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0 14px 14px;
  background: transparent;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.ana-box.ana-box--elite:not(.vip-box--compact):hover .vip-box-offer,
.ana-box.ana-box--elite:not(.vip-box--compact):hover .vip-box-action {
  transform: translateY(6px);
}

.ana-box.ana-box--elite.vip-box--compact:hover .vip-box-offer,
.ana-box.ana-box--elite.vip-box--compact:hover .vip-box-action {
  transform: translateY(10px);
}

.ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-btn {
  min-height: 44px;
  font-size: 12px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: 0.12em;
  border-radius: 12px;
}

.ana-box .vip-box-btn {
  min-height: 42px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #061018;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color, var(--primary-accent)) 86%, #fff 14%) 0%,
    var(--accent-color, var(--primary-accent)) 100%
  );
  box-shadow:
    0 0 20px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.52)),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ana-box:hover .vip-box-btn {
  transform: translateY(-1px);
  box-shadow:
    0 0 26px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.58)),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 20px rgba(0, 0, 0, 0.42);
}

.ana-box--placeholder {
  cursor: default;
  pointer-events: none;
}

.ana-box--placeholder .vip-box-ring-spinner {
  animation: none;
  background: conic-gradient(
    from 0deg,
    rgba(160, 170, 185, 0.12) 0deg,
    rgba(160, 170, 185, 0.28) 180deg,
    rgba(160, 170, 185, 0.12) 360deg
  );
}

.ana-box--placeholder:hover {
  transform: none;
}

.ana-box--placeholder .vip-box-offer {
  background: transparent;
  border: none;
}

.ana-box--placeholder .vip-box-desc {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(210, 220, 235, 0.78);
  text-shadow: none;
}

.ana-box--placeholder .vip-box-btn--empty {
  color: transparent;
  background: rgba(160, 170, 185, 0.14);
  box-shadow: none;
}

.ana-box:hover .vip-box-surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 20px 42px rgba(0, 0, 0, 0.55),
    0 0 40px var(--accent-soft, rgba(var(--primary-accent-rgb), 0.22)),
    0 0 64px rgba(var(--accent-r, 0), var(--accent-g, 191), var(--accent-b, 255), 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .ana-box,
  .ana-box .vip-box-offer,
  .ana-box .vip-box-action,
  .ana-box .vip-box-btn,
  .ana-box-crown,
  .ana-box-photo-bg img {
    transition: none !important;
  }

  .ana-box:hover {
    transform: none;
  }

  .ana-box.ana-box--elite:hover .vip-box-offer,
  .ana-box.ana-box--elite:hover .vip-box-action {
    transform: none;
  }
}

/* VIP compact kutular */
.vip-box.vip-box--compact.ana-box {
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: 198px;
  border-radius: 24px;
  padding: 0;
}

.vip-box.vip-box--compact.ana-box:hover {
  transform: translateY(-6px);
  box-shadow: none;
}

.vip-box.vip-box--compact .vip-box-ring-spinner {
  width: 200%;
  height: 200%;
  animation-duration: 2.6s;
}

.vip-box.vip-box--compact .vip-box-surface {
  margin: 4px;
  border-radius: 20px;
}

.vip-box.vip-box--compact .vip-box-head {
  flex: 0 0 72px;
  min-height: 72px;
  max-height: 72px;
  padding: 16px 10px 6px;
}

.vip-box.vip-box--compact .vip-box-logo {
  max-height: 56px;
}

.vip-box.vip-box--compact .vip-box-offer {
  min-height: 52px;
  padding: 6px 10px 8px;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vip-box.vip-box--compact .vip-box-desc {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
}

.vip-box.vip-box--compact .vip-box-kod {
  display: block;
  margin: 4px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-color);
  text-transform: uppercase;
}

.vip-box.vip-box--compact .vip-box-action {
  padding: 0 12px 12px;
}

.vip-box.vip-box--compact .vip-box-btn {
  min-height: 36px;
  font-size: 11px;
}

.vip-box.vip-box--compact.ana-box--placeholder .vip-box-offer {
  background: transparent;
  border: none;
}

/* Sponsor kutusu ? VIP taban */
.vip-box {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55);
  background: linear-gradient(
    180deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14) 0%,
    rgba(8, 12, 20, 0.95) 38%,
    rgba(6, 10, 16, 0.98) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 168px;
  height: 100%;
}

.vip-box:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 14px 32px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28);
}

.vip-box-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 12px 10px 8px;
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);
  box-sizing: border-box;
}

.vip-box-logo {
  width: auto;
  max-width: 88%;
  max-height: 38px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.vip-box-offer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 8px 8px;
  background: #000;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.vip-box-desc {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #fff;
  text-transform: uppercase;
}

.vip-box-kod {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
}

.vip-box-action {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 10px 12px 12px;
  display: flex;
  justify-content: center;
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06);
  box-sizing: border-box;
}

.vip-box-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
  box-shadow: 0 4px 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.vip-box:hover .vip-box-btn {
  filter: brightness(1.08);
  transform: scale(1.02);
}

.vip-box--placeholder .vip-box-desc {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(200, 215, 235, 0.72);
}

.vip-box--placeholder {
  cursor: default;
  pointer-events: none;
}

/* Sponsor Giri? ? renk flash ge?i?i */
.sponsor-entry-flash {
  position: fixed;
  inset: 0;
  z-index: 99985;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.sponsor-entry-flash.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.sponsor-entry-flash__wash {
  position: absolute;
  inset: -20vmax;
  background: rgb(var(--flash-r), var(--flash-g), var(--flash-b));
  clip-path: circle(0% at var(--flash-x, 50%) var(--flash-y, 50%));
  will-change: clip-path, opacity;
}

.sponsor-entry-flash.is-active .sponsor-entry-flash__wash {
  animation: sponsor-entry-reveal 0.42s cubic-bezier(0.18, 0.92, 0.22, 1) forwards;
}

.sponsor-entry-flash__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.85);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

.sponsor-entry-flash.is-active .sponsor-entry-flash__loader {
  animation: sponsor-entry-loader-in 0.22s ease-out 0.12s forwards,
             sponsor-entry-spin 0.55s linear 0.12s infinite;
}

@keyframes sponsor-entry-reveal {
  0% {
    clip-path: circle(0% at var(--flash-x, 50%) var(--flash-y, 50%));
    opacity: 0.88;
  }
  100% {
    clip-path: circle(150vmax at var(--flash-x, 50%) var(--flash-y, 50%));
    opacity: 1;
  }
}

@keyframes sponsor-entry-loader-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes sponsor-entry-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-entry-flash.is-active .sponsor-entry-flash__wash {
    animation-duration: 0.12s;
  }
  .sponsor-entry-flash.is-active .sponsor-entry-flash__loader {
    animation: none;
    opacity: 0.85;
    transform: scale(1);
  }
}

.vip-box--placeholder .vip-box-offer {
  background: transparent;
  border: none;
}

.vip-box--placeholder .vip-box-btn--empty {
  color: transparent;
  background: rgba(160, 170, 185, 0.14);
  box-shadow: none;
}

.vip-box--placeholder:hover {
  transform: none;
}

.vip-box--placeholder:hover .vip-box-btn--empty {
  filter: none;
  transform: none;
}

/* ?????? KART TEMEL ?????? */
.sponsor-card {
  position:relative;
  border-radius:14px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  transition:box-shadow .3s;
  border:1.5px solid transparent;
}
/* Ana sponsor kartlarda b??y??me yok */
.sponsor-card:not(.vip-card):hover { transform:none; }
/* VIP kartlarda hafif yukar?? */
.vip-card:hover { transform:translateY(-3px); }

/* Arkaplan g??rseli (bg.gif ??? opakl??k d??????k) */
.sponsor-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
  opacity:.48;
  transition:transform .45s ease, opacity .35s ease;
}
.sponsor-card:not(.vip-card):hover .sponsor-bg {
  transform:scale(1.06);
}
.vip-card:hover .sponsor-bg { transform:scale(1.05); transition:transform .3s; }

/* Renk overlay ??? siyah karartman??n ??ST?? (ana kart rengi) */
.sp-color-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  transition:opacity .5s ease;
  opacity:1;
}
.sp-overlay-red     { background:linear-gradient(145deg, rgba(180,15,15,.28), rgba(100,5,5,.1)); }
.sp-overlay-gray    { background:linear-gradient(145deg, rgba(20,120,35,.24), rgba(10,60,15,.08)); }
.sp-overlay-orange  { background:linear-gradient(145deg, rgba(180,85,8,.28),  rgba(120,50,5,.1)); }
.sp-overlay-brown   { background:linear-gradient(145deg, rgba(120,60,15,.28), rgba(80,35,5,.1)); }
.sp-overlay-cyan    { background:linear-gradient(145deg, rgba(0,170,210,.18), rgba(0,100,160,.06)); }
.sp-overlay-pink    { background:linear-gradient(145deg, rgba(195,35,155,.2), rgba(140,15,110,.07)); }
.sp-overlay-vorange { background:linear-gradient(145deg, rgba(185,105,8,.2),  rgba(130,65,5,.07)); }
.sp-overlay-vgreen  { background:linear-gradient(145deg, rgba(25,165,45,.18), rgba(15,100,25,.06)); }
.sp-overlay-gold    { background:linear-gradient(145deg, rgba(205,165,15,.2), rgba(150,115,8,.07)); }

/* Admin ile ??zelle??tirilen kart renkleri (CSS de??i??kenleri kartta inline) */
.sponsor-card.sponsor-card--themed .sp-overlay-dynamic:not(.sp-overlay-dynamic--vip) {
  background:linear-gradient(145deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), .28), rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), .1));
}
.sponsor-card.sponsor-card--themed:not(.vip-card):hover .sp-overlay-dynamic:not(.sp-overlay-dynamic--vip) {
  background:linear-gradient(145deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), .52), rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), .22));
}
.sponsor-card.sponsor-card--themed .sp-overlay-dynamic--vip {
  background:linear-gradient(145deg, rgba(var(--accent-r), var(--accent-g), var(--accent-b), .18), rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), .06));
}
@keyframes sponsorPulseThemed {
  0%, 100% { box-shadow:0 0 0 2px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .55), 0 0 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .22); }
  50% { box-shadow:0 0 0 2.5px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 1), 0 0 28px rgba(var(--accent-r), var(--accent-g), var(--accent-b), .5); }
}
.sponsor-card.sponsor-card--themed {
  animation:sponsorPulseThemed 3s ease-in-out infinite;
}
.sp-btn-themed:hover {
  background:rgb(var(--btn-r), var(--btn-g), var(--btn-b)) !important;
  color:#050a12 !important;
  border-color:rgb(var(--btn-r), var(--btn-g), var(--btn-b)) !important;
}

/* Hover'da overlay yo??unla????r */
.sponsor-card:not(.vip-card):hover .sp-overlay-red     { background:linear-gradient(145deg, rgba(200,20,20,.52), rgba(120,5,5,.22)); }
.sponsor-card:not(.vip-card):hover .sp-overlay-gray    { background:linear-gradient(145deg, rgba(25,150,40,.48),  rgba(12,80,18,.18)); }
.sponsor-card:not(.vip-card):hover .sp-overlay-orange  { background:linear-gradient(145deg, rgba(200,100,10,.52), rgba(140,60,5,.22)); }
.sponsor-card:not(.vip-card):hover .sp-overlay-brown   { background:linear-gradient(145deg, rgba(150,75,18,.52),  rgba(100,45,6,.22)); }

/* Siyah karartma ??? bg.gif ??st??nde, vurgu renginin ALT katman??nda */
.sponsor-card::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(168deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.94) 100%);
}
.sponsor-card::after {
  content:none;
  display:none;
}

/* ???erik */
.sponsor-content {
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:28px 16px 16px;
  text-align:center;
  min-height:300px;
  transition:padding-top .6s cubic-bezier(.4,0,.2,1), transform .35s ease;
}
/* Ana kart ??? hover???da i??erik yukar??dan a??a???? kayar + logo hafif b??y??r */
.sponsor-card:not(.vip-card) .sponsor-content {
  flex:1;
  min-height:0;
  justify-content:flex-start;
  align-items:center;
  padding:14px 10px 12px;
  padding-top:22px;
  gap:8px;
  transition:padding-top .6s cubic-bezier(.4,0,.2,1), gap .35s ease;
}
.sponsor-card:not(.vip-card):hover .sponsor-content {
  transform:translateY(14px);
  padding-top:22px;
  gap:10px;
}
.sponsor-card:not(.vip-card):hover .sponsor-logo {
  transform:none;
}
.sponsor-card:not(.vip-card) .sponsor-logo {
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.sponsor-card:not(.vip-card) .sponsor-content {
  transition:transform .45s cubic-bezier(.4,0,.2,1), gap .35s ease;
}
.vip-card .sponsor-content {
  min-height:170px;
  padding:20px 12px;
  justify-content:center;
  transition:none;
}

.sponsor-logo {
  width:auto;
  max-width:132px;
  height:46px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.sponsor-desc {
  font-size:14px;
  font-weight:700;
  color:rgba(220,235,255,.88);
  line-height:1.45;
}
/* Ana sponsor ??? a????klama daha b??y??k ve kal??n */
.sponsor-card:not(.vip-card) .sponsor-desc {
  font-size:18px;
  font-weight:800;
  line-height:1.3;
}
/* Vurgu rengiyle uyumlu alt yaz?? (kartta --accent-*) */
.sponsor-card.sponsor-card--themed .sponsor-desc {
  margin:0;
  padding:0 6px;
  max-width:100%;
  color:rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.93);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  text-align:center;
  word-wrap:break-word;
}
/* Ana sponsor ??? a????klamay?? daha okunakl?? */
.sponsor-card.sponsor-card--themed:not(.vip-card) .sponsor-desc {
  color:rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.98);
  text-shadow:
    0 0 1px rgba(0,0,0,.95),
    0 2px 4px rgba(0,0,0,.85),
    0 0 18px rgba(0,0,0,.55);
}
.vip-card.sponsor-card--themed .sponsor-desc {
  font-size:13px;
}

@keyframes sponsorKodRgbFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.sponsor-kod {
  margin: 8px auto 0;
  padding: 7px 12px;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  font-family: ui-monospace, monospace;
  text-align: center;
  line-height: 1.3;
  word-wrap: break-word;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #ff0080,
    #ff9100,
    #ffeb3b,
    #00e676,
    var(--primary-accent),
    #7c4dff,
    #e040fb,
    #ff0080
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sponsorKodRgbFlow 4.8s linear infinite;
  text-shadow: none;
}

/* Temal?? kart ??? kod kutusu arka plan?? (::before), metin RGB */
.sponsor-card.sponsor-card--themed .sponsor-kod {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.sponsor-card.sponsor-card--themed .sponsor-kod::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.38),
    rgba(0, 0, 0, 0.42)
  );
  border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.72);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 3px 12px rgba(0, 0, 0, 0.38),
    0 0 16px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28);
}

.vip-card.sponsor-card--themed .sponsor-kod {
  font-size: 14px;
  padding: 8px 12px;
  letter-spacing: 0.1em;
}

/* Ana sponsor ??? kod kutusuz; sadece akan RGB metin (daha b??y??k / kal??n) */
.sponsor-card:not(.vip-card) .sponsor-kod {
  margin: 6px auto 0;
  padding: 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.07em;
  border-radius: 0;
}
.sponsor-card:not(.vip-card) .sponsor-kod::before {
  content: none;
  display: none;
}
.sponsor-card.sponsor-card--themed:not(.vip-card) .sponsor-kod {
  text-shadow: none;
}

/* G?R??? butonu */
.sp-btn {
  margin-top:4px;
  padding:5px 20px;
  border-radius:20px;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  border:1.5px solid;
  background:transparent;
  cursor:pointer;
  transition:background .2s, color .2s;
}

/* ?????? BORDER PULSE AN?MASYONLARI ?????? */
@keyframes bpRed    { 0%,100%{ box-shadow:0 0 0 2px rgba(220,50,50,.6),   0 0 16px rgba(180,20,20,.2);  } 50%{ box-shadow:0 0 0 2.5px rgba(255,60,60,1),    0 0 28px rgba(220,40,40,.55); } }
@keyframes bpGray   { 0%,100%{ box-shadow:0 0 0 2px rgba(70,160,70,.55),  0 0 16px rgba(20,100,30,.18); } 50%{ box-shadow:0 0 0 2.5px rgba(90,210,90,1),   0 0 28px rgba(30,150,40,.5);  } }
@keyframes bpOrange { 0%,100%{ box-shadow:0 0 0 2px rgba(220,120,20,.6),  0 0 16px rgba(160,80,10,.2);  } 50%{ box-shadow:0 0 0 2.5px rgba(255,160,30,1),  0 0 28px rgba(200,110,15,.52);} }
@keyframes bpBrown  { 0%,100%{ box-shadow:0 0 0 2px rgba(150,90,40,.55),  0 0 16px rgba(100,55,20,.18); } 50%{ box-shadow:0 0 0 2.5px rgba(200,130,65,1),  0 0 28px rgba(150,90,35,.48); } }
@keyframes bpCyan   { 0%,100%{ box-shadow:0 0 0 2px rgba(0,190,220,.5),   0 0 14px rgba(0,160,200,.18); } 50%{ box-shadow:0 0 0 2.5px rgba(0,220,255,1),   0 0 22px rgba(0,190,230,.45); } }
@keyframes bpPink   { 0%,100%{ box-shadow:0 0 0 2px rgba(210,50,170,.55), 0 0 14px rgba(180,30,140,.18);} 50%{ box-shadow:0 0 0 2.5px rgba(255,80,210,1),  0 0 22px rgba(220,50,185,.48);} }
@keyframes bpVOrange{ 0%,100%{ box-shadow:0 0 0 2px rgba(220,130,15,.55), 0 0 14px rgba(160,90,10,.18); } 50%{ box-shadow:0 0 0 2.5px rgba(255,165,25,1),  0 0 22px rgba(210,130,20,.48);} }
@keyframes bpGreen  { 0%,100%{ box-shadow:0 0 0 2px rgba(50,190,70,.5),   0 0 14px rgba(20,140,40,.18); } 50%{ box-shadow:0 0 0 2.5px rgba(74,222,128,1),  0 0 22px rgba(40,190,70,.46); } }
@keyframes bpGold   { 0%,100%{ box-shadow:0 0 0 2px rgba(230,185,50,.55), 0 0 14px rgba(190,150,20,.18);} 50%{ box-shadow:0 0 0 2.5px rgba(255,220,70,1),  0 0 22px rgba(240,195,40,.48);} }

.sp-red         { animation:bpRed     2.8s ease-in-out infinite; }
.sp-gray        { animation:bpGray    3.3s ease-in-out infinite; }
.sp-orange      { animation:bpOrange  2.6s ease-in-out infinite; }
.sp-brown       { animation:bpBrown   3.6s ease-in-out infinite; }
.sp-dark        { animation:bpCyan    2.4s ease-in-out infinite; }
.sp-pink        { animation:bpPink    3.1s ease-in-out infinite; }
.sp-vip-orange  { animation:bpVOrange 2.7s ease-in-out infinite; }
.sp-vip-green   { animation:bpGreen   3.0s ease-in-out infinite; }
.sp-vip-gold    { animation:bpGold    2.9s ease-in-out infinite; }

/* Metin renkleri */
.sp-cyan        { color:var(--primary-accent) !important; }
.sp-pink-text   { color:#ff5ecb !important; }
.sp-orange-text { color:#ff9d2e !important; }
.sp-green-text  { color:#4ade80 !important; }
.sp-gold-text   { color:#f5c842 !important; }

/* Buton renkleri */
.sp-btn-cyan   { color:var(--primary-accent); border-color:var(--primary-accent); }
.sp-btn-cyan:hover   { background:var(--primary-accent); color:#000; }
.sp-btn-pink   { color:#ff5ecb; border-color:#ff5ecb; }
.sp-btn-pink:hover   { background:#ff5ecb; color:#000; }
.sp-btn-orange { color:#ff9d2e; border-color:#ff9d2e; }
.sp-btn-orange:hover { background:#ff9d2e; color:#000; }
.sp-btn-green  { color:#4ade80; border-color:#4ade80; }
.sp-btn-green:hover  { background:#4ade80; color:#000; }
.sp-btn-gold   { color:#f5c842; border-color:#f5c842; }
.sp-btn-gold:hover   { background:#f5c842; color:#000; }

/* ?????? RESPONSIVE ?????? */
@media (max-width:1200px) {
  .vip-grid { grid-template-columns:repeat(3,1fr); }
  .side-banner { width:90px; }
}
@media (max-width:900px) {
  .side-banner { display:none; }
  .hero-inner { padding:0; }

  .hero-main {
    margin-bottom:10px;
    border-radius:12px;
  }
  .hero-row {
    display:flex;
    flex-direction:column;
    grid-template-columns:1fr !important;
    gap:8px;
    margin-bottom:10px;
  }
  .hero-half {
    width:100%;
    max-width:100%;
    border-radius:10px;
  }

  .ana-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-left:0;
    margin-right:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-bottom:22px;
  }
  /* VIP ??? mobilde 3 s??tun; ana ile ayn?? yatay alan + benzer aral??k */
  .vip-grid {
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    align-items:stretch;
  }
  .vip-box-head:not(.vip-box-head) {
    flex: 0 0 50px;
    min-height: 50px;
    max-height: 50px;
    padding: 10px 8px 6px;
  }
  .vip-box:not(.vip-box--compact) .vip-box-logo { max-height:32px; }
  .vip-box:not(.vip-box--compact) .vip-box-desc { font-size:10px; }
  .vip-box:not(.vip-box--compact) .vip-box-kod { font-size:9px; }
  .vip-box:not(.vip-box--compact) .vip-box-action { padding:10px 10px 12px; }
  .vip-box:not(.vip-box--compact) .vip-box-btn { min-height:30px; font-size:10px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) { min-height: 248px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
    flex: 0 0 98px;
    min-height: 98px;
    max-height: 98px;
    padding: 22px 10px 6px;
  }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo { max-height: 64px; }
  .ana-box.ana-box--elite:not(.vip-box--compact):hover .vip-box-logo { transform: scale(1.08); }
  .ana-box-crown { width: 22px; height: 22px; margin-left: -11px; top: 8px; }
  .ana-box-crown svg { width: 12px; height: 12px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-offer { padding: 4px 8px 6px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-desc { font-size: 11px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-action { padding: 0 12px 12px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-btn { min-height: 36px; font-size: 11px; }
  .vip-box--compact { min-height: 155px !important; }
  .vip-box.vip-box--compact.ana-box { min-height: 155px !important; }
  .vip-box--compact .vip-box-head,
  .vip-box.vip-box--compact .vip-box-head {
    flex: 0 0 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 14px 8px 4px !important;
  }
  .vip-box--compact .vip-box-logo,
  .vip-box.vip-box--compact .vip-box-logo { max-height: 36px !important; }
  .vip-box.vip-box--compact .vip-box-offer {
    min-height: 40px !important;
    padding: 4px 8px 5px !important;
  }
  .vip-box.vip-box--compact .vip-box-desc { font-size: 9px !important; line-height: 1.25; }
  .vip-box.vip-box--compact .vip-box-kod { font-size: 8px !important; margin-top: 2px; }
  .vip-box.vip-box--compact .vip-box-action { padding: 0 10px 10px !important; }
  .vip-box.vip-box--compact .vip-box-btn { min-height: 28px !important; font-size: 9px !important; }
  .vip-box.vip-box--compact .vip-box-surface { margin: 3px; border-radius: 16px; }
  .vip-box-action--premium { padding: 0 8px 8px; }
  .vip-box-btn--premium { min-height: 30px; font-size: 10px; }
  .vip-box-badge { font-size: 8px; padding: 2px 6px; top: 6px; }
  .vip-box-badge svg { width: 9px; height: 9px; }
}
@media (max-width:640px) {
  .hero-main {
    margin-bottom:8px;
    border-radius:11px;
  }
  .hero-row {
    display:flex;
    flex-direction:column;
    grid-template-columns:1fr !important;
    gap:7px;
    margin-bottom:8px;
  }
  .hero-half { width:100%; max-width:100%; border-radius:9px; }
}
@media (max-width:480px) {
  .hero-row {
    display:flex;
    flex-direction:column;
    grid-template-columns:1fr !important;
    gap:6px;
  }
  .hero-half { width:100%; max-width:100%; }

  .ana-grid {
    grid-template-columns:repeat(2,1fr);
    gap:11px;
    margin-left:0;
    margin-right:0;
    width:100%;
    max-width:100%;
    margin-bottom:20px;
  }
  .vip-grid {
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    align-items:stretch;
  }
  .vip-box-head:not(.vip-box-head) {
    flex: 0 0 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 8px 6px 6px;
  }
  .vip-box:not(.vip-box--compact) .vip-box-logo { max-height:28px; }
  .vip-box:not(.vip-box--compact) .vip-box-offer { padding:8px 6px; }
  .vip-box:not(.vip-box--compact) .vip-box-desc { font-size:9px; }
  .vip-box:not(.vip-box--compact) .vip-box-kod { font-size:8px; }
  .vip-box:not(.vip-box--compact) .vip-box-action { padding:8px 8px 10px; }
  .vip-box:not(.vip-box--compact) .vip-box-btn { min-height:28px; font-size:9px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) { min-height: 200px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
    flex: 0 0 82px;
    min-height: 82px;
    max-height: 82px;
    padding: 18px 8px 6px;
  }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo { max-height: 52px; }
  .ana-box.ana-box--elite:not(.vip-box--compact):hover .vip-box-logo { transform: scale(1.06); }
  .ana-box-crown { width: 20px; height: 20px; margin-left: -10px; top: 7px; }
  .ana-box-crown svg { width: 11px; height: 11px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-offer { padding: 4px 6px 6px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-desc { font-size: 9.5px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-action { padding: 0 10px 10px; }
  .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-btn { min-height: 32px; font-size: 10px; }
  .vip-box--compact { min-height: 148px !important; }
  .vip-box.vip-box--compact.ana-box { min-height: 148px !important; }
  .vip-box--compact .vip-box-head,
  .vip-box.vip-box--compact .vip-box-head {
    flex: 0 0 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 12px 7px 4px !important;
  }
  .vip-box--compact .vip-box-logo,
  .vip-box.vip-box--compact .vip-box-logo { max-height: 32px !important; }
  .vip-box.vip-box--compact .vip-box-offer { min-height: 38px !important; padding: 3px 7px 4px !important; }
  .vip-box.vip-box--compact .vip-box-desc { font-size: 8.5px !important; }
  .vip-box.vip-box--compact .vip-box-kod { font-size: 7.5px !important; }
  .vip-box.vip-box--compact .vip-box-action { padding: 0 8px 8px !important; }
  .vip-box.vip-box--compact .vip-box-btn { min-height: 26px !important; font-size: 8.5px !important; }
  .vip-box-btn--premium { min-height: 28px; font-size: 9px; }
  .sp-btn { font-size:10px; padding:4px 10px; }
}

/* FOOTER */
#site-footer {
  margin-left:var(--sb-w);
  background:rgba(3,5,10,0.72);
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:0;
  position:relative;
  z-index:1;
}

.footer-inner {
  max-width:1200px;
  margin:0 auto;
  padding:48px 32px 24px;
}

/* ?????? MASA??ST?? KOLON LAYOUT ?????? */
.footer-cols {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.footer-col-title {
  font-size:15px;
  font-weight:700;
  color:#e8f4ff;
  margin-bottom:18px;
  letter-spacing:.01em;
}

.footer-link {
  display:block;
  font-size:13.5px;
  font-weight:400;
  color:rgba(160,190,220,.6);
  text-decoration:none;
  padding:5px 0;
  transition:color .18s;
  letter-spacing:.01em;
}
.footer-link:hover { color:#e8f4ff; }

.footer-col--logo {
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding-top:4px;
}

.footer-brand-logo {
  height:96px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  opacity:0.95;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}

.footer-brand-mobile {
  display:none;
}

/* Sosyal ikonlar */
.footer-social {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.footer-social-btn {
  width:36px; height:36px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(180,210,240,.6);
  text-decoration:none;
  transition:background .2s, color .2s, transform .2s;
}
.footer-social-btn svg { width:16px; height:16px; }
.footer-social-btn[title="Telegram"]:hover { color:#26a5e4; background:rgba(38,165,228,.12); }
.footer-social-btn[title="Discord"]:hover  { color:#5865f2; background:rgba(88,101,242,.12); }
.footer-social-btn[title="Kick"]:hover     { color:#53fc18; background:rgba(83,252,24,.1); }
.footer-social-btn[title="Kick2"]:hover    { color:#53fc18; background:rgba(83,252,24,.1); }
.footer-social-btn[title="Instagram"]:hover{ color:#e1306c; background:rgba(225,48,108,.12); }
.footer-social-btn[title="YouTube"]:hover  { color:#ff0000; background:rgba(255,0,0,.1); }
.footer-social-btn:hover { transform:translateY(-2px); }

/* Copyright */
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-top:22px;
  font-size:13px;
  color:rgba(140,170,200,.45);
  letter-spacing:.02em;
}
.footer-bottom p { margin:0; }

@media (max-width:600px) {
  .footer-bottom { justify-content:center; text-align:center; }
}

.profile-crypto-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  margin-bottom:18px;
}
@media (max-width:640px) {
  .profile-crypto-grid { grid-template-columns:1fr; }
}

.home-reward-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
  padding: 22px 26px;
  border-radius: 18px;
  text-align: left;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(125deg, rgba(var(--primary-accent-rgb), 0.12) 0%, transparent 42%),
    radial-gradient(ellipse 70% 90% at 100% 50%, rgba(var(--primary-rgb), 0.14) 0%, transparent 58%),
    rgba(var(--surface-deep-rgb), 0.78);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-reward-band::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--primary-accent-rgb), 0.45) 40%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(var(--primary-accent-rgb), 0.45) 60%,
    transparent
  );
  pointer-events: none;
  opacity: 0.85;
}

.home-reward-band__left {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.home-reward-band__kicker {
  margin-bottom: 10px;
  color: rgba(var(--primary-accent-rgb), 0.88);
}

.home-reward-band__amount {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #faf8ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(var(--primary-accent-rgb), 0.22);
}

.home-reward-band__text {
  margin-top: 10px;
  font-size: 12px;
  font-weight: var(--site-font-weight-strong, 600);
  letter-spacing: 0.03em;
  color: rgba(190, 210, 235, 0.72);
  word-break: break-word;
  line-height: 1.45;
}

.home-reward-band__right {
  flex-shrink: 0;
  text-align: right;
  position: relative;
  z-index: 1;
  padding-left: 8px;
}

.home-reward-band__mark {
  font-size: 22px;
  line-height: 1;
  color: rgba(var(--primary-accent-rgb), 0.75);
  filter: drop-shadow(0 0 12px rgba(var(--primary-accent-rgb), 0.35));
}

.home-reward-band__until {
  margin-top: 8px;
  font-size: 10px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: 0.14em;
  color: rgba(170, 195, 225, 0.58);
}

@media (max-width: 600px) {
  .home-reward-band {
    gap: 14px;
    padding: 18px 16px;
    flex-wrap: wrap;
  }

  .home-reward-band__amount {
    font-size: 28px;
  }

  .home-reward-band__right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-left: 0;
  }

  .home-reward-band__until {
    margin-top: 0;
  }
}

.home-te-section { margin-top:26px; }
.home-te-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.home-te-heading {
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:0.06em;
  color:#eaf2fb;
  margin:0;
}
.home-te-all {
  font-size:13px;
  font-weight:700;
  color:var(--accent-color, #37c6ff);
  text-decoration:none;
  white-space:nowrap;
}
.home-te-all:hover { text-decoration:underline; }
.home-te-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.home-te-card {
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-te-card:hover {
  transform:translateY(-5px);
  border-color:rgba(var(--primary-accent-rgb),0.4);
  box-shadow:0 16px 34px rgba(0,0,0,0.42);
}
.home-te-media {
  position:relative;
  aspect-ratio:16/9;
  background:rgba(0,0,0,0.25);
  overflow:hidden;
}
.home-te-media img { width:100%; height:100%; object-fit:cover; display:block; }
.home-te-badge {
  position:absolute;
  top:8px;
  left:8px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:#eafff1;
  background:rgba(10,16,26,0.82);
  border:1px solid rgba(var(--primary-accent-rgb),0.4);
}
.home-te-body { padding:12px 14px 14px; }
.home-te-title {
  font-size:14px;
  font-weight:800;
  color:#eaf2fb;
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-te-prize {
  font-size:12.5px;
  color:rgba(210,225,245,0.75);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:820px) {
  .home-te-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .home-te-grid { grid-template-columns:1fr; }
}

/* Sidebar bitisigine yapisik kucuk "Cark Cevir" widget'i */
.wheel-rail {
  position:fixed;
  /* Sol kenari sidebarin altina girsin, sadece sag kismi disari ciksin */
  left:calc(var(--sb-w) - 20px);
  top:50%;
  transform:translateY(-50%);
  /* Sidebar z-index:90 -> rail altinda kalir, sidebarin altindan cikmis gorunur */
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:78px;
  padding:14px 8px 14px 26px;
  border:none;
  cursor:pointer;
  border-radius:0 18px 18px 0;
  color:#eaf6ff;
  overflow:hidden;
  background:linear-gradient(150deg, rgba(var(--primary-accent-rgb),0.92), rgba(10,16,26,0.96));
  box-shadow:8px 8px 26px rgba(0,0,0,0.5), inset 0 0 18px rgba(var(--primary-accent-rgb),0.25);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.wheel-rail:hover {
  transform:translateY(-50%) translateX(4px);
  box-shadow:12px 12px 32px rgba(0,0,0,0.55), inset 0 0 22px rgba(var(--primary-accent-rgb),0.45);
}
.wheel-rail__ring {
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 14px 1px rgba(var(--primary-accent-rgb),0.5), inset 0 0 0 1px rgba(140,205,255,0.28);
  opacity:0.5;
  animation:wheelRailGlow 2.6s ease-in-out infinite;
}
@keyframes wheelRailGlow {
  0%, 100% { opacity:0.3; }
  50% { opacity:0.85; }
}
.wheel-rail__icon {
  position:relative;
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition:transform 0.7s ease;
}
.wheel-rail:hover .wheel-rail__icon { transform:rotate(180deg); }
.wheel-rail__text {
  position:relative;
  font-size:10.5px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:0.04em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
@media (max-width:980px) {
  /* Mobilde sidebar gizli; alt aksiyon barinda cark zaten var */
  .wheel-rail { display:none; }
}

/* Uyari splash penceresi */
.splash-overlay {
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,7,14,0.78);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity 0.3s ease;
}
.splash-overlay.is-open { opacity:1; }
.splash-modal {
  position:relative;
  width:min(94vw, 440px);
  max-height:90vh;
  overflow:auto;
  border-radius:20px;
  background:linear-gradient(170deg, #0e1929, #070d16);
  border:1px solid rgba(var(--primary-accent-rgb),0.3);
  box-shadow:0 26px 70px rgba(0,0,0,0.6);
  transform:translateY(14px) scale(0.98);
  transition:transform 0.3s ease;
}
.splash-overlay.is-open .splash-modal { transform:translateY(0) scale(1); }
.splash-close {
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  cursor:pointer;
  color:#eaf2fb;
  background:rgba(0,0,0,0.5);
}
.splash-close:hover { background:rgba(0,0,0,0.75); }
.splash-close svg { width:18px; height:18px; }
.splash-media { width:100%; background:#000; }
.splash-media img { width:100%; height:auto; display:block; max-height:280px; object-fit:cover; }
.splash-body { padding:20px 22px 24px; text-align:center; }
.splash-title {
  margin:0 0 10px;
  font-size:1.25rem;
  font-weight:900;
  color:#eaf2fb;
}
.splash-desc {
  margin:0 0 18px;
  font-size:14px;
  line-height:1.55;
  color:rgba(210,225,245,0.82);
}
.splash-btn {
  display:inline-block;
  padding:12px 26px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  color:#061018;
  background:linear-gradient(180deg, rgba(var(--primary-accent-rgb),1), rgba(var(--primary-accent-rgb),0.82));
  box-shadow:0 10px 26px rgba(var(--primary-accent-rgb),0.35);
  transition:transform 0.2s ease;
}
.splash-btn:hover { transform:translateY(-2px); }

/* Bildirim (notification) zili + panel */
.notif-menu { position:relative; display:inline-flex; }
.notif-btn {
  position:relative;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  color:#dceaf7;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.notif-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(var(--primary-accent-rgb),0.4); }
.topbar-tg-btn {
  position:relative;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(34,158,217,0.4);
  border-radius:12px;
  background:rgba(34,158,217,0.12);
  color:#37aee2;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.topbar-tg-btn:hover { background:rgba(34,158,217,0.22); border-color:rgba(34,158,217,0.75); transform:translateY(-1px); }
.topbar-tg-btn svg { width:20px; height:20px; }
.notif-badge {
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  color:#fff;
  background:linear-gradient(180deg,#ff5b5b,#e11d48);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(225,29,72,0.5);
}
.notif-badge.hidden { display:none; }
.notif-panel {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(340px, 90vw);
  max-height:440px;
  overflow:auto;
  z-index:200;
  border-radius:14px;
  background:linear-gradient(180deg,#0f1a2b,#0a121e);
  border:1px solid rgba(var(--primary-accent-rgb),0.28);
  box-shadow:0 20px 48px rgba(0,0,0,0.55);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.notif-panel.is-open { opacity:1; transform:translateY(0); }
.notif-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  position:sticky;
  top:0;
  background:inherit;
}
.notif-panel-title { font-weight:800; color:#eaf2fb; font-size:14px; }
.notif-mark {
  border:none;
  background:transparent;
  color:var(--accent-color,#37c6ff);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.notif-mark:hover { text-decoration:underline; }
.notif-list { padding:6px; }
.notif-empty { padding:22px 14px; text-align:center; color:rgba(200,215,235,0.6); font-size:13px; margin:0; }
.notif-item {
  padding:10px 12px;
  border-radius:10px;
  margin:2px 0;
  border-left:3px solid transparent;
}
.notif-item.is-unread { background:rgba(var(--primary-accent-rgb),0.08); }
.notif-item--approved { border-left-color:#22c55e; }
.notif-item--success { border-left-color:#22c55e; }
.notif-item--rejected { border-left-color:#ef4444; }
.notif-item--warning { border-left-color:#f59e0b; }
.notif-item--info { border-left-color:#38bdf8; }
.notif-item-title { font-size:13.5px; font-weight:700; color:#eaf2fb; }
.notif-item-body { font-size:12.5px; color:rgba(210,225,245,0.78); margin-top:2px; line-height:1.4; }
.notif-item-time { font-size:11px; color:rgba(160,185,215,0.55); margin-top:4px; }
.notif-item--link { display:block; text-decoration:none; cursor:pointer; transition:background 0.15s ease; }
.notif-item--link:hover { background:rgba(var(--primary-accent-rgb),0.14); }

.notif-panel-foot {
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.notif-panel-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7dd3fc;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.notif-panel-more:hover {
  background: rgba(var(--primary-accent-rgb),0.12);
  color: #bae6fd;
}

/* Admin panel bildirim zili farkli tonda */
.notif-menu--admin .notif-btn { border-color:rgba(245,158,11,0.45); background:rgba(245,158,11,0.1); color:#ffd58a; }
.notif-menu--admin .notif-btn:hover { background:rgba(245,158,11,0.18); border-color:rgba(245,158,11,0.7); }

.notifications-page { max-width:860px; margin:0 auto; }
.notifications-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.notifications-page-title {
  font-size:1.45rem;
  font-weight:800;
  color:#eaf2fb;
  margin:0 0 6px;
}
.notifications-page-sub {
  margin:0;
  font-size:13px;
  color:rgba(170,195,225,0.7);
}
.notifications-page-clear {
  border:1px solid rgba(var(--primary-accent-rgb),0.35);
  background:rgba(var(--primary-accent-rgb),0.1);
  color:#b8e8ff;
  border-radius:10px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.notifications-page-clear:hover { background:rgba(var(--primary-accent-rgb),0.18); }
.notifications-page-empty {
  text-align:center;
  padding:48px 20px;
  color:rgba(180,205,230,0.65);
  font-size:14px;
}
.notifications-page-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.notif-page-item {
  padding:14px 16px;
  border-radius:14px;
  background:rgba(var(--surface-rgb),0.82);
  border:1px solid rgba(var(--primary-rgb),0.14);
  border-left:3px solid rgba(var(--primary-accent-rgb),0.5);
}
.notif-page-item.is-unread {
  background:rgba(var(--primary-accent-rgb),0.08);
  border-color:rgba(var(--primary-accent-rgb),0.22);
}
.notif-page-item--approved,
.notif-page-item--success { border-left-color:#22c55e; }
.notif-page-item--rejected { border-left-color:#ef4444; }
.notif-page-item--warning { border-left-color:#f59e0b; }
.notif-page-item-title { font-size:14px; font-weight:800; color:#eaf2fb; }
.notif-page-item-body { font-size:13px; color:rgba(205,220,245,0.8); margin-top:4px; line-height:1.45; }
.notif-page-item-time { font-size:11px; color:rgba(150,180,215,0.55); margin-top:6px; }
.notif-menu--admin .notif-badge { background:linear-gradient(180deg,#f59e0b,#d97706); box-shadow:0 2px 8px rgba(217,119,6,0.55); }

/* Hesap üst sekmeleri (Bilgilerim / Doğrulamalar) */
.account-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:22px;
  padding:6px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.account-tab {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:11px;
  font-size:14px;
  font-weight:700;
  color:rgba(200,218,238,0.72);
  text-decoration:none;
  transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.account-tab:hover { color:#eaf2fb; background:rgba(255,255,255,0.06); }
.account-tab.is-active {
  color:#fff;
  background:linear-gradient(135deg, rgba(var(--primary-accent-rgb),0.9), rgba(var(--primary-accent-rgb),0.55));
  box-shadow:0 8px 22px rgba(var(--primary-accent-rgb),0.35);
}
.account-tab svg { flex-shrink:0; }
@media (max-width:520px) {
  .account-tab { flex:1; justify-content:center; padding:10px 12px; }
}

/* Sponsorlar sayfası (F6) */
.sponsors-list { display:flex; flex-direction:column; gap:14px; }
.sponsor-row {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:16px 18px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
}
.sponsor-row-brand { display:flex; align-items:center; gap:14px; min-width:220px; flex:1; }
.sponsor-row-tier {
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.sponsor-row-tier--vip { color:#ffd76a; background:rgba(255,196,60,0.14); border:1px solid rgba(255,196,60,0.35); }
.sponsor-row-tier--ana { color:#7cc4ff; background:rgba(var(--primary-accent-rgb),0.14); border:1px solid rgba(var(--primary-accent-rgb),0.35); }
.sponsor-row-logo {
  width:130px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(0,0,0,0.28);
  padding:6px 10px;
}
.sponsor-row-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.sponsor-row-form { display:flex; align-items:center; gap:10px; flex:1; min-width:260px; }
.sponsor-row-input {
  flex:1;
  min-width:0;
  padding:11px 14px;
  border-radius:11px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.12);
  color:#eaf2fb;
  font-size:14px;
}
.sponsor-row-input:focus { outline:none; border-color:rgba(var(--primary-accent-rgb),0.6); box-shadow:0 0 0 3px rgba(var(--primary-accent-rgb),0.15); }
.sponsor-row-input:disabled { opacity:.5; cursor:not-allowed; }
.sponsor-row-btn {
  padding:11px 20px;
  border:none;
  border-radius:11px;
  font-weight:800;
  font-size:14px;
  color:#04121f;
  cursor:pointer;
  white-space:nowrap;
  background:linear-gradient(135deg, #37c6ff, rgba(var(--primary-accent-rgb),0.85));
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.sponsor-row-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--primary-accent-rgb),0.4); }
.sponsor-row-btn:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:640px) {
  .sponsor-row { flex-direction:column; align-items:stretch; }
  .sponsor-row-brand, .sponsor-row-form { min-width:0; width:100%; }
}

/* ?????? MOB?L ACCORDION ?????? */
.footer-accordion { display:none; }

.footer-acc-item {
  border-bottom:1px solid rgba(255,255,255,.07);
}

.footer-acc-btn {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:14px;
  font-weight:600;
  color:#e8f4ff;
  background:none;
  border:none;
  cursor:pointer;
  letter-spacing:.01em;
}

.footer-acc-arrow {
  font-size:10px;
  color:rgba(160,190,220,.5);
  transition:transform .25s;
}
.footer-acc-item.open .footer-acc-arrow { transform:rotate(90deg); }

.footer-acc-body {
  display:none;
  flex-direction:column;
  gap:4px;
  padding-bottom:16px;
}
.footer-acc-item.open .footer-acc-body { display:flex; }

.footer-acc-body a {
  font-size:13px;
  color:rgba(160,190,220,.6);
  text-decoration:none;
  padding:5px 0;
  transition:color .18s;
}
.footer-acc-body a:hover { color:#e8f4ff; }

.footer-acc-social {
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:8px;
}

/* ?????? RESPONSIVE ?????? */
@media (max-width:900px) {
  #site-footer { margin-left:0; }
  .footer-inner { padding:24px 16px 100px; }
  .footer-cols { display:none; }
  .footer-brand-mobile {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 0 22px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .footer-brand-mobile .footer-brand-logo {
    height:72px;
    max-width:min(78vw, 280px);
  }
  .footer-accordion { display:block; }
  .footer-bottom { padding-top:18px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   MARKET
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.mkt-empty {
  margin:28px 0 40px;
  padding:20px 18px;
  text-align:center;
  font-size:14px;
  color:rgba(160,200,240,.55);
  border:1px dashed rgba(var(--primary-rgb),.2);
  border-radius:14px;
  background:rgba(5,12,22,.4);
}

.mkt-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:20px 0 18px;
}
.mkt-title {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:700;
  color:#e8f4ff;
  letter-spacing:.01em;
}
.mkt-balance { font-size:13px; font-weight:500; color:rgba(160,200,240,.65); }
.mkt-balance strong { color:var(--primary-accent); font-weight:700; }
.mkt-coin-info { display:flex; align-items:center; gap:6px; }

/* Grid ??? 3 kolon */
.mkt-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.mkt-grid--single {
  max-width:520px;
  margin:0 auto;
  grid-template-columns:1fr;
}
.mkt-grid--single .mkt-card { cursor:default; }

/* Kart */
.mkt-card {
  border-radius:16px;
  overflow:hidden;
  background:rgba(var(--surface-rgb),0.78);
  border:1px solid rgba(var(--primary-rgb),.12);
  transition:transform .22s, box-shadow .22s, border-color .22s;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.mkt-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--primary-rgb),.28);
  border-color:rgba(var(--primary-rgb),.3);
}

/* Resim alan?? */
.mkt-card-img {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:rgb(var(--surface-raised-rgb));
  flex-shrink:0;
}
.mkt-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.mkt-card:hover .mkt-card-img img { transform:scale(1.04); }

/* Stok badge */
.mkt-stock-badge {
  position:absolute;
  top:10px; right:10px;
  background:rgba(10,18,32,.82);
  border:1px solid rgba(var(--primary-rgb),.2);
  backdrop-filter:blur(8px);
  border-radius:8px;
  padding:3px 10px;
  font-size:11px;
  font-weight:600;
  color:rgba(180,215,255,.8);
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:5px;
}
.mkt-stock-badge::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--primary-accent);
  box-shadow:0 0 6px var(--primary-accent);
  flex-shrink:0;
}

/* ???erik */
.mkt-card-body {
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.mkt-card-title {
  font-size:19px;
  font-weight:700;
  color:#e8f4ff;
  letter-spacing:.01em;
  line-height:1.3;
}
.mkt-card-desc {
  font-size:14px;
  font-weight:400;
  color:rgba(140,175,215,.65);
  line-height:1.55;
}

/* Footer */
.mkt-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
  gap:10px;
}
.mkt-price {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:19px;
  font-weight:700;
  color:var(--primary-accent);
}
.mkt-btn {
  padding:10px 22px;
  border-radius:10px;
  background:var(--theme-btn-gradient);
  border:none;
  color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(var(--primary-rgb),.3);
  white-space:nowrap;
}
.mkt-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--primary-rgb),.45); }
.mkt-btn:active { transform:translateY(0); }
.mkt-btn:disabled,
.mkt-btn[disabled] {
  opacity:.42;
  cursor:not-allowed;
  transform:none;
  box-shadow:0 2px 8px rgba(0,80,140,.15);
}
.mkt-btn:disabled:hover { transform:none; opacity:.42; }

/* bottom bar active tab */
.bb-tab.active { color:#fff !important; }

/* Market responsive */
@media (max-width:1100px) {
  .mkt-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
}
@media (max-width:900px) {
  /* Mobilde dikey kart ??? t??pk?? g??rseldeki gibi */
  .mkt-grid { grid-template-columns:1fr; gap:14px; }
  .mkt-card { flex-direction:column; border-radius:16px; }
  .mkt-card-img { width:100%; aspect-ratio:16/9; height:auto; }
  .mkt-card-body { padding:14px 16px 16px; gap:8px; }
  .mkt-card-title { font-size:18px; }
  .mkt-card-desc { font-size:13.5px; }
  .mkt-price { font-size:18px; }
  .mkt-btn { padding:10px 20px; font-size:14px; }
  .mkt-header { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:480px) {
  .mkt-grid { gap:12px; }
  .mkt-card-body { padding:12px 14px 14px; }
  .mkt-card-title { font-size:17px; }
  .mkt-card-desc { font-size:13px; }
  .mkt-price { font-size:17px; }
  .mkt-btn { padding:9px 18px; font-size:13px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   AUTH BUTTON
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.auth-btn {
  padding:8px 18px;
  border-radius:9px;
  background:var(--theme-btn-gradient);
  border:none;
  outline:none;
  color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:box-shadow .2s;
  box-shadow:0 6px 22px var(--theme-btn-shadow);
  white-space:nowrap;
}
.auth-btn:hover {
  background:var(--theme-btn-gradient);
  box-shadow:0 6px 22px var(--theme-btn-shadow);
}
.auth-btn:focus-visible {
  box-shadow:0 0 0 2px rgba(255,255,255,.45), 0 6px 22px var(--theme-btn-shadow);
}
@media (max-width:640px) { .auth-btn { font-size:11px; padding:6px 12px; } }

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   AUTH MODAL
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.auth-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.auth-overlay.show { opacity:1; pointer-events:all; }

.auth-modal {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.94);
  z-index:510;
  width:min(94vw, 460px);
  max-height:min(92vh, 720px);
  overflow-y:auto;
  background:rgba(5,10,20,0.97);
  border:1px solid rgba(var(--primary-rgb),.15);
  border-radius:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--primary-rgb),.08);
  overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.auth-modal.show { opacity:1; pointer-events:all; transform:translate(-50%,-50%) scale(1); }

.market-msg-modal .market-msg-icon {
  color:#f59e0b;
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.1);
}
.market-tg-modal .market-tg-icon {
  color:#38bdf8;
  border-color:rgba(56,189,248,.35);
  background:rgba(56,189,248,.1);
}

.auth-modal-close {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.06);
  border:none; color:rgba(160,190,220,.6);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, color .2s;
  z-index:2;
}
.auth-modal-close:hover { background:rgba(255,255,255,.12); color:#fff; }
.auth-modal-close svg { width:14px; height:14px; }

/* ?????? SITE POPUP ??????????????????????????????????????????????????????????????????????????????????????? */
.site-popup-desc {
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(232, 244, 255, 0.96);
  text-shadow: 0 0 22px rgba(var(--primary-accent-rgb), 0.22), 0 2px 14px rgba(0, 0, 0, 0.55);
}

.site-popup-logo-wrap {
  margin: 0 auto 12px;
  display: block;
  text-align: center;
}

.site-popup-logo-img {
  width: auto;
  max-width: min(88vw, 280px);
  max-height: 160px;
  height: auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.site-popup-kod {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-family: ui-monospace, monospace;
  color: rgba(126, 224, 255, 0.95);
  text-shadow: 0 0 14px rgba(var(--primary-accent-rgb), 0.35);
}

/* Popup ??? ana sponsor kartlar??yla ayn?? vurgu (CSS de??i??kenleri inline) */
.auth-modal.site-popup-modal--themed {
  max-height: min(92vh, 720px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  animation: sponsorPulseThemed 3s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}

.site-popup-modal-layers {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.site-popup-modal-base {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.97);
}

.site-popup-modal-accent {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.28),
    rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), 0.1)
  );
}

.site-popup-modal-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.72) 100%);
}

.site-popup-modal-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 20px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-popup-modal--themed .auth-modal-close {
  z-index: 5;
  color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.75);
}

.site-popup-modal--themed .auth-modal-close:hover {
  color: #fff;
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.18);
}

.site-popup-modal--themed .site-popup-fallback-icon {
  color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.95);
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35);
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12);
}

.site-popup-modal--themed .site-popup-desc {
  color: rgba(240, 248, 255, 0.97);
  text-shadow:
    0 0 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35),
    0 2px 14px rgba(0, 0, 0, 0.55);
}

.site-popup-modal--themed .site-popup-kod {
  margin: 12px auto 0;
  padding: 7px 12px;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-family: ui-monospace, monospace;
  color: rgba(255, 252, 248, 0.98);
  background: linear-gradient(
    145deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.42),
    rgba(0, 0, 0, 0.35)
  );
  border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.75);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.site-popup-modal--themed .site-popup-submit {
  background: linear-gradient(
    135deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.82),
    rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), 0.52)
  ) !important;
  border: none !important;
  box-shadow:
    0 8px 28px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.42),
    0 0 0 1px rgba(0, 0, 0, 0.2) inset !important;
  color: #fff !important;
  text-decoration: none;
  display: block;
  text-align: center;
  box-sizing: border-box;
}

.site-popup-modal--themed .site-popup-submit:hover {
  opacity: 1;
  transform: none;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.82),
    rgba(var(--accent-r2), var(--accent-g2), var(--accent-b2), 0.52)
  ) !important;
  box-shadow:
    0 8px 28px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.42),
    0 0 0 1px rgba(0, 0, 0, 0.2) inset !important;
}

/* Sekmeler ??? ??er??eve yok; aktif sekme VIP/popup butonu hissi (dolu gradient, beyaz yaz??) */
.auth-tabs {
  display:flex;
  gap:0;
  border-bottom:none;
}
.auth-tab {
  flex:1;
  padding:16px;
  background:rgba(255,255,255,.06);
  border:none;
  outline:none;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:14px;
  font-weight:600;
  color:rgba(180,205,230,.55);
  cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s;
  letter-spacing:.01em;
}
.auth-tab.active {
  background:var(--theme-btn-gradient);
  color:#fff;
  box-shadow:0 6px 20px var(--theme-btn-shadow);
}
.auth-tab.active:hover {
  background:var(--theme-btn-gradient);
  color:#fff;
  box-shadow:0 6px 20px var(--theme-btn-shadow);
}
.auth-tab:not(.active):hover {
  background:rgba(255,255,255,.09);
  color:rgba(220,235,255,.75);
}

/* Form */
.auth-form {
  padding:24px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-form.hidden { display:none; }

.auth-form-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}
.auth-icon {
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-accent);
}
.auth-icon svg { width:24px; height:24px; }
.auth-form-head h2 {
  font-size:15px;
  font-weight:700;
  color:#e8f4ff;
  letter-spacing:.01em;
  text-align:center;
}

/* Alan */
.auth-field {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.auth-field label {
  font-size:12px;
  font-weight:600;
  color:rgba(160,190,220,.65);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.auth-input-wrap {
  position:relative;
  display:flex;
  align-items:center;
}
.auth-input-wrap > svg {
  position:absolute;
  left:12px;
  width:16px; height:16px;
  color:rgba(120,160,200,.5);
  flex-shrink:0;
  pointer-events:none;
}
.auth-input-wrap input {
  width:100%;
  padding:11px 40px 11px 38px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(var(--primary-rgb),.12);
  border-radius:10px;
  color:#e8f4ff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13.5px;
  font-weight:400;
  outline:none;
  transition:border-color .2s, background .2s;
}
.auth-input-wrap input::placeholder { color:rgba(120,155,195,.4); }
.auth-input-wrap input:focus {
  border-color:rgba(var(--primary-rgb),.45);
  background:rgba(var(--primary-rgb),.06);
}

.pass-toggle {
  position:absolute; right:10px;
  background:none; border:none;
  color:rgba(120,160,200,.6);
  cursor:pointer; padding:4px;
  display:flex; align-items:center;
  transition:color .2s;
}
.pass-toggle:hover { color:var(--primary-accent); }
.pass-toggle svg { width:16px; height:16px; }

.auth-hint {
  font-size:11px;
  color:rgba(120,155,195,.5);
  letter-spacing:.02em;
}

/* Submit */
.auth-submit {
  width:100%;
  padding:13px;
  border-radius:11px;
  background:var(--theme-btn-gradient);
  border:none;
  outline:none;
  color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  transition:box-shadow .2s;
  box-shadow:0 8px 26px var(--theme-btn-shadow-hover);
  margin-top:4px;
}
.auth-submit:hover {
  background:var(--theme-btn-gradient);
  box-shadow:0 8px 26px var(--theme-btn-shadow-hover);
}
.auth-submit:focus-visible {
  box-shadow:0 0 0 2px rgba(255,255,255,.45), 0 8px 26px var(--theme-btn-shadow-hover);
}

.auth-switch {
  font-size:12.5px;
  color:rgba(140,175,215,.55);
  text-align:center;
}
.auth-switch a {
  color:var(--primary-accent);
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
}
.auth-switch a:hover { text-decoration:underline; }

.auth-alert {
  padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.45;
}
.auth-alert-error {
  background:rgba(255,60,60,.1); border:1px solid rgba(255,80,80,.25); color:#ffb4b4;
}
.auth-error-list { margin:0; padding-left:18px; }
.auth-check {
  display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(160,190,220,.7);
  cursor:pointer; user-select:none;
}
.auth-check input { width:16px; height:16px; accent-color:var(--primary); }
.auth-select {
  width:100%; padding:11px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(var(--primary-rgb),.12);
  border-radius:10px; color:#e8f4ff;
  font-family:var(--site-font-family, 'Sora', sans-serif); font-size:13.5px;
}
.auth-label-block {
  font-size:12px; font-weight:600; color:rgba(160,190,220,.65);
  letter-spacing:.04em; text-transform:uppercase;
}
.auth-avatar-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.auth-avatar-grid--nine,
.profile-avatar-grid--nine {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  max-width:340px;
  margin:0 auto;
}
.avatar-setup-card {
  max-width:440px; margin:0 auto 48px;
  padding:26px 24px 30px;
  background:rgba(var(--bg-dark-rgb),.72); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.avatar-setup-lead {
  margin:0 0 20px; font-size:14px; color:rgba(180,205,235,.72); line-height:1.55; text-align:center;
}
.avatar-setup-form { display:flex; flex-direction:column; align-items:center; gap:20px; }
.avatar-setup-submit { margin-top:4px; }
.auth-avatar-grid.hidden { display:none !important; }
.auth-avatar-opt {
  position:relative; display:block; cursor:pointer; border-radius:12px;
  border:2px solid rgba(255,255,255,.08);
  overflow:hidden; aspect-ratio:1/1;
  transition:border-color .2s, box-shadow .2s;
}
.auth-avatar-opt img { width:100%; height:100%; object-fit:cover; display:block; }
.auth-avatar-opt input {
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.auth-avatar-opt:has(input:checked) {
  border-color:rgba(var(--primary-rgb),.75);
  box-shadow:0 0 16px rgba(var(--primary-rgb),.25);
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   PROF?L SAYFASI
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.profile-flash {
  margin-bottom:14px; padding:12px 16px; border-radius:12px;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28);
  color:#b6f5c8; font-size:13px;
}
.profile-flash--error {
  background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28); color:#fca5a5;
}
.profile-layout {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  max-width:1200px;
  margin:0 auto 40px;
  align-items:start;
}
.profile-layout > .account-tabs,
.profile-layout > .profile-flash,
.profile-layout > .profile-card--hero { grid-column:1 / -1; }
.profile-stack {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.profile-card--password .profile-muted { margin-bottom:12px; }
.profile-card--password .profile-form { gap:14px; }
@media (max-width: 820px) {
  .profile-layout { grid-template-columns:1fr; }
}
.profile-card {
  background:rgba(var(--bg-dark-rgb),.72); border:1px solid rgba(255,255,255,.07);
  border-radius:16px; padding:22px 24px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.profile-card--hero { position:relative; overflow:hidden; padding:0; }
.profile-hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.2) 0%, rgba(var(--bg-dark-rgb),.95) 55%);
  pointer-events:none;
}
.profile-hero-inner {
  position:relative; display:flex; align-items:center; gap:20px;
  padding:24px 22px;
}
.profile-hero-avatar {
  width:100px; height:100px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(var(--primary-rgb),.4); flex-shrink:0;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.profile-hero-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-hero-text { min-width:0; }
.profile-hero-brand { margin-left:auto; flex-shrink:0; display:flex; align-items:center; padding-left:14px; }
.profile-hero-brand-logo {
  height:96px; width:auto; max-width:240px; object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
@media (max-width:720px) {
  .profile-hero-brand { display:none; }
}
.profile-display-name {
  margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; letter-spacing:.02em;
}
.profile-badge {
  display:inline-block; padding:4px 10px; border-radius:8px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.profile-badge--admin {
  background:rgba(var(--primary-rgb),.15); border:1px solid rgba(var(--primary-rgb),.35); color:color-mix(in srgb, var(--primary-accent) 72%, #ffffff 28%);
}
.profile-email { margin:0 0 10px; font-size:13px; color:rgba(180,205,235,.65); }
.profile-coins-row { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--primary-accent); }
.profile-coins-label { font-size:12px; font-weight:600; color:rgba(140,175,215,.5); text-transform:uppercase; letter-spacing:.06em; }
.profile-section-title {
  margin:0 0 12px; font-size:14px; font-weight:800; color:var(--primary);
  letter-spacing:.06em; text-transform:uppercase;
}
.profile-muted { margin:0 0 16px; font-size:13px; color:rgba(160,185,215,.55); line-height:1.5; }
.profile-link-btn {
  display:inline-flex; padding:10px 18px; border-radius:10px;
  background:var(--theme-btn-gradient); color:#fff; font-weight:700;
  text-decoration:none; font-size:13px;
}
.profile-form { display:flex; flex-direction:column; gap:18px; }
.profile-field { display:flex; flex-direction:column; gap:8px; }
.profile-field label, .profile-label {
  font-size:12px; font-weight:600; color:rgba(160,190,220,.65); text-transform:uppercase; letter-spacing:.04em;
}
.profile-select {
  padding:11px 12px; border-radius:10px; border:1px solid rgba(var(--primary-rgb),.15);
  background:rgba(255,255,255,.05); color:#e8f4ff; font-family:'Sora',sans-serif; font-size:14px;
}
.profile-avatar-grid {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
.profile-avatar-grid.hidden { display:none !important; }
.profile-avatar-opt {
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  border:2px solid rgba(255,255,255,.08); aspect-ratio:1/1;
  transition:border-color .2s, box-shadow .2s;
}
.profile-avatar-opt img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-avatar-opt input {
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.profile-avatar-opt:has(input:checked) {
  border-color:rgba(var(--primary-rgb),.8); box-shadow:0 0 18px rgba(var(--primary-rgb),.22);
}
.profile-errors { margin:0; padding-left:18px; color:#ff9a9a; font-size:13px; }
.profile-save-btn {
  align-self:flex-start; padding:12px 28px; border-radius:11px; border:none; cursor:pointer;
  font-family:var(--site-font-family, 'Sora', sans-serif); font-weight:700; font-size:14px; color:#fff;
  background:var(--theme-btn-gradient); box-shadow:0 6px 20px rgba(var(--primary-rgb),.3);
}
.profile-save-btn--ghost {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(var(--primary-rgb),.22);
  box-shadow:none;
  color:#b8ecff;
}
.profile-save-btn--ghost:hover {
  background:rgba(var(--primary-rgb),.1);
  border-color:rgba(var(--primary-rgb),.35);
}
.profile-select[type="password"] {
  letter-spacing:0.04em;
}
.profile-dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:14px; }
.profile-dl dt { color:rgba(140,175,215,.45); font-weight:600; }
.profile-dl dd { margin:0; color:#e8f4ff; font-weight:600; }

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   HERO PARTICLES
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
#hero-particles {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}
#hero-particles.hero-particles--off {
  display:none !important;
}

.site-snow-canvas {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.site-snow-canvas--off {
  display:none !important;
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   ETK?NL?KLER BO?? DURUM
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.evt-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px;
  gap:20px;
}

.evt-icon-wrap {
  position:relative;
  width:100px; height:100px;
  display:flex; align-items:center; justify-content:center;
}

.evt-icon-wrap svg {
  width:80px; height:80px;
  color:var(--primary);
  filter:drop-shadow(0 0 18px rgba(var(--primary-rgb),.45));
  position:relative; z-index:1;
}

.evt-icon-glow {
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(var(--primary-rgb),.14) 0%, transparent 70%);
  animation:evtPulse 2.8s ease-in-out infinite;
}

@keyframes evtPulse {
  0%,100% { transform:scale(1); opacity:.8; }
  50%      { transform:scale(1.18); opacity:1; }
}

.evt-empty-title {
  font-size:22px;
  font-weight:700;
  color:#e8f4ff;
  letter-spacing:.01em;
}

.evt-empty-sub {
  font-size:13px;
  font-weight:600;
  color:rgba(120,160,200,.5);
  letter-spacing:.06em;
  text-transform:uppercase;
  max-width:380px;
  line-height:1.6;
}

.evt-dots {
  display:flex;
  gap:8px;
  margin-top:4px;
}
.evt-dots span {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--primary);
  opacity:.35;
  animation:evtDot 1.4s ease-in-out infinite;
}
.evt-dots span:nth-child(2) { animation-delay:.2s; }
.evt-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes evtDot {
  0%,100% { opacity:.25; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.3); }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   ETK?NL?KLER ??? kartlar & detay (mavi tema)
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.evt-page-head { margin:18px 0 20px; }
.evt-page-title {
  display:flex; align-items:center; gap:10px;
  font-size:19px; font-weight:700; color:#e8f4ff; letter-spacing:.02em;
}

.evt-card-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:40px;
}

.events-card-grid .evt-card {
  height:100%;
}

.evt-card-head-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.evt-card-status {
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  padding:4px 8px;
  border-radius:20px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  color:#e8f4ff;
  white-space:nowrap;
}
.evt-card-status--active { color:#7dffb8; border-color:rgba(125,255,184,.3); }
.evt-card-status--closed { color:#ffb86c; border-color:rgba(255,184,108,.3); }
.evt-card-status--completed { color:#a78bff; border-color:rgba(167,139,255,.3); }

.evt-card-prize {
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--primary-accent);
}

.evt-card-desc {
  margin:0;
  font-size:12.5px;
  color:rgba(160,200,240,.65);
  line-height:1.5;
}

.evt-card-ends {
  margin:0;
  font-size:12px;
  color:rgba(160,195,230,.6);
}

.evt-stat-val--coin {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.evt-card-winner {
  background:rgba(167,139,255,.1);
  border:1px solid rgba(167,139,255,.22);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  color:rgba(200,210,255,.85);
}
.evt-card-winner-label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(167,139,255,.85);
  margin-bottom:4px;
}
.evt-card-winner code {
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.25);
  font-family:ui-monospace, monospace;
}

.evt-my-codes-label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:rgba(160,200,240,.7);
  margin-bottom:6px;
}
.evt-code-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
}
.evt-code-chip {
  font-family:ui-monospace, monospace;
  font-size:11px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:var(--primary-accent);
}

.evt-page-info { margin-top:18px; }

@media (max-width:900px) {
  .evt-card-grid,
  .events-card-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .evt-page-info { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* legacy auto-fill fallback */
.evt-card-grid:not(.events-card-grid) {
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:20px;
}

.evt-card {
  border-radius:16px;
  overflow:hidden;
  background:rgba(var(--surface-rgb),0.82);
  border:1px solid rgba(var(--primary-rgb),.12);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
}

.evt-card-banner {
  aspect-ratio:16/10;
  background:rgb(var(--surface-raised-rgb));
  overflow:hidden;
}
.evt-card-banner img { width:100%; height:100%; object-fit:cover; display:block; }

.evt-card-body {
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.evt-card-title {
  margin:0;
  font-size:17px;
  font-weight:700;
  color:#f0f7ff;
  line-height:1.35;
}

.evt-cd-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  background:rgba(0,0,0,.28);
  border-radius:12px;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.05);
}

.evt-cd-cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}

.evt-cd-num {
  font-size:20px;
  font-weight:800;
  color:var(--primary-accent);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.evt-cd-lbl {
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(160,195,230,.55);
}

.evt-stat-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.evt-stat-box {
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.evt-stat-lbl {
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(150,185,220,.5);
}

.evt-stat-val {
  font-size:14px;
  font-weight:700;
  color:#e8f4ff;
}

a.evt-btn, button.evt-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:12px 18px;
  border-radius:11px;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  margin-top:auto;
}

.evt-btn-primary {
  background:var(--theme-btn-gradient);
  color:#fff;
  box-shadow:0 4px 16px rgba(0,120,200,.35);
}
.evt-btn-primary:hover { opacity:.95; transform:translateY(-1px); box-shadow:0 6px 22px rgba(var(--primary-rgb),.45); }

.evt-btn-outline {
  background:rgba(0,40,80,.25);
  color:#7dd3fc;
  border:1.5px solid rgba(var(--primary-rgb),.45);
  box-shadow:none;
}
.evt-btn-outline:hover { background:rgba(var(--primary-rgb),.12); color:#e0f4ff; }

.evt-btn-disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }

.evt-back-nav { margin:8px 0 20px; }
.evt-back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:rgba(140,185,230,.75);
  text-decoration:none;
}
.evt-back-link:hover { color:var(--primary-accent); }

.evt-detail-layout {
  display:grid;
  grid-template-columns:minmax(280px, 360px) 1fr;
  gap:28px;
  align-items:start;
  margin-bottom:48px;
}

.evt-detail-aside { display:flex; flex-direction:column; gap:16px; }

.evt-detail-banner {
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(var(--primary-rgb),.12);
  background:rgb(var(--surface-raised-rgb));
  aspect-ratio:4/5;
  max-height:420px;
}
.evt-detail-banner img { width:100%; height:100%; object-fit:cover; display:block; }

.evt-detail-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.evt-date-row { display:flex; flex-direction:column; gap:10px; }

.evt-date-box {
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  padding:12px 14px;
}

.evt-date-ico { color:var(--primary-accent); flex-shrink:0; opacity:.85; }

.evt-date-lbl {
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(150,185,220,.5);
}

.evt-date-val {
  font-size:15px;
  font-weight:700;
  color:#f0f7ff;
}

.evt-detail-main { min-width:0; }

.evt-detail-title {
  margin:0 0 18px;
  font-size:clamp(20px, 2.5vw, 26px);
  font-weight:800;
  color:#fff;
  line-height:1.25;
  letter-spacing:.01em;
}

.evt-detail-empty {
  font-size:14px;
  color:rgba(160,195,230,.55);
  line-height:1.55;
}

.evt-detail-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.evt-detail-li {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
}

.evt-detail-icon {
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  background:rgba(var(--primary-rgb),.08);
  border-radius:10px;
  border:1px solid rgba(var(--primary-rgb),.15);
}

.evt-detail-text {
  font-size:14px;
  line-height:1.55;
  color:rgba(200,220,245,.88);
  padding-top:2px;
}

.evt-join-modal .evt-join-modal-icon {
  color:#38bdf8;
  border-color:rgba(56,189,248,.35);
  background:rgba(56,189,248,.1);
}

.evt-join-code-box {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:8px 0 4px;
}

.evt-join-code-box code {
  display:block;
  width:100%;
  text-align:center;
  font-family:ui-monospace, monospace;
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  color:#7dd3fc;
  background:rgba(0,30,60,.5);
  border:1px solid rgba(var(--primary-rgb),.25);
  border-radius:12px;
  padding:16px 14px;
  word-break:break-all;
}

.evt-join-copy { width:auto !important; min-width:140px; margin-top:0 !important; }

.evt-join-no-code {
  text-align:center;
  font-size:13px;
  color:rgba(160,195,230,.65);
  line-height:1.5;
  margin:0;
}

@media (max-width:900px) {
  .evt-detail-layout { grid-template-columns:1fr; }
  .evt-detail-banner { max-height:none; aspect-ratio:16/10; }
  .evt-cd-num { font-size:17px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   G??REV KARTLARI
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.task-info {
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(var(--primary-rgb),.07);
  border:1px solid rgba(var(--primary-rgb),.18);
  border-radius:14px;
  padding:16px 20px;
  margin:18px 0 22px;
}
.task-info-icon {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--primary-rgb),.12);
  border-radius:50%;
  color:var(--primary-accent);
}
.task-info-icon svg { width:20px; height:20px; }
.task-info-text h3 {
  font-size:14px; font-weight:700; color:#e8f4ff;
  margin-bottom:4px;
}
.task-info-text p {
  font-size:13px; color:rgba(160,200,240,.7); line-height:1.5;
}
.task-info-text strong { color:var(--primary-accent); font-weight:700; }

/* Grid ??? 3 kolon masa??st??, 1 mobil */
.task-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

/* Kart */
.task-card {
  background:rgba(var(--surface-rgb),0.82);
  border:1px solid rgba(var(--primary-rgb),.13);
  border-radius:16px;
  padding:18px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .2s, box-shadow .2s, border-color .22s;
  position:relative;
  overflow:hidden;
}
.task-card::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.05) 0%, transparent 60%);
  pointer-events:none;
}
.task-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--primary-rgb),.25);
  border-color:rgba(var(--primary-rgb),.28);
}

.task-card-left {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Platform ikonu */
.task-platform-icon {
  width:46px; height:46px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.task-platform-icon svg,
.task-platform-icon .social-brand-icon { width:24px; height:24px; }

.task-icon-tg  { background:rgba(38,165,228,.18); color:#26a5e4; }
.task-icon-dc  { background:rgba(88,101,242,.18); color:#5865f2; }
.task-icon-yt  { background:rgba(255,0,0,.15); color:#ff4444; }
.task-icon-ig  { background:rgba(225,48,108,.16); color:#e1306c; }
.task-icon-kk  { background:rgba(83,252,24,.14); color:#53fc18; }
.task-icon-tw  { background:rgba(145,70,255,.18); color:#9146ff; }
.task-icon-daily { background:rgba(var(--primary-rgb),.15); color:var(--primary-accent); }
.task-icon-reg   { background:rgba(var(--primary-rgb),.15); color:var(--primary-accent); }
.task-icon-profile{ background:rgba(var(--primary-rgb),.15); color:var(--primary-accent); }

/* Badge */
.task-badge {
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:20px;
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:var(--primary-accent);
  white-space:nowrap;
}
.task-badge-other {
  background:rgba(130,80,255,.12);
  border-color:rgba(130,80,255,.22);
  color:#a78bff;
}

/* G??vde */
.task-card-body { display:flex; flex-direction:column; gap:12px; flex:1; }
.task-card-title {
  font-size:16px; font-weight:700; color:#e8f4ff; margin:0; line-height:1.35;
}
.task-submission-status {
  font-size:12px; font-weight:600; margin:0;
}
.task-submission-status--pending { color:#fbbf24; }
.task-submission-status--approved { color:#4ade80; }
.task-submission-status--rejected { color:#f87171; }
.task-gate-hint {
  font-size:12px; color:rgba(251,191,36,.9); margin:0; line-height:1.45;
}
.task-actions {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}
.task-btn--ghost {
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.28);
  box-shadow:none;
  color:var(--primary-accent);
}
.task-desc {
  font-size:13.5px; font-weight:500;
  color:rgba(180,210,240,.78);
  line-height:1.55;
}

/* Footer */
.task-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.task-reward {
  display:flex; align-items:center; gap:6px;
  font-size:17px; font-weight:700; color:var(--primary-accent);
}
.task-reward span:first-child { font-size:15px; }

/* Kazan butonu */
.task-btn {
  padding:8px 22px;
  border-radius:10px;
  background:var(--theme-btn-gradient);
  border:none; color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px; font-weight:700;
  cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(var(--primary-rgb),.28);
  white-space:nowrap;
}
.task-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--primary-rgb),.42); }
.task-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.task-modal-logo-link {
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:inherit;
  outline:none;
}
.task-modal-logo-visual .task-platform-icon { width:56px; height:56px; margin:0 auto; }
.task-modal-logo-visual .task-platform-icon svg,
.task-modal-logo-visual .task-platform-icon .social-brand-icon { width:28px; height:28px; }
.task-modal-logo-visual img {
  display:block;
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:14px;
}

@media (max-width:900px) {
  .task-grid { grid-template-columns:1fr; gap:12px; }
  .task-info { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   B?LETLER
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.ticket-info {
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(var(--primary-rgb),.07);
  border:1px solid rgba(var(--primary-rgb),.18);
  border-radius:14px;
  padding:16px 20px;
  margin:18px 0 22px;
}
.ticket-info-icon {
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--primary-rgb),.12);
  border-radius:50%;
  color:var(--primary-accent);
}
.ticket-info-icon svg { width:20px; height:20px; }
.ticket-info-text h3 {
  font-size:14px; font-weight:700; color:#e8f4ff;
  margin-bottom:4px;
}
.ticket-info-text p {
  font-size:13px; color:rgba(160,200,240,.7); line-height:1.5;
}

.ticket-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.ticket-card {
  background:rgba(var(--surface-rgb),0.82);
  border:1px solid rgba(var(--primary-rgb),.13);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .22s;
  position:relative;
}
.ticket-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--primary-rgb),.25);
  border-color:rgba(var(--primary-rgb),.28);
}

.ticket-card-media {
  position:relative;
  aspect-ratio:16/9;
  background:rgba(0,0,0,.25);
  overflow:hidden;
}
.ticket-card-media img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ticket-card-status {
  position:absolute; top:10px; right:10px;
  font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:20px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  color:#e8f4ff;
  backdrop-filter:blur(6px);
}
.ticket-card-status--active { color:#7dffb8; border-color:rgba(125,255,184,.35); }
.ticket-card-status--closed { color:#ffb86c; border-color:rgba(255,184,108,.35); }
.ticket-card-status--completed { color:#a78bff; border-color:rgba(167,139,255,.35); }

.ticket-card-body {
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.ticket-card-title {
  font-size:15px; font-weight:700; color:#e8f4ff;
  line-height:1.35;
}
.ticket-card-prize {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600;
  color:var(--primary-accent);
}
.ticket-card-prize svg { width:14px; height:14px; flex-shrink:0; }
.ticket-card-desc {
  font-size:12.5px; color:rgba(160,200,240,.65);
  line-height:1.5;
}

.ticket-progress {
  height:6px; border-radius:6px;
  background:rgba(var(--primary-rgb),.12);
  overflow:hidden;
}
.ticket-progress-bar {
  height:100%;
  background:linear-gradient(90deg, var(--primary-accent), rgba(var(--primary-rgb),.6));
  border-radius:6px;
  transition:width .35s ease;
}
.ticket-progress-label,
.ticket-ends {
  font-size:12px; color:rgba(160,195,230,.6);
  margin:0;
}

.ticket-winner {
  background:rgba(167,139,255,.1);
  border:1px solid rgba(167,139,255,.22);
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
  color:rgba(200,210,255,.85);
}
.ticket-winner-label {
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(167,139,255,.85);
  margin-bottom:4px;
}
.ticket-winner-code {
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.25);
  font-family:ui-monospace, monospace;
  font-size:12px;
  color:#c8d8ff;
}

.ticket-my-codes-label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:rgba(160,200,240,.7);
  margin-bottom:6px;
}
.ticket-code-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.ticket-code-chip {
  font-family:ui-monospace, monospace;
  font-size:11px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:var(--primary-accent);
}

.ticket-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
}
.ticket-cost {
  display:flex; align-items:center; gap:6px;
  font-size:16px; font-weight:700;
  color:var(--primary-accent);
}
.ticket-btn {
  padding:8px 20px;
  border-radius:10px;
  background:var(--theme-btn-gradient);
  border:none; color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px; font-weight:700;
  cursor:pointer;
  transition:opacity .2s, transform .15s, box-shadow .2s;
  box-shadow:0 4px 14px rgba(var(--primary-rgb),.28);
  white-space:nowrap;
}
.ticket-btn:hover { opacity:.9; transform:translateY(-1px); }
.ticket-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.tickets-empty {
  text-align:center;
  color:rgba(160,195,230,.65);
  padding:40px 16px;
  font-size:14px;
}

@media (max-width:900px) {
  .ticket-grid { grid-template-columns:1fr; gap:12px; }
  .ticket-info { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Biletler — referans kart tasarımı (v2) */
.ticket-grid--v2 {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.ticket-card.ticket-card--v2 {
  display:flex;
  flex-direction:row;
  align-items:stretch;
  min-height:172px;
  padding:12px;
  gap:14px;
  background:linear-gradient(145deg, #151b3d 0%, #101830 55%, #0c1428 100%);
  border:1px solid #2a3a7a;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(0,0,0,0.42);
}

.ticket-card.ticket-card--v2:hover {
  transform:translateY(-4px);
  border-color:#3d5194;
  box-shadow:0 14px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(58,90,160,0.25);
}

.ticket-card.ticket-card--v2 .ticket-card-media {
  position:relative;
  flex:0 0 150px;
  width:150px;
  min-width:150px;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,0.3);
}

.ticket-card.ticket-card--v2 .ticket-card-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.ticket-card-media-fallback {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:rgba(0,0,0,0.25);
}

.ticket-card.ticket-card--v2 .ticket-card-body {
  flex:1;
  padding:4px 6px 2px 0;
  gap:10px;
  min-width:0;
}

.ticket-card.ticket-card--v2 .ticket-card-brand {
  display:flex;
  align-items:center;
  gap:8px;
}

.ticket-card-brand-name {
  font-size:12px;
  font-weight:800;
  letter-spacing:0.04em;
  color:rgba(190,210,240,0.82);
}

.ticket-card.ticket-card--v2 .ticket-card-title {
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  margin:0;
  color:#f4f8ff;
}

.ticket-countdown {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}

.ticket-countdown-sep {
  color:rgba(130,160,200,0.55);
  font-size:16px;
  font-weight:700;
  line-height:1;
  padding:0 1px 10px;
}

.ticket-countdown-unit {
  min-width:44px;
  padding:7px 5px 5px;
  border-radius:10px;
  background:rgba(5,10,22,0.88);
  border:1px solid rgba(55,80,125,0.45);
  text-align:center;
}

.ticket-countdown-num {
  display:block;
  font-size:16px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}

.ticket-countdown-lbl {
  display:block;
  margin-top:3px;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.06em;
  color:rgba(130,160,195,0.72);
}

.ticket-card.ticket-card--v2 .ticket-card-desc,
.ticket-card.ticket-card--v2 .ticket-progress,
.ticket-card.ticket-card--v2 .ticket-progress-label,
.ticket-card.ticket-card--v2 .ticket-cost {
  display:none;
}

.ticket-card.ticket-card--v2 .ticket-winner,
.ticket-card.ticket-card--v2 .ticket-my-codes {
  font-size:11px;
}

.ticket-card.ticket-card--v2 .ticket-card-footer {
  margin-top:auto;
  display:block;
  padding-top:2px;
}

.ticket-card.ticket-card--v2 .ticket-btn--request {
  width:100%;
  display:block;
  background:#fff !important;
  color:#0a1020 !important;
  border:none !important;
  font-weight:800 !important;
  font-size:13px !important;
  border-radius:12px !important;
  padding:11px 16px !important;
  min-height:42px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  text-align:center;
}

.ticket-card.ticket-card--v2 .ticket-btn--request:hover:not(:disabled) {
  background:#f3f7ff !important;
  transform:translateY(-1px);
}

.ticket-card.ticket-card--v2 .ticket-btn--request:disabled {
  opacity:0.55;
  background:rgba(255,255,255,0.35) !important;
  color:rgba(10,16,32,0.7) !important;
}

.ticket-card.ticket-card--v2 .ticket-card-status {
  top:14px;
  right:14px;
  z-index:2;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:8px;
  backdrop-filter:none;
}

.ticket-card.ticket-card--v2 .ticket-card-status--active {
  background:#f97316;
  border:1px solid #fb923c;
  color:#fff;
  box-shadow:0 4px 14px rgba(249,115,22,0.45);
}

@media (max-width:900px) {
  .main-content {
    padding-top: var(--action-bar-h-mobile) !important;
  }

  .hero-container {
    margin-top: 0 !important;
  }

  .hero-container .hero-main {
    margin-top: 0 !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) {
    min-height: 248px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head,
  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
    flex: 0 0 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    padding: 22px 10px 6px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo {
    max-height: 64px !important;
  }
  .ticket-grid--v2 { grid-template-columns:1fr; gap:14px; }
  .ticket-card.ticket-card--v2 .ticket-card-media {
    flex:0 0 128px;
    width:128px;
    min-width:128px;
  }
}

@media (max-width:560px) {
  .ticket-card.ticket-card--v2 {
    flex-direction:row;
    min-height:0;
    padding:10px;
    gap:10px;
  }
  .ticket-card.ticket-card--v2 .ticket-card-media {
    flex:0 0 108px;
    width:108px;
    min-width:108px;
    border-radius:12px;
  }
  .ticket-card.ticket-card--v2 .ticket-card-title { font-size:13px; }
  .ticket-countdown-unit { min-width:38px; padding:5px 3px 4px; }
  .ticket-countdown-num { font-size:14px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   S?ZDEN GELENLER
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.sg-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 0;
  flex-wrap:wrap;
}
.sg-page-title {
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700; color:#e8f4ff;
}
.sg-page-title svg { width:20px; height:20px; color:var(--primary-accent); }

.sg-share-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 20px;
  border-radius:10px;
  background:var(--theme-btn-gradient);
  border:none; color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(var(--primary-rgb),.3);
  transition:opacity .2s, transform .15s, box-shadow .2s;
}
.sg-share-btn svg { width:15px; height:15px; }
.sg-share-btn:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 18px rgba(var(--primary-rgb),.45); }

/* Tablo ba??l?????? */
.sg-table-head {
  display:grid;
  grid-template-columns:2fr 2fr 1fr 1.5fr 1fr;
  gap:0;
  padding:10px 16px;
  margin-top:18px;
  border-radius:10px 10px 0 0;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.06);
  border-bottom:none;
}
.sg-table-head > div {
  font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary-accent);
  padding:4px 0;
}

/* Tablo g??vdesi */
.sg-table-body {
  border:1px solid rgba(255,255,255,.06);
  border-radius:0 0 12px 12px;
  overflow:hidden;
}

.sg-row {
  display:grid;
  grid-template-columns:2fr 2fr 1fr 1.5fr 1fr;
  gap:0;
  padding:14px 16px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(var(--bg-dark-rgb),.55);
  transition:background .18s;
}
.sg-row:last-child { border-bottom:none; }
.sg-row:hover { background:rgba(var(--primary-rgb),.05); }

/* Kolon payla????mlar?? */
.sg-col-user { display:flex; align-items:center; gap:10px; }
.sg-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--theme-btn-gradient-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
  overflow:hidden;
}
.sg-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}
.sg-username { font-size:14px; font-weight:600; color:#e8f4ff; }

.sg-col-game { font-size:14px; font-weight:500; color:rgba(200,225,250,.75); }
.sg-col-bet  { font-size:14px; font-weight:500; color:rgba(180,210,240,.65); }
.sg-win-amount { font-size:14px; font-weight:700; color:var(--primary-accent) !important; }

.sg-watch-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 14px;
  border-radius:8px;
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.25);
  color:var(--primary-accent);
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:12px; font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, box-shadow .2s;
}
button.sg-watch-btn { -webkit-appearance:none; appearance:none; }
.sg-watch-btn svg { width:11px; height:11px; flex-shrink:0; }
.sg-watch-btn:hover { background:rgba(var(--primary-rgb),.2); box-shadow:0 0 12px rgba(var(--primary-rgb),.25); }

/* Mobil: kart g??r??n??m */
@media (max-width:700px) {
  .sg-table-head { display:none; }
  .sg-table-body { border-radius:12px; }
  .sg-row {
    grid-template-columns:1fr;
    gap:10px;
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sg-col-bet::before  { content:'Bet: '; font-size:11px; color:rgba(140,170,200,.5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-right:4px; }
  .sg-win-amount::before { content:'Kazan??: '; font-size:11px; color:rgba(140,170,200,.5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-right:4px; }
  .sg-col-game::before { content:'Oyun: '; font-size:11px; color:rgba(140,170,200,.5); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-right:4px; }
}

/* ?????? PAYLA?? MODAL ?????? */
.share-modal { max-width:440px !important; }
.share-modal-head {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:28px 28px 0;
  text-align:center;
}
.share-icon { background:rgba(var(--primary-rgb),.1) !important; border-color:rgba(var(--primary-rgb),.2) !important; color:var(--primary-accent) !important; }
.share-modal-head h2 { font-size:16px; font-weight:700; color:#e8f4ff; }
.share-modal-head p  { font-size:13px; color:rgba(140,175,215,.55); }
.share-row { display:flex; gap:12px; }
.share-submit {
  background:var(--theme-btn-gradient) !important;
  box-shadow:0 6px 20px rgba(var(--primary-rgb),.3) !important;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.share-success {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.25);
  color:var(--primary-accent); font-size:13px; font-weight:600;
}
.share-success svg { width:18px; height:18px; flex-shrink:0; }
.share-success.hidden { display:none; }

/* Kazan?? videosu (Sizden Gelenler) */
.sg-replay-modal {
  width:min(96vw,920px) !important;
  max-width:96vw !important;
  max-height:min(92vh,860px) !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  overflow:hidden !important;
}
.sg-replay-modal-head {
  flex-shrink:0;
  padding:20px 48px 14px 22px;
  border-bottom:1px solid rgba(var(--primary-rgb),.12);
}
.sg-replay-modal-head h2 {
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#e8f4ff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  letter-spacing:.02em;
}
.sg-replay-modal-body {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#000;
}
.sg-replay-modal-body iframe {
  flex:1;
  min-height:min(58vh,480px);
  width:100%;
  border:0;
  background:#000;
}
@media (max-width:700px) {
  .sg-replay-modal-body iframe { min-height:42vh; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   L?DERL?K TABLOSU
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.lb-wrap { margin-top:20px; }

/* Podyum ??? ilk 3 */
.lb-podium {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:20px 0 18px;
  position:relative;
}

.lb-podium-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:200px;
  position:relative;
}

/* 1. s??ra ortada ve daha b??y??k */
.lb-podium-item.rank-1 { order:2; z-index:2; }
.lb-podium-item.rank-2 { order:1; margin-bottom:-20px; }
.lb-podium-item.rank-3 { order:3; margin-bottom:-40px; }

/* S??ra rozeti */
.lb-rank-badge {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  color:#fff;
  position:absolute;
  top:-10px;
  z-index:3;
}
.rank-1 .lb-rank-badge { background:var(--theme-btn-gradient); box-shadow:0 0 14px rgba(var(--primary-rgb),.5); width:32px; height:32px; font-size:15px; }
.rank-2 .lb-rank-badge { background:var(--theme-btn-gradient); box-shadow:0 0 10px rgba(var(--primary-rgb),.4); }
.rank-3 .lb-rank-badge { background:var(--theme-btn-gradient); box-shadow:0 0 10px rgba(var(--primary-rgb),.35); }

/* Avatar ??ember */
.lb-avatar-wrap {
  position:relative;
  margin-top:14px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--theme-btn-gradient-deep);
  border:3px solid rgba(var(--primary-rgb),.35);
  display:flex; align-items:center; justify-content:center;
}
.lb-avatar-img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.rank-1 .lb-avatar-wrap { width:88px; height:88px; border-color:rgba(var(--primary-rgb),.6); box-shadow:0 0 24px rgba(var(--primary-rgb),.3); }
.rank-2 .lb-avatar-wrap { width:70px; height:70px; }
.rank-3 .lb-avatar-wrap { width:62px; height:62px; }
.lb-avatar-empty { color:rgba(255,255,255,.35); font-weight:700; font-size:18px; }
.lb-username.muted { color:rgba(140,175,215,.35); }
.lb-empty {
  margin-top:16px; padding:22px 20px;
  background:rgba(var(--bg-dark-rgb),.55); border:1px solid rgba(255,255,255,.06);
  border-radius:14px; color:rgba(180,205,235,.75); font-size:14px; line-height:1.55;
}
.lb-empty-btn {
  background:none; border:none; color:var(--primary-accent); font-weight:700; cursor:pointer;
  text-decoration:underline; font-family:inherit; font-size:inherit;
}
.lb-empty-btn:hover { color:#5cefff; }

.lb-username {
  font-size:15px; font-weight:700; color:#e8f4ff;
  text-align:center; letter-spacing:.01em;
}
.rank-1 .lb-username { font-size:17px; }

.lb-rank-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rank-color, #9ec5ff);
  background: color-mix(in srgb, var(--rank-color, #6b8cff) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--rank-color, #6b8cff) 42%, transparent);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-podium-item .lb-rank-tag {
  margin-top: -2px;
}

.lb-rank-tag--list {
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
}

.lb-score {
  font-size:22px; font-weight:800; color:var(--primary-accent);
  line-height:1; text-align:center;
}
.rank-1 .lb-score { font-size:28px; }

.lb-score-label {
  font-size:11px; font-weight:500;
  color:rgba(140,175,215,.45);
  letter-spacing:.06em; text-transform:uppercase;
  margin-top:-4px; text-align:center;
}

/* Podyum zemini */
.lb-podium-base {
  display: none;
}

/* Liste ??? 4. ve sonras?? */
.lb-list {
  margin-top:56px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:0 0 14px 14px;
  overflow:hidden;
}

.lb-list-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 20px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(var(--bg-dark-rgb),.55);
  transition:background .18s;
}
.lb-list-row:last-child { border-bottom:none; }
.lb-list-row:hover { background:rgba(var(--primary-rgb),.05); }

.lb-list-rank {
  font-size:13px; font-weight:700;
  color:rgba(140,175,215,.5);
  min-width:28px;
  letter-spacing:.02em;
}
.lb-list-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--theme-btn-gradient-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; flex-shrink:0;
  overflow:hidden;
}
.lb-list-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.lb-list-name {
  flex:1;
  font-size:14px; font-weight:600; color:#e8f4ff;
}
.lb-list-score-badge {
  padding:5px 14px;
  border-radius:20px;
  background:rgba(var(--primary-rgb),.1);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:var(--primary-accent);
  font-size:13px; font-weight:700;
  white-space:nowrap;
}

/* Mobil podyum */
@media (max-width:600px) {
  .lb-podium { gap:8px; padding:10px 0 14px; }
  .lb-list { margin-top:44px; }
  .rank-1 .lb-avatar-wrap { width:66px; height:66px; }
  .rank-2 .lb-avatar-wrap { width:54px; height:54px; }
  .rank-3 .lb-avatar-wrap { width:48px; height:48px; }
  .rank-1 .lb-score { font-size:20px; }
  .lb-score { font-size:16px; }
  .lb-username { font-size:13px; }
  .lb-list-row { padding:11px 14px; }
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   OYUN KARTLARI
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
.game-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 300px));
  gap:20px;
  width:100%;
  margin:0;
  justify-content:start;
  justify-items:stretch;
}

.game-card {
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:26px;
  overflow:visible;
  text-decoration:none;
  background:transparent;
  border:none;
  isolation:isolate;
  transition:transform .25s ease;
  cursor:pointer;
  --game-accent: var(--primary-accent);
  --game-accent-soft: rgba(var(--primary-accent-rgb), 0.42);
}

.game-card-aura {
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse 90% 70% at 50% 0%,
    rgba(var(--primary-accent-rgb), 0.28) 0%,
    transparent 68%
  );
  opacity:.5;
  filter:blur(8px);
  transition:opacity .3s ease, filter .3s ease;
}

.game-card-ring {
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}

.game-card-ring-spinner {
  position:absolute;
  left:50%;
  top:50%;
  width:200%;
  height:200%;
  min-width:100px;
  min-height:100px;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 200deg,
    rgba(var(--primary-accent-rgb), 0.35) 250deg,
    var(--game-accent) 295deg,
    #ffffff 302deg,
    var(--game-accent) 309deg,
    rgba(var(--primary-accent-rgb), 0.4) 330deg,
    transparent 360deg
  );
  transform:translate(-50%, -50%) rotate(0deg);
  transform-origin:center center;
  animation:vip-box-ring-spin 2.4s linear infinite;
  will-change:transform;
}

.game-card-surface {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  margin:3px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(168deg, rgba(10, 18, 32, 0.98) 0%, rgba(var(--surface-rgb), 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.45);
  transition:box-shadow .25s ease;
}

.game-card:hover {
  transform:translateY(-4px) scale(1.01);
}

.game-card:hover .game-card-aura {
  opacity:.88;
  filter:blur(12px);
}

.game-card:hover .game-card-surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(var(--primary-rgb), 0.18);
}

.game-card:hover .game-card-ring-spinner {
  animation-duration:1.8s;
}

button.game-card {
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Resim alan? */
.game-card-img {
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  min-height:280px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 65% at 50% 8%, rgba(var(--primary-rgb), 0.14), transparent 58%),
    linear-gradient(168deg, #0c1628 0%, #060c14 100%);
}

.game-card-img::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, rgba(4, 8, 16, 0.72) 100%);
}

.game-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform .35s ease, filter .35s ease;
}
.game-card:hover .game-card-img img {
  transform:scale(1.06);
  filter:brightness(.45);
}

/* Hover overlay */
.game-hover-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
  z-index:3;
}
.game-card:hover .game-hover-overlay { opacity:1; }

.game-bet-info {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 20px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  border-radius:16px;
  border:1px solid rgba(var(--primary-rgb),.18);
  min-width:160px;
  transform:translateY(8px);
  transition:transform .3s ease;
}
.game-card:hover .game-bet-info { transform:translateY(0); }

.game-bet-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.game-bet-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:rgba(140,175,215,.55);
  text-transform:uppercase;
}
.game-bet-value {
  font-size:18px;
  font-weight:800;
  color:var(--primary-accent);
  letter-spacing:.02em;
}
.game-bet-divider {
  width:100%;
  height:1px;
  background:rgba(var(--primary-rgb),.18);
}
.game-play-btn {
  margin-top:4px;
  padding:9px 32px;
  border-radius:10px;
  background:var(--theme-btn-gradient);
  border:none;
  color:#fff;
  font-family:var(--site-font-family, 'Sora', sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 4px 16px var(--theme-btn-shadow);
  transition:opacity .2s, transform .15s;
}
.game-play-btn:hover { opacity:.9; transform:scale(1.04); }

/* Alt footer */
.game-card-footer {
  padding:10px 12px;
  background:rgba(4,8,16,.92);
  border-top:1px solid rgba(var(--primary-rgb),.08);
}
.game-name {
  font-size:13px;
  font-weight:700;
  color:#e8f4ff;
  letter-spacing:.01em;
}

/* Responsive */
@media (max-width:900px) {
  .game-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    max-width:100%;
  }

  .game-card-img {
    min-height:220px;
  }
}

@media (max-width:640px) {
  .game-grid {
    gap:12px;
  }

  .game-card-img {
    min-height:200px;
  }
}

@media (max-width:480px) {
  .game-grid {
    gap:10px;
  }

  .game-card-img {
    min-height:175px;
    aspect-ratio:4/5;
  }

  .game-card-footer {
    padding:8px 10px;
  }

  .game-name {
    font-size:12px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .game-card:hover {
    transform:none;
  }
  .game-card:hover .game-card-img img {
    transform:none;
    filter:none;
  }
  .game-card:hover .game-hover-overlay {
    opacity:0;
  }
  .game-card.is-pressed .game-hover-overlay,
  .game-card:focus-within .game-hover-overlay {
    opacity:1;
  }
  .game-card.is-pressed .game-bet-info,
  .game-card:focus-within .game-bet-info {
    transform:translateY(0);
  }
}

body.mob-menu-open #topbar,
body.mob-menu-open .page-layout,
body.mob-menu-open .bottom-bar {
  pointer-events:none;
}

body.mob-menu-open .mob-menu,
body.mob-menu-open .mob-overlay.show {
  pointer-events:auto;
}

/* ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
   OYUN EMBED (Blackjack vb.)
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? */
/* Oyunlar sayfa banner? (haber ? t?klanamaz) */
.games-page-banner {
  margin-bottom: 18px;
}

.games-page-banner__frame {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 6 / 1;
  max-height: 200px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(var(--surface-rgb), 0.85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.games-page-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.games-page-head {
  margin-bottom: 18px;
}

.games-page-views { position: relative; width: 100%; min-height: 420px; }
.games-list-view.hidden { display: none !important; }

.game-embed-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 480px;
  background: rgba(var(--bg-dark-rgb), 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.game-embed-area.hidden { display: none !important; }

.game-embed-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  background: rgba(var(--surface-deep-rgb), 0.75);
}

.game-embed-title { flex: 1; min-width: 0; text-align: center; }
.game-embed-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: 0.04em;
}

.game-embed-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.btn-game-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.08);
  color: color-mix(in srgb, var(--primary-accent) 72%, #ffffff 28%);
  transition: background 0.2s, border-color 0.2s;
}

.btn-game-back:hover {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: rgba(var(--primary-rgb), 0.55);
  color: #fff;
}

.game-card--disabled {
  opacity: 0.72;
  cursor: default;
}

.game-card--disabled:hover {
  transform: none;
}

.game-card--disabled:hover .game-card-aura {
  opacity: 0.35;
  filter: blur(6px);
}

.game-card--disabled:hover .game-card-surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.45);
}

.game-card--disabled .game-card-ring-spinner {
  animation: none;
  opacity: 0.35;
}

.game-card--disabled:hover .game-card-img img {
  transform: none;
  filter: none;
}

.game-card--disabled .game-hover-overlay { opacity: 0 !important; pointer-events: none; }

.game-embed-panel.hidden {
  display: none !important;
}
/* WHEEL MODAL */
.wheel-modal {
  max-width: 420px;
  width: calc(100% - 32px);
  padding: 0;
  overflow: hidden;
}
.wheel-modal-inner {
  padding: 28px 22px 24px;
}
.wheel-modal-head {
  text-align: center;
  margin-bottom: 18px;
}
.wheel-modal-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #e8f4ff;
}
.wheel-modal-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(160, 200, 240, 0.65);
  line-height: 1.45;
}
.wheel-stage {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto 14px;
  aspect-ratio: 1;
}
.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 28px;
  z-index: 6;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.wheel-pointer::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(180deg, var(--primary-accent), color-mix(in srgb, var(--primary) 70%, #000));
  border-radius: 2px;
}
.wheel-disk-outer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--primary-accent-rgb), 0.9), rgba(var(--primary-rgb), 0.55), rgba(var(--primary-accent-rgb), 0.9));
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.65),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(var(--primary-rgb), 0.25);
}
.wheel-disk {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transition: none;
  will-change: transform;
  --wheel-label-offset: clamp(88px, 36%, 112px);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(0, 0, 0, 0.55);
}
.wheel-segments-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wheel-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.14);
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  --angle: calc((var(--i) + 0.5) * (360deg / var(--total)));
  transform: rotate(var(--angle));
  pointer-events: none;
  z-index: 2;
}
.wheel-label-content {
  position: absolute;
  left: 0;
  top: 0;
  transform:
    translate(-50%, -50%)
    translateY(calc(-1 * var(--wheel-label-offset)))
    rotate(calc(-1 * var(--angle)));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(4, 10, 22, 0.72);
  border: 1px solid rgba(var(--primary-accent-rgb), 0.28);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  line-height: 1;
  white-space: nowrap;
}
.wheel-label-content .coin-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.55));
}
.wheel-label-content span {
  color: var(--primary-accent);
  letter-spacing: 0.02em;
}
.wheel-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 3px solid rgba(var(--primary-accent-rgb), 0.85);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--primary-accent) 75%, #fff), var(--primary) 58%, #050a12);
  color: #f8fbff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  z-index: 5;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(var(--primary-accent-rgb), 0.35);
  transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
}
.wheel-center-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(var(--primary-accent-rgb), 0.45);
}
.wheel-center-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.wheel-center-btn__label {
  display: block;
}
.wheel-cooldown {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #f59e0b;
  line-height: 1.45;
}
.wheel-hint {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(160, 200, 240, 0.5);
  line-height: 1.45;
}
.wheel-hint--success {
  color: #4ade80;
  font-weight: 600;
}
@media (max-width: 480px) {
  .wheel-modal-inner { padding: 24px 16px 20px; }
  .wheel-stage { width: min(100%, 280px); }
  .wheel-disk { --wheel-label-offset: clamp(78px, 34%, 96px); }
  .wheel-center-btn { width: 64px; height: 64px; font-size: 11px; }
  .wheel-label-content { font-size: 11px; padding: 3px 6px; min-width: 40px; }
  .wheel-label-content .coin-icon { width: 13px !important; height: 13px !important; }
}

/* VIP ACTION CARDS */
/* VIP action card ? home quick, sidebar, onboarding */
.vip-action-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.28s ease;
  isolation: isolate;
  font: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.vip-action-card--puan,
.vip-action-card--daily {
  --q-r: 0;
  --q-g: 212;
  --q-b: 255;
}

.vip-action-card--promo,
.vip-action-card--code {
  --q-r: 72;
  --q-g: 220;
  --q-b: 140;
}

.vip-action-card--wheel {
  --q-r: 255;
  --q-g: 176;
  --q-b: 0;
}

.vip-action-card--lime {
  --q-r: 217;
  --q-g: 249;
  --q-b: 157;
}

.vip-action-card--blue {
  --q-r: 96;
  --q-g: 165;
  --q-b: 250;
}

.vip-action-card--purple {
  --q-r: 192;
  --q-g: 132;
  --q-b: 252;
}

.vip-action-card--red {
  --q-r: 248;
  --q-g: 113;
  --q-b: 113;
}

.vip-action-card__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.vip-action-card__ring-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 190%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 220deg,
    rgba(var(--q-r), var(--q-g), var(--q-b), 0.38) 265deg,
    rgb(var(--q-r), var(--q-g), var(--q-b)) 300deg,
    #fff 306deg,
    rgb(var(--q-r), var(--q-g), var(--q-b)) 312deg,
    rgba(var(--q-r), var(--q-g), var(--q-b), 0.38) 332deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%);
  animation: vipActionRingSpin 2.6s linear infinite;
}

@keyframes vipActionRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vip-action-card__surface {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(var(--q-r), var(--q-g), var(--q-b), 0.16) 0%, transparent 62%),
    var(--theme-surface-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.42);
  transition: box-shadow 0.28s ease;
}

.vip-action-card:hover {
  transform: translateY(-4px);
}

.vip-action-card:hover .vip-action-card__surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 16px 34px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(var(--q-r), var(--q-g), var(--q-b), 0.22);
}

.vip-action-card__surface--home {
  gap: 7px;
  min-height: 124px;
  padding: 16px 12px 14px;
  border-radius: 16px;
}

.vip-action-card__surface--sb {
  gap: 8px;
  min-height: 108px;
  padding: 12px 8px 10px;
  border-radius: 14px;
}

.vip-action-card__surface--onboarding {
  gap: 8px;
  min-height: 168px;
  padding: 14px 10px 12px;
  border-radius: 15px;
}

.vip-action-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(var(--q-r), var(--q-g), var(--q-b), 0.28);
  background: rgba(var(--q-r), var(--q-g), var(--q-b), 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(var(--q-r), var(--q-g), var(--q-b), 0.18);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.vip-action-card__icon--daily,
.vip-action-card__icon--wheel,
.vip-action-card__icon--code {
  width: 52px;
  height: 52px;
}

.vip-action-card__icon--onboarding {
  width: 64px;
  height: 64px;
  border-radius: 999px;
}

.vip-action-card__icon--onboarding svg {
  width: 28px;
  height: 28px;
  color: rgb(var(--q-r), var(--q-g), var(--q-b));
}

.vip-action-card:hover .vip-action-card__icon {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 24px rgba(var(--q-r), var(--q-g), var(--q-b), 0.32);
}

.vip-action-card__icon--wheel img,
.vip-action-card__icon--code img,
.vip-action-card__img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.vip-action-card__surface--sb .vip-action-card__img {
  width: 44px;
  height: 44px;
}

.vip-action-card__coin {
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.35));
}

.vip-action-card__title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f2f8ff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.vip-action-card__hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(176, 198, 228, 0.78);
  letter-spacing: 0.02em;
}

.vip-action-card__words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.05;
}

.vip-action-card__words--sb .vip-action-card__word {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vip-action-card__word--main {
  color: #fff;
}

.vip-action-card__word--accent {
  color: rgb(var(--q-r), var(--q-g), var(--q-b));
}

.vip-action-card.mob-banner .vip-action-card__words--sb .vip-action-card__word,
.vip-action-card--mob .vip-action-card__words--sb .vip-action-card__word {
  font-size: 9px;
}

/* HOME PAGE — VOID rewards layout */
.home-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 28px;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: clip;
  color: #eef6ff;
}

.home-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: var(--site-font-weight-display, 800);
  color: rgba(var(--primary-accent-rgb), 0.82);
  text-transform: uppercase;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-bottom: 28px;
}

.home-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 196px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%),
    radial-gradient(ellipse 85% 65% at 8% 0%, rgba(var(--primary-accent-rgb), 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(var(--primary-rgb), 0.1) 0%, transparent 58%),
    rgba(var(--surface-deep-rgb), 0.88);
  border: 1px solid rgba(var(--primary-accent-rgb), 0.22);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  isolation: isolate;
}

.home-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(var(--primary-accent-rgb), 0.55) 0%,
    rgba(var(--primary-rgb), 0.12) 38%,
    rgba(var(--primary-accent-rgb), 0.28) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.22s ease;
}

.home-hero-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--primary-accent-rgb), 0.65) 35%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(var(--primary-accent-rgb), 0.65) 65%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
}

.home-hero-card > * {
  position: relative;
  z-index: 1;
}

.home-hero-card--daily {
  background:
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(var(--primary-accent-rgb), 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 100% 100%, rgba(var(--primary-accent-rgb), 0.22) 0%, transparent 58%),
    linear-gradient(125deg, rgba(var(--primary-rgb), 0.18), rgba(var(--surface-deep-rgb), 0.95) 68%);
}

.home-hero-card__deco {
  position: absolute;
  right: -48px;
  bottom: -38px;
  width: clamp(178px, 58%, 236px);
  height: clamp(178px, 58%, 236px);
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-10deg);
}

.home-hero-card__deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.15) drop-shadow(0 12px 32px rgba(var(--primary-accent-rgb), 0.35));
}

.home-hero-card:hover {
  border-color: rgba(var(--primary-accent-rgb), 0.42);
  transform: translateY(-3px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(var(--primary-accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.home-hero-card:hover::before {
  opacity: 1;
}

.home-hero-card:focus-visible {
  outline: 2px solid rgba(var(--primary-accent-rgb), 0.85);
  outline-offset: 4px;
}

.home-hero-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
}

.home-hero-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 25px;
  max-width: 68%;
}

.home-hero-card__copy {
  min-width: 0;
}

.home-hero-card__title {
  font-size: 27px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: -0.04em;
  color: #faf8ff;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.home-hero-card__hint {
  margin-top: 7px;
  font-size: 16px;
  font-weight: var(--site-font-weight-strong, 700);
  color: rgba(210, 228, 250, 0.82);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.home-section {
  margin-bottom: 28px;
}

.home-banner-section {
  margin-bottom: 28px;
}

.home-ad-banner {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  --q-r: 173;
  --q-g: 91;
  --q-b: 250;
  transition: transform 0.28s ease;
  border: 1px solid #292630;
}

.home-ad-banner--filled:hover {
  transform: translateY(-2px);
}

.home-ad-banner__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.home-ad-banner__ring-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: 190%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 220deg,
    rgba(var(--q-r), var(--q-g), var(--q-b), 0.38) 265deg,
    rgb(var(--q-r), var(--q-g), var(--q-b)) 300deg,
    #fff 306deg,
    rgb(var(--q-r), var(--q-g), var(--q-b)) 312deg,
    rgba(var(--q-r), var(--q-g), var(--q-b), 0.38) 332deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%);
  animation: vipActionRingSpin 2.6s linear infinite;
}

.home-ad-banner__surface {
  position: relative;
  z-index: 1;
  display: block;
  margin: 2px;
  border-radius: 10px;
  overflow: hidden;
  background: #101016;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 26px rgba(0, 0, 0, 0.42);
  line-height: 0;
}

.home-ad-banner--filled:hover .home-ad-banner__surface {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(var(--q-r), var(--q-g), var(--q-b), 0.22);
}

.home-ad-banner__surface--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(100px, 22vw, 168px);
  background: linear-gradient(118deg, #ef3b32 0%, #d8221c 42%, #c01814 100%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22);
}

.home-ad-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.home-ad-banner__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 1.2px, transparent 1.2px);
  background-size: 7px 7px;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.85) 72%, #000 100%);
  opacity: 0.55;
}

.home-ad-banner__burst {
  position: absolute;
  top: 50%;
  width: 88px;
  height: 88px;
  margin-top: -44px;
  pointer-events: none;
  background: radial-gradient(circle at center, #ffd84d 0%, #ffb800 38%, transparent 68%);
  opacity: 0.9;
  filter: blur(0.2px);
}

.home-ad-banner__burst--left {
  left: -18px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform: scaleX(1.15);
}

.home-ad-banner__burst--right {
  right: -18px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: scaleX(1.15);
}

.home-ad-banner__text {
  position: relative;
  z-index: 1;
  max-width: 100%;
  box-sizing: border-box;
  font-size: clamp(1.15rem, 5vw, 3.4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(120, 10, 10, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.45);
  transform: skewX(-6deg);
  padding: 0 clamp(12px, 5vw, 72px);
  text-align: center;
  word-break: break-word;
}

/* Canlı kazançlar */
.home-live-wins-section {
  margin-bottom: 22px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.home-live-wins-shell {
  position: relative;
}

.home-live-badge--float {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  pointer-events: none;
}

.home-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: var(--site-font-weight-strong, 700);
  letter-spacing: 0.1em;
  color: rgba(210, 240, 255, 0.88);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-accent-rgb), 0.22);
}

.home-live-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
  animation: homeLivePulse 1.8s ease-in-out infinite;
}

@keyframes homeLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}

.home-live-wins {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
  background: rgba(var(--surface-deep-rgb), 0.55);
  padding: 12px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.home-live-wins:not(.home-live-wins--empty) {
  padding-top: 38px;
}

.home-live-wins::before,
.home-live-wins::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}

.home-live-wins::before {
  left: 0;
  background: linear-gradient(90deg, rgba(var(--bg-dark-rgb), 0.92), transparent);
}

.home-live-wins::after {
  right: 0;
  background: linear-gradient(270deg, rgba(var(--bg-dark-rgb), 0.92), transparent);
}

.home-live-wins--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 12px 16px;
}

.home-live-wins--empty::before,
.home-live-wins--empty::after {
  display: none;
}

.home-live-wins-empty-text {
  margin: 0;
  font-size: 13px;
  font-weight: var(--site-font-weight-strong, 600);
  color: rgba(190, 210, 235, 0.72);
  text-align: center;
  line-height: 1.45;
  max-width: 36em;
}

.home-live-wins-track {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  animation: homeLiveWinsScroll 28s linear infinite;
  padding: 2px 12px;
}

.home-live-wins-track:hover {
  animation-play-state: paused;
}

@keyframes homeLiveWinsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.home-live-win-card {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 248px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(var(--surface-rgb), 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.home-live-win-game {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--primary-rgb), 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.home-live-win-card--blackjack .home-live-win-game {
  background: linear-gradient(145deg, rgba(255, 82, 110, 0.35), rgba(168, 13, 53, 0.5));
}

.home-live-win-card--dice .home-live-win-game {
  background: linear-gradient(145deg, rgba(200, 121, 255, 0.35), rgba(121, 34, 189, 0.5));
}

.home-live-win-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-live-win-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-live-win-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.home-live-win-row--meta {
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.home-live-win-row--prize {
  align-items: center;
  margin-top: 2px;
  padding-top: 0;
}

.home-live-win-field-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: var(--site-font-weight-strong, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 190, 220, 0.55);
}

.home-live-win-row:not(.home-live-win-row--meta) .home-live-win-field-label {
  min-width: 52px;
}

.home-live-win-game-label {
  font-size: 11px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--primary-accent-rgb), 0.95);
}

.home-live-win-mult-pill {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: 0.04em;
  color: #e8f8ff;
  background: rgba(var(--primary-rgb), 0.22);
}

.home-live-win-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--site-font-weight-strong, 700);
  color: #faf8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-live-win-prize {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.home-live-win-prize .coin-icon {
  flex-shrink: 0;
  object-fit: contain;
}

.home-live-win-prize-amount {
  font-size: 14px;
  font-weight: var(--site-font-weight-display, 800);
  color: var(--primary-accent);
  letter-spacing: -0.02em;
}

.home-live-win-prize-unit {
  font-size: 11px;
  font-weight: var(--site-font-weight-strong, 600);
  color: rgba(180, 205, 230, 0.65);
}

/* Sosyal medya akışları */
.home-social-section {
  margin-bottom: 26px;
}

.home-social-heading {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #88869a;
  text-transform: uppercase;
}

.home-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.home-social-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-accent-rgb), 0.18);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgba(var(--surface-deep-rgb), 0.9);
  padding: 12px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.3);
}

.home-social-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-accent-rgb), 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(var(--primary-rgb), 0.1);
}

.home-social-card-img {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.home-social-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-social-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: var(--site-font-weight-strong, 700);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  color: #f6f4fb;
  text-align: left;
}

/* Onboarding */
.home-onboarding-section {
  margin-bottom: 28px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.home-onboarding-heading {
  margin: 0;
}

.home-onboarding-track {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.home-step {
  position: relative;
  display: block;
  min-height: 172px;
  min-width: 0;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, transparent 42%),
    rgba(var(--surface-deep-rgb), 0.88);
  border: 1px solid rgba(var(--primary-accent-rgb), 0.2);
  border-radius: 16px;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.32);
  isolation: isolate;
}

.home-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.home-step > * {
  position: relative;
  z-index: 1;
}

.home-step--lime { --accent: #c7f18a; }
.home-step--blue { --accent: #79baff; }
.home-step--purple { --accent: #c58aff; }
.home-step--red { --accent: #ff8189; }

.home-step:first-child {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(var(--primary-rgb), 0.14) 0%, transparent 55%),
    rgba(var(--surface-deep-rgb), 0.92);
}

.home-step:hover {
  border-color: rgba(var(--primary-accent-rgb), 0.42);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 32px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(var(--primary-rgb), 0.12);
}

.home-step:focus-visible {
  outline: 2px solid #b48aff;
  outline-offset: 4px;
}

.home-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-step__no,
.home-step__mark {
  font-size: 10px;
  color: #8b879b;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-step__icon {
  display: block;
  width: 38px;
  height: 38px;
  margin: 25px 0 15px;
  color: var(--accent);
}

.home-step__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-step__line {
  display: block;
  height: 2px;
  width: 28px;
  background: var(--accent);
  margin-bottom: 13px;
}

.home-step__title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--site-font-weight-display, 800);
  letter-spacing: -0.03em;
  color: #faf8ff;
  line-height: 1.2;
}

.home-step__hint {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: var(--site-font-weight-strong, 700);
  color: rgba(190, 205, 230, 0.72);
  line-height: 1.35;
}

@media (min-width: 1024px) {
  .home-social-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-page {
    padding: 0 0 20px;
    max-width: 100%;
  }

  .home-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }

  .home-hero-card--daily {
    grid-column: span 2;
  }

  .home-hero-card {
    min-height: 162px;
    padding: 18px;
  }

  .home-hero-card__deco {
    width: clamp(152px, 54%, 200px);
    height: clamp(152px, 54%, 200px);
    right: -36px;
    bottom: -30px;
    opacity: 0.32;
  }

  .home-hero-card__title {
    font-size: 21px;
  }

  .home-hero-card__hint {
    font-size: 14px;
  }

  .home-hero-card__foot {
    margin-top: 18px;
    max-width: 62%;
  }

  .home-ad-banner {
    border-radius: 10px;
  }

  .home-ad-banner__surface {
    border-radius: 8px;
    margin: 2px;
  }

  .home-ad-banner__surface--placeholder {
    min-height: 96px;
  }

  .home-ad-banner__burst {
    width: 56px;
    height: 56px;
    margin-top: -28px;
  }

  .home-ad-banner__burst--left { left: -12px; }
  .home-ad-banner__burst--right { right: -12px; }

  .home-ad-banner__text {
    font-size: clamp(1rem, 4.8vw, 1.6rem);
    padding: 0 14px;
    transform: skewX(-4deg);
  }

  .home-live-win-card {
    min-width: min(248px, 78vw);
    max-width: min(280px, 85vw);
  }

  .home-onboarding-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-social-grid {
    gap: 8px;
  }

  .home-social-card {
    padding: 8px;
  }

  .home-social-card-title {
    font-size: 11px;
  }
}

@media (max-width: 440px) {
  .home-hero-card {
    min-height: 156px;
    padding: 15px;
  }

  .home-hero-card__deco {
    width: clamp(138px, 50%, 176px);
    height: clamp(138px, 50%, 176px);
    right: -28px;
    bottom: -24px;
  }

  .home-hero-card__title {
    font-size: 19px;
  }

  .home-hero-card__hint {
    font-size: 14px;
  }

  .home-hero-card__foot {
    margin-top: 16px;
    max-width: 58%;
  }

  .home-step {
    padding: 14px;
    min-height: 145px;
  }

  .home-step__icon {
    margin: 18px 0 12px;
  }

  .home-step__title {
    font-size: 13px;
  }

  .home-ad-banner__text {
    font-size: 0.95rem;
    padding: 0 8px;
  }
}

.home-social-section {
  margin-bottom: 32px;
}

.home-section-star--social svg {
  color: #f87171;
}

.home-social-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-accent-rgb), 0.35) transparent;
}

.home-social-track::-webkit-scrollbar {
  height: 6px;
}

.home-social-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--primary-accent-rgb), 0.35);
}

.home-social-empty {
  margin: 0;
  padding: 28px 20px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(4, 10, 20, 0.45);
  color: rgba(160, 200, 240, 0.62);
  font-size: 14px;
  text-align: center;
}

.home-social-card {
  flex: 0 0 min(320px, 88vw);
  min-width: 0;
  scroll-snap-align: start;
}

.home-social-embed {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.home-social-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-social-card-title {
  margin: 10px 4px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.home-social-card-title a {
  color: #e8f4ff;
  text-decoration: none;
}

.home-social-card-title a:hover {
  color: rgb(var(--primary-rgb, 0, 191, 255));
}

.home-hero-main {
  width: 100%;
  height: auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.85);
  line-height: 0;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.home-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #e8f4ff;
}

.home-section-star {
  display: inline-flex;
  color: var(--primary-accent);
}

.home-section-star svg {
  width: 20px;
  height: 20px;
}

.home-section-star--gold {
  color: #ffc94d;
}

.home-section-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(var(--primary-accent-rgb), 0.85);
  text-decoration: none;
  white-space: nowrap;
}

.home-section-link:hover {
  color: #5cefff;
}

.home-game-grid {
  justify-content:start;
  grid-template-columns:repeat(auto-fill, minmax(260px, 300px));
  max-width:none;
  margin:0;
}

.home-winners-section {
  overflow: hidden;
  max-width: 100%;
}

.home-winners-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 6px 0 10px;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.home-winners-marquee {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  animation: homeWinnersScroll 38s linear infinite;
}

.home-winners-marquee--js {
  animation: none !important;
}

.home-winners-group {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-shrink: 0;
  padding-right: 14px;
}

@keyframes homeWinnersScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.home-winner-card {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 272px;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  background: rgba(6, 14, 32, 0.92);
  border: 1px solid rgba(var(--border-rgb),  0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.home-winner-card__thumb {
  position: relative;
  flex: 0 0 78px;
  width: 78px;
  border-radius: 12px;
  overflow: hidden;
  background: #0a1528;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.home-winner-card--blackjack .home-winner-card__thumb {
  box-shadow: inset 0 0 0 1px rgba(0, 226, 87, 0.25);
}

.home-winner-card--dice .home-winner-card__thumb {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.28);
}

.home-winner-card--mines .home-winner-card__thumb {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.home-winner-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
}

.home-winner-card__game-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 4px 5px;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88));
  line-height: 1.1;
}

.home-winner-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  padding: 2px 0;
}

.home-winner-card__user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-winner-card__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(var(--border-rgb),  0.25);
}

.home-winner-card__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-winner-card__payout {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(200, 220, 245, 0.88);
  line-height: 1.35;
}

.home-winner-card__amount {
  font-size: 1rem;
  font-weight: 800;
  color: #ffc94d;
  margin-right: 4px;
}

.home-winner-card__coin-text {
  color: rgba(220, 235, 255, 0.9);
}

.home-winner-card__multiplier {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(140, 175, 215, 0.72);
}

.home-winners-empty {
  padding: 28px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: rgba(160, 185, 220, 0.75);
  font-size: 0.9rem;
  background: rgba(var(--surface-rgb), 0.35);
}

.tasks-empty {
  text-align: center;
  color: rgba(160, 200, 240, 0.55);
  padding: 28px 16px;
}

.verify-page-head {
  margin-bottom: 18px;
}

.verify-page-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  color: #e8f4ff;
}

.verify-page-sub {
  margin: 0;
  color: rgba(160, 200, 240, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

.verify-flash {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.verify-flash--success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.verify-flash--error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.verify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.verify-card {
  background: rgba(var(--surface-rgb), 0.82);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Doğrulamalar: yan reklamlı geniş kolon, dar kutular */
.verify-page--wide {
  max-width: 1200px;
  margin: 0 auto;
}
.verify-page--wide .verify-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.verify-page--wide .verify-card {
  padding: 14px 15px;
}

/* Kripto adreslerim kartı (Doğrulamalar sayfası) */
.verify-crypto {
  margin-top: 24px;
  padding: 22px 24px;
  background: rgba(var(--surface-rgb), 0.82);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-radius: 16px;
}
.verify-crypto .verify-page-head {
  margin-bottom: 16px;
}
.verify-crypto .verify-page-title {
  font-size: 1.15rem;
}

.verify-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verify-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verify-icon svg,
.verify-icon .social-brand-icon {
  width: 24px;
  height: 24px;
}

.verify-icon-tg { background: rgba(38, 165, 228, 0.18); color: #26a5e4; }
.verify-icon-dc { background: rgba(88, 101, 242, 0.18); color: #5865f2; }
.verify-icon-yt { background: rgba(255, 0, 0, 0.15); color: #ff4444; }
.verify-icon-ig { background: rgba(225, 48, 108, 0.16); color: #e1306c; }
.verify-icon-kk { background: rgba(83, 252, 24, 0.14); color: #53fc18; }
.verify-icon-tw { background: rgba(145, 70, 255, 0.18); color: #9146ff; }
.verify-icon-x { background: rgba(160, 160, 180, 0.16); color: #d1d5db; }

.verify-card-title {
  margin: 0 0 4px;
  font-size: 15px;
  color: #e8f4ff;
}

.verify-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.verify-status--none {
  color: rgba(160, 200, 240, 0.72);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.verify-status--pending {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.verify-status--approved {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.verify-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verify-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.verify-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 200, 240, 0.55);
}

.verify-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  background: rgba(4, 10, 20, 0.72);
  color: #e8f4ff;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
}

.verify-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

.verify-btn {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: var(--theme-btn-gradient);
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--theme-btn-shadow);
}

.verify-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 900px) {
  .verify-grid {
    grid-template-columns: 1fr;
  }
}

/* HABERLER */
.news-page-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.news-page-banner {
  margin-bottom: 18px;
}

.news-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(var(--primary-rgb), 0.07);
  border: 1px solid rgba(var(--primary-rgb), 0.16);
}

.news-page-head__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary-accent);
}

.news-page-head__icon svg {
  width: 22px;
  height: 22px;
}

.news-page-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #e8f4ff;
  letter-spacing: 0.02em;
}

.news-page-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(160, 200, 240, 0.72);
  line-height: 1.45;
}

.news-empty {
  text-align: center;
  padding: 48px 20px;
  color: rgba(160, 190, 220, 0.65);
  font-size: 14px;
  font-weight: 600;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(var(--surface-rgb), 0.88);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.news-card--featured {
  margin-bottom: 4px;
}

.news-card--featured .news-card__media {
  aspect-ratio: 21 / 9;
}

.news-card--featured .news-card__title {
  font-size: 20px;
}

.news-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--bg-dark-rgb), 0.55);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__date {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #e8f4ff;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
}

.news-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #e8f4ff;
  line-height: 1.35;
}

.news-card__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(180, 210, 240, 0.78);
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .news-card--featured .news-card__media {
    aspect-ratio: 16 / 10;
  }

  .news-page-title {
    font-size: 18px;
  }
}

/* Form sayfaları (affiliate, şikayet/öneri) */
.site-form-panel {
  max-width: 920px;
  margin-top: 20px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--bg-dark-rgb), 0.55);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-form-field > span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(180, 210, 240, 0.8);
}

.site-form-input,
.site-form-textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: #e8f4ff;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
}

.site-form-textarea {
  resize: vertical;
  min-height: 120px;
}

.site-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.site-form-legend {
  font-size: 13px;
  font-weight: 700;
  color: #b8d8f8;
  margin-bottom: 12px;
}

.form-page-guest {
  margin-top: 20px;
  padding: 24px;
  border-radius: 14px;
  border: 1px dashed rgba(var(--primary-rgb), 0.25);
  text-align: center;
  color: rgba(180, 210, 240, 0.75);
}

.aff-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}

.aff-sponsor-card {
  position: relative;
  cursor: pointer;
}

.aff-sponsor-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.aff-sponsor-card__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  min-height: 88px;
}

.aff-sponsor-card:hover .aff-sponsor-card__inner,
.aff-sponsor-card.is-selected .aff-sponsor-card__inner,
.aff-sponsor-card input:checked + .aff-sponsor-card__inner {
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.18);
  transform: translateY(-2px);
}

.aff-sponsor-card__logo {
  width: 100%;
  max-width: 96px;
  height: 56px;
  object-fit: contain;
}

/* === MOBIL ONCELIKLI (son katman — cache bust ile birlikte yuklenir) === */
@media (max-width: 900px) {
  .hero-container .hero-inner .hero-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .hero-container .hero-inner .hero-row > .hero-half {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite {
    min-height: 155px !important;
    max-height: none;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-head {
    flex: 0 0 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 14px 8px 4px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-logo {
    max-height: 36px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-offer {
    min-height: 40px !important;
    padding: 4px 8px 5px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-desc {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-kod {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-action {
    padding: 0 10px 10px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-btn {
    min-height: 28px !important;
    font-size: 9px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-surface {
    margin: 3px !important;
    border-radius: 16px !important;
  }

  #site-footer .footer-cols { display: none !important; }
  #site-footer .footer-brand-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 0 22px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  #site-footer .footer-brand-mobile .footer-brand-logo {
    height: 72px !important;
    max-width: min(78vw, 280px) !important;
  }

  .main-content {
    padding-top: var(--action-bar-h-mobile) !important;
  }

  .hero-container {
    margin-top: 0 !important;
  }

  .hero-container .hero-main {
    margin-top: 0 !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) {
    min-height: 248px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head,
  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
    flex: 0 0 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    padding: 22px 10px 6px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo {
    max-height: 64px !important;
  }
  .ticket-grid--v2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) {
    min-height: 200px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-head {
    flex: 0 0 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 18px 8px 6px !important;
  }

  .ana-grid .ana-box.ana-box--elite:not(.vip-box--compact) .vip-box-logo {
    max-height: 52px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite {
    min-height: 148px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-head {
    flex: 0 0 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 12px 7px 4px !important;
  }

  .vip-grid .vip-box.vip-box--compact.ana-box.ana-box--elite .vip-box-logo {
    max-height: 32px !important;
  }
}