/* ==========================================================================
   VIP Club — dark-navy luxury page styling.
   Ported from the Claude Design "VIP Club v2" prototype and namespaced under
   `.vipclub` so the deep-navy treatment never leaks onto the shared
   SiteHeader / SiteFooter (which carry their own theme).
   ========================================================================== */

/* Paylaşılan SiteFooter'ın mt-12 boşluğu yalnızca bu sayfada sıfırlanır —
   içerik footer'a boşluksuz bağlanır. */
.vip-page > footer {
  margin-top: 0;
}

/* Klavye odağı — tüm etkileşimli öğelerde görünür altın halka (WCAG 2.4.7) */
.vipclub a:focus-visible,
.vipclub button:focus-visible,
.vipclub input:focus-visible,
.vipclub [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.vipclub {
  --blue: #1158d6;
  --blue-bright: #2e84ff;
  --gold: #e8d3a4;
  --gold-soft: #f3dfae;
  --champ: #e8d3a4;
  --gold-deep: #a8884f;
  --goldline: rgba(232, 211, 164, 0.3);
  --navy: #060a18;

  --bv-primary: oklch(0.488 0.243 264.376);
  --bv-primary-press: oklch(0.43 0.235 264.376);
  --bv-fg: #eaf1ff;
  --bv-muted-fg: #9fb0cf;
  --bv-border: rgba(255, 255, 255, 0.1);
  --bv-muted-bg: #060a18;
  --bv-primary-soft: rgba(46, 132, 255, 0.16);
  --bv-radius: 16px;

  /* Dikey ritim standardı — tüm bölümler aynı açıklığı kullanır */
  --sec-pad: clamp(48px, 6vw, 72px);
  --head-gap: 36px;

  --ink: #eaf1ff;
  --muted: #9fb0cf;
  --line: rgba(255, 255, 255, 0.08);
  --card: #0a1228;
  --radius: 13px;
  --shadow: 0 14px 34px -20px rgba(11, 42, 99, 0.32);

  /* Yumuşak ışık lekeleri — kartlardaki backdrop-blur'un "cam" gibi
     algılanabilmesi için düz lacivertin üzerine ortam parlaması. */
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(29, 78, 216, 0.28), transparent 70%),
    linear-gradient(180deg, #0a1230 0%, var(--navy) 30%, #04060f 100%);
  background-color: var(--navy);
  color: var(--ink);
  /* Intentionally no font-family here: the design repo's declaration used
     var(--font-sans) — a Next.js-only variable that is never defined in this
     app, so the whole declaration was invalid at computed-value time and the
     page always inherited the site font. Made explicit rather than accidental. */
  line-height: 1.5;
  position: relative;
  /* Yatay kayma kelepçesi — hiçbir dekoratif katman sayfayı genişletemesin */
  overflow-x: hidden;
  overflow-x: clip;
}
/* Film grain — düz dijital yüzeyi kıran çok hafif doku */
.vipclub::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.vipclub h1,
.vipclub h2,
.vipclub h3,
.vipclub h4 {
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.vipclub img {
  max-width: 100%;
  display: block;
}
.vipclub a {
  color: inherit;
  text-decoration: none;
}

.vipclub .wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Kicker — şampanya altın + ince hairline (v3 "Salon Privé" imzası) */
.vipclub .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ---------- Buttons — VIP Landing dili: köşeli (10px), bevel'li altın ---------- */
.vipclub .btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vipclub .btn:active {
  transform: translateY(1px);
}
.vipclub .btn--ghost {
  background: transparent;
  color: var(--bv-muted-fg);
}
.vipclub .btn--ghost:hover {
  color: #fff;
}
.vipclub .btn--line {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid var(--line);
}
.vipclub .btn--line:hover {
  background: rgba(255, 255, 255, 0.08);
}
.vipclub .btn--sm {
  height: 36px;
  padding: 0 18px;
  font-size: 0.76rem;
}
.vipclub .btn--gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f3dfae 0%, #e8d3a4 45%, #c9a96a 100%);
  color: #2a1f08;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(168, 136, 79, 0.6),
    0 10px 22px -10px rgba(168, 136, 79, 0.6);
}
.vipclub .btn--gold:hover {
  filter: brightness(1.06);
}
/* hover'da ışık süpürmesi */
.vipclub .btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-130%) skewX(-10deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.vipclub .btn--gold:hover::after {
  transform: translateX(130%) skewX(-10deg);
}
/* Dönen altın ışıltılı çerçeve (design system: bv-shimmer-border-gold) */
.vipclub .btn--shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(168, 136, 79, 0.25) 0%,
    rgba(232, 211, 164, 0.4) 35%,
    rgba(255, 245, 210, 1) 50%,
    rgba(232, 211, 164, 0.4) 65%,
    rgba(168, 136, 79, 0.25) 100%
  );
  background-size: 200% 100%;
  animation: vip-shimmer-border 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
@keyframes vip-shimmer-border {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .btn--shimmer::before {
    animation: none;
  }
}

