/* ==========================================================================
   Bil ve Kazan — site tasarım sistemi
   Renkler uygulamayla aynı: turkuaz #16A085, mavi #1677A0, kırmızı #E74C3C,
   altın #FFC107, turuncu #F39C12. Başlık: Baloo 2, metin: Nunito.
   ========================================================================== */

:root {
  --teal-50: #EAF8F4;
  --teal-100: #CDEFE6;
  --teal-200: #9FE0CF;
  --teal-300: #5FD0B6;
  --teal-400: #26BC9C;
  --teal-500: #16A085;
  --teal-600: #11866F;
  --teal-700: #0D6B5B;
  --teal-800: #0A4F48;
  --deep-700: #08454D;
  --deep-800: #06323B;
  --deep-900: #04222A;
  --blue-400: #2EA7D8;
  --blue-500: #1687A0;
  --blue-600: #1677A0;
  --gold-200: #FFF0B3;
  --gold-300: #FFE082;
  --gold-400: #FFD54F;
  --gold-500: #FFC107;
  --gold-600: #FFB300;
  --gold-700: #C98A00;
  --orange-400: #F7B733;
  --orange-500: #F39C12;
  --orange-600: #E67E22;
  --red-400: #FF6B5B;
  --red-500: #E74C3C;
  --red-600: #C9372A;
  --purple-500: #8E44AD;
  --cyan-300: #8EF3F0;
  --ink-900: #13252B;
  --ink-700: #2F3437;
  --ink-500: #56686E;
  --ink-400: #7C8C91;
  --ink-200: #D5DEE0;
  --paper: #F4FAF8;
  --white: #FFFFFF;

  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 44px;
  --shadow-1: 0 1px 2px rgba(4, 34, 42, .05), 0 6px 18px -6px rgba(4, 34, 42, .10);
  --shadow-2: 0 2px 4px rgba(4, 34, 42, .05), 0 18px 40px -16px rgba(4, 34, 42, .22);
  --shadow-3d: 0 2px 0 rgba(4, 34, 42, .04), 0 30px 60px -24px rgba(4, 34, 42, .35), 0 16px 30px -18px rgba(4, 34, 42, .22);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 76px;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold-400); color: var(--ink-900); }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 8px; }

.i { width: 1.25em; height: 1.25em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--gold-500); color: var(--ink-900); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Görünme animasyonları: transform'u eğilme efektlerine bırakmak için translate/scale kullanır. */
.reveal { opacity: 0; translate: 0 36px; scale: .985; transition: opacity .9s var(--ease-out) var(--d, 0s), translate 1s var(--ease-out) var(--d, 0s), scale 1s var(--ease-out) var(--d, 0s); }
.reveal.in { opacity: 1; translate: 0 0; scale: 1; }
.reveal-pop { opacity: 0; scale: .86; transition: opacity .7s var(--ease-out) var(--d, 0s), scale .9s var(--ease-spring) var(--d, 0s); }
.reveal-pop.in { opacity: 1; scale: 1; }
.no-js .reveal, .no-js .reveal-pop { opacity: 1; translate: 0 0; scale: 1; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }

/* ---------- Metin yardımcıları ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  font: 800 13px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700); background: var(--teal-50); border: 1px solid var(--teal-100);
}
.kicker .i { width: 16px; height: 16px; }
.kicker-dark { color: var(--gold-300); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.h2 { font-size: clamp(34px, 4.8vw, 62px); }
.h3 { font-size: clamp(22px, 2.2vw, 28px); }
.lead { font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ink-500); line-height: 1.65; }
.on-dark .lead, .lead.on-dark { color: rgba(255, 255, 255, .78); }
.grad-text {
  background: linear-gradient(95deg, var(--teal-500) 10%, var(--blue-600) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gold-text {
  background: linear-gradient(180deg, #FFF0A8 0%, #FFD54F 38%, #FFB300 70%, #F39C12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; /* gölge, metne kırpılan zemine katılıp hale oluşturuyor */
}
.extrude {
  filter: drop-shadow(0 1px 0 #D18700) drop-shadow(0 1px 0 #B97500) drop-shadow(0 1px 0 #A66800) drop-shadow(0 1px 0 #8F5900) drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}
.section-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 68px); text-align: center; display: grid; justify-items: center; gap: 18px; }
.section-head .lead { max-width: 62ch; }

/* ---------- Butonlar (oyun gibi basılan 3D butonlar) ---------- */
.btn {
  --b-bg: linear-gradient(180deg, #FFDD66, #FFB300);
  --b-fg: #3A2800;
  --b-edge: #C98A00;
  --b-glow: rgba(255, 179, 0, .45);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 16.5px/1.1 var(--font-body); text-decoration: none; white-space: nowrap;
  color: var(--b-fg); background: var(--b-bg);
  box-shadow: 0 6px 0 var(--b-edge), 0 16px 26px -10px var(--b-glow), inset 0 1.5px 0 rgba(255, 255, 255, .55);
  transform: translateY(0);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--b-edge), 0 22px 30px -12px var(--b-glow), inset 0 1.5px 0 rgba(255, 255, 255, .55); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--b-edge), 0 8px 14px -8px var(--b-glow), inset 0 1.5px 0 rgba(255, 255, 255, .4); }
