/* ==========================================================================
   MRKING — açılış sayfası stili
   Renk / yazı tipi / yarıçap değerleri page.js tarafından config'ten basılır.
   ========================================================================== */

:root{
  --gold-1:#FFF6C9; --gold-2:#FFE27A; --gold-3:#FFC83D; --gold-4:#F0A200;
  --bg-1:#2A0F5C;   --bg-2:#14082F;   --bg-3:#07030F;
  --acc-1:#6D28D9;  --acc-2:#C026D3;
  --txt:#FFFFFF;
  --font-h:'Unbounded', system-ui, sans-serif;
  --font-b:'Inter', system-ui, sans-serif;
  --radius:24px;
  --wheel:420px;
  --btn-1:#FFF0A8; --btn-2:#FFC83D; --btn-3:#F0A200; --btn-c:#2A1200;
  --overlay:.45; --bgblur:0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-h);
  background:var(--bg-3);
  color:var(--txt);
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- KATMAN 0 : SAHNE ARKASI ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -5%, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%)}

.bg-media{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;display:none;filter:blur(var(--bgblur));transform:scale(1.04)}
.bg-media video{width:100%;height:100%;object-fit:cover}
.bg-media svg{display:block;width:100%;height:100%}
body.bg-image .bg-media,body.bg-video .bg-media,body.bg-scene .bg-media{display:block}
body.bg-image .orb,body.bg-video .orb,body.bg-scene .orb{opacity:.22}
/* çizim manzarada perspektif ızgara anlamsız kaçıyor */
body.bg-scene .floor{display:none}
body.bg-scene .rays{opacity:.28}

.orb{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;
  animation:drift 20s ease-in-out infinite}
.orb.a{width:62vmax;height:62vmax;left:-22vmax;top:-26vmax;opacity:.55;
  background:radial-gradient(circle,var(--acc-1),transparent 65%)}
.orb.b{width:56vmax;height:56vmax;right:-20vmax;top:-14vmax;opacity:.45;animation-delay:-7s;
  background:radial-gradient(circle,var(--acc-2),transparent 65%)}
.orb.c{width:74vmax;height:74vmax;left:12%;bottom:-50vmax;opacity:.34;animation-delay:-13s;
  background:radial-gradient(circle,var(--gold-4),transparent 62%)}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(4vw,3vh,0) scale(1.09)}
  66%    {transform:translate3d(-3vw,-2vh,0) scale(.94)}
}

.rays{position:absolute;left:-25%;right:-25%;top:-30%;height:130%;
  transform-origin:50% 0;opacity:.5;mix-blend-mode:screen;filter:blur(3px);
  background:repeating-conic-gradient(from 196deg at 50% 0%,
    rgba(255,214,102,.13) 0deg 2.5deg, transparent 2.5deg 11deg);
  animation:sweep 26s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

.floor{position:absolute;left:-60%;right:-60%;bottom:-14%;height:62%;
  transform:perspective(620px) rotateX(73deg);transform-origin:50% 100%;
  background:
    linear-gradient(transparent 30%, rgba(255,200,61,.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 62px);
  -webkit-mask-image:linear-gradient(transparent, #000 45%, transparent 96%);
          mask-image:linear-gradient(transparent, #000 45%, transparent 96%)}

.vignette{position:absolute;inset:0;
  background:radial-gradient(78% 58% at 50% 44%, transparent 0%,
             rgba(3,1,10,calc(var(--overlay) * 1.1)) 68%,
             rgba(3,1,10,calc(var(--overlay) + .45)) 100%)}
.noise{position:absolute;inset:0;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.no-orbs .orb,.no-rays .rays,.no-floor .floor,.no-noise .noise{display:none}

/* ---------- PARTİKÜLLER ---------- */
#particles{position:fixed;inset:0;z-index:5;pointer-events:none}

/* ---------- GIF / GÖRSEL KATMANLARI ---------- */
#layers{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.layer{position:absolute;transform:translate(-50%,-50%);will-change:transform;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.layer img,.layer svg{display:block;width:100%;height:auto}
.layer.anim-float{animation:lfloat 4s ease-in-out infinite}
.layer.anim-sway {animation:lsway 6s ease-in-out infinite}
.layer.anim-pulse{animation:lpulse 2.6s ease-in-out infinite}
.layer.anim-spin {animation:lspin 12s linear infinite}
@keyframes lfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 16px))}}
@keyframes lsway {0%,100%{transform:translate(-50%,-50%) rotate(-2.5deg)}50%{transform:translate(-50%,-50%) rotate(2.5deg)}}
@keyframes lpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes lspin {to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- İÇERİK ---------- */
.stage{position:relative;z-index:10;
  height:100vh;height:100dvh;
  display:grid;grid-template-rows:auto 1fr auto;align-items:center;
  padding:clamp(12px,2.4vh,26px) clamp(14px,4vw,34px);
  gap:clamp(6px,1.4vh,16px)}

/* ÜST BAR — üç EŞİT sütun. minmax(0,1fr) şart: `1fr` olsaydı sayaç kendi
   payını aşınca yan sütunlar eşitliğini kaybeder ve logo merkezden kayardı. */
.top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px}
.top.hidden,.hero.hidden,.timer.hidden{display:none}
.top .brandmark{grid-column:2;justify-self:center}
.top .timer{grid-column:3;justify-self:end}
body.hdr-left .top{grid-template-columns:auto 1fr auto}
body.hdr-left .top .brandmark{grid-column:1;justify-self:start}

/* dar ekranda sayacı incelt — logoya nefes alanı kalsın */
@media (max-width:440px){
  body.hdr-center .timer .lbl{display:none}
  body.hdr-center .timer{padding:6px 9px;gap:6px}
}
@media (max-width:360px){
  body.hdr-center .wordmark{font-size:14px}
  body.hdr-center .crown{width:24px}
}
.brandmark{display:flex;align-items:center;gap:9px;text-decoration:none}
.crown{width:clamp(26px,6.4vw,38px);height:auto;
  filter:drop-shadow(0 3px 12px rgba(255,200,61,.65));animation:bob 4s ease-in-out infinite}
.logo-img{height:var(--logo-h,38px);width:auto;display:block;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
.wordmark{font-weight:800;font-size:clamp(15px,4.3vw,22px);line-height:1;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3) 55%,var(--gold-4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark.hidden{display:none}

.timer{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--font-b);font-weight:700;font-size:clamp(10px,2.9vw,12.5px);
  padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,214,102,.3);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.timer .lbl{color:rgba(255,255,255,.6);letter-spacing:.06em}
.timer .val{color:var(--gold-2);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;
  animation:blink 1.5s ease-in-out infinite;flex:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ORTA BLOK */
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.8vh,18px);min-height:0}

.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.7vh,7px)}
.hero-media{max-width:min(60vw,var(--hero-w,180px));height:auto;margin-bottom:4px}
.kicker{font-family:var(--font-b);font-weight:800;letter-spacing:.24em;
  font-size:clamp(9px,2.5vw,12px);color:#E9D5FF;opacity:.85}
.amount{display:flex;align-items:baseline;gap:.08em;line-height:.88;font-weight:900;
  font-size:clamp(40px,11vw,86px);
  background:linear-gradient(105deg,var(--gold-4) 0%,var(--gold-3) 20%,#FFFDF2 32%,
             var(--gold-2) 44%,var(--gold-3) 60%,var(--gold-4) 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 30px rgba(255,170,20,.42));
  animation:shimmer 4.6s linear infinite}
.amount .cur{font-size:.42em}
@keyframes shimmer{from{background-position:125% 0}to{background-position:-45% 0}}

.sub{display:flex;align-items:center;gap:clamp(8px,2.4vw,14px);
  font-weight:700;font-size:clamp(12px,3.2vw,19px);letter-spacing:.14em;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.sub::before,.sub::after{content:"";height:1px;width:clamp(16px,6vw,46px);
  background:linear-gradient(90deg,transparent,var(--gold-3))}
.sub::after{background:linear-gradient(90deg,var(--gold-3),transparent)}

/* ---------- ÇARK ---------- */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}
.wheel-wrap.hidden{display:none}
.wheel-box{position:relative;
  width:min(var(--wheel), 78vw, 46vh);
  aspect-ratio:1/1;
  display:grid;place-items:center}
.wheel{width:100%;height:100%;display:block;overflow:visible;position:relative;z-index:1}
#wheelRot{transform-origin:200px 200px;transform:rotate(0deg)}

.seg-label{font-family:var(--font-h);font-weight:800;
  paint-order:stroke fill;stroke:rgba(0,0,0,.45);stroke-width:3px;stroke-linejoin:round}

/* ibre */
.pointer{position:absolute;top:-2%;left:50%;transform:translateX(-50%);z-index:4;
  width:clamp(24px,6%,42px);height:clamp(32px,9%,56px);
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3) 55%,var(--gold-4));
  clip-path:polygon(50% 100%, 0 22%, 12% 0, 88% 0, 100% 22%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transform-origin:50% 15%}
.pointer.tick{animation:tick .09s ease-out}
@keyframes tick{0%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-13deg)}100%{transform:translateX(-50%) rotate(0)}}

/* göbek butonu */
.hub{position:absolute;z-index:3;cursor:pointer;border:0;
  width:26%;height:26%;border-radius:50%;
  font-family:var(--font-h);font-weight:900;color:var(--btn-c);
  font-size:clamp(10px,2.4vw,15px);letter-spacing:.02em;
  background:radial-gradient(circle at 50% 30%,var(--gold-1),var(--gold-3) 58%,var(--gold-4));
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.75),
             inset 0 -4px 0 rgba(150,90,0,.4), 0 0 0 4px rgba(10,4,28,.9);
  transition:transform .18s ease, box-shadow .25s ease}
.hub:hover{transform:scale(1.06)}
.hub:active{transform:scale(.96)}
.hub:disabled{cursor:default;filter:saturate(.5) brightness(.85)}
body.spinning .hub{animation:hubspin 1s linear infinite}
@keyframes hubspin{to{transform:rotate(360deg)}}

body.won .wheel-box{animation:winpop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes winpop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}

.wintag{text-align:center;font-weight:800;letter-spacing:.08em;
  font-size:clamp(12px,3.4vw,17px);color:var(--gold-2);
  text-shadow:0 2px 18px rgba(255,180,20,.55);
  opacity:0;transform:translateY(10px);height:0;overflow:hidden;
  transition:.55s cubic-bezier(.2,.9,.2,1)}
body.won .wintag{opacity:1;transform:none;height:auto}

/* ---------- AKSİYON ---------- */
.cta{display:flex;flex-direction:column;align-items:center;gap:9px}
.btn{position:relative;overflow:hidden;display:inline-block;cursor:pointer;border:0;
  font-family:var(--font-h);font-weight:800;letter-spacing:.02em;
  font-size:clamp(14px,4.1vw,20px);color:var(--btn-c);text-decoration:none;text-align:center;
  padding:clamp(13px,2.6vh,19px) clamp(26px,8.5vw,50px);border-radius:999px;
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2) 45%,var(--btn-3));
  box-shadow:0 12px 32px rgba(240,162,0,.42),
             inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -3px 0 rgba(150,90,0,.35);
  transition:transform .18s ease, box-shadow .25s ease}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  animation:sheen 3.4s ease-in-out infinite}
