/* ==========================================================================
   startfen | Şans Çarkı  —  mobil öncelikli tek sayfa oyun
   ========================================================================== */

:root{
  --bg0:#05070F;
  --bg1:#0E1530;
  --bg2:#16204A;
  --gold:#FFC01F;
  --gold-acik:#FFE58A;
  --gold-koyu:#C98A00;
  --turkuaz:#4FC3E4;
  --mavi:#2E7BD6;
  --beyaz:#FFFFFF;
  --sis:rgba(255,255,255,.62);

  /* JS tarafından ölçülüp yazılır */
  --R:120px;
  --cw:70px;
  --ch:90px;
  --hiz:0;        /* çarkın anlık hızı, 0–1 */

  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  font-family:var(--yazi);
  color:var(--beyaz);
  background:var(--bg0);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

img{ -webkit-user-drag:none; user-select:none; }

/* --------------------------------------------------------------- iskelet */

.app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:560px;
  margin-inline:auto;
  padding:
    calc(env(safe-area-inset-top) + 10px)
    14px
    calc(env(safe-area-inset-bottom) + 8px);
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(46,123,214,.26) 0%, rgba(46,123,214,0) 60%),
    linear-gradient(178deg, var(--bg1) 0%, var(--bg0) 62%, #03050C 100%);
  overflow:hidden;
}

/* kapaklardaki noktalı doku */
.app::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.055) 1.1px, transparent 1.2px);
  background-size:18px 18px;
  pointer-events:none;
}

/* kenarları koyulaştıran vinyet — çarkı öne çıkarır */
.app::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:radial-gradient(115% 78% at 50% 46%, transparent 46%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

.app.sars{ animation:sars .36s ease-out; }
@keyframes sars{
  0%,100%{ transform:translate(0,0) }
  18%{ transform:translate(-3px, 2px) }
  36%{ transform:translate(3px,-2px) }
  56%{ transform:translate(-2px,-1px) }
  78%{ transform:translate(2px, 1px) }
}

/* --------------------------------------------------- arka plan katmanları */

/* yavaşça süzülen renk bulutları (blur filtresi yok, bedava) */
.aura{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aura i{
  position:absolute;
  display:block;
  border-radius:50%;
  will-change:transform;
}
.aura .a1{
  width:78vw; height:78vw; left:-24vw; top:4vh;
  background:radial-gradient(circle, rgba(46,123,214,.42) 0%, rgba(46,123,214,0) 68%);
  animation:suzul1 24s ease-in-out infinite;
}
.aura .a2{
  width:70vw; height:70vw; right:-22vw; top:26vh;
  background:radial-gradient(circle, rgba(255,192,31,.24) 0%, rgba(255,192,31,0) 68%);
  animation:suzul2 31s ease-in-out infinite;
}
.aura .a3{
  width:64vw; height:64vw; left:12vw; bottom:-14vh;
  background:radial-gradient(circle, rgba(79,195,228,.20) 0%, rgba(79,195,228,0) 68%);
  animation:suzul3 27s ease-in-out infinite;
}
@keyframes suzul1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(9vw,6vh) scale(1.12) } }
@keyframes suzul2{ 0%,100%{ transform:translate(0,0) scale(1.06) } 50%{ transform:translate(-8vw,-7vh) scale(1) } }
@keyframes suzul3{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(6vw,-8vh) scale(1.14) } }

/* süzülen altın tozu */
.zemin{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}

/* ------------------------------------------------------------------- üst */

.top{
  position:relative;
  z-index:3;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
}

.logo{
  height:32px;
  width:auto;
  display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}

.ses{
  width:38px; height:38px;
  flex:0 0 auto;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:var(--beyaz);
  cursor:pointer;
  padding:0;
  transition:background .18s, transform .12s;
}
.ses:active{ transform:scale(.9); }
.ses svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ses .ses-govde{ fill:currentColor; stroke:none; }
.ses .ses-carpi{ opacity:0; }
.ses[aria-pressed="false"]{ color:var(--sis); }
.ses[aria-pressed="false"] .ses-dalga{ opacity:0; }
.ses[aria-pressed="false"] .ses-carpi{ opacity:1; }

/* -------------------------------------------------------------- başlıklar */

.basliklar{
  position:relative;
  z-index:3;
  text-align:center;
  flex:0 0 auto;
  padding:10px 0 4px;
}