.btn .i { width: 20px; height: 20px; }
.btn-teal { --b-bg: linear-gradient(180deg, #2DCCA9, #16A085); --b-fg: #fff; --b-edge: #0D6B5B; --b-glow: rgba(22, 160, 133, .45); }
.btn-red { --b-bg: linear-gradient(180deg, #FF7B6B, #E74C3C); --b-fg: #fff; --b-edge: #A92E22; --b-glow: rgba(231, 76, 60, .4); }
.btn-white { --b-bg: linear-gradient(180deg, #fff, #EEF5F3); --b-fg: var(--teal-700); --b-edge: #B7CEC8; --b-glow: rgba(4, 34, 42, .25); }
.btn-ghost {
  background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.btn-sm { padding: 11px 18px; font-size: 15px; }

/* Mağaza butonları */
.store-row { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-width: 190px; padding: 11px 22px 11px 16px; border-radius: 18px;
  color: #fff; text-decoration: none; background: linear-gradient(180deg, #1A2427, #070B0C);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 1px 0 rgba(255, 255, 255, .22) inset, 0 6px 0 #000, 0 18px 30px -12px rgba(0, 0, 0, .7);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.store-btn:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 1px 0 rgba(255, 255, 255, .22) inset, 0 9px 0 #000, 0 24px 34px -12px rgba(0, 0, 0, .75); }
.store-btn:active { transform: translateY(5px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 0 #000, 0 8px 14px -8px rgba(0, 0, 0, .7); }
.store-btn .i { width: 30px; height: 30px; }
.store-btn small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; opacity: .72; line-height: 1.2; }
.store-btn strong { display: block; font: 700 20px/1.1 var(--font-display); letter-spacing: .005em; }
.store-btn.is-suggested::after {
  content: "Cihazın için"; position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: 999px;
  font: 800 10.5px/1.2 var(--font-body); letter-spacing: .04em; color: var(--ink-900); background: var(--gold-400);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}

/* ---------- Üst menü ---------- */
.site-nav { position: fixed; inset: 12px 0 auto; z-index: 60; pointer-events: none; }
.nav-inner {
  position: relative; pointer-events: auto;
  width: min(100% - 24px, 1240px); margin-inline: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 12px; border-radius: 999px; color: #fff;
  background: rgba(5, 38, 45, .52);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 40px -18px rgba(0, 0, 0, .55);
  transition: background .35s, box-shadow .35s;
}
.site-nav.is-scrolled .nav-inner { background: rgba(5, 38, 45, .84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -20px rgba(0, 0, 0, .6); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--font-display); white-space: nowrap; padding-right: 6px; }
.brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); transition: transform .4s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.brand span { padding-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-links a {
  padding: 10px 13px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, .8);
  transition: background .2s, color .2s;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-links a[aria-current="page"], .nav-links a.is-active { color: #fff; background: rgba(255, 255, 255, .14); }
.nav-links .nav-menu-cta { display: none; }
.nav-cta { padding: 12px 18px; font-size: 15px; }
.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease-out), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-cta { display: none; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 12px;
    border-radius: 26px; background: rgba(5, 38, 45, .96);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); transform-origin: top center;
    transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease-out); }
  .nav-links a { padding: 14px 16px; font-size: 17px; }
  .nav-links .nav-menu-cta { display: flex; margin-top: 6px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 48px) 0 72px;
  color: #fff; background: var(--deep-900);
}
.hero-bg, .space-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(52% 62% at 74% 44%, rgba(38, 196, 160, .52) 0%, rgba(38, 196, 160, 0) 66%),
    radial-gradient(44% 52% at 8% 92%, rgba(22, 119, 160, .55) 0%, rgba(22, 119, 160, 0) 70%),
    radial-gradient(30% 30% at 94% 94%, rgba(255, 193, 7, .2) 0%, rgba(255, 193, 7, 0) 70%),
    radial-gradient(40% 40% at 20% 8%, rgba(46, 167, 216, .22) 0%, rgba(46, 167, 216, 0) 70%),
    linear-gradient(165deg, #0E6B63 0%, #08454D 40%, #04232C 100%);
}
.hero-floor {
  position: absolute; left: -60%; right: -60%; bottom: -2px; height: 60%; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(140, 255, 228, .17) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(140, 255, 228, .17) 1.5px, transparent 1.5px);
  background-size: 76px 76px;
  transform: perspective(520px) rotateX(66deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 78%);
  animation: floor-run 5s linear infinite;
}
@keyframes floor-run { to { background-position: 0 76px; } }
.sparkles { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sparkles i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .7), 0 0 22px 6px rgba(142, 243, 240, .35);
  opacity: .0; animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
.has-3d .hero-canvas { opacity: 1; }

.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center; gap: 24px; min-height: calc(100svh - var(--nav-h) - 120px);
  pointer-events: none;
}
.hero-copy { pointer-events: auto; display: grid; gap: 26px; justify-items: start; max-width: 620px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px;
  font-weight: 800; font-size: 14.5px; color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.eyebrow .pulse { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-400); }
.eyebrow .pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold-400); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hero-title { font-size: clamp(50px, 7.6vw, 108px); line-height: .98; letter-spacing: -.025em; text-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.hero-title .line { display: block; }
.hero-lead { font-size: clamp(17px, 1.45vw, 20px); color: rgba(255, 255, 255, .8); max-width: 54ch; line-height: 1.65; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 6px; }
.hero-stats li { display: grid; gap: 0; }
.hero-stats b { font: 800 30px/1.1 var(--font-display); color: var(--gold-400); }
.hero-stats li > span { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.hero-stats li + li { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .16); }

.hero-stage { position: relative; height: min(76svh, 700px); min-height: 460px; pointer-events: none; }
.hero-fox {
  position: absolute; z-index: 2; left: calc(50% - 300px); bottom: 2%;
  width: clamp(130px, 14vw, 205px);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .4));
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0);
  transition: transform .5s var(--ease-out);
}
.hero-fox img { animation: bob 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
.hero-bubble {
  position: absolute; z-index: 3; left: calc(50% - 352px); bottom: calc(2% + clamp(206px, 22vw, 318px));
  width: 190px; padding: 11px 16px; border-radius: 18px; background: #fff; color: var(--ink-900);
  font: 800 15px/1.3 var(--font-body); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45);
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotate(-3deg);
  animation: pop-in .7s var(--ease-spring) 1.6s both;
  pointer-events: none;
}
.hero-bubble::after { content: ""; position: absolute; left: 68%; bottom: -9px; width: 18px; height: 18px; background: #fff; border-radius: 0 0 5px 0; transform: rotate(45deg); }
.hero-bubble b { color: var(--teal-600); }
@keyframes pop-in { from { opacity: 0; transform: translate3d(var(--fx, 0px), calc(var(--fy, 0px) + 14px), 0) scale(.6) rotate(-3deg); } }
.hero-fallback {
  display: none; position: absolute; left: 50%; top: 48%; width: min(440px, 80%);
  transform: translate(-50%, -50%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4));
  animation: float-y 6s ease-in-out infinite;
}
.no-3d .hero-fallback { display: block; }
.no-3d .hero-fox, .no-3d .hero-bubble { display: none; }
@keyframes float-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; z-index: 2; translate: -50% 0;
  display: grid; place-items: center; width: 34px; height: 54px; border-radius: 20px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); text-decoration: none;
}
.scroll-cue::before { content: ""; width: 5px; height: 10px; border-radius: 3px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.pop-score {
  position: fixed; z-index: 80; pointer-events: none; font: 800 22px/1 var(--font-display); color: var(--gold-400);
  text-shadow: 0 2px 0 #9A6500, 0 8px 18px rgba(0, 0, 0, .4); animation: pop-score 1s var(--ease-out) forwards;
}
@keyframes pop-score { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }

/* ---------- Bölümler ---------- */
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.section-white { background: #fff; }
.section-paper { background: var(--paper); }
.section-dots { background-color: var(--paper); background-image: radial-gradient(rgba(22, 160, 133, .14) 1.2px, transparent 1.2px); background-size: 26px 26px; }
.section-deep {
  color: #fff; isolation: isolate; overflow: hidden;
  margin: 0 clamp(8px, 1.4vw, 20px); border-radius: clamp(30px, 4vw, 56px);
}
.section-deep > .space-bg { border-radius: inherit; }

/* ---------- Nedir + yörünge ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.split-copy { display: grid; gap: 22px; justify-items: start; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 8px; }
.stat {
  position: relative; padding: 18px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1);
  border: 1px solid rgba(4, 34, 42, .05); overflow: hidden;
}
.stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--c, var(--teal-50)); opacity: .9; }
.stat b { position: relative; z-index: 1; display: block; font: 800 34px/1.05 var(--font-display); color: var(--ink-900); }
.stat > span { position: relative; z-index: 1; font-weight: 700; color: var(--ink-500); font-size: 15px; }

.orbit-stage { position: relative; height: clamp(420px, 46vw, 560px); perspective: 1100px; perspective-origin: 50% 35%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.orbit-stage.is-dragging { cursor: grabbing; }
.orbit-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.orbit-glow { position: absolute; left: 50%; top: 52%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(38, 188, 156, .35), rgba(38, 188, 156, 0) 65%); }
.orbit-floor {
  position: absolute; left: 50%; top: 77%; width: min(560px, 92%); aspect-ratio: 4 / 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13, 107, 91, .28), rgba(13, 107, 91, .12) 55%, transparent 100%);
  box-shadow: inset 0 0 0 2px rgba(22, 160, 133, .18);
}
.orbit-fox {
  position: absolute; left: 50%; top: 47%; width: clamp(150px, 19vw, 240px); translate: -50% -50%;
  transform: translateZ(0); filter: drop-shadow(0 26px 24px rgba(4, 34, 42, .28)); pointer-events: none;
}
.orbit-chip {
  --c: var(--teal-500);
  position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 7px; border-radius: 999px; white-space: nowrap;
  font: 800 15px/1 var(--font-body); color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 72%, #000), 0 16px 26px -12px rgba(4, 34, 42, .55), inset 0 1.5px 0 rgba(255, 255, 255, .45);
  will-change: transform, opacity; transform: translate(-50%, -50%);
}
.orbit-chip .emo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1; }

/* ---------- Adımlar (eğilen kartlar) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.tilt {
  transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out), opacity .9s var(--ease-out) var(--d, 0s), translate 1s var(--ease-out) var(--d, 0s), scale 1s var(--ease-out) var(--d, 0s);
}
.tilt.is-tilting { transition: transform .1s linear, opacity .9s var(--ease-out) var(--d, 0s), translate 1s var(--ease-out) var(--d, 0s), scale 1s var(--ease-out) var(--d, 0s); }
.glare {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 46%);
  mix-blend-mode: soft-light;
}
.tilt.is-tilting .glare { opacity: 1; }
.step-card {
  position: relative; padding: clamp(26px, 3vw, 36px); border-radius: var(--radius-lg); background: #fff;
  box-shadow: var(--shadow-3d); border: 1px solid rgba(4, 34, 42, .05); min-height: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.step-card > * { transform: translateZ(28px); }
.step-card .icon3d { transform: translateZ(64px); }
.step-card .glare { transform: translateZ(30px); }
.step-num {
  position: absolute; right: 22px; top: 8px; transform: translateZ(8px);
  font: 800 116px/1 var(--font-display); color: var(--teal-50); letter-spacing: -.04em; pointer-events: none;
}
.step-card h3 { font-size: clamp(23px, 2vw, 27px); margin-top: 10px; }
.step-card p { color: var(--ink-500); }
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.mini-chips span { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; background: var(--teal-50); color: var(--teal-700); }
.mini-chips span.gold { background: #FFF4D1; color: #8A5B00; }
.mini-chips span.red { background: #FDECEA; color: var(--red-600); }
.mini-chips span.blue { background: #E6F3F9; color: var(--blue-600); }

.icon3d {
  --c1: #33D1AE; --c2: #11866F;
  position: relative; width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -8px 14px rgba(0, 0, 0, .14), 0 7px 0 color-mix(in srgb, var(--c2) 75%, #000), 0 22px 30px -12px color-mix(in srgb, var(--c2) 80%, transparent);
}
.icon3d::before { content: ""; position: absolute; left: 12%; top: 8%; width: 46%; height: 30%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.icon3d .i { position: relative; width: 36px; height: 36px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.icon3d.sm { width: 56px; height: 56px; border-radius: 18px; }
.icon3d.sm .i { width: 27px; height: 27px; }
.c-gold { --c1: #FFD95A; --c2: #F39C12; }
.c-red { --c1: #FF7E6E; --c2: #D63A2C; }
.c-blue { --c1: #45B9E6; --c2: #1677A0; }
.c-purple { --c1: #B36ADB; --c2: #7B3A99; }
.c-orange { --c1: #FFB55C; --c2: #E67E22; }
.c-teal { --c1: #33D1AE; --c2: #11866F; }
.c-ink { --c1: #4C6A72; --c2: #1E3439; }

/* ---------- Jokerler (dönen kartlar) ---------- */
.joker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.joker-card { appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; height: 400px; text-align: center; border-radius: var(--radius-lg); perspective: 1600px; -webkit-tap-highlight-color: transparent; }
.joker-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--ease-out); }
.joker-card[aria-pressed="true"] .joker-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .joker-card:hover .joker-inner { transform: rotateY(180deg); }
  .joker-card[aria-pressed="true"]:hover .joker-inner { transform: rotateY(180deg); }
}
.joker-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 30px 26px; border-radius: var(--radius-lg); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform-style: preserve-3d;
}
.joker-front {
  color: #fff; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, var(--j1), var(--j2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -10px 30px rgba(0, 0, 0, .12), 0 10px 0 var(--j3), 0 36px 50px -24px var(--j3);
}
.joker-front::before {
  content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0deg 10deg, transparent 10deg 20deg);
  animation: spin 40s linear infinite;
}
.joker-front > * { position: relative; }
.joker-chip {
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff 0%, #F4F7F8 40%, #D9E2E4 100%);
  color: var(--j2);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .1), 0 10px 0 rgba(0, 0, 0, .14), 0 28px 34px -12px rgba(0, 0, 0, .35);
  animation: chip-float 5s ease-in-out infinite;
}
.joker-chip .i { width: 64px; height: 64px; }
.joker-chip .fifty { font: 800 56px/1 var(--font-display); letter-spacing: -.04em; margin-top: 8px; }
@keyframes chip-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.joker-name { font: 800 44px/1 var(--font-display); text-shadow: 0 4px 0 rgba(0, 0, 0, .12); margin-top: 10px; }
.joker-hint { font-weight: 800; opacity: .92; }
.flip-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: rgba(0, 0, 0, .14); }
.joker-back {
  transform: rotateY(180deg); background: #fff; color: var(--ink-900);
  box-shadow: inset 0 0 0 3px var(--j1), 0 10px 0 var(--j3), 0 36px 50px -24px var(--j3);
  justify-content: flex-start; text-align: left; align-items: flex-start; gap: 12px;
}
.joker-back .joker-name { font-size: 34px; color: var(--j2); text-shadow: none; margin: 0; display: flex; align-items: center; gap: 10px; }
.joker-back .joker-desc { color: var(--ink-500); font-size: 16.5px; }
.joker-back .rule { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 14.5px; font-weight: 700; color: var(--ink-700); }
.joker-back .rule .i { color: var(--j2); margin-top: 2px; }
.j-pas { --j1: #FFC15A; --j2: #E67E22; --j3: #B85F12; }
.j-50 { --j1: #4FC0EA; --j2: #1677A0; --j3: #0F5878; }
.j-can { --j1: #FF8576; --j2: #E74C3C; --j3: #A92E22; }
.note-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.note-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); font-weight: 800; font-size: 15px; color: var(--ink-700); }
.note-pill .i { color: var(--teal-500); }

/* ---------- Demo ---------- */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.demo-copy { display: grid; gap: 22px; justify-items: start; max-width: 560px; }
.demo-copy .h2 { color: #fff; }
.coach { display: flex; align-items: flex-end; gap: 14px; margin-top: 6px; }
.coach img { width: 92px; flex: none; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .35)); }
.coach-bubble {
  position: relative; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: #fff; color: var(--ink-900);
  font-weight: 800; font-size: 16.5px; line-height: 1.4; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); max-width: 340px;
  transition: transform .3s var(--ease-spring);
}
.coach-bubble.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend span { padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 800; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88); }
.legend b { color: var(--gold-400); }
.phone-wrap { perspective: 1600px; display: grid; place-items: center; padding: 10px 0 24px; }
.phone {
  --w: min(340px, 84vw);
  position: relative; width: var(--w); aspect-ratio: 9 / 19.2;
  border-radius: calc(var(--w) * .155); padding: calc(var(--w) * .034);
  background: linear-gradient(150deg, #415459 0%, #172326 38%, #0A1113 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 calc(var(--w) * .014) #05090A,
    calc(var(--k, -1) * -12px) 12px 0 -3px #0B1416,
    calc(var(--k, -1) * -22px) 40px 70px -20px rgba(0, 0, 0, .6),
    0 70px 90px -50px rgba(0, 0, 0, .8);
  transform: rotateY(var(--pry, -10deg)) rotateX(var(--prx, 4deg));
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(180deg, #4b5d62, #1b2629); }
.phone::before { left: -3px; top: 22%; height: 8%; box-shadow: 0 calc(var(--w) * .13) 0 #263235; }
.phone::after { right: -3px; top: 28%; height: 12%; }
.phone-screen {
  position: relative; height: 100%; border-radius: calc(var(--w) * .125); overflow: hidden;
  container-type: inline-size; background: #0E6B63; isolation: isolate;
}
.phone-glass { position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%); }

/* Demo uygulama ekranı (telefon içi) */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; font-family: var(--font-body); background: linear-gradient(180deg, #16A085 0%, #13918A 46%, #1677A0 100%); }
.app::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 40% at 80% 10%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(60% 30% at 0% 100%, rgba(255, 255, 255, .1), transparent 70%); }
.app-status { flex: none; height: 13cqw; display: flex; justify-content: space-between; align-items: center; padding: 1cqw 8cqw 0; font: 800 4cqw/1 var(--font-body); }
.app-status .bars { display: flex; gap: 1.2cqw; align-items: center; }
.app-status .bars i { display: block; width: 5.4cqw; height: 2.6cqw; border-radius: .8cqw; background: #fff; }
.app-status .bars i:first-child { width: 4cqw; background: rgba(255, 255, 255, .9); }
.app-island { position: absolute; top: 3cqw; left: 50%; z-index: 10; width: 29cqw; height: 8.4cqw; border-radius: 99px; background: #000; transform: translateX(-50%); }
.app-view { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 2cqw 5cqw 1cqw; }
.app-back { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.app-back .i { width: 5cqw; height: 5cqw; }
.app-qcount { font: 800 5.6cqw/1 var(--font-display); padding-top: 1cqw; }
.app-token { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 3cqw 1.2cqw 1.2cqw; border-radius: 99px; background: rgba(0, 0, 0, .18); font: 800 4.2cqw/1 var(--font-body); }
.coin-mini { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C4, #FFC107 48%, #E09400 80%); box-shadow: inset 0 -.6cqw 0 #B57400; }
.app-timer { position: relative; width: 17cqw; height: 17cqw; margin: 1cqw auto 0; display: grid; place-items: center; }
.app-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.app-timer circle { fill: none; stroke-width: 3.2; }
.app-timer .track { stroke: rgba(255, 255, 255, .22); }
.app-timer .bar { stroke: var(--gold-400); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.app-timer.is-low .bar { stroke: #FF8A7A; }
.app-timer b { font: 800 6cqw/1 var(--font-display); padding-top: 1cqw; }
.app-card {
  margin: 3cqw 5cqw 0; padding: 4.6cqw 5cqw 5cqw; border-radius: 6cqw; background: #fff; color: var(--ink-900);
  box-shadow: 0 1.6cqw 0 rgba(4, 34, 42, .1), 0 8cqw 12cqw -8cqw rgba(0, 0, 0, .5);
  display: grid; gap: 2.6cqw; transform-origin: 50% 0%;
}
.app-card.flip-in { animation: card-in .55s var(--ease-out); }
@keyframes card-in { from { transform: perspective(400px) rotateX(-70deg) translateY(-2cqw); opacity: 0; } to { transform: none; opacity: 1; } }
.app-chips { display: flex; gap: 1.6cqw; flex-wrap: wrap; }
.app-chips span { padding: 1cqw 2.6cqw; border-radius: 99px; font: 800 3.2cqw/1.3 var(--font-body); background: var(--teal-50); color: var(--teal-700); }
.app-chips .lvl-K { background: #E7F7EF; color: #11866F; }
.app-chips .lvl-O { background: #FFF4D1; color: #8A5B00; }
.app-chips .lvl-Z { background: #FDECEA; color: #B83224; }
.app-question { font: 800 5.6cqw/1.25 var(--font-display); color: var(--ink-900); min-height: 14cqw; }
.app-options { display: grid; gap: 2.4cqw; padding: 4cqw 5cqw 0; }
.opt {
  display: flex; align-items: center; gap: 3cqw; width: 100%; padding: 2.8cqw 3.4cqw; border: 0; border-radius: 4.6cqw; cursor: pointer;
  background: #fff; color: var(--ink-900); font: 800 4.3cqw/1.2 var(--font-body); text-align: left;
  box-shadow: 0 1.2cqw 0 rgba(4, 34, 42, .16); transition: transform .15s var(--ease-out), background .2s, color .2s, opacity .3s, box-shadow .15s;
}
.opt:hover:not(:disabled) { transform: translateY(-.6cqw); }
.opt:active:not(:disabled) { transform: translateY(1cqw); box-shadow: 0 .2cqw 0 rgba(4, 34, 42, .16); }
.opt .letter { flex: none; display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: var(--teal-50); color: var(--teal-700); font-size: 3.6cqw; }
.opt.is-correct { background: #1DBF8E; color: #fff; animation: correct-pop .5s var(--ease-spring); }
.opt.is-correct .letter { background: rgba(255, 255, 255, .25); color: #fff; }
.opt.is-wrong { background: var(--red-500); color: #fff; animation: shake .45s; }
.opt.is-wrong .letter { background: rgba(255, 255, 255, .25); color: #fff; }
.opt.is-gone { opacity: 0; transform: scale(.9); pointer-events: none; }
.opt:disabled { cursor: default; }
@keyframes correct-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2cqw); } 40% { transform: translateX(2cqw); } 60% { transform: translateX(-1.4cqw); } 80% { transform: translateX(1.4cqw); } }
.app-jokers { margin-top: auto; display: flex; justify-content: space-around; padding: 3cqw 6cqw 8cqw; }
.jk { position: relative; display: grid; justify-items: center; gap: 1.4cqw; border: 0; background: none; cursor: pointer; color: #fff; font: 800 3.5cqw/1 var(--font-body); }
.jk-ico { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: #fff; box-shadow: 0 1.4cqw 0 rgba(0, 0, 0, .18); transition: transform .18s var(--ease-out), box-shadow .18s; }
.jk-ico .i { width: 6.6cqw; height: 6.6cqw; }
.jk-ico .fifty { font: 800 5.2cqw/1 var(--font-display); color: var(--blue-600); padding-top: .8cqw; }
.jk-pas .i { color: var(--orange-600); }
.jk-can .i { color: var(--red-500); }
.jk:hover:not(:disabled) .jk-ico { transform: translateY(-.8cqw); }
.jk:active:not(:disabled) .jk-ico { transform: translateY(1.2cqw); box-shadow: 0 .2cqw 0 rgba(0, 0, 0, .18); }
.jk:disabled { cursor: not-allowed; opacity: .45; }
.jk.is-used .jk-ico::after { content: ""; position: absolute; width: 16cqw; height: .9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .95); transform: rotate(-35deg); }
.jk.is-locked .jk-ico { background: rgba(255, 255, 255, .55); }
.app-toast {
  position: absolute; left: 50%; top: 38%; z-index: 6; padding: 2.6cqw 4.4cqw; border-radius: 99px; white-space: nowrap;
  background: rgba(4, 34, 42, .86); color: #fff; font: 800 3.8cqw/1.2 var(--font-body); transform: translate(-50%, 0);
  animation: toast 1.6s var(--ease-out) forwards; pointer-events: none;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 3cqw) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -2cqw); } }
.app-plus { position: absolute; z-index: 7; left: 50%; top: 30%; font: 800 9cqw/1 var(--font-display); color: var(--gold-300); text-shadow: 0 .8cqw 0 #9A6500, 0 3cqw 5cqw rgba(0, 0, 0, .35); animation: plus-up 1.1s var(--ease-out) forwards; pointer-events: none; }
@keyframes plus-up { 0% { opacity: 0; transform: translate(-50%, 4cqw) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -14cqw) scale(1); } }

.app-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3cqw; padding: 4cqw 8cqw 10cqw; }
.app-center h3 { font-size: 9cqw; text-shadow: 0 1cqw 0 rgba(0, 0, 0, .12); }
.app-center p { font-size: 4.2cqw; font-weight: 700; color: rgba(255, 255, 255, .88); line-height: 1.4; }
.app-center .fox { width: 52cqw; filter: drop-shadow(0 4cqw 4cqw rgba(0, 0, 0, .25)); animation: chip-float 4s ease-in-out infinite; }
.app-center .fox.sm { width: 44cqw; }
.app-start-btn { margin-top: 2cqw; font-size: 4.6cqw; padding: 3.6cqw 8cqw; }
.app-rules { display: grid; gap: 1.6cqw; width: 100%; margin-top: 1cqw; }
.app-rules li { display: flex; align-items: center; gap: 2.4cqw; padding: 2.2cqw 3cqw; border-radius: 3.6cqw; background: rgba(255, 255, 255, .14); font-size: 3.7cqw; font-weight: 800; text-align: left; }
.app-rules .i { width: 4.6cqw; height: 4.6cqw; color: var(--gold-300); }
.score-badge { display: inline-flex; align-items: baseline; gap: 1.6cqw; padding: 2.4cqw 5cqw; border-radius: 99px; background: rgba(0, 0, 0, .2); font: 800 5cqw/1 var(--font-display); }
.score-badge b { font-size: 9cqw; color: var(--gold-300); }
.answer-box { width: 100%; padding: 3cqw 3.6cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .95); color: var(--ink-900); text-align: left; font-size: 3.8cqw; font-weight: 700; }
.answer-box b { color: var(--teal-600); }
.app.is-lose { background: linear-gradient(180deg, #F0705F 0%, #E74C3C 50%, #B8352A 100%); }
.app.is-win { background: linear-gradient(180deg, #2BC6A3 0%, #16A085 50%, #1677A0 100%); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.confetti i { position: absolute; top: -4%; width: 2.2cqw; height: 3.6cqw; border-radius: .6cqw; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--dx), 115cqh, 0) rotate(var(--rot)); } }

/* ---------- Özellikler (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.b-card {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  min-height: 260px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius-lg); background: #fff;
  box-shadow: var(--shadow-2); border: 1px solid rgba(4, 34, 42, .06);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out), box-shadow .4s, opacity .9s var(--ease-out) var(--d, 0s), translate 1s var(--ease-out) var(--d, 0s), scale 1s var(--ease-out) var(--d, 0s);
}
.b-card.is-tilting { transition: transform .1s linear, box-shadow .4s, opacity .9s var(--ease-out) var(--d, 0s), translate 1s var(--ease-out) var(--d, 0s), scale 1s var(--ease-out) var(--d, 0s); }
.b-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(22, 160, 133, .12), transparent 42%);
}
.b-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(22, 160, 133, .8), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.b-card:hover::before, .b-card:hover::after { opacity: 1; }
.b-card:hover { box-shadow: 0 2px 4px rgba(4, 34, 42, .05), 0 34px 60px -26px rgba(4, 34, 42, .35); }
.b-card h3 { font-size: clamp(22px, 2vw, 27px); }
.b-card p { color: var(--ink-500); font-size: 16px; }
.b-card .b-head { display: flex; align-items: center; gap: 14px; }
.b-card .viz { position: relative; margin-top: auto; padding-top: 14px; }
.b-dark { background: linear-gradient(160deg, #0B5C5A 0%, #062F38 60%, #04222A 100%); color: #fff; border-color: rgba(255, 255, 255, .06); }
.b-dark p { color: rgba(255, 255, 255, .74); }
.b-dark::before { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 213, 79, .14), transparent 42%); }
.b-dark::after { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 213, 79, .85), transparent 45%); }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.row-2 { grid-row: span 2; }
.tag-new { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--gold-400); color: #4A3300; font: 800 12px/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; }

/* düello */
.viz-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 20px 0 6px; }
.b-card .viz-duel { margin-block: auto; }
.duel-player { display: grid; justify-items: center; gap: 8px; }
.duel-avatar {
  width: clamp(92px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #3fd9b7, #0f7c69); box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 20px 40px -14px rgba(0, 0, 0, .6);
}
.duel-avatar img { width: 92%; margin-top: 18%; }
.duel-avatar.rival { background: radial-gradient(circle at 35% 30%, #66C6F0, #135e86); font: 800 clamp(30px, 3vw, 40px)/1 var(--font-display); }
.duel-player b { font-size: 17px; }
.duel-score { font: 800 34px/1 var(--font-display); color: var(--gold-400); }
.duel-vs {
  position: relative; display: grid; place-items: center; width: clamp(64px, 7vw, 86px); aspect-ratio: 1; border-radius: 50%;
  font: 800 clamp(24px, 2.6vw, 32px)/1 var(--font-display); color: #4A2B00; padding-top: 4px;
  background: radial-gradient(circle at 35% 30%, #FFF2B0, #FFC107 50%, #F39C12 100%);
  box-shadow: 0 6px 0 #B36B00, 0 18px 30px -8px rgba(255, 179, 0, .55);
  animation: vs-pulse 2.2s ease-in-out infinite;
}
@keyframes vs-pulse { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.08) rotate(6deg); } }
.duel-bars { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 18px; }
.duel-bar { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, .8); }
.duel-bar .track { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.duel-bar .fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal-300), var(--gold-400)); transition: width 1.6s var(--ease-out); }
.duel-bar.rival .fill { background: linear-gradient(90deg, #66C6F0, #2EA7D8); }
.in .duel-bar .fill { width: var(--p); }
.duel-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.duel-points span { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-weight: 800; font-size: 14px; }

/* günün yarışması */
.viz-daily { display: flex; align-items: flex-end; gap: 18px; }
.cal {
  width: 120px; border-radius: 22px; background: #fff; overflow: hidden; text-align: center; flex: none;
  box-shadow: 0 6px 0 #D5E2E0, 0 22px 30px -14px rgba(4, 34, 42, .35); transform: rotate(-6deg);
}
.cal-top { padding: 8px 0 6px; background: linear-gradient(180deg, var(--red-400), var(--red-500)); color: #fff; font: 800 14px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.cal-day { padding: 6px 0 10px; font: 800 58px/1 var(--font-display); color: var(--ink-900); }
.daily-rank { display: grid; gap: 8px; flex: 1; }
.daily-rank li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--paper); font-weight: 800; font-size: 14.5px; }
.daily-rank .medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; flex: none; }
.medal.m1 { background: radial-gradient(circle at 35% 30%, #FFE58A, #F0A800); }
.medal.m2 { background: radial-gradient(circle at 35% 30%, #F2F5F7, #A3B1B6); color: #3C4A4F; }
.medal.m3 { background: radial-gradient(circle at 35% 30%, #F4C39A, #C2773C); }
.daily-rank .gift { margin-left: auto; color: var(--teal-600); }

/* seri */
.viz-streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day {
  display: grid; justify-items: center; gap: 4px; padding: 10px 0 8px; border-radius: 16px; background: var(--paper); font-weight: 800; font-size: 12.5px; color: var(--ink-400);
}
.day .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E2ECEA; color: #fff; }
.day .dot .i { width: 17px; height: 17px; }
.day.done .dot { background: radial-gradient(circle at 35% 30%, #FFD36B, #F39C12); box-shadow: 0 3px 0 #C47A0A; }
.day.done { color: var(--orange-600); }
.day.today .dot { background: radial-gradient(circle at 35% 30%, #FF9A6B, #E74C3C); box-shadow: 0 3px 0 #A92E22; animation: today 1.6s ease-in-out infinite; }
.day.today { color: var(--red-500); background: #FFF1EE; }
.day.gift .dot { background: radial-gradient(circle at 35% 30%, #66E0C4, #16A085); box-shadow: 0 3px 0 #0D6B5B; }
@keyframes today { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* görevler */
.missions { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 11px 14px; border-radius: 16px; background: var(--paper); font-weight: 800; font-size: 14.5px; }
.mission .count { color: var(--ink-400); font-size: 13.5px; }
.mission .bar { grid-column: 1 / -1; height: 9px; border-radius: 99px; background: #E2ECEA; overflow: hidden; }
.mission .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal-400), var(--teal-500)); transition: width 1.4s var(--ease-out) .2s; }
.in .mission .bar i { width: var(--p); }
.mission.done .count { color: var(--teal-600); }

/* rozetler */
.viz-badges { display: flex; justify-content: center; gap: 16px; perspective: 600px; padding: 4px 0 6px; }
.medal3d {
  --m1: #FFE58A; --m2: #F0A800; --m3: #B57400;
  position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 60%, var(--m3));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .5), 0 14px 22px -10px rgba(4, 34, 42, .45);
  animation: medal-turn 6s ease-in-out infinite; transform-style: preserve-3d;
}
.medal3d .i { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.medal3d.silver { --m1: #FFFFFF; --m2: #B7C4C9; --m3: #7E8F95; animation-delay: -2s; }
.medal3d.teal { --m1: #8BF0D6; --m2: #16A085; --m3: #0D6B5B; animation-delay: -4s; }
@keyframes medal-turn { 0%, 100% { transform: rotateY(-25deg) translateY(0); } 50% { transform: rotateY(25deg) translateY(-6px); } }
.level { margin-top: 14px; display: grid; gap: 6px; font-weight: 800; font-size: 14px; }
.level-row { display: flex; justify-content: space-between; color: var(--ink-500); }
.level-row b { color: var(--purple-500); }
.level .bar { height: 12px; border-radius: 99px; background: #EEE7F3; overflow: hidden; }
.level .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #B36ADB, #8E44AD); transition: width 1.6s var(--ease-out) .2s; }
.in .level .bar i { width: 72%; }

/* sohbet */
.chat { display: grid; gap: 10px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--paper); font-weight: 700; font-size: 15px; }
.bubble.me { justify-self: end; border-radius: 18px 18px 6px 18px; background: linear-gradient(180deg, #2DCCA9, #16A085); color: #fff; }
.bubble small { display: block; font-size: 11.5px; opacity: .7; margin-top: 2px; text-align: right; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--paper); width: max-content; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* kasa */
.viz-kasa { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.coin-stack { position: relative; width: 104px; height: 120px; flex: none; }
.coin-stack i {
  position: absolute; left: 0; width: 104px; height: 38px; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #FFF2B0, #FFC107 55%, #E39A00);
  box-shadow: inset 0 -3px 0 #C98200, 0 6px 0 #B47300, 0 7px 0 #8D5A00;
}
.coin-stack i:nth-child(1) { bottom: 0; }
.coin-stack i:nth-child(2) { bottom: 14px; }
.coin-stack i:nth-child(3) { bottom: 28px; }
.coin-stack i:nth-child(4) { bottom: 42px; }
.coin-stack i:nth-child(5) { bottom: 56px; }
.coin-stack i:nth-child(6) { bottom: 70px; animation: coin-hop 2.4s var(--ease-out) infinite; }
@keyframes coin-hop { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(-26px) rotate(-8deg); } 85% { transform: translateY(0); } }
.kasa-swap { display: grid; gap: 10px; flex: 1; min-width: 180px; }
.swap-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--paper); font-weight: 800; font-size: 15px; }
.swap-row .i { width: 20px; height: 20px; }
.swap-row .arrow { color: var(--ink-400); }
.swap-row .tok { color: var(--orange-600); }
.swap-row .can { color: var(--red-500); }

/* çark */
.viz-wheel { display: grid; place-items: center; perspective: 700px; padding: 8px 0 0; }
.wheel-wrap { position: relative; width: 190px; height: 150px; }
.wheel {
  position: absolute; left: 0; top: 0; width: 190px; height: 190px; border-radius: 50%;
  background: conic-gradient(#E74C3C 0 45deg, #FFC107 45deg 90deg, #16A085 90deg 135deg, #1677A0 135deg 180deg, #E74C3C 180deg 225deg, #FFC107 225deg 270deg, #16A085 270deg 315deg, #8E44AD 315deg 360deg);
  box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 11px rgba(4, 34, 42, .1), 0 14px 0 #C9D6D3, 0 30px 40px -10px rgba(4, 34, 42, .4);
  transform: rotateX(54deg) rotateZ(0deg); transform-origin: 50% 50%;
  animation: wheel 7s cubic-bezier(.3, .1, .1, 1) infinite;
}
.wheel::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #DCE5E7); box-shadow: 0 3px 0 #B9C7CB; }
@keyframes wheel { 0% { transform: rotateX(54deg) rotateZ(0deg); } 70%, 100% { transform: rotateX(54deg) rotateZ(1080deg); } }
.wheel-pin { position: absolute; left: 50%; top: -6px; z-index: 2; width: 0; height: 0; translate: -50% 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid var(--ink-900); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }

/* davet */
.invite-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--paper); border: 2px dashed var(--teal-200); }
.invite-code b { font: 800 26px/1 var(--font-display); letter-spacing: .14em; color: var(--teal-700); padding-top: 4px; }
.invite-code span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #fff; font-weight: 800; font-size: 13.5px; color: var(--teal-700); box-shadow: var(--shadow-1); }
.invite-gift { display: flex; gap: 10px; margin-top: 12px; }
.invite-gift span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #FFF6DA; font-weight: 800; font-size: 14px; color: #7A5200; }

/* soru öner */
.suggest-card { padding: 14px 16px; border-radius: 18px; background: var(--paper); display: grid; gap: 10px; }
.suggest-card .q { font: 800 17px/1.3 var(--font-display); color: var(--ink-900); }
.suggest-card .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.suggest-card .opts span { padding: 7px 10px; border-radius: 10px; background: #fff; font-weight: 800; font-size: 13.5px; color: var(--ink-500); box-shadow: 0 2px 0 rgba(4, 34, 42, .06); }
.suggest-card .opts span.ok { background: #E7F7EF; color: var(--teal-700); }
.approved { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--teal-500); color: #fff; font-weight: 800; font-size: 13.5px; }

/* ---------- Sıralama / podyum ---------- */
.podium-stage { position: relative; height: clamp(380px, 40vw, 470px); perspective: 1300px; perspective-origin: 50% 20%; display: grid; place-items: end center; }
.podium-floor { position: absolute; left: 50%; bottom: 4%; width: 110%; aspect-ratio: 3.2 / 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 160, 133, .22), rgba(22, 160, 133, .08) 60%, transparent); }
.podium {
  position: relative; display: flex; align-items: flex-end; gap: 4px; transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(var(--pod-ry, -16deg)); transition: transform .8s var(--ease-out); margin-bottom: 10%;
}
.pod { position: relative; transform-style: preserve-3d; display: grid; justify-items: center; }
.pod-top { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 4px; margin-bottom: 8px; transform: translateZ(30px); }
.pod-avatar { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font: 800 24px/1 var(--font-display); color: #fff; box-shadow: 0 0 0 4px #fff, 0 14px 24px -8px rgba(4, 34, 42, .45); }
.pod-name { font-weight: 800; font-size: 14px; color: var(--ink-700); white-space: nowrap; }
.pod-1 .pod-top { margin-bottom: 0; }
.pod-1 .pod-fox { width: 150px; filter: drop-shadow(0 18px 18px rgba(4, 34, 42, .3)); }
.pod-crown { color: var(--gold-500); width: 40px; height: 40px; filter: drop-shadow(0 4px 0 #B36B00); margin-bottom: -6px; animation: crown 2.6s ease-in-out infinite; }
@keyframes crown { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
.cuboid { --w: 150px; --h: 160px; --d: 120px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform-origin: 50% 100%; }
.cuboid > i { position: absolute; left: 0; top: 0; display: grid; place-items: center; }
.cuboid .f-front { width: var(--w); height: var(--h); transform: translateZ(calc(var(--d) / 2)); background: linear-gradient(180deg, var(--p1), var(--p2)); font: 800 64px/1 var(--font-display); color: rgba(255, 255, 255, .95); text-shadow: 0 5px 0 rgba(0, 0, 0, .14); font-style: normal; padding-top: 8px; }
.cuboid .f-back { width: var(--w); height: var(--h); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--p3); }
.cuboid .f-right { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(180deg, var(--p2), var(--p3)); }
.cuboid .f-left { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: var(--p3); }
.cuboid .f-top { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: linear-gradient(180deg, color-mix(in srgb, var(--p1) 70%, #fff), var(--p1)); }
.pod-1 .cuboid { --h: 210px; --p1: #FFD54F; --p2: #F5A300; --p3: #B97800; }
.pod-2 .cuboid { --h: 150px; --p1: #DCE6E9; --p2: #A8B8BE; --p3: #6F8389; }
.pod-3 .cuboid { --h: 110px; --p1: #F6C39A; --p2: #D8894D; --p3: #9A5A28; }
.reveal .cuboid { transform: scaleY(.02); transition: transform 1.1s var(--ease-spring); }
.reveal.in .cuboid { transform: scaleY(1); }
.reveal.in .pod-2 .cuboid { transition-delay: .15s; }
.reveal.in .pod-3 .cuboid { transition-delay: .3s; }
.rank-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rank-list span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); font-weight: 800; font-size: 14.5px; color: var(--ink-700); }
.rank-list .i { width: 16px; height: 16px; color: var(--teal-500); }

/* ---------- Topluluk / SSS ---------- */
.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.social-grid.social-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-card {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); text-decoration: none;
  background: #fff; box-shadow: var(--shadow-1); border: 1px solid rgba(4, 34, 42, .05); transition: transform .3s var(--ease-out), box-shadow .3s;
}
.social-card:hover { transform: perspective(600px) translateY(-4px) rotateX(8deg); box-shadow: var(--shadow-2); }
.social-card .s-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: #fff; flex: none; box-shadow: 0 5px 0 rgba(0, 0, 0, .14); }
.social-card .s-ico .i { width: 26px; height: 26px; }
.social-card b { display: block; font: 800 18px/1.15 var(--font-display); }
.social-card small { display: block; font-weight: 700; color: var(--ink-400); font-size: 13.5px; }
.social-card .go { margin-left: auto; color: var(--ink-400); width: 18px; height: 18px; }
.s-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.s-x { background: #0F1419; }
.s-tt { background: #111; box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55, 0 5px 0 rgba(0, 0, 0, .2); }
.s-fb { background: #1877F2; }

.faq-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: clamp(56px, 8vw, 96px); }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); border: 1px solid rgba(4, 34, 42, .05); overflow: hidden; }
.faq summary {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none;
  font: 800 18px/1.3 var(--font-display); color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { margin-left: auto; color: var(--teal-500); transition: transform .3s var(--ease-out); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq .ans { padding: 0 20px 20px; color: var(--ink-500); }
.faq .ans p + p { margin-top: 10px; }
.account-card {
  position: sticky; top: calc(var(--nav-h) + 24px);
  padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #0B5C5A, #062F38 70%);
  box-shadow: var(--shadow-3d); display: grid; gap: 14px;
}
.account-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 193, 7, .25), transparent 70%); z-index: -1; }
.account-card h3 { font-size: 28px; }
.account-card p { color: rgba(255, 255, 255, .8); }
.account-card ol { display: grid; gap: 10px; counter-reset: s; }
.account-card li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; font-weight: 700; color: rgba(255, 255, 255, .9); }
.account-card li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-400); color: #4A3300; font-weight: 800; font-size: 14px; margin-top: -1px; }
.account-card .muted { font-size: 14.5px; color: rgba(255, 255, 255, .62); }
.account-card a { color: var(--gold-300); font-weight: 800; }
.account-card:target { box-shadow: 0 0 0 4px var(--gold-400), var(--shadow-3d); }

/* ---------- Son çağrı ---------- */
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 24px;
  padding: clamp(36px, 6vw, 72px); border-radius: clamp(30px, 4vw, 52px); color: #fff;
  background: radial-gradient(60% 90% at 85% 30%, rgba(255, 213, 79, .35), transparent 60%), linear-gradient(135deg, #16A085 0%, #138F8A 45%, #1677A0 100%);
  box-shadow: 0 50px 90px -40px rgba(13, 107, 91, .7);
}
.cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1.5px, transparent 1.5px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(80% 100% at 80% 50%, #000, transparent 75%); mask-image: radial-gradient(80% 100% at 80% 50%, #000, transparent 75%); }
.cta-panel h2 { font-size: clamp(36px, 5vw, 64px); }
.cta-copy { display: grid; gap: 22px; justify-items: start; }
.cta-copy p { color: rgba(255, 255, 255, .85); font-size: 18.5px; max-width: 46ch; }
.cta-art { position: relative; display: grid; place-items: center; perspective: 900px; min-height: 280px; }
.cta-art img { width: min(430px, 100%); filter: drop-shadow(0 36px 36px rgba(4, 34, 42, .45)); transform: rotateY(var(--ry, -10deg)) rotateX(var(--rx, 6deg)); transition: transform .6s var(--ease-out); }
.float-coin {
  position: absolute; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF6C4, #FFC107 50%, #E09400 85%);
  box-shadow: inset 0 -4px 0 #C98200, inset 0 3px 0 rgba(255, 255, 255, .6), 0 6px 0 #9E6400, 0 20px 26px -8px rgba(0, 0, 0, .35);
  font: 800 14px/1 var(--font-display); color: #8A5600; letter-spacing: .04em; padding-top: 3px;
  animation: coin-float 5s ease-in-out infinite;
}
@keyframes coin-float { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-16px) rotate(10deg); } }

/* ---------- Alt bilgi ---------- */
.site-footer { position: relative; padding: clamp(56px, 7vw, 84px) 0 28px; color: rgba(255, 255, 255, .78); background: linear-gradient(180deg, #062F38, #04222A); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.footer-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.footer-brand .brand { color: #fff; font-size: 24px; }
.footer-brand p { max-width: 36ch; }
.site-footer h4 { font: 800 15px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 16px; }
.f-links { display: grid; gap: 10px; }
.f-links a { text-decoration: none; font-weight: 700; color: rgba(255, 255, 255, .8); transition: color .2s; }
.f-links a:hover { color: #fff; }
.f-contact li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.f-contact .i { width: 18px; height: 18px; color: var(--teal-300); margin-top: 3px; }
.f-contact a { text-decoration: none; }
.f-social { display: flex; gap: 10px; }
.f-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, transform .2s; }
.f-social a:hover { background: rgba(255, 255, 255, .16); transform: translateY(-3px); }
.f-social .i { width: 20px; height: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; }
.footer-bottom .made { display: inline-flex; align-items: center; gap: 10px; }
.footer-bottom .made img { height: 22px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.footer-legal { font-size: 13px; color: rgba(255, 255, 255, .5); margin-top: 14px; max-width: 90ch; }

/* ---------- Alt sayfalar ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: calc(var(--nav-h) + 72px) 0 clamp(70px, 9vw, 110px);
  border-radius: 0 0 clamp(30px, 4vw, 56px) clamp(30px, 4vw, 56px); background: var(--deep-900);
}
.page-hero .hero-floor { height: 80%; opacity: .7; }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
.page-hero h1 { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.02em; }
.page-hero p { color: rgba(255, 255, 255, .8); font-size: clamp(17px, 1.4vw, 20px); max-width: 56ch; margin-top: 16px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, .65); }
.crumbs a { text-decoration: none; color: rgba(255, 255, 255, .85); }
.crumbs a:hover { color: #fff; }
.page-hero-art { position: relative; width: clamp(150px, 20vw, 260px); }
.page-hero-art img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .4)); animation: float-y 6s ease-in-out infinite; }
.deco { position: absolute; z-index: -1; pointer-events: none; }
.deco-q { font: 800 120px/1 var(--font-display); color: var(--cyan-300); opacity: .9; filter: drop-shadow(0 6px 0 #2BA9A5) drop-shadow(0 20px 20px rgba(0, 0, 0, .35)); animation: coin-float 7s ease-in-out infinite; }
.deco-heart { width: 70px; height: 70px; color: var(--red-500); filter: drop-shadow(0 6px 0 #A92E22) drop-shadow(0 18px 20px rgba(0, 0, 0, .35)); animation: coin-float 6s ease-in-out infinite reverse; }
.page-body { position: relative; z-index: 1; margin-top: clamp(-56px, -5vw, -36px); padding-bottom: clamp(70px, 9vw, 120px); }
.section-title { font-size: clamp(26px, 3vw, 36px); margin: 8px 0 18px; }
.section-title.spaced { margin-top: clamp(40px, 6vw, 64px); }

.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rule-card { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 30px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); border: 1px solid rgba(4, 34, 42, .05); }
.rule-card h2 { font-size: clamp(22px, 2.2vw, 27px); display: flex; align-items: center; gap: 14px; }
.rule-card p, .rule-card li { color: var(--ink-500); }
.rule-card.wide { grid-column: 1 / -1; }
.rule-list { display: grid; gap: 8px; }
.rule-list li { display: flex; gap: 10px; align-items: flex-start; }
.rule-list li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--teal-400); }
.points-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.points-table div { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 18px; background: var(--paper); text-align: center; }
.points-table b { font: 800 34px/1 var(--font-display); color: var(--teal-600); padding-top: 4px; }
.points-table span { font-weight: 800; font-size: 14px; color: var(--ink-500); }
.points-table .bonus { background: #FFF4D1; }
.points-table .bonus b { color: #B97800; }
.joker-mini { display: grid; gap: 10px; }
.joker-mini li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--paper); }
.joker-mini .icon3d { width: 44px; height: 44px; border-radius: 14px; }
.joker-mini .icon3d .i { width: 22px; height: 22px; }
.joker-mini .fifty-sm { position: relative; font: 800 17px/1 var(--font-display); padding-top: 3px; }
.joker-mini b { color: var(--ink-900); }
.disclaimer { padding: 20px 22px; border-radius: var(--radius); background: #FFF8E1; color: #6B5200; font-size: 15px; border: 1px solid #FBE6A6; }

.prose { padding: clamp(26px, 4vw, 52px); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); border: 1px solid rgba(4, 34, 42, .05); color: var(--ink-700); }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 36px 0 12px; color: var(--ink-900); }
.prose h3 { font-size: clamp(19px, 1.8vw, 22px); margin: 26px 0 10px; color: var(--teal-700); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 1.3em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 6px 0; }
.prose a { color: var(--teal-600); font-weight: 700; }
.prose strong { color: var(--ink-900); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.toc a { padding: 8px 14px; border-radius: 999px; background: var(--paper); text-decoration: none; font-weight: 800; font-size: 14px; color: var(--teal-700); }
.toc a:hover { background: var(--teal-50); }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.info-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); border: 1px solid rgba(4, 34, 42, .05); }
.info-card h3 { font-size: 22px; }
.info-card p { color: var(--ink-500); }

.ann-list { display: grid; gap: 16px; }
.ann-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); border: 1px solid rgba(4, 34, 42, .05); }
.ann-card h2 { font-size: 21px; margin-bottom: 6px; }
.ann-card p { color: var(--ink-500); }

.status-page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; color: #fff; position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.status-card { position: relative; display: grid; justify-items: center; gap: 18px; max-width: 560px; }
.status-card > img { width: min(300px, 70vw); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); animation: float-y 6s ease-in-out infinite; }
.status-card h1 { font-size: clamp(44px, 7vw, 72px); text-shadow: 0 8px 30px rgba(0, 0, 0, .2); }
.status-card p { color: rgba(255, 255, 255, .88); font-size: 18px; max-width: 46ch; }
.status-card p strong { color: #fff; }
.status-page .deco { z-index: -1; }
.status-page.is-orange { color: #fff; }
.status-page.is-orange .space-bg { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 230, 170, .45), transparent 70%), linear-gradient(165deg, #F7A440 0%, #F3912F 45%, #D86F14 100%); }
.status-page.is-orange .hero-floor { background-image: linear-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 255, .22) 1.5px, transparent 1.5px); }
.status-page.is-orange .sparkles i { box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8); }
.status-gif { width: min(320px, 72vw) !important; border-radius: 40px; box-shadow: 0 30px 60px -24px rgba(120, 50, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .2); filter: none !important; animation: none !important; transform: perspective(900px) rotateX(6deg); }

/* ---------- Uygulama içi görünüm (WebView) ---------- */
.is-app body { background: #fff; }
.is-app .site-nav, .is-app .site-footer, .is-app .page-hero, .is-app .skip-link, .is-app .web-only { display: none !important; }
.is-app .page-body { margin-top: 0; padding: 14px 0 28px; }
.is-app .page-body > .container, .is-app .page-body > .container-narrow { width: calc(100% - 24px); }
.is-app .rules-grid { grid-template-columns: 1fr; gap: 12px; }
.is-app .rule-card, .is-app .ann-card, .is-app .prose { box-shadow: none; border: 1px solid #E3ECEA; padding: 18px; border-radius: 20px; }
.is-app .rule-card h2 { font-size: 20px; }
.is-app .app-only { display: block; }
.is-app .reveal, .is-app .reveal-pop { opacity: 1; translate: 0 0; scale: 1; transition: none; }
.app-only { display: none; }
.is-app.duyuru-page body { background: linear-gradient(180deg, #16A085 0%, #138F8A 60%, #1677A0 100%) fixed; }
.is-app.duyuru-page .ann-card { border: 0; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
.is-app.duyuru-page .section-title { color: #fff; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1080px) {
  .span-7, .span-6, .span-5 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .row-2 { grid-row: auto; }
  .b-card.wide-md { grid-column: span 12; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --nav-h: 70px; }
  .hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .hero-copy { justify-items: center; text-align: center; margin-inline: auto; }
  .hero-stats { justify-content: center; }
  .store-row { justify-content: center; }
  .hero-stage { height: 560px; min-height: 0; }
  .hero-fox { left: calc(50% - 205px); width: 128px; }
  .hero-bubble { left: calc(50% - 300px); bottom: calc(2% + 205px); font-size: 14px; }
  .scroll-cue { display: none; }
  .split { grid-template-columns: 1fr; }
  .split-copy { justify-items: center; text-align: center; }
  .split .stat-grid { max-width: 560px; margin-inline: auto; }
  .steps, .joker-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .joker-card { height: 360px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-copy { justify-items: center; text-align: center; margin-inline: auto; }
  .coach { text-align: left; }
  .faq-wrap { grid-template-columns: 1fr; }
  .account-card { position: relative; top: 0; }
  .cta-panel { grid-template-columns: 1fr; text-align: center; }
  .cta-copy { justify-items: center; }
  .cta-copy .store-row { justify-content: center; }
  .cta-art { min-height: 220px; order: -1; }
  .cta-art img { width: min(240px, 70%); }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-art { display: none; }
  .rules-grid, .cards-3 { grid-template-columns: 1fr; }
  .podium-stage { order: 2; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .span-7, .span-6, .span-5, .span-4 { grid-column: 1 / -1; }
  .b-card { min-height: 0; }
  .hero-stats li + li { padding-left: 16px; }
  .hero-stats { gap: 10px 16px; }
  .hero-stats b { font-size: 25px; }
  .hero-stage { height: 500px; }
  .hero-fox { left: calc(50% - 175px); width: 112px; bottom: 0; }
  .hero-bubble { display: none; }
  .store-row { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .store-btn { min-width: 0; flex: 1 1 0; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 16px; }
  .store-btn .i { width: 24px; height: 24px; }
  .store-btn strong { font-size: 17px; white-space: nowrap; }
  .store-btn small { font-size: 10.5px; white-space: nowrap; }
  .social-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .points-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuboid { --w: 104px; --d: 90px; }
  .pod-1 .cuboid { --h: 170px; }
  .pod-2 .cuboid { --h: 120px; }
  .pod-3 .cuboid { --h: 90px; }
  .cuboid .f-front { font-size: 46px; }
  .pod-1 .pod-fox { width: 112px; }
  .pod-avatar { width: 54px; height: 54px; font-size: 20px; }
  .orbit-stage { height: 400px; }
  .orbit-chip { font-size: 12.5px; gap: 6px; padding: 5px 11px 5px 5px; }
  .orbit-chip .emo { width: 22px; height: 22px; font-size: 12px; }
  .orbit-fox { width: 150px; }
  .viz-daily { flex-direction: column; align-items: stretch; }
  .cal { align-self: center; }
  .ann-card { gap: 14px; padding: 18px; }
  .ann-card .icon3d.sm { width: 48px; height: 48px; border-radius: 16px; }
  .ann-card .icon3d.sm .i { width: 24px; height: 24px; }
  .page-hero .deco.float-coin { display: none; }
  .deco-q { font-size: 80px; }
  .deco-heart { width: 48px; height: 48px; }
  .joker-card { height: 330px; }
  .joker-chip { width: 112px; height: 112px; }
  .joker-chip .i { width: 54px; height: 54px; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-pop { opacity: 1; translate: 0 0; scale: 1; }
  .reveal .cuboid { transform: none; }
}