/* WhatsApp CTA — altın zemin + nabız halkası + hover'da yükselme */
.vipclub .btn--wa {
  gap: 9px;
  animation: vip-wa-pulse 2.6s ease-in-out infinite;
}
.vipclub .btn--wa svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.vipclub .btn--wa:hover {
  transform: translateY(-2px);
}
@keyframes vip-wa-pulse {
  0%,
  100% {
    box-shadow:
      0 10px 22px -10px rgba(168, 136, 79, 0.9),
      0 0 0 0 rgba(232, 211, 164, 0.45);
  }
  50% {
    box-shadow:
      0 10px 22px -10px rgba(168, 136, 79, 0.9),
      0 0 0 10px rgba(232, 211, 164, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .btn--wa {
    animation: none;
  }
}

.vipclub .cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.vipclub .cbtn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bv-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.vipclub .cbtn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}
.vipclub .cbtn--primary {
  background: var(--bv-primary);
  color: #fff;
  box-shadow: 0 10px 20px -8px var(--bv-primary);
}
.vipclub .cbtn--primary:hover {
  background: var(--bv-primary-press);
}

/* ---------- Section base — standart dikey ritim + tonal zebra ---------- */
.vipclub .block {
  position: relative;
  padding: var(--sec-pad) 0;
}
/* Çapa hedefleri sticky header'ın altına gömülmesin */
.vipclub section[id] {
  scroll-margin-top: 88px;
}
/* Tonlu paneller (sınıf tabanlı — araya bölüm eklemek düzeni bozmaz) */
.vipclub .block--tint {
  background: rgba(16, 26, 56, 0.22);
  /* ::after dokusunun içeriğin ALTINDA kalması için stacking context */
  isolation: isolate;
}
/* Guilloche dokusu (üyelik kartından) yalnızca tonlu panellerde —
   her panelin üstünden girer, aşağıya doğru sönümlenir; düz bölümler temiz. */
.vipclub .block--tint::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* koyu halkalar — panel yüzeyine "oyulmuş" gibi, açık renkten daha sessiz */
  background:
    repeating-radial-gradient(circle at 110% -30%, transparent 0 7px, rgba(3, 6, 16, 0.32) 7px 8px),
    repeating-radial-gradient(circle at -10% 130%, transparent 0 9px, rgba(3, 6, 16, 0.22) 9px 10px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}

/* ---------- Hero — "Salon Privé" split (v3) + crossfade slayt ---------- */
.vipclub .hero {
  position: relative;
  overflow: hidden;
  padding: var(--sec-pad) 0;
}
/* Slayt katmanı: 3 görsel, 24s döngüde yumuşak crossfade + yavaş Ken Burns */
.vipclub .hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vipclub .hero__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  animation:
    vip-hero-fade 24s ease-in-out infinite,
    vip-hero-zoom 24s ease-in-out infinite alternate;
}
.vipclub .hero__slides img:nth-child(1) { animation-delay: -2s; }
.vipclub .hero__slides img:nth-child(2) { animation-delay: 6s; }
.vipclub .hero__slides img:nth-child(3) { animation-delay: 14s; }
/* Okunurluk overlay'leri slaytların üzerinde sabit */
.vipclub .hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6, 10, 24, 0.96) 0%, rgba(6, 10, 24, 0.8) 42%, rgba(6, 10, 24, 0.5) 100%),
    linear-gradient(180deg, rgba(6, 10, 24, 0.25) 0%, rgba(6, 10, 24, 0.55) 60%, var(--navy) 100%);
}
@keyframes vip-hero-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes vip-hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .hero__slides img {
    animation: none;
  }
  .vipclub .hero__slides img:first-child {
    opacity: 1;
  }
}
.vipclub .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 480px at 78% 18%, rgba(232, 211, 164, 0.13), transparent 62%),
    radial-gradient(700px 420px at 12% 88%, rgba(17, 88, 214, 0.18), transparent 60%);
  pointer-events: none;
}
.vipclub .hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 920px) {
  .vipclub .hero__in {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.vipclub .hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 0;
  max-width: 15ch;
}
.vipclub .hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #fff5d2 0%, var(--gold) 55%, #b89255 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Duyuru pili (landing vl-pill) */
.vipclub .hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--bv-muted-fg);
  margin-bottom: 22px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.vipclub .hero__pill:hover {
  background: rgba(255, 255, 255, 0.08);
}
.vipclub .hero__pill b {
  color: var(--gold);
  font-weight: 700;
}
.vipclub .hero__pill .sep {
  width: 1px;
  height: 12px;
  background: var(--line);
}
.vipclub .hero__lead {
  color: var(--bv-muted-fg);
  margin-top: 16px;
  font-size: 1.02rem;
  max-width: 46ch;
}
.vipclub .hero__note {
  margin-top: 20px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(234, 241, 255, 0.42);
}
.vipclub .hero__cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.vipclub .hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0 36px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.vipclub .hproof {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.vipclub .hproof b {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--champ);
}
.vipclub .hproof span {
  font-size: 0.72rem;
  color: var(--bv-muted-fg);
  letter-spacing: 0.04em;
}