.basliklar h1{
  margin:0;
  font-size:clamp(21px, 6.4vw, 30px);
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.1;
  text-shadow:0 3px 18px rgba(0,0,0,.5);
}
.basliklar h1 em{
  font-style:normal;
  background:linear-gradient(100deg,
    var(--gold-koyu) 0%, var(--gold) 26%, #FFF7D6 44%, var(--gold) 62%, var(--gold-koyu) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:parilti 6s ease-in-out infinite;
}
@keyframes parilti{
  0%,100%{ background-position:130% 0 }
  50%{ background-position:-50% 0 }
}

.basliklar p{
  margin:6px 0 0;
  font-size:clamp(12px, 3.5vw, 14px);
  color:var(--sis);
  letter-spacing:.01em;
  min-height:1.2em;
  transition:color .25s;
}
.basliklar p.vurgu{ color:var(--gold-acik); }

/* ------------------------------------------------------------------ çark */

.stage{
  position:relative;
  z-index:3;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  display:grid;
  place-items:center;
}

/* çarkın arkasındaki ışık — hız arttıkça güçlenir */
.halo{
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--R) * 2.5);
  height:calc(var(--R) * 2.5);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,192,31,.22) 0%, rgba(255,192,31,.06) 42%, transparent 68%);
  opacity:calc(.55 + var(--hiz) * .45);
  pointer-events:none;
}

/* kapakların üzerinde durduğu ince altın halka */
.ring{
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--R) * 2);
  height:calc(var(--R) * 2);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px dashed rgba(255,192,31,.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 40px rgba(255,192,31,.12);
  pointer-events:none;
}

/* halkanın üzerinde dönen ışık süpürmesi */
.ring-isik{
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--R) * 2 + 18px);
  height:calc(var(--R) * 2 + 18px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,192,31,0)    0deg,
    rgba(255,192,31,.55) 28deg,
    rgba(255,247,214,.95) 42deg,
    rgba(255,192,31,.55) 56deg,
    rgba(255,192,31,0)   92deg,
    rgba(255,192,31,0)  188deg,
    rgba(79,195,228,.42) 214deg,
    rgba(255,192,31,0)  252deg,
    rgba(255,192,31,0)  360deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px));
  opacity:calc(.30 + var(--hiz) * .70);
  animation:donRing 9s linear infinite;
  pointer-events:none;
}
@keyframes donRing{
  from{ transform:translate(-50%,-50%) rotate(0deg) }
  to  { transform:translate(-50%,-50%) rotate(360deg) }
}

.orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
  will-change:filter;
}

/* --- kapak kartları --- */

.kart{
  position:absolute;
  left:50%; top:50%;
  width:var(--cw);
  height:var(--ch);
  margin:0;
  border-radius:7px;
  background:#fff;
  overflow:hidden;
  box-shadow:
    0 6px 14px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.18);
  will-change:transform;
  transform-origin:50% 50%;
}

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

/* ara ara geçen cam parıltısı */
.kart::before{
  content:"";
  position:absolute; inset:-20% -60%;
  z-index:2;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.62) 50%, transparent 62%);
  transform:translateX(-115%);
  pointer-events:none;
  animation:kartParla 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * .42s);
}
@keyframes kartParla{
  0%, 84%{ transform:translateX(-115%) }
  95%,100%{ transform:translateX(115%) }
}

/* kartın rengini taşıyan alt şerit */
.kart::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  height:4px;
  background:var(--renk, var(--gold));
}

/* ibrenin altındaki kart */
.kart.hot{
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 0 2px var(--gold),
    0 0 22px rgba(255,192,31,.6);
}

/* kazanan kart, sonuç ekranı açılmadan önce */
.kart.kazandi{
  animation:kazandi .62s cubic-bezier(.2,1.5,.4,1) 2;
  z-index:4;
}
@keyframes kazandi{
  0%,100%{ box-shadow:0 10px 22px rgba(0,0,0,.55), 0 0 0 2px var(--gold), 0 0 22px rgba(255,192,31,.6) }
  45%{ box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 0 4px var(--gold-acik), 0 0 46px rgba(255,192,31,.95) }
}

/* --- yerine oturunca açılan altın halkalar --- */

.patlama{
  position:absolute;
  left:50%;
  top:calc(50% - var(--R));
  width:0; height:0;
  z-index:4;
  pointer-events:none;
}
.patlama.aktif::before,
.patlama.aktif::after{
  content:"";
  position:absolute;
  left:0; top:0;
  border-radius:50%;
  border:3px solid var(--gold);
  transform:translate(-50%,-50%);
  animation:halkaAc .95s cubic-bezier(.15,.7,.3,1) forwards;
}
.patlama.aktif::after{
  border-color:rgba(255,255,255,.75);
  border-width:2px;
  animation-delay:.14s;
}
@keyframes halkaAc{
  from{ width:24px; height:24px; opacity:.95 }
  to  { width:260px; height:260px; opacity:0 }
}

/* --- ibre --- */

