/* ==========================================================================
   ANA SAYFA v3 — referans ana sayfanın ölçüleri birebir (px), marka renkleri.
   Tokenlar nx-top-r.css :root'ta (--rs-*). Önek .hr-
   ========================================================================== */
.hr{max-width:1320px; margin:0 auto; font-family:var(--rs-f); color:#fff; font-weight:700; display:flex; flex-direction:column; gap:10px}
.hr *{box-sizing:border-box}
:where(.hr) a{color:inherit; text-decoration:none}
:where(.hr) button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
.hr :focus-visible{outline:2px solid var(--rs-vurgu); outline-offset:2px}
.hr-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hr img{display:block}

/* ortak birincil düğme (ref: camgöbeği -> altın) */
.hr-btn{display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px!important; border-radius:10px; flex:none;
  background:linear-gradient(135deg,#ffd66e,var(--rs-vurgu))!important; color:var(--rs-vurgu-yazi)!important; font-size:12px!important; font-weight:700!important; white-space:nowrap; transition:filter .15s, transform .12s}
.hr-btn:hover{filter:brightness(1.08)}
.hr-btn:active{transform:translateY(1px)}

/* ---------- hızlı işlem kartları (378x70) ---------- */
.hr-qa{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.hr-qa-kart{display:flex; align-items:center; justify-content:space-between; gap:10px; height:70px; padding:10px 12px;
  background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:10px}
.hr-qa-sol{display:flex; align-items:center; gap:10px; min-width:0}
.hr-qa-i{width:48px; height:48px; flex:none; display:grid; place-items:center}
.hr-qa-i img{width:44px; height:44px; object-fit:contain}
.hr-qa-i img.hr-yuvarlak{width:42px; height:42px; border-radius:50%; object-fit:cover}
.hr-qa-i img.hr-donen{width:44px; height:44px; object-fit:contain}
@keyframes hrDon{to{transform:rotate(360deg)}}
.hr-qa-tx{display:flex; flex-direction:column; min-width:0}
.hr-qa-tx b{font-size:13px; font-weight:700; color:rgba(255,255,255,.9); line-height:16px}
.hr-qa-tx span{font-size:12px; font-weight:500; color:rgba(255,255,255,.35); line-height:19px}

/* ---------- kısayol şeridi (68px) ---------- */
.hr-qn{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:10px; overflow:hidden}
.hr-qn-oge{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:66px; padding:12px 4px; position:relative; transition:background .15s}
.hr-qn-oge + .hr-qn-oge::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:rgba(255,255,255,.06)}
.hr-qn-oge i{font-size:17px; color:rgba(255,255,255,.75); height:18px; line-height:18px}
.hr-qn-oge span{font-size:13px; font-weight:600; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.hr-qn-oge:hover{background:rgba(255,255,255,.03)}
.hr-qn-oge:hover span, .hr-qn-oge:hover i{color:var(--rs-vurgu)}

/* ---------- bölüm başlığı ---------- */
.hr-bolum{display:flex; flex-direction:column}
.hr-baslik{margin:0; font-size:12px; font-weight:700; line-height:19px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.02em}

/* ---------- oyun kartları (280x140) ---------- */
.hr-oyunlar{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.hr-oyun{display:flex; height:140px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:10px; overflow:hidden}
.hr-oyun-kapak{position:relative; width:110px; height:122px; margin:8px 0 8px 8px; flex:none; border-radius:10px; overflow:hidden; background:var(--rs-zemin); box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hr-oyun-kapak img{width:100%; height:100%; object-fit:cover}
.hr-oyun-oynat{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45)); opacity:0; transition:opacity .2s}
.hr-oyun-oynat i{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#ffd66e,var(--rs-vurgu)); color:var(--rs-vurgu-yazi); font-size:16px}
.hr-oyun-kapak:hover .hr-oyun-oynat{opacity:1}
.hr-oyun-bilgi{flex:1; min-width:0; padding:10px; display:flex; flex-direction:column; gap:10px}
.hr-oyun-bilgi h3{margin:0; font-size:13px; font-weight:700; line-height:20px}
.hr-oyun-lim{display:flex; gap:12px}
.hr-oyun-lim div{display:flex; flex-direction:column; gap:4px; min-width:0}
.hr-oyun-lim span{font-size:11px; font-weight:600; color:rgba(255,255,255,.4); line-height:16px; white-space:nowrap}
.hr-oyun-lim b{font-size:11px; font-weight:700; color:var(--rs-vurgu); line-height:14px}
.hr-oyna{margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:10px 16px; border-radius:10px;
  background:linear-gradient(135deg,#ffd66e,var(--rs-vurgu)); color:var(--rs-vurgu-yazi)!important; font-size:13px; font-weight:700; transition:filter .15s}
.hr-oyna i{font-size:11px}
.hr-oyna:hover{filter:brightness(1.08)}

/* ---------- kazananlar (250x92) ---------- */
.hr-kazanan-serit{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.hr-kazanan-iz{display:flex; width:max-content; padding:6px 0; animation:hrKay 70s linear infinite}
.hr-kazanan-serit:hover .hr-kazanan-iz{animation-play-state:paused}
.hr-kazanan-grup{display:flex; gap:10px; padding-right:10px}
@keyframes hrKay{to{transform:translateX(-50%)}}
.hr-kazanan{position:relative; width:250px; height:92px; flex:none; display:flex; align-items:center; gap:14px; padding:10px 18px 10px 10px;
  background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:14px; overflow:hidden}
.hr-kazanan::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--k) 0%,transparent 55%); opacity:.16; pointer-events:none}
.hr-kazanan-kapak{width:55px; height:70px; border-radius:10px; object-fit:cover; flex:none; position:relative; background:var(--rs-zemin)}
.hr-kazanan-bilgi{position:relative; display:flex; flex-direction:column; gap:4px; min-width:0}
.hr-kazanan-uye{display:flex; align-items:center; gap:5px; height:20px}
.hr-kazanan-uye img{width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.1); object-fit:cover}
.hr-kazanan-uye span{font-size:13px; font-weight:700; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hr-kazanan-sonuc{display:flex; gap:5px; font-size:13px; line-height:20px; white-space:nowrap}
.hr-kazanan-sonuc b{font-weight:800; color:var(--rs-vurgu)}
.hr-kazanan-sonuc span{font-weight:600}
.hr-kazanan-alt{font-size:12px; font-weight:600; color:rgba(255,255,255,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- dağıtılan ödül bandı (110px) ---------- */
.hr-toplam{position:relative; overflow:hidden; height:110px; padding:28px 36px; border-radius:14px; border:2px solid transparent;
  background:linear-gradient(135deg,var(--rs-panel),var(--rs-panel)) padding-box, linear-gradient(90deg,rgba(245,196,81,.55),rgba(139,92,246,.55),rgba(245,196,81,.55)) border-box;
  box-shadow:0 6px 24px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center}
.hr-toplam-parilti{position:absolute; top:0; bottom:0; width:40%; left:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:hrParilti 4.5s ease-in-out infinite}
@keyframes hrParilti{0%{left:-40%}60%,100%{left:110%}}
.hr-toplam-ic{position:relative; display:flex; align-items:center; gap:14px}
/* para animasyonu (ref: Lottie banknot). Kendi SVG'miz: ön banknot eğik gelip düzleşir, arkadaki iki banknot yelpaze gibi açılır, döngü */
.hr-para{width:90px; height:90px; flex:none; margin:-20px 0 -20px; display:block}
.hr-para svg{width:100%; height:100%; display:block; overflow:visible}
.hr-para g{transform-box:view-box}
.hr-para-b1{transform-origin:60px 64px; animation:hrParaOn 2.6s cubic-bezier(.3,.7,.3,1) infinite}
.hr-para-b2{transform-origin:24px 84px; animation:hrParaOrta 2.6s cubic-bezier(.3,.7,.3,1) infinite}
.hr-para-b3{transform-origin:24px 84px; animation:hrParaArka 2.6s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes hrParaOn{
  0%{transform:translate(-14px,-12px) rotate(-32deg) scale(.9); opacity:0}
  5%{opacity:1}
  13%{transform:translate(-5px,-4px) rotate(-14deg) scale(.97)}
  22%{transform:translate(0,0) rotate(2deg) scale(1.02)}
  28%{transform:translate(0,0) rotate(0) scale(1)}
  95%{transform:none; opacity:1}
  100%{transform:none; opacity:0}
}
@keyframes hrParaOrta{
  0%,24%{transform:rotate(0); opacity:0}
  25%{opacity:1}
  38%{transform:rotate(-12deg)}
  42%{transform:rotate(-10.5deg)}
  95%{transform:rotate(-10.5deg); opacity:1}
  100%{transform:rotate(-10.5deg); opacity:0}
}
@keyframes hrParaArka{
  0%,30%{transform:rotate(0); opacity:0}
  31%{opacity:1}
  46%{transform:rotate(-23deg)}
  50%{transform:rotate(-21deg)}
  95%{transform:rotate(-21deg); opacity:1}
  100%{transform:rotate(-21deg); opacity:0}
}
.hr-toplam-tx{font-size:18.8px; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:.04em; text-align:center}
.hr-toplam-tx strong{font-size:22px; font-weight:900; color:var(--rs-vurgu); margin:0 4px; font-variant-numeric:tabular-nums}

/* ---------- aktif etkinlikler karuseli (368x118) ---------- */
.hr-karusel-bas{display:flex; align-items:center; justify-content:space-between; height:36px; margin-bottom:12px}
.hr-oklar{display:flex; gap:6px}
.hr-oklar button{width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.07)!important; font-size:12px}
.hr-oklar button:hover{background:rgba(255,255,255,.1)!important}
.hr-karusel-iz{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:5px}
.hr-karusel-iz::-webkit-scrollbar{display:none}
.hr-etk{position:relative; flex:0 0 calc((100% - 16px) / 3); min-width:300px; height:118px; scroll-snap-align:start; display:flex; align-items:center; gap:14px; padding:10px;
  background:var(--rs-panel); border-radius:14px; overflow:hidden; transition:transform .15s}
.hr-etk::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--rs-vurgu) 0%,transparent 55%); opacity:.12; pointer-events:none}
.hr-etk:hover{transform:translateY(-2px)}
.hr-etk-kapak{position:relative; width:80px; height:80px; flex:none; border-radius:10px; overflow:hidden; background:#0b0618; display:grid; place-items:center}
.hr-etk-kapak img{width:100%; height:100%; object-fit:contain}
.hr-etk-bilgi{position:relative; display:flex; flex-direction:column; gap:3px; min-width:0}
.hr-etk-ad{display:flex; align-items:center; gap:5px; height:24px; min-width:0}
.hr-etk-ad img{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; background:#000}
.hr-etk-ad b{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hr-etk-tur{font-size:11px; font-weight:600; color:rgba(255,255,255,.5); line-height:16px}
.hr-etk-odul{font-size:16px; font-weight:800; color:var(--rs-vurgu); line-height:22px}
.hr-etk-sure{font-size:13px; font-weight:700; color:#fff; line-height:20px; white-space:nowrap}

/* ---------- kampanyalar (ads tablosu): tek sütunlu kaydırmalı slayt ---------- */
.hr-rek-bas{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.hr-rek-oklar{display:flex; gap:6px}
.hr-rek-oklar button{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.07)!important; font-size:11px; color:rgba(255,255,255,.8)!important}
.hr-rek-oklar button:hover{background:rgba(255,255,255,.1)!important; color:#fff!important}
.hr-rek{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:12px; border:1px solid var(--rs-cizgi); background:var(--rs-panel)}
.hr-rek::-webkit-scrollbar{display:none}
.hr-rek-kart{flex:0 0 100%; min-width:0; display:flex; flex-direction:column; scroll-snap-align:start; scroll-snap-stop:always}
.hr-rek-gorsel{position:relative; display:block; height:clamp(220px, 24vw, 320px); overflow:hidden; isolation:isolate; background:#120a2a}
.hr-rek-bg{position:absolute; inset:-10%; width:120%!important; height:120%!important; object-fit:cover; filter:blur(26px) saturate(1.35) brightness(.6); z-index:-1}
.hr-rek-on{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.hr-rek-kart:hover .hr-rek-on{transform:scale(1.02)}
.hr-rek-alt{display:flex; align-items:center; justify-content:space-between; gap:8px; height:44px; padding:0 12px 0 14px; border-top:1px solid rgba(255,255,255,.05)}
.hr-rek-alt b{min-width:0; font-size:13px; font-weight:700; color:rgba(255,255,255,.9); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hr-rek-alt i{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:11px; background:rgba(245,196,81,.12); color:var(--rs-vurgu); transition:background .15s, color .15s}
.hr-rek-kart:hover .hr-rek-alt i{background:var(--rs-vurgu); color:var(--rs-vurgu-yazi)}
.hr-rek-nokta{display:flex; justify-content:center; gap:6px; margin-top:8px}
.hr-rek-nokta button{width:7px; height:7px; padding:0!important; border-radius:4px; background:rgba(255,255,255,.2)!important; transition:width .25s, background .25s}
.hr-rek-nokta button.is-on{width:20px; background:var(--rs-vurgu)!important}
@media (max-width:767.98px){
  /* mobilde kısayol ızgarası yerine kampanya slaytı */
  .hr-qn{display:none}
  .hr-rek-gorsel{height:auto; aspect-ratio:2/1}
  .hr-rek-alt{height:40px}
}

/* =================== TABLET =================== */
@media (max-width:1279.98px){
  .hr-qn{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hr-qn-oge:nth-child(6)::before{display:none}
  .hr-qn-oge:nth-child(n+6){border-top:1px solid rgba(255,255,255,.06)}
  .hr-oyunlar{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =================== MOBİL (<768) — ref mobil ölçüleri =================== */
@media (max-width:767.98px){
  .hr{gap:10px}
  .hr-qa{gap:6px}
  .hr-qa-kart{height:139px; flex-direction:column; align-items:stretch; justify-content:space-between; padding:10px 8px 12px; text-align:center}
  .hr-qa-sol{flex-direction:column; gap:4px}
  .hr-qa-i{width:48px; height:48px; border-radius:12px; background:rgba(0,0,0,.2); margin:2px auto 0}
  .hr-qa-i img{width:38px; height:38px}
  .hr-qa-i img.hr-yuvarlak, .hr-qa-i img.hr-donen{width:36px; height:36px}
  .hr-qa-tx{align-items:center}
  .hr-qa-tx b{font-size:11px; line-height:14px; margin-top:6px}
  .hr-qa-tx span{font-size:9px; line-height:12px}
  .hr-btn{height:28px; width:100%; font-size:10.5px!important; padding:0 6px!important; border-radius:8px}
  .hr-qn{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hr-qn-oge{height:60px; padding:10px 2px; gap:3px}
  .hr-qn-oge::before{display:none}
  .hr-qn-oge:nth-child(n+5){border-top:1px solid rgba(255,255,255,.06)}
  .hr-qn-oge:not(:nth-child(4n+1)){border-left:1px solid rgba(255,255,255,.06)}
  .hr-qn-oge i{font-size:15px}
  .hr-qn-oge span{font-size:10.5px}
  .hr-oyunlar{grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
  .hr-oyun{height:auto; background:none; border:0; border-radius:10px}
  .hr-oyun-kapak{width:100%; height:auto; aspect-ratio:84/111; margin:0}
  .hr-oyun-bilgi{display:none}
  .hr-kazanan{width:236px}
  .hr-toplam{height:auto; min-height:103px; padding:16px 14px}
  .hr-toplam-ic{flex-direction:column; gap:8px}
  .hr-para{width:72px; height:72px; margin:-14px 0 -18px}
  .hr-toplam-tx{font-size:15px}
  .hr-toplam-tx strong{display:block; font-size:22px; margin:2px 0}
  .hr-etk{flex-basis:calc(100% - 4px); min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .hr-kazanan-iz, .hr-toplam-parilti{animation:none}
  .hr-para g{animation:none}
  .hr-para-b2{transform:rotate(-10.5deg)}
  .hr-para-b3{transform:rotate(-21deg)}
  .hr-kazanan-serit{overflow-x:auto}
}