/* ═══════════════════════════════════════
   RESET & CSS VARIABLES
═══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:       #F9F7F2;
  --bg2:      #F2EEE6;
  --card:     #FFFFFF;
  --border:   rgba(28,23,16,.10);
  --border2:  rgba(28,23,16,.06);
  --ink:      #1C1710;
  --ink2:     #3E3628;
  --ink3:     #7C7060;
  --pu:       #6B4EFF;
  --pu2:      #8B72FF;
  --pu3:      #EDE8FF;
  --pu4:      #F5F2FF;
  --bl:       #3D7EFF;
  --bl2:      #6BA0FF;
  --bl3:      #EBF2FF;
  --gd:       #F5A623;
  --gd2:      #FFD166;
  --gd3:      #FFF6E0;
  --tl:       #00B89F;
  --tl2:      #00D4B4;
  --tl3:      #E0F7F4;
  --pk:       #FF6B9D;
  --pk3:      #FFE8F2;
  --gn:       #2ECC71;
  --gn3:      #E6FAF0;
  --sh0:  0 1px 4px rgba(28,23,16,.05);
  --sh:   0 4px 20px rgba(28,23,16,.07);
  --sh2:  0 10px 40px rgba(28,23,16,.10);
  --sh3:  0 20px 72px rgba(28,23,16,.13);
  --shp:  0 10px 36px rgba(107,78,255,.22);
  --r1: 12px; --r2: 18px; --r3: 26px; --r4: 40px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════
   BASE STYLES
═══════════════════════════════════════ */
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  font-family: 'DM Sans', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  /* Madlen-style grid texture */
  background-image:
    linear-gradient(rgba(28,23,16,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,23,16,.038) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  overflow-x: hidden;
  min-height: 100vh;
}
/* Warm radial ambiance */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 0%, rgba(107,78,255,.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 8%, rgba(245,166,35,.04) 0%, transparent 55%);
}

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
h1,h2,h3,h4,h5 {
  font-family: 'Sora', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  line-height: 1.15;
  color: var(--ink);
}
.t-hero  { font-size: clamp(38px, 5.2vw, 70px); font-weight:900; line-height:1.06; letter-spacing:-.022em; }
.t-sec   { font-size: clamp(28px, 3.2vw, 50px); font-weight:800; line-height:1.13; letter-spacing:-.018em; }
.t-card  { font-size: clamp(17px, 1.8vw, 22px); font-weight:700; line-height:1.2; }
.t-body  { font-size: clamp(15px, 1.3vw, 17px); line-height:1.72; color:var(--ink2); }
.t-sm    { font-size: clamp(13px, 1vw, 15px); line-height:1.65; color:var(--ink2); }
.t-label { font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pu); display:block; margin-bottom:10px; }
/* Gradient text - Safari safe */
.gp { background:linear-gradient(135deg,var(--pu) 0%,var(--bl) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:var(--pu); }
.gg { background:linear-gradient(135deg,var(--gd) 0%,var(--pk) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:var(--gd); }
.gt { background:linear-gradient(135deg,var(--tl) 0%,var(--bl) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:var(--tl); }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap { max-width:1140px; margin:0 auto; padding:0 clamp(18px,5vw,44px); position:relative; z-index:1; }
section { padding:clamp(64px,9vw,112px) 0; position:relative; overflow:hidden; }
.sec-hd { margin-bottom:clamp(36px,6vw,68px); }
.sec-hd.center { text-align:center; }
.sec-hd.center .t-body { margin:0 auto; }
.sec-hd .t-sec { margin-bottom:14px; }
.sec-hd .t-body { max-width:560px; }

/* ═══════════════════════════════════════
   SCROLL REVEAL — cinematic timing
═══════════════════════════════════════ */
.rv  { opacity:0; transform:translateY(28px); transition:opacity .72s var(--ease), transform .72s var(--ease); }
.rvl { opacity:0; transform:translateX(-28px); transition:opacity .72s var(--ease), transform .72s var(--ease); }
.rvr { opacity:0; transform:translateX(28px); transition:opacity .72s var(--ease), transform .72s var(--ease); }
.rvs { opacity:0; transform:scale(.95); transition:opacity .72s var(--ease), transform .72s var(--ease); }
.rv.in, .rvl.in, .rvr.in, .rvs.in { opacity:1; transform:none; }
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }
@keyframes float2{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-9px) rotate(1.5deg)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(107,78,255,.35)} 60%{box-shadow:0 0 0 9px rgba(107,78,255,0)} }
@keyframes shimmer{ 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes xpFill { from{width:0} to{width:var(--w,72%)} }
@keyframes pvpL { from{opacity:0;transform:translateX(-48px) scale(.9)} to{opacity:1;transform:none} }
@keyframes pvpR { from{opacity:0;transform:translateX(48px) scale(.9)} to{opacity:1;transform:none} }
@keyframes vsPop{ from{opacity:0;transform:scale(0) rotate(-15deg)} to{opacity:1;transform:none} }
@keyframes tick  { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
@keyframes countIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes nodeAnim { to{ background:linear-gradient(135deg,var(--pu),var(--bl)); box-shadow:var(--shp); } }
@keyframes gemFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
/* Polish motion additions */
@keyframes chipPop   { 0%{opacity:0;transform:scale(.6) translateY(8px)} 70%{transform:scale(1.08) translateY(-2px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
@keyframes coinBob   { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-8px) rotate(3deg)} }
@keyframes starPulse { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.2);opacity:1} }
@keyframes lockShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px) rotate(-4deg)} 75%{transform:translateX(3px) rotate(4deg)} }
@keyframes cntUp     { from{opacity:0;transform:translateY(16px) scale(.9)} to{opacity:1;transform:none} }
@keyframes sparkleKf { 0%,100%{opacity:1;transform:scale(1) rotate(0deg)} 50%{opacity:.3;transform:scale(.5) rotate(180deg)} }
/* Game energy keyframes */
@keyframes xpGainPop {
  0%   { opacity:0; transform:translateY(6px) scale(.8); }
  45%  { opacity:1; transform:translateY(-4px) scale(1.05); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes rewardGlow {
  0%,100% { box-shadow: 0 4px 16px rgba(28,23,16,.10); }
  50%     { box-shadow: 0 4px 22px rgba(107,78,255,.28), 0 0 0 3px rgba(107,78,255,.08); }
}
@keyframes rewardGlowGold {
  0%,100% { box-shadow: 0 4px 16px rgba(28,23,16,.10); }
  50%     { box-shadow: 0 4px 22px rgba(245,166,35,.28), 0 0 0 3px rgba(245,166,35,.08); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes btnShine {
  0%   { transform:translateX(-120%) skewX(-15deg); }
  100% { transform:translateX(240%) skewX(-15deg); }
}
@keyframes vsGlow {
  0%,100% { box-shadow: 0 8px 22px rgba(107,78,255,.3); }
  50%     { box-shadow: 0 12px 36px rgba(107,78,255,.55), 0 0 0 4px rgba(107,78,255,.12); }
}
@keyframes timerUrge {
  0%,100% { color:#fff; }
  50%     { color:var(--gd2); }
}
@keyframes unlockShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes streakFire {
  0%,100% { transform:scale(1) rotate(-4deg); opacity:.9; }
  50%     { transform:scale(1.15) rotate(4deg); opacity:1; }
}
@keyframes scoreEmphasis {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.06); }
}
@keyframes cardGlow {
  0%,100% { box-shadow:var(--sh2); }
  50%     { box-shadow:var(--sh2), 0 0 30px rgba(107,78,255,.12); }
}
/* ── SOUL additions ── */
@keyframes xpShimmer {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:200% 50%; }
}
@keyframes pvpBtnPulse {
  0%,100% { box-shadow:0 2px 8px rgba(255,107,157,0); }
  50%     { box-shadow:0 0 0 5px rgba(255,107,157,.2); }
}
@keyframes dailyBreathe {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.008); box-shadow:0 4px 14px rgba(107,78,255,.14); }
}
@keyframes haloBreathe {
  0%,100% { opacity:.75; transform:translateX(-50%) scale(1); }
  50%     { opacity:1;   transform:translateX(-50%) scale(1.08); }
}
@keyframes featuredPulse {
  0%,100% { box-shadow:0 12px 44px rgba(107,78,255,.12); border-color:var(--pu); }
  50%     { box-shadow:0 22px 64px rgba(107,78,255,.24), 0 0 0 3px rgba(107,78,255,.1); border-color:var(--pu2); }
}
@keyframes connPulse {
  0%,100% { opacity:.4; }
  50%     { opacity:.9; }
}
@keyframes quotePulse {
  0%,100% { border-left-color:var(--pu); }
  50%     { border-left-color:var(--bl); }
}
@keyframes coinGlow {
  0%,100% { box-shadow:none; }
  50%     { box-shadow:0 0 0 3px rgba(245,166,35,.25); }
}

/* ═══════════════════════════════════════
   BUTTONS — polished with shine sweep
═══════════════════════════════════════ */
.btn {
  font-family:'Sora',sans-serif; font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:50px; padding:0 26px; border-radius:14px;
  border:none; cursor:pointer; text-decoration:none;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), background .2s;
  white-space:nowrap; position:relative; overflow:hidden;
  -webkit-appearance:none;
}
.btn:active { transform:scale(.95) !important; }