/* Membership card (v3 hero) */
.vipclub .mcard-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1100px;
  /* idle float — kimse dokunmuyorken kart yavaşça nefes alır */
  animation: vip-card-float 7s ease-in-out infinite;
}
.vipclub .mcard-stage:hover {
  animation-play-state: paused;
}
@keyframes vip-card-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(0.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .mcard-stage {
    animation: none;
  }
}
.vipclub .mcard {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1.586;
  border-radius: 24px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(130% 170% at 82% -12%, var(--mc-soft, rgba(232, 211, 164, 0.26)), transparent 52%),
    radial-gradient(90% 120% at 8% 110%, rgba(17, 88, 214, 0.2), transparent 55%),
    linear-gradient(135deg, #15224b 0%, #0c1530 55%, #090f24 100%);
  box-shadow:
    0 0 0 1px var(--mc-ring, rgba(232, 211, 164, 0.45)),
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 -14px 34px -18px var(--mc-soft, rgba(232, 211, 164, 0.25)) inset,
    0 44px 90px -32px rgba(0, 0, 0, 0.85);
  transition-property: transform, box-shadow, background;
  transform: rotate3d(0.5, -1, 0.12, 16deg) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
  overflow: visible;
  transform-style: preserve-3d; /* parallax katmanları için */
  z-index: 1;
}
/* doku/filigran kırpma katmanı (eski overflow:hidden'ın yerine) */
.vipclub .mcard__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  transform: translateZ(2px);
  pointer-events: none;
}
/* derinlik: içerikler ayrı düzlemlerde — tilt'te mikro-parallax */
.vipclub .mcard__top {
  transform: translateZ(26px);
}
.vipclub .mcard__mid {
  transform: translateZ(38px);
}
.vipclub .mcard__bottom {
  transform: translateZ(30px);
}
/* holografik parlama — imleci izleyen speküler ışık + hafif renk kırılması */
.vipclub .mcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(46px);
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 58%),
    conic-gradient(
      from 200deg at var(--mx, 50%) var(--my, 50%),
      rgba(255, 120, 200, 0.05),
      rgba(120, 200, 255, 0.06),
      rgba(255, 235, 170, 0.07),
      rgba(160, 120, 255, 0.05),
      rgba(255, 120, 200, 0.05)
    );
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.vipclub .mcard-stage:hover .mcard::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .mcard::before {
    display: none;
  }
}
.vipclub .mcard-stage:hover .mcard {
  transform: rotate3d(0.5, -1, 0.12, 4deg) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transition: transform 0.18s ease-out;
}
.vipclub .mcard__guilloche {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-radial-gradient(circle at 115% -20%, transparent 0 7px, rgba(255, 245, 210, 0.045) 7px 8px),
    repeating-radial-gradient(circle at -15% 120%, transparent 0 9px, rgba(255, 255, 255, 0.03) 9px 10px);
}
.vipclub .mcard__watermark {
  position: absolute;
  right: -22px;
  bottom: -38px;
  pointer-events: none;
  font-size: 11.5rem;
  line-height: 1;
  color: var(--mc, var(--champ));
  opacity: 0.07;
  transform: rotate(-12deg);
}
.vipclub .mcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(44px);
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 245, 210, 0.2) 50%, rgba(255, 255, 255, 0.07) 54%, transparent 62%);
  background-size: 260% 100%;
  background-position: 170% 0;
  animation: mshine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .mcard::after {
    animation: none;
  }
}
@keyframes mshine {
  0%, 58% { background-position: 170% 0; }
  88%, 100% { background-position: -70% 0; }
}
.vipclub .mcard-glow {
  position: absolute;
  bottom: -10%;
  width: 68%;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, var(--mc-glow, rgba(232, 211, 164, 0.32)), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.vipclub .mcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vipclub .mcard__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.vipclub .mcard__brand img {
  /* Yanındaki "BayMavi" metni kaldırıldı — logo tek başına, büyütüldü */
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.vipclub .mcard__tier {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mc, var(--champ));
  border: 1px solid var(--mc-ring, var(--goldline));
  border-radius: 999px;
  padding: 6px 13px 5px;
  background: var(--mc-tint, rgba(232, 211, 164, 0.08));
  backdrop-filter: blur(4px);
}
.vipclub .mcard__mid {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vipclub .mcard__chip {
  position: relative;
  width: 46px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f3dfae, var(--gold) 55%, #8a6526);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 5px 6px;
  gap: 3px;
}
.vipclub .mcard__chip i {
  display: block;
  border-radius: 2px;
  background: rgba(80, 52, 10, 0.35);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}
.vipclub .mcard__nfc {
  width: 22px;
  height: 22px;
  color: rgba(255, 245, 210, 0.65);
  flex-shrink: 0;
}
.vipclub .mcard__num {
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(243, 238, 223, 0.8);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.vipclub .mcard__num small {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243, 238, 223, 0.5);
  margin-right: 9px;
}
.vipclub .mcard__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.vipclub .mcard__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vipclub .mcard__name small {
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bv-muted-fg);
}
.vipclub .mcard__name b {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.vipclub .mcard__pts {
  text-align: right;
}
.vipclub .mcard__pts small {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bv-muted-fg);
}
.vipclub .mcard__pts b {
  font-size: 1.08rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff5d2, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Tiers — daha koyu sahne + yavaş süzülen aurora ---------- */
.vipclub .tiers {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* aurora (inset:-20%) bölüm dışına taşıp yatay scroll yaratmasın */
  background: rgba(3, 5, 14, 0.45);
}
.vipclub .tiers::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(640px 460px at 30% 35%, rgba(29, 78, 216, 0.16), transparent 65%),
    radial-gradient(560px 420px at 72% 60%, rgba(232, 211, 164, 0.07), transparent 65%),
    radial-gradient(500px 380px at 50% 85%, rgba(97, 95, 255, 0.1), transparent 65%);
  filter: blur(40px);
  animation: vip-aurora 46s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes vip-aurora {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translate3d(3%, 2%, 0) rotate(1deg) scale(1.06);
  }
  100% {
    transform: translate3d(-2%, 4%, 0) rotate(-1deg) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .tiers::before {
    animation: none;
  }
}
/* Unicorn Studio WebGL sahnesi — içerik altında; aurora, sahne yüklenene
   kadar fallback olarak görünür kalır. */
.vipclub .tiers__webgl {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.vipclub .tiers__webgl canvas {
  width: 100% !important;
  height: 100% !important;
}
/* Sahne %280 render edilip ~0.357'ye ölçeklenir → desen belirgin küçülür.
   Opaklık: perde sabit, yalnız sahne söner. */
.vipclub .tiers__webgl > div {
  width: 280% !important;
  height: 280% !important;
  transform: scale(0.3572);
  transform-origin: top left;
  opacity: 0.3;
}
/* metin/cam kontrastı için sahnenin üstüne hafif lacivert perde */
.vipclub .tiers__webgl::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 14, 0.55) 0%, rgba(3, 5, 14, 0.28) 30%, rgba(3, 5, 14, 0.28) 70%, rgba(3, 5, 14, 0.6) 100%);
}
/* Tam genişlik görsel breaker — bölümler arası sinematik nefes */
.vipclub .lx-break {
  position: relative;
  height: clamp(220px, 30vw, 380px);
  overflow: hidden;
}
.vipclub .lx-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vipclub .lx-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 10, 24, 0.92) 0%, rgba(6, 10, 24, 0.15) 35%, rgba(6, 10, 24, 0.15) 65%, rgba(4, 6, 15, 0.92) 100%),
    rgba(4, 6, 15, 0.2);
}
.vipclub .tiers > .wrap {
  position: relative;
}
.vipclub .tiers__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--head-gap);
}
.vipclub .tiers__intro h2 {
  color: var(--bv-fg);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.vipclub .tiers__intro p {
  color: var(--bv-muted-fg);
  margin-top: 12px;
  font-size: 0.95rem;
}

/* ===== Tier ladder — minimal: kutusuz, ince ray, küçük noktalar ===== */
.vipclub .ladder {
  padding: 10px 0 0;
  margin-bottom: 28px;
}
.vipclub .ladder__track {
  position: relative;
}
.vipclub .ladder__rail,
.vipclub .ladder__fill {
  position: absolute;
  top: 37px;
  height: 2px;
  border-radius: 999px;
}
.vipclub .ladder__rail {
  left: 10%;
  right: 10%;
  background: rgba(255, 255, 255, 0.08);
}
.vipclub .ladder__fill {
  left: 10%;
  background: linear-gradient(90deg, var(--gold-deep), var(--champ));
  box-shadow: 0 0 12px rgba(232, 211, 164, 0.45);
  transition: width 0.35s ease;
}
.vipclub .ladder__row {
  position: relative;
  display: grid;
}
.vipclub .lstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.vipclub .lstep__badge {
  width: 76px;
  height: 76px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}
.vipclub .lstep__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.vipclub .lstep__badge.is-now {
  transform: scale(1.16);
}
.vipclub .lstep__badge.is-now img {
  filter: drop-shadow(0 0 14px rgba(232, 211, 164, 0.5)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}
/* Kilitli: opak karartma — saydamlık olursa arkadaki ray içinden görünüyor */
.vipclub .lstep__badge.is-locked img {
  filter: grayscale(0.75) brightness(0.45) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.vipclub .lstep__label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bv-muted-fg);
  text-align: center;
}
.vipclub .lstep__pts {
  margin-top: -6px;
  font-size: 0.58rem;
  color: rgba(159, 176, 207, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vipclub .lstep__now {
  margin-top: 2px;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--champ);
  border: 1px solid var(--goldline);
  padding: 3px 9px 2px;
  border-radius: 999px;
}
.vipclub .ladder__note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.66rem;
  color: rgba(159, 176, 207, 0.55);
}

/* ===== VIP perks — vitrin + liste (Liquid Glass) ===== */
.vipclub .perks {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .vipclub .perks {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }
}
/* Kompakt perk satırları */
.vipclub .perk-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vipclub .perk-row:hover {
  transform: translateX(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.2),
    0 0 0 1px var(--goldline);
}
.vipclub .perk-row__icon {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(220, 230, 255, 0.32)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}
.vipclub .perk-row__txt {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vipclub .perk-row__txt .t {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.vipclub .perk-row__txt .d {
  font-size: 0.7rem;
  color: var(--bv-muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vipclub .perk-row__val {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
}
.vipclub .perk-row__val b {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--champ);
  font-variant-numeric: tabular-nums;
}
.vipclub .perk-row__val b.lock {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(234, 241, 255, 0.45);
}
.vipclub .perk-row__val small {
  font-size: 0.62rem;
  color: rgba(159, 176, 207, 0.6);
}

.vipclub .tiers__notes {
  margin-top: 22px;
}
.vipclub .tiers__notes p {
  font-size: 0.74rem;
  color: var(--bv-muted-fg);
  margin-top: 8px;
  line-height: 1.6;
}
@media (max-width: 859px) {
  .vipclub .ladder__row {
    gap: 2px;
  }
  .vipclub .lstep__label {
    font-size: 0.78rem;
  }
  /* Rozetler mobilde büyük (kullanıcı kararı — 48px çok küçüktü) */
  .vipclub .lstep__badge {
    width: 68px;
    height: 68px;
  }
  .vipclub .ladder__rail,
  .vipclub .ladder__fill {
    top: 33px;
  }
}

/* ========== Luxury content sections ========== */
.vipclub .lx-head {
  max-width: 680px;
  margin: 0 auto var(--head-gap);
  text-align: center;
}
/* Sola yaslı varyant — bölüm ritmi için (masalar) */
.vipclub .lx-head--left {
  margin-left: 0;
  margin-right: auto;
  max-width: 620px;
  text-align: left;
}
.vipclub .lx-head--left .eyebrow::after {
  display: none;
}
.vipclub .lx-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bv-fg);
  margin-top: 14px;
}
.vipclub .lx-head.dark h2 {
  color: #fff;
}
.vipclub .lx-head p {
  color: var(--bv-muted-fg);
  margin-top: 10px;
  font-size: 0.95rem;
}
.vipclub .lx-head.dark p {
  color: rgba(255, 255, 255, 0.6);
}

/* Bölüm zeminleri şeffaf — kök arka plandaki ışık lekeleri kartların
   arkasından görünsün ki cam efekti her bölümde çalışsın. */
.vipclub .lx-muted {
  background: transparent;
}
.vipclub .lx-dark {
  background: transparent;
  color: #fff;
}

/* host */
.vipclub .lx-host__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
}
.vipclub .lx-host__media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow);
  position: relative;
}
.vipclub .lx-host__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vipclub .lx-host__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(8, 16, 36, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
}
.vipclub .lx-host__tag .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
}
.vipclub .lx-host__tag .who {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}
.vipclub .lx-host__tag .who small {
  display: block;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.64rem;
}
.vipclub .lx-host__body h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--bv-fg);
  margin-top: 14px;
}
.vipclub .lx-host__body > p {
  color: var(--bv-muted-fg);
  margin-top: 12px;
  font-size: 0.97rem;
}
.vipclub .lx-host__list {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.vipclub .lx-host__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--bv-fg);
}
.vipclub .lx-host__list .ic {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 188, 125, 0.12);
  color: #009966;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 1px;
}