.ibre{
  position:absolute;
  left:50%;
  top:calc(50% - var(--R) - var(--ch) / 2 - 15px);
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.ibre i{
  display:block;
  width:0; height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:17px solid var(--gold);
  transform-origin:50% 0;
}
.ibre::after{
  content:"";
  position:absolute;
  left:50%; top:-9px;
  width:14px; height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg, var(--gold-acik), var(--gold-koyu));
  box-shadow:0 0 12px rgba(255,192,31,.7);
}
.ibre.carp i{ animation:carp .19s cubic-bezier(.3,1.6,.5,1); }
@keyframes carp{
  0%{ transform:rotate(0deg) }
  35%{ transform:rotate(-14deg) }
  100%{ transform:rotate(0deg) }
}

/* --- ortadaki buton --- */

.spin{
  position:relative;
  z-index:6;
  width:calc(var(--R) * 0.98);
  height:calc(var(--R) * 0.98);
  border:0;
  padding:5px;
  border-radius:50%;
  cursor:pointer;
  background:linear-gradient(160deg, rgba(255,229,138,.95), rgba(201,138,0,.95));
  box-shadow:
    0 12px 30px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 0 46px rgba(255,192,31,.35);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), filter .2s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.spin:active:not(:disabled){ transform:scale(.93); }
.spin:disabled{ cursor:default; }
/* sadece kapaklar yüklenirken sönük dursun; dönerken altın rengi kalsın */
.spin:disabled:not(.donuyor){ filter:saturate(.25) brightness(.7); }
.spin:focus-visible{ outline:3px solid var(--gold-acik); outline-offset:4px; }

/* butonun kenarında dönen ışık */
.spin-rim{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,247,214,0) 0deg,
    rgba(255,247,214,.95) 60deg,
    rgba(255,247,214,0) 130deg,
    rgba(255,247,214,0) 360deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px));
  animation:donRim 3.6s linear infinite;
  pointer-events:none;
}
@keyframes donRim{ to{ transform:rotate(360deg) } }
.spin.donuyor .spin-rim{ animation-duration:.85s; }

.spin-yuz{
  position:relative;
  display:grid;
  place-items:center;
  width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #17203F 0%, #0A0E20 78%);
  box-shadow:0 0 0 1px rgba(255,192,31,.5) inset;
}