/* Shine sweep on hover — all primary buttons */
.btn-p::after, .btn-g::after, .btn-t::after {
  content:'';
  position:absolute; top:0; left:0; bottom:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-120%) skewX(-15deg);
  pointer-events:none;
}
.btn-p:hover::after, .btn-g:hover::after, .btn-t:hover::after {
  animation:btnShine .55s var(--ease);
}
.btn-p { background:linear-gradient(135deg,var(--pu),var(--bl)); color:#fff; box-shadow:var(--shp); }
.btn-p:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(107,78,255,.36); }
.btn-s { background:var(--card); color:var(--ink); border:1.5px solid var(--border); box-shadow:var(--sh0); }
.btn-s:hover { border-color:var(--pu); color:var(--pu); transform:translateY(-2px); box-shadow:var(--sh); }
.btn-g { background:linear-gradient(135deg,var(--gd),#FF8C40); color:#fff; box-shadow:0 8px 24px rgba(245,166,35,.28); }
.btn-g:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(245,166,35,.38); }
.btn-t { background:linear-gradient(135deg,var(--tl),var(--bl)); color:#fff; box-shadow:0 8px 24px rgba(0,184,159,.22); }
.btn-t:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,184,159,.3); }
.btn-lk { background:var(--bg2); color:var(--ink3); cursor:not-allowed; }
.btn-lk::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); background-size:200% 100%; animation:shimmer 2.5s infinite; }
.btn-w { background:#fff; color:var(--pu); font-weight:800; }
.btn-w:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(255,255,255,.3); }
.btn-wo{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5); }
.btn-wo:hover { background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }
.btn-sm { height:40px; padding:0 18px; font-size:13px; border-radius:11px; }
.btn-fw { width:100%; }

/* Nav primary button — subtle glow pulse */
.nb-primary { animation:rewardGlow 3s ease-in-out infinite; }

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-bottom:env(safe-area-inset-top, 0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
#nav.scrolled {
  background:rgba(249,247,242,.93);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(28,23,16,.07);
  box-shadow:0 2px 20px rgba(28,23,16,.05);
}
.nav-in {
  max-width:1140px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(14px,2.5vw,20px) clamp(18px,5vw,44px);
  transition:padding .4s var(--ease);
}
#nav.scrolled .nav-in { padding-top:11px; padding-bottom:11px; }

/* ─────────────────────────────────────────
   Logo — Official brand image integration
───────────────────────────────────────── */
.logo {
  display:flex; align-items:center;
  cursor:pointer; text-decoration:none; flex-shrink:0;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover  { transform:scale(1.05); }
.logo:active { transform:scale(.97); }

/* Official logo image — visible by default */
.logo-img {
  display: block;
  height: clamp(26px, 3.2vw, 30px);
  width: auto;
  max-width: 160px;
  /* multiply removes the white JPG background on cream surfaces */
  mix-blend-mode: multiply;
  filter: brightness(0.94) contrast(1.04);
  transition: filter .2s;
  -webkit-user-drag: none;
  user-select: none;
  flex-shrink: 0;
}
.logo:hover .logo-img { filter: brightness(0.85) contrast(1.08); }

/* Fallback text — hidden while image renders, shown only if img fails */
.logo-fallback {
  display: none;          /* JS onerror switches this to inline-flex */
  align-items: center;
  gap: 9px;
}
.logo-mark {
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--pu),var(--bl));
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  box-shadow:0 4px 14px rgba(107,78,255,.3);
}
.logo-text { font-family:'Sora',sans-serif; font-weight:900; font-size:18px; color:var(--ink); letter-spacing:-.01em; }

/* Mobile sizing */
@media (max-width:640px) {
  .logo-img { height: clamp(22px, 6vw, 26px); }
}

/* Nav links */
.nav-links { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nl {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--ink2);
  background:transparent; border:none; cursor:pointer;
  padding:8px 12px; border-radius:10px;
  text-decoration:none; transition:all .22s;
  position:relative; white-space:nowrap;
}
.nl::after {
  content:''; position:absolute; bottom:5px; left:50%; right:50%;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--pu),var(--bl));
  transition:all .3s var(--ease); opacity:0;
}
.nl:hover { color:var(--pu); background:rgba(107,78,255,.06); }
.nl:hover::after, .nl.active::after { left:12px; right:12px; opacity:1; }
.nl.active { color:var(--pu); }

/* Nav actions */
.nav-act { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nb-ghost {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--card); border:1.5px solid var(--border);
  height:42px; padding:0 20px; border-radius:12px; cursor:pointer;
  transition:all .22s; white-space:nowrap; -webkit-appearance:none;
}
.nb-ghost:hover { border-color:var(--pu); color:var(--pu); background:var(--pu4); }
.nb-primary {
  font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--pu),var(--bl));
  height:42px; padding:0 20px; border-radius:12px; border:none; cursor:pointer;
  box-shadow:0 4px 14px rgba(107,78,255,.3); transition:all .22s; white-space:nowrap; -webkit-appearance:none;
}
.nb-primary:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(107,78,255,.38); }

/* Hamburger */
.ham { display:none; flex-direction:column; gap:5px; background:transparent; border:none; cursor:pointer; padding:7px; -webkit-appearance:none; }
.ham span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .3s var(--ease); }
.ham.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.ham.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.ham.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile drawer */
.drawer {
  position:fixed; inset:0; z-index:850;
  background:linear-gradient(160deg,var(--pu4),var(--bg));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  opacity:0; pointer-events:none; transform:translateY(-14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.drawer.open { opacity:1; pointer-events:all; transform:none; }
.drawer .nl { font-size:20px; font-weight:700; padding:13px 28px; }
.drawer-btns { margin-top:22px; display:flex; flex-direction:column; gap:11px; width:210px; }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  padding-top:clamp(96px,13vw,152px);
  padding-bottom:clamp(60px,8vw,96px);
  min-height:90vh;
  display:flex; align-items:center;
}
.hero-grid {
  display:grid;
  grid-template-columns:1.08fr 0.92fr;
  gap:clamp(24px,5vw,60px);
  align-items:center;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pu3); border:1.5px solid rgba(107,78,255,.25);
  color:var(--pu); padding:6px 14px; border-radius:20px;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:700;
  margin-bottom:20px;
}
.hero-eyebrow .dot { width:7px; height:7px; background:var(--gn); border-radius:50%; animation:blink 1.7s infinite; }
.hero-title { margin-bottom:20px; }
.hero-sub { max-width:480px; margin-bottom:30px; }
.hero-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.pill {
  background:var(--card); border:1.5px solid var(--border);
  padding:7px 14px; border-radius:20px;
  font-family:'Sora',sans-serif; font-size:12px; font-weight:600; color:var(--ink2);
  box-shadow:var(--sh0); transition:all .22s; cursor:default;
}
.pill:hover { border-color:var(--pu); color:var(--pu); background:var(--pu4); }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ── Real App Screen · Premium Phone Frame ── */
.phone-col   { position:relative; display:flex; justify-content:center; align-items:center; }
.phone-scene { position:relative; padding:24px 72px; }

.phone {
  width:clamp(248px,28vw,290px);
  border-radius:clamp(26px,3.6vw,36px);
  border:1.5px solid rgba(107,78,255,.16);
  box-shadow:
    0 64px 140px rgba(107,78,255,.30),
    0 24px 60px  rgba(107,78,255,.18),
    0 8px  22px  rgba(0,0,0,.12),
    0 0 0  1px   rgba(255,255,255,.55) inset,
    0 0 0  40px  rgba(107,78,255,.04) inset;
  overflow:hidden;
  transform:rotate(-1.5deg) perspective(1200px) rotateY(2deg);
  animation:float 7s ease-in-out infinite;
  position:relative; z-index:2;
  background:#A8C8E8;
}
.phone-screen-img {
  width:100%; height:auto; display:block;
  -webkit-user-drag:none; user-select:none;
}
/* Dual halo: purple main + warm gold bottom accent */
.phone-scene::before {
  content:'';
  position:absolute; top:2%; left:50%; transform:translateX(-50%);
  width:94%; height:96%;
  background:
    radial-gradient(ellipse at 42% 32%, rgba(107,78,255,.26) 0%, transparent 58%),
    radial-gradient(ellipse at 68% 70%, rgba(245,166,35,.16) 0%, transparent 52%);
  z-index:1; pointer-events:none; border-radius:50%;
  animation:haloBreathe 7s ease-in-out infinite;
}
/* Ground shadow — phone floats above a glow pool */
.phone-scene::after {
  content:'';
  position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  width:70%; height:18%;
  background:radial-gradient(ellipse at 50% 100%, rgba(107,78,255,.22) 0%, transparent 70%);
  z-index:1; pointer-events:none; border-radius:50%;
  filter:blur(12px);
}

