/* Body Life Gym — Design Tokens
   Yellow-black premium fitness complex aesthetic
   Built on Alev Ticaret type/spacing scaffolding (Bebas Neue + Inter, 8px grid)
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* === BRAND — yellow neon (default) === */
  --y-50:  #FFFEE6;
  --y-200: #FFF885;
  --y-400: #F5E300;     /* neon yellow — primary accent */
  --y-500: #E8D700;
  --y-600: #C7B900;
  --y-glow: 245 227 0;  /* rgb triplet for shadow/glow */

  /* === BLACKS === */
  --ink-1000: #000000;
  --ink-950:  #060606;
  --ink-900:  #0B0B0D;  /* primary surface */
  --ink-850:  #111114;  /* card surface */
  --ink-800:  #16161A;  /* elevated surface */
  --ink-700:  #1F1F25;
  --ink-600:  #2A2A33;  /* hairlines */
  --ink-500:  #3A3A45;
  --ink-400:  #5A5A66;  /* muted text on dark */
  --ink-300:  #8A8A95;
  --ink-200:  #B5B5BD;
  --ink-100:  #E4E4E8;
  --ink-50:   #F5F5F7;

  /* === SEMANTIC === */
  --bg:           var(--ink-900);
  --surface:      var(--ink-850);
  --surface-2:    var(--ink-800);
  --hairline:     var(--ink-600);
  --text:         #F5F5F7;
  --text-muted:   var(--ink-300);
  --text-dim:     var(--ink-400);
  --accent:       var(--y-400);
  --accent-ink:   var(--ink-1000);  /* text color on yellow */

  /* === TYPE === */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* === SCALE === */
  --t-eyebrow: 12px;
  --t-meta:    13px;
  --t-body:    16px;
  --t-h3:      20px;
  --t-h2:      40px;
  --t-h1:      64px;
  --t-display: 120px;

  /* === SPACING (8px grid) === */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* === RADII === */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* === SHADOWS === */
  --sh-sm:  0 1px 2px rgba(0,0,0,0.4);
  --sh-md:  0 8px 24px rgba(0,0,0,0.5);
  --sh-lg:  0 24px 60px rgba(0,0,0,0.6);
  --sh-glow: 0 0 0 1px rgba(var(--y-glow), 0.4),
             0 0 24px rgba(var(--y-glow), 0.35),
             0 0 64px rgba(var(--y-glow), 0.18);
  --sh-glow-sm: 0 0 16px rgba(var(--y-glow), 0.45);

  /* === LAYOUT === */
  --container: 1280px;
  --pad-x: 80px;
}

@media (max-width: 768px) {
  :root {
    --t-h1: 44px;
    --t-h2: 30px;
    --t-display: 64px;
    --pad-x: 24px;
  }
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* === TYPE PRIMITIVES === */
.display, h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; line-height: 1; margin: 0; font-weight: 400; }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--text-muted);
  font-feature-settings: "tnum";
}

/* === CONTAINER === */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding-inline: 28px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 0 #B5A700, var(--sh-glow-sm);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #B5A700, 0 0 24px rgba(var(--y-glow), 0.6);
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #B5A700, var(--sh-glow-sm);
}
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.btn-wa {
  background: linear-gradient(180deg, #22C55E, #16A34A);
  color: white;
  box-shadow: 0 6px 0 #0d6e36, 0 0 24px rgba(34,197,94,0.3);
}
.btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #0d6e36, 0 0 32px rgba(34,197,94,0.5);
}

/* === ICON HELPERS === */
.bi-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }

/* === UTIL: yellow text === */
.acc { color: var(--accent); }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* === SHARED ANIMATIONS === */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
@keyframes float-fast {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(-3deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--y-glow), 0.45); }
  50%      { box-shadow: 0 0 0 16px rgba(var(--y-glow), 0); }
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  92%, 94% { opacity: 0.6; }
  93%      { opacity: 0.2; }
}
@keyframes shine {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* === REVEAL ON SCROLL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }