/* ==========================================================================
   SPONSORLAR v3 — referans (bonussoft12.com/sponsorlar) ölçüleri birebir,
   marka renkleri. Tokenlar nx-top-r.css :root'ta (--rs-*). Önek .sr-
   ========================================================================== */
@property --sr-aci{syntax:'<angle>'; inherits:true; initial-value:0turn}

.sr{max-width:1310px; margin:0 auto; font-family:var(--rs-f); color:#fff; font-weight:700}
.sr *{box-sizing:border-box}
:where(.sr) a{color:inherit; text-decoration:none}
:where(.sr) button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
.sr :focus-visible{outline:2px solid var(--rs-vurgu); outline-offset:2px}
.sr img{display:block}
.hr-gizli{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- üst kampanya alanı ---------- */
.sr-ust{position:relative; margin:0 0 16px; border-radius:10px; overflow:hidden; background:var(--rs-panel); border:1px solid var(--rs-cizgi); aspect-ratio:1150/300}
.sr-ust-ic{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s}
.sr-ust-ic.on{opacity:1; visibility:visible}
.sr-ust-ic img{width:100%; height:100%; object-fit:cover}
.sr-ust-nok{position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px}
.sr-ust-nok button{width:8px; height:8px; border-radius:4px; background:rgba(255,255,255,.35)!important; transition:width .25s, background .25s}
.sr-ust-nok button.on{width:22px; background:var(--rs-vurgu)!important}

/* ---------- arama (46px) ---------- */
.sr-ara{position:relative; margin:0 0 16px}
.sr-ara svg{position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:rgba(255,255,255,.55); pointer-events:none}
.sr-ara input{width:100%; height:46px; padding:0 44px 0 42px; border-radius:12px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); color:rgba(255,255,255,.9); font:500 12px/1 var(--rs-f); outline:0; transition:border-color .15s}
.sr-ara input::placeholder{color:rgba(255,255,255,.45)}
.sr-ara input:focus{border-color:rgba(245,196,81,.55)}
.sr-ara input::-webkit-search-cancel-button{display:none}
.sr-ara-sil{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:8px; color:rgba(255,255,255,.6)}
.sr-ara-sil:hover{background:rgba(255,255,255,.06)!important; color:#fff}
.sr-ara-sil[hidden]{display:none}

/* ---------- kayan logo şeridi (57px) ---------- */
.sr-serit{height:57px; margin:0 0 20px; overflow:hidden; background:var(--rs-panel); border:1px solid var(--rs-cizgi); border-radius:10px}
.sr-serit-iz{display:flex; width:max-content; height:100%; animation:srKay var(--sure,40s) linear infinite}
.sr-serit:hover .sr-serit-iz, .sr-serit:focus-within .sr-serit-iz{animation-play-state:paused}
.sr-serit-grup{display:flex; align-items:center; gap:10px; padding-right:10px; height:100%}
.sr-serit-grup a{display:flex; align-items:center; height:100%; padding:0 16px; flex:none}
.sr-serit-grup img{width:150px; height:35px; object-fit:contain; transition:transform .2s}
.sr-serit-grup a:hover img{transform:scale(1.06)}
@keyframes srKay{to{transform:translateX(-50%)}}

/* ---------- yan reklamların dar ekran (akış içi) karşılığı ---------- */
.sr-reklam-satir{display:none}

/* ---------- bölüm ---------- */
.sr-bolum[hidden]{display:none}
.sr-baslik{display:flex; align-items:center; gap:6px; margin:10px 0; font-size:14px; font-weight:700; line-height:21px; color:#fff; text-transform:uppercase; letter-spacing:.8px}
.sr-baslik i{color:var(--rs-vurgu); font-size:15px; filter:drop-shadow(0 0 10px rgba(245,196,81,.8))}
.sr-izgara{display:grid; gap:12px; margin:6px 0 16px}
.sr-izgara-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sr-izgara-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- sponsor kartı (ref .partner.card: 136px, köşe 14, dönen kenar ışığı) ---------- */
.sr-kart{--sr-renk:var(--rs-vurgu); position:relative; isolation:isolate; display:flex; flex-direction:column; height:136px; padding:10px 0;
  background:var(--rs-panel); border:1px solid rgba(255,255,255,.082); border-radius:14px; transition:transform .2s ease-in-out}
.sr-kart::after{content:" "; position:absolute; inset:-1px; z-index:-1; border:inherit; border-radius:inherit; pointer-events:none;
  background-image:conic-gradient(from var(--sr-aci), rgba(255,255,255,0) 80%, rgba(255,255,255,0) 88%, var(--sr-renk) 92%, rgba(255,255,255,0) 100%);
  background-origin:border-box;
  -webkit-mask-image:linear-gradient(#000,#000), linear-gradient(#000,#000); -webkit-mask-clip:content-box, border-box; -webkit-mask-composite:xor;
  mask-image:linear-gradient(#000,#000), linear-gradient(#000,#000); mask-clip:content-box, border-box; mask-composite:exclude;
  animation:srDon 3s linear infinite}
.sr-kart:active::after{animation:srFlas .4s ease-in-out 1;
  background-image:conic-gradient(from var(--sr-aci), rgba(255,255,255,0) 60%, #ffe14d 80%, var(--sr-renk) 90%, #ffe14d 100%)}
@keyframes srDon{to{--sr-aci:1turn}}
@keyframes srFlas{0%{--sr-aci:0turn}50%{--sr-aci:.5turn}100%{--sr-aci:1turn}}
.sr-kart:hover{transform:translateY(-2px)}
.sr-kart:active{transform:scale(.98)}
.sr-kart[hidden]{display:none}
.sr-kart-ust{height:70px; flex:none; display:flex; align-items:center; justify-content:center}
.sr-kart-ust img{width:80%; height:35px; object-fit:contain; transition:transform .2s ease-in-out}
.sr-kart:hover .sr-kart-ust img{transform:scale(1.05)}
.sr-kart-ad{font-size:18px; font-weight:800; letter-spacing:.02em}
.sr-kart-alt{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 5px; font-size:12px; line-height:16.8px; font-weight:600; color:rgba(255,255,255,.9)}
.sr-kart-alt b{font-weight:700; color:var(--rs-vurgu)}
.sr-kart-alt span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.sr-kart-pasif{opacity:.75}

/* VIP: yatay geniş kart (ref .vip2) */
.sr-vip{flex-direction:row; align-items:center; justify-content:space-between; gap:20px; padding:10px 28px; margin:6px 0 16px;
  background:radial-gradient(120% 140% at 0% 50%, rgba(245,196,81,.10), transparent 55%), var(--rs-panel)}
.sr-vip .sr-kart-ust{width:38%; height:100%}
.sr-vip .sr-kart-ust img{width:100%; height:55px}
.sr-vip .sr-kart-alt{flex:1; font-size:14px; line-height:20px}
.sr-vip .sr-kart-alt b{font-size:22px; line-height:28px}
.sr-vip-btn{flex:none; display:flex; align-items:center; justify-content:center; gap:8px; width:170px; height:44px; border-radius:10px; border:2px solid var(--sr-renk);
  font-size:13px; font-weight:700; position:relative; overflow:hidden; color:#fff}
.sr-vip-btn::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.45; background:linear-gradient(180deg, transparent 50%, var(--sr-renk) 100%)}
.sr-vip:hover .sr-vip-btn{background:color-mix(in srgb, var(--sr-renk) 22%, transparent)}

.sr-sonucyok{display:flex; align-items:center; justify-content:center; gap:10px; padding:28px; margin:6px 0 20px; border-radius:12px; border:1px dashed var(--rs-cizgi); color:rgba(255,255,255,.55); font-size:13px}
.sr-sonucyok[hidden]{display:none}

/* ---------- sabit yan reklamlar (ref .fix-side) ---------- */
.sr-yan{display:none}
@media (min-width:1600px){
  .sr.sr-yanli{max-width:min(1310px, calc(100vw - var(--rs-yan-w) - (160px + 20px) * 2 - 80px))}
  .sr-yan{display:block; position:fixed; top:calc(var(--rs-ust-h) + var(--rs-alt-h) + 20px); z-index:50; width:160px; aspect-ratio:420/890;
    max-height:calc(100vh - var(--rs-ust-h) - var(--rs-alt-h) - 50px); border-radius:10px; overflow:hidden; background:var(--rs-panel);
    box-shadow:0 10px 30px -12px rgba(0,0,0,.6); transition:left .3s}
  .sr-yan-sol{left:calc(var(--rs-yan-w) + 20px)}
  .sr-yan-sag{right:20px}
  .sr-yan-ic{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s}
  .sr-yan-ic.on{opacity:1; visibility:visible}
  .sr-yan-ic img{width:100%; height:100%; object-fit:cover; border-radius:10px}
  .sr-yan:hover{box-shadow:0 10px 34px -10px rgba(245,196,81,.35)}
}
@media (max-width:1599.98px){
  .sr-reklam-satir{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 16px}
  .sr-reklam-kart{display:flex; align-items:center; gap:12px; height:76px; padding:8px 14px 8px 8px; border-radius:12px; background:var(--rs-panel); border:1px solid var(--rs-cizgi); position:relative; overflow:hidden}
  .sr-reklam-kart::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--k), transparent 60%); opacity:.12; pointer-events:none}
  .sr-reklam-kart img{width:56px; height:60px; border-radius:8px; object-fit:cover; object-position:top; flex:none; position:relative}
  .sr-reklam-kart span{flex:1; min-width:0; display:flex; flex-direction:column; position:relative}
  .sr-reklam-kart b{font-size:13px}
  .sr-reklam-kart small{font-size:12px; font-weight:600; color:var(--k)}
  .sr-reklam-kart > i{font-size:12px; color:rgba(255,255,255,.5); position:relative}
}

/* =================== TABLET / MOBİL =================== */
@media (max-width:1100px){
  .sr-izgara-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .sr-ust{margin-bottom:10px}
  .sr-ara{margin-bottom:10px}
  .sr-ara input{height:44px}
  .sr-serit{height:46px; margin-bottom:12px}
  .sr-serit-grup a{padding:0 10px}
  .sr-serit-grup img{width:110px; height:28px}
  .sr-reklam-satir{grid-template-columns:1fr; gap:8px; margin-bottom:12px}
  .sr-reklam-kart{height:66px}
  .sr-baslik{font-size:12px; margin:0 0 10px}
  .sr-izgara{gap:8px; margin:0 0 16px}
  .sr-izgara-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sr-izgara-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sr-kart{height:auto; min-height:104px; padding:8px 0 10px; border-radius:12px}
  .sr-kart-ust{height:44px}
  .sr-kart-ust img{width:95%; height:30px}
  .sr-kart-alt{font-size:10px; line-height:13px; padding:0 4px}
  .sr-kart-alt span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .sr-izgara-4 .sr-kart{min-height:96px}
  .sr-izgara-4 .sr-kart-ust img{height:24px}
  .sr-izgara-4 .sr-kart-alt{font-size:9px; line-height:12px}
  .sr-vip{flex-direction:column; height:auto; padding:14px; gap:8px}
  .sr-vip .sr-kart-ust{width:100%; height:56px}
  .sr-vip .sr-kart-ust img{height:44px; width:70%}
  .sr-vip .sr-kart-alt{font-size:12px; line-height:16px}
  .sr-vip .sr-kart-alt b{font-size:18px; line-height:24px}
  .sr-vip-btn{width:100%; height:40px}
}
@media (prefers-reduced-motion:reduce){
  .sr-kart::after{animation:none; --sr-aci:.6turn}
  .sr-serit-iz{animation:none}
  .sr-serit{overflow-x:auto}
  .sr-ust-ic, .sr-yan-ic{transition:none}
}