/* ==========================================================================
   ŞANS ÇARKI v4 — sayfa çevresi bonussoft12.com çark penceresinin dili
   (.wheel-cont: altın büyük harf başlık, açıklama, çark, birincil düğme,
   .wh-cd sayaç kartı), marka renkleri. Çark sahnesi: görsel referanstaki
   yeşil çuha masa. Tokenlar nx-top-r.css :root'ta (--rs-*). Önek .ck-
   ========================================================================== */
.ck{max-width:1310px; margin:0 auto; font-family:var(--rs-f); color:#fff; font-weight:700}
.ck *{box-sizing:border-box}
:where(.ck) a{color:inherit; text-decoration:none}
:where(.ck) button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
.ck :focus-visible{outline:2px solid var(--rs-vurgu); outline-offset:2px}
.ck img{display:block}
/* çark sayfasının kendisinde kabuğun "Çarkı Çevir" sekmesi gereksiz */
.rs-cark-sekme{display:none!important}
.ck-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- başlık (ref .wheel-cont h1 / p) ---------- */
.ck-sahne{text-align:center}
.ck-bas h1{margin:0 0 4px; font-size:24px; font-weight:800; line-height:30px; letter-spacing:.04em; color:var(--rs-vurgu); text-transform:uppercase}
.ck-bas p{margin:0; font-size:14px; font-weight:600; line-height:20px; color:rgba(255,255,255,.65)}

/* ---------- çuha masa ---------- */
.ck-masa{--ck-cap:clamp(300px, calc(100vh - 360px), 560px);
  position:relative; isolation:isolate; overflow:hidden; margin-top:14px; padding:18px; border-radius:16px;
  background:
    radial-gradient(ellipse 46% 62% at 50% 50%, rgba(120,210,120,.20), rgba(0,0,0,0) 72%),
    radial-gradient(ellipse 80% 95% at 50% 50%, #23793b 0%, #186030 38%, #0f4220 70%, #0a2c15 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 110px rgba(0,0,0,.55), 0 22px 44px -24px rgba(0,0,0,.8)}
/* ışık huzmeleri (referanstaki ince ışınlar) */
.ck-masa::before{content:''; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from -6deg at 50% 50%, rgba(255,255,255,.05) 0deg, rgba(255,255,255,0) 6deg, rgba(255,255,255,0) 14deg, rgba(255,255,255,.05) 20deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.5) 34%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.5) 34%, transparent 62%)}
/* çuha dokusu */
.ck-masa::after{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>")}

.ck-cark{position:relative; z-index:1; width:min(var(--ck-cap), 100%); aspect-ratio:1/1; margin:0 auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.ck-cark canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.ck-gobek{position:absolute; left:50%; top:50%; width:23.6%; height:23.6%; transform:translate(-50%,-50%); border-radius:50%; z-index:2}
.ck-gobek:focus-visible{outline:3px solid #ffe08a; outline-offset:3px}
.ck-cark.is-mesgul .ck-gobek{cursor:progress}

/* HUD: masanın üst köşeleri (ref .wh-cd__block) */
.ck-hud{position:absolute; z-index:3; left:16px; right:16px; top:16px; display:flex; align-items:flex-start; gap:8px; pointer-events:none}
.ck-hud > *{pointer-events:auto}
.ck-hud-kart{display:flex; align-items:center; gap:9px; min-width:150px; padding:8px 14px 8px 9px; border-radius:12px; text-align:left;
  background:rgba(12,6,26,.58); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.ck-hud-kart img{width:30px; height:30px; object-fit:contain; flex:none}
.ck-hud-kart img.ck-hud-logo{width:26px; height:26px; border-radius:50%; object-fit:cover; margin:0 2px}
.ck-hud-i{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:rgba(245,196,81,.12); color:var(--rs-vurgu); font-size:13px}
.ck-hud-kart span{display:flex; flex-direction:column; line-height:1.1}
.ck-hud-kart small{font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.ck-hud-kart b{margin-top:3px; font-size:18px; font-weight:700; color:var(--rs-vurgu); font-variant-numeric:tabular-nums}
.ck-ses{margin-left:auto; width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px; font-size:14px;
  color:rgba(255,255,255,.7)!important; background:rgba(12,6,26,.58)!important; border:1px solid rgba(255,255,255,.09)!important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:color .2s, border-color .2s}
.ck-ses:hover{color:#fff!important}
.ck-ses.is-acik{color:var(--rs-vurgu)!important; border-color:rgba(245,196,81,.45)!important}

/* konfeti */
.ck-konfeti{position:absolute; inset:0; z-index:5; width:100%; height:100%; pointer-events:none}

/* ---------- sonuç kartı (ref .finish) ---------- */
.ck-sonuc{position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center; padding:16px 16px 5%;
  background:linear-gradient(0deg, rgba(6,3,16,.62) 0%, rgba(6,3,16,.28) 45%, rgba(6,3,16,0) 70%); opacity:0; transition:opacity .25s}
.ck-sonuc[hidden]{display:none}
.ck-sonuc.is-acik{opacity:1}
.ck-sonuc-kart{position:relative; width:min(340px, 100%); padding:18px 20px 16px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg, #24174f, var(--rs-panel)); border:1px solid rgba(245,196,81,.35);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(10px) scale(.96); transition:transform .32s cubic-bezier(.2,1.3,.4,1)}
.ck-sonuc.is-acik .ck-sonuc-kart{transform:none}
.ck-sonuc.is-pas .ck-sonuc-kart{border-color:rgba(255,255,255,.14)}
.ck-sonuc-kapat{position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:rgba(255,255,255,.6)!important; font-size:14px}
.ck-sonuc-kapat:hover{background:rgba(255,255,255,.06)!important; color:#fff!important}
.ck-sonuc-ikon{width:84px; height:84px; margin:-6px auto 2px; display:block}
.ck-sonuc-ust{display:block; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--rs-vurgu)}
.ck-sonuc.is-pas .ck-sonuc-ust{color:rgba(255,255,255,.55)}
.ck-sonuc-odul{margin:4px 0 0; font-size:30px; font-weight:800; line-height:36px; color:#fff; text-shadow:0 2px 14px rgba(245,196,81,.35)}
.ck-sonuc.is-pas .ck-sonuc-odul{color:rgba(255,255,255,.85); text-shadow:none}
.ck-sonuc-tx{margin:6px 0 0; font-size:13px; font-weight:600; line-height:18px; color:rgba(255,255,255,.6)}
.ck-sonuc-dugmeler{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:16px}
.ck-sonuc-dugmeler .ck-btn{min-height:44px; font-size:14px!important}
.ck-sonuc-dugmeler .ck-btn[hidden]{display:none}
.ck-sonuc-dugmeler .ck-btn[hidden] + .ck-btn{grid-column:1/-1}

/* ---------- düğmeler (ref .block.button.primary) ---------- */
.ck-dugmeler{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(560px, 100%); margin:14px auto 0}
.ck-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:8px 14px!important; border-radius:12px;
  font-size:16px!important; font-weight:700!important; white-space:nowrap; overflow:hidden; transition:filter .15s, transform .12s, box-shadow .2s}
.ck-btn img{width:26px; height:26px; object-fit:contain; flex:none; margin:-4px 0}
.ck-btn-tek{grid-column:1/-1}
.ck-btn-altin{background:linear-gradient(135deg,#ffd66e,var(--rs-vurgu))!important; color:var(--rs-vurgu-yazi)!important; box-shadow:0 10px 24px -12px rgba(245,196,81,.7), inset 0 1px 0 rgba(255,255,255,.45)}
.ck-btn-mor{background:linear-gradient(135deg,#a78bfa,var(--rs-ikincil))!important; color:#fff!important; box-shadow:0 10px 24px -12px rgba(139,92,246,.75), inset 0 1px 0 rgba(255,255,255,.25)}
.ck-btn-panel{background:var(--rs-panel)!important; border:1px solid var(--rs-cizgi)!important; color:rgba(255,255,255,.8)!important; padding:8px 18px!important}
.ck-btn:hover:not(:disabled){filter:brightness(1.07)}
.ck-btn:active:not(:disabled){transform:scale(.98)}
.ck-btn:disabled{cursor:not-allowed; filter:saturate(.25) brightness(.62); box-shadow:none}
.ck-btn-rozet{display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:7px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.ck-btn-altin .ck-btn-rozet{background:rgba(31,20,3,.14)}
.ck-btn-mor .ck-btn-rozet{background:rgba(255,255,255,.16)}
.ck-btn.is-yukleniyor .ck-btn-tx::after{content:''; display:inline-block; width:12px; height:12px; margin-left:8px; vertical-align:-1px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:ckDon .7s linear infinite}
.ck-btn.is-yukleniyor:disabled{filter:none}
@keyframes ckDon{to{transform:rotate(360deg)}}
.ck-not{display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 0 0; font-size:11px; font-weight:600; line-height:16px; color:rgba(255,255,255,.45)}
.ck-not i{color:rgba(245,196,81,.7)}

/* ---------- bloklar ---------- */
.ck-blok{margin-top:18px; padding:16px; border-radius:14px; background:var(--rs-panel); border:1px solid var(--rs-cizgi)}
.ck-blok-bas{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.ck-blok-i{width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(245,196,81,.12); color:var(--rs-vurgu); font-size:16px}
.ck-blok-bas h2{margin:0; font-size:17.2px; font-weight:800; line-height:21px; color:rgba(255,255,255,.95)}
.ck-blok-bas p{margin:3px 0 0; font-size:12px; font-weight:700; line-height:16px; color:rgba(255,255,255,.5)}

/* son kazananlar şeridi */
.ck-serit{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:thin; scrollbar-color:var(--rs-cizgi) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent)}
.ck-serit[hidden]{display:none}
.ck-kz{flex:none; scroll-snap-align:start; display:flex; align-items:center; gap:9px; min-width:200px; padding:8px 12px 8px 8px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06)}
.ck-kz.is-yeni{border-color:rgba(245,196,81,.45); animation:ckYeni .5s ease-out}
@keyframes ckYeni{from{opacity:0; transform:translateX(-12px)}to{opacity:1; transform:none}}
.ck-kz img, .ck-kz-bas{width:30px; height:30px; flex:none; border-radius:50%; object-fit:cover; background:var(--rs-cizgi)}
.ck-kz-bas{display:grid; place-items:center; font-size:13px; color:var(--rs-vurgu)}
.ck-kz-tx{display:flex; flex-direction:column; min-width:0; line-height:1.15; text-align:left}
.ck-kz-tx b{font-size:12.5px; font-weight:700; color:rgba(255,255,255,.9); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ck-kz-tx small{margin-top:2px; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.4)}
.ck-kz-tutar{margin-left:auto; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px; border-radius:8px; font-size:12.5px; font-weight:700; white-space:nowrap;
  color:var(--rs-vurgu); background:rgba(245,196,81,.12); font-variant-numeric:tabular-nums}
.ck-kz-tutar small{font-size:9.5px; opacity:.75}
.ck-kz-tutar.is-ozel{color:#c4b5fd; background:rgba(139,92,246,.18)}

/* ödül listesi */
.ck-oduller{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px}
.ck-odul{display:flex; align-items:center; gap:10px; padding:8px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); text-align:left}
.ck-odul-ikon{width:56px; height:56px; flex:none; display:block}
.ck-odul-tx{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.ck-odul-tx b{font-size:14px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ck-odul-tx small{margin-top:3px; font-size:11px; font-weight:600; color:rgba(255,255,255,.45)}

.ck-bos{display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 16px; border-radius:12px; border:1px dashed var(--rs-cizgi); text-align:center}
.ck-bos[hidden]{display:none}
.ck-bos i{font-size:24px; color:var(--rs-vurgu); margin-bottom:4px}
.ck-bos b{font-size:14px}
.ck-bos span{font-size:12px; font-weight:600; color:rgba(255,255,255,.5)}
.ck-bos-buyuk{padding:60px 16px; margin-bottom:10px}

/* =================== MOBİL =================== */
@media (max-width:767.98px){
  .ck-bas h1{font-size:20px; line-height:26px}
  .ck-bas p{font-size:12.5px; line-height:18px}
  .ck-masa{--ck-cap:560px; margin-top:12px; padding:10px; border-radius:14px}
  .ck-hud{position:relative; left:auto; right:auto; top:auto; margin-bottom:8px; gap:6px}
  .ck-hud-kart{min-width:0; flex:1; padding:6px 10px 6px 7px; gap:7px}
  .ck-hud-kart img{width:24px; height:24px}
  .ck-hud-kart img.ck-hud-logo{width:22px; height:22px}
  .ck-hud-kart b{font-size:15px}
  .ck-hud-kart small{font-size:8.5px}
  .ck-ses{width:42px; height:auto; align-self:stretch}
  .ck-dugmeler{gap:8px; margin-top:12px}
  .ck-btn{min-height:50px; font-size:14px!important; padding:6px 8px!important; gap:6px; flex-wrap:wrap; row-gap:2px; white-space:normal; line-height:1.1}
  .ck-btn img{width:22px; height:22px}
  .ck-btn-rozet{height:18px; font-size:10px; padding:0 6px}
  .ck-not{font-size:10.5px; text-align:left; align-items:flex-start}
  .ck-not i{margin-top:3px}
  .ck-blok{padding:12px; margin-top:14px}
  .ck-oduller{grid-template-columns:1fr 1fr}
  .ck-odul{gap:8px; padding:7px}
  .ck-odul-ikon{width:44px; height:44px}
  .ck-odul-tx b{font-size:12.5px}
  .ck-kz{min-width:180px}
  .ck-sonuc{padding:10px 10px 3%}
  .ck-sonuc-kart{padding:14px 14px 12px}
  .ck-sonuc-ikon{width:64px; height:64px}
  .ck-sonuc-odul{font-size:24px; line-height:30px}
  .ck-sonuc-dugmeler{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .ck-sonuc, .ck-sonuc-kart, .ck-btn, .ck-kz.is-yeni{transition:none; animation:none}
  .ck-btn.is-yukleniyor .ck-btn-tx::after{animation:none}
}