/* event / generic cards */
.vipclub .lx-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.vipclub .lx-card {
  background: var(--card);
  border: 1px solid var(--bv-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 30px -26px rgba(60, 55, 140, 0.5);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vipclub .lx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(60, 55, 140, 0.6);
}
.vipclub .lx-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy);
}
.vipclub .lx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vipclub .lx-card__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(6, 10, 24, 0.78);
  backdrop-filter: blur(6px);
  color: var(--champ);
  border: 1px solid var(--goldline);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 5px 11px 4px;
  border-radius: 999px;
}
.vipclub .lx-card__date {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(6, 10, 24, 0.82);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 6px 10px 5px;
  border-radius: 10px;
  text-align: center;
  line-height: 1;
}
.vipclub .lx-card__date small {
  display: block;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.vipclub .lx-card__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vipclub .lx-card__title {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bv-fg);
}
.vipclub .lx-card__desc {
  font-size: 0.82rem;
  color: var(--bv-muted-fg);
  margin-top: 6px;
  flex: 1;
  line-height: 1.5;
}
.vipclub .lx-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.vipclub .lx-spots {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--champ);
}
.vipclub .lx-spots.ok {
  color: rgba(255, 255, 255, 0.55);
}

/* gifts — minimal katalog satırları: küçük kare görsel + başlık + altın puan */
.vipclub .lx-gift-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.vipclub .lx-gift {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.vipclub .lx-gift:hover {
  transform: translateX(3px);
}
.vipclub .lx-gift__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.vipclub .lx-gift__txt {
  min-width: 0;
  flex: 1;
}
.vipclub .lx-gift__title {
  font-size: 0.95rem;
  font-weight: 800;
}
.vipclub .lx-gift__body {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.vipclub .lx-gift__val {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.vipclub .lx-points {
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(180deg, #fff5d2, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.vipclub .lx-points small {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.vipclub .lx-stock {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.vipclub .lx-stock.low {
  color: var(--champ);
}

/* lounge tables — 2×2 canlı masa görüntülü kartlar */
.vipclub .lx-tables {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .vipclub .lx-tables {
    grid-template-columns: repeat(2, 1fr);
  }
}
.vipclub .lx-tbl {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vipclub .lx-tbl__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.vipclub .lx-tbl__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.vipclub .lx-tbl:hover .lx-tbl__media img {
  transform: scale(1.045);
}
.vipclub .lx-tbl__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 24, 0.1) 40%, rgba(6, 10, 24, 0.72) 100%);
}
.vipclub .lx-tbl__type {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--champ);
  border: 1px solid var(--goldline);
  background: rgba(6, 10, 24, 0.78);
  backdrop-filter: blur(6px);
  padding: 4px 10px 3px;
  border-radius: 999px;
}
.vipclub .lx-tbl__live {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
  background: rgba(6, 10, 24, 0.78) !important;
  backdrop-filter: blur(6px);
}
.vipclub .lx-tbl__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px;
}
.vipclub .lx-tbl__name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bv-fg);
}
.vipclub .lx-tbl__meta {
  font-size: 0.78rem;
  color: var(--bv-muted-fg);
  margin-top: 5px;
}
.vipclub .lx-tbl__meta b {
  color: var(--bv-fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vipclub .lx-tbl__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.vipclub .lx-tbl__seats {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bv-muted-fg);
  white-space: nowrap;
}
.vipclub .lx-tbl__seats b {
  color: #fff;
}
.vipclub .lx-tbl__seats.full b {
  color: rgba(255, 255, 255, 0.45);
}
.vipclub .lx-dealer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  color: var(--bv-muted-fg);
}
.vipclub .lx-dealer .av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #6366f1);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
}