.spin-yazi{
  font-size:clamp(14px, 4.4vw, 19px);
  font-weight:900;
  letter-spacing:.13em;
  background:linear-gradient(180deg, var(--gold-acik), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.spin.donuyor .spin-yazi{ animation:yaziNabiz 1.1s ease-in-out infinite; }
@keyframes yaziNabiz{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* boştayken nabız gibi atan halka */
.spin::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(255,192,31,.55);
  opacity:0;
  pointer-events:none;
}
.spin.hazir::before{ animation:nabiz 2.1s ease-out infinite; }
@keyframes nabiz{
  0%{ opacity:.75; transform:scale(1); }
  70%{ opacity:0; transform:scale(1.24); }
  100%{ opacity:0; transform:scale(1.24); }
}

/* ------------------------------------------------------------------- alt */

.bottom{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding-top:4px;
  min-height:64px;
}

.karakter{
  height:clamp(84px, 21vh, 172px);
  width:auto;
  display:block;
  margin-bottom:-6px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
  animation:sallan 3.6s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes sallan{
  0%,100%{ transform:translateY(0) rotate(-1.2deg); }
  50%{ transform:translateY(-6px) rotate(1.2deg); }
}
.karakter.zipla{ animation:zipla .7s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes zipla{
  0%,100%{ transform:translateY(0) scale(1); }
  35%{ transform:translateY(-18px) scale(1.07) rotate(-3deg); }
  60%{ transform:translateY(0) scale(.97); }
}

.altnot{
  margin:0 2px 12px 0;
  text-align:right;
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}

/* ---------------------------------------------------------- kazanan ekran */

.modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:22px;
}
.modal[hidden]{ display:none; }

.modal-fon{
  position:absolute;
  inset:0;
  background:rgba(3,5,12,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fonAc .35s ease-out both;
}
@keyframes fonAc{ from{ opacity:0 } to{ opacity:1 } }

/* kazanan ekranında köşeden bakan maskot */
.modal-karakter{
  position:absolute;
  left:-14px;
  bottom:calc(env(safe-area-inset-bottom) - 10px);
  height:clamp(96px, 20vh, 168px);
  width:auto;
  pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));
  animation:maskotGel .6s cubic-bezier(.2,1.4,.4,1) .35s both;
}
@keyframes maskotGel{
  from{ opacity:0; transform:translateY(60px) rotate(-8deg); }
  to{ opacity:1; transform:none; }
}

.modal-kutu{
  position:relative;
  width:100%;
  max-width:340px;
  text-align:center;
  animation:kutuAc .5s cubic-bezier(.2,1.35,.45,1) both;
}
@keyframes kutuAc{
  from{ opacity:0; transform:translateY(26px) scale(.94); }
  to{ opacity:1; transform:none; }
}

@keyframes yukselFade{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

.kicker{
  margin:0 0 14px;
  font-size:clamp(15px, 4.6vw, 19px);
  font-weight:900;
  letter-spacing:.28em;
  background:linear-gradient(100deg,
    var(--gold-koyu) 0%, var(--gold) 26%, #FFF7D6 44%, var(--gold) 62%, var(--gold-koyu) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:yukselFade .5s ease-out .1s both, parilti 3.4s ease-in-out .6s infinite;
}

.odul{
  position:relative;
  display:inline-block;
  margin-bottom:16px;
  perspective:900px;
}

/* arkada yavaşça dönen ışık huzmeleri */
.isinlar{
  position:absolute;
  left:50%; top:50%;
  width:230%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,192,31,.20) 0deg 4deg,
    transparent 4deg 15deg);
  -webkit-mask:radial-gradient(circle closest-side, #000 12%, rgba(0,0,0,.55) 45%, transparent 76%);
  mask:radial-gradient(circle closest-side, #000 12%, rgba(0,0,0,.55) 45%, transparent 76%);
  animation:donIsin 26s linear infinite;
  pointer-events:none;
}
@keyframes donIsin{
  from{ transform:translate(-50%,-50%) rotate(0deg) }
  to  { transform:translate(-50%,-50%) rotate(360deg) }
}

.odul-parlama{
  position:absolute;
  left:50%; top:50%;
  width:230%; height:170%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,192,31,.42) 0%, rgba(255,192,31,0) 62%);
  animation:parla 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes parla{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }

.odul-gorsel{
  position:relative;
  display:block;
  width:auto;
  height:min(38vh, 240px);
  border-radius:9px;
  background:#fff;
  box-shadow:
    0 20px 44px rgba(0,0,0,.6),
    0 0 0 3px rgba(255,192,31,.85);
  animation:kartGel .95s cubic-bezier(.18,1.28,.35,1) both;
}
@keyframes kartGel{
  from{ opacity:0; transform:rotateY(-74deg) rotateZ(-9deg) scale(.7); }
  to  { opacity:1; transform:none; }
}

.odul-seri{
  margin:0 0 3px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--turkuaz);
  animation:yukselFade .5s ease-out .62s both;
}
.odul-ad{
  margin:0;
  font-size:clamp(17px, 5.2vw, 22px);
  font-weight:900;
  line-height:1.24;
  letter-spacing:.01em;
  text-wrap:balance;
  animation:yukselFade .5s ease-out .70s both;
}
.odul-sinif{
  margin:5px 0 22px;
  font-size:13px;
  color:var(--sis);
  letter-spacing:.05em;
  animation:yukselFade .5s ease-out .78s both;
}

.tekrar{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:15px 18px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.13em;
  color:#1A1200;
  background:linear-gradient(180deg, var(--gold-acik), var(--gold) 55%, #E0A400);
  box-shadow:0 12px 26px rgba(255,192,31,.28), 0 0 0 1px rgba(255,255,255,.3) inset;
  cursor:pointer;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1);
  animation:yukselFade .5s ease-out .88s both;
}
.tekrar:active{ transform:scale(.95); }
.tekrar:focus-visible{ outline:3px solid var(--beyaz); outline-offset:3px; }
.tekrar::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:kartParla 4.2s ease-in-out 1.4s infinite;
  pointer-events:none;
}

/* --------------------------------------------------------------- konfeti */

#konfeti{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
}

/* -------------------------------------------------------- ince ayarlar */

/* çok kısa ekranlarda karakteri gizle, çarka yer aç */
@media (max-height:620px){
  .karakter,.modal-karakter{ display:none; }
  .basliklar{ padding:4px 0 0; }
  .basliklar p{ font-size:11px; }
  .bottom{ min-height:26px; justify-content:center; }
  .altnot{ text-align:center; margin-bottom:2px; }
}

/* yatay çevrilmiş telefon / geniş ekran */
@media (min-aspect-ratio:1/1) and (max-height:560px){
  .basliklar h1{ font-size:18px; }
  .logo{ height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .karakter,
  .spin.hazir::before,
  .odul-parlama,
  .aura i,
  .ring-isik,
  .spin-rim,
  .isinlar,
  .kart::before,
  .tekrar::after,
  .basliklar h1 em,
  .kicker{
    animation:none;
  }
  .app.sars{ animation:none; }
  .basliklar h1 em,.kicker{ background-position:50% 0; opacity:1; }
  /* giriş hareketleri kalsın ama sade olsun (aksi halde ekranda hiç görünmezler) */
  .odul-gorsel{ animation:yukselFade .4s ease-out both; }
  .kart.kazandi,.karakter.zipla{ animation:none; }
}