@keyframes sheen{0%{left:-70%}55%,100%{left:135%}}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 16px 42px rgba(240,162,0,.6)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{cursor:default;filter:saturate(.55) brightness(.85)}
.btn:disabled::after{display:none}
.btn.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 12px 32px rgba(240,162,0,.42)}
  50%{transform:scale(1.045);box-shadow:0 18px 46px rgba(240,162,0,.66)}}
.hidden{display:none !important}

.hint{font-family:var(--font-b);font-size:clamp(9px,2.5vw,11.5px);letter-spacing:.12em;
  color:rgba(255,255,255,.45);text-align:center}

/* ---------- ALT BAR ---------- */
.bottom{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1.1vh,11px)}
.proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.proof span{font-family:var(--font-b);font-weight:600;
  font-size:clamp(9px,2.5vw,11.5px);letter-spacing:.06em;color:rgba(255,255,255,.72);
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.legal{font-family:var(--font-b);font-size:clamp(8px,2.2vw,10.5px);
  color:rgba(255,255,255,.32);text-align:center;letter-spacing:.03em;line-height:1.5}
.legal b{color:rgba(255,214,102,.65);font-weight:700}

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

/* ==========================================================================
   ŞOV KATMANI — giriş koreografisi, çark efektleri, kazanma patlaması
   ========================================================================== */

/* ---- 1. GİRİŞ: sahne sırayla kurulur ---- */
body.fx-in .top    {animation:dropIn  .70s cubic-bezier(.2,.9,.25,1.05) both}
body.fx-in .kicker {animation:fadeUp  .55s .18s cubic-bezier(.2,.8,.3,1) both}
body.fx-in .amount {animation:amountIn .85s .26s cubic-bezier(.16,1.5,.35,1) both}
body.fx-in .sub    {animation:fadeUp  .55s .46s cubic-bezier(.2,.8,.3,1) both}
body.fx-in .wheel-box{animation:wheelIn 1.15s .34s cubic-bezier(.16,1,.3,1) both}
body.fx-in .cta    {animation:fadeUp  .65s .86s cubic-bezier(.2,.9,.3,1) both}
body.fx-in .bottom {animation:fadeUp  .65s 1.02s cubic-bezier(.2,.9,.3,1) both}
body.fx-in #layers .layer{animation:layerIn .9s .5s cubic-bezier(.16,1,.3,1) both}

@keyframes dropIn  {from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes fadeUp  {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes amountIn{
  0%  {opacity:0;transform:scale(.68);filter:blur(9px) drop-shadow(0 8px 30px rgba(255,170,20,0))}
  60% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes wheelIn {
  from{opacity:0;transform:scale(.62) rotate(-34deg)}
  to  {opacity:1;transform:scale(1) rotate(0)}
}
@keyframes layerIn {from{opacity:0}to{opacity:1}}

/* ---- 2. ÇARK: beklerken nefes, dönerken bulanıklık ---- */
/* Radyal degrade zaten yumuşak — üstüne blur filtresi koymak her karede
   yeniden rasterleştirme demek olurdu, gereksiz. */
.wheel-glow{position:absolute;inset:-14%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--gold-3) 0%,transparent 62%);opacity:.13}
body.fx-glow .wheel-glow{animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{opacity:.11;transform:scale(.96)}
  50%    {opacity:.26;transform:scale(1.05)}
}
body.won .wheel-glow{opacity:.42;animation:breathe 1.7s ease-in-out infinite}

#wheelRot{transition:filter .5s ease}
body.spin-blur #wheelRot{filter:blur(1.7px)}
/* Telefonda dönen SVG'ye filtre uygulamak her kareyi yazılımda çizdirir ve
   tam da en kritik anda kare düşürür. Mobilde net dönsün, zaten iyi duruyor. */
@media (max-width:620px){
  body.spin-blur #wheelRot{filter:none}
}

/* dönerken kenar ampulleri hızlanır, ibre gerilir */
body.spinning #rimDots{animation:rimRush .5s linear infinite}
@keyframes rimRush{0%,100%{opacity:1}50%{opacity:.55}}

/* kazanan dilim parlar */
#wheelRot path.seg-win{animation:segFlash 1.9s cubic-bezier(.2,.8,.3,1) both}
@keyframes segFlash{
  0%  {filter:brightness(3.2) saturate(1.6)}
  35% {filter:brightness(1.5) saturate(1.3)}
  55% {filter:brightness(2.4) saturate(1.5)}
  100%{filter:brightness(1.35) saturate(1.2)}
}

/* ---- 3. KAZANMA: şok dalgası + tam ekran parlama ---- */
.shock{position:absolute;inset:0;pointer-events:none;z-index:2;display:grid;place-items:center}
.shock i{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;opacity:0;
  border:3px solid var(--gold-2);box-shadow:0 0 30px var(--gold-3)}
body.fx-win .shock i{animation:shockwave 1.25s cubic-bezier(.15,.7,.3,1) both}
body.fx-win .shock i:nth-child(2){animation-delay:.16s}
body.fx-win .shock i:nth-child(3){animation-delay:.32s}
@keyframes shockwave{
  0%  {opacity:.95;transform:scale(.34);border-width:5px}
  100%{opacity:0;transform:scale(3.1);border-width:1px}
}

.flash{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,246,201,.85),rgba(255,200,61,.22) 42%,transparent 70%)}
body.fx-win .flash{animation:flashOut .75s ease-out both}
@keyframes flashOut{0%{opacity:.9}100%{opacity:0}}