/* gold point-economy banner */
.vipclub .lx-gold {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--sec-pad);
}
.vipclub .lx-gold__media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.vipclub .lx-gold__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vipclub .lx-gold__body h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  margin-top: 14px;
}
.vipclub .lx-gold__body > p {
  color: rgba(255, 255, 255, 0.6);
  margin-top: 12px;
  font-size: 0.95rem;
  max-width: 520px;
}
.vipclub .lx-gold__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.vipclub .lx-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
}
.vipclub .lx-stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--champ);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vipclub .lx-stat span {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
  display: block;
  line-height: 1.4;
}

/* pills (canlı rozeti — masalarda kullanılıyor) */
.vipclub .lx-pill {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 9px;
  border-radius: 999px;
}
.vipclub .lx-pill.live {
  background: rgba(232, 211, 164, 0.12);
  color: var(--champ);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vipclub .lx-pill.live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champ);
  animation: vipc-ping 1.3s infinite;
}
@keyframes vipc-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media (min-width: 640px) {
  .vipclub .lx-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .vipclub .lx-host__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 44px;
  }
  .vipclub .lx-host--rev .lx-host__media {
    order: 2;
  }
  .vipclub .lx-gold {
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
  }
  .vipclub .lx-gold--rev .lx-gold__media {
    order: 2;
  }
}
@media (min-width: 960px) {
  .vipclub .lx-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .vipclub .lx-gift-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  .vipclub .lx-tables {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 860px) {
  .vipclub .hero__card {
    min-height: 460px;
    background-image:
      linear-gradient(180deg, rgba(8, 5, 48, 0) 55%, rgba(8, 5, 48, 0.35) 82%, rgba(8, 5, 48, 0.7) 100%),
      linear-gradient(90deg, var(--navy) 4%, rgba(8, 5, 48, 0.92) 26%, rgba(8, 5, 48, 0.55) 50%, rgba(8, 5, 48, 0.1) 72%, rgba(8, 5, 48, 0) 90%),
      url("/assets/vip-redesign/vip/hero-casino.png");
  }
}

/* ---------- Contact band ---------- */
/* Başvuru sahnesi — fotoğrafsız: tepeden altın ışık + koyu degrade
   (landing'in CTA bandı dili; form sahnenin tek yıldızı kalır) */
.vipclub .contact {
  color: #fff;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 280px at 50% 0%, rgba(232, 211, 164, 0.12), transparent 70%),
    radial-gradient(900px 420px at 50% 110%, rgba(29, 78, 216, 0.12), transparent 70%),
    linear-gradient(180deg, #0a1230 0%, #060a18 55%, #04060f 100%);
}
.vipclub .contact .wrap {
  position: relative;
  z-index: 2;
}
.vipclub .contact h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 14px;
  text-align: center;
}
.vipclub .contact .lead {
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
  max-width: 760px;
  margin: 12px auto 0;
  font-size: 0.9rem;
}
.vipclub .cform {
  margin-top: 32px;
  display: grid;
  gap: 18px 14px;
  grid-template-columns: 1fr;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.vipclub .field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 7px;
}
.vipclub .field input {
  width: 100%;
  padding: 14px 15px;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border 0.15s, background 0.15s;
}
.vipclub .field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.vipclub .field input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}
.vipclub .field input.err {
  border-color: #ff6b6b;
}
.vipclub .cform .btn--gold {
  padding: 14px;
  font-size: 0.95rem;
}
.vipclub .cform__note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.vipclub .cform__ok {
  background: rgba(168, 136, 79, 0.16);
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  padding: 13px;
  border-radius: 11px;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 600px) {
  .vipclub .cform {
    grid-template-columns: 1fr 1fr;
  }
  .vipclub .cform .field--name {
    grid-column: 1 / -1;
  }
}
@media (min-width: 860px) {
  .vipclub .cform {
    grid-template-columns: 1fr 1fr 1fr auto;
    /* start, not end: the submit button now lives on its own full-width row, so
       end-alignment serves no purpose; end sank error-less fields to the row
       baseline of their erroring neighbors (with only phone/e-mail invalid, the
       name field dropped out of alignment). */
    align-items: start;
  }
  .vipclub .cform .field--name {
    grid-column: auto;
  }
  .vipclub .cform .btn--gold {
    height: 50px;
  }
  .vipclub .cform__note {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vipclub *,
  .vipclub *::before,
  .vipclub *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Birleşik kart yüzeyi — etkinlik/hediye/masa kartları aynı
   koyu lacivert dolgu + ince ring dilini paylaşır.
   ============================================================ */
.vipclub .lx-card,
.vipclub .lx-gift,
.vipclub .lx-tbl {
  position: relative;
  isolation: isolate;
  background: var(--card);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.vipclub .lx-card:hover,
.vipclub .lx-gift:hover,
.vipclub .lx-tbl:hover {
  background: var(--card);
  border: 0;
  box-shadow: 0 0 0 1px var(--goldline);
}

.vipclub .lx-gift {
  overflow: hidden;
}
.vipclub .lx-gift > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   FX — scroll-reveal girişleri ve mouse-takipli spotlight
   (VipFx bileşeni sınıfları/değişkenleri yönetir).
   ============================================================ */
.vipclub .fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.vipclub .fx-reveal.fx-in {
  opacity: 1;
  transform: none;
}

/* İmlecin altında dolaşan yumuşak ışık — cam yüzeyin üstünde,
   içerik z-index:1'de kaldığı için okunabilirliği bozmaz. */
.vipclub .perk-row::after,
.vipclub .lx-gift::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.09),
    transparent 70%
  );
  pointer-events: none;
}
.vipclub .perk-row:hover::after,
.vipclub .lx-gift:hover::after {
  opacity: 1;
}

