/* ========================================================================== SPONSOR YAN BAYRAKLARI — "Altın Sahne" -------------------------------------------------------------------------- Kapsam: yalnızca .sb-* sınıfları. Site genelindeki hiçbir seçiciye dokunulmaz. Geniş ekranda ekrana sabit, dikey ortalı iki bayrak; içerik sütunu (1280px) ortalandığı için iki yanda kalan boşluğa oturur. SÜTUNA DOKUNULMAZ: sayfa ne genişler ne daralır. Yan boşluk bayrağı almıyorsa afişler akışa iner ve doğal oranıyla iki portre kart olur — aynı markup, yalnızca yerleşim değişir. ========================================================================== */ .sb-rail{ --sb-g:190px; /* bayrak genişliği */ --sb-sutun:1200px; /* sayfa içerik sütunu (ölçüldü) */ --sb-bosluk:20px; /* sütun ile bayrak arası */ --sb-mono:'JetBrains Mono',ui-monospace,Consolas,monospace; display:contents; } .sb-bayrak{ position:relative; display:flex; flex-direction:column; gap:8px; width:var(--sb-g); flex:none; text-decoration:none; } /* ---------- çerçeve ---------- */ .sb-cerceve{ position:relative; display:block; overflow:hidden; border-radius:16px; border:1px solid color-mix(in srgb,var(--k,#4ade80) 30%,rgba(148,169,214,.16)); background:linear-gradient(180deg,rgba(14,20,36,.7),rgba(6,10,20,.85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -26px rgba(0,0,0,.95), 0 0 34px -26px color-mix(in srgb,var(--k,#4ade80) 90%,transparent); transition:border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.4,0,.2,1); } .sb-cerceve img{ display:block; width:100%; height:auto; border-radius:inherit; } /* Çerçevenin üstünden geçen parlama — tıklanabilir olduğunu hissettirir. */ .sb-parla{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 48%,transparent 56%); transform:translateX(-130%); animation:sbParla 6.5s ease-in-out infinite; } .sb-sag .sb-parla{animation-delay:1.6s} @keyframes sbParla{0%,74%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}} .sb-bayrak:hover .sb-cerceve{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--k,#4ade80) 62%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -26px rgba(0,0,0,.95), 0 0 46px -20px color-mix(in srgb,var(--k,#4ade80) 90%,transparent); } /* ---------- "Reklam" etiketi ---------- Sponsorlu içerik olduğu açıkça yazılıyor; kullanıcı neye bastığını bilsin. */ .sb-et{ align-self:flex-start; padding:3px 9px; border-radius:999px; font-family:var(--sb-mono); font-size:7.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7d8ca6; background:rgba(148,169,214,.08); border:1px solid rgba(148,169,214,.16); } /* ---------- alt şerit ---------- */ .sb-alt{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:12px; border:1px solid color-mix(in srgb,var(--k,#4ade80) 24%,rgba(148,169,214,.14)); background:linear-gradient(150deg,color-mix(in srgb,var(--k,#4ade80) 12%,transparent),rgba(9,14,27,.55)); transition:border-color .2s, background .2s; } .sb-bayrak:hover .sb-alt{ border-color:color-mix(in srgb,var(--k,#4ade80) 52%,transparent); background:linear-gradient(150deg,color-mix(in srgb,var(--k,#4ade80) 18%,transparent),rgba(9,14,27,.5)); } .sb-alt b{ font-size:12.5px; font-weight:900; color:#fff; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-alt small{ margin-left:auto; font-family:var(--sb-mono); font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--k,#4ade80); white-space:nowrap; } .sb-ok{ width:11px; height:11px; flex:none; color:var(--k,#4ade80); opacity:.75; transition:transform .2s cubic-bezier(.4,0,.2,1), opacity .2s; } .sb-bayrak:hover .sb-ok{transform:translate(2px,-2px); opacity:1} /* ========================================================================== YERLEŞİM Bayraklar SAYFANIN İKİ YANINDAKİ BOŞLUĞA oturur. İçerik sütununa dokunulmaz — sayfa ne genişler ne daralır. Sütun 1280px (Tailwind max-w-7xl) ve ortalı; yan boşluk (100vw - 1280) / 2 kadar. Bayrak + nefes payı bu boşluğa sığıyorsa yanda durur, sığmıyorsa akışa iner. Sığmadığı hâlde zorlamak bayrağın içeriğin üstüne binmesi demekti. Eşik: 1200 (sütun) + 2 * 136 (bayrak 116 + boşluk 20) = 1472. ========================================================================== */ @media (min-width:1472px){ .sb-rail{ --sb-sutun:1200px; /* Bayrak, yan boşluğun izin verdiği kadar: en az 116, en çok 190. */ --sb-g:clamp(116px, calc((100vw - var(--sb-sutun)) / 2 - var(--sb-bosluk) - 30px), 190px); } .sb-bayrak{ position:fixed; top:50%; transform:translateY(-50%); z-index:26; width:var(--sb-g); } .sb-bayrak:hover{transform:translateY(-50%)} .sb-sol{right:auto; left:calc(50vw - var(--sb-sutun) / 2 - var(--sb-g) - var(--sb-bosluk))} .sb-sag{left:auto; right:calc(50vw - var(--sb-sutun) / 2 - var(--sb-g) - var(--sb-bosluk))} /* Sabit konumda hover yükselmesi çerçeveye taşınır; kapsayıcının transform'u dikey ortalamayı tutuyor. */ .sb-bayrak:hover .sb-cerceve{transform:translateY(-3px)} } /* Yan boşluk yetmiyor (tablet / telefon): afişler akışta ama KÜÇÜK ve ortalı bir çift olarak durur. Doğal oranıyla, kırpılmadan; sayfayı aşağı iten dev portre kartlar yok. */ @media (max-width:1471px){ .sb-rail{ display:flex; justify-content:center; gap:14px; margin:0 auto 20px; } .sb-bayrak{width:150px} } @media (max-width:560px){ .sb-bayrak{width:min(46vw,150px)} } @media (max-width:420px){ .sb-rail{gap:10px} .sb-alt{padding:8px 9px; gap:6px} .sb-alt b{font-size:11.5px} .sb-alt small{font-size:7.5px} } /* Topluluk yuvası açıkken sağdaki bayrak onun altında kalmasın. */ @media (min-width:1472px){ body:has(.tn-dock.acik) .sb-sag{opacity:0; pointer-events:none; transition:opacity .2s} } @media (prefers-reduced-motion:reduce){ .sb-parla{animation:none; opacity:0} .sb-cerceve,.sb-ok{transition:none} }