/* kazanma yazısı zıplayarak gelir */
body.won .wintag{animation:tagPop .6s cubic-bezier(.2,1.5,.35,1) both}
@keyframes tagPop{
  0%  {opacity:0;transform:translateY(14px) scale(.88)}
  100%{opacity:1;transform:none}
}

/* üye ol butonu sahneye girer */
body.won #joinBtn{animation:joinIn .55s cubic-bezier(.2,1.4,.35,1) both}
@keyframes joinIn{
  0%  {opacity:0;transform:scale(.8)}
  100%{opacity:1;transform:scale(1)}
}

/* ---- 4. DERİNLİK: fare/eğim kayması ---- */
:root{--px:0;--py:0}
.bg-media{transform:scale(1.06) translate3d(calc(var(--px) * -14px),calc(var(--py) * -11px),0)}
#layers  {transform:translate3d(calc(var(--px) * 16px),calc(var(--py) * 12px),0)}
.orb.a   {margin-left:calc(var(--px) * 26px);margin-top:calc(var(--py) * 20px)}
.orb.b   {margin-left:calc(var(--px) * -22px);margin-top:calc(var(--py) * -16px)}
.bg-media,#layers{transition:transform .5s cubic-bezier(.2,.8,.3,1)}

/* önizleme çerçevesinde dışarı çıkışları kilitle */
body.is-preview .btn,body.is-preview .brandmark{pointer-events:auto}

/* ---------- UYUM ---------- */
@media (max-height:620px){
  .amount{font-size:clamp(30px,7vw,52px)}
  .wheel-box{width:min(var(--wheel),52vw,40vh)}
  .rays,.floor{display:none}
}
@media (max-height:480px){
  .hero .kicker,.legal{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important}
  #particles,#confetti{display:none}
}

/* Bir başlatma adımı patlarsa sebebini ekranda göster — konsol açmaya gerek
   kalmadan bildirebilmek için. Normalde bu şerit hiç görünmez. */
body[data-mr-error]::after{
  content:"⚠ " attr(data-mr-error);
  position:fixed;left:0;right:0;bottom:0;z-index:999;pointer-events:none;
  background:#7F1D1D;color:#fff;
  font:12px/1.5 ui-monospace,Consolas,monospace;
  padding:8px 12px;letter-spacing:.02em;
}