.vipclub .contact .eyebrow {
  display: flex;
  justify-content: center;
}

/* ============================================================
   Üye yorumları — kaymalı testimonial
   ============================================================ */
.vipclub .quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.vipclub .quote__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.vipclub .quote__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.vipclub .quote__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(232, 211, 164, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(6, 10, 24, 0.88), rgba(6, 10, 24, 0.78) 50%, rgba(4, 6, 15, 0.9));
}
.vipclub .quote__stage {
  display: grid;
}
.vipclub .quote__item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.vipclub .quote__item.is-out {
  transform: translateX(-36px);
}
.vipclub .quote__item.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.vipclub .quote__stars {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.35em;
  color: var(--champ);
  text-shadow: 0 0 14px rgba(255, 245, 210, 0.35);
}
.vipclub .quote__item blockquote {
  margin: 22px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.vipclub .quote__item figcaption {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--bv-muted-fg);
}
.vipclub .quote__item figcaption b {
  color: var(--bv-fg);
  font-weight: 700;
}
.vipclub .quote__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.vipclub .quote__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}
.vipclub .quote__dot.is-on {
  background: var(--champ);
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .quote__item {
    transition: opacity 0.3s ease;
    transform: none;
  }
  .vipclub .quote__item.is-out {
    transform: none;
  }
}
/* ── Contact form: kayan altın göstergeli segmented switch ── */
.vipclub .cintent {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 6px;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  min-width: 0;
}
/* aktif seçeneğin altında kayan sessiz cam pil — altın CTA ile yarışmaz */
.vipclub .cintent::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.vipclub .cintent.is-member::before {
  transform: translateX(100%);
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .cintent::before {
    transition: none;
  }
}
.vipclub .cintent__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The site ships a global `label { margin-bottom: … }` rule; that margin made
     the label shorter than the fieldset row, so its flex-centered text rode high
     inside the visual pill. Kill it here. */
  margin: 0;
  padding: 7px 14px;
  border-radius: 8px;
  /* Use the real shipped semibold face (registered at weight 400 in
     companycss/1/style.css) instead of font-weight:700 on the inherited
     family — synthetic bold has unpredictable vertical metrics, which is
     what pushed the labels off the pill's visual center. */
  font-family: Graphik-Semibold, "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  text-align: center;
}
.vipclub .cintent__opt:hover {
  color: rgba(255, 255, 255, 0.8);
}
.vipclub .cintent__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.vipclub .cintent__opt.is-on {
  color: var(--gold);
}
.vipclub .cintent__opt.is-on:hover {
  color: var(--gold);
}
.vipclub .cintent__opt:has(input:focus-visible) {
  outline: 2px solid rgba(232, 211, 164, 0.6);
  outline-offset: 2px;
}
.vipclub .ferr {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #f0a3a3;
}
.vipclub .cform__consent {
  grid-column: 1 / -1;
  margin: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}