/* Interactive hotspots over Akademik / Oyunlar / PVP */
.hs { position:absolute; border-radius:13px; z-index:5; cursor:pointer; transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.hs:hover { transform:translateY(-5px) scale(1.04); }
.hs-ak { top:71.5%; left:2.5%; width:31%; height:13.5%; animation:hsGn 3s ease-in-out infinite; }
.hs-oy { top:71.5%; left:36%;  width:29%; height:13.5%; animation:hsOr 3s ease-in-out infinite .65s; }
.hs-pv { top:71.5%; left:68%;  width:29%; height:13.5%; animation:hsPk 3s ease-in-out infinite 1.3s; }
@keyframes hsGn { 0%,100%{box-shadow:0 0 0 rgba(46,204,113,0),inset 0 0 0 0 rgba(46,204,113,0)} 50%{box-shadow:0 0 28px rgba(46,204,113,.45),inset 0 0 0 2px rgba(46,204,113,.28)} }
@keyframes hsOr { 0%,100%{box-shadow:0 0 0 rgba(255,154,60,0),inset 0 0 0 0 rgba(255,154,60,0)} 50%{box-shadow:0 0 28px rgba(255,154,60,.45),inset 0 0 0 2px rgba(255,154,60,.28)} }
@keyframes hsPk { 0%,100%{box-shadow:0 0 0 rgba(255,107,157,0),inset 0 0 0 0 rgba(255,107,157,0)} 50%{box-shadow:0 0 28px rgba(255,107,157,.45),inset 0 0 0 2px rgba(255,107,157,.28)} }

/* Floating reward badges */
.fb { position:absolute; border-radius:14px; padding:8px 13px; border:1.5px solid var(--border); font-family:'Sora',sans-serif; font-size:11px; font-weight:800; display:flex; align-items:center; gap:7px; white-space:nowrap; z-index:6; box-shadow:0 6px 22px rgba(28,23,16,.13),0 1px 4px rgba(28,23,16,.06),0 0 0 1px rgba(255,255,255,.95) inset; animation-fill-mode:both; }
.fb-a { top:38px; right:4px; color:var(--pu); background:linear-gradient(135deg,#fff,#EEE8FF); border-color:rgba(107,78,255,.25); animation:chipPop .6s var(--ease) .3s both, float2 6s ease-in-out 1s infinite; }
.fb-b { bottom:88px; right:2px; color:#A84E00; background:linear-gradient(135deg,#fff,#FFF0D8); border-color:rgba(210,120,0,.22); animation:chipPop .6s var(--ease) .55s both, float2 6.5s ease-in-out 1.2s infinite; }
.fb-c { top:120px; left:4px; color:var(--bl); background:linear-gradient(135deg,#fff,#E8F0FF); border-color:rgba(61,126,255,.25); animation:chipPop .6s var(--ease) .75s both, float2 5.8s ease-in-out 1.4s infinite; }
.fb-d { bottom:148px; left:2px; color:#6B3800; background:linear-gradient(135deg,#FFF5D6,#FFE07A); border-color:rgba(190,120,0,.35); box-shadow:0 6px 22px rgba(180,100,0,.22),0 1px 4px rgba(28,23,16,.06),0 0 0 1px rgba(255,230,100,.85) inset; animation:chipPop .6s var(--ease) .95s both, float2 7s ease-in-out 1.6s infinite; }
.fb-b .fb-fire { display:inline-block; animation:streakFire 1.8s ease-in-out infinite; }

/* Ambient particles */
.hero-p { position:absolute; pointer-events:none; z-index:7; line-height:1; user-select:none; }
.hero-p-coin { font-size:22px; top:-10px; right:44px; filter:drop-shadow(0 4px 12px rgba(210,140,0,.65)); animation:particleCoin 5s ease-in-out infinite .4s; opacity:.92; }
.hero-p-diamond { font-size:18px; bottom:16px; left:38px; filter:drop-shadow(0 3px 10px rgba(61,126,255,.60)); animation:particleDiamond 6s ease-in-out infinite 1.3s; opacity:.88; }
.hero-p-xp { display:none; }
/* ═══════════════════════════════════════
   SECTION CONNECTORS
═══════════════════════════════════════ */
.connector {
  text-align:center; padding:clamp(20px,3vw,32px) 0;
  position:relative; z-index:1;
}
.connector p {
  font-family:'Sora',sans-serif; font-size:clamp(14px,1.5vw,16px); font-weight:600;
  color:var(--pu); opacity:.75; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:8px;
}
.connector::before {
  content:''; display:block; width:1px; height:clamp(28px,4vw,44px);
  background:linear-gradient(to bottom, var(--border), var(--pu-mid, rgba(107,78,255,.3)));
  margin:0 auto 12px; border-radius:1px;
}
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--border) 25%,var(--border) 75%,transparent); margin:0 clamp(18px,5vw,44px); }

/* ═══════════════════════════════════════
   HAKKIMIZDA
═══════════════════════════════════════ */
#hakkimizda { background:rgba(255,255,255,.65); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:start; }
.about-text .t-sec { margin-bottom:16px; }
.about-text .t-body { margin-bottom:14px; }
.about-quote {
  margin:20px 0; padding:18px 20px;
  background:var(--pu4); border-left:3px solid var(--pu);
  border-radius:0 var(--r2) var(--r2) 0;
  font-family:'Sora',sans-serif; font-size:clamp(15px,1.4vw,17px); font-weight:600; color:var(--pu);
  line-height:1.5;
}
.about-cards { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.about-card {
  background:var(--bg); border-radius:var(--r2); padding:20px 18px;
  border:1.5px solid var(--border); transition:all .3s var(--ease); cursor:default;
}
.about-card:hover { border-color:rgba(107,78,255,.25); background:var(--pu4); transform:translateY(-4px); box-shadow:var(--sh2); }
.about-card-ico { font-size:24px; margin-bottom:11px; }
.about-card h4 { font-family:'Sora',sans-serif; font-size:14px; font-weight:700; margin-bottom:6px; }
.about-card p { font-size:13px; color:var(--ink2); line-height:1.65; margin:0; }

/* ═══════════════════════════════════════
   AKADEMİ MODU — CSS App Screen
═══════════════════════════════════════ */
#akademi { }
.ak-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,6vw,72px); align-items:center; }
.ak-text .t-sec { margin-bottom:14px; }
.ak-text .t-body { margin-bottom:20px; }
.ak-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.ak-features li { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink2); }
.ak-fd { width:7px;height:7px;border-radius:50%;background:var(--pu);flex-shrink:0; }
.ak-rewards { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.ak-chip { display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:11px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;border:1.5px solid; }
.ak-chip.xp  { background:var(--pu4);border-color:rgba(107,78,255,.25);color:var(--pu); }
.ak-chip.gld { background:var(--gd3);border-color:rgba(245,166,35,.3);color:#8A5200; }
.ak-chip.dia { background:var(--bl3);border-color:rgba(61,126,255,.3);color:var(--bl); }

/* CSS Phone mockup for academy */
.ak-phone-wrap { display:flex; justify-content:center; align-items:flex-start; }
.ak-phone {
  width:clamp(270px,35vw,310px);
  background:linear-gradient(155deg,#E8EEFF,#EDE5FF);
  border-radius:28px; padding:12px;
  border:2.5px solid rgba(107,78,255,.16);
  box-shadow:0 28px 80px rgba(107,78,255,.18),0 4px 16px rgba(0,0,0,.04);
  animation:float 7s ease-in-out infinite 1s;
}
.ak-bar {
  background:linear-gradient(120deg,#A6C8FF,#C4AEFF);
  border-radius:18px 18px 0 0; padding:10px 12px;
  display:flex; align-items:center; gap:7px; margin-bottom:0;
}
.ak-body { background:#fff; border-radius:0 0 18px 18px; padding:11px; }
/* Subject tabs */
.ak-tabs { display:flex; gap:4px; margin-bottom:10px; }
.ak-tab {
  flex:1; padding:7px 4px; text-align:center;
  font-family:'Sora',sans-serif; font-size:10px; font-weight:700; border-radius:9px;
  cursor:default; transition:all .2s;
}
.ak-tab.active { background:var(--pu4); color:var(--pu); border:1.5px solid rgba(107,78,255,.25); }
.ak-tab:not(.active) { background:var(--bg2); color:var(--ink2); border:1.5px solid var(--border); }
/* Section label */
.ak-sec-lbl { font-family:'Sora',sans-serif; font-size:11px; font-weight:800; color:var(--ink); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
/* Book cards grid */
.ak-books { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-bottom:8px; }
.ak-book {
  background:var(--bg); border-radius:10px; padding:8px 6px;
  border:1.5px solid var(--border); position:relative; text-align:center;
  transition:all .25s;
}
.ak-book:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.ak-book-badge { position:absolute; top:4px; right:4px; padding:2px 5px; border-radius:5px; font-family:'Sora',sans-serif; font-size:7px; font-weight:700; }
.bk-mevcut { background:rgba(46,204,113,.15); color:#0D7A3E; }
.bk-pop    { background:rgba(255,107,107,.15); color:#CC2200; }
.bk-yeni   { background:rgba(245,166,35,.15);  color:#8A5200; }
.bk-lock   { background:rgba(28,23,16,.08); color:var(--ink3); }
.ak-book-icon { font-size:20px; margin:6px 0 4px; }
.ak-book-nm { font-family:'Sora',sans-serif; font-size:8.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.ak-book-ds { font-size:7px; color:var(--ink3); margin-bottom:5px; line-height:1.4; }
.ak-book-price { font-family:'Sora',sans-serif; font-size:8px; font-weight:800; padding:3px 5px; border-radius:6px; display:inline-flex; align-items:center; gap:3px; }
.bk-free  { background:rgba(107,78,255,.1); color:var(--pu); }
.bk-coin  { background:rgba(245,166,35,.12); color:#8A5200; }
.bk-combo { background:rgba(61,126,255,.1); color:var(--bl); font-size:7.5px; }
.bk-locked{ background:rgba(28,23,16,.07); color:var(--ink3); }
/* Stars/progress for active book */
.bk-stars { font-size:7px; color:var(--gd); margin-bottom:2px; }
.bk-prog { height:3px; background:rgba(28,23,16,.06); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.bk-prog-fi { height:100%; background:linear-gradient(90deg,var(--gn),var(--tl)); border-radius:2px; --w:100%; animation:xpFill 1.4s var(--ease) 1.5s both; }
/* Bundle banner */
.ak-bundle {
  background:linear-gradient(135deg,#D8C8FF,#C0B0EE);
  border-radius:9px; padding:9px 10px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.ak-bundle-left h4 { font-family:'Sora',sans-serif; font-size:10px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.ak-bundle-left p  { font-size:8px; color:var(--ink2); }
.ak-bundle-price { font-family:'Sora',sans-serif; font-size:9px; font-weight:800; background:rgba(255,255,255,.7); padding:4px 7px; border-radius:7px; color:var(--pu); }
/* Daily goal */
.ak-daily {
  background:linear-gradient(135deg,#C4AEFF,#B8A0FF);
  border-radius:9px; padding:9px 10px;
  display:flex; align-items:center; gap:8px;
}
.ak-daily-tx { flex:1; }
.ak-daily-tx h4 { font-family:'Sora',sans-serif; font-size:10px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.ak-daily-tx p { font-size:8px; color:var(--ink2); }
.ak-daily-pr { font-family:'Sora',sans-serif; font-size:11px; font-weight:900; color:var(--pu); }
.ak-dbar { height:4px; background:rgba(28,23,16,.1); border-radius:2px; overflow:hidden; margin-top:4px; }
.ak-dfi { height:100%; background:linear-gradient(90deg,var(--gn),var(--tl)); border-radius:2px; --w:40%; animation:xpFill 1.4s var(--ease) 1.7s both; }

/* ═══════════════════════════════════════
   OYUN MODLARI — CSS Game Panels
═══════════════════════════════════════ */
#oyun { background:rgba(255,255,255,.65); }
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.game-card { border-radius:var(--r3); overflow:hidden; box-shadow:var(--sh2); transition:all .38s var(--ease); cursor:default; background:var(--card); }
.game-card:hover { transform:translateY(-10px) scale(1.01); box-shadow:var(--sh3); }
/* CSS Art panels for each game */
.game-art {
  height:clamp(160px,22vw,200px); position:relative;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding:14px; overflow:hidden;
}
/* TürkçEbe — purple adventure (gradient animation applied in utilities block) */
.ga-tr {
  background:linear-gradient(145deg,#3A20B8 0%,#6B40EE 45%,#A880FF 100%);
}
.ga-tr::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle 60px at 75% 30%,rgba(255,255,255,.08) 0%,transparent 100%),
    linear-gradient(45deg,transparent 60%,rgba(255,255,255,.05) 100%);
}
/* Decorative word chips */
.ga-tr::after {
  content:'EŞ ANLAM  •  ZIT ANLAM  •  DEYİM';
  position:absolute; top:16px; right:14px;
  font-family:'Sora',sans-serif; font-size:8px; font-weight:700; color:rgba(255,255,255,.45);
  line-height:1.8; text-align:right; letter-spacing:.04em;
  white-space:pre-line;
}
/* DeparMatik — gold runner */
.ga-mt { background:linear-gradient(145deg,#1A1008 0%,#3D2A00 40%,#8A6020 100%); }
.ga-mt::before {
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(255,179,71,.12) 0%,transparent 50%),
    repeating-linear-gradient(75deg,transparent,transparent 28px,rgba(245,166,35,.06) 28px,rgba(245,166,35,.06) 29px);
}
.ga-mt::after {
  content:'5  +  ×  ÷  9  3  =  8';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-size:18px; font-weight:900; color:rgba(255,179,71,.18);
  letter-spacing:8px; top:20px;
}
/* MotiFen — teal science */
.ga-fn { background:linear-gradient(145deg,#0A2420 0%,#103830 45%,#1A6050 100%); }
.ga-fn::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 80px at 70% 35%,rgba(0,212,180,.12) 0%,transparent 100%),
    radial-gradient(circle 40px at 30% 70%,rgba(0,184,255,.08) 0%,transparent 100%);
}
/* Gem grid overlay */
.gem-grid { position:absolute; top:10px; right:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; opacity:.55; }
.gem { width:16px; height:16px; border-radius:4px; }
.g-pink { background:rgba(255,107,157,.7); } .g-blue { background:rgba(61,126,255,.7); }
.g-green{ background:rgba(46,204,113,.7); } .g-yell { background:rgba(245,166,35,.7); }
.g-purp { background:rgba(107,78,255,.7); }
/* Game tag chip */
.game-tag {
  position:absolute; top:12px; left:12px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(0,0,0,.6); border-radius:9px;
  padding:4px 10px; font-family:'Sora',sans-serif; font-size:10px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:5px;
}
.game-art-title {
  position:relative; z-index:2;
  font-family:'Sora',sans-serif; font-size:clamp(18px,2.5vw,24px); font-weight:900; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35); margin-bottom:4px;
}
.game-art-sub {
  position:relative; z-index:2;
  font-size:10px; color:rgba(255,255,255,.7); font-weight:500;
  display:flex; gap:10px;
}
.game-body { padding:18px; }
.gc-lbl { display:inline-block; padding:3px 10px; border-radius:8px; font-family:'Sora',sans-serif; font-size:10px; font-weight:800; margin-bottom:10px; letter-spacing:.04em; }
.gl-tr { background:var(--pu4); color:var(--pu); }
.gl-mt { background:var(--gd3); color:#8A5200; }
.gl-fn { background:var(--tl3); color:#007A68; }
.game-body h3 { font-family:'Sora',sans-serif; font-size:17px; font-weight:800; margin-bottom:7px; }
.game-body p  { font-size:13px; color:var(--ink2); margin-bottom:13px; line-height:1.6; }
.game-feats { list-style:none; display:flex; flex-direction:column; gap:5px; }
.game-feats li { font-size:12px; color:var(--ink2); display:flex; align-items:center; gap:7px; }
.game-feats li::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.gf-tr li::before{background:var(--pu)} .gf-mt li::before{background:var(--gd)} .gf-fn li::before{background:var(--tl)}

/* ═══════════════════════════════════════
   PVP ARENA
═══════════════════════════════════════ */
#pvp { }
.pvp-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,6vw,72px); align-items:center; }
.pvp-feat-list { display:flex; flex-direction:column; gap:10px; }
.pvp-feat { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink2); }
.pvp-feat-ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
/* Tiers */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:26px; }
.tier { border-radius:var(--r2); padding:14px 10px; text-align:center; border:2px solid transparent; transition:all .28s; cursor:default; }
.tier:hover { transform:translateY(-4px); }
.t-br{background:linear-gradient(145deg,#FFF8F0,#FFEEE0);border-color:rgba(200,120,40,.2)}
.t-si{background:linear-gradient(145deg,#F7F7F9,#EEEEEF);border-color:rgba(180,180,200,.22)}
.t-go{background:linear-gradient(145deg,#FFFCEE,#FFF4D0);border-color:rgba(245,166,35,.22)}
.t-di{background:linear-gradient(145deg,#EDF4FF,#E2ECFF);border-color:rgba(61,126,255,.22)}
.tier-ic { font-size:28px; margin-bottom:7px; }
.tier-nm { font-family:'Sora',sans-serif; font-size:12px; font-weight:800; }
.tier-pt { font-size:10px; color:var(--ink3); margin-top:2px; }
/* Duel card */
.duel-card {
  background:var(--card); border-radius:var(--r3); padding:clamp(20px,3vw,28px);
  box-shadow:var(--sh2); border:1.5px solid rgba(107,78,255,.1);
  position:relative; overflow:hidden;
}
.duel-card::before { content:'⚔️'; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); font-size:100px; opacity:.04; pointer-events:none; }
.duel-lbl { text-align:center; font-family:'Sora',sans-serif; font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.pvp-pls { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:20px; }
.pvp-pl { text-align:center; }
.pvp-av { width:60px;height:60px;border-radius:50%;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;font-size:28px;border:3px solid #fff;box-shadow:var(--sh); }
.pvp-av.p1 { background:linear-gradient(135deg,#EDE8FF,#D4C4FF); animation:pvpL .8s var(--ease) .3s both; }
.pvp-av.p2 { background:linear-gradient(135deg,#FFE8F0,#FFCCE0); animation:pvpR .8s var(--ease) .3s both; }
.pvp-nm { font-family:'Sora',sans-serif;font-size:13px;font-weight:700; }
.pvp-rk { font-size:10px;color:var(--ink3);margin-top:2px; }
.pvp-sc { font-family:'Sora',sans-serif;font-size:24px;font-weight:900;margin-top:5px; }
.pvp-sc.lead { color:var(--pu); }
.pvp-vs-col { text-align:center; }
.vs-badge { width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--pu),var(--pk));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:13px;font-weight:900;color:#fff;margin:0 auto 8px;box-shadow:0 8px 22px rgba(107,78,255,.3);animation:vsPop .6s var(--ease) .5s both; }
.vs-timer { background:linear-gradient(135deg,var(--pu),var(--bl));color:#fff;border-radius:8px;padding:5px 10px;font-family:'Sora',sans-serif;font-size:12px;font-weight:800;display:inline-block;animation:tick 1s ease infinite; }
.pvp-dots { display:flex;justify-content:center;gap:7px;margin-top:6px; }
.pd { width:9px;height:9px;border-radius:50%;background:var(--bg2); }
.pd.win{background:var(--gn)}.pd.lose{background:var(--pk)}.pd.cur{background:var(--pu);animation:pulse 1.4s infinite}
.emotes { display:flex;justify-content:center;gap:8px;margin-top:14px; }
.emo { background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:6px 10px;font-size:16px;cursor:pointer;transition:all .18s; }
.emo:hover { transform:scale(1.24) rotate(-5deg); }
/* Skill mini-grid */
.skill-mini { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px; }
.sk { background:var(--bg);border-radius:var(--r2);padding:11px 8px;text-align:center;border:1.5px solid var(--border);transition:all .25s; }
.sk:hover { transform:translateY(-4px);border-color:var(--pu);background:var(--pu4);box-shadow:var(--sh); }
.sk-ic { font-size:20px;margin-bottom:5px; }
.sk h4 { font-family:'Sora',sans-serif;font-size:11px;font-weight:800;margin-bottom:2px; }
.sk p { font-size:10px;color:var(--ink3);margin:0; }

/* ═══════════════════════════════════════
   VIDEO GÜÇLEN
═══════════════════════════════════════ */
#video { background:rgba(255,255,255,.65); }
.vid-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,72px); align-items:center; }
/* CSS video screen mockup */
.vid-screen {
  background:linear-gradient(145deg,#1A1228,#251840);
  border-radius:var(--r3); overflow:hidden;
  box-shadow:var(--sh3); border:1.5px solid rgba(107,78,255,.25);
  animation:float 8s ease-in-out infinite 2s;
}
.vid-screen-bar {
  background:linear-gradient(90deg,#4A2FCC,#6B4EFF);
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.vid-screen-title { font-family:'Sora',sans-serif; font-size:12px; font-weight:800; color:#fff; }
.vid-screen-close { width:24px;height:24px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;cursor:pointer; }
.vid-content { padding:16px; }
.vid-text-block {
  background:rgba(255,255,255,.07); border-radius:10px; padding:14px;
  font-size:11px; color:rgba(255,255,255,.75); line-height:1.65;
  margin-bottom:12px;
}
.vid-text-block strong { color:rgba(255,255,255,.95); }
.vid-play-btn {
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  margin:0 auto 12px;cursor:pointer;border:2px solid rgba(255,255,255,.25);
  transition:all .2s;
}
.vid-play-btn:hover { background:rgba(255,255,255,.25); }
.vid-progress-bar { background:rgba(255,255,255,.12); border-radius:4px; height:5px; overflow:hidden; margin-bottom:6px; }
.vid-prog-fi { height:100%; background:linear-gradient(90deg,var(--gd),var(--pk)); border-radius:4px; --w:8%; animation:xpFill 2s var(--ease) 2s both; }
.vid-prog-info { display:flex;justify-content:space-between;font-family:'Sora',sans-serif;font-size:10px;color:rgba(255,255,255,.5);font-weight:600; }
.vid-warning { text-align:center; font-size:11px; color:rgba(255,255,255,.5); margin-top:8px; padding:6px; background:rgba(255,255,255,.05); border-radius:6px; }
/* Flow steps */
.flow-steps { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.fstep { display:flex;align-items:flex-start;gap:12px;padding:13px;border-radius:var(--r2);transition:all .25s; }
.fstep.active { background:var(--pu4);border:1.5px solid rgba(107,78,255,.2); }
.fs-ic { width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
.fstep h4 { font-family:'Sora',sans-serif;font-size:13px;font-weight:700;margin-bottom:3px; }
.fstep p { font-size:12px;color:var(--ink2);margin:0; }
.vid-feats { list-style:none; display:flex; flex-direction:column; gap:11px; }
.vid-feats li { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink2); }
.vf-ck { width:24px;height:24px;background:var(--gn3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;color:var(--gn); }

/* ═══════════════════════════════════════
   DEĞER KARŞILAŞTIRMA
═══════════════════════════════════════ */
#deger { }
.cnt-row { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:44px; }
.cnt-c { background:var(--card);border-radius:var(--r2);padding:20px 16px;text-align:center;border:1.5px solid var(--border);box-shadow:var(--sh0); }
.cnt-num { font-family:'Sora',sans-serif;font-size:clamp(26px,4vw,46px);font-weight:900; }
.cnt-c p { font-size:12px;color:var(--ink3);margin-top:4px; }
.dg-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.dg-c { border-radius:var(--r2); padding:26px; }
.dg-old { background:var(--bg2); border:1.5px solid var(--border); }
.dg-new { background:linear-gradient(145deg,var(--pu4),var(--bl3)); border:1.5px solid rgba(107,78,255,.2); }
.dg-hd { display:flex;align-items:center;gap:12px;margin-bottom:18px; }
.dg-hd span { font-size:22px; }
.dg-hd h3 { font-family:'Sora',sans-serif;font-size:16px;font-weight:800; }
.dg-items { list-style:none;display:flex;flex-direction:column;gap:9px; }
.dg-items li { display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2); }
.ci-x{color:var(--pk);font-size:15px} .ci-v{color:var(--gn);font-size:15px}
.dg-hl { background:linear-gradient(135deg,var(--pu),var(--bl));border-radius:var(--r3);padding:30px;text-align:center;color:#fff; }
.dg-hl h3 { font-family:'Sora',sans-serif;font-size:clamp(17px,2.5vw,26px);font-weight:900;color:#fff;margin-bottom:10px; }
.dg-hl p { font-size:14px;opacity:.88;max-width:520px;margin:0 auto;line-height:1.7; }

/* ═══════════════════════════════════════
   VELİLER
═══════════════════════════════════════ */
#veliler { background:rgba(255,255,255,.65); }
.vel-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:center; }
.vel-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vel-c { border-radius:var(--r2);padding:18px;border:1.5px solid var(--border);transition:all .28s var(--ease); }
.vel-c:hover { transform:translateY(-4px);border-color:rgba(107,78,255,.22);box-shadow:var(--sh2); }
.vel-c.v1{background:var(--pu4)} .vel-c.v2{background:var(--bl3)} .vel-c.v3{background:var(--gd3)} .vel-c.v4{background:var(--tl3)}
.vel-c .vic { font-size:22px; margin-bottom:8px; }
.vel-c h4 { font-family:'Sora',sans-serif;font-size:13px;font-weight:700;margin-bottom:5px; }
.vel-c p { font-size:12px;color:var(--ink2);margin:0; }
.vel-checklist { list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 26px; }
.vel-checklist li { display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink2); }
.vc-chk { width:24px;height:24px;background:var(--gn3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;color:var(--gn); }

/* ═══════════════════════════════════════
   FİYATLANDIRMA
═══════════════════════════════════════ */
#fiyat { }
.pr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.pr-c { background:var(--card);border-radius:var(--r3);padding:26px;border:1.5px solid var(--border);transition:all .32s var(--ease);position:relative; }
.pr-c:hover { transform:translateY(-7px);box-shadow:var(--sh3); }
.pr-c.feat { border-color:var(--pu);background:linear-gradient(145deg,var(--pu4),var(--bl3));box-shadow:0 12px 44px rgba(107,78,255,.12); }
.pr-badge { position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--pu),var(--bl));color:#fff;padding:4px 16px;border-radius:12px;font-family:'Sora',sans-serif;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px rgba(107,78,255,.3); }
.pr-name { font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px; }
.pr-amt { font-family:'Sora',sans-serif;font-size:38px;font-weight:900;color:var(--ink);margin-bottom:4px; }
.pr-per { font-size:13px;color:var(--ink3);margin-bottom:20px; }
.pr-feats { list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px; }
.pr-feats li { display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink2); }
.pf-ok { color:var(--gn);font-size:14px;flex-shrink:0; }
.pr-note { background:linear-gradient(135deg,var(--pu4),var(--bl3));border-radius:var(--r2);padding:20px;margin-top:22px;border:1.5px solid rgba(107,78,255,.15); }
.pr-note h4 { font-family:'Sora',sans-serif;font-size:15px;font-weight:700;margin-bottom:7px; }
.pr-note p { font-size:13px;color:var(--ink2);line-height:1.7; }

/* ═══════════════════════════════════════
   KAMPANYA
═══════════════════════════════════════ */
#kampanya { }
.kamp-block {
  background:linear-gradient(145deg,#FFF9EE,#F8F0FF,#EEF5FF);
  border-radius:var(--r4); padding:clamp(32px,6vw,60px);
  border:2px solid rgba(245,166,35,.2); position:relative; overflow:hidden;
  box-shadow:0 20px 72px rgba(245,166,35,.07);
}
.kamp-glow { position:absolute;width:380px;height:380px;background:radial-gradient(circle,rgba(245,166,35,.13),transparent 68%);border-radius:50%;top:-80px;right:70px;pointer-events:none; }
.kamp-inner { display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,6vw,60px);align-items:center;position:relative;z-index:2; }
.kamp-eye { display:inline-flex;align-items:center;gap:7px;background:rgba(245,166,35,.12);border:1.5px solid rgba(245,166,35,.28);color:#8A5700;padding:6px 13px;border-radius:18px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;margin-bottom:16px; }
.kamp-notice { background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid rgba(245,166,35,.2);border-radius:12px;padding:13px 15px;margin-top:16px;font-size:14px;color:var(--ink2);line-height:1.7; }
.kamp-notice strong { color:#7A4E00;font-family:'Sora',sans-serif; }
/* CSS iPad visual */
.ipad-wrap { position:relative;display:flex;justify-content:center; }
.ipad-device { width:clamp(170px,22vw,200px);height:clamp(230px,30vw,268px);background:linear-gradient(145deg,#EDE8FF,#fff);border-radius:22px;border:2.5px solid rgba(107,78,255,.22);box-shadow:var(--sh3);display:flex;align-items:center;justify-content:center;animation:float 7s ease-in-out infinite; }
.ipad-inner { width:88%;height:90%;background:linear-gradient(145deg,#EAE0FF,#E2ECFF);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px; }
.ipad-ico { font-size:clamp(40px,6vw,50px); }
.ipad-ttl { font-family:'Sora',sans-serif;font-size:clamp(20px,3vw,24px);font-weight:900;color:var(--ink); }
.ipad-sub { font-size:11px;color:var(--ink3);text-align:center; }
.ipad-lk { background:linear-gradient(135deg,var(--gd),#FF8C47);color:#fff;padding:6px 12px;border-radius:10px;font-family:'Sora',sans-serif;font-size:11px;font-weight:800;animation:pulse 2s infinite; }
/* sparkle */
.sp { position:absolute;border-radius:50%;animation:blink var(--sd,2s) ease-in-out infinite;animation-delay:var(--sl,0s); }

/* ═══════════════════════════════════════
   SSS
═══════════════════════════════════════ */
#sss { background:rgba(255,255,255,.65); }
.faq-list { max-width:700px;margin:0 auto; }
.fi { background:var(--card);border-radius:var(--r2);margin-bottom:9px;border:1.5px solid var(--border);overflow:hidden;transition:border-color .25s; }
.fi.open { border-color:rgba(107,78,255,.28); }
.fq { display:flex;align-items:center;justify-content:space-between;padding:17px 20px;cursor:pointer;gap:14px;user-select:none; }
.fq h4 { font-family:'Sora',sans-serif;font-size:15px;font-weight:700;flex:1;color:var(--ink); }
.fi-btn { width:28px;height:28px;border-radius:50%;background:var(--pu4);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--pu);flex-shrink:0;transition:all .3s var(--ease);border:none;cursor:pointer;-webkit-appearance:none; }
.fi.open .fi-btn { transform:rotate(45deg);background:var(--pu);color:#fff; }
.fa { max-height:0;overflow:hidden;transition:max-height .45s var(--ease); }
.fi.open .fa { max-height:280px; }
.fa-in { padding:0 20px 17px;font-size:14px;color:var(--ink2);line-height:1.75; }

/* ═══════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════ */
#cta { }
.cta-block {
  background:linear-gradient(135deg,var(--pu),var(--bl) 50%,var(--tl));
  border-radius:var(--r4); padding:clamp(52px,8vw,92px) clamp(28px,6vw,76px);
  text-align:center; position:relative; overflow:hidden;
  box-shadow:0 22px 72px rgba(107,78,255,.25);
}
.cta-block::before { content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='50' cy='10' r='2'/%3E%3Ccircle cx='10' cy='50' r='2'/%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none; }
.cta-block h2 { color:#fff;font-size:clamp(24px,4vw,48px);font-weight:900;margin-bottom:14px;position:relative; }
.cta-block p  { color:rgba(255,255,255,.86);font-size:clamp(15px,1.5vw,18px);max-width:460px;margin:0 auto 32px;line-height:1.72;position:relative; }
.cta-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer { border-top:1px solid var(--border);padding:clamp(36px,6vw,60px) 0 clamp(22px,4vw,32px); }
.ft-grid { display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(18px,4vw,36px);margin-bottom:clamp(28px,5vw,48px); }
/* Footer logo */
.ft-logo { display:flex; align-items:center; cursor:pointer; margin-bottom:12px; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.ft-logo:hover { transform:scale(1.04); }
.ft-logo-img {
  height:26px; width:auto; display:block;
  mix-blend-mode:multiply;
  filter:brightness(0.94) contrast(1.04);
  transition:filter .22s;
  -webkit-user-drag:none; user-select:none;
}
.ft-logo:hover .ft-logo-img { filter:brightness(0.88) contrast(1.06); }
/* Footer logo fallback */
.ft-logo-mark { width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--pu),var(--bl));display:flex;align-items:center;justify-content:center;font-size:14px; }
.ft-logo-text { font-family:'Sora',sans-serif;font-weight:900;font-size:17px;color:var(--ink); }
.ft-brand p { font-size:13px;color:var(--ink3);line-height:1.7;max-width:210px; }
.ft-col h4 { font-family:'Sora',sans-serif;font-size:12px;font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:.04em; }
.ft-col ul { list-style:none;display:flex;flex-direction:column;gap:8px; }
.ft-col ul li a,.ft-col ul li button { font-size:13px;color:var(--ink3);background:transparent;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;padding:0;text-decoration:none;transition:color .2s;text-align:left; }
.ft-col ul li a:hover,.ft-col ul li button:hover { color:var(--pu); }
.ft-btm { border-top:1px solid var(--border);padding-top:18px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink3);flex-wrap:wrap;gap:8px; }

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.moverlay {
  position:fixed;inset:0;z-index:1000;
  background:rgba(28,23,16,.48);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  display:none;align-items:center;justify-content:center;padding:20px;
  overscroll-behavior:contain;
}
.moverlay.open { display:flex; }
.mcard {
  background:var(--bg);border-radius:var(--r4);
  padding:clamp(24px,4vw,40px);max-width:440px;width:100%;
  position:relative;box-shadow:0 32px 100px rgba(28,23,16,.2);
  border:1.5px solid var(--border);
  max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
@keyframes mIn { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }
.moverlay.open .mcard { animation:mIn .45s var(--ease) both; }
.mcls { position:absolute;top:15px;right:15px;width:32px;height:32px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--ink2);-webkit-appearance:none; }
.mcls:hover { background:var(--pu4);color:var(--pu); }
.m-logo { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.m-logo-mark { width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--pu),var(--bl));display:flex;align-items:center;justify-content:center;font-size:14px; }
.m-logo span { font-family:'Sora',sans-serif;font-weight:900;font-size:17px;color:var(--ink); }
.m-title { font-family:'Sora',sans-serif;font-size:21px;font-weight:800;margin-bottom:4px; }
.m-sub { font-size:14px;color:var(--ink3);margin-bottom:22px; }
/* Social buttons */
.soc-btns { display:flex;flex-direction:column;gap:9px;margin-bottom:18px; }
.soc-btn { display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .22s;-webkit-appearance:none; }
.soc-btn:hover { border-color:var(--pu);background:var(--pu4);color:var(--pu); }
.soc-icon { width:20px;height:20px;flex-shrink:0; }
.or-sep { display:flex;align-items:center;gap:10px;margin-bottom:16px; }
.or-sep::before,.or-sep::after { content:'';flex:1;height:1px;background:var(--border); }
.or-sep span { font-size:12px;color:var(--ink3);font-weight:600;white-space:nowrap; }
/* Form */
.fg { margin-bottom:12px; }
.fg label { display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:4px;font-family:'Sora',sans-serif; }
.fg input,.fg select {
  width:100%;height:44px;padding:0 13px;
  border:1.5px solid var(--border);border-radius:11px;
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink);
  background:var(--card);transition:border-color .2s,box-shadow .2s;outline:none;
  -webkit-appearance:none;appearance:none;
}
.fg input:focus,.fg select:focus { border-color:var(--pu);box-shadow:0 0 0 3px rgba(107,78,255,.1); }
.fg-row { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.fcks { margin:13px 0;display:flex;flex-direction:column;gap:9px; }
.fck { display:flex;align-items:flex-start;gap:9px;cursor:pointer; }
.fck input { width:17px;height:17px;accent-color:var(--pu);margin-top:2px;flex-shrink:0;cursor:pointer; }
.fck span { font-size:12px;color:var(--ink2);line-height:1.55; }
.fck a { color:var(--pu);text-decoration:none;font-weight:600; }
.m-link { font-size:13px;color:var(--ink3);text-align:center;margin-top:12px; }
.m-link a { color:var(--pu);text-decoration:none;font-weight:600; }
.forgot { display:block;text-align:right;font-size:13px;color:var(--pu);font-weight:600;text-decoration:none;margin-top:-4px;margin-bottom:13px; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */

/* ── Tablet portrait / small laptop (768 – 1100px) ──
   Hero stacks; phone appears centered below text,
   smaller but still present. Keep 2 floating badges. */
@media (max-width:1100px) {
  /* hero */
  .hero-grid  { grid-template-columns:1fr; }
  .phone-col  { display:flex; justify-content:center; margin-top:48px; }
  .phone-scene{ padding:16px 56px; }   /* was 20px 70px — reduce to avoid overflow */
  .phone      { width:clamp(230px,56vw,280px); }
  /* Tablet badges: keep top-right XP + bottom-right streak only */
  .fb-c, .fb-d { display:none; }
  .fb-a { top:14px; right:-8px; }
  .fb-b { bottom:42px; right:-10px; }
  /* other grids */
  .about-grid { grid-template-columns:1fr; }
  .ak-grid    { grid-template-columns:1fr; }
  .pvp-grid   { grid-template-columns:1fr; }
  .vid-grid   { grid-template-columns:1fr; }
  .vel-grid   { grid-template-columns:1fr; }
  .kamp-inner { grid-template-columns:1fr; text-align:center; }
  .kamp-inner .ipad-wrap { justify-content:center; }
  .kamp-inner .kamp-eye  { margin:0 auto 16px; }
  .tiers      { grid-template-columns:repeat(4,1fr); }
}

/* ── Mobile landscape / wide portrait (641 – 900px) ── */
@media (max-width:900px) {
  .games-grid { grid-template-columns:1fr 1fr; }
  .pr-grid    { grid-template-columns:1fr 1fr; }
  .cnt-row    { grid-template-columns:1fr 1fr; }
  .ft-grid    { grid-template-columns:1fr 1fr; }
  .nav-links  { display:none; }
  .ham        { display:flex; }
}

/* ── Mobile portrait (481 – 640px) ──
   Phone stays visible but smaller; only XP badge shown. */
@media (max-width:640px) {
  .games-grid  { grid-template-columns:1fr; }
  .pr-grid     { grid-template-columns:1fr; }
  .dg-cards    { grid-template-columns:1fr; }
  .tiers       { grid-template-columns:1fr 1fr; }
  .about-cards { grid-template-columns:1fr 1fr; }
  .vel-cards   { grid-template-columns:1fr 1fr; }
  .ft-grid     { grid-template-columns:1fr 1fr; }
  .cnt-row     { grid-template-columns:1fr 1fr; }
  .fg-row      { grid-template-columns:1fr; }
  .hero-btns   { flex-direction:column; }
  .hero-btns .btn { width:100%; }
  .cta-btns    { flex-direction:column; align-items:center; }
  .pvp-pls     { gap:8px; }
  .pvp-av      { width:50px; height:50px; font-size:24px; }
  /* Hero phone: smaller, reduced padding, only 1 badge */
  .phone-col   { margin-top:36px; }
  .phone-scene { padding:12px 40px; }
  .phone       { width:clamp(216px,70vw,252px); }
  /* Hide streak badge on mobile, keep XP */
  .fb-b { display:none; }
  .fb-a { top:12px; right:-6px; font-size:10px; padding:6px 10px; border-radius:11px; }
}

/* ── Small mobile (≤ 480px) ──
   Full phone hidden; phone-mini card shown instead. */
@media (max-width:480px) {
  .about-cards { grid-template-columns:1fr 1fr; }
  .vel-cards   { grid-template-columns:1fr 1fr; }
  /* Switch to mini card */
  .phone-scene { display:none; }
  .phone-mini  { display:flex; }
  /* Reduce hero top spacing so mini card doesn't push content far down */
  .phone-col   { margin-top:28px; }
}

/* ── Tiny mobile (≤ 400px) ── */
@media (max-width:400px) {
  .about-cards { grid-template-columns:1fr; }
  .vel-cards   { grid-template-columns:1fr; }
  .tiers       { grid-template-columns:1fr 1fr; }
  .skill-mini  { grid-template-columns:repeat(2,1fr); }
  .phone-mini  { padding:12px; }
}

/* Small height landscape — avoid nav overlap */
@media (max-height:600px) and (orientation:landscape) {
  #hero        { min-height:auto; padding-top:90px; padding-bottom:48px; }
  .phone-col   { margin-top:20px; }
  .phone       { width:clamp(180px,30vw,220px); }
}

/* ═══════════════════════════════════════
   PHONE-MINI — compact app card (≤ 480px)
═══════════════════════════════════════ */
.phone-mini {
  display:none; /* shown via media query above */
  background:linear-gradient(145deg,#EDE8FF,#F0EEFF);
  border-radius:20px;
  padding:14px 16px;
  border:2px solid rgba(107,78,255,.2);
  box-shadow:0 8px 32px rgba(107,78,255,.18), 0 0 0 1px rgba(255,255,255,.65) inset;
  width:100%; max-width:380px; margin:0 auto;
  position:relative; overflow:hidden;
  animation:float 6s ease-in-out infinite;
  flex-direction:column; gap:10px;
}
/* Shimmer sweep across mini card */
.phone-mini::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  background-size:200% 100%;
  animation:shimmer 4s ease-in-out infinite;
  border-radius:18px;
}
/* Top row: avatar + name + currencies */
.pm-top {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(120deg,#A6C8FF,#C4AEFF);
  border-radius:13px; padding:9px 11px; margin-bottom:2px;
}
.pm-av {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--gd),#C87800);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; border:2px solid rgba(255,255,255,.7); flex-shrink:0;
}
.pm-info { flex:1; }
.pm-name { font-family:'Sora',sans-serif; font-size:11px; font-weight:800; color:var(--ink); display:block; margin-bottom:1px; }
.pm-sub  { font-size:9px; color:var(--ink2); font-weight:500; }
.pm-currs { display:flex; gap:5px; }
.pm-cur {
  display:flex; align-items:center; gap:3px;
  background:rgba(255,255,255,.72); border-radius:8px;
  padding:3px 7px; font-family:'Sora',sans-serif;
  font-size:10px; font-weight:800;
}
.pm-cur.g { color:#7A4E00; } .pm-cur.d { color:var(--bl); }
/* XP bar */
.pm-xp {
  background:#fff; border-radius:10px; padding:9px 11px;
}
.pm-xp-lbl { display:flex; justify-content:space-between; font-size:9px; font-family:'Sora',sans-serif; font-weight:700; color:var(--ink2); margin-bottom:4px; }
.pm-xp-track { height:7px; background:rgba(28,23,16,.07); border-radius:5px; overflow:hidden; margin-bottom:7px; }
.pm-xp-fill  { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--pu),var(--bl)); --w:72%; animation:xpFill 1.8s var(--ease) 1s both; }
/* Progress rows */
.pm-progs { display:flex; flex-direction:column; gap:5px; }
.pm-prow  { display:flex; align-items:center; gap:6px; font-size:9px; font-family:'Sora',sans-serif; font-weight:600; color:var(--ink); }
.pm-prow .pm-pbar { flex:1; height:5px; background:rgba(28,23,16,.06); border-radius:4px; overflow:hidden; }
.pm-prow .pm-pbfi { height:100%; border-radius:4px; animation:xpFill 1.5s cubic-bezier(.34,1.38,.64,1) 1.2s both; }
.pm-prow .pm-pct  { width:24px; text-align:right; color:var(--ink3); }
/* Mini play buttons */
.pm-btns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-top:2px; }
.pm-btn  { border-radius:9px; padding:7px 6px; text-align:center; font-family:'Sora',sans-serif; font-size:9px; font-weight:800; color:#fff; }
.pm-btn.pak { background:linear-gradient(145deg,#2ECC71,#00A860); }
.pm-btn.poy { background:linear-gradient(145deg,#FF9A3C,#FF6000); }
.pm-btn.ppv { background:linear-gradient(145deg,#FF6B9D,#CC1A60); }
/* XP badge inside mini card */
.pm-badge {
  position:absolute; top:10px; right:10px;
  background:linear-gradient(135deg,#fff,var(--pu4));
  border:1.5px solid rgba(107,78,255,.2);
  border-radius:11px; padding:5px 10px;
  font-family:'Sora',sans-serif; font-size:10px; font-weight:800; color:var(--pu);
  display:flex; align-items:center; gap:5px;
  box-shadow:0 3px 10px rgba(107,78,255,.12);
  animation:float2 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════
   UTILITIES + SOUL + ENERGY + FLOW
═══════════════════════════════════════ */
.bg-w { background:rgba(255,255,255,.65); }

/* ── Spring lift on primary button — feels physical ── */
.btn { transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .28s var(--ease), background .2s; }
.btn-p:hover { transform:translateY(-4px) scale(1.01); box-shadow:0 18px 52px rgba(107,78,255,.38); }
.btn-s:hover { transform:translateY(-3px) scale(1.005); box-shadow:var(--sh2); }

/* ── Phone halo — breathing glow behind device ── */
.phone-scene::before { animation:haloBreathe 6s ease-in-out infinite; }

/* ── Visual hierarchy — key sections breathe more ── */
#akademi { padding-top:clamp(80px,10vw,124px); padding-bottom:clamp(80px,10vw,124px); }
#pvp     { padding-top:clamp(80px,10vw,124px); padding-bottom:clamp(80px,10vw,124px); }
#oyun    { padding-top:clamp(72px,9vw,112px); padding-bottom:clamp(72px,9vw,112px); }

/* ── Featured pricing card — living glow border ── */
.pr-c.feat { animation:featuredPulse 3.5s ease-in-out infinite; }

/* ── Connector lines pulse — narrative rhythm ── */
.connector::before { animation:connPulse 3.5s ease-in-out infinite; }

/* ── About quote — left border breathes color ── */
.about-quote { animation:quotePulse 5s ease-in-out infinite; }

/* ── Section dividers — softly lit with purple warmth ── */
.divider {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,78,255,.16) 30%,rgba(107,78,255,.16) 70%,transparent);
  margin:0 clamp(18px,5vw,44px);
  animation:connPulse 7s ease-in-out infinite;
}

/* ── Floating badge reward glow ── */
.fb-a { animation:float2 4.2s ease-in-out infinite, rewardGlow 4s ease-in-out infinite 1s; }
.fb-b { animation:float2 5.1s ease-in-out infinite .7s, rewardGlowGold 4.5s ease-in-out infinite 1.5s; }

/* ── Animated reward chips ── */
.ak-chip.popped { animation:chipPop .55s var(--ease) both; }
.ak-chip.popped.d1 { animation-delay:.1s; }
.ak-chip.popped.d2 { animation-delay:.22s; }
.ak-chip.popped.d3 { animation-delay:.34s; }

/* ── Game art — slow living gradient shift ── */
.ga-tr { background:linear-gradient(145deg,#3A20B8 0%,#6B40EE 45%,#A880FF 100%); background-size:200% 200%; animation:gradientShift 8s ease infinite; }
.ga-mt { background:linear-gradient(145deg,#1A1008 0%,#3D2A00 40%,#8A6020 100%); background-size:200% 200%; animation:gradientShift 10s ease infinite; }
.ga-fn { background:linear-gradient(145deg,#0A2420 0%,#103830 45%,#1A6050 100%); background-size:200% 200%; animation:gradientShift 9s ease infinite; }

/* ── Game card hover — stronger elevation ── */
.game-card:hover { transform:translateY(-12px) scale(1.015); box-shadow:0 28px 80px rgba(28,23,16,.16), 0 0 0 1px rgba(107,78,255,.08); }

/* ── PVP VS badge — sustained glow when visible ── */
.pvp-ready .vs-badge { animation:vsGlow 2.4s ease-in-out infinite; }

/* ── PVP timer urgency ── */
.vs-timer { animation:tick 1s ease infinite, timerUrge 2s ease-in-out infinite; }

/* ── PVP score emphasis ── */
.pvp-sc.lead { animation:scoreEmphasis 2.8s ease-in-out infinite; }

/* ── Academy active book — warm persistent glow ── */
.ak-book:first-child { animation:rewardGlow 4s ease-in-out infinite 1.5s; }

/* ── Academy locked book — shimmer across ── */
.ak-book:has(.bk-lock) { position:relative; overflow:hidden; }
.ak-book:has(.bk-lock)::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%); background-size:200% 100%; animation:unlockShimmer 3s ease-in-out infinite; pointer-events:none; }

/* ── Academy active book — star sparkle ── */
.bk-stars { animation:starPulse 2.5s ease-in-out infinite; }

/* ── Skill icon micro-bounce on hover ── */
.sk:hover .sk-ic { display:inline-block; animation:coinBob .5s cubic-bezier(.34,1.56,.64,1); }

/* ── FAQ accordion — smoother cubic decay ── */
.fa { max-height:0; overflow:hidden; transition:max-height .52s cubic-bezier(0,1,.55,1); }
.fi.open .fa { max-height:300px; }

/* ── Floating Akademi decorations ── */
.ak-floater { position:absolute; pointer-events:none; z-index:0; font-size:clamp(18px,2.5vw,26px); opacity:.18; will-change:transform; }
.ak-floater-1 { right:clamp(20px,5%,60px); top:clamp(30px,8%,80px); animation:coinBob 4.2s ease-in-out infinite; }
.ak-floater-2 { right:clamp(50px,12%,120px); top:clamp(120px,25%,200px); animation:coinBob 5.5s ease-in-out infinite 1.1s; }
.ak-floater-3 { left:clamp(10px,3%,40px); bottom:clamp(40px,10%,80px); animation:starPulse 3.8s ease-in-out infinite .6s; }

/* ── PVP entrance ── */
.pvp-av.p1 { opacity:0; transform:translateX(-48px) scale(.9); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.pvp-av.p2 { opacity:0; transform:translateX(48px) scale(.9); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.vs-badge  { opacity:0; transform:scale(0) rotate(-15deg); transition:opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s; }
.pvp-ready .pvp-av.p1 { opacity:1; transform:none; }
.pvp-ready .pvp-av.p2 { opacity:1; transform:none; transition-delay:.1s; }
.pvp-ready .vs-badge  { opacity:1; transform:none; }
.duel-card.pvp-ready  { box-shadow:var(--sh2), 0 0 0 1.5px rgba(107,78,255,.1); }

/* ── Campaign sparkles ── */
.sp { position:absolute; border-radius:50%; animation:sparkleKf var(--sd,2s) ease-in-out infinite; animation-delay:var(--sl,0s); }

/* ── Lock button shimmer ── */
.btn-lk::after { content:'🔒'; position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:14px; animation:lockShake 2.8s ease-in-out infinite; }

/* ── Counter card entrance ── */
.cnt-c.cnt-animated { animation:cntUp .6s var(--ease) both; }
.cnt-c.cnt-animated:nth-child(1){animation-delay:.05s}
.cnt-c.cnt-animated:nth-child(2){animation-delay:.12s}
.cnt-c.cnt-animated:nth-child(3){animation-delay:.19s}
.cnt-c.cnt-animated:nth-child(4){animation-delay:.26s}

/* ── About/vel cards — tactile hover ── */
.about-card:hover { transform:translateY(-5px); box-shadow:var(--sh2); border-color:rgba(107,78,255,.22); background:var(--pu4); }
.vel-c:hover      { transform:translateY(-4px); box-shadow:var(--sh2); }

/* ── CTA block — very slow living gradient ── */
.cta-block {
  background:linear-gradient(135deg,var(--pu) 0%,var(--bl) 45%,var(--tl) 100%);
  background-size:200% 200%;
  animation:gradientShift 14s ease infinite;
}

/* ── Streak fire emoji in badges ── */
.fb-b .fb-fire { display:inline-block; animation:streakFire 1.6s ease-in-out infinite; }

/* Mobile: scale back continuous animations for perf ── */
@media(max-width:768px) {
  .ak-floater { display:none; }
  /* Disable heavy continuous animations on mobile for performance */
  .xp-fi       { animation:xpFill 1.8s var(--ease) 1s both; }
  .daily        { animation:none; }
  .curr.g       { animation:none; }
  .pb-pv        { animation:none; }
  .pr-c.feat    { animation:none; box-shadow:0 12px 44px rgba(107,78,255,.12); }
  .cta-block    { animation:none; }
  .about-quote  { animation:none; }
  .connector::before { animation:none; }
}


/* ── Oyun kartı cover görselleri ── */
.game-art-cover {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
  z-index:0;
}
.game-card:hover .game-art-cover { transform:scale(1.05); }

.game-art-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(
    to right,
    rgba(8,4,20,.80) 0%,
    rgba(8,4,20,.50) 38%,
    rgba(8,4,20,.12) 65%,
    transparent 100%
  );
}
.game-art .game-tag,
.game-art [style*="z-index:2"],
.game-art .gem-grid,
.game-art .game-art-title,
.game-art .game-art-sub { position:relative; z-index:3; }

/* ── Backlight wrapper: TürkçEbe (mor) ── */
.turkcebe-card-wrap { position:relative; overflow:visible; }
.turkcebe-card-wrap::before {
  content:''; position:absolute; inset:-28px; border-radius:34px;
  background:radial-gradient(ellipse at 50% 60%,rgba(124,58,237,.40) 0%,rgba(139,92,246,.20) 40%,rgba(107,78,255,.08) 58%,transparent 76%);
  filter:blur(24px); opacity:0; transform:scale(.96);
  transition:opacity .45s ease,transform .45s ease; z-index:0; pointer-events:none;
}
.turkcebe-card-wrap:hover::before { opacity:1; transform:scale(1); }
.turkcebe-card-wrap > .game-card { position:relative; z-index:1; }

/* ── Backlight wrapper: DeparMatik (turuncu) ── */
.deparmatik-card-wrap { position:relative; overflow:visible; }
.deparmatik-card-wrap::before {
  content:''; position:absolute; inset:-28px; border-radius:34px;
  background:radial-gradient(ellipse at 50% 60%,rgba(251,146,60,.38) 0%,rgba(245,158,11,.18) 40%,rgba(234,88,12,.07) 58%,transparent 76%);
  filter:blur(24px); opacity:0; transform:scale(.96);
  transition:opacity .45s ease,transform .45s ease; z-index:0; pointer-events:none;
}
.deparmatik-card-wrap:hover::before { opacity:1; transform:scale(1); }
.deparmatik-card-wrap > .game-card { position:relative; z-index:1; }

/* ── Backlight wrapper: MotiFen (yeşil) ── */
.motifen-card-wrap { position:relative; overflow:visible; }
.motifen-card-wrap::before {
  content:''; position:absolute; inset:-28px; border-radius:34px;
  background:radial-gradient(ellipse at 50% 60%,rgba(16,185,129,.38) 0%,rgba(5,150,105,.18) 40%,rgba(0,212,170,.07) 58%,transparent 76%);
  filter:blur(24px); opacity:0; transform:scale(.96);
  transition:opacity .45s ease,transform .45s ease; z-index:0; pointer-events:none;
}
.motifen-card-wrap:hover::before { opacity:1; transform:scale(1); }
.motifen-card-wrap > .game-card { position:relative; z-index:1; }

/* ── iPad kampanya görseli ── */
.ipad-wrap { position:relative; display:flex; justify-content:center; align-items:center; margin:-10px -20px; }
.ipad-img { width:clamp(280px,40vw,460px); height:auto; display:block; -webkit-user-drag:none; user-select:none; animation:float 7s ease-in-out infinite; }

/* ── FIX-1: phone-mini mobil görünürlük garantisi ── */
@media (max-width:480px) {
  .phone-scene { display:none !important; }
  .phone-mini  { display:flex !important; }
}

/* ── FIX-2: prefers-reduced-motion — hareket hassasiyeti desteği ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}