.vipclub .cform__consent input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #e8d3a4;
  cursor: pointer;
}
.vipclub .cform__consent label {
  cursor: pointer;
}
.vipclub .cform__consent .u {
  color: #e8d3a4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* KVKK satırı eklendiğinde Gönder kendi satırına düşer — tam genişlik yap */
.vipclub .cform .btn--gold {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* =========================================================================
   Sadeleştirilmiş varyant — "flat" mod (app/vip/_variants/*)
   Yalnızca .vipclub--flat kökü altında geçerli; baseline /vip etkilenmez.
   Amaç: tüm dekoratif animasyonları durdurup ağır katmanları gizlemek —
   prefers-reduced-motion mantığının kalıcı hali.
   ========================================================================= */
.vipclub--flat *,
.vipclub--flat *::before,
.vipclub--flat *::after {
  animation: none !important;
}
/* Hero: crossfade/zoom yok — yalnızca ilk kare statik durur */
.vipclub--flat .hero__slides img {
  opacity: 0;
}
.vipclub--flat .hero__slides img:first-child {
  opacity: 1;
}
/* Aurora glow ve film-grain dokusu kapalı */
.vipclub--flat .tiers::before {
  display: none;
}
.vipclub--flat.vipclub::after {
  display: none;
}
/* Üyelik kartı idle float durur (tilt zaten VipFx olmadan uygulanmaz) */
.vipclub--flat .mcard-stage {
  animation: none !important;
}

/* ---------- Mobil hero — içerik ortalanır (kullanıcı kararı) ---------- */
@media (max-width: 640px) {
  /* Taşma kelepçesi — grid çocukları min-content'e büyüyüp viewport'u aşamasın
     (pil nowrap'ı tüm hero kolonunu 500px+'a itiyordu) */
  .vipclub .hero__in > * {
    min-width: 0;
    max-width: 100%;
  }
  .vipclub .hero__pill {
    white-space: normal;
    height: auto;
    padding: 7px 14px;
    line-height: 1.35;
    text-align: center;
  }
  .vipclub .hero__in > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .vipclub .hero h1 {
    max-width: none;
  }
  .vipclub .hero__lead {
    max-width: 40ch;
  }
  .vipclub .hero__cta {
    justify-content: center;
  }
  /* Bonus şeridi — tek satır: üç öğe yan yana, tipografi küçülür */
  .vipclub .hero__proof {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0 18px;
  }
  .vipclub .hproof {
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
  }
  .vipclub .hproof b {
    font-size: clamp(0.92rem, 4.2vw, 1.15rem);
    white-space: nowrap;
  }
  .vipclub .hproof span {
    font-size: 0.62rem;
    line-height: 1.35;
  }
}

/* ---------- Taşma düzeltmesi — perk grid'i min-content'e büyüyemesin
   (nowrap açıklamalar satırı viewport dışına itiyordu) ---------- */
.vipclub .perks {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 880px) {
  .vipclub .perks {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.vipclub .perk-row {
  min-width: 0;
}

/* ---------- Mobil: scroll'da kart hafif hareket (kullanıcı isteği) ----------
   CSS scroll-driven animation — JS yok; desteklemeyen tarayıcıda sessizce
   devre dışı. --flat varyantlarında blanket animation:none'ı özgül
   seçicilerle ezer. */
@supports (animation-timeline: scroll()) {
  @media (max-width: 640px) {
    .vipclub .mcard-stage {
      animation: none; /* idle float mobilde kapalı — tek hareket scroll'dan */
    }
    .vipclub .mcard,
    .vipclub--flat .mcard {
      animation: vip-card-scroll ease-out both !important;
      /* sayfanın ilk ~500px kaydırmasına bağlı — kart süzülür ve doğrulur.
         !important şart: --flat'ın blanket `animation: none !important`
         shorthand'i animation-range/timeline'ı da sıfırlıyor. */
      animation-timeline: scroll(root) !important;
      animation-range: 0px 500px !important;
    }
  }
}
@keyframes vip-card-scroll {
  from {
    transform: translateY(0) rotateZ(0deg) scale(1);
  }
  to {
    transform: translateY(-22px) rotateZ(2.6deg) scale(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vipclub .mcard,
  .vipclub--flat .mcard {
    animation: none !important;
  }
}

/* ============================================================
   Light varyant — .vipclub--light (/vip/orta/light)
   Dark dilin token flip'i. Üyelik kartı, davetli turnuvalar bandı ve
   iletişim bölümü koyu "sahne" olarak kalır — kontrast anları.
   ============================================================ */
.vipclub--light {
  --ink: #0e1526;
  --muted: #55647f;
  --line: rgba(14, 21, 38, 0.1);
  --card: #ffffff;
  --bv-fg: #0e1526;
  --bv-muted-fg: #55647f;
  --bv-border: rgba(14, 21, 38, 0.1);
  --bv-muted-bg: #f4f7fc;
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(17, 88, 214, 0.06), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 30%, #f5f7fb 100%);
  background-color: #fbfcfe;
  color: var(--ink);
}
/* Grain light'ta sessiz */
.vipclub--light.vipclub::after {
  display: block;
  opacity: 0.015;
}

/* Hero — fotoğraf katmanı kapalı, metin mürekkep */
.vipclub--light .hero__slides {
  display: none;
}
.vipclub--light .hero::before {
  opacity: 0.45;
}
.vipclub--light .hero h1 {
  color: var(--ink);
}
.vipclub--light .hero h1 em {
  background: linear-gradient(120deg, #8a6d3b 0%, #a8884f 55%, #7f6631 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.vipclub--light .hero__lead {
  color: var(--muted);
}
.vipclub--light .hero__note {
  color: rgba(14, 21, 38, 0.45);
}
.vipclub--light .hero__pill {
  background: #ffffff;
  border-color: rgba(14, 21, 38, 0.14);
  color: var(--muted);
}
.vipclub--light .hero__pill:hover {
  background: #f4f7fc;
}
.vipclub--light .hero__pill b {
  color: #7f6631;
}

/* Şampanya metinler light'ta okunmaz — koyu altına düşür */
.vipclub--light .eyebrow {
  color: #7f6631;
}
.vipclub--light .hproof b {
  color: #7f6631;
}
.vipclub--light .hproof span {
  color: var(--muted);
}

/* Butonlar */
.vipclub--light .btn--line {
  background: #ffffff;
  border-color: rgba(14, 21, 38, 0.16);
  color: var(--ink);
}
.vipclub--light .btn--line:hover {
  background: #f4f7fc;
}
.vipclub--light .btn--ghost {
  color: var(--muted);
}
.vipclub--light .btn--ghost:hover {
  color: var(--ink);
}

/* Tier matrisi */
.vipclub--light .ladder__rail {
  background: rgba(14, 21, 38, 0.12);
}
.vipclub--light .ladder__note {
  color: rgba(85, 100, 127, 0.75);
}
.vipclub--light .perk-row {
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(14, 21, 38, 0.08),
    0 14px 34px -20px rgba(11, 42, 99, 0.18);
}
.vipclub--light .perk-row:hover {
  box-shadow:
    0 0 0 1px rgba(168, 136, 79, 0.35),
    0 14px 34px -20px rgba(11, 42, 99, 0.24);
}
.vipclub--light .perk-row__txt .t {
  color: var(--ink);
}
.vipclub--light .perk-row__val b {
  color: #7f6631;
}
.vipclub--light .perk-row__val b.lock {
  /* Octopus PR#2: ink %45 beyazda ~3:1 idi — küçük metin AA için 6:1 muted */
  color: #55647f;
}
.vipclub--light .perk-row__val small {
  color: rgba(85, 100, 127, 0.8);
}

/* Koyu sahneler — turnuva bandı ve iletişim: dark token'lar geri gelir */
.vipclub--light .lx-dark {
  background: linear-gradient(180deg, #0a1230 0%, #060a18 100%);
}
.vipclub--light .lx-dark,
.vipclub--light .contact {
  --ink: #eaf1ff;
  --muted: #9fb0cf;
  --line: rgba(255, 255, 255, 0.08);
  --card: #0a1228;
  --bv-fg: #eaf1ff;
  --bv-muted-fg: #9fb0cf;
  --bv-border: rgba(255, 255, 255, 0.1);
  --bv-muted-bg: #060a18;
  color: var(--ink);
}
.vipclub--light .lx-dark .eyebrow,
.vipclub--light .contact .eyebrow {
  color: var(--gold-soft);
}
/* Tiers bandı — dark overlay light'ta gri perde yapıyordu; hafif tonal zebra */
.vipclub--light .tiers {
  background: rgba(14, 21, 38, 0.03);
}
/* Aktif seviye etiketi — dark'ta beyaz (eski inline davranış), light'ta mürekkep */
.vipclub .lstep__label.is-here {
  color: #fff;
}
.vipclub--light .lstep__label.is-here {
  color: var(--ink);
}
/* "ŞU AN" pili light'ta koyu altın */
.vipclub--light .lstep__now {
  color: #7f6631;
  border-color: rgba(168, 136, 79, 0.5);
  background: rgba(168, 136, 79, 0.08);
}
/* Krom 3D ikonlar beyaz kartta kayboluyordu — koyu lacivert vitrin zemini */
.vipclub--light .perk-row__icon {
  box-sizing: border-box;
  padding: 9px;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 30% 18%, #1a2a5e 0%, #0a1228 62%, #060a18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 16px -10px rgba(11, 42, 99, 0.55);
  filter: none;
}
/* Üyelik kartı light sayfada da koyu ada — metin renkleri dark bağlamda kalır */
.vipclub--light .mcard {
  --bv-fg: #eaf1ff;
  --bv-muted-fg: #9fb0cf;
  color: #eaf1ff;
}
/* Light hero arka planı — marka deseni: kartın guilloche halkaları iki
   köşeden girer + köşede sıcak altın ışıması. Fotoğraf yerine desen. */
.vipclub--light .hero {
  background:
    radial-gradient(720px 400px at 84% 6%, rgba(168, 136, 79, 0.08), transparent 62%),
    radial-gradient(560px 360px at 8% 96%, rgba(17, 88, 214, 0.06), transparent 60%),
    repeating-radial-gradient(circle at 114% -32%, transparent 0 8px, rgba(14, 21, 38, 0.05) 8px 9px),
    repeating-radial-gradient(circle at -14% 134%, transparent 0 10px, rgba(14, 21, 38, 0.035) 10px 11px);
}
/* Yorum kartı — koyu fotoğraflı ada; light'ta metin değişkenleri dark kalır */
.vipclub--light .quote {
  --bv-fg: #eaf1ff;
  --bv-muted-fg: #b7c4dd;
}


/* ==========================================================================
   VIP Davetli Turnuvalar — kaynak bileşen (VipTournaments.tsx) Tailwind
   utility'leriyle yazılmıştı; build adımı olmadığından .vipclub altında düz
   CSS'e çevrildi. Şampanya-altın palet, görsel zemin + canlı geri sayım.
   ========================================================================== */
.vipclub .vtour-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .vipclub .vtour-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Skeleton placeholders — same footprint as .vip-tcard (height:16rem/18rem) so the
   tournaments section reserves its space and the page does not shift when the real
   cards load in. Shown by default; JS swaps them out or collapses the section. */
.vipclub .vt-skel {
  height: 18rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.vipclub .vt-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: vt-skel-shimmer 1.5s ease-in-out infinite;
}
@keyframes vt-skel-shimmer { to { transform: translateX(100%); } }
.vipclub .vip-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 18rem;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vipclub .vip-tcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}
.vipclub .vt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.vipclub .vip-tcard:hover .vt__img { transform: scale(1.05); }
.vipclub .vt__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.45));
}
.vipclub .vt__blur {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}
.vipclub .vt__top {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
}
.vipclub .vt__badge,
.vipclub .vt__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vipclub .vt__badge--live {
  background: linear-gradient(to bottom, #f3dfae, #e8d3a4);
  color: #2a1f08;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.vipclub .vt__badge--soon {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 10, 24, 0.7);
  color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
}
.vipclub .vt__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2a1f08;
  animation: vt-pulse 1.5s ease-in-out infinite;
}
@keyframes vt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.vipclub .vt__cat {
  border: 1px solid rgba(232, 211, 164, 0.4);
  background: rgba(6, 10, 24, 0.7);
  color: #e8d3a4;
  backdrop-filter: blur(4px);
}
.vipclub .vt__prize {
  position: relative;
  z-index: 10;
  margin-top: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
}
.vipclub .vt__prize-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(232, 211, 164, 0.9);
}
.vipclub .vt__prize-amt {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 24px rgba(232, 211, 164, 0.3);
}
@media (min-width: 640px) {
  .vipclub .vt__prize-amt { font-size: 36px; }
}
.vipclub .vt__bottom {
  position: relative;
  z-index: 10;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.vipclub .vt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vipclub .vt__titles {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}
.vipclub .vt__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.vipclub .vt__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
.vipclub .vt__clock {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}
.vipclub .vt__tbox {
  display: flex;
  height: 32px;
  min-width: 2.1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 0 4px;
  backdrop-filter: blur(4px);
}
.vipclub .vt__tval {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.vipclub .vt__tlbl {
  margin-top: 1px;
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}
.vipclub .vt__sep {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}
.vipclub .vt__scar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vipclub .vt__scar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vipclub .vt__scar-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.vipclub .vt__scar-lbl.is-critical { color: #e8d3a4; }
.vipclub .vt__scar-cnt {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}
.vipclub .vt__bar {
  height: 4px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}
.vipclub .vt__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to right, #a8884f, #fff5d2);
  box-shadow: 0 1px 3px rgba(232, 211, 164, 0.3);
  transition: width 0.5s ease;
}
.vipclub .vt__cta {
  display: flex;
  height: 32px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f3dfae, #e8d3a4 50%, #c9a96a);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2a1f08;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}
.vipclub .vip-tcard:hover .vt__cta {
  box-shadow: 0 8px 20px -8px rgba(168, 136, 79, 